/* Version 49: cohesive settings, date pickers, liturgy text and invitation flow. */
.customMonthGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:2px;max-height:55svh;overflow:auto}
.monthPickerNative+.customPickerWrap{display:none!important}
.holidayPreference[hidden]{display:none!important}
.customMonthOption{min-height:48px;padding:10px 7px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.customMonthOption:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 15%,transparent)}
.customMonthOption.selected{background:color-mix(in srgb,var(--primary) 18%,var(--surface));border-color:var(--primary);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 55%,transparent)}
.customMonthOption.today:not(.selected){border-color:color-mix(in srgb,var(--primary) 60%,var(--border));color:var(--primary)}
.liturgyPsalmStructured .liturgyPsalmRaw{margin:0;font-weight:400;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.service.serviceToday{position:relative;border-color:color-mix(in srgb,var(--primary) 72%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 11%,var(--card)),var(--card) 68%);box-shadow:inset 3px 0 0 var(--primary),0 12px 30px color-mix(in srgb,var(--primary) 9%,transparent)}
.service.serviceToday:after{content:'DZIŚ';position:absolute;top:10px;right:12px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--primary) 14%,var(--card));color:var(--primary);font-size:9px;font-weight:850;letter-spacing:.08em;pointer-events:none}
.service.serviceToday .serviceTop{padding-right:42px}

#settings.panel.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
#settings>.topHero{grid-column:1/-1}
#settings>.settingsCard{width:100%;min-width:0;margin:0;padding:22px;border:1px solid color-mix(in srgb,var(--border) 80%,var(--primary) 20%);border-radius:24px;background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--primary) 8%,transparent),transparent 52%),linear-gradient(150deg,color-mix(in srgb,var(--card) 98%,var(--primary) 2%),var(--card));box-shadow:0 12px 32px rgba(0,0,0,.09);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;animation:settingsCardEnter .42s both}
#settings>.settingsCard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 38%,var(--border));box-shadow:0 18px 42px rgba(0,0,0,.13)}
#settings>.profileSettingsCard,#settings>.appearanceSettingsCard,#settings>.accountSecuritySettingsCard,#settings>.notificationSettingsCard{grid-column:1/-1}
#settings>.profileSettingsCard{order:1}
#settings>.twoFactorSettingsCard{order:2}
#settings>.passwordSettingsCard{order:3}
#settings>.appearanceSettingsCard{order:4}
#settings>#holidayPreferenceRow{order:5;grid-column:1/-1;grid-row:auto}
#settings>.accountSecuritySettingsCard{order:6}
#settings>.notificationSettingsCard{order:7}
#settings>.settingsVersion{grid-column:1/-1;order:9;justify-self:end}
#settings .settingsCardHeader{padding:0 0 15px;margin-bottom:17px;border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent)}
#settings>.settingsCard .settingsSectionIcon{width:46px;height:46px;flex-basis:46px;border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 18%,var(--card)),color-mix(in srgb,var(--primary) 7%,var(--surface)));box-shadow:inset 0 1px rgba(255,255,255,.12),0 6px 16px color-mix(in srgb,var(--primary) 13%,transparent)}
#settings .settingsCardHeader h2{font-size:clamp(17px,1.3vw,20px);letter-spacing:-.035em}
#settings .settingsCardHeader p{max-width:740px;line-height:1.6}
#settings .settingsSectionTag{padding:7px 11px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--muted)}
#settings .profileSettingsCard .formGrid{gap:16px}
#settings .settingsCard .input,#settings .settingsCard .textarea,#settings .settingsCard .select{min-height:45px;border-radius:13px}
#settings .settingsCard .textarea{min-height:100px}
#settings .settingsCard .button{min-height:43px;border-radius:13px;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
#settings .settingsCard .button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 20px rgba(0,0,0,.14)}
#settings .themeGrid{gap:13px}
#settings .themeCard{min-height:140px;border-radius:18px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
#settings .themeCard:hover{transform:translateY(-3px)}
#settings .settingsVersion{opacity:.62;font-size:11px;letter-spacing:.02em}
#settings>.settingsCard:not(.profileSettingsCard,.appearanceSettingsCard,.passwordSettingsCard,.twoFactorSettingsCard,.accountSecuritySettingsCard,.notificationSettingsCard){order:8}

.inviteModalIntro{margin:0 0 16px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--primary) 7%,var(--card));color:var(--muted);font-size:13px;line-height:1.55}
.inviteModalGrid{gap:14px}
.inviteProfileBlock{display:grid;gap:7px;padding:16px;border:1px solid var(--border);border-radius:17px;background:color-mix(in srgb,var(--surface) 68%,transparent)}
.inviteProfileBlock>.formGrid{gap:13px;margin-top:7px}
.inviteApprovalOption{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--border);border-radius:15px;background:var(--surface);cursor:pointer}
.inviteApprovalOption input{margin:4px 0 0;accent-color:var(--primary)}
.inviteApprovalOption span{display:grid;gap:3px}
.inviteApprovalOption small,.inviteProfileBlock>span{color:var(--muted);line-height:1.5}
.inviteRow small{line-height:1.6}
.inviteLockedField{background:color-mix(in srgb,var(--surface) 72%,var(--primary) 4%)!important;border-color:color-mix(in srgb,var(--primary) 32%,var(--border))!important;opacity:.9}
.inviteLockedHint{display:block;margin:4px 0 8px 3px}
.inviteApprovalNotice{margin-bottom:15px;padding:12px 14px;border:1px solid color-mix(in srgb,#d59d35 42%,var(--border));border-radius:14px;background:color-mix(in srgb,#d59d35 10%,var(--card));color:var(--text);font-size:13px;line-height:1.55}

@keyframes settingsCardEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){#settings.panel.active{grid-template-columns:1fr;gap:13px}#settings>.settingsCard,#settings>.profileSettingsCard,#settings>.appearanceSettingsCard,#settings>.accountSecuritySettingsCard,#settings>.notificationSettingsCard,#settings>#holidayPreferenceRow,#settings>.settingsVersion{grid-column:1}#settings>.settingsCard{padding:18px;border-radius:20px}}
@media(max-width:560px){.customMonthGrid{gap:7px}.customMonthOption{min-height:44px;font-size:12px;padding:8px 4px}.service.serviceToday:after{top:9px;right:9px;font-size:8px}#settings.panel.active{gap:11px}#settings>.settingsCard{padding:16px;border-radius:18px}#settings .settingsCardHeader{gap:10px}#settings .themeCard{min-height:118px}}
@media(prefers-reduced-motion:reduce){#settings>.settingsCard,.customMonthOption,.service.serviceToday{animation:none!important;transition:none!important}#settings>.settingsCard:hover,.customMonthOption:hover{transform:none}}