:root { --bg:#f4f7fb; --panel:#fff; --ink:#172033; --muted:#68738a; --line:#dde4ef; --blue:#3157d5; --blue2:#e9eeff; --red:#c43b4d; --green:#16855b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif; }
button,input,select { font:inherit; }
.topbar { height:68px; padding:0 max(24px,calc((100% - 1180px)/2)); display:flex; justify-content:space-between; align-items:center; background:#111a2c; color:#fff; }
.topbar div { display:flex; gap:16px; align-items:baseline; }.topbar span{color:#aeb9ce;font-size:13px}
.container { max-width:1180px; margin:auto; padding:34px 24px 70px; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }.hero h1{font-size:34px;margin:3px 0}.hero p{margin:0;color:var(--muted)}
.eyebrow{font-size:12px!important;color:var(--blue)!important;font-weight:800;letter-spacing:.14em}
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 8px 30px rgba(25,40,70,.05); }
.panel h2 { margin:0 0 18px; font-size:19px; }.transaction-form { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:16px; align-items:end; }
label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:650; }.wide{grid-column:span 2}input,select{width:100%;padding:10px 11px;border:1px solid #cfd7e4;border-radius:9px;background:#fff;color:var(--ink)}
.checkbox{display:flex;align-items:center;gap:8px;height:41px}.checkbox input{width:auto}.actions{display:flex;gap:8px}
button{border:0;border-radius:9px;padding:10px 14px;font-weight:750;cursor:pointer}.primary{background:var(--blue);color:#fff}.secondary{background:var(--blue2);color:var(--blue)}.ghost{background:transparent;color:inherit;border:1px solid var(--line)}.topbar .ghost{border-color:#526078}.danger{background:#fff0f2;color:var(--red)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.section-title{display:flex;justify-content:space-between}.pill{background:var(--blue2);color:var(--blue);border-radius:99px;padding:3px 9px;height:max-content;font-weight:800}.cards{display:grid;gap:10px}
.transaction-card{border:1px solid var(--line);border-radius:12px;padding:14px}.transaction-card.inactive{opacity:.5}.card-main{display:flex;justify-content:space-between;gap:12px}.amount{font-weight:800}.meta{color:var(--muted);font-size:12px;margin-top:5px}.card-actions{display:flex;gap:8px;margin-top:11px}.card-actions button{padding:6px 9px;font-size:12px}
.message{margin:0 0 18px;padding:12px 14px;border-radius:9px}.success{background:#e8f7f1;color:var(--green)}.error{background:#fff0f2;color:var(--red)}.hidden{display:none!important}
.login-page{min-height:100vh;display:grid;place-items:center;background:#111a2c}.login-card{width:min(410px,calc(100% - 32px));background:#fff;border-radius:18px;padding:32px;box-shadow:0 24px 80px #050914}.brand-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:22px;font-weight:900}.login-card h1{margin:18px 0 3px}.muted{color:var(--muted);margin:0 0 22px}.login-form{display:grid;gap:16px}.login-form button{margin-top:5px}
@media(max-width:850px){.transaction-form{grid-template-columns:1fr 1fr}.wide{grid-column:span 2}.grid{grid-template-columns:1fr}.hero{align-items:start;flex-direction:column}}
@media(max-width:520px){.transaction-form{grid-template-columns:1fr}.wide{grid-column:auto}.topbar span{display:none}.container{padding:22px 12px}.panel{padding:16px}}