:root {
  --bg: #0a0b0e;
  --bg-elevated: #0f1014;
  --panel: #14161b;
  --panel-2: #191b21;
  --panel-3: #22252c;
  --line: rgba(238, 240, 246, 0.085);
  --line-strong: rgba(238, 240, 246, 0.155);
  --text: #f4f2ed;
  --muted: #a5a8b0;
  --muted-2: #747883;
  --cream: #e8d6ad;
  --cream-strong: #f2dfb6;
  --ink: #17181b;
  --green: #a8adb7;
  --green-bright: #c8cbd2;
  --coral: #e58f75;
  --violet: #afa3d9;
  --shadow: 0 24px 75px rgba(0, 0, 0, 0.34);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 65% -10%, rgba(98, 102, 118, .12), transparent 32%), var(--bg); color: var(--text); font-family: "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { width: 0; height: 0; position: absolute; overflow: hidden; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 248px; display: flex; flex-direction: column; padding: 26px 18px 18px; background: rgba(9, 10, 13, .96); border-right: 1px solid var(--line); backdrop-filter: blur(22px); }
.tenant-brand { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; }
.tenant-brand strong { display: block; font: 700 19px/1.1 "Manrope"; letter-spacing: -.4px; }
.tenant-brand small { display: block; margin-top: 4px; color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }
.brand-mark { position: relative; width: 39px; height: 39px; border-radius: 13px; overflow: hidden; background: linear-gradient(145deg, #ead8b0, #a9adb6); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.brand-mark span { position: absolute; bottom: -7px; width: 16px; height: 36px; border-radius: 50%; background: #25272d; transform-origin: bottom; }
.brand-mark span:nth-child(1) { left: 2px; transform: rotate(-31deg); }
.brand-mark span:nth-child(2) { left: 12px; height: 42px; transform: rotate(-2deg); }
.brand-mark span:nth-child(3) { right: 1px; transform: rotate(28deg); }
.sidebar-collapse-button { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-2); background: rgba(255,255,255,.025); cursor: pointer; transition: .2s ease; }
.sidebar-collapse-button:hover { color: var(--cream-strong); border-color: var(--line-strong); background: rgba(255,255,255,.055); }
.sidebar-collapse-button svg { width: 15px; transform: rotate(180deg); transition: transform .2s ease; }

.main-nav { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; width: 100%; gap: 13px; padding: 12px 13px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; transition: .2s ease; text-align: left; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-item.active { color: var(--cream-strong); background: linear-gradient(90deg, rgba(240, 223, 187, .12), rgba(240, 223, 187, .035)); }
.nav-item.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 24px; border-radius: 3px; background: var(--cream); }
.nav-item svg { width: 19px; }
.nav-item span { flex: 1; font-weight: 600; font-size: 14px; }
.nav-item b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 20px; background: rgba(229,143,117,.14); color: #efad97; font-size: 10px; }
.sidebar-spacer { flex: 1; }
.weekly-card { margin: 18px 2px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(190,194,203,.08), rgba(240,223,187,.03)); }
.weekly-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--cream); background: rgba(240,223,187,.08); margin-bottom: 15px; }
.weekly-icon svg { width: 16px; }
.weekly-card > small { color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; font-size: 9px; }
.weekly-card blockquote { margin: 9px 0; color: #d9ded8; font-family: "Manrope"; font-size: 13px; line-height: 1.55; }
.weekly-card > span { color: var(--green); font-size: 10px; }
.user-switcher { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 9px; border: 1px solid transparent; background: transparent; border-radius: 14px; cursor: pointer; text-align: left; }
.user-switcher:hover { border-color: var(--line); background: rgba(255,255,255,.025); }
.user-switcher > span:nth-child(2) { flex: 1; }
.user-switcher strong, .user-switcher small { display: block; }
.user-switcher strong { font-size: 12px; }
.user-switcher small { color: var(--muted-2); margin-top: 3px; font-size: 10px; }
.user-switcher > svg { width: 15px; color: var(--muted-2); transform: rotate(90deg); }

.avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--panel); background: #3b3e46; color: #eff0f3; font-size: 9px; font-weight: 700; }
.avatar-emmanuel { width: 34px; height: 34px; background: linear-gradient(145deg, #c49b77, #6a5048); }
.a1 { background: #476861; }.a2 { background: #75574c; }.a3 { background: #5a5476; }.a4 { background: #2c4843; color: var(--green-bright); }.a-pastor { width: 36px; height: 36px; background: #6b5947; }.a-lila { width: 34px; height: 34px; background: #74534e; }

.main-area { min-height: 100vh; margin-left: 248px; }
.topbar { position: sticky; top: 0; z-index: 20; height: 78px; display: flex; align-items: center; gap: 18px; padding: 0 4.5%; border-bottom: 1px solid var(--line); background: rgba(10,11,14,.86); backdrop-filter: blur(22px); }
.search-box { width: min(430px, 42vw); height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); transition: .2s ease; }
.search-box:focus-within { border-color: rgba(240,223,187,.25); background: rgba(255,255,255,.04); }
.search-box svg { width: 17px; color: var(--muted-2); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search-box input::placeholder { color: #686c76; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mobile-tenant-brand { display: none; }
.icon-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.icon-button svg { width: 18px; }
.notification-button span { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border: 2px solid var(--bg); border-radius: 50%; background: var(--coral); }
.menu-button { display: none; }
.content-wrap { max-width: 1480px; margin: 0 auto; padding: 44px 4.5% 80px; }
.page { display: none; animation: pageIn .35s ease both; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.welcome-row, .page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.welcome-row h1, .page-title-row h1 { margin: 3px 0 7px; font: 700 clamp(26px, 3vw, 37px)/1.15 "Manrope"; letter-spacing: -1.3px; }
.welcome-row h1 span { font-size: .72em; }
.welcome-row p:last-child, .page-title-row p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.eyebrow, .kicker { color: var(--cream); text-transform: uppercase; letter-spacing: 1.6px; font-size: 9px; font-weight: 700; }
.eyebrow { margin: 0; }

.primary-button, .secondary-button, .light-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; cursor: pointer; font-weight: 700; white-space: nowrap; transition: .2s ease; }
.primary-button { min-height: 43px; padding: 0 16px; border: 0; background: var(--cream); color: var(--ink); font-size: 12px; box-shadow: 0 10px 30px rgba(240,223,187,.08); }
.primary-button:hover { background: #f7e9ca; transform: translateY(-1px); }
.primary-button svg, .secondary-button svg { width: 16px; }
.secondary-button { min-height: 43px; padding: 0 15px; border: 1px solid var(--line-strong); color: #d6dfda; background: rgba(255,255,255,.035); font-size: 12px; }
.secondary-button:hover { background: rgba(255,255,255,.07); }
.light-button { min-height: 42px; padding: 0 15px; border: 1px solid rgba(22,32,29,.13); background: rgba(246,239,222,.88); color: var(--ink); font-size: 11px; }
.light-button svg, .text-button svg { width: 15px; }
.text-button { padding: 4px; border: 0; color: var(--green-bright); background: none; font-size: 11px; }
.full { width: 100%; }

.audience-bar { min-height: 51px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.018); }
.audience-bar > span { display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .9px; }
.audience-bar > span svg { width: 14px; }
.filter-chip { min-height: 35px; padding: 0 13px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 600; cursor: pointer; }
.filter-chip:hover { color: var(--text); background: rgba(255,255,255,.035); }
.filter-chip.active { color: var(--text); border-color: var(--line); background: var(--panel-3); box-shadow: 0 5px 16px rgba(0,0,0,.12); }
.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }.coral { background: var(--coral); }.violet { background: var(--violet); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .72fr); gap: 26px; }
.home-primary { min-width: 0; }
.home-secondary { display: grid; align-content: start; gap: 18px; }
.next-event-card { position: relative; min-height: 236px; display: flex; align-items: flex-end; overflow: hidden; padding: 29px; border-radius: 25px; color: var(--ink); background: linear-gradient(120deg, #ead9b5 0%, #cbc5b8 58%, #9da1aa 100%); box-shadow: var(--shadow); }
.next-event-card::after { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(115deg, transparent 58%, rgba(255,255,255,.7)), repeating-radial-gradient(ellipse at 92% 105%, transparent 0 21px, rgba(68,70,77,.52) 22px 23px); }
.event-glow { position: absolute; top: -100px; right: 6%; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(40px); }
.event-copy { position: relative; z-index: 2; max-width: 570px; }
.soft-badge { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(24,43,39,.12); border-radius: 30px; background: rgba(255,255,255,.26); color: #44464d; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; }
.event-copy h2 { margin: 13px 0 12px; font: 700 clamp(26px, 3vw, 39px)/1.1 "Manrope"; letter-spacing: -1.4px; }
.event-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; color: #44464d; font-size: 10px; font-weight: 600; }
.event-meta span { display: flex; align-items: center; gap: 6px; }
.event-meta svg { width: 14px; }
.attendees { display: flex; margin-top: 21px; }
.attendees .avatar { margin-left: -7px; border-color: #d8d2c5; }
.attendees .avatar:first-child { margin-left: 0; }
.next-event-card .light-button { position: absolute; z-index: 3; right: 25px; bottom: 25px; }

.content-section { margin-top: 36px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-heading h2, .side-card h2 { margin: 3px 0 0; font: 700 18px "Manrope"; letter-spacing: -.45px; }
.section-heading.compact { align-items: center; }
.announcement-list { display: grid; gap: 9px; }
.announcement-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 17px; min-height: 91px; padding: 11px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(110deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); cursor: pointer; transition: .2s ease; }
.announcement-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.announcement-thumb { height: 67px; border-radius: 12px; background: var(--thumb); position: relative; overflow: hidden; }
.announcement-thumb::before, .announcement-thumb::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.announcement-thumb::before { width: 70px; height: 70px; top: 24px; left: 18px; }.announcement-thumb::after { width: 34px; height: 34px; top: 7px; left: 7px; }
.announcement-row h3 { margin: 5px 0 4px; font: 600 13px "Manrope"; }
.announcement-row p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.group-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.045); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.coral-text { color: #f0a68f; }.violet-text { color: #c3b8ec; }.church-text { color: var(--green-bright); }
.announcement-date { display: grid; place-items: center; min-width: 51px; min-height: 51px; border-left: 1px solid var(--line); color: var(--muted-2); text-align: center; font-size: 8px; text-transform: uppercase; }
.announcement-date strong { display: block; color: var(--text); font: 700 17px "Manrope"; }

.featured-teaching { display: grid; grid-template-columns: minmax(230px, .95fr) minmax(280px, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.teaching-cover { min-height: 300px; position: relative; overflow: hidden; background: #b69670; }
.cover-faith { background: radial-gradient(circle at 70% 38%, rgba(253,232,180,.75), transparent 11%), linear-gradient(155deg, transparent 35%, rgba(20,45,39,.45) 35.5% 48%, transparent 48.5%), linear-gradient(25deg, #0f2e29, #b88d69 59%, #ead59f); }
.cover-faith::before, .cover-faith::after { content: ""; position: absolute; border-radius: 50% 50% 12% 50%; background: rgba(20,48,42,.66); transform: rotate(32deg); }
.cover-faith::before { right: -20px; bottom: -34px; width: 170px; height: 240px; }.cover-faith::after { left: -55px; bottom: -110px; width: 210px; height: 240px; }
.series-label, .duration { position: absolute; z-index: 2; padding: 6px 8px; border-radius: 7px; background: rgba(10,11,14,.65); backdrop-filter: blur(8px); font-size: 8px; text-transform: uppercase; letter-spacing: .8px; }
.series-label { top: 16px; left: 16px; }.duration { right: 16px; bottom: 15px; }
.play-button { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: 58px; height: 58px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(247,239,220,.86); color: var(--ink); cursor: pointer; box-shadow: 0 10px 35px rgba(0,0,0,.18); }
.play-button svg { width: 19px; margin-left: 3px; fill: currentColor; }
.teaching-copy { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.author-row { display: flex; align-items: center; gap: 10px; }
.author-row strong, .author-row small { display: block; }.author-row strong { font-size: 10px; }.author-row small { color: var(--muted-2); margin-top: 3px; font-size: 9px; }
.teaching-copy h3 { margin: 17px 0 9px; font: 700 22px/1.25 "Manrope"; letter-spacing: -.7px; }
.teaching-copy p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 11px; }
.teaching-tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 20px; }
.teaching-tags span { padding: 6px 8px; border-radius: 7px; color: var(--green-bright); background: rgba(190,194,203,.075); font-size: 8px; }
.teaching-copy .primary-button { width: fit-content; }

.side-card { padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.015)); }
.round-arrow { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.035); cursor: pointer; }.round-arrow svg { width: 14px; }
.timeline { margin-top: 20px; }
.timeline-row { display: grid; grid-template-columns: 43px 1fr; gap: 12px; min-height: 64px; }
.timeline-date { position: relative; color: var(--muted-2); font-size: 8px; text-align: center; text-transform: uppercase; }
.timeline-date strong { display: block; color: var(--text); font: 700 15px "Manrope"; }
.timeline-date::after { content: ""; position: absolute; top: 34px; bottom: 0; left: 50%; width: 1px; background: var(--line); }
.timeline-row:last-child .timeline-date::after { display: none; }
.timeline-copy { padding: 1px 0 16px 12px; border-left: 2px solid var(--event-color, var(--green)); }
.timeline-copy strong { display: block; font-size: 11px; }.timeline-copy small { display: block; color: var(--muted-2); margin-top: 5px; font-size: 9px; }
.prayer-card { background: linear-gradient(145deg, rgba(229,143,117,.105), rgba(75,50,45,.12)); }
.prayer-top { display: flex; align-items: center; justify-content: space-between; }
.prayer-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; color: #f3b09c; background: rgba(229,143,117,.11); }.prayer-icon svg { width: 16px; }
.prayer-card h3 { margin: 17px 0 7px; font: 700 16px "Manrope"; }.prayer-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.prayer-person { display: flex; align-items: center; gap: 9px; margin-top: 17px; color: #c9d2cd; font-size: 9px; }.prayer-person span:nth-child(2) { display: grid; gap: 3px; }.prayer-person small { color: var(--muted-2); }
.pray-button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 0 12px; border: 1px solid rgba(229,143,117,.17); border-radius: 11px; color: #edaa95; background: rgba(229,143,117,.07); cursor: pointer; }
.pray-button.praying { color: var(--ink); background: #efb49f; }.pray-button svg { width: 15px; }.pray-button span { flex: 1; text-align: left; font-weight: 700; font-size: 10px; }.pray-button b { font-size: 9px; }
.quick-card h2 { margin-bottom: 12px; }
.quick-link { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.quick-link > span:nth-child(2) { flex: 1; }.quick-link strong, .quick-link small { display: block; }.quick-link strong { font-size: 10px; }.quick-link small { color: var(--muted-2); margin-top: 3px; font-size: 8px; }.quick-link > svg { width: 13px; color: var(--muted-2); }
.quick-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; }.quick-icon svg { width: 15px; }
.coral-bg { background: rgba(229,143,117,.13)!important; color: #efaa95; }.violet-bg { background: rgba(175,163,217,.13)!important; color: #c7bced; }

.cards-grid, .teaching-grid, .prayer-grid, .group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.content-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--panel); transition: .2s ease; }
.content-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card-visual { position: relative; height: 145px; background: var(--card-bg); overflow: hidden; }
.card-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.22), transparent 14%), repeating-radial-gradient(ellipse at 20% 120%, transparent 0 28px, rgba(30,31,36,.4) 29px 31px); }
.card-visual .group-badge { position: absolute; z-index: 2; top: 13px; left: 13px; background: rgba(10,11,14,.55); backdrop-filter: blur(8px); }
.card-body { padding: 18px; }.card-body h3 { margin: 0 0 8px; font: 700 15px/1.35 "Manrope"; }.card-body p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 8px; }.card-footer button { border: 0; color: var(--green-bright); background: none; font-weight: 700; cursor: pointer; }

.agenda-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.65fr); gap: 20px; }
.month-card, .day-agenda { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.month-card { padding: 23px; }.month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }.month-head h2 { margin: 0; font: 700 18px "Manrope"; }.month-head button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }.weekdays span { padding: 8px 5px; color: var(--muted-2); font-size: 8px; text-align: center; text-transform: uppercase; }.calendar-day { position: relative; min-height: 82px; padding: 10px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }.calendar-day:nth-child(7n+1) { border-left: 0; }.calendar-day.outside { color: #444751; }.calendar-day.today { background: rgba(240,223,187,.055); color: var(--cream); }.calendar-day.today > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); }.cal-event { display: block; overflow: hidden; margin-top: 8px; padding: 5px 6px; border-left: 2px solid currentColor; border-radius: 4px; color: var(--green-bright); background: rgba(190,194,203,.08); font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }.cal-event.coral-event { color: #eda18a; background: rgba(229,143,117,.08); }.cal-event.violet-event { color: #c0b5e7; background: rgba(175,163,217,.08); }
.day-agenda { padding: 23px; }.day-agenda h2 { margin: 4px 0 21px; font: 700 21px "Manrope"; }.day-event { position: relative; margin-bottom: 11px; padding: 14px 14px 14px 19px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); }.day-event::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px; background: var(--event-color); }.day-event strong { display: block; font-size: 11px; }.day-event span { display: flex; gap: 5px; margin-top: 6px; color: var(--muted-2); font-size: 8px; }.day-event button { margin-top: 12px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--green-bright); background: transparent; font-size: 8px; cursor: pointer; }

.featured-library { position: relative; min-height: 205px; display: flex; align-items: end; justify-content: space-between; overflow: hidden; margin-bottom: 33px; padding: 31px; border-radius: 23px; color: var(--ink); background: linear-gradient(110deg, #e7d5ac, #adb1ba); }.featured-library h2 { margin: 10px 0 7px; font: 700 30px "Manrope"; }.featured-library p { margin: 0 0 21px; color: #4d4f56; font-size: 11px; }.progress-line { width: 260px; max-width: 70vw; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(22,32,29,.16); }.progress-line span { display: block; height: 100%; background: #464951; }.featured-library small { display: block; margin-top: 8px; color: #5b5e66; font-size: 8px; }.cover-stack { position: relative; width: 260px; height: 170px; }.cover-stack span { position: absolute; bottom: -35px; width: 125px; height: 175px; border: 5px solid rgba(255,255,255,.25); border-radius: 8px; box-shadow: 0 18px 35px rgba(33,53,47,.25); background: linear-gradient(155deg, #1b3d35, #d6b787); }.cover-stack span:nth-child(1) { right: 95px; transform: rotate(-12deg); }.cover-stack span:nth-child(2) { right: 45px; transform: rotate(0); background: linear-gradient(155deg, #4c3d52, #bfa7d1); }.cover-stack span:nth-child(3) { right: 0; transform: rotate(11deg); background: linear-gradient(155deg, #6e483a, #ebaa83); }
.type-filters { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; }.type-filters button { padding: 6px 9px; border: 0; border-radius: 7px; color: var(--muted-2); background: transparent; font-size: 8px; cursor: pointer; }.type-filters button.active { color: var(--text); background: var(--panel-3); }
.teaching-card .card-visual { height: 170px; }.teaching-card .play-button { width: 43px; height: 43px; }.teaching-card .duration { right: 12px; bottom: 10px; }.teaching-card .card-footer span { display: flex; align-items: center; gap: 5px; }.teaching-card .card-footer svg { width: 12px; }

.privacy-callout { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 14px 16px; border: 1px solid rgba(190,194,203,.13); border-radius: 14px; background: rgba(190,194,203,.045); }.privacy-callout > svg { width: 20px; color: var(--green-bright); }.privacy-callout strong { display: block; font-size: 10px; }.privacy-callout p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.prayer-item { padding: 19px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.012)); }.prayer-item header { display: flex; justify-content: space-between; align-items: center; }.prayer-item h3 { margin: 20px 0 7px; font: 700 15px "Manrope"; }.prayer-item > p { min-height: 48px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.prayer-item footer { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }.prayer-item footer span:nth-child(2) { flex: 1; font-size: 8px; color: var(--muted); }.prayer-item footer button { padding: 7px 9px; border: 1px solid rgba(229,143,117,.15); border-radius: 8px; color: #eaa28d; background: rgba(229,143,117,.06); font-size: 8px; cursor: pointer; }.prayer-item footer button.praying { color: var(--ink); background: #efb49f; }

.my-groups-strip { display: flex; align-items: center; gap: 14px; margin-bottom: 35px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }.my-groups-strip > div:first-child { flex: 1; }.my-groups-strip h2 { margin: 4px 0 0; font: 700 17px "Manrope"; }.mini-group { min-width: 145px; display: grid; grid-template-columns: 36px 1fr; column-gap: 9px; padding: 10px; border-radius: 12px; }.mini-group > span { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.08); font-weight: 800; }.mini-group strong { align-self: end; color: var(--text); font-size: 9px; }.mini-group small { align-self: start; color: var(--muted); font-size: 8px; }
.small-search { height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; }.small-search svg { width: 13px; color: var(--muted-2); }.small-search input { width: 145px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 9px; }
.group-card { position: relative; overflow: hidden; min-height: 235px; display: flex; flex-direction: column; padding: 19px; border: 1px solid var(--line); border-radius: 20px; background: var(--group-bg); }.group-card::before { content: ""; position: absolute; width: 170px; height: 170px; top: -90px; right: -60px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.015), 0 0 0 50px rgba(255,255,255,.01); }.group-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(0,0,0,.11); font: 800 15px "Manrope"; }.group-card h3 { margin: 0 0 6px; font: 700 17px "Manrope"; }.group-card > p { flex: 1; margin: 0; color: #b8bbc2; font-size: 9px; line-height: 1.55; }.group-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }.group-meta span { color: var(--muted); font-size: 8px; }.group-meta button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(255,255,255,.06); font-size: 8px; font-weight: 700; cursor: pointer; }.group-meta button.joined { color: var(--green-bright); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(4,5,8,.78); backdrop-filter: blur(10px); }.modal-backdrop.open { display: grid; }.modal { position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 31px; border: 1px solid var(--line-strong); border-radius: 23px; background: #15171c; box-shadow: 0 30px 100px rgba(0,0,0,.5); animation: modalIn .25s ease both; }.teaching-modal { width: min(720px, 100%); }.modal-close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(12,13,17,.78); cursor: pointer; }.modal-close svg { width: 16px; }.modal-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 13px; color: #f0aa95; background: rgba(229,143,117,.1); }.modal-icon svg { width: 18px; }.modal h2 { margin: 6px 0 8px; font: 700 24px/1.25 "Manrope"; letter-spacing: -.7px; }.modal > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.modal form { margin-top: 22px; }.modal form > label, .modal fieldset { display: block; margin: 0 0 17px; border: 0; padding: 0; color: #d7d8dc; font-size: 10px; font-weight: 600; }.modal textarea { width: 100%; min-height: 92px; resize: vertical; margin-top: 8px; padding: 12px; outline: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(255,255,255,.025); font-size: 11px; }.modal textarea:focus { border-color: rgba(240,223,187,.25); }.modal legend { margin-bottom: 8px; }.radio-card { display: inline-block!important; width: calc(33.333% - 6px); margin: 0 5px 0 0!important; vertical-align: top; }.radio-card input { position: absolute; opacity: 0; }.radio-card > span { min-height: 89px; display: flex; flex-direction: column; padding: 11px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }.radio-card input:checked + span { border-color: rgba(240,223,187,.35); background: rgba(240,223,187,.06); }.radio-card svg { width: 16px; margin-bottom: 10px; color: var(--green-bright); }.radio-card strong { font-size: 9px; }.radio-card small { margin-top: 3px; color: var(--muted-2); font-size: 7px; line-height: 1.3; }.toggle-row { display: flex!important; align-items: center; justify-content: space-between; gap: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }.toggle-row strong, .toggle-row small { display: block; }.toggle-row small { margin-top: 4px; color: var(--muted-2); font-size: 8px; font-weight: 400; }.toggle-row input { appearance: none; width: 36px; height: 21px; padding: 3px; border-radius: 20px; background: #383b43; cursor: pointer; }.toggle-row input::before { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: #a8abb3; transition: .2s ease; }.toggle-row input:checked { background: var(--cream); }.toggle-row input:checked::before { transform: translateX(15px); background: var(--ink); }
.modal-video { position: relative; height: 250px; margin: -31px -31px 25px; }.teaching-modal > .group-badge { margin-bottom: 7px; }.teaching-tabs { display: flex; overflow-x: auto; gap: 4px; margin: 22px 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }.teaching-tabs button { padding: 7px 10px; border: 0; border-radius: 7px; color: var(--muted-2); background: transparent; font-size: 8px; cursor: pointer; }.teaching-tabs button.active { color: var(--cream); background: rgba(240,223,187,.07); }.tab-copy h3 { margin: 0 0 7px; font: 700 13px "Manrope"; }.tab-copy > p { color: var(--muted); font-size: 10px; line-height: 1.65; }.action-box { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px; border: 1px solid rgba(190,194,203,.12); border-radius: 13px; background: rgba(190,194,203,.04); }.action-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--green-bright); background: rgba(190,194,203,.1); }.action-icon svg { width: 15px; }.action-box div { flex: 1; }.action-box strong { font-size: 9px; }.action-box p { margin: 3px 0 0; color: var(--muted); font-size: 8px; }.action-box button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--green-bright); background: transparent; font-size: 8px; cursor: pointer; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 25px; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--cream); box-shadow: 0 15px 45px rgba(0,0,0,.3); font-size: 10px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast svg { width: 15px; }
.mobile-nav { display: none; }
.audience-item.hidden-by-filter, .content-card.hidden-by-filter, .prayer-item.hidden-by-filter { display: none; }

@media (max-width: 1120px) {
  .home-grid { grid-template-columns: minmax(0,1.45fr) minmax(260px,.72fr); gap: 18px; }
  .featured-teaching { grid-template-columns: 1fr; }.teaching-cover { min-height: 220px; }.cards-grid, .teaching-grid, .prayer-grid, .group-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .next-event-card .light-button { display: none; }
}

@media (min-width: 901px) {
  .app-shell.sidebar-collapsed .sidebar { width: 78px; padding-inline: 13px; }
  .app-shell.sidebar-collapsed .main-area { margin-left: 78px; }
  .app-shell.sidebar-collapsed .tenant-brand { justify-content: center; padding-inline: 0; }
  .app-shell.sidebar-collapsed .tenant-brand > div:nth-child(2),
  .app-shell.sidebar-collapsed .nav-item span,
  .app-shell.sidebar-collapsed .nav-item b,
  .app-shell.sidebar-collapsed .weekly-card,
  .app-shell.sidebar-collapsed .user-switcher > span:nth-child(2),
  .app-shell.sidebar-collapsed .user-switcher > svg { display: none; }
  .app-shell.sidebar-collapsed .nav-item,
  .app-shell.sidebar-collapsed .user-switcher { justify-content: center; padding-inline: 0; }
  .app-shell.sidebar-collapsed .sidebar-collapse-button { position: absolute; top: 5px; right: -24px; z-index: 1; border-radius: 0 9px 9px 0; }
  .app-shell.sidebar-collapsed .sidebar-collapse-button svg { transform: rotate(0); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.4); }.sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }.menu-button { display: grid; }.mobile-tenant-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }.mobile-tenant-brand .brand-mark { flex: 0 0 auto; width: 39px; height: 39px; }.mobile-tenant-brand strong, .mobile-tenant-brand small { display: block; white-space: nowrap; }.mobile-tenant-brand strong { font: 700 16px/1.1 "Manrope"; letter-spacing: -.25px; }.mobile-tenant-brand small { margin-top: 3px; color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }.sidebar-collapse-button { display: none; }.search-box { width: min(420px, 52vw); }.home-grid { grid-template-columns: 1fr; }.home-secondary { grid-template-columns: repeat(2, 1fr); }.schedule-card { grid-row: span 2; }.agenda-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  body { padding-bottom: 68px; }.topbar { height: 64px; gap: 12px; padding: 0 15px; }.search-box { display: none; }.mobile-tenant-brand { gap: 8px; }.mobile-tenant-brand .brand-mark { width: 36px; height: 36px; border-radius: 12px; }.mobile-tenant-brand strong { font-size: 14px; }.mobile-tenant-brand small { font-size: 8px; letter-spacing: .85px; }.content-wrap { padding: 26px 15px 45px; }.welcome-row, .page-title-row { align-items: flex-start; margin-bottom: 23px; }.welcome-row .secondary-button, .page-title-row .admin-only { width: 42px; min-width: 42px; height: 42px; overflow: hidden; padding: 0; font-size: 0; }.welcome-row h1, .page-title-row h1 { font-size: 27px; }.welcome-row p:last-child, .page-title-row p:last-child { font-size: 12px; line-height: 1.45; }.audience-bar { flex-wrap: nowrap; overflow-x: auto; margin-right: -15px; border-right: 0; border-radius: 14px 0 0 14px; scrollbar-width: none; }.audience-bar::-webkit-scrollbar { display: none; }.audience-bar > span { display: none; }.filter-chip { flex: 0 0 auto; }.next-event-card { min-height: 254px; padding: 22px; align-items: flex-end; }.event-copy h2 { font-size: 28px; }.event-meta { gap: 9px; max-width: 260px; }.home-secondary { grid-template-columns: 1fr; }.schedule-card { grid-row: auto; }.featured-teaching { display: block; }.teaching-cover { min-height: 200px; }.teaching-copy { padding: 21px; }.teaching-copy h3 { font-size: 19px; }.announcement-row { grid-template-columns: 70px 1fr; gap: 12px; }.announcement-date { display: none; }.announcement-thumb { height: 64px; }.cards-grid, .teaching-grid, .prayer-grid, .group-grid { grid-template-columns: 1fr; }.agenda-layout { gap: 15px; }.month-card { overflow-x: auto; padding: 17px; }.weekdays, .calendar-grid { min-width: 560px; }.featured-library { min-height: 240px; padding: 24px; }.cover-stack { position: absolute; opacity: .38; right: -55px; bottom: 0; }.featured-library > div:first-child { position: relative; z-index: 2; }.section-heading { align-items: flex-start; }.type-filters { display: none; }.my-groups-strip { display: grid; grid-template-columns: 1fr 1fr; }.my-groups-strip > div:first-child { grid-column: span 2; }.mini-group { min-width: 0; }.small-search { display: none; }.modal { padding: 24px 18px; border-radius: 19px; }.modal-video { height: 205px; margin: -24px -18px 22px; }.radio-card { display: block!important; width: 100%; margin: 0 0 7px!important; }.radio-card > span { min-height: 0; display: grid; grid-template-columns: 28px 1fr; }.radio-card svg { grid-row: span 2; margin: 2px 0 0; }.action-box { align-items: flex-start; flex-wrap: wrap; }.action-box button { margin-left: 43px; }.mobile-nav { position: fixed; z-index: 50; inset: auto 0 0; height: 66px; display: flex; justify-content: space-around; padding: 7px 6px 5px; border-top: 1px solid var(--line); background: rgba(9,10,13,.96); backdrop-filter: blur(20px); }.mobile-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; color: var(--muted-2); background: transparent; font-size: 7px; cursor: pointer; }.mobile-nav button svg { width: 18px; height: 18px; }.mobile-nav button.active { color: var(--cream); }.mobile-nav button.active span { font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important; } }

/* Group and announcement management */
.group-header-actions { display:flex; align-items:center; gap:10px; }
.my-groups-list { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mini-group { border:1px solid transparent; cursor:pointer; transition:.2s ease; }
.mini-group:hover { border-color:var(--line-strong); transform:translateY(-1px); }
.group-card { cursor:pointer; transition:.2s ease; }
.group-card:hover { transform:translateY(-3px); border-color:rgba(240,223,187,.22); box-shadow:0 18px 38px rgba(0,0,0,.17); }
.group-card:focus-visible { outline:2px solid var(--cream); outline-offset:3px; }
.group-card > * { position:relative; z-index:1; }
.group-meta button { position:relative; z-index:2; }

.group-create-modal { width:min(760px,100%); }
.group-modal-icon { color:var(--green-bright); background:rgba(190,194,203,.1); }
.announcement-modal-icon { color:var(--cream); background:rgba(240,223,187,.1); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:block!important; margin:0 0 16px!important; color:#d7d8dc; font-size:10px; font-weight:700; }
.field > span { display:block; margin-bottom:8px; }
.field input,.field select,.field textarea { width:100%; min-height:43px; padding:0 12px; border:1px solid var(--line); border-radius:11px; outline:0; color:var(--text); background:rgba(255,255,255,.028); font-size:11px; }
.field textarea { min-height:88px; padding:12px; resize:vertical; line-height:1.5; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:rgba(240,223,187,.32); background:rgba(255,255,255,.045); }
.field select option { color:#1b1c20; background:#f0efe9; }
.field > small { display:block; margin-top:6px; color:var(--muted-2); font-size:8px; text-align:right; font-weight:400; }
.theme-fieldset,.invite-fieldset { margin:0 0 17px; padding:0; border:0; }
.theme-fieldset legend,.invite-fieldset legend { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:#d7d8dc; font-size:10px; font-weight:700; }
.theme-fieldset legend svg { width:15px; color:var(--cream); }
.invite-fieldset legend small { color:var(--muted-2); font-weight:400; }
.theme-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.theme-picker label { min-width:0; }
.theme-picker input { position:absolute; opacity:0; pointer-events:none; }
.theme-swatch { display:block; padding:6px; border:1px solid var(--line); border-radius:11px; cursor:pointer; transition:.2s ease; }
.theme-swatch i { display:block; height:43px; border-radius:7px; background:var(--swatch); }
.theme-swatch b { display:block; margin-top:6px; color:var(--muted); font-size:8px; text-align:center; }
.theme-picker input:checked + .theme-swatch { border-color:var(--cream); background:rgba(240,223,187,.06); box-shadow:0 0 0 2px rgba(240,223,187,.08); }
.theme-picker input:checked + .theme-swatch b { color:var(--cream); }
.theme-forest { --swatch:linear-gradient(145deg,#183b34,#42675c); }.theme-terracotta { --swatch:linear-gradient(145deg,#57352f,#9c6150); }.theme-violet { --swatch:linear-gradient(145deg,#302a4f,#655b8b); }.theme-ocean { --swatch:linear-gradient(145deg,#243e50,#4e7584); }.theme-sand { --swatch:linear-gradient(145deg,#654a34,#b0835d); }
.member-search { height:39px; display:flex!important; align-items:center; gap:8px; margin:0 0 8px!important; padding:0 11px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.member-search svg { width:14px; color:var(--muted-2); }.member-search input { flex:1; border:0; outline:0; color:var(--text); background:transparent; font-size:10px; }
.member-picker { max-height:177px; overflow:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding-right:3px; }
.member-choice { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.2s ease; }
.member-choice:hover { border-color:var(--line-strong); }.member-choice input { accent-color:#d9c99f; }.member-choice .avatar { width:30px; height:30px; }
.member-choice > span:last-child { display:grid; gap:2px; }.member-choice strong { font-size:9px; }.member-choice small { color:var(--muted-2); font-size:7px; }
.member-choice:has(input:checked) { border-color:rgba(240,223,187,.28); background:rgba(240,223,187,.05); }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; padding-top:17px; border-top:1px solid var(--line); }

.drawer-backdrop { position:fixed; inset:0; z-index:89; visibility:hidden; opacity:0; background:rgba(3,4,7,.62); backdrop-filter:blur(5px); transition:.28s ease; }
.drawer-backdrop.open { visibility:visible; opacity:1; }
.group-drawer { position:fixed; z-index:90; top:0; right:0; width:min(520px,100vw); height:100vh; overflow:auto; border-left:1px solid var(--line-strong); background:#121419; box-shadow:-30px 0 80px rgba(0,0,0,.35); transform:translateX(103%); visibility:hidden; transition:transform .32s cubic-bezier(.22,.8,.24,1), visibility 0s linear .32s; }
.group-drawer.open { transform:translateX(0); visibility:visible; transition-delay:0s; }
.drawer-close { position:absolute; z-index:4; top:18px; right:18px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#fff; background:rgba(8,9,12,.62); backdrop-filter:blur(8px); cursor:pointer; }.drawer-close svg { width:17px; }
.drawer-cover { position:relative; min-height:270px; display:flex; align-items:flex-end; gap:16px; overflow:hidden; padding:38px 28px 28px; background:var(--drawer-bg); }
.drawer-cover::after { content:""; position:absolute; width:280px; height:280px; top:-130px; right:-80px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 76px rgba(255,255,255,.015); }
.drawer-cover > * { position:relative; z-index:2; }.drawer-cover .group-icon { flex:0 0 auto; width:58px; height:58px; font-size:20px; }.drawer-cover h2 { margin:9px 0 6px; font:700 29px/1.15 "Manrope"; letter-spacing:-.9px; }.drawer-cover p { max-width:330px; margin:0; color:rgba(238,240,244,.74); font-size:10px; line-height:1.5; }
.drawer-summary { display:flex; align-items:center; gap:24px; padding:18px 25px; border-bottom:1px solid var(--line); }.drawer-summary > span { display:grid; gap:2px; }.drawer-summary strong { font:700 17px "Manrope"; }.drawer-summary small { color:var(--muted-2); font-size:7px; text-transform:uppercase; letter-spacing:.8px; }.drawer-summary .primary-button { margin-left:auto; }
.drawer-tabs { position:sticky; top:0; z-index:3; display:flex; gap:4px; padding:11px 24px; border-bottom:1px solid var(--line); background:rgba(18,20,25,.95); backdrop-filter:blur(16px); }.drawer-tabs button { padding:8px 12px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:9px; font-weight:700; cursor:pointer; }.drawer-tabs button.active { color:var(--cream); background:rgba(240,223,187,.08); }
.drawer-content { padding:23px 25px 42px; }
.drawer-section { margin-bottom:24px; }.drawer-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }.drawer-section-heading h3 { margin:0; font:700 14px "Manrope"; }.drawer-section-heading button { border:0; color:var(--green-bright); background:transparent; font-size:8px; cursor:pointer; }
.drawer-event { display:flex; align-items:center; gap:13px; padding:13px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.022); }.drawer-event-date { width:42px; height:48px; display:grid; place-items:center; border-radius:10px; color:var(--ink); background:var(--cream); font-size:7px; text-transform:uppercase; }.drawer-event-date strong { display:block; font:700 15px "Manrope"; }.drawer-event > div:nth-child(2) { flex:1; }.drawer-event h4 { margin:0 0 5px; font-size:10px; }.drawer-event p { margin:0; color:var(--muted-2); font-size:8px; }.drawer-event > svg { width:14px; color:var(--muted-2); }
.drawer-feed-item { display:grid; grid-template-columns:36px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }.drawer-feed-item:last-child { border-bottom:0; }.drawer-feed-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--green-bright); background:rgba(190,194,203,.08); }.drawer-feed-icon svg { width:15px; }.drawer-feed-item strong { display:block; font-size:9px; }.drawer-feed-item p { margin:4px 0 0; color:var(--muted); font-size:8px; line-height:1.45; }
.member-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }.member-row .avatar { width:36px; height:36px; }.member-row > span:nth-child(2) { flex:1; display:grid; gap:3px; }.member-row strong { font-size:9px; }.member-row small { color:var(--muted-2); font-size:8px; }.member-status { padding:5px 7px; border-radius:7px; color:var(--green-bright); background:rgba(190,194,203,.08); font-size:7px; }.member-status.invited { color:#e6c39e; background:rgba(229,143,117,.09); }
.activity-row { position:relative; padding:3px 0 18px 22px; border-left:1px solid var(--line); }.activity-row::before { content:""; position:absolute; left:-4px; top:4px; width:7px; height:7px; border-radius:50%; background:var(--green); }.activity-row:last-child { border-left-color:transparent; }.activity-row strong { display:block; font-size:9px; }.activity-row p { margin:4px 0; color:var(--muted); font-size:8px; line-height:1.45; }.activity-row small { color:var(--muted-2); font-size:7px; }

.announcement-drawer-visual { position:relative; height:245px; padding:25px; background:var(--announcement-bg); overflow:hidden; }.announcement-drawer-visual::before { content:""; position:absolute; inset:0; background:repeating-radial-gradient(ellipse at 4% 110%,transparent 0 30px,rgba(30,31,36,.42) 31px 33px); }.announcement-drawer-visual .group-badge { position:relative; z-index:2; }.announcement-drawer-body { padding:28px; }.announcement-drawer-body h2 { margin:8px 0 13px; font:700 26px/1.25 "Manrope"; letter-spacing:-.7px; }.announcement-drawer-body > p:not(.eyebrow) { color:#c2c4ca; font-size:12px; line-height:1.75; white-space:pre-line; }.announcement-info { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:25px 0; }.announcement-info > span { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); }.announcement-info svg { width:16px; color:var(--green-bright); }.announcement-info span span { display:grid; gap:3px; }.announcement-info small { color:var(--muted-2); font-size:7px; text-transform:uppercase; }.announcement-info strong { font-size:9px; }
.content-card { cursor:pointer; }.content-card .card-footer button { position:relative; z-index:2; }

@media (max-width:650px) {
  .group-header-actions { gap:7px; }.group-header-actions .secondary-button { display:none; }.group-header-actions .primary-button { width:42px; min-width:42px; padding:0; font-size:0; }.group-header-actions .primary-button svg { width:17px; }
  .my-groups-strip { grid-template-columns:1fr; }.my-groups-strip > div:first-child { grid-column:auto; }.my-groups-list { display:grid; grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; gap:0; }.theme-picker { grid-template-columns:repeat(3,1fr); }.member-picker { grid-template-columns:1fr; }.group-create-modal { padding-bottom:28px; }
  .group-drawer { width:100vw; }.drawer-cover { min-height:230px; padding:65px 20px 23px; }.drawer-summary { gap:15px; padding:15px 19px; }.drawer-summary .primary-button { min-width:42px; padding:0 12px; }.drawer-content { padding:20px 18px 35px; }.announcement-info { grid-template-columns:1fr; }
}
/* Functional agenda */
.agenda-header-actions { display:flex; align-items:center; gap:10px; }
.agenda-header-actions .secondary-button, .agenda-header-actions .primary-button { white-space:nowrap; }
.month-card { overflow:hidden; }
.month-head button { display:grid; place-items:center; color:var(--text); font-size:19px; transition:.2s ease; }
.month-head button:hover { border-color:rgba(240,223,187,.28); color:var(--cream); background:rgba(240,223,187,.06); }
.calendar-grid { overflow:hidden; border-radius:0 0 14px 14px; }
.calendar-day { width:100%; min-width:0; display:block; border-right:0; border-bottom:0; border-radius:0; color:var(--muted); background:transparent; text-align:left; font:inherit; cursor:pointer; transition:background .18s ease, box-shadow .18s ease; }
.calendar-day:hover { z-index:1; background:rgba(255,255,255,.032); }
.calendar-day:focus-visible { z-index:2; outline:2px solid var(--cream); outline-offset:-2px; }
.calendar-day.selected { z-index:1; background:rgba(190,194,203,.075); box-shadow:inset 0 0 0 1px rgba(190,194,203,.22); }
.calendar-day.today { background:rgba(240,223,187,.045); }
.calendar-day.today.selected { background:rgba(240,223,187,.085); }
.calendar-day > span:first-child { display:inline-grid; place-items:center; min-width:25px; height:25px; }
.calendar-day.today > span:first-child { border-radius:50%; background:var(--cream); color:var(--ink); }
.cal-event { width:100%; display:block; overflow:hidden; margin-top:7px; padding:5px 6px; border:0; border-left:2px solid var(--event-color); border-radius:4px; color:var(--event-color); background:color-mix(in srgb,var(--event-color) 10%,transparent); font-size:7px; text-align:left; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.cal-event:hover { background:color-mix(in srgb,var(--event-color) 18%,transparent); }
.cal-more { display:block; margin-top:5px; color:var(--muted-2); font-size:7px; }
.day-agenda { min-height:510px; }
.day-agenda-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.day-agenda-heading h2 { margin-bottom:20px; }
.day-agenda-heading > button { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(240,223,187,.18); border-radius:10px; color:var(--cream); background:rgba(240,223,187,.06); cursor:pointer; }
.day-agenda-heading > button svg { width:15px; }
.day-event { cursor:default; transition:.2s ease; }
.day-event:hover { border-color:rgba(190,194,203,.18); background:rgba(255,255,255,.03); }
.day-event-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.day-event-top small { color:var(--muted-2); font-size:7px; }
.day-event > span { align-items:center; }
.day-event > span svg { width:12px; height:12px; }
.day-event .open-event-details { color:var(--cream); background:rgba(240,223,187,.045); }
.empty-day { display:grid; justify-items:center; padding:55px 12px; text-align:center; }
.empty-day > span { width:46px; height:46px; display:grid; place-items:center; margin-bottom:14px; border-radius:14px; color:var(--green-bright); background:rgba(190,194,203,.08); }
.empty-day > span svg { width:20px; }
.empty-day h3 { margin:0 0 7px; font:700 13px "Manrope"; }
.empty-day p { max-width:210px; margin:0 0 17px; color:var(--muted); font-size:9px; line-height:1.5; }
.event-create-modal { width:min(730px,calc(100vw - 28px)); max-height:min(870px,calc(100vh - 28px)); overflow:auto; }
.event-modal-icon { color:#c7bce9; background:rgba(175,163,217,.11); }
.event-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 18px; }
.event-options .toggle-row { margin:0; border:1px solid var(--line); border-radius:12px; }
.event-public-toggle { grid-column:1 / -1; }
.event-theme-picker { grid-template-columns:repeat(4,1fr); }
.event-drawer { background:#121419; }
.event-drawer-cover { position:relative; min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:36px 29px 30px; background:var(--event-drawer-bg); }
.event-drawer-cover::after { content:""; position:absolute; width:340px; height:340px; top:-180px; right:-100px; border:1px solid rgba(255,255,255,.13); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.014); }
.event-drawer-cover > * { position:relative; z-index:1; }
.event-drawer-cover .group-badge { align-self:flex-start; margin-bottom:auto; }
.event-drawer-cover .eyebrow { margin:30px 0 7px; color:rgba(255,255,255,.65); }
.event-drawer-cover h2 { max-width:430px; margin:0 0 10px; font:700 30px/1.15 "Manrope"; letter-spacing:-.8px; }
.event-drawer-cover > p:last-child { max-width:430px; margin:0; color:rgba(245,248,246,.76); font-size:11px; line-height:1.6; }
.event-drawer-body { padding:25px 27px 42px; }
.event-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.event-detail-grid > span { min-width:0; display:flex; align-items:center; gap:10px; padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018); }
.event-detail-grid > span > svg { width:17px; flex:0 0 auto; color:var(--green-bright); }
.event-detail-grid > span > span { min-width:0; display:grid; gap:3px; }
.event-detail-grid small { color:var(--muted-2); font-size:7px; text-transform:uppercase; letter-spacing:.6px; }
.event-detail-grid strong { overflow:hidden; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.event-attendance-card { margin:18px 0; padding:16px; border:1px solid rgba(190,194,203,.15); border-radius:14px; background:rgba(190,194,203,.045); }
.event-attendance-card > div:first-child strong { display:block; font-size:11px; }
.event-attendance-card > div:first-child p { margin:4px 0 13px; color:var(--muted); font-size:8px; }
.event-attendance-card > div:last-child { display:flex; gap:8px; }
.attendance-button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.attendance-button svg { width:13px; }
.attendance-button.active { border-color:rgba(190,194,203,.35); color:var(--ink); background:var(--green-bright); }
.event-drawer-actions { display:grid; gap:8px; }
.event-drawer-actions button.active { border-color:rgba(240,223,187,.26); color:var(--cream); background:rgba(240,223,187,.07); }
.event-admin-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:20px; padding-top:17px; border-top:1px solid var(--line); }
.event-admin-actions[hidden], #openMeetingButton[hidden], .event-attendance-card[hidden] { display:none!important; }
.event-admin-actions button { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.event-admin-actions button svg { width:14px; }
.event-admin-actions .danger-button { color:#e59b8c; border-color:rgba(229,143,117,.18); }
.event-admin-actions .danger-button[data-confirm="yes"] { color:#fff; background:#8b4138; }

@media (max-width:650px) {
  .agenda-header-actions { gap:7px; }
  .agenda-header-actions .secondary-button { display:none; }
  .agenda-header-actions .primary-button { width:42px; min-width:42px; padding:0; overflow:hidden; font-size:0; }
  .agenda-header-actions .primary-button svg { width:17px; }
  .event-options { grid-template-columns:1fr; }
  .event-theme-picker { grid-template-columns:repeat(2,1fr); }
  .event-drawer-cover { min-height:250px; padding:65px 20px 24px; }
  .event-drawer-cover h2 { font-size:25px; }
  .event-drawer-body { padding:21px 18px 36px; }
  .event-detail-grid { grid-template-columns:1fr; }
}