:root {
  --background:#f4f6f8; --foreground:#202532; --card:#fff; --primary:#0033cc;
  --primary-dark:#002ba9; --secondary:#00bfff; --cta:#ffd700; --success:#1d9b50;
  --warning:#d99a00; --danger:#d32f2f; --muted:#eef1f4; --muted-fg:#687180;
  --border:#dce1e7; --radius:10px; --shadow:0 8px 26px rgba(23,38,73,.08);
}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--foreground);background:var(--background)}body{margin:0;min-height:100vh;background:var(--background)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}img{max-width:100%}button{cursor:pointer}.hidden{display:none!important}.mobile-only{display:none!important}
.container{width:min(1180px,calc(100% - 32px));margin-inline:auto}.container-narrow{width:min(920px,calc(100% - 32px));margin-inline:auto}.page-content{padding:32px 0 96px}.stack{display:grid;gap:16px}.stack-lg{display:grid;gap:24px}.row{display:flex;align-items:center;gap:12px}.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.span-2{grid-column:span 2}.muted{color:var(--muted-fg)}.small{font-size:.84rem}.tiny{font-size:.73rem}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-danger{color:var(--danger)}.text-primary{color:var(--primary)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.text-right{text-align:right}.empty{text-align:center;padding:48px 20px;color:var(--muted-fg)}.empty-icon{font-size:2.5rem;opacity:.4;display:block;margin-bottom:10px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(20,30,55,.03)}.card-hover{transition:.2s}.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.card-header{padding:20px 22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.card-header h2,.card-header h3{margin:0;font-size:1.05rem}.card-header p{margin:5px 0 0;color:var(--muted-fg);font-size:.88rem}.card-body{padding:22px}.card-footer{padding:16px 22px;border-top:1px solid var(--border)}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.page-header h1{font-size:1.65rem;margin:0;font-weight:750}.page-header p{margin:5px 0 0;color:var(--muted-fg)}.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:1px solid transparent;border-radius:8px;min-height:40px;padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;font-size:.9rem;transition:.18s}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--primary);color:#fff}.btn-cta{background:var(--cta);color:#1c2130}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-outline{background:#fff;border-color:var(--border);color:var(--foreground)}.btn-outline-primary{background:transparent;border-color:var(--primary);color:var(--primary)}.btn-ghost{background:transparent;color:var(--primary)}.btn-sm{min-height:33px;padding:6px 11px;font-size:.8rem}.btn-icon{width:38px;padding:0}.icon-button{border:0;background:transparent;color:inherit;font-size:1.35rem;border-radius:8px;padding:8px}
.field{display:grid;gap:7px}.field label{font-size:.86rem;font-weight:650}.field input,.field select,.field textarea,.input{width:100%;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--foreground);padding:10px 12px;min-height:43px;outline:none}.field textarea{resize:vertical;min-height:90px}.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(0,191,255,.15)}.field small{color:var(--muted-fg)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field-full{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.input-with-icon{position:relative}.input-with-icon input{padding-left:40px}.input-with-icon>span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted-fg)}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:700;white-space:nowrap}.badge-active,.badge-approved,.badge-paid,.badge-confirmed{color:var(--success);background:rgba(29,155,80,.11)}.badge-pending,.badge-scheduled{color:#9b6d00;background:rgba(255,215,0,.18)}.badge-in_review{color:#006e92;background:rgba(0,191,255,.14)}.badge-delinquent,.badge-overdue,.badge-rejected{color:var(--danger);background:rgba(211,47,47,.1)}.badge-suspended,.badge-inactive,.badge-cancelled{color:var(--muted-fg);background:var(--muted)}.badge-info{color:var(--primary);background:rgba(0,51,204,.09)}
.stat-card{padding:20px}.stat-top{display:flex;align-items:flex-start;justify-content:space-between}.stat-label{font-size:.84rem;color:var(--muted-fg)}.stat-value{font-size:1.65rem;font-weight:780;margin-top:5px}.stat-note{font-size:.75rem;color:var(--muted-fg);margin-top:5px}.stat-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:rgba(0,51,204,.09);color:var(--primary)}.stat-icon.success{background:rgba(29,155,80,.1);color:var(--success)}.stat-icon.warning{background:rgba(255,215,0,.18);color:#9b6d00}.stat-icon.secondary{background:rgba(0,191,255,.12);color:#008bb9}.border-warning{border-left:4px solid var(--warning)}.border-primary{border-left:4px solid var(--primary)}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover}.brand-light{color:#fff}.member-header{height:64px;background:var(--primary);color:#fff;position:sticky;top:0;z-index:40}.nav-container{width:min(1220px,calc(100% - 32px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}.member-nav{display:flex;align-items:center;gap:3px}.member-nav a,.member-nav button{border:0;background:transparent;color:rgba(255,255,255,.76);padding:9px 10px;border-radius:8px;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px}.member-nav a:hover,.member-nav a.active{color:#fff;background:rgba(255,255,255,.14)}.member-nav .mode-switch{background:rgba(0,191,255,.2);color:#fff;margin-left:4px}.member-nav .nav-logout:hover{background:rgba(211,47,47,.75);color:#fff}.bottom-nav{display:none}
.admin-sidebar{position:fixed;inset:0 auto 0 0;width:264px;background:var(--primary);color:#fff;display:flex;flex-direction:column;z-index:50}.admin-brand{display:flex;align-items:center;gap:12px;padding:22px;border-bottom:1px solid rgba(255,255,255,.14)}.admin-brand img{width:50px;height:50px;border-radius:50%}.admin-brand span{display:grid}.admin-brand strong{font-size:1.15rem}.admin-brand small{opacity:.68;margin-top:2px}.admin-nav{padding:16px;display:grid;gap:4px;flex:1}.admin-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;font-size:.93rem;font-weight:600;color:rgba(255,255,255,.87)}.admin-nav a:hover{background:rgba(255,255,255,.09)}.admin-nav a.active{background:var(--secondary);color:#15202b}.admin-nav a span{width:22px;text-align:center}.sidebar-footer{padding:14px 16px 20px;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:5px}.sidebar-footer a,.sidebar-footer button{border:0;background:transparent;color:rgba(255,255,255,.88);padding:11px 12px;border-radius:8px;text-align:left}.sidebar-footer a:hover{background:rgba(0,191,255,.25)}.sidebar-footer button:hover{background:rgba(211,47,47,.7)}.admin-main{margin-left:264px;padding:32px;min-height:100vh}.admin-mobile-header{display:none}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:.86rem}.table th{color:var(--muted-fg);font-size:.75rem;text-transform:none;font-weight:650;text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}.table td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle}.table tbody tr:hover{background:#f9fafb}.table tr:last-child td{border-bottom:0}.table-actions{display:flex;justify-content:flex-end;gap:5px}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.filters .input{width:260px}.filters select{width:auto;min-width:150px}.pagination{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid var(--border);margin-top:12px}.page-buttons{display:flex;gap:5px}.page-buttons a{width:34px;height:34px;border:1px solid var(--border);border-radius:7px;display:grid;place-items:center;font-size:.82rem}.page-buttons a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(12,19,34,.58);backdrop-filter:blur(2px)}.modal-panel{position:relative;width:min(540px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.3);padding:24px}.modal-panel.modal-lg{width:min(720px,100%)}.modal-close{position:absolute;right:16px;top:14px;border:0;background:transparent;font-size:1.5rem;color:var(--muted-fg)}.modal-header{padding-right:28px;margin-bottom:20px}.modal-header h2{font-size:1.25rem;margin:0}.modal-header p{font-size:.88rem;color:var(--muted-fg);margin:5px 0 0}.detail-list{display:grid;gap:12px}.detail-row{display:flex;justify-content:space-between;gap:20px;padding-bottom:10px;border-bottom:1px solid var(--border)}.detail-row:last-child{border:0}.detail-row span:first-child{color:var(--muted-fg)}
.tabs{display:flex;gap:4px;background:var(--muted);padding:4px;border-radius:9px;width:max-content;max-width:100%;overflow:auto}.tab{border:0;background:transparent;padding:8px 14px;border-radius:7px;color:var(--muted-fg);font-weight:650;font-size:.84rem;white-space:nowrap}.tab.active{background:#fff;color:var(--foreground);box-shadow:0 1px 3px rgba(0,0,0,.09)}.tab-panel{display:none}.tab-panel.active{display:block}
.progress{height:9px;background:var(--muted);border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--primary);border-radius:inherit}.progress.success>span{background:var(--success)}.progress.warning>span{background:var(--warning)}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.summary-row:last-child{border:0}
.toast-stack{position:fixed;right:20px;top:20px;z-index:200;display:grid;gap:10px}.toast{background:#fff;border-left:4px solid var(--primary);box-shadow:var(--shadow);border-radius:8px;padding:13px 16px;width:min(360px,calc(100vw - 40px));animation:slidein .2s}.toast.error{border-color:var(--danger)}.toast.success{border-color:var(--success)}@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.notification-item{display:flex;gap:14px;padding:16px;border-radius:9px;background:rgba(0,191,255,.06);border-left:3px solid transparent}.notification-item.unread{border-left-color:var(--primary);background:rgba(0,51,204,.045)}.notification-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(0,51,204,.1);color:var(--primary);flex:none}.notification-icon.success{background:rgba(29,155,80,.1);color:var(--success)}.notification-icon.warning{background:rgba(255,215,0,.18);color:#936800}.notification-icon.alert{background:rgba(211,47,47,.1);color:var(--danger)}.notification-main{min-width:0;flex:1}.notification-main h3{font-size:.92rem;margin:0}.notification-main p{font-size:.82rem;color:var(--muted-fg);margin:5px 0}.notification-main small{color:var(--muted-fg)}
.profile-hero{background:linear-gradient(180deg,var(--primary),#1648d8);color:#fff;padding:34px 0 92px}.profile-row{display:flex;align-items:center;gap:20px}.avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:4px solid var(--cta);background:#fff}.profile-row h1{margin:0;font-size:1.55rem}.profile-row p{opacity:.8;margin:6px 0}.dashboard-overlap{margin-top:-60px}.quick-action{padding:22px;text-align:center;display:grid;place-items:center;gap:10px;height:100%}.action-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:800}.action-icon.secondary{background:var(--secondary);color:#17202b}.action-icon.success{background:var(--success)}.action-icon.warning{background:var(--warning);color:#17202b}
.digital-card{aspect-ratio:1.6/1;background:linear-gradient(135deg,var(--primary),#1648d8);border-radius:16px;color:#fff;padding:22px;position:relative;overflow:hidden;box-shadow:0 18px 42px rgba(0,32,140,.3)}.digital-card:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-90px;bottom:-150px}.digital-card-header{display:flex;justify-content:space-between;align-items:center}.digital-card-header img{width:43px;height:43px;border-radius:50%}.digital-member{display:flex;gap:14px;margin-top:20px}.digital-member img{width:66px;height:79px;object-fit:cover;border:2px solid var(--cta);border-radius:8px;background:#fff}.digital-member h3{font-size:.95rem;margin:2px 0 4px}.digital-member p{font-size:.72rem;opacity:.78;margin:3px 0}
.event-card{overflow:hidden}.event-color{height:6px;background:var(--primary)}.event-color.sports{background:var(--success)}.event-color.cultural{background:var(--secondary)}.event-color.educational{background:var(--cta)}.event-color.charity{background:var(--danger)}.event-meta{display:grid;gap:6px;color:var(--muted-fg);font-size:.82rem;margin-top:12px}.event-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.date-tile{width:62px;padding:8px;text-align:center;border-radius:9px;background:rgba(0,51,204,.06);color:var(--primary);font-weight:800}.date-tile small{display:block;text-transform:uppercase;color:var(--muted-fg);font-size:.62rem}
.settings-layout{display:grid;grid-template-columns:240px 1fr;gap:22px}.settings-nav{padding:8px}.settings-nav button{width:100%;border:0;background:transparent;padding:12px 13px;border-radius:8px;text-align:left;color:var(--muted-fg);font-weight:650}.settings-nav button.active{background:var(--primary);color:#fff}.setting-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}.switch{appearance:none;width:42px;height:24px;background:#cbd1d9;border-radius:99px;position:relative;transition:.2s}.switch:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}.switch:checked{background:var(--success)}.switch:checked:after{left:21px}
.chart-bars{height:230px;display:flex;align-items:flex-end;gap:12px;padding:20px 8px 28px;border-bottom:1px solid var(--border)}.bar-group{height:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative}.bar{width:42%;min-height:3px;border-radius:4px 4px 0 0;background:var(--primary)}.bar.expense{background:var(--danger)}.bar-label{position:absolute;bottom:-23px;font-size:.7rem;color:var(--muted-fg)}.donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--primary) 0 56%,var(--secondary) 56% 80%,var(--cta) 80%);position:relative;margin:auto}.donut:after{content:"";position:absolute;inset:45px;background:#fff;border-radius:50%}.legend{display:grid;gap:9px;margin-top:18px}.legend-row{display:flex;justify-content:space-between;font-size:.82rem}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;background:var(--primary)}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}
@media(max-width:1050px){.admin-sidebar{transform:translateX(-100%);transition:.2s}.admin-sidebar.open{transform:translateX(0)}.admin-main{margin-left:0;padding-top:84px}.admin-mobile-header{height:64px;background:var(--primary);color:#fff;display:flex;position:fixed;left:0;right:0;top:0;z-index:45;align-items:center;justify-content:space-between;padding:0 18px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.member-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--primary);padding:12px 16px;flex-direction:column;align-items:stretch}.member-nav.open{display:flex}.member-nav a,.member-nav button{text-align:left}.mobile-only{display:block!important}}
@media(max-width:760px){.container,.container-narrow{width:min(100% - 24px,1180px)}.page-content{padding-top:22px}.admin-main{padding-left:14px;padding-right:14px}.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.member-header .brand strong{display:none}.page-header{flex-direction:column}.page-actions{width:100%}.page-actions .btn{flex:1}.filters{align-items:stretch}.filters .input,.filters select{width:100%}.table .hide-mobile{display:none}.settings-layout{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-nav button{width:auto;white-space:nowrap}.profile-row{flex-direction:column;text-align:center}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);z-index:39;justify-content:space-around;padding:7px 2px max(7px,env(safe-area-inset-bottom))}.bottom-nav a{display:grid;place-items:center;gap:2px;color:var(--muted-fg);font-size:.62rem}.bottom-nav a span{font-size:.95rem;font-weight:750}.bottom-nav a.active{color:var(--primary)}.pagination{align-items:flex-start;gap:10px;flex-direction:column}.modal-panel{padding:20px}.digital-card{padding:16px}.digital-member{margin-top:12px}.chart-bars{gap:5px}}