/* Version 3: mobile forms, document library and account menu */
:root{--paper:#f4f6f7;--accent:#36786e;--ink:#253e4a}
body{background:radial-gradient(ellipse at 95% 0,#e5efe9 0,transparent 45%),var(--paper)}
svg{display:block;flex-shrink:0}
header{background:linear-gradient(110deg,#edf4f0,#f6f8f6 70%,#e7eeef);position:relative;gap:20px;border-bottom-color:#dce7e1}
header>div:first-child{min-width:0}
header h1{font-weight:500}
header:after{content:"";position:absolute;right:105px;bottom:0;width:110px;height:30px;border-radius:100% 0 0 0;background:linear-gradient(125deg,#9cbeaa30,#9fbbc01c);pointer-events:none}
.brand{color:#397d70}
aside{background:#fcfdfc}
.card,.event{box-shadow:0 3px 12px #29413904;transition:border-color .2s}
.card:hover,.event:hover{border-color:#cdded7}
.next{background:linear-gradient(105deg,#dfede5,#eff5ed);border-color:#d2e3d9;position:relative;padding:19px 22px}
.next:before{content:"";width:3px;position:absolute;left:0;top:15px;bottom:15px;background:#72a78c;border-radius:4px}
.tag{margin-bottom:9px}
.section-title{align-items:flex-start;gap:14px}
.section-title>div:first-child{flex:1;min-width:0}
.section-title p{margin-top:5px;line-height:1.5}
.section-title>button{flex-shrink:0;white-space:nowrap}
.section-actions{display:flex;gap:8px;flex-wrap:wrap}
.metrics .metric:nth-child(1){background:#eff3f6;border-color:#dde6ed}
.metrics .metric:nth-child(2){background:#eaf4ee;border-color:#d6e8de}
.metrics .metric:nth-child(3){background:#fbf4e8;border-color:#efe2c9}
.metric strong{font-variant-numeric:tabular-nums}
.profile-wrap{position:relative;z-index:30;flex-shrink:0}
.avatar-button{border-radius:50%;width:44px;height:44px;padding:10px;color:#397568;border:1px solid #cbded4;background:#ffffffb8;display:grid;place-items:center}
.avatar-button[aria-expanded=true]{background:#dcebe2;box-shadow:0 0 0 4px #d9e8df60}
.account-menu{position:absolute;right:0;top:55px;width:250px;max-width:calc(100vw - 30px);border:1px solid #dce5df;box-shadow:0 16px 50px #253e4a20;border-radius:15px;background:#fff;padding:18px;z-index:50}
.account-menu h3{margin-top:5px;margin-bottom:2px;overflow-wrap:anywhere}
.account-menu p{font-size:12px;overflow-wrap:anywhere;margin-bottom:14px}
.account-menu button{width:100%;text-align:left;border:0;background:transparent;border-radius:7px}
.account-menu button:hover{background:#edf4ef}
.account-menu #logout{color:#a05b54}
.account-shortcuts{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
.password-field{width:100%;min-width:0}
.password-field input{padding-right:52px}
.password-field button{width:44px;height:40px;top:3px;right:4px;display:grid;place-items:center;color:#467466;padding:8px;appearance:none}
.password-field svg{width:22px!important;height:22px!important;overflow:visible;fill:none!important}
label,.field-grid,.date-time-grid,#editorFields{min-width:0;max-width:100%}
input,select,textarea{box-sizing:border-box;max-width:100%;min-inline-size:0}
input[type=date],input[type=time],input[type=datetime-local]{appearance:none;-webkit-appearance:none;display:block;inline-size:100%;min-inline-size:0;max-inline-size:100%;min-height:46px;text-align:left}
input::-webkit-date-and-time-value{min-width:0;text-align:left;margin:0}
input::-webkit-datetime-edit{display:inline-flex;padding:0;max-width:100%}
.date-time-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
dialog{max-height:calc(100dvh - 32px);overflow-x:hidden;width:min(540px,calc(100% - 28px))}
.dialog-heading{align-items:center;margin-bottom:15px;min-width:0}
.dialog-heading h2{min-width:0;line-height:1.35;margin:0;padding-right:8px}
.dialog-heading>button{flex:0 0 36px;min-height:36px;width:36px;height:36px;padding:3px;background:#f2f5f3;border-radius:50%;font-size:22px;color:#657b75}
dialog form{padding:25px}
dialog footer{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);position:sticky;bottom:-25px;background:#fff;z-index:1}
#editorForm>.error:empty{display:none}
#editorFields textarea{min-height:90px}
.document-intro{display:flex;gap:18px;align-items:center;padding:23px;border-radius:15px;background:linear-gradient(115deg,#e4efea,#edf1f6);margin-bottom:20px;border:1px solid #d8e4df}
.document-intro>svg{width:33px;height:33px;color:#649483}
.document-intro h3{margin-bottom:4px;font-size:16px}
.document-intro p{margin-bottom:5px;font-size:13px}
.document-intro span{font-size:11px;color:#557b6d}
.document-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px}
.document-icon{background:#e9f1ee;color:#598b79;border-radius:12px;height:42px;display:grid;place-items:center}
.button-link{display:inline-flex;align-items:center;padding:6px 10px;background:#eaf3ef;border:1px solid #dce8e1;border-radius:8px;text-decoration:none;font-size:12px;min-height:34px}
input[type=file]{padding:10px;font-size:13px;overflow:hidden}
input[type=file]::file-selector-button{padding:7px 9px;background:#e9f1ee;border:0;border-radius:6px;color:#376d5d;margin-right:10px;font:inherit}
.event>div{min-width:0}.balance-row{flex-wrap:wrap}.expense-top>div{min-width:0}
@media(max-width:600px){
header{padding:22px 19px;min-height:112px;align-items:center}
header:after{right:80px;width:80px}
header>div:first-child{max-width:calc(100% - 65px)}
header h1{font-size:24px}
main{padding:23px 16px 105px}
#navigation button[data-tab=notes],#navigation button[data-tab=admin]{display:none}
#navigation{padding-left:5px;padding-right:5px}
#navigation button{gap:5px;padding:8px 2px;font-size:10px}
#navigation button.active{background:#e1eee6}
#navigation button span{font-size:10px}
.section-title{flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:18px}
.section-title>div:first-child{flex-basis:180px}
.section-title>button{padding:9px 12px;font-size:12px;max-width:100%}
.section-title h2{font-size:18px;line-height:1.4}
.section-title p{font-size:12px}
.section-actions{flex-basis:100%}
.section-actions button{flex:1}
.filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.filters>*{min-width:0!important;width:100%}
.filters input{grid-column:1/-1}
.filters select{font-size:14px;min-height:44px}
.date-time-grid{grid-template-columns:minmax(0,1fr);gap:0}
dialog form{padding:21px}
dialog footer{bottom:-21px}
dialog{border-radius:20px}
.dialog-heading h2{font-size:18px}
.document-intro{padding:18px;gap:12px}
.document-card{padding:17px;gap:12px}
.card-actions{gap:8px}
.card-actions button{min-height:36px}
}
@media(max-width:350px){.metrics{grid-template-columns:minmax(0,1fr)}.filters{grid-template-columns:minmax(0,1fr)}}