:root{--navy:#062a44;--navy2:#0b3b5f;--green:#10a37f;--mint:#e6f8f3;--bg:#f4f7f9;--ink:#12212c;--muted:#6b7b86;--line:#dfe7eb;--white:#fff;--red:#df5a5a}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:linear-gradient(135deg,var(--navy) 0 50%,#f5f8f9 50%)}.brand{color:white;display:flex;flex-direction:column;justify-content:center;padding:8vw}.logo{width:64px;height:64px;background:var(--green);border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:24px;box-shadow:0 12px 35px #001b2b66}.brand>p:first-of-type{letter-spacing:.28em;font-size:12px;font-weight:800}.brand h1{font-size:clamp(42px,5vw,72px);line-height:1.02;margin:30px 0 22px}.brand h1 span{color:#5ce0bb}.brand .sub{max-width:450px;color:#c4d3dc;font-size:18px;line-height:1.65}.auth-card{align-self:center;justify-self:center;width:min(430px,85%);background:white;padding:36px;border-radius:24px;box-shadow:0 24px 80px #092c3c1f}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:28px}.tab{border:0;background:transparent;padding:15px;color:var(--muted);cursor:pointer}.tab.active{color:var(--navy);font-weight:750;border-bottom:3px solid var(--green)}label{display:grid;gap:8px;font-size:13px;font-weight:700;margin:15px 0}input,select{width:100%;border:1px solid #ced9de;border-radius:10px;padding:13px 14px;background:white;outline:none}input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px #10a37f1c}.primary{border:0;background:var(--green);color:white;font-weight:800;padding:14px 20px;border-radius:10px;cursor:pointer;box-shadow:0 8px 22px #10a37f38}.auth-card .primary{width:100%;margin-top:10px}.message{color:var(--red);min-height:18px;font-size:13px}.privacy{text-align:center;color:var(--muted);font-size:12px;margin-top:26px}#app{min-height:100vh;display:grid!important;grid-template-columns:235px 1fr}#app[hidden]{display:none!important}aside{background:var(--navy);color:white;padding:25px 16px;display:flex;flex-direction:column;min-height:100vh}.side-brand{display:flex;align-items:center;gap:12px;padding:0 10px 28px}.logo.small{width:40px;height:40px;border-radius:11px;font-size:15px}.side-brand strong{font-size:18px}.side-brand em{color:#61d6b5;font-style:normal}nav{display:grid;gap:7px}nav button,.logout{border:0;background:transparent;color:#aebfca;text-align:left;padding:13px 16px;border-radius:9px;cursor:pointer;font-weight:650}nav button.selected{background:#ffffff14;color:white}.logout{margin-top:auto}.workspace{min-width:0}header{height:86px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px}.eyebrow{color:var(--green);letter-spacing:.18em;font-size:10px;font-weight:900;margin:0 0 4px}header h2{margin:0;font-size:18px}.dashboard{padding:38px;max-width:1280px;margin:auto}.headline{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}.headline h1{margin:0;font-size:32px}.headline p,.panel-head p{color:var(--muted);margin:6px 0 0}.period{background:white;border:1px solid var(--line);padding:10px 15px;border-radius:9px;font-size:13px}.metrics{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}.metric{background:white;border:1px solid var(--line);border-radius:15px;padding:22px;min-height:145px;position:relative}.metric.balance{background:linear-gradient(120deg,var(--navy),var(--navy2));color:white;border:0}.metric p{color:var(--muted);margin:0 0 10px;font-size:13px}.metric.balance p,.metric.balance small{color:#c2d2dc}.metric strong{font-size:27px}.metric small{display:block;margin-top:17px;font-size:12px}.metric i{float:right;border-radius:9px;padding:8px;font-style:normal}.metric i.income{background:var(--mint);color:var(--green)}.metric i.expense{background:#fff0f0;color:var(--red)}.panel{margin-top:22px;background:white;border:1px solid var(--line);border-radius:15px;min-height:330px}.panel-head{padding:22px 25px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.panel-head h3{margin:0}.panel-head button{border:0;background:transparent;color:var(--green);font-weight:800;cursor:pointer}.empty{text-align:center;padding:55px;color:var(--muted)}.empty b{display:inline-grid;place-items:center;width:45px;height:45px;border-radius:50%;background:var(--mint);color:var(--green)}.empty h3{color:var(--ink);margin-bottom:6px}.transaction{display:grid;grid-template-columns:1fr auto;align-items:center;padding:16px 25px;border-bottom:1px solid var(--line)}.transaction .meta{color:var(--muted);font-size:12px;margin-top:3px}.transaction strong.income{color:var(--green)}.transaction strong.expense{color:var(--red)}dialog{border:0;border-radius:18px;padding:0;width:min(500px,92%);box-shadow:0 30px 90px #001b2b66}dialog::backdrop{background:#001b2b99;backdrop-filter:blur(3px)}dialog form{padding:28px}.modal-head{display:flex;justify-content:space-between}.modal-head h2{margin:0}.modal-head button{border:0;background:transparent;font-size:28px;cursor:pointer}.type-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}.type-picker label{display:block;border:1px solid var(--line);padding:12px;border-radius:9px}.type-picker input{width:auto}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}dialog .primary{width:100%}@media(max-width:800px){.auth-shell{grid-template-columns:1fr;background:var(--navy)}.brand{padding:45px 28px 20px}.brand h1{font-size:40px;margin:12px 0}.brand .sub{display:none}.auth-card{margin:20px auto 50px}#app{grid-template-columns:1fr}aside{min-height:auto;position:fixed;z-index:5;bottom:0;left:0;right:0;padding:8px;background:var(--navy)}.side-brand,.logout{display:none}nav{display:grid;grid-template-columns:repeat(5,1fr)}nav button{text-align:center;padding:9px 2px;font-size:17px}nav button span{display:block;font-size:9px}.workspace{padding-bottom:72px}header{padding:0 18px}.dashboard{padding:24px 16px}.metrics{grid-template-columns:1fr 1fr}.metric.balance{grid-column:1/-1}.headline p{display:none}header .primary{padding:11px;font-size:0}header .primary:first-letter{font-size:20px}.grid{grid-template-columns:1fr}}
