@font-face{
  font-family:"Sahel";
  src:url("https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/Sahel.woff2") format("woff2");
  font-style:normal;font-weight:400;font-display:swap;
}
@font-face{
  font-family:"Sahel";
  src:url("https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/Sahel-Bold.woff2") format("woff2");
  font-style:normal;font-weight:700;font-display:swap;
}
:root{
  --ink:#18263b;--muted:#718096;--navy:#14263f;--blue:#2563eb;
  --teal:#0f9f91;--line:#e4eaf2;--surface:#fff;--bg:#f4f7fb;
  --shadow:0 12px 35px rgba(20,38,63,.07);
}
*{box-sizing:border-box}
html{font-family:"Sahel",Tahoma,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);direction:rtl}
body{margin:0;line-height:1.9;min-height:100vh;background:
  radial-gradient(ellipse at 8% 0%,rgba(37,99,235,.08),transparent 34%),
  radial-gradient(ellipse at 96% 12%,rgba(15,159,145,.07),transparent 30%),var(--bg)}
button,input,select,textarea{font:inherit}
a{color:var(--blue)}
.top{position:relative;overflow:hidden;color:#fff;background:linear-gradient(115deg,#12243c 0%,#183a5d 58%,#145e68 100%);box-shadow:0 8px 24px rgba(17,37,61,.16)}
.top:after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.08);border-radius:50%;left:-60px;top:-150px;box-shadow:0 0 0 28px rgba(255,255,255,.025),0 0 0 58px rgba(255,255,255,.02);pointer-events:none}
.topinner{position:relative;z-index:1;max-width:1180px;margin:auto;padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:25px;font-weight:700;letter-spacing:-.4px;color:#fff;text-decoration:none}
.brand:before{content:"٪";display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,#38d5c1,#138c9d);color:#fff;font-size:24px;box-shadow:0 5px 15px rgba(0,0,0,.14)}
.top nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.top nav span{color:#dbeafe;padding:6px 12px;border-left:1px solid rgba(255,255,255,.18)}
.top nav a{color:#fff;text-decoration:none;padding:7px 13px;border-radius:9px;transition:background .2s}
.top nav a:hover{background:rgba(255,255,255,.13)}
.wrap{max-width:1180px;margin:32px auto;padding:0 22px;min-height:calc(100vh - 170px)}
.narrow{max-width:500px;margin:62px auto}
h1{font-size:28px;line-height:1.6;margin:0 0 18px;font-weight:700;letter-spacing:-.4px}
h1:after{content:"";display:block;width:54px;height:4px;margin-top:9px;border-radius:9px;background:linear-gradient(90deg,var(--teal),#60a5fa)}
h2{font-size:20px;line-height:1.7;margin:0 0 15px;font-weight:700}
p{margin:8px 0 12px}
.muted{color:var(--muted)}
.card{background:rgba(255,255,255,.96);border:1px solid rgba(222,231,242,.9);border-radius:19px;padding:25px;margin:20px 0;box-shadow:var(--shadow)}
.card h2{display:flex;align-items:center;gap:10px}
.card h2:before{content:"";width:5px;height:22px;border-radius:6px;background:var(--teal);display:inline-block}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.stat{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#f0f7ff 100%);border:1px solid #dce9f8;border-radius:17px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:104px}
.stat:after{content:"";position:absolute;width:90px;height:90px;left:-24px;bottom:-40px;border-radius:50%;background:rgba(37,99,235,.07)}
.stat span{font-weight:700;color:#52647c}
.stat b{font-size:30px;line-height:1.4;color:#174b7b;position:relative;z-index:1}
label{display:block;font-weight:700;margin:14px 0 6px;color:#34445b;font-size:14px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid #d3dce8;border-radius:11px;background:#fff;color:var(--ink);outline:none;transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{border-color:#5a9ce8;box-shadow:0 0 0 4px rgba(37,99,235,.10)}
input::placeholder,textarea::placeholder{color:#9aa8b9}
button{font:inherit;font-weight:700;background:linear-gradient(120deg,#2563eb,#167b9d);color:#fff;border:0;border-radius:11px;padding:11px 20px;margin-top:18px;cursor:pointer;box-shadow:0 6px 14px rgba(37,99,235,.16);transition:transform .15s,filter .15s}
button:hover{filter:brightness(1.06);transform:translateY(-1px)}
button:active{transform:translateY(0)}
.small{font-size:13px;padding:7px 11px;margin:0;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:13px}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;background:#fff}
th,td{padding:13px 14px;text-align:right;border-bottom:1px solid #edf1f6;white-space:nowrap}
th{background:#f2f6fb;color:#42536b;font-size:13px;font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f9fbfe}
.inline{display:flex;align-items:center;gap:8px}
.inline input{width:82px;padding:7px 8px}
.notice{padding:13px 16px;border-radius:12px;margin:14px 0;border:1px solid transparent}
.success{background:#eafaf1;color:#16633b;border-color:#c7efd8}
.error{background:#fff1f1;color:#9b2525;border-color:#ffd7d7}
.footer{text-align:center;color:#8996a8;padding:26px 12px 32px;font-size:12px}
form button{min-height:43px}
.narrow .card,section.card.narrow{padding:30px}
.narrow button:not(.small){width:100%}
@media(max-width:720px){
  .wrap{margin:22px auto;padding:0 14px;min-height:calc(100vh - 150px)}
  .topinner{align-items:flex-start;flex-direction:column;padding:14px 16px;gap:8px}
  .top nav{gap:5px}
  .top nav span{padding:5px 7px}
  h1{font-size:24px}
  .card{padding:18px;border-radius:15px}
  .grid,.stats{grid-template-columns:1fr}
  .stat{min-height:86px;padding:17px 19px}
  .stat b{font-size:26px}
  .inline{min-width:245px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.actionlink{display:inline-flex;align-items:center;gap:6px;margin:5px 5px 5px 0;padding:9px 13px;border-radius:10px;background:#edf5ff;border:1px solid #d5e7ff;color:#1e5c9a;text-decoration:none;font-weight:700;transition:background .15s,transform .15s}
.actionlink:hover{background:#dcecff;transform:translateY(-1px)}
.funditem{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #edf1f6}
.funditem:last-child{border-bottom:0}
.funditem p{margin-bottom:0}
.danger{background:linear-gradient(120deg,#c2414b,#a51d36)!important;box-shadow:0 5px 13px rgba(194,65,75,.14)!important}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
form{margin:0}
form+form{margin-top:8px}
input[type=file]{padding:9px;background:#f8fafc}
.card h3{font-size:16px;margin:18px 0 8px}
@media(max-width:720px){.funditem{align-items:flex-start;flex-direction:column}.funditem .actionlink{margin-right:0}.actionlink{font-size:13px}}

/* v0.3: mobile-first forms, invitation links and accessible touch targets */
.invite-banner{padding:14px 16px;background:#eefaf8;border:1px solid #ccefe8;border-radius:13px;margin:14px 0;color:#155e58}
.invite-link{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:10px 0}
.invite-link input{flex:1 1 280px;min-width:0;font-size:12px;background:#f8fafc;direction:ltr;text-align:left}
.invite-link>div{display:flex;align-items:center}
.copybtn{margin:0;min-height:42px}
button,a,.actionlink,input,select{touch-action:manipulation}
button,a,.actionlink{ -webkit-tap-highlight-color:transparent }
input[type=number],input[type=date]{font-variant-numeric:tabular-nums}
@media(max-width:480px){
  body{font-size:14px}
  .topinner{padding:12px 13px}
  .brand{font-size:22px}
  .brand:before{width:35px;height:35px;border-radius:11px}
  .top nav{width:100%;gap:4px}
  .top nav span{max-width:100%;overflow-wrap:anywhere;border-left:0;padding:4px 3px}
  .top nav a{padding:8px 9px;font-size:13px}
  .wrap{padding:0 10px;margin:16px auto}
  .card{padding:15px;margin:13px 0;border-radius:14px}
  h1{font-size:22px}
  h2{font-size:18px}
  label{font-size:13px}
  input,select,textarea{padding:12px;font-size:16px;min-height:44px}
  button{width:100%;min-height:46px;margin-top:12px;padding:11px 13px}
  .small{width:auto;min-height:40px;padding:8px 10px}
  .inline{flex-wrap:wrap;min-width:0}
  .inline input{width:86px}
  .actionlink{width:100%;justify-content:center;margin:5px 0;padding:11px}
  .stats{gap:10px}
  .stat{min-height:76px;padding:14px}
  .stat span{font-size:13px}
  .stat b{font-size:23px;overflow-wrap:anywhere}
  .funditem{gap:8px}
  .invite-link{flex-direction:column}
  .invite-link input{width:100%;flex-basis:auto;font-size:11px}
  .invite-link>div{width:100%}
  .copybtn{width:100%}
  .tablewrap{border-radius:10px}
  th,td{padding:11px 10px;font-size:13px}
  .footer{padding:18px 12px;font-size:11px}
}


/* v0.4 dashboard charts and PWA install UI */
.installbtn{background:linear-gradient(120deg,#0f9f91,#167b9d);border:1px solid rgba(255,255,255,.18);box-shadow:none;margin:0}
.installbtn[hidden]{display:none!important}
.chart-card{overflow:hidden}
.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chart-heading h2{margin-bottom:3px}
.chart-heading .muted{font-size:12px;margin:0}
.chart-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:#52647c}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.legend-in{background:#16a394}.legend-out{background:#4f7ee8}
.chart-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin-top:16px}
.cash-chart{display:block;width:100%;min-width:510px;height:auto;overflow:visible}
.chart-summary{display:flex;gap:10px 22px;flex-wrap:wrap;padding-top:13px;border-top:1px solid #edf1f6;font-size:13px;color:#52647c}
.chart-summary b{color:#173d62;font-variant-numeric:tabular-nums}
.admin-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 25px;margin-top:18px}
.admin-bar>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#52647c;margin-bottom:7px}
.admin-bar b{font-size:15px;color:#18263b}
.bar-track{height:10px;background:#edf2f8;border-radius:99px;overflow:hidden}
.bar-track i{height:100%;display:block;border-radius:99px;min-width:2px}
@media(max-width:540px){.chart-heading{display:block}.chart-legend{margin-top:12px}.cash-chart{min-width:480px}.admin-bars{grid-template-columns:1fr;gap:14px}.chart-summary{font-size:12px}.installbtn{width:auto!important;min-height:38px!important;padding:7px 10px!important}}

/* Persian/Jalali date inputs */
.jalali-date-input{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.date-hint{display:block;margin-top:5px;font-size:12px;line-height:1.8}

/* v0.6 member messages and privacy controls */
.setting-toggle{padding:14px 15px;margin:14px 0;border:1px solid #e2eaf4;border-radius:13px;background:#f8fbff}
.setting-toggle label{display:flex;align-items:flex-start;gap:10px;line-height:1.8}
.setting-toggle input[type=checkbox]{width:20px;min-width:20px;height:20px;margin:4px 0 0;accent-color:#167b9d}
.setting-toggle p{margin:6px 0 0 30px;font-size:13px}
.fund-message{padding:14px 0;border-bottom:1px solid #e7edf4}
.fund-message:last-child{border-bottom:0}
.message-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fund-message p{white-space:normal;overflow-wrap:anywhere;margin:10px 0}
.status-pill{display:inline-flex;padding:3px 9px;border-radius:999px;background:#e8f4ff;color:#285b8e;font-size:12px}
@media(max-width:560px){.setting-toggle{padding:12px}.setting-toggle p{margin-right:0;margin-left:0}.message-head{align-items:flex-start;flex-direction:column}}


/* v0.7: styled error pages, stronger buttons, and installment payment actions */
.error-card{max-width:760px;margin:28px auto;text-align:center;border-color:#f3caca;background:linear-gradient(160deg,#fff 0%,#fffafa 100%)}
.error-card h1{margin:0 auto 14px}.error-card h1:after{margin-right:auto;margin-left:auto;background:linear-gradient(90deg,#e35d6a,#f59e0b)}
.error-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 12px;border-radius:18px;background:#fff0f0;border:1px solid #ffd4d4;color:#b42332;font-size:34px;font-weight:700}
.error-actions,.button-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.error-actions .actionlink{width:auto;margin:0}.button-row button{flex:1;min-width:145px;margin-top:8px}
.success-btn{background:linear-gradient(120deg,#0f9f91,#087f70)!important;box-shadow:0 6px 14px rgba(15,159,145,.18)!important}
.danger{color:#fff!important}
.pay-installment-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:8px 13px;border-radius:10px;background:linear-gradient(120deg,#0f9f91,#087f70);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 4px 10px rgba(15,159,145,.15);transition:transform .15s,filter .15s}
.pay-installment-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.pending-chip{display:inline-block;padding:5px 9px;border-radius:9px;background:#fff6df;border:1px solid #f4df9d;color:#805a09;font-size:12px;font-weight:700}
.installment-pay-card{max-width:650px;margin:20px auto}.installment-pay-card strong{color:#087f70;font-size:20px}.installment-pay-card .actionlink{margin-top:12px}
.loan-review-form{padding:14px;background:#f8fbff;border:1px solid #e0eaf6;border-radius:13px}.loan-review-form .button-row{justify-content:stretch}
input[readonly]{background:#f2f6fb;color:#40516a}
@media(max-width:480px){.error-actions{flex-direction:column}.error-actions .actionlink{width:100%}.button-row{flex-direction:column;align-items:stretch}.button-row button{width:100%}.pay-installment-btn{width:100%;min-height:40px}.loan-review-form{padding:11px}}