.brand-logo{display:block;width:clamp(240px,26vw,320px);height:64px;object-fit:contain;object-position:left center}
.topbar .brand{flex:0 0 320px;width:320px;height:64px;padding:4px 10px;background:transparent url('/assets/masjid-logo.png?v=1') center/contain no-repeat;background-origin:content-box;filter:brightness(0) saturate(100%) invert(78%) sepia(60%) saturate(670%) hue-rotate(355deg) brightness(94%) contrast(89%)}
.topbar .brand b,.topbar .brand small{display:none}.login-card .mark{width:100%;height:118px;border-radius:0;background:transparent url('/assets/masjid-logo.png?v=1') center/100% auto no-repeat;font-size:0}.login-card>span{text-align:center}.receipt-logo{display:block;width:320px;max-width:70vw;height:70px;object-fit:contain;object-position:left center}

/* Global usability */
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}input,select,textarea{max-width:100%}.panel,.stats article,.login-card{box-shadow:0 10px 30px rgba(18,62,50,.045)}.table-wrap{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.table-wrap table{min-width:760px}.entry-form input,.entry-form select,.entry-form textarea,.filters input,.filters select,.report-tabs input,.login-card input,.backup-card input{font-size:16px}.entry-form button,.filters button,.quick a,.primary,.backup-card button{min-height:46px;display:flex;align-items:center;justify-content:center}.panel-head{gap:12px}.panel-head h2{line-height:1.2}.alert{overflow-wrap:anywhere}

@media(max-width:1100px){.topbar{padding-inline:24px;gap:18px}.topbar .brand{flex-basis:270px;width:270px}.page{width:min(100% - 28px,1240px)}.stats{grid-template-columns:repeat(2,1fr)}.entry-form{grid-template-columns:repeat(2,1fr)}.entry-form .wide{grid-column:1/-1}.table-wrap table{min-width:900px}}

@media(max-width:900px){
 body{font-size:14px}.topbar{position:sticky;top:0;z-index:1001;height:68px;padding:0 15px;box-shadow:0 5px 22px rgba(8,34,26,.2)}.topbar .brand{flex:1 1 auto;width:auto;max-width:245px;height:54px;padding:5px 0;background-position:left center}.topbar nav,.topbar .account-menu{display:none!important}.menu-toggle{width:46px;height:46px;margin-left:auto!important;display:grid!important;place-items:center;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important;background:rgba(255,255,255,.08)!important;color:#fff;font-size:0!important}.menu-toggle:after{content:'☰';font-size:25px;line-height:1}.mobile-nav{position:fixed!important;z-index:1000!important;inset:68px 0 0!important;padding:20px 16px 30px!important;overflow:auto;background:rgba(18,62,50,.98)!important;box-shadow:none}.mobile-nav:not([hidden]){display:flex!important;flex-direction:column;gap:7px}.mobile-nav a{min-height:52px;display:flex;align-items:center;padding:13px 16px!important;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.06);font-size:16px;font-weight:800}.mobile-nav a:hover{background:rgba(255,255,255,.14)}
 .page{width:min(100% - 24px,760px);margin:24px auto 60px}.page-head{margin-bottom:18px}.page-head h1{font-size:clamp(29px,7vw,38px);line-height:1.08}.quick{flex-wrap:wrap}.quick a{flex:1 1 180px}.backup-grid{grid-template-columns:1fr}.report-tabs{overflow-x:auto;align-items:center!important;flex-direction:row!important}.report-tabs a,.report-tabs button{flex:0 0 auto;white-space:nowrap}.filters{display:grid;grid-template-columns:minmax(0,1fr) auto auto}.filters input{grid-column:1/-1}.user-grid article{grid-template-columns:minmax(0,1fr) auto}.login-page{padding:16px}.login-card{padding:28px 24px}.login-card .mark{height:96px}.login-card h1{font-size:31px}.account-dropdown{right:0}
}

@media(max-width:640px){
 body{font-size:13px}.topbar .brand{max-width:215px}.page{width:calc(100% - 16px);margin-top:18px}.page-head span{font-size:9px}.page-head h1{font-size:29px}.stats{grid-template-columns:1fr 1fr;gap:9px}.stats article{min-width:0;padding:15px 13px;border-radius:11px}.stats span{font-size:10px}.stats b{font-size:17px;overflow-wrap:anywhere}.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick a{min-width:0;text-align:center}.quick a:last-child:nth-child(odd){grid-column:1/-1}.panel{border-radius:11px;margin-bottom:14px}.panel-head{min-height:54px;padding:12px 14px}.panel-head h2{font-size:19px}.panel-head>b{font-size:11px}.entry-form{grid-template-columns:1fr!important;padding:14px;gap:12px}.entry-form .wide{grid-column:auto!important}.entry-form input,.entry-form select,.entry-form textarea{min-height:48px}.payer-fields,.expense-fields{padding:13px!important}.payer-title b{font-size:18px!important}.filters{padding:10px;grid-template-columns:1fr 1fr}.filters input,.filters select{grid-column:1/-1;width:100%}.filters button,.filters a{min-height:44px;display:grid;place-items:center;border-radius:8px}.filters a{border:1px solid #dce3dd;text-decoration:none}.report-tabs{margin-inline:-2px;padding:9px}.report-tabs input{min-width:145px}.table-wrap{position:relative}.table-wrap:after{content:'Swipe table →';position:sticky;right:8px;bottom:6px;float:right;padding:3px 7px;border-radius:5px;background:rgba(18,62,50,.84);color:#fff;font-size:9px;pointer-events:none}.table-wrap table{min-width:820px}th,td{padding:11px 12px}.ledger-actions{flex-direction:column;align-items:stretch!important}.ledger-actions a,.ledger-actions button{width:100%;text-align:center}.backup-card{padding:18px}.backup-card h2{font-size:22px}.user-grid article{grid-template-columns:1fr}.user-grid form{grid-column:1/-1;display:grid}.audit-pagination{gap:4px!important;overflow-x:auto;justify-content:flex-start!important}.audit-pagination a,.audit-pagination span{min-width:36px!important}.login-card{padding:24px 18px;border-radius:16px}.login-card .mark{height:82px}.login-card h1{font-size:28px}.login-card button{height:50px}footer{padding:18px 12px 28px}
}

@media(max-width:390px){.topbar .brand{max-width:185px}.stats{grid-template-columns:1fr}.quick{grid-template-columns:1fr}.quick a:last-child:nth-child(odd){grid-column:auto}.page-head h1{font-size:27px}.panel-head{align-items:flex-start;flex-direction:column}.panel-head button,.panel-head a{width:100%;text-align:center}.login-card .mark{height:72px}}

@media(hover:hover){button:hover,.quick a:hover,.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:900px){body:has(.mobile-nav:not([hidden])){overflow:hidden}.topbar:has(+ .mobile-nav:not([hidden])) .menu-toggle:after{content:'×';font-size:32px}}