*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#172033;font-family:Arial,sans-serif}#app{min-height:100vh;display:flex}aside{width:240px;background:#172033;color:white;padding:22px 14px}.brand{display:flex;gap:10px;align-items:center;padding:5px 10px 28px}.logo{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#b99742;font-weight:bold}.brand small{display:block;color:#9da7b7;margin-top:4px}.nav{width:100%;border:0;background:transparent;color:#aeb6c4;text-align:left;padding:13px;border-radius:9px;margin:3px 0;cursor:pointer}.nav:hover,.nav.active{background:#ffffff14;color:#fff}main{flex:1;padding:32px;min-width:0}header h2{margin:0}header p{color:#7b8698;font-size:13px;margin-bottom:25px}.hero{padding:30px;border-radius:18px;background:linear-gradient(120deg,#172033,#41516b);color:white;margin-bottom:18px}.hero small{color:#d9bd68;letter-spacing:2px}.hero h1{margin:10px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat,.card{background:white;border:1px solid #e5e9ef;border-radius:15px}.stat{padding:17px}.stat label{font-size:10px;color:#8791a1;text-transform:uppercase}.stat strong{display:block;font-size:23px;margin:8px 0}.stat small{color:#8791a1}.card{padding:22px}.card h3{margin:0 0 6px}.card p{color:#7d8790;font-size:12px;margin:0}.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}button{font:inherit;cursor:pointer}#addMember,#addExpense,.primary{background:#172033;color:#fff;border:0;border-radius:9px;padding:10px 14px}.cardhead button:not(.primary){border:0;border-radius:9px;padding:10px 14px;background:#edf0f4;color:#253047}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf0f4;font-size:13px}th{font-size:10px;color:#8a94a4;text-transform:uppercase}.periods{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.period{background:#fff;border:1px solid #e4e7ec;border-radius:10px;padding:12px;min-width:150px;text-align:left}.period.selected{border-color:#b99742}.period small{display:block;color:#7e8795;margin-top:5px}.period input{width:100%;margin-top:8px;padding:7px}.badge{font-size:10px;font-weight:bold;padding:6px 9px;border-radius:15px}.paid{background:#e8f7ef;color:#17734f}.unpaid{background:#fff0f0;color:#b73c3c}.members{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.member{border:1px solid #e6e9ef;border-radius:11px;padding:15px;display:flex;justify-content:space-between;align-items:center}.danger{border:0;background:#fff0f0;color:#b83e3e;border-radius:8px;padding:8px}.hidden{display:none!important}.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:20px}.modalbox{background:#fff;width:min(430px,100%);padding:24px;border-radius:16px}.modalbox input,.modalbox select,.modalbox textarea{width:100%;padding:11px;margin:6px 0;border:1px solid #e0e4ea;border-radius:8px}.modalbox textarea{min-height:80px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.log{padding:13px 0;border-bottom:1px solid #edf0f4}.log small{display:block;color:#8a94a4;margin-top:5px}@media(max-width:800px){#app{display:block}aside{width:100%}.nav{width:auto}.stats{grid-template-columns:repeat(2,1fr)}main{padding:20px}}@media(max-width:480px){.stats{grid-template-columns:1fr}}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.authbtn{border:0;border-radius:9px;padding:10px 14px;background:#172033;color:#fff}.viewer{font-size:12px;color:#7d8798;padding:10px}
.brand .logo{overflow:hidden;flex:0 0 42px}
.brand .logo img{width:100%;height:100%;object-fit:cover}
.searchbar{margin-bottom:14px}.searchbar input{width:100%;padding:11px;border:1px solid #e0e4ea;border-radius:9px}
.settingsForm{max-width:680px;margin-top:18px}.settingsForm label{display:block;font-size:12px;font-weight:bold;margin-top:14px}.settingsForm input,.settingsForm textarea{width:100%;padding:11px;margin-top:6px;border:1px solid #e0e4ea;border-radius:8px}.settingsForm textarea{min-height:90px}
.reportActions{display:flex;gap:8px}.reportActions button{border:0;border-radius:9px;padding:10px 14px;background:#edf0f4;color:#253047}
.reportBox{padding:18px;border:1px solid #e6e9ef;border-radius:12px;margin:14px 0}.reportGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reportGrid div{padding:14px;background:#f7f8fa;border-radius:10px}.reportGrid strong{display:block;font-size:20px;margin-top:5px}
@media(max-width:600px){.reportGrid{grid-template-columns:1fr}.topbar{display:block}}

.logoPreview{margin-top:10px;min-height:46px}.logoPreview img{width:80px;height:80px;object-fit:contain;border:1px solid #e0e4ea;border-radius:10px;padding:5px;background:#fff}.uploading{font-size:12px;color:#7d8798;margin-top:6px}

.periodWrap{position:relative;display:inline-flex;align-items:stretch;margin-right:8px;margin-bottom:8px}
.periodWrap .period{margin:0}
.periodDelete{border:0;border-radius:0 10px 10px 0;padding:0 10px;background:#fee2e2;cursor:pointer;font-size:15px}
.periodWrap .period{border-radius:10px 0 0 10px}
.periodWrap .period:only-child{border-radius:10px}
.periodWrap:has(.periodDelete[style*="display: inline"]){ }