:root{--blue:#1769e0;--blue2:#eaf2ff;--ink:#152033;--muted:#687386;--line:#e5eaf1;--bg:#f5f7fb;--green:#16865c;--red:#dc3f4d;--white:#fff;--shadow:0 10px 30px rgba(28,39,60,.07)}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
body{margin:0;font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:268px;padding:24px 16px;background:#10233f;color:#d7e2f2;display:flex;flex-direction:column;z-index:40}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 24px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}
.brand strong,.brand small{display:block}
.brand strong{color:#fff}
.brand small{font-size:12px;color:#91a4be;margin-top:2px}
.sidebar nav{overflow-y:auto;flex:1}
.nav-link{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;margin:2px 0;color:#b9c8dc}
.nav-link svg{width:18px}
.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.1);color:#fff}
.nav-link.active{box-shadow:inset 3px 0 #5a9aff}
.logout{border-top:1px solid rgba(255,255,255,.1);border-radius:0;padding-top:16px}
.content-shell{margin-left:268px}
.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;position:sticky;top:0;z-index:30}
.topbar>div{display:flex;flex-direction:column}
.topbar small{color:var(--muted);font-size:12px}
.top-logout{margin-left:auto;color:var(--muted)}
.menu-button{display:none;background:none;border:0}
.page{padding:30px;max-width:1500px;margin:auto}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-heading h1{font-size:27px;margin:0 0 5px}
.page-heading p{margin:0;color:var(--muted)}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);margin-bottom:20px}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric{position:relative;overflow:hidden}
.metric small{display:block;color:var(--muted);margin-bottom:12px}
.metric strong{display: block;font-size:26px}
.metric .help {display: block; margin-top: 8px;}
.metric svg{position:absolute;right:18px;top:18px;color:#aeb9c8}
.negative{color:var(--red)!important}
.positive{color:var(--green)!important}
.neutral{color:#566171!important}
.section-title{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.section-title>span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blue2);color:var(--blue)}
.section-title h2{font-size:18px;margin:0}
.section-title p{margin:3px 0 0;color:var(--muted);font-size:13px}
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0}
.details>div{padding:14px;background:#f8fafc;border-radius:10px}
.details dt{font-size:12px;color:var(--muted);margin-bottom:5px}
.details dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.copy-link{background:none;border:0;color:var(--blue);font-size:12px;padding:0 5px}
.mono{font-family:ui-monospace,SFMono-Regular,monospace}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;white-space:nowrap;background:#fff}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:#f8fafc;color:#536174;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border:0}
.page-transactions table tr{white-space:nowrap}
.page-transactions table .actions{flex-wrap:nowrap}
.page-transactions .card{min-width:0;overflow:hidden}
.page-transactions .table-wrap{width:100%;max-width:100%;overflow-x:auto}
.status{display:inline-flex;padding:5px 9px;border-radius:99px;background:#f1f3f6;font-size:12px;font-weight:700}
.status.negative{background:#fff0f1}
.status.positive{background:#eaf9f2}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;background:var(--blue);color:#fff;padding:10px 15px;font-weight:650}
.btn.secondary{background:#edf2f8;color:#34445c}
.btn.danger{background:#fff0f1;color:var(--red)}
.btn.small{padding:7px 10px;font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:13px;font-weight:650}
.input{width:100%;padding:11px 12px;border:1px solid #ccd5e0;border-radius:9px;background:#fff;color:var(--ink)}
textarea.input{min-height:90px;resize:vertical}
.input:focus{outline:3px solid rgba(23,105,224,.12);border-color:var(--blue)}
.movement-type-field{margin:0;padding:0;border:0;min-width:0}
.movement-type-field legend{margin-bottom:9px;padding:0;font-size:13px;font-weight:650}
.movement-type-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.movement-type-option{position:relative;cursor:pointer}
.movement-type-option>input{position:absolute;opacity:0;pointer-events:none}
.movement-type-content{min-height:78px;padding:15px 16px;display:flex;align-items:center;gap:13px;border:1px solid #ccd5e0;border-radius:13px;background:#fff;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.movement-type-content>svg{width:23px;height:23px;flex:0 0 auto;color:var(--muted)}
.movement-type-content>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}
.movement-type-content strong{font-size:15px}
.movement-type-content small{color:var(--muted);font-size:12px;font-weight:450;line-height:1.35}
.movement-type-check{width:18px;height:18px;margin-left:auto;flex:0 0 auto;border:2px solid #b8c3d1;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #fff}
.movement-type-option:hover .movement-type-content{border-color:#9dbceb;background:#f8fbff;transform:translateY(-1px)}
.movement-type-option>input:focus-visible+.movement-type-content{outline:3px solid rgba(23,105,224,.16);outline-offset:2px}
.movement-type-option>input:checked+.movement-type-content{border-color:var(--blue);background:var(--blue2);box-shadow:0 0 0 1px var(--blue),0 8px 20px rgba(23,105,224,.1)}
.movement-type-option>input:checked+.movement-type-content>svg{color:var(--blue)}
.movement-type-option>input:checked+.movement-type-content .movement-type-check{border-color:var(--blue);background:var(--blue)}
.help{font-size:12px;color:var(--muted)}
.filters{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.filters .form-field{min-width:170px}
.alert{padding:13px 15px;border-radius:10px;margin-bottom:16px;background:#eaf2ff;color:#174b91}
.alert.error{background:#fff0f1;color:#a52632}
.alert.success{background:#eaf9f2;color:#126645}
.empty{text-align:center;padding:45px 20px;color:var(--muted)}
.guest-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 20%,#e4efff,transparent 35%),var(--bg)}
.login-card{width:min(430px,100%);padding:35px;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(30,52,82,.12);border:1px solid var(--line)}
.login-brand{text-align:center;margin-bottom:28px}
.login-brand h1{font-size:23px;margin:0}
.login-card .form-field{margin-bottom:15px}
.check{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}
.login-actions{display:flex;justify-content:space-between;align-items:center;margin:18px 0}
.login-card .btn{width:100%}
.forgot{display:block;text-align:center;margin-top:18px;color:var(--blue);background:none;border:0;width:100%}
.modal{border:0;border-radius:16px;padding:25px;max-width:420px;box-shadow:0 20px 80px rgba(0,0,0,.25)}
.modal::backdrop{background:rgba(12,24,42,.55)}
.toast{position:fixed;right:24px;bottom:24px;background:#152033;color:#fff;border-radius:9px;padding:10px 14px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:none}
.quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quick-links a{padding:16px;border:1px solid var(--line);border-radius:12px;color:#34445c;display:flex;gap:10px;align-items:center}
.quick-links a:hover{border-color:#9dbceb;background:#f6f9ff}
.pagination{display:flex;gap:5px;margin-top:16px}
.payment-note{padding:17px;border:1px dashed #9fb4cf;border-radius:10px;background:#f8fbff;font-weight:700}
.balance-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.balance-item{display:grid;grid-template-columns:minmax(60px,auto) 1fr auto;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.balance-item-debt{background:#fff9fa;border-color:#f3dfe2}
.balance-item-credit{background:#f8fcfa;border-color:#d9eee5}
.balance-item-settled{background:#fafbfd;border-color:#e6eaf0}
.balance-item>span:nth-child(2){text-align:right}
.checkbox-list{max-height:330px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px}
.checkbox-list label{display:flex;gap:10px;padding:9px;border-bottom:1px solid var(--line)}
.checkbox-list label:last-child{border:0}
.danger-zone{border-color:#f2c9ce}
.muted{color:var(--muted)}
@media(max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .details{grid-template-columns:1fr}
  .quick-links{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.25)}
  .content-shell{margin-left:0}
  .menu-button{display:block;margin-right:12px}
  .topbar{padding:0 16px}
  .page{padding:20px 14px}
  .page-heading{align-items:flex-start;flex-direction:column}
  .grid-2,.grid-4,.form-grid{grid-template-columns:1fr}
  .movement-type-options{grid-template-columns:1fr}
  .form-field.full{grid-column:auto}
  .quick-links{grid-template-columns:1fr}
  .top-logout{display:none}
  .card{padding:17px}
  .login-card{padding:25px}
  .metric strong{font-size:22px}
}