:root{
  --teal-900:#0A332F; --teal-800:#0D4A44; --teal-700:#0F5C56; --teal-500:#1B8A80;
  --gold-600:#B8860F; --gold-500:#D4A017; --gold-300:#EAC66B;
  --ivory:#FAF6EE; --card:#FFFFFF;
  --coral:#DE4E29; --coral-soft:#FBE6DF;
  --mint:#1E8E62; --mint-soft:#E1F2E9;
  --violet:#7C6FC4; --violet-soft:#EAE7FA;
  --ink:#182524; --muted:#7C8F8C; --line:#EBE4D6;
  --r-lg:22px; --r-md:16px; --r-sm:13px;
  --shadow-sm:0 2px 8px rgba(10,51,47,.06);
  --shadow-md:0 10px 26px -8px rgba(10,51,47,.16);
  --shadow-gold:0 10px 22px -6px rgba(212,160,23,.45);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(212,160,23,.09), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(15,92,86,.10), transparent 42%),
    var(--ivory);
  font-family:'Cairo', sans-serif; color:var(--ink); min-height:100vh;
}
.hidden{display:none !important;}
button, input{font-family:inherit;}
input{outline:none;}

/* ---------- عام: حاوية الصفحة ---------- */
.app-shell{max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:var(--ivory); position:relative;}

/* ---------- شاشة الدخول / التسجيل ---------- */
#authScreen{max-width:420px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px 22px;}
.brand-mark{width:66px; height:66px; border-radius:21px; margin:0 auto 16px; background:linear-gradient(135deg, var(--gold-300), var(--gold-500)); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--teal-900); box-shadow:var(--shadow-gold);}
.login-title{text-align:center; font-family:'Tajawal',sans-serif; font-weight:900; font-size:22px; color:var(--teal-900); margin-bottom:5px;}
.login-sub{text-align:center; font-size:13px; color:var(--muted); margin-bottom:22px; line-height:1.9; padding:0 8px;}
.auth-tabs{display:flex; background:var(--line); border-radius:var(--r-sm); padding:4px; gap:4px; margin-bottom:18px;}
.auth-tabs button{flex:1; border:none; background:transparent; padding:10px 0; border-radius:10px; font-weight:700; font-size:13px; color:var(--muted); cursor:pointer;}
.auth-tabs button.on{background:var(--card); color:var(--teal-700); box-shadow:var(--shadow-sm);}
.auth-form{display:flex; flex-direction:column; gap:12px;}
.field-label{font-size:11.5px; color:var(--teal-800); font-weight:700; margin-bottom:-6px;}
.field{background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:9px; transition:.15s;}
.field:focus-within{border-color:var(--teal-500);}
.field i{color:var(--muted); font-size:13px;}
.field input{border:none; background:none; flex:1; font-size:13.5px; color:var(--ink);}
.field input::placeholder{color:#A9B6B3;}
.remember-row{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); font-weight:600;}
.remember-row input{width:16px; height:16px; accent-color:var(--teal-700);}
.primary-btn{background:linear-gradient(135deg,var(--teal-700),var(--teal-800)); color:#fff; border:none; border-radius:var(--r-sm); padding:15px 0; font-family:'Tajawal',sans-serif; font-weight:800; font-size:14.5px; box-shadow:var(--shadow-md); cursor:pointer;}
.primary-btn:disabled{opacity:.6; cursor:default;}
.form-msg{font-size:12.5px; font-weight:700; text-align:center; min-height:16px;}
.form-msg.error{color:var(--coral);}
.form-msg.success{color:var(--mint);}

/* ---------- الشريط العلوي داخل التطبيق ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 6px;}
.topbar .hi{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px;}
.topbar .name{font-family:'Tajawal',sans-serif; font-weight:700; font-size:17.5px; color:var(--teal-900);}
.avatar{width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg, var(--gold-300), var(--gold-500)); display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:700; color:var(--teal-900); font-size:14px; box-shadow:var(--shadow-gold); cursor:pointer; border:none;}

main{flex:1; overflow-y:auto; padding-bottom:88px;}
.view{padding:10px 18px 20px; display:none; flex-direction:column; gap:16px; animation:fadeUp .25s ease;}
.view.active{display:flex;}
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- بطاقة الرصيد ---------- */
.balance-card{background:linear-gradient(155deg, var(--teal-700) 0%, var(--teal-900) 100%); border-radius:var(--r-lg); padding:22px 22px 18px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-md);}
.balance-card .ring{position:absolute; width:180px; height:180px; border-radius:50%; border:1px solid rgba(234,198,107,.18); top:-70px; left:-50px;}
.balance-card .ring2{position:absolute; width:120px; height:120px; border-radius:50%; border:1px solid rgba(234,198,107,.14); top:-40px; left:-15px;}
.balance-card .label{font-size:12px; opacity:.75; margin-bottom:5px;}
.balance-card .amount{font-family:'Tajawal',sans-serif; font-weight:900; font-size:32px; font-variant-numeric:tabular-nums;}
.balance-card .amount span{font-size:15px; font-weight:500; opacity:.8;}
.period-row{display:flex; gap:8px; margin-top:16px; position:relative;}
.period-pill{font-size:11px; padding:6px 13px; border-radius:20px; background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.16); font-weight:600; cursor:pointer;}
.period-pill.on{background:var(--gold-500); color:var(--teal-900); font-weight:800; border-color:transparent;}

.stat-row{display:flex; gap:10px;}
.stat{flex:1; background:var(--card); border-radius:var(--r-md); padding:13px 15px; box-shadow:var(--shadow-sm);}
.stat .t{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:6px; font-weight:600;}
.stat .v{font-family:'Tajawal',sans-serif; font-weight:800; font-size:15.5px; font-variant-numeric:tabular-nums;}
.stat.in .t i, .stat.in .v{color:var(--mint);}
.stat.out .t i, .stat.out .v{color:var(--coral);}

.sec-title{display:flex; align-items:center; justify-content:space-between; font-family:'Tajawal',sans-serif; font-weight:800; font-size:14.5px; color:var(--teal-900);}
.sec-title a{font-size:11.5px; font-weight:700; color:var(--gold-600); cursor:pointer;}
.sec-sub{font-size:11.5px; color:var(--muted); font-weight:700; letter-spacing:.2px; text-transform:uppercase;}

.tx{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:var(--r-md); padding:11px 13px; box-shadow:var(--shadow-sm); transition:.15s;}
.tx .icon{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.tx .info{flex:1; min-width:0;} .tx .info .n{font-size:13px; font-weight:700;} .tx .info .c{font-size:11px; color:var(--muted); margin-top:1px;}
.tx .amt{font-family:'Tajawal',sans-serif; font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; flex-shrink:0;}
.tx .amt.out{color:var(--coral);} .tx .amt.in{color:var(--mint);}
.tx .del{background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:6px;}
.empty-state{text-align:center; padding:30px 10px; color:var(--muted); font-size:13px;}
.empty-state i{font-size:26px; color:var(--line); margin-bottom:8px; display:block;}

/* ---------- إضافة عملية ---------- */
.toggle2{display:flex; background:var(--line); border-radius:var(--r-sm); padding:4px; gap:4px;}
.toggle2 button{flex:1; border:none; background:transparent; padding:10px 0; border-radius:10px; font-weight:700; font-size:13px; color:var(--muted); cursor:pointer;}
.toggle2 button.on{background:var(--card); color:var(--coral); box-shadow:var(--shadow-sm);}
.toggle2 button.on.income{color:var(--mint);}
.amount-display{text-align:center; padding:10px 0 4px;}
.amount-display .cur{font-size:12.5px; color:var(--muted); font-weight:600;}
.amount-display input{border:none; background:none; text-align:center; width:100%; font-family:'Tajawal',sans-serif; font-weight:900; font-size:42px; color:var(--teal-900); font-variant-numeric:tabular-nums;}
.amount-display input::placeholder{color:#D8D2C4;}
.cat-scroller{display:flex; gap:11px; overflow-x:auto; padding:2px 0 6px;}
.cat-chip{flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; width:58px; cursor:pointer; background:none; border:none;}
.cat-chip .ic{width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:19px; border:2px solid transparent; transition:.15s;}
.cat-chip.sel .ic{border-color:var(--teal-700); box-shadow:var(--shadow-sm);}
.cat-chip span{font-size:10px; color:var(--muted); text-align:center; font-weight:600;}
.note-field{width:100%; background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; font-size:13px; color:var(--ink);}
.save-btn{background:linear-gradient(135deg,var(--teal-700),var(--teal-800)); color:#fff; border:none; border-radius:var(--r-sm); padding:16px 0; font-family:'Tajawal',sans-serif; font-weight:800; font-size:15px; box-shadow:var(--shadow-md); cursor:pointer;}
.save-btn:disabled{opacity:.6; cursor:default;}

/* ---------- تقارير ---------- */
.donut-wrap{display:flex; justify-content:center; padding:10px 0 6px;}
.legend{display:flex; flex-direction:column; gap:11px;}
.legend .row{display:flex; align-items:center; gap:10px;}
.legend .row .bar-bg{flex:1; height:8px; border-radius:6px; background:var(--line); overflow:hidden;}
.legend .row .bar-fg{height:100%; border-radius:6px;}
.legend .row .lbl{font-size:12px; font-weight:700; width:90px; display:flex; align-items:center; gap:7px;}
.legend .row .pct{font-size:12px; color:var(--muted); width:38px; text-align:left; font-weight:700; font-variant-numeric:tabular-nums;}
.dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}

/* ---------- الفئات ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.cat-card{background:var(--card); border-radius:var(--r-md); padding:14px 6px; display:flex; flex-direction:column; align-items:center; gap:7px; box-shadow:var(--shadow-sm); position:relative;}
.cat-card .ic{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:19px;}
.cat-card .nm{font-size:11.5px; font-weight:700; text-align:center;}
.cat-card .cnt{font-size:9.5px; color:var(--muted); font-weight:600;}
.cat-card .rm{position:absolute; top:6px; left:6px; background:none; border:none; color:var(--muted); font-size:11px; cursor:pointer;}
.cat-card.addnew{border:1.5px dashed var(--teal-500); background:transparent; justify-content:center; color:var(--teal-700); box-shadow:none; cursor:pointer;}
.cat-card.addnew i{font-size:18px;}

/* ---------- الإعدادات ---------- */
.profile-card{display:flex; align-items:center; gap:13px; background:linear-gradient(155deg, var(--teal-700), var(--teal-900)); border-radius:var(--r-lg); padding:16px 18px; color:#fff; box-shadow:var(--shadow-md);}
.profile-card .av{width:48px; height:48px; border-radius:15px; background:linear-gradient(135deg, var(--gold-300), var(--gold-500)); display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:700; color:var(--teal-900); font-size:16px; flex-shrink:0;}
.profile-card .nm{font-family:'Tajawal',sans-serif; font-weight:700; font-size:14.5px;}
.profile-card .em{font-size:11px; opacity:.75; margin-top:1px;}
.settings-group{background:var(--card); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm);}
.settings-row{display:flex; align-items:center; gap:12px; padding:14px 15px; border-bottom:1px solid var(--line);}
.settings-row:last-child{border-bottom:none;}
.settings-row .ic{width:34px; height:34px; border-radius:11px; background:var(--ivory); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; color:var(--teal-700);}
.settings-row .lbl{flex:1; font-size:13px; font-weight:700;}
.settings-row .val{font-size:11.5px; color:var(--muted); font-weight:600;}
.logout-btn{text-align:center; padding:14px 0; font-size:13px; font-weight:800; color:var(--coral); background:var(--card); border-radius:var(--r-md); box-shadow:var(--shadow-sm); cursor:pointer; border:none; width:100%;}

/* ---------- شريط التنقل السفلي ---------- */
.navbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; height:70px; display:flex; align-items:center; justify-content:space-around; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(10,51,47,.06);}
.nav-item{display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; color:var(--muted); font-size:9.5px; font-weight:600; cursor:pointer;}
.nav-item i{font-size:17px;}
.nav-item.on{color:var(--teal-700); font-weight:800;}
.nav-add{width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, var(--gold-300), var(--gold-500)); display:flex; align-items:center; justify-content:center; margin-top:-30px; box-shadow:var(--shadow-gold); border:4px solid var(--ivory); color:var(--teal-900); font-size:19px; cursor:pointer;}

/* ---------- تنبيه Toast ---------- */
#toast{position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--teal-900); color:#fff; padding:11px 20px; border-radius:30px; font-size:12.5px; font-weight:700; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:.25s; z-index:50; white-space:nowrap;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#toast.error{background:var(--coral);}

@media (min-width:520px){
  body{ display:flex; justify-content:center; }
  .app-shell{ box-shadow:var(--shadow-md); }
}