@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--brand: #2a5357;--brand-hover: #1e3f42;--brand-active: #162e30;--brand-contrast: #ffffff;--brand-accent: #5edcd1;--brand-tint: #e8f5f5;--brand-tint-soft: #f0fafa;--brand-tint-soft-2: #f0faf9;--brand-ring: #2a535715;--brand-shadow: #2a535730;--brand-accent-border: #5edcd155;--brand-accent-border-soft: #5edcd133;--bg-body: #f4f7f7;--bg-app: #f9fafb;--surface: #ffffff;--surface-alt: #f9fafb;--panel: #f4f6fa;--border: #e5e7eb;--border-card: #edf0f4;--border-divider: #f3f4f6;--border-strong: #d1d5db;--border-navy: #e4e9f5;--border-navy-strong: #c0c8d8;--scrollbar-track: #f0f0f0;--text: #111827;--text-heading: #1f2a44;--text-2: #374151;--text-navy: #2a3560;--text-navy-muted: #5a6a8a;--text-muted: #6b7280;--text-muted-navy: #64708a;--text-faint: #6e7581;--danger: #dc2626;--danger-border: #fca5a5;--danger-border-strong: #f87171;--danger-bg: #fef2f2;--success: #059669;--accent-green: #2a8a50;--accent-green-strong: #4caf82;--accent-blue: #3a8fd0;--accent-orange: #e07830;--accent-orange-deep: #c06010;--accent-purple: #a040c0;--accent-pink: #d060a0;--accent-red: #e05050;--neutral-mute: #b0b8c8;--pos-badge-fg: #7a4bd0;--pos-badge-bg: #f0eaff;--pos-badge-bd: #d9c9f5;--pill-yes-bg: #e8f6ee;--pill-yes-fg: #1e7a4a;--pill-yes-bd: #b0e8c8;--pill-no-bg: #fdeeee;--pill-no-fg: #b03030;--pill-no-bd: #f3c8c8;--info-amber-bg: #fffbf0;--info-amber-border: #f5d88a;--info-amber-text: #8a6800;--warn-amber-bg: #fff8f0;--warn-amber-border: #f5a050;--warn-amber-text: #c06010;--warn-amber-fill: #e07830;--warn-amber-inner-bg: #fff3e0;--warn-amber-inner-text: #a05010;--birthday-from: #fffbeb;--birthday-to: #fdf2f8;--birthday-border: #fde68a;--birthday-text: #92400e;--shadow-card: #0b13210a}html.dark{color-scheme:dark;--brand: #4d8b90;--brand-hover: #3f767a;--brand-active: #356266;--brand-contrast: #08181a;--brand-accent: #5edcd1;--brand-tint: #16302f;--brand-tint-soft: #12211f;--brand-tint-soft-2: #122120;--brand-ring: #4d8b9033;--brand-shadow: #00000060;--brand-accent-border: #5edcd140;--brand-accent-border-soft: #5edcd126;--bg-body: #0e1416;--bg-app: #0e1416;--surface: #172025;--surface-alt: #12191d;--panel: #141c21;--border: #2a343a;--border-card: #232c31;--border-divider: #232c31;--border-strong: #38424a;--border-navy: #2a343a;--border-navy-strong: #38424a;--scrollbar-track: #12191d;--text: #e8ecef;--text-heading: #eef2f5;--text-2: #c4ccd2;--text-navy: #d6def0;--text-navy-muted: #97a2a9;--text-muted: #97a2a9;--text-muted-navy: #9aa6ad;--text-faint: #8b959d;--danger: #f26a6a;--danger-border: #7a3a3a;--danger-border-strong: #9a4a4a;--danger-bg: #2a1a1a;--success: #34c88a;--accent-green: #4fc98a;--accent-green-strong: #5ad19a;--accent-blue: #5aa9e0;--accent-orange: #f0925a;--accent-orange-deep: #e6a862;--accent-purple: #c07ad8;--accent-pink: #e58ac0;--accent-red: #f26a6a;--neutral-mute: #5c6670;--pos-badge-fg: #c3aef2;--pos-badge-bg: #2c2444;--pos-badge-bd: #4a3d6e;--pill-yes-bg: #16281e;--pill-yes-fg: #4fc98a;--pill-yes-bd: #285039;--pill-no-bg: #2b1d1d;--pill-no-fg: #e79090;--pill-no-bd: #4d3232;--info-amber-bg: #241f10;--info-amber-border: #4a3f1a;--info-amber-text: #e0c070;--warn-amber-bg: #2a1d0f;--warn-amber-border: #6a4520;--warn-amber-text: #e6a862;--warn-amber-fill: #e07830;--warn-amber-inner-bg: #241a0e;--warn-amber-inner-text: #e0a860;--birthday-from: #241f10;--birthday-to: #221820;--birthday-border: #4a3f1a;--birthday-text: #e0c070;--shadow-card: #00000050}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}[role=button]:focus-visible,.member-row:focus-visible,.service-card:focus-visible,.att-row:focus-visible,.card:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-body);min-height:100vh;color:var(--text);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}input,textarea,select{background:var(--surface);color:var(--text);border:1.5px solid var(--border);border-radius:8px;padding:10px 13px;width:100%;font-family:Inter,sans-serif;font-size:14px;font-weight:400;line-height:1.5;outline:none;transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}input::placeholder,textarea::placeholder{color:var(--text-faint)}input[type=checkbox],input[type=radio]{width:15px;height:15px;padding:0;margin:0;flex-shrink:0;border-radius:4px;accent-color:var(--brand)}option{background:var(--surface)}.fade-in{animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes splashIn{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}@keyframes splashDot{0%,80%,to{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.splash-logo{animation:splashIn .6s cubic-bezier(.2,.7,.2,1) both}.splash-dots{display:flex;gap:10px}.splash-dots span{width:9px;height:9px;border-radius:50%;background:var(--brand-accent);animation:splashDot 1.2s ease-in-out infinite}.splash-dots span:nth-child(2){animation-delay:.15s}.splash-dots span:nth-child(3){animation-delay:.3s}.btn-primary{background:var(--brand);color:var(--brand-contrast);border:none;padding:10px 20px;border-radius:8px;font-family:Inter,sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,box-shadow .15s;letter-spacing:-.1px}.btn-primary:hover{background:var(--brand-hover);box-shadow:0 2px 8px var(--brand-shadow)}.btn-primary:active{background:var(--brand-active)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-ghost{background:var(--surface);border:1.5px solid var(--border);color:var(--text-2);padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;font-family:Inter,sans-serif}.btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint-soft)}.btn-danger{background:var(--surface);border:1.5px solid var(--danger-border);color:var(--danger);padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;font-family:Inter,sans-serif}.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger-border-strong)}.card{background:var(--surface);border:1px solid var(--border-card);border-radius:14px;box-shadow:0 1px 4px var(--shadow-card)}h1,h2,h3,h4,.heading{font-family:Space Grotesk,Inter,sans-serif;letter-spacing:-.015em}.tab-btn{font-family:Space Grotesk,Inter,sans-serif;letter-spacing:-.01em}.page-title{font-family:Space Grotesk,Inter,sans-serif;font-size:22px;font-weight:700;color:var(--text-heading);letter-spacing:-.02em;line-height:1.15}.page-subtitle{font-size:13px;color:var(--text-muted-navy);font-weight:500;margin-top:3px}.section-title{font-size:11px;font-weight:700;color:var(--text-muted-navy);text-transform:uppercase;letter-spacing:.08em;margin:28px 0 14px}.section-title.flush{margin:0 0 12px}.card-title{font-family:Space Grotesk,Inter,sans-serif;font-size:14px;font-weight:600;color:var(--text-heading);letter-spacing:-.01em}.muted{color:var(--text-muted-navy)}.tab-btn{background:none;border:none;cursor:pointer;font-family:Inter,sans-serif;font-size:13px;font-weight:500;letter-spacing:0;padding:14px 16px;color:#ffffffa6;transition:color .15s;border-bottom:2px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.tab-btn.active{color:var(--brand-accent);border-bottom-color:var(--brand-accent);font-weight:600}.tab-btn:hover:not(.active){color:#ffffffe6}.tab-nav{display:flex;flex-wrap:wrap}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 32px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000026}.modal h2{font-family:Inter,sans-serif;font-weight:700;color:var(--text);font-size:15px;margin-bottom:22px;letter-spacing:.3px;text-transform:uppercase}.field-group{margin-bottom:16px}.field-label{font-size:11px;color:var(--text-muted);letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px;display:block;font-weight:600;font-family:Inter,sans-serif}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}.role-toggle{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);cursor:pointer;font-size:12px;color:var(--text-muted);margin:3px;transition:all .15s;font-family:Inter,sans-serif;background:var(--surface);font-weight:500}.role-toggle.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}.sex-btn{padding:9px 20px;border-radius:20px;border:1.5px solid var(--border);cursor:pointer;font-size:13px;color:var(--text-muted);background:var(--surface);transition:all .15s;font-family:Inter,sans-serif;font-weight:500}.sex-btn.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}.marital-btn{padding:9px 20px;border-radius:20px;border:1.5px solid var(--border);cursor:pointer;font-size:13px;color:var(--text-muted);background:var(--surface);transition:all .15s;font-family:Inter,sans-serif;font-weight:500}.marital-btn.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}.member-row{display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:10px;cursor:pointer;transition:background .12s;border-left:3px solid transparent}.member-row:hover{background:var(--brand-tint-soft)}.member-row.selected{background:var(--brand-tint);border-left-color:var(--brand)}.att-row{display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:8px;transition:background .12s;cursor:pointer}.att-row:hover{background:var(--brand-tint-soft)}.check-circle{width:28px;height:28px;border-radius:50%;border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;background:var(--surface)}.check-circle.checked{background:var(--brand);border-color:var(--brand)}.stat-box{background:var(--surface-alt);border:1px solid var(--border);border-radius:12px;padding:16px 20px;text-align:center;transition:box-shadow .15s}.stat-box:hover{box-shadow:0 2px 8px #0000000f}.stat-num{font-family:Inter,sans-serif;font-size:28px;font-weight:700;color:var(--brand);line-height:1.1}.stat-label{font-size:11px;color:var(--text-faint);letter-spacing:.5px;text-transform:uppercase;margin-top:4px;font-weight:500}.service-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;cursor:pointer;border:1px solid var(--border);background:var(--surface);transition:all .15s}.service-card:hover{border-color:var(--brand-accent);background:var(--brand-tint-soft)}.service-card.active{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 3px var(--brand-ring)}.error-msg{color:var(--danger);font-size:13px;margin-top:6px;font-weight:500;line-height:1.5}.success-msg{color:var(--success);font-size:13px;margin-top:6px;font-weight:500}.birthday-banner{background:linear-gradient(90deg,var(--birthday-from),var(--birthday-to));border:1px solid var(--birthday-border);border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--birthday-text);font-weight:500;line-height:1.5}.uncaptured-desktop{display:block}.uncaptured-mobile{display:flex;flex-direction:column;gap:8px}.uncaptured-scroll{max-height:65vh;overflow-y:auto}.uncaptured-head{position:sticky;top:0;z-index:1}.detail-panel{position:relative;width:330px;flex-shrink:0;align-self:flex-start}.close-btn{position:absolute;top:12px;right:12px;background:var(--surface-alt);border:1px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-faint);font-size:14px;transition:all .15s;z-index:1}.close-btn:hover{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}.section-divider{border:none;border-top:1px solid var(--border-divider);margin:16px 0}.section-title{font-size:11px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;margin-top:28px}.progress-bar-track{height:7px;background:var(--border-divider);border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}@media (max-width: 768px){body{font-size:14px}.tab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;display:flex;flex-wrap:nowrap}.tab-nav::-webkit-scrollbar{display:none}.tab-nav{-ms-overflow-style:none;scrollbar-width:none}.tab-btn{padding:12px 13px;font-size:12px;flex-shrink:0}.header-bar{padding:0 14px!important}.brand-name{font-size:13px!important;line-height:1.25}.header-actions{gap:8px!important}.header-actions .user-meta .user-role{display:none!important}.header-actions .user-name{font-size:11px!important;max-width:84px!important}.header-actions .btn-label{display:none!important}.header-actions button,.header-bar button{min-height:40px;min-width:40px;padding:8px 10px!important}.main-content{padding:14px!important}.member-list-layout{flex-direction:column!important}.detail-panel{width:100%!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;max-height:85vh!important;overflow-y:auto!important;border-radius:16px 16px 0 0!important;z-index:200!important;box-shadow:0 -4px 24px #0000001a!important}.att-grid{grid-template-columns:1fr!important}.service-card{min-width:180px;flex-shrink:0}.stats-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.filter-row{flex-wrap:wrap!important;gap:8px!important}.filter-row .search-input{min-width:100%!important;width:100%!important}.filter-row select{flex:1 1 calc(50% - 6px)!important;min-width:0!important;width:auto!important}.filter-row .age-filter{flex:1 1 100%!important;justify-content:flex-start!important}.filter-row .age-filter input{min-width:0!important;width:60px!important;flex:0 0 auto!important}.filter-row .btn-ghost,.filter-row .btn-primary{flex:1 1 calc(50% - 6px)!important}.user-row .user-controls{flex:1 1 100%!important;justify-content:flex-start!important;flex-wrap:wrap!important}.user-row .user-controls select{flex:1 1 auto!important}.field-row,.field-row-3{grid-template-columns:1fr!important}.modal{max-width:100%!important;margin:0!important;border-radius:16px 16px 0 0!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;max-height:90vh!important;padding:24px 20px!important}.modal-bg{align-items:flex-end!important;padding:0!important}.detail-panel.hide-behind-modal{display:none!important}.breakdown-grid{grid-template-columns:1fr!important}.att-row{padding:14px!important}.check-circle{width:34px!important;height:34px!important}.member-row{padding:13px!important}@media (max-width: 380px){.stat-num{font-size:22px!important}.stat-label{font-size:9px!important}}}@media (max-width: 768px){.mobile-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:199}}.role-banner-admin,.role-banner-board{background:var(--brand-tint);border-bottom:1px solid var(--brand-accent-border);color:var(--brand)}.role-banner-usher{background:var(--brand-tint-soft-2);border-bottom:1px solid var(--brand-accent-border-soft);color:var(--brand)}@media (min-width: 600px) and (max-width: 1024px){.tab-btn{padding:12px 13px;font-size:12px}.main-content{padding:18px!important}}.grid-2{display:grid;grid-template-columns:1fr 1fr}@media (max-width: 768px){.grid-2{grid-template-columns:1fr!important}.slicer-row{flex-wrap:wrap!important}.att-header{flex-direction:column!important;align-items:flex-start!important}.att-header-controls{flex-wrap:wrap!important;gap:6px!important}.att-header-controls select{flex:1!important;min-width:100px!important;font-size:11px!important}}
