:root {
    --bp-blue: #154c79;
    --bp-green: #2f7d62;
    --bp-gold: #d7a84d;
    --bp-ink: #14213d;
    --bp-soft: #f5f8fb;
    --bp-line: #e5ebf1;
}

html, body { max-width: 100%; overflow-x: hidden; }
body { color: var(--bp-ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
a { text-decoration: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bp-blue), var(--bp-green)); color: #fff; font-weight: 800; box-shadow: 0 10px 24px rgba(21, 76, 121, .18); }
.public-brand-logo { width: 44px; height: 54px; object-fit: contain; flex: 0 0 44px; }
.system-brand-logo { width: 48px; height: 56px; object-fit: contain; flex: 0 0 48px; padding: 3px; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(4, 24, 42, .2); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.footer-brand-logo { width: 70px; height: 70px; object-fit: contain; flex: 0 0 70px; }
.auth-brand-logo { width: 116px; height: 150px; object-fit: contain; align-self: flex-start; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.form-brand-logo { display: block; width: 82px; height: 104px; object-fit: contain; }
.navbar { backdrop-filter: blur(16px); }
.btn-primary { --bs-btn-bg: var(--bp-blue); --bs-btn-border-color: var(--bp-blue); --bs-btn-hover-bg: #0f3e63; --bs-btn-hover-border-color: #0f3e63; }
.bg-soft { background: var(--bp-soft); }
.section-pad { padding: 80px 0; }
.min-vh-75 { min-height: 75vh; }
.hero-section { position: relative; background: url("../img/landing/hero-catequesis.jpeg") center/cover; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 42, 67, .86), rgba(14, 42, 67, .35)); }
.hero-kicker { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.16); font-weight: 700; font-size: .82rem; letter-spacing: 0; }
.section-title { font-weight: 800; color: var(--bp-ink); margin-bottom: 14px; }
.feature-card, .step-card, .faq-box, .wizard-shell, .success-panel, .admin-card, .metric-card, .login-card { background: #fff; border: 1px solid var(--bp-line); border-radius: 8px; box-shadow: 0 18px 45px rgba(20, 33, 61, .07); }
.feature-card { padding: 28px; }
.feature-card i { font-size: 2rem; color: var(--bp-green); }
.feature-card h3, .step-card h3 { font-size: 1.05rem; font-weight: 800; margin: 16px 0 8px; }
.feature-card p, .step-card p { color: #65758b; margin: 0; }
.step-card { padding: 24px; min-height: 190px; }
.step-card span { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e8f4ef; color: var(--bp-green); font-weight: 900; }
.clean-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.clean-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--bp-line); }
.clean-list i, .contact-item i { color: var(--bp-green); }
.notice-list { display: grid; gap: 12px; }
.notice-list div, .contact-item { display: flex; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; }
.notice-list span { color: #65758b; text-align: right; }
.faq-box { padding: 24px; }
.photo-feature { min-height: 440px; border-radius: 8px; overflow: hidden; background: url("../img/landing/catequesis-patio.jpg") center/cover; border: 1px solid var(--bp-line); box-shadow: 0 18px 45px rgba(20, 33, 61, .08); }
.photo-card { position: relative; min-height: 220px; border-radius: 8px; overflow: hidden; border: 1px solid var(--bp-line); box-shadow: 0 18px 45px rgba(20, 33, 61, .07); background: #e9eef4; }
.photo-card img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; transition: transform .35s ease; }
.photo-card:hover img { transform: scale(1.04); }
.photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 18px 16px; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(9,25,40,.76)); font-weight: 800; }
.map-frame { width: 100%; min-height: 360px; border: 0; border-radius: 8px; display: block; }
.contact-line { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--bp-line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line i { color: var(--bp-green); font-size: 1.2rem; }
.whatsapp-float { position: fixed; right: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #25d366; color: #fff; font-size: 2rem; box-shadow: 0 16px 35px rgba(37, 211, 102, .36); z-index: 1030; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 42px rgba(37, 211, 102, .46); }
.footer-band { background: #f9fbfd; border-top: 1px solid var(--bp-line); }

/* Public home */
.public-navbar { min-height: 76px; }
.public-navbar .navbar-brand { color: var(--bp-ink); white-space: nowrap; }
.public-navbar .nav-link { color: #526174; font-weight: 680; white-space: nowrap; }
.public-navbar .nav-link:hover, .public-navbar .nav-link:focus { color: var(--bp-blue); }
.public-navbar .dropdown-toggle { border: 0; background: transparent; }
.public-access-menu { min-width: 280px; padding: 8px; border: 1px solid var(--bp-line); border-radius: 8px; box-shadow: 0 18px 45px rgba(20,33,61,.13); }
.public-access-menu .dropdown-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 11px; border-radius: 6px; }
.public-access-menu .dropdown-item i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e8f4ef; color: var(--bp-green); }
.public-access-menu .dropdown-item strong, .public-access-menu .dropdown-item small { display: block; }
.public-access-menu .dropdown-item small { color: #7b8797; margin-top: 2px; }
.home-page .hero-section { min-height: calc(100svh - 76px); display: flex; flex-direction: column; justify-content: space-between; }
.home-page .hero-overlay { background: linear-gradient(90deg, rgba(10,35,56,.94) 0%, rgba(10,35,56,.72) 45%, rgba(10,35,56,.2) 78%); }
.home-hero-row { min-height: min(720px, calc(100svh - 176px)); }
.home-hero-copy { padding-bottom: 80px !important; }
.home-hero-copy h1 { max-width: 820px; font-size: clamp(3rem, 6vw, 5.3rem); line-height: 1.01; font-weight: 850; }
.home-hero-copy .lead { max-width: 700px; color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-quick-facts { position: relative; color: #fff; background: rgba(10,35,56,.74); border-top: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); }
.quick-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.quick-facts-grid > div { min-height: 100px; display: flex; align-items: center; gap: 14px; padding: 18px 28px; border-right: 1px solid rgba(255,255,255,.16); }
.quick-facts-grid > div:first-child { border-left: 1px solid rgba(255,255,255,.16); }
.quick-facts-grid i { font-size: 1.45rem; color: #f0cb7f; }
.quick-facts-grid strong, .quick-facts-grid small { display: block; }
.quick-facts-grid strong { font-size: .96rem; }
.quick-facts-grid small { margin-top: 3px; color: rgba(255,255,255,.67); }
.home-section { scroll-margin-top: 82px; }
.section-eyebrow { display: inline-block; margin-bottom: 10px; color: var(--bp-green); font-size: .74rem; font-weight: 900; }
.home-section-heading { max-width: 720px; margin-inline: auto; }
.home-pill-list { display: flex; flex-wrap: wrap; gap: 9px; }
.home-pill-list span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #d7e4de; border-radius: 999px; color: #345b4d; background: #f5faf8; font-weight: 750; font-size: .88rem; }
.coordinator-signature { padding-left: 16px; border-left: 3px solid var(--bp-gold); }
.coordinator-signature span, .coordinator-signature strong { display: block; }
.coordinator-signature span { color: #65758b; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.coordinator-signature strong { margin-top: 3px; color: var(--bp-ink); font-size: 1.05rem; }
.photo-feature { position: relative; }
.photo-feature::after { content: ""; position: absolute; inset: 58% 0 0; background: linear-gradient(180deg, transparent, rgba(10,35,56,.72)); }
.photo-feature-label { position: absolute; left: 20px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; }
.home-feature-row { margin-top: 38px; }
.home-page .feature-card { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.home-page .feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(20,33,61,.11); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; color: var(--bp-green); background: #e8f4ef; }
.feature-icon i { font-size: 1.35rem; }
.registration-path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.registration-path::before { content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; background: #cfdcd6; }
.path-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; padding: 0 18px; text-align: center; }
.path-step > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--bp-green); color: #fff; border: 7px solid var(--bp-soft); box-shadow: 0 0 0 1px #cfdcd6; font-weight: 900; }
.path-step h3 { margin: 0 0 7px; font-size: 1rem; font-weight: 850; }
.path-step p { margin: 0; color: #65758b; font-size: .9rem; }
.parent-access-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border-radius: 8px; color: #fff; background: linear-gradient(125deg, #154c79, #2f7d62); box-shadow: 0 18px 42px rgba(21,76,121,.16); }
.parent-access-band span { color: #efd18e; font-size: .72rem; font-weight: 900; }
.parent-access-band h3 { margin: 4px 0; font-size: 1.25rem; font-weight: 850; }
.parent-access-band p { margin: 0; color: rgba(255,255,255,.76); }
.parent-access-band > i { flex: 0 0 auto; font-size: 2.4rem; color: rgba(255,255,255,.62); }
.center-card { padding: 24px; background: #fff; border: 1px solid var(--bp-line); border-radius: 8px; box-shadow: 0 18px 45px rgba(20,33,61,.07); }
.center-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.center-card-head > i { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border-radius: 8px; background: #e8f4ef; color: var(--bp-green); font-size: 1.35rem; }
.center-card-head small { color: var(--bp-green); font-size: .7rem; font-weight: 850; }
.center-card-head h3 { margin: 2px 0 0; color: var(--bp-ink); font-size: 1.12rem; font-weight: 900; line-height: 1.2; }
.center-address { display: flex; gap: 9px; min-height: 48px; color: #65758b; font-size: .9rem; }
.center-address i { color: var(--bp-gold); flex: 0 0 auto; }
.center-schedule { display: grid; gap: 10px; margin-top: 15px; }
.center-schedule div { padding: 12px; border-left: 3px solid var(--bp-green); background: #f6faf8; }
.center-schedule strong, .center-schedule span { display: block; }
.center-schedule strong { color: var(--bp-ink); font-size: .9rem; }
.center-schedule span { margin-top: 3px; color: #65758b; font-size: .82rem; }
.start-date-band { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 8px; background: var(--bp-blue); color: #fff; }
.start-date-band > i { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 50px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 1.35rem; }
.start-date-band span, .start-date-band strong, .start-date-band small { display: block; }
.start-date-band span { color: #f0cb7f; font-size: .72rem; font-weight: 850; }
.start-date-band strong { margin: 2px 0; font-size: 1.1rem; }
.start-date-band small { color: rgba(255,255,255,.72); }
.contribution-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 26px; border: 1px solid #dce5ec; border-radius: 8px; background: #fff; box-shadow: 0 18px 45px rgba(20,33,61,.06); }
.contribution-panel > span { color: #526174; font-weight: 800; }
.contribution-panel > strong { color: var(--bp-green); font-size: 2rem; }
.contribution-panel p { grid-column: 1 / -1; display: flex; gap: 9px; margin: 10px 0 0; padding-top: 16px; border-top: 1px solid var(--bp-line); color: #65758b; font-size: .9rem; }
.contribution-panel p i { color: var(--bp-blue); flex: 0 0 auto; }
.home-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 18px; }
.home-gallery .photo-card { min-height: 0; grid-column: span 4; }
.home-gallery .photo-card:nth-child(1), .home-gallery .photo-card:nth-child(5) { grid-column: span 8; }
.home-gallery .photo-card:nth-child(1) { grid-row: span 2; }
.home-gallery .photo-card:nth-child(4) { grid-row: span 2; }
.home-gallery .photo-card img { min-height: 0; height: 100%; }
.home-reveal { opacity: 1; transform: none; }
.home-page.is-motion-ready .home-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.home-page.is-motion-ready .home-reveal.is-visible { opacity: 1; transform: none; }

.wizard-shell { padding: 32px; }
.wizard-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
.wizard-head h1 { font-weight: 900; margin: 8px 0; }
.wizard-head p { color: #65758b; margin: 0; }
.progress-circle { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--bp-green) 20%, #e9eef4 0); display: grid; place-items: center; font-weight: 900; flex: 0 0 auto; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: rise .25s ease; }
.wizard-step h2 { font-size: 1.35rem; font-weight: 850; margin-bottom: 20px; }
.wizard-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.form-check-block { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; }
.registration-page label, .registration-page h1, .registration-page h2, .registration-page h3, .registration-page p, .registration-page button, .registration-page .form-select, .registration-page .form-control { text-transform: uppercase; }
.text-uppercase-input { text-transform: uppercase; }
.sibling-field.d-none { display: none !important; }
.payment-option { height: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; cursor: pointer; }
.payment-option input { margin-top: 5px; }
.payment-option strong { display: block; }
.payment-option small { display: block; color: #65758b; margin-top: 4px; }
.review-box { display: flex; gap: 18px; align-items: center; padding: 26px; border-radius: 8px; background: #eef8f4; border: 1px solid #cce9dd; }
.review-box i { font-size: 2rem; color: var(--bp-green); }
.human-check { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; border: 1px solid #bfd9ce; border-radius: 8px; background: #f5faf8; }
.human-check-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #dcefe7; color: var(--bp-green); font-size: 1.45rem; }
.human-check-copy span { color: var(--bp-green); font-size: .72rem; font-weight: 900; }
.human-check-copy h3 { margin: 3px 0; font-size: 1rem; font-weight: 900; }
.human-check-copy p { margin: 0; color: #65758b; font-size: .78rem; }
.human-check-question { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; }
.human-check-question strong { min-width: 58px; color: var(--bp-blue); font-size: 1.2rem; text-align: right; white-space: nowrap; }
.human-check-question .form-control { width: 82px; text-align: center; font-size: 1.1rem; font-weight: 850; }
.human-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.success-panel { max-width: 620px; text-align: center; padding: 42px; }
.success-icon { width: 74px; height: 74px; border-radius: 50%; background: #e8f4ef; color: var(--bp-green); display: inline-grid; place-items: center; font-size: 2rem; margin-bottom: 18px; }
.code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.code-grid div { border: 1px solid var(--bp-line); border-radius: 8px; padding: 18px; }
.code-grid span, .field-label { display: block; color: #65758b; font-size: .82rem; margin-bottom: 4px; }
.code-grid strong { font-size: 1.3rem; }

.auth-bg { min-height: 100vh; background: #eef4fa; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 20%, rgba(47, 125, 98, .14), transparent 28%), linear-gradient(135deg, #f7fbf9, #e9f0f7); }
.login-shell { width: min(1040px, 100%); display: grid; grid-template-columns: 1.12fr .88fr; background: #fff; border: 1px solid var(--bp-line); border-radius: 8px; overflow: hidden; box-shadow: 0 28px 70px rgba(16, 45, 70, .16); }
.login-hero { min-height: 560px; padding: 54px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(135deg, rgba(16, 45, 70, .96), rgba(21, 76, 121, .82)), url("../img/landing/hero-catequesis.jpeg") center/cover; }
.login-kicker { font-weight: 900; color: var(--bp-gold); margin-bottom: 12px; }
.login-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; font-weight: 950; margin-bottom: 16px; }
.login-hero p { color: rgba(255,255,255,.86); font-size: 1.05rem; max-width: 560px; }
.login-modules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.login-modules span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); font-weight: 800; }
.login-card { width: 100%; padding: 54px 44px; align-self: center; border: 0; box-shadow: none; }
.login-card h2 { font-size: 1.8rem; font-weight: 950; }
.login-card p { color: #65758b; }
.login-help { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: #65758b; }
.login-help span { display: inline-flex; align-items: center; gap: 7px; }

.admin-body { background: #f4f7fb; overflow-x: hidden; }
.admin-shell { min-height: 100vh; background: #f4f7fb; }
.admin-menu-check, .admin-collapse-check { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; appearance: none; z-index: -1; }
.admin-backdrop { display: none; }
.admin-sidebar { background: #102d46; color: #fff; padding: 20px 16px; position: fixed; inset: 0 auto 0 0; width: 270px; height: 100vh; min-height: 100vh; max-height: 100vh; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; transition: width .2s ease, padding .2s ease, transform .22s ease; }
.admin-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.admin-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 900; font-size: 1.05rem; min-width: 0; }
.admin-brand span:last-child { min-width: 0; }
.admin-brand small { display: block; color: rgba(255,255,255,.62); font-size: .76rem; font-weight: 650; margin-top: 2px; }
.admin-collapse { width: 34px; height: 34px; align-items: center; justify-content: center; flex: 0 0 34px; }
.admin-nav { display: grid; gap: 7px; }
.admin-nav a { color: rgba(255,255,255,.78); padding: 11px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-weight: 750; min-height: 44px; min-width: 0; }
.admin-nav a i { flex: 0 0 20px; text-align: center; }
.admin-nav a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav a:hover, .admin-nav a.active { color: #fff; background: rgba(255,255,255,.11); }
.admin-nav a.active { box-shadow: inset 3px 0 0 var(--bp-gold); }
.sidebar-status { margin-top: 20px; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.07); }
.sidebar-status span, .admin-eyebrow { display: block; font-size: .72rem; font-weight: 900; color: var(--bp-gold); }
.sidebar-status strong { display: block; color: #fff; margin-top: 4px; }
.sidebar-status small { color: rgba(255,255,255,.68); }
.admin-main { min-width: 0; margin-left: 270px; transition: margin-left .2s ease; }
.admin-topbar { min-height: 82px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--bp-line); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; position: sticky; top: 0; z-index: 20; min-width: 0; }
.admin-titlebar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-topbar h1 { font-size: 1.5rem; font-weight: 900; margin: 0; }
.admin-topbar span { color: #65758b; font-size: .9rem; }
.admin-top-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-eyebrow { color: var(--bp-green); letter-spacing: 0; margin-bottom: 3px; }
.user-chip { background: var(--bp-soft); border: 1px solid var(--bp-line); padding: 8px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; color: var(--bp-ink); font-weight: 800; max-width: 270px; min-width: 0; }
.user-chip small { color: #65758b; font-weight: 700; white-space: nowrap; }
.user-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-content { padding: 24px; max-width: 100%; overflow-x: clip; }
.admin-card { padding: 24px; }
.admin-card > .d-flex, .admin-content > .d-flex { min-width: 0; }
.admin-card .btn, .admin-content .btn { white-space: normal; }
.admin-card h2 { font-size: 1.15rem; font-weight: 900; margin-bottom: 18px; }
.admin-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 30px; color: #fff; background: linear-gradient(135deg, #154c79, #2f7d62); border-radius: 8px; box-shadow: 0 18px 45px rgba(21, 76, 121, .18); }
.admin-welcome h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 950; margin: 6px 0 8px; }
.admin-welcome p { color: rgba(255,255,255,.82); margin: 0; max-width: 720px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.metric-card { padding: 18px; display: grid; gap: 7px; min-height: 142px; }
.metric-card i { font-size: 1.6rem; }
.metric-card span { color: #65758b; font-size: .84rem; }
.metric-card strong { font-size: 1.55rem; line-height: 1; }
.metric-card small { color: #8b98a9; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; min-width: 0; }
.card-title-row h2 { margin-bottom: 0; }
.card-title-row a { font-weight: 800; font-size: .9rem; }
.chart-card canvas { width: 100% !important; max-height: 330px; }
.capacity-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 13px 0; border-bottom: 1px solid var(--bp-line); }
.capacity-row:last-child { border-bottom: 0; }
.capacity-row strong { display: block; }
.capacity-row small { display: block; color: #65758b; margin-top: 3px; }
.capacity-row .progress { grid-column: 1 / -1; height: 8px; }
.table thead th { color: #65758b; font-size: .78rem; text-transform: uppercase; letter-spacing: 0; border-bottom-color: var(--bp-line); }
.table-responsive { border-radius: 8px; }
.table { vertical-align: middle; }
.table td, .table th { overflow-wrap: anywhere; }
.mini-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--bp-line); }
.mini-row:last-child { border-bottom: 0; }
.mini-row small { display: block; color: #65758b; margin-top: 3px; }
.group-card { display: block; height: 100%; padding: 18px; background: #fff; border: 1px solid var(--bp-line); border-radius: 8px; box-shadow: 0 18px 45px rgba(20, 33, 61, .07); color: var(--bp-ink); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.group-card:hover, .group-card.active { color: var(--bp-ink); border-color: rgba(21, 76, 121, .35); transform: translateY(-2px); box-shadow: 0 20px 48px rgba(21, 76, 121, .13); }
.group-card.active { box-shadow: inset 0 0 0 2px rgba(21, 76, 121, .16), 0 20px 48px rgba(21, 76, 121, .13); }
.group-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.group-card-head strong { display: block; font-size: 1.05rem; font-weight: 900; }
.group-card-head small { display: block; color: #65758b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-card-meta { display: grid; gap: 8px; margin-top: 14px; }
.group-card-meta span { display: flex; align-items: center; gap: 8px; color: #65758b; font-size: .9rem; min-width: 0; }
.group-card-meta i { color: var(--bp-green); flex: 0 0 18px; }
.group-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.group-status { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.group-status.is-success { color: #1f6b52; background: #e8f4ef; }
.group-status.is-warning { color: #8a5a00; background: #fff4d8; }
.group-status.is-danger { color: #9b1c1c; background: #fee2e2; }
.group-capacity { font-weight: 950; color: var(--bp-ink); }
.group-manager-toolbar { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.8fr) auto; gap: 16px; align-items: end; padding: 18px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; box-shadow: 0 18px 45px rgba(20,33,61,.07); }
.group-manager-toolbar h3 { margin: 0; font-size: 1.15rem; font-weight: 950; color: var(--bp-ink); }
.group-filter-grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, .7fr)); gap: 10px; }
.group-filter-search { position: relative; }
.group-filter-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #7b8798; pointer-events: none; }
.group-filter-search .form-control { padding-left: 38px; }
.group-filter-count { justify-self: end; padding: 9px 12px; border: 1px solid var(--bp-line); border-radius: 999px; color: #65758b; font-weight: 800; white-space: nowrap; }
.group-filter-count strong { color: var(--bp-blue); }
.catechist-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.catechist-picker.compact { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.catechist-option { cursor: pointer; margin: 0; min-width: 0; }
.catechist-option input { position: absolute; opacity: 0; pointer-events: none; }
.catechist-option-body { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-height: 58px; padding: 10px 12px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(20,33,61,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.catechist-option-body i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef4fa; color: var(--bp-blue); }
.catechist-option-body strong, .catechist-option-body small { display: block; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catechist-option-body strong { font-size: .9rem; font-weight: 900; color: var(--bp-ink); }
.catechist-option-body small { margin-top: 3px; font-size: .72rem; color: #65758b; }
.catechist-option:hover .catechist-option-body { border-color: rgba(21,76,121,.34); transform: translateY(-1px); }
.catechist-option input:focus-visible + .catechist-option-body { outline: 3px solid rgba(48,104,255,.18); outline-offset: 2px; }
.catechist-option input:checked + .catechist-option-body { border-color: rgba(47,125,98,.62); background: #e8f4ef; box-shadow: inset 0 0 0 2px rgba(47,125,98,.12), 0 12px 30px rgba(47,125,98,.1); }
.catechist-option input:checked + .catechist-option-body i { background: var(--bp-green); color: #fff; }
.catechist-combobox { position: relative; z-index: 2; }
.catechist-combobox.open { z-index: 30; }
.catechist-combobox-toggle { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; color: var(--bp-ink); font-weight: 800; text-align: left; box-shadow: 0 10px 24px rgba(20,33,61,.04); }
.catechist-combobox-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catechist-combobox-toggle i { color: var(--bp-blue); transition: transform .16s ease; }
.catechist-combobox.open .catechist-combobox-toggle { border-color: rgba(21,76,121,.42); box-shadow: 0 14px 34px rgba(21,76,121,.12); }
.catechist-combobox.open .catechist-combobox-toggle i { transform: rotate(180deg); }
.catechist-combobox-panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 10px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; box-shadow: 0 22px 50px rgba(16,45,70,.18); }
.catechist-combobox.open .catechist-combobox-panel { display: block; }
.catechist-combobox-list { display: grid; gap: 6px; max-height: 248px; overflow: auto; padding-top: 8px; }
.catechist-combobox-item { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: center; margin: 0; padding: 9px; border-radius: 7px; cursor: pointer; }
.catechist-combobox-item:hover { background: #f5f8fb; }
.catechist-combobox-item input { width: 16px; height: 16px; accent-color: var(--bp-green); }
.catechist-combobox-item strong, .catechist-combobox-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catechist-combobox-item strong { font-size: .88rem; color: var(--bp-ink); }
.catechist-combobox-item small { margin-top: 2px; font-size: .72rem; color: #65758b; }

.admin-collapse-check:checked ~ .admin-sidebar { width: 78px; padding: 18px 10px; overflow-x: hidden; }
.admin-collapse-check:checked ~ .admin-sidebar .admin-sidebar-head { justify-content: center; }
.admin-collapse-check:checked ~ .admin-sidebar .admin-brand { justify-content: center; }
.admin-collapse-check:checked ~ .admin-sidebar .system-brand-logo { width: 46px; height: 54px; flex-basis: 46px; }
.admin-collapse-check:checked ~ .admin-sidebar .admin-brand-text,
.admin-collapse-check:checked ~ .admin-sidebar .admin-nav a span,
.admin-collapse-check:checked ~ .admin-sidebar .sidebar-status { display: none; }
.admin-collapse-check:checked ~ .admin-sidebar .admin-nav a { justify-content: center; padding-inline: 0; }
.admin-collapse-check:checked ~ .admin-sidebar .admin-nav a.active { box-shadow: inset 0 -3px 0 var(--bp-gold); }
.admin-collapse-check:checked ~ .admin-sidebar .admin-collapse { position: absolute; right: -16px; top: 22px; background: #fff; color: var(--bp-blue); border-color: var(--bp-line); box-shadow: 0 10px 24px rgba(16,45,70,.18); }
.admin-collapse-check:checked ~ .admin-sidebar .admin-collapse i { transform: rotate(180deg); }
.admin-collapse-check:checked ~ .admin-main { margin-left: 78px; }

.catechist-shell { min-height: 100vh; background: #f4f7fb; }
.catechist-sidebar { position: fixed; inset: 0 auto 0 0; width: 286px; height: 100vh; min-height: 100vh; max-height: 100vh; overflow-y: auto; background: var(--bp-blue); color: #fff; padding: 20px 16px; z-index: 30; display: flex; flex-direction: column; }
.catechist-main { min-width: 0; margin-left: 286px; }
.catechist-topbar { position: sticky; top: 0; z-index: 50; }
.catechist-sidebar .sidebar-status { margin-top: auto; }
.catechist-body .group-card { display: flex; flex-direction: column; gap: 7px; color: var(--bp-ink); }
.catechist-body .group-card:hover { transform: translateY(-2px); border-color: rgba(21, 76, 121, .28); box-shadow: 0 18px 40px rgba(16,45,70,.12); }
.group-card-kicker { font-size: .72rem; font-weight: 800; color: var(--bp-green); text-transform: uppercase; letter-spacing: .04em; }
.module-card, .resource-card, .feed-card { display: block; padding: 20px; background: #fff; border: 1px solid var(--bp-line); border-radius: 8px; box-shadow: 0 18px 45px rgba(20, 33, 61, .07); color: var(--bp-ink); text-decoration: none; }
.module-card { display: grid; gap: 10px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.module-card:hover { color: var(--bp-ink); transform: translateY(-2px); border-color: rgba(21, 76, 121, .32); box-shadow: 0 20px 48px rgba(21, 76, 121, .13); }
.module-card strong, .resource-card h3, .feed-card h3 { font-size: 1.05rem; font-weight: 900; margin: 0; }
.module-card small, .resource-card p, .feed-card p { color: #65758b; margin: 0; }
.module-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #e8f4ef; color: var(--bp-green); font-size: 1.25rem; }
.group-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px; border-radius: 8px; background: #fff; border: 1px solid var(--bp-line); box-shadow: 0 18px 45px rgba(20,33,61,.07); }
.group-hero h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 950; margin: 4px 0; }
.group-hero p { color: #65758b; margin: 0; }
.group-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.group-hero-meta span { padding: 9px 12px; border-radius: 999px; background: var(--bp-soft); color: var(--bp-ink); font-weight: 850; border: 1px solid var(--bp-line); }
.module-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.module-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid var(--bp-line); border-radius: 999px; background: #fff; color: #65758b; font-weight: 850; }
.module-tabs a:hover, .module-tabs a.active { color: #fff; background: var(--bp-blue); border-color: var(--bp-blue); }
.group-modal-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--bp-line); border-radius: 8px; background: #f7fafc; }
.group-modal-summary h3 { margin: 2px 0 0; font-size: 1.1rem; font-weight: 950; color: var(--bp-ink); }
.group-modal-summary > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.group-modal-summary span:not(.admin-eyebrow) { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--bp-line); color: #65758b; font-weight: 850; }
.group-modal-tabs { gap: 8px; }
.group-modal-tabs .nav-link { border-radius: 999px; color: #65758b; font-weight: 850; }
.group-modal-tabs .nav-link.active { background: var(--bp-blue); }
.group-pane-card { padding: 18px; border: 1px solid var(--bp-line); border-radius: 8px; background: #f7fafc; }
.group-pane-card h2 { font-size: 1.1rem; font-weight: 950; margin-bottom: 14px; color: var(--bp-ink); }
.roster-grid { display: grid; gap: 10px; }
.student-mini-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--bp-line); border-radius: 8px; background: #fff; }
.student-index { width: 34px; height: 34px; border-radius: 50%; background: var(--bp-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: var(--bp-blue); }
.student-mini-card strong { display: block; overflow-wrap: anywhere; }
.student-mini-card small { color: #65758b; }
.student-actions { display: flex; gap: 6px; }
.student-actions a { width: 34px; height: 34px; border: 1px solid var(--bp-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--bp-blue); background: #fff; }
.student-actions a:hover { background: var(--bp-blue); color: #fff; border-color: var(--bp-blue); }
.attendance-list { display: grid; gap: 8px; }
.attendance-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bp-line); }
.attendance-row span { font-weight: 750; min-width: 0; overflow-wrap: anywhere; }
.attendance-row small { display: block; color: #65758b; font-weight: 600; }
.content-feed { display: grid; gap: 14px; }
.feed-card.is-featured, .resource-card.is-featured { border-color: rgba(215,168,77,.55); box-shadow: 0 18px 45px rgba(215,168,77,.12); }
.resource-card { display: flex; flex-direction: column; }
.resource-card p { flex: 1 1 auto; margin: 8px 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--bp-line); border: 1px solid var(--bp-line); border-radius: 14px; overflow: hidden; }
.calendar-head { background: #f5f8fb; padding: 10px; font-size: .78rem; font-weight: 800; color: var(--bp-muted); text-align: center; }
.calendar-day { min-height: 132px; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.calendar-day.is-muted { background: #f8fafc; color: var(--bp-muted); }
.calendar-number { font-weight: 800; color: var(--bp-ink); }
.calendar-item { display: block; padding: 7px 8px; border-radius: 8px; background: #eaf2ff; color: var(--bp-blue); text-decoration: none; border-left: 3px solid var(--bp-blue); }
.calendar-item.is-reminder { background: #fff7e6; color: #8a5a00; border-left-color: var(--bp-gold); }
.calendar-item strong { display: block; font-size: .78rem; line-height: 1.1; }
.calendar-item span { display: block; font-size: .7rem; opacity: .78; margin-top: 2px; }
.support-float { position: fixed; right: 22px; bottom: 22px; z-index: 1030; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--bp-blue); color: #fff; box-shadow: 0 16px 34px rgba(16,45,70,.26); font-weight: 800; }
.support-float i { font-size: 1.2rem; }
.support-float:hover { background: #1f5b8f; color: #fff; }
.support-modal .modal-header { border-bottom: 1px solid var(--bp-line); }
.support-context { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 12px; border: 1px solid var(--bp-line); border-radius: 12px; background: #f7fafc; }
.support-context i { grid-row: span 2; color: var(--bp-green); font-size: 1.4rem; }
.support-context span { font-weight: 800; color: var(--bp-ink); }
.support-context small { color: var(--bp-muted); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
    .public-navbar { min-height: 66px; }
    .public-navbar .navbar-collapse { padding: 12px 0 4px; }
    .public-navbar .navbar-nav { align-items: stretch !important; }
    .public-navbar .nav-link { padding: 10px 4px; }
    .public-navbar .navbar-nav > .nav-item:last-child .btn { width: 100%; margin-top: 8px; }
    .public-access-menu { width: 100%; min-width: 0; box-shadow: none; }
    .home-page .hero-section { min-height: auto; background-position: 58% center; }
    .home-page .hero-overlay { background: linear-gradient(180deg, rgba(10,35,56,.35) 0%, rgba(10,35,56,.78) 46%, rgba(10,35,56,.96) 100%); }
    .home-hero-row { min-height: 600px; align-items: end !important; }
    .home-hero-copy { padding: 120px 0 52px !important; }
    .home-hero-copy h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
    .home-hero-actions { display: grid; grid-template-columns: 1fr; }
    .home-hero-actions .btn { width: 100%; }
    .quick-facts-grid { grid-template-columns: 1fr; padding: 5px 0; }
    .quick-facts-grid > div, .quick-facts-grid > div:first-child { min-height: 74px; padding: 13px 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
    .quick-facts-grid > div:last-child { border-bottom: 0; }
    .registration-path { grid-template-columns: 1fr; gap: 0; }
    .registration-path::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
    .path-step { grid-template-columns: 56px minmax(0, 1fr); justify-items: stretch; align-items: start; gap: 15px; padding: 0 0 24px; text-align: left; }
    .path-step > span { grid-row: 1; }
    .path-step div { padding-top: 7px; }
    .parent-access-band { align-items: flex-start; padding: 22px; }
    .center-address { min-height: 0; }
    .start-date-band { align-items: flex-start; }
    .home-gallery { display: flex; overflow-x: auto; gap: 14px; margin-inline: calc(var(--bs-gutter-x) * -.5); padding: 0 calc(var(--bs-gutter-x) * .5) 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .home-gallery::-webkit-scrollbar { display: none; }
    .home-gallery .photo-card { flex: 0 0 min(82vw, 340px); height: 290px; scroll-snap-align: center; }
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { min-height: auto; padding: 34px; }
    .admin-shell { grid-template-columns: 1fr; background: #f4f7fb; }
    .admin-main, .admin-collapse-check:checked ~ .admin-main { margin-left: 0; }
    .admin-sidebar { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100vh; z-index: 1050; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(16,45,70,.24); }
    .admin-collapse-check:checked ~ .admin-sidebar { width: min(320px, 86vw); padding: 20px 16px; }
    .admin-collapse-check:checked ~ .admin-sidebar .admin-sidebar-head { justify-content: space-between; }
    .admin-collapse-check:checked ~ .admin-sidebar .admin-brand { justify-content: flex-start; }
    .admin-collapse-check:checked ~ .admin-sidebar .admin-brand-text,
    .admin-collapse-check:checked ~ .admin-sidebar .admin-nav a span,
    .admin-collapse-check:checked ~ .admin-sidebar .sidebar-status { display: block; }
    .admin-collapse-check:checked ~ .admin-sidebar .admin-nav a { justify-content: flex-start; padding: 11px 12px; }
    .admin-collapse-check:checked ~ .admin-sidebar .admin-nav a.active { box-shadow: inset 3px 0 0 var(--bp-gold); }
    .admin-menu-check:checked ~ .admin-sidebar { transform: translateX(0); }
    .admin-backdrop { position: fixed; inset: 0; background: rgba(16, 45, 70, .46); z-index: 1040; }
    .admin-menu-check:checked ~ .admin-backdrop { display: block; }
    .admin-nav { grid-template-columns: 1fr; }
    .sidebar-status { margin-top: 18px; }
    .admin-topbar { height: auto; padding: 12px 14px; gap: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
    .admin-topbar h1 { font-size: 1.25rem; }
    .admin-top-actions { margin-left: 0; gap: 8px; justify-content: flex-end; }
    .user-chip { max-width: 180px; padding: 7px 10px; }
    .user-chip small { display: none; }
    .admin-content { padding: 16px; }
    .admin-content > .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
    .admin-card .d-flex:not(.keep-flex), .admin-content > .d-flex:not(.keep-flex) { flex-wrap: wrap; }
    .admin-card form.d-flex { flex-wrap: wrap; }
    .admin-card form.d-flex > * { flex: 1 1 140px; min-width: 0; }
    .admin-card form.d-flex > .btn, .admin-card form.d-flex > button, .admin-card form.d-flex > a { flex: 0 0 auto; }
    .sticky-top { position: static !important; }
    .admin-welcome { flex-direction: column; align-items: flex-start; }
    .welcome-actions { justify-content: flex-start; }
    .wizard-head { flex-direction: column; align-items: flex-start; }
    .catechist-shell { display: block; }
    .catechist-sidebar { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100vh; min-height: 100vh; max-height: 100vh; z-index: 1050; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(16,45,70,.24); border-radius: 0; }
    .catechist-main { width: 100%; margin-left: 0; }
    .catechist-topbar { position: sticky; top: 0; }
    .catechist-body .admin-menu-check:checked ~ .catechist-sidebar { transform: translateX(0); }
    .catechist-body .admin-menu-check:checked ~ .admin-backdrop { display: block; }
    .catechist-nav { grid-template-columns: 1fr; }
    .catechist-sidebar .sidebar-status { margin-top: 18px; }
    .module-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .module-tabs a { flex: 0 0 auto; }
    .group-manager-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .group-filter-grid { grid-template-columns: 1fr; }
    .group-filter-count { justify-self: stretch; text-align: center; }
    .group-modal-summary { flex-direction: column; align-items: flex-start; }
    .group-modal-summary > div:last-child { justify-content: flex-start; }
    .group-modal-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .group-modal-tabs .nav-item { flex: 0 0 auto; }
    .group-hero { flex-direction: column; align-items: flex-start; }
    .group-hero-meta { justify-content: flex-start; }
    .student-mini-card { grid-template-columns: 36px minmax(0, 1fr); }
    .student-actions { grid-column: 2; flex-wrap: wrap; }
    .attendance-row { grid-template-columns: 1fr; }
    .catechist-combobox-panel { position: static; margin-top: 8px; box-shadow: none; }
    .catechist-combobox-list { max-height: 220px; }
    .calendar-grid { grid-template-columns: 1fr; }
    .calendar-head { display: none; }
    .calendar-day { min-height: auto; }
}

@media (max-width: 575px) {
    .public-navbar .navbar-brand { gap: 6px !important; max-width: calc(100% - 58px); font-size: .91rem; }
    .public-navbar .public-brand-logo { width: 36px; height: 46px; flex-basis: 36px; }
    .public-navbar .navbar-toggler { padding: 5px 8px; }
    .home-hero-row { min-height: 560px; }
    .home-hero-copy h1 { overflow-wrap: anywhere; }
    .parent-access-band > i { display: none; }
    .start-date-band { padding: 20px; }
    .start-date-band > i { width: 42px; height: 42px; flex-basis: 42px; }
    .contribution-panel { grid-template-columns: 1fr; padding: 22px; }
    .contribution-panel > strong { font-size: 1.8rem; }
    .contribution-panel p { grid-column: 1; }
    .section-pad { padding: 48px 0; }
    .wizard-shell, .success-panel, .login-card { padding: 22px; }
    .admin-card, .metric-card { padding: 14px; }
    .login-hero { padding: 28px; }
    .login-help { flex-direction: column; align-items: flex-start; }
    .code-grid { grid-template-columns: 1fr; }
    .wizard-actions { flex-direction: column; }
    .wizard-actions .btn { width: 100%; }
    .human-check { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; }
    .human-check-icon { width: 44px; height: 44px; }
    .human-check-question { grid-column: 1 / -1; justify-content: center; }
    .admin-topbar { align-items: center; grid-template-columns: 1fr; padding: 10px; }
    .admin-titlebar { display: grid; grid-template-columns: 42px minmax(0, 1fr); width: 100%; align-items: center; gap: 10px; }
    .admin-menu-btn { width: 42px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .admin-top-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; }
    .admin-top-actions > a.btn { width: 42px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .admin-content { padding: 10px; }
    .admin-titlebar > div { min-width: 0; }
    .admin-topbar h1 { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-eyebrow { font-size: .66rem; }
    .admin-topbar span { font-size: .78rem; }
    .admin-titlebar > div > span:last-child { display: none; }
    .user-chip { max-width: 100%; width: 100%; justify-content: flex-start; }
    .admin-sidebar { width: min(300px, 90vw); padding: 16px 12px; }
    .admin-brand { font-size: .98rem; }
    .admin-nav a { padding: 10px 12px; min-height: 42px; }
    .admin-welcome { padding: 18px; gap: 16px; }
    .admin-welcome h2 { font-size: 1.45rem; }
    .welcome-actions .btn, .admin-card .btn, .admin-content > .d-flex .btn { width: 100%; }
    .card-title-row { display: grid; grid-template-columns: 1fr; align-items: start; gap: 8px; }
    .card-title-row h2 { font-size: 1rem; overflow-wrap: anywhere; }
    .card-title-row .badge { justify-self: start; }
    .mini-row { align-items: flex-start; gap: 10px; }
    .mini-row strong { flex: 0 0 auto; }
    .admin-card .input-group { flex-wrap: nowrap; }
    .admin-card .input-group .btn { width: auto; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 620px; }
    .metric-card { min-height: 112px; }
    .metric-card strong { font-size: 1.3rem; }
    .notice-list div { flex-direction: column; }
    .notice-list span { text-align: left; }
    .whatsapp-float { width: 56px; height: 56px; right: 16px; bottom: 16px; font-size: 1.8rem; }
    .support-float { right: 14px; bottom: 14px; min-width: 52px; width: 52px; height: 52px; padding: 0; justify-content: center; }
    .support-float span { display: none; }
}

/* UI update 2026-07-11: compact support button and dashboard module launcher */
.support-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 54px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #154c79;
    color: #fff;
    box-shadow: 0 12px 30px rgba(21, 76, 121, 0.28);
    transition: width 0.18s ease, padding 0.18s ease, gap 0.18s ease, box-shadow 0.18s ease;
}

.support-float i {
    flex: 0 0 auto;
    font-size: 1.25rem;
}

.support-float span {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-weight: 800;
    overflow: hidden;
    transition: max-width 0.18s ease, opacity 0.12s ease;
}

.support-float:hover,
.support-float:focus-visible {
    width: 136px;
    padding: 0 18px;
    gap: 9px;
    box-shadow: 0 16px 34px rgba(21, 76, 121, 0.34);
}

.support-float:hover span,
.support-float:focus-visible span {
    max-width: 80px;
    opacity: 1;
}

.module-launcher {
    background: #fff;
    border: 1px solid rgba(20, 33, 61, 0.08);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 14px 34px rgba(20, 33, 61, 0.06);
}

.module-launcher-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.module-launcher-head h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.module-tile {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 14px;
    color: #14213d;
    text-decoration: none;
    border: 1px solid rgba(20, 33, 61, 0.09);
    border-radius: 8px;
    background: #f8fafc;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.module-tile:hover,
.module-tile:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(21, 76, 121, 0.32);
    background: #fff;
    box-shadow: 0 12px 24px rgba(20, 33, 61, 0.08);
}

.module-tile.active {
    border-color: rgba(21, 76, 121, 0.38);
    background: #eef4fa;
}

.module-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #154c79;
    color: #fff;
    font-size: 1.15rem;
}

.module-tile-copy {
    min-width: 0;
}

.module-tile-copy strong,
.module-tile-copy small {
    display: block;
}

.module-tile-copy strong {
    font-size: 0.98rem;
    font-weight: 800;
}

.module-tile-copy small {
    margin-top: 2px;
    color: #65758b;
    line-height: 1.3;
}

.module-tile-arrow {
    color: #65758b;
    font-size: 1.25rem;
}

@media (max-width: 575.98px) {
    .support-float {
        right: 16px;
        bottom: 16px;
    }

    .module-launcher {
        padding: 16px;
    }

    .module-launcher-head {
        align-items: stretch;
        flex-direction: column;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }
}