.account-screen{width:min(440px,calc(100% - 28px));margin:8vh auto;padding:24px;border:1px solid #425d7e;border-radius:18px;background:linear-gradient(145deg,#f8fbff,#edf3fc);color:#19324f;box-shadow:0 20px 65px #0005}
.account-brand{display:flex;align-items:center;gap:9px;margin-bottom:26px}.account-brand h1{color:#19324f;font-size:24px}.account-brand h1:before{display:none}.brand-mark{width:5px;height:26px;background:#a43e50;border-radius:4px}
.account-screen h2{font-size:18px;margin:12px 0 18px}.account-screen label{display:grid;gap:6px;font-size:13px;margin:12px 0}.account-screen input{width:100%;background:white;color:#19324f;border:1px solid #bdcfe3}.account-screen button{color:#19324f;background:#e8effa;border:1px solid #bfd0e6}.account-screen button.primary{background:#315b96;color:white;width:100%;margin-top:8px}.account-links{display:flex;justify-content:space-between;gap:8px;margin-top:14px}.account-links button{font-size:12px;padding:7px}.account-screen p{font-size:13px;line-height:1.6}.account-screen a{color:#315b96}.account-screen .family-choice{width:100%;text-align:left;margin:5px 0}.invitation{padding:10px;background:#e0f2e9;border-radius:9px;margin:10px 0}.invitation button{margin-top:7px}
.family-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#b9c9de;padding:0 0 8px;font-size:11px}.family-bar>div{display:flex;gap:5px;flex-wrap:wrap}.family-bar button{font-size:11px;min-height:27px;padding:4px 7px;border-radius:7px}.family-bar #familyLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#migrationModal{width:min(680px,calc(100% - 24px))}#migrationModal p{font-size:13px;line-height:1.5}#migrationFiles{max-width:100%;font-size:12px}#migrationPreview{white-space:pre-wrap;font:12px system-ui;max-height:35vh;overflow:auto;background:#eaf1fa;padding:12px;border-radius:8px}
@media(max-width:480px){.account-screen{padding:20px;margin:5vh auto}.family-bar{align-items:flex-start}.family-bar>div{justify-content:flex-end}.family-bar button{font-size:10px;padding:4px 5px}}
@media(max-width:700px){body.compact header{padding-left:10px;padding-right:10px}}
#accountScreen{width:calc(100% - 28px);max-width:440px;min-width:0;box-sizing:border-box}
#accountScreen form,#accountScreen label{min-width:0;max-width:100%}
#accountScreen input{display:block;min-width:0;max-width:100%;box-sizing:border-box;font-size:16px}
.account-links{flex-wrap:wrap}
.family-bar{min-width:0;flex-wrap:wrap}.family-bar #familyLabel{max-width:100%}
.header-tools .logout-button{min-height:44px;padding:8px 14px;white-space:nowrap}
header .header-tools{display:flex!important;align-items:center;gap:7px;width:auto}
header .header-tools #switchFamily,header .header-tools #logout,header .header-tools #settings{height:34px;min-height:34px;box-sizing:border-box;margin:0;font-size:12px;padding:5px 10px}
header .header-tools #settings{width:34px;padding:5px}
header .brand{display:flex;align-items:center;gap:8px;flex-shrink:0}
header .brand h1:before{display:none}
.finance-logo{display:block;width:32px;height:32px;flex:0 0 32px}
#configModal button{height:40px;min-height:40px;font-size:13px;padding:8px 12px;line-height:20px;box-sizing:border-box}
#configModal .action-icon{width:40px;min-width:40px;padding:9px}
#configModal .actions,#configModal .config-data-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#configModal .actions>button,#configModal .config-data-actions>button{flex:1 1 160px}
#configModal .person-actions{display:flex;align-items:center;gap:8px}
.config-data-section{border-top:1px solid #d4dfed;margin-top:24px;padding-top:8px}
.summary-heading-actions{display:flex;align-items:center;gap:8px}
.summary-heading-actions .responsible-sort{min-height:28px;height:28px;padding:3px 8px;font-size:11px;line-height:20px;border-radius:7px;white-space:nowrap;background:#e7eef8;color:#294f83;border:1px solid #bdcde3}
@media(max-width:380px){header .header-top{gap:6px!important}header .brand{gap:5px}header .brand h1{font-size:18px!important}header .header-tools{gap:4px}header .header-tools #switchFamily,header .header-tools #logout{padding:5px 7px}.finance-logo{width:27px;height:27px;flex-basis:27px}}