:root{
  --bg:#eef1f7; --card:#ffffff; --ink:#0f172a; --muted:#6b7280; --line:#eef2f7;
  --primary:#4f46e5; --primary2:#7c3aed; --primary-soft:#eef2ff;
  --green:#059669; --green-soft:#ecfdf5; --red:#e11d48; --red-soft:#fff1f3;
  --amber:#d97706; --amber-soft:#fffbeb; --sky:#0284c7; --sky-soft:#f0f9ff;
  --r:20px; --shadow:0 6px 22px -10px rgba(15,23,42,.20); --shadow-sm:0 2px 8px -4px rgba(15,23,42,.15);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Tahoma,sans-serif; direction:rtl;
  background:var(--bg); color:var(--ink); padding-bottom:92px; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
.hidden{display:none !important;}

/* ---------- Login ---------- */
#login{position:fixed;inset:0;z-index:50;background:radial-gradient(120% 120% at 50% 0%,#6366f1 0%,#4338ca 45%,#312e81 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;}
#login img{width:104px;height:104px;object-fit:contain;border-radius:28px;background:#fff;padding:12px;box-shadow:0 20px 45px -12px rgba(0,0,0,.45);}
#login h1{color:#fff;font-size:1.5rem;font-weight:900;margin:20px 0 4px;letter-spacing:-.5px;}
#login p{color:rgba(255,255,255,.75);font-size:.9rem;margin:0 0 26px;}
.login-box{width:100%;max-width:360px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:22px;backdrop-filter:blur(10px);}
.login-box input{width:100%;height:52px;border-radius:16px;border:none;padding:0 18px;font-size:1rem;margin-bottom:12px;font-family:inherit;text-align:right;background:#fff;color:#0f172a;}
.login-box input:focus{outline:2px solid #a5b4fc;}
.login-box button{width:100%;height:52px;border-radius:16px;border:none;background:#fff;color:#312e81;font-weight:900;font-size:1.05rem;cursor:pointer;font-family:inherit;box-shadow:0 8px 20px -8px rgba(0,0,0,.4);}
.login-box button:active{transform:scale(.98);}
.login-err{color:#fecdd3;font-size:.85rem;margin-top:12px;min-height:1em;font-weight:700;}
.badge-dev{position:fixed;top:12px;left:12px;background:#fbbf24;color:#78350f;font-size:.68rem;font-weight:900;padding:5px 11px;border-radius:20px;z-index:60;box-shadow:var(--shadow-sm);}
.login-box button:disabled{opacity:.85;cursor:default;}
.btn-spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(49,46,129,.25);border-top-color:#312e81;border-radius:50%;animation:sco-spin .8s linear infinite;vertical-align:-3px;margin-left:7px;}
@keyframes sco-spin{to{transform:rotate(360deg)}}
/* In-app notification toast */
.toast{position:fixed;bottom:104px;right:16px;left:16px;z-index:60;background:#0f172a;color:#fff;padding:14px 16px;border-radius:16px;font-weight:800;font-size:.9rem;box-shadow:0 14px 34px -10px rgba(0,0,0,.55);text-align:center;opacity:0;transform:translateY(20px);transition:.3s;pointer-events:none;}
.toast.show{opacity:1;transform:none;}

/* ---------- Top bar ---------- */
.topbar{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);color:#fff;
  padding:16px 18px calc(16px + 6px);display:flex;align-items:center;justify-content:space-between;
  border-radius:0 0 26px 26px;box-shadow:0 10px 26px -14px rgba(79,70,229,.7);}
.topbar .t-title{font-weight:900;font-size:1.15rem;display:flex;align-items:center;gap:9px;letter-spacing:-.3px;}
.topbar .t-sub{font-size:.7rem;opacity:.85;font-weight:600;margin-top:2px;}
.topbar button{background:rgba(255,255,255,.18);border:none;color:#fff;width:42px;height:42px;border-radius:14px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.topbar button:active{transform:scale(.92);background:rgba(255,255,255,.3);}
.sync-note{font-size:.68rem;text-align:center;padding:6px;color:var(--muted);font-weight:700;}

/* ---------- Content ---------- */
.view{padding:16px;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2.sec{font-size:1.02rem;font-weight:900;margin:8px 2px 14px;color:#0f172a;display:flex;align-items:center;gap:9px;letter-spacing:-.3px;}

/* Hero balance card */
.hero{background:linear-gradient(135deg,#312e81 0%,#4f46e5 60%,#7c3aed 100%);color:#fff;border-radius:26px;padding:22px;
  box-shadow:0 18px 40px -18px rgba(79,70,229,.75);position:relative;overflow:hidden;margin-bottom:16px;}
.hero::after{content:"";position:absolute;top:-40px;left:-30px;width:160px;height:160px;background:rgba(255,255,255,.08);border-radius:50%;}
.hero .h-lbl{font-size:.82rem;opacity:.85;font-weight:700;display:flex;align-items:center;gap:7px;}
.hero .h-val{font-size:2rem;font-weight:900;margin-top:6px;letter-spacing:-1px;}
.hero .h-val small{font-size:1rem;opacity:.8;font-weight:800;}
.hero .h-foot{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);}
.hero .h-foot div{font-size:.78rem;opacity:.9;}
.hero .h-foot b{display:block;font-size:1.05rem;font-weight:900;margin-top:2px;}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kpi{background:var(--card);border-radius:var(--r);padding:15px;box-shadow:var(--shadow);position:relative;overflow:hidden;border:1px solid var(--line);}
.kpi .k-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-bottom:10px;}
.kpi .k-label{font-size:.76rem;color:var(--muted);font-weight:800;margin-bottom:3px;}
.kpi .k-val{font-size:1.18rem;font-weight:900;letter-spacing:-.5px;}
.kpi .k-unit{font-size:.72rem;font-weight:700;opacity:.65;}
.kpi.wide{grid-column:1/-1;}

/* Stat cards (home page) */
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;}
.scard-head{display:flex;align-items:center;gap:11px;padding:15px 16px;font-weight:900;font-size:1.02rem;color:#0f172a;border-bottom:1px solid var(--line);letter-spacing:-.3px;}
.scard-head .sh-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none;}
.scard-body{padding:4px 16px 8px;}
.srow{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px dashed var(--line);}
.srow:last-child{border-bottom:none;}
.srow .s-label{font-size:.9rem;color:var(--muted);font-weight:700;}
.srow .s-val{font-size:1.15rem;font-weight:900;letter-spacing:-.4px;}
.srow .s-val small{font-size:.72rem;font-weight:700;opacity:.6;}
.srow.highlight{background:var(--primary-soft);margin:6px -16px 0;padding:15px 16px;border-radius:16px;border-bottom:none;}
.srow.highlight .s-label{color:var(--primary);font-weight:900;}
.srow.highlight .s-val{font-size:1.3rem;}

/* ===== Modern home cards ===== */
/* Financial summary: 2x2 tiles */
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:14px 16px 16px;}
.sum-tile{background:#f7f9fc;border:1px solid var(--line);border-radius:17px;padding:14px;}
.sum-tile .st-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:10px;}
.sum-tile .st-lbl{font-size:.74rem;color:var(--muted);font-weight:800;}
.sum-tile .st-val{font-size:1.05rem;font-weight:900;letter-spacing:-.4px;margin-top:3px;color:#0f172a;}
.sum-tile .st-val small{font-size:.66rem;font-weight:700;opacity:.6;}
.sum-tile.profit{background:#f4f5ff;border:1px solid #e6e8ff;}
.sum-tile.profit.neg{background:#fff5f7;border-color:#fdd9e1;}
.sum-tile.profit .st-val{font-size:1.35rem;}

/* Flow card (sales / purchases) with progress bar */
.fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;}
.fcard-head{display:flex;align-items:center;gap:11px;padding:15px 16px 2px;font-weight:900;font-size:1.02rem;letter-spacing:-.3px;}
.fcard-head .fh-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex:none;}
.fcard-total{padding:8px 16px 0;}
.fcard-total .ft-lbl{font-size:.76rem;color:var(--muted);font-weight:800;}
.fcard-total .ft-val{font-size:1.7rem;font-weight:900;letter-spacing:-1px;color:#0f172a;line-height:1.2;}
.fcard-total .ft-val small{font-size:.85rem;opacity:.55;font-weight:800;}
.fbar{height:9px;border-radius:20px;background:#fde8ec;margin:14px 16px 13px;overflow:hidden;}
.fbar > i{height:100%;display:block;border-radius:20px;}
.fcard-foot{display:flex;gap:11px;padding:0 16px 16px;}
.fcard-foot .ff{flex:1;background:#f7f9fc;border:1px solid var(--line);border-radius:14px;padding:11px 13px;}
.fcard-foot .ff .ff-lbl{font-size:.72rem;color:var(--muted);font-weight:800;}
.fcard-foot .ff .ff-val{font-size:1.05rem;font-weight:900;margin-top:3px;letter-spacing:-.3px;}
.fcard-foot .ff .ff-val small{font-size:.64rem;opacity:.6;font-weight:700;}

/* Search */
.search{position:relative;margin:2px 0 14px;}
.search input{width:100%;height:48px;border-radius:16px;border:1px solid var(--line);background:#fff;padding:0 46px 0 16px;font-size:.92rem;font-family:inherit;text-align:right;box-shadow:var(--shadow-sm);}
.search input:focus{outline:2px solid #c7d2fe;}
.search svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);}

/* Segmented control */
.seg{display:flex;gap:5px;background:#e5e9f2;border-radius:16px;padding:5px;margin-bottom:12px;}
.seg button{flex:1;border:none;background:transparent;padding:10px 6px;border-radius:12px;font-weight:800;font-size:.85rem;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s;}
.seg button.active{background:#fff;color:var(--primary);box-shadow:0 3px 10px -4px rgba(15,23,42,.25);}

/* Filter pills */
.filters{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.filter-chip{flex:none;border:1.5px solid var(--line);background:#fff;color:var(--muted);border-radius:20px;padding:8px 15px;font-weight:800;font-size:.82rem;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap;}
.filter-chip .fc-n{background:#f1f5f9;color:#475569;border-radius:12px;padding:1px 8px;font-size:.72rem;}
.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 16px -8px rgba(79,70,229,.7);}
.filter-chip.active .fc-n{background:rgba(255,255,255,.25);color:#fff;}

/* List cards */
.rec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.rec .r-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
.rec .r-title{font-weight:900;font-size:1rem;color:#0f172a;display:flex;align-items:center;gap:8px;letter-spacing:-.3px;}
.rec .r-date{font-size:.72rem;color:var(--muted);font-weight:700;background:#f6f8fc;padding:4px 10px;border-radius:12px;white-space:nowrap;}
.rec .r-rows{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.82rem;color:#475569;align-items:center;}
.rec .r-rows b{color:#0f172a;font-weight:800;}
.avatar{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none;}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:.74rem;font-weight:800;}
.chip.paid{background:var(--green-soft);color:var(--green);}
.chip.remain{background:var(--red-soft);color:var(--red);}
.amt{font-weight:900;letter-spacing:-.3px;}
.amt.pos{color:var(--green);} .amt.neg{color:var(--red);} .amt.neutral{color:#0f172a;}
.muted{color:var(--muted);}
.empty{text-align:center;color:#94a3b8;padding:48px 12px;font-weight:700;font-size:.95rem;}
.empty .e-ic{font-size:2.6rem;display:block;margin-bottom:12px;opacity:.4;}
.detail{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.74rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
.tbl th,.tbl td{padding:7px 5px;text-align:center;border-bottom:1px solid var(--line);}
.tbl th{background:#f6f8fc;font-weight:800;color:#475569;}
.tbl tr:last-child td{border-bottom:none;}
.link{color:var(--primary);font-weight:800;font-size:.82rem;cursor:pointer;background:none;border:none;padding:8px 0 2px;font-family:inherit;}

/* Tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm);cursor:pointer;transition:.15s;}
.tile:active{transform:scale(.97);}
.tile .t-ic{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:#fff;font-size:1.25rem;}
.tile .t-nm{font-weight:900;font-size:.88rem;color:#0f172a;}
.tile .t-ct{font-size:.72rem;color:var(--muted);font-weight:700;margin-top:2px;}

/* Bottom nav */
.nav{position:fixed;bottom:14px;right:14px;left:14px;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:24px;display:flex;box-shadow:0 12px 34px -12px rgba(15,23,42,.35);padding:8px 6px;}
.nav button{flex:1;border:none;background:none;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#9aa3b2;font-family:inherit;cursor:pointer;border-radius:16px;transition:.15s;}
.nav button.active{color:var(--primary);background:var(--primary-soft);}
.nav button .n-lbl{font-size:.66rem;font-weight:800;}
.nav button svg{width:22px;height:22px;}