:root{--indigo:#14294f;--lavender:#eaf0f8;--ink:#11213d;background:#fcfbf9}
.auth{max-width:440px;margin:5vh auto;display:grid;gap:20px;padding:30px}
.auth form,.auth label{display:grid;gap:9px}.auth form{gap:14px}.auth input{width:100%}
.date-form,.period,#upload{display:flex;gap:8px;align-items:center}.date-form button{font-size:22px;padding:5px 15px}
#upload{margin:16px 0}.upload-button{justify-content:center;min-width:106px;background:#14294f;color:#fff}
.month-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.positive{color:var(--green)}.negative{color:var(--red)}
.trend{margin-bottom:16px}.bars{margin:14px 0 0;display:flex;gap:12px;overflow:auto}.bars a{min-width:28px;text-align:center;text-decoration:none}.bars a div{height:95px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--line)}.bars i{width:10px;background:#228144;border-radius:3px 3px 0 0}.bars i+i{background:#ba3446}
@media(max-width:760px){
.nav{min-height:57px;display:flex}.nav nav{position:fixed;inset:auto 0 0;z-index:10;background:white;border:0;border-top:1px solid var(--line);padding:7px 9px max(8px,env(safe-area-inset-bottom));display:flex;justify-content:space-around;gap:3px}
.nav nav a{padding:12px 5px;flex:1;text-align:center;font-size:14px}.nav a[aria-current]{color:white;background:#14294f}
main.shell{padding-bottom:100px}.page-head{display:flex;flex-wrap:wrap;justify-content:space-between}.page-head h1{width:100%;font-size:29px}
.date-form{width:100%;justify-content:space-between}.date-form input{font-size:17px;font-weight:bold;text-align:center}
#upload{width:100%}.upload-button{flex:1;min-height:47px}.month-row{grid-template-columns:1fr 1fr;font-size:14px}
.auth{margin-top:2vh}.metric.balance{background:#ebeff6;color:#15294c}
}