@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#080d19;--panel:#101827;--card:#141e30;--border:#283247;--text:#eaf0ff;--muted:#94a3b8;--accent:#69dfc2;--accent2:#53b3e4;--red:#fa8d94;--warning:#f5c67e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,Arial,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer;transition:background .17s ease,color .17s ease,transform .17s ease,border-color .17s ease}button:active{transform:scale(.98)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent);text-decoration:none}.shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:#0d1422;border-right:1px solid var(--border);padding:28px 17px;display:flex;flex-direction:column}.identity{display:flex;align-items:center;gap:12px;margin-bottom:54px;padding-left:6px}.logo{width:43px;height:43px;background:linear-gradient(140deg,#87f3ce,#4f9db5);color:#092020;font-size:17px;font-weight:900;display:grid;place-items:center;border-radius:13px;letter-spacing:-1px}.identity strong,.identity span{display:block}.identity strong{font:800 16px Manrope,sans-serif}.identity span{letter-spacing:2px;font-size:9px;color:var(--muted);margin-top:5px}.navlabel,.eyebrow{letter-spacing:2px;font-size:10px;font-weight:700;color:var(--muted)}.navlabel{padding:0 15px;margin-bottom:16px}nav{display:grid;gap:6px}nav button{width:100%;border:1px solid transparent;background:transparent;color:#a9b7cc;text-align:left;border-radius:11px;display:flex;gap:14px;align-items:center;padding:13px 15px;font-size:15px}nav button span{font-size:13px}nav button.on,nav button:hover{color:var(--accent);background:#172a32;border-color:#29544d}.asidefoot{margin-top:auto;padding:18px 12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px}.statusdot{color:var(--accent)}.statusdot span{color:var(--muted)}.main{width:100%;min-width:0;padding:36px clamp(18px,3.2vw,55px)}.top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:34px;flex-wrap:wrap}.eyebrow span{color:var(--accent)}h1,h2,h3{font-family:Manrope,system-ui,sans-serif;letter-spacing:-.7px}h1{font-size:clamp(26px,3vw,36px);margin:10px 0 7px;line-height:1.2}h2{font-size:20px;margin:0}h3{font-size:15px;margin:0}.sub,.muted{color:var(--muted)}.sub{margin:0}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.cyclepicker{display:flex;gap:9px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:7px 11px;color:var(--muted)}input,select{border:1px solid var(--border);background:#0e1727;color:var(--text);padding:11px 12px;border-radius:9px;min-width:0;max-width:100%;color-scheme:dark}input[type=month]{border:0;padding:4px;background:transparent;width:142px}.primary,.outline,.smallbtn{padding:11px 16px;border-radius:10px;font-weight:700;border:1px solid var(--border);white-space:nowrap}.primary{color:#09271e;background:var(--accent);border-color:var(--accent)}.primary:hover{background:#94f5d9}.outline,.smallbtn{background:#172237;color:var(--text)}.outline:hover,.smallbtn:hover{background:#22314a}.smallbtn{padding:7px 10px;font-size:12px}.danger{color:var(--red)}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.stat,.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px}.stat{padding:22px 21px;min-height:150px;position:relative;overflow:hidden}.stat:after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;border:1px solid #26384b;border-radius:50%}.stat .kicker{font-size:12px;color:var(--muted)}.stat .value{font:800 clamp(23px,2.2vw,31px) Manrope,sans-serif;letter-spacing:-1px;margin:17px 0 12px}.stat .hint{color:var(--muted);font-size:12px}.stat .value.green{color:var(--accent)}.stat .value.red{color:var(--red)}.stat .value.blue{color:#8ccaf4}.panels{display:grid;grid-template-columns:1.05fr .95fr;gap:17px;margin-top:18px}.panel{padding:22px;min-width:0;margin-bottom:17px}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}.panelhead p{margin:7px 0 0;font-size:12px;color:var(--muted)}.progress{height:8px;background:#233049;border-radius:50px;overflow:hidden;margin-top:11px}.fill{height:100%;background:linear-gradient(90deg,#60d7c0,#63b4dc);border-radius:50px;transition:width .45s ease}.fill.over{background:var(--red)}.budgetrow{margin:0 0 20px}.linebetween{display:flex;align-items:center;justify-content:space-between;gap:16px}.linebetween strong{font-size:13px}.linebetween span{color:var(--muted);font-size:12px}.tablewrap{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;min-width:560px}td,th{text-align:left;padding:13px 11px;border-bottom:1px solid var(--border)}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}td{font-size:13px}tbody tr:hover{background:#182438}.badge{display:inline-block;padding:5px 9px;border-radius:6px;font-size:11px;font-weight:700;background:#243447;color:#8acff2}.badge.income{background:#1f423a;color:var(--accent)}.badge.expense{background:#452b36;color:#ffa7ac}.empty{color:var(--muted);text-align:center;padding:35px 10px}.bottom{text-align:center;color:#64748b;font-size:11px;padding:30px 0}.modalback{position:fixed;inset:0;background:#030a14c9;z-index:10;display:grid;place-items:center;padding:15px;backdrop-filter:blur(6px)}.modalback[hidden]{display:none}.modalbox{background:#121d2e;border:1px solid #33425a;width:min(500px,100%);max-height:92vh;overflow:auto;padding:25px;border-radius:18px;box-shadow:0 22px 90px #0009;animation:rise .2s ease}.modalhead,.modalactions{display:flex;justify-content:space-between;align-items:center;gap:15px}.modalhead{margin-bottom:24px}.modalhead h2{margin-top:8px}.iconbutton{background:transparent;color:#b5c2d5;border:1px solid var(--border);border-radius:8px;padding:8px 12px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.formgrid label,.authbox label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#b4c1d0}.formgrid .wide{grid-column:span 2}.formgrid input,.formgrid select{width:100%}.modalactions{margin-top:24px;justify-content:flex-end}.toast{position:fixed;bottom:20px;right:20px;background:#1d3b36;border:1px solid #317a64;color:#d0fff0;border-radius:12px;padding:13px 18px;z-index:20;max-width:min(400px,calc(100vw - 40px));display:none}.toast.show{display:block;animation:rise .18s ease}.toast.bad{background:#4e242f;border-color:#a64c5c}.authpage{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(ellipse at 15% 5%,#193a46,transparent 48%),#080d19}.authbox{width:min(440px,100%);padding:36px;background:#121d2e;border:1px solid #2d4050;border-radius:20px;display:grid;gap:18px}.brandbig{font:900 31px Manrope}.brandbig span{color:var(--accent)}.authbox h1{font-size:24px;margin:0}.authbox label{gap:8px}.authbox input{width:100%}.full{width:100%}.error{color:var(--red)}.info{padding:13px 16px;background:#172a38;border:1px solid #2f4b5c;color:#b2c9da;border-radius:10px;margin-bottom:16px;font-size:12px}.actionrow{display:flex;gap:8px;flex-wrap:wrap}.end{text-align:right}.moneyred{color:var(--red)}.moneygreen{color:var(--accent)}.pill{font-size:11px;border:1px solid var(--border);border-radius:20px;padding:6px 10px;color:var(--muted)}@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1180px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.panels{grid-template-columns:1fr}}@media(max-width:760px){.shell{display:block}.sidebar{position:static;width:100%;height:auto;padding:14px 16px;display:block}.identity{margin:0 0 13px}.navlabel,.asidefoot{display:none}nav{display:flex;gap:5px;overflow-x:auto;padding-bottom:3px}nav button{width:auto;flex:0 0 auto;padding:10px 12px}nav button span{font-size:12px}.main{padding:20px 15px}.top{gap:15px;margin-bottom:22px}.toolbar{width:100%}.cyclepicker{flex:1}.stat{min-height:130px;padding:16px}.stat .value{font-size:24px}.panel{padding:17px}.grid4{gap:10px}}@media(max-width:400px){.grid4{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.formgrid .wide{grid-column:span 1}.toolbar .primary,.toolbar .outline{flex:1}.modalbox{padding:17px}}

/* Budget Control v3 · Qasim Soft */
.budgetgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.categorybudget{background:linear-gradient(145deg,#141f31,#0d1625);border:1px solid #2c3c52;border-radius:16px;padding:20px;min-width:0;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.categorybudget:hover{transform:translateY(-2px);border-color:#416b72;box-shadow:0 12px 30px #0003}
.categorybudget.overlimit{border-color:#854754}
.categorybudget .budgettitle{margin-bottom:18px;flex-wrap:wrap}
.categorybudget .budgettitle strong{font-size:15px}
.budgetnumbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.budgetnumbers div{min-width:0}
.budgetnumbers small{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}
.budgetnumbers strong{display:block;font-size:clamp(14px,1.4vw,18px);overflow-wrap:anywhere}
.percentline{margin-top:10px;gap:12px}
.percentline span{font-size:12px;color:var(--muted)}
.percentline span:first-child{color:var(--accent);font-weight:700}
.budgetactions{margin-top:18px}
.budgetactions .primary,.budgetactions .smallbtn{font-size:12px;padding:9px 12px}
.historybox{background:#0c1626;border:1px solid #34495e;border-radius:13px;padding:18px;margin-top:20px;animation:rise .2s ease}
.largeprogress{height:11px;margin-top:21px}
.hintline{color:var(--muted);font-size:12px;margin-top:15px;line-height:1.6}
@media(max-width:1200px){.budgetgrid{grid-template-columns:1fr}}
@media(max-width:500px){.categorybudget{padding:15px}.budgetnumbers{gap:7px}.budgetnumbers strong{font-size:14px}.budgetactions .primary,.budgetactions .smallbtn{flex:1 1 auto}.percentline{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.categorybudget,.fill{transition:none}.historybox{animation:none}}