@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--bg:#071411;--border:rgba(255,255,255,.10);--green:#67f5b0;--cyan:#72e6d3;--muted:#91a7a0;--text:#f1fff8;--red:#ff858c}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--text);font-family:'Cairo',Tahoma,sans-serif;background:radial-gradient(ellipse at 10% 0%,#174c3a 0,transparent 38%),radial-gradient(ellipse at 90% 55%,#103c3d 0,transparent 32%),var(--bg)}
button,input,select{font:inherit}button{cursor:pointer}.app{width:min(1250px,94%);margin:auto;padding:28px 0 42px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;animation:rise .6s ease both}.brand{display:flex;align-items:center;gap:12px}.logo{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:#062016;background:linear-gradient(135deg,var(--green),var(--cyan));font-size:25px;font-weight:800;box-shadow:0 0 28px #67f5b022}.brand h1{font-size:21px;margin:0}.brand p,.muted{color:var(--muted);font-size:12px;margin:0}.month{color:var(--green);background:#ffffff09;border:1px solid var(--border);border-radius:12px;padding:9px 14px;font-size:12px}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid var(--border);border-radius:23px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 16px 45px #00000015}
.hero{position:relative;overflow:hidden;padding:28px;margin-bottom:17px;animation:rise .65s .08s ease both}.hero:before{content:"";position:absolute;width:280px;height:280px;left:-90px;top:-160px;border-radius:50%;background:#67f5b01a;filter:blur(12px);pointer-events:none}.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.eyebrow{color:var(--muted);font-size:13px}.balance{font-size:clamp(30px,5vw,44px);font-weight:800;margin:8px 0 20px;direction:ltr;text-align:right}.balance span{font-size:16px;color:var(--green)}
.hero-stats{display:flex;gap:36px;flex-wrap:wrap}.stat-label{color:var(--muted);font-size:12px;margin-bottom:5px}.stat-value{font-size:18px;font-weight:700}.positive{color:var(--green)}.negative{color:var(--red)}
.primary{border:0;padding:11px 17px;border-radius:13px;color:#062016;font-weight:800;background:linear-gradient(120deg,var(--green),var(--cyan));transition:transform .2s,box-shadow .2s}.primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #67f5b029}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:17px}.stat-card{padding:20px;animation:rise .6s ease both;transition:transform .25s,border-color .25s}.stat-card:hover{transform:translateY(-4px);border-color:#67f5b04d}.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:17px}.icon{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:#67f5b012;font-size:19px}.stat-card .number{font-size:clamp(18px,2.6vw,26px);font-weight:800;direction:ltr;text-align:right;margin-bottom:5px}.small-note{font-size:11px;color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);gap:17px;align-items:start}.section{padding:22px;min-width:0}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.section-title h2{font-size:16px;margin:0}.section-title small{color:var(--muted);font-size:11px}
.budget-box{margin-bottom:25px}.budget-numbers{display:flex;justify-content:space-between;gap:8px;margin:11px 0 9px;font-size:12px}.track{height:8px;background:#ffffff10;border-radius:20px;overflow:hidden}.track>div{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .6s}.track>div.over{background:var(--red)}.budget-edit{display:flex;gap:8px;margin-top:12px}
input,select{width:100%;min-width:0;padding:10px 12px;color:var(--text);background:#071713b0;border:1px solid var(--border);border-radius:11px;outline:none}input:focus,select:focus{border-color:var(--green)}select option{background:#10251e;color:white}.secondary{border:1px solid var(--border);background:#ffffff08;color:var(--text);padding:8px 12px;border-radius:10px;white-space:nowrap}.secondary:hover{border-color:var(--green)}
.chart-wrap{display:flex;align-items:center;gap:22px;min-height:165px}.donut{width:145px;height:145px;flex:0 0 145px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0% 0%,#ffffff10 0% 100%);position:relative;transition:background .5s}.donut:before{content:"";position:absolute;inset:12px;border-radius:50%;background:#10231d;border:1px solid #ffffff08}.donut-center{position:relative;text-align:center}.donut-center strong{display:block;font-size:22px}.donut-center small{color:var(--muted);font-size:10px}.legend{flex:1;min-width:0}.legend-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin:12px 0}.legend-name{display:flex;align-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:12px;color:var(--muted)}.field.full{grid-column:1/-1}.submit{width:100%;margin-top:15px}.privacy{margin-top:15px;line-height:1.8}
.transactions{margin-top:17px}.filters{display:flex;gap:7px}.filters select{width:auto;max-width:140px;font-size:11px;padding:8px}.transaction{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #ffffff0d;animation:rise .35s ease both}.transaction:last-child{border-bottom:0}.tx-icon{width:41px;height:41px;flex-shrink:0;display:grid;place-items:center;background:#ffffff09;border:1px solid #ffffff0b;border-radius:13px;font-size:19px}.tx-info{flex:1;min-width:0}.tx-info strong{display:block;font-size:13px;overflow-wrap:anywhere}.tx-info small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.tx-end{text-align:left;white-space:nowrap}.tx-amount{font-size:13px;font-weight:800;direction:ltr}.delete{border:0;background:transparent;color:var(--muted);font-size:11px;margin-top:4px}.delete:hover{color:var(--red)}.empty{padding:25px 8px;text-align:center;color:var(--muted);font-size:13px}
footer{text-align:center;margin-top:24px;color:#79938a;font-size:11px}.toast{position:fixed;bottom:24px;right:50%;transform:translate(50%,20px);padding:12px 20px;background:#153c2b;border:1px solid #67f5b055;border-radius:13px;opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.show{opacity:1;transform:translate(50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px){.layout{grid-template-columns:1fr}.stats-grid{gap:10px}.stat-card{padding:15px}}
@media(max-width:520px){.app{width:92%;padding-top:20px}.brand h1{font-size:17px}.brand p{font-size:10px}.logo{width:42px;height:42px}.month{font-size:10px;padding:8px}.hero,.section{padding:17px}.hero-stats{gap:22px}.stat-value{font-size:15px}.stats-grid{grid-template-columns:1fr}.stat-card .number{font-size:23px}.chart-wrap{flex-direction:column}.legend{width:100%}.section-title{flex-wrap:wrap}.filters{width:100%}.filters select{flex:1;max-width:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}