@font-face{font-family:"Vazirmatn";src:url("/static/fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("/static/fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("/static/fonts/Vazirmatn-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url("/static/fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
/* ============ توکن‌ها ============ */
:root{
  --ink:#0A1A3A; --ink-2:#12295C; --blue:#2F6BFF; --blue-ink:#1E4FD8; --blue-tint:#EAF0FF;
  --paper:#F4F6FB; --surface:#FFFFFF; --line:#E3E8F1; --line-strong:#CBD3E2;
  --text:#0F1B33; --muted:#5B6783;
  --ok:#067A53; --ok-tint:#E2F5EC; --warn:#8A5200; --warn-tint:#FFF0D3;
  --bad:#B72A30; --bad-tint:#FDE7E8; --part:#5B3BC0; --part-tint:#EDE8FB; --idle:#44506B; --idle-tint:#E9EDF5;
  --surface-2:#F0F3F9; --row-hover:#FAFBFE; --row-od:#FFF8F8; --bad-line:#F4C7C9; --has-line:#B8CBFF; --bar:#BFD0FF; --hero-acc:#7FA6FF;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --font:Vazirmatn,"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;
  --shadow-pop:0 24px 60px rgba(10,26,58,.28);
}

/* ============ تم تیره ============ */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0B1220; --surface:#131C2E; --line:#223049; --line-strong:#33445F;
  --text:#E8EDF7; --muted:#9AA8C4; --blue-ink:#4C82FF; --blue-tint:#172A52;
  --ok:#4FD1A0; --ok-tint:#0F2E24; --warn:#F5B84C; --warn-tint:#33260C;
  --bad:#FF8A90; --bad-tint:#3A1519; --part:#B7A3FF; --part-tint:#241B49; --idle:#AEBAD3; --idle-tint:#1D2740;
  --surface-2:#1A2539; --row-hover:#17223A; --row-od:#2A1619; --bad-line:#5C2A30; --has-line:#2F4C8F; --bar:#2B4A99;
  --ink:#070E1D; --ink-2:#0F1F45;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0B1220; --surface:#131C2E; --line:#223049; --line-strong:#33445F;
    --text:#E8EDF7; --muted:#9AA8C4; --blue-ink:#4C82FF; --blue-tint:#172A52;
    --ok:#4FD1A0; --ok-tint:#0F2E24; --warn:#F5B84C; --warn-tint:#33260C;
    --bad:#FF8A90; --bad-tint:#3A1519; --part:#B7A3FF; --part-tint:#241B49; --idle:#AEBAD3; --idle-tint:#1D2740;
    --surface-2:#1A2539; --row-hover:#17223A; --row-od:#2A1619; --bad-line:#5C2A30; --has-line:#2F4C8F; --bar:#2B4A99;
    --ink:#070E1D; --ink-2:#0F1F45;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--paper);color:var(--text);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue-ink);text-decoration:none}
:focus-visible{outline:3px solid rgba(47,107,255,.55);outline-offset:2px;border-radius:6px}
.num,.money,.amt{font-variant-numeric:tabular-nums}
svg.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ============ قالب صفحه ============ */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--ink);color:#fff;padding:var(--sp-5) var(--sp-3);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-1) var(--sp-3) var(--sp-5)}
.brand b{display:block;font-size:17px;line-height:1.3}
.brand small{display:block;color:rgba(255,255,255,.62);font-size:12px;direction:ltr;text-align:right}
.mark{width:40px;height:40px;flex:none}
#nav{display:flex;flex-direction:column;gap:var(--sp-1)}
#nav button{background:none;border:0;color:rgba(255,255,255,.74);text-align:start;min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-sm);cursor:pointer;display:flex;gap:var(--sp-3);align-items:center;font-size:15px;transition:background .15s,color .15s}
#nav button:hover{background:rgba(255,255,255,.07);color:#fff}
#nav button.on{background:rgba(47,107,255,.22);color:#fff;font-weight:700;box-shadow:inset -3px 0 0 var(--blue)}
.side-foot{margin-top:auto;padding:var(--sp-3);color:rgba(255,255,255,.62);font-size:13px}
main{padding:var(--sp-6) var(--sp-6) 72px;min-width:0}
.top,#view{max-width:1180px;margin-inline:auto}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5);gap:var(--sp-3)}
.top h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.2px}
.chip{background:var(--surface);color:var(--muted);border:1px solid var(--line);padding:4px 14px;border-radius:999px;font-size:13px}

/* ============ چیدمان و کارت ============ */
.grid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
.grid>*{min-width:0}
td.row{display:table-cell;white-space:nowrap}
td.row .btn{margin-inline-end:6px}
.chart-note{margin-top:var(--sp-3)}
.stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--surface);border-radius:var(--r-md);padding:var(--sp-5);border:1px solid var(--line)}
.card h3{margin:0 0 var(--sp-4);font-size:16px;font-weight:700}
a.card{transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--blue);transform:translateY(-1px)}
.stat{padding:var(--sp-4) var(--sp-5)}
.stat .k{color:var(--muted);font-size:13px}
.stat .v{font-size:20px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:12px;font-weight:500;color:var(--muted)}
.stat.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.stat.dark .k,.stat.dark .v small{color:rgba(255,255,255,.7)}
.stat.bad .v{color:var(--bad)}
.row{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.muted{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:var(--sp-6) var(--sp-3)}

/* ============ پنل بدهی (عنصر شاخص) ============ */
.hero{display:grid;grid-template-columns:1.5fr 1fr;border-radius:var(--r-lg);color:#fff;overflow:hidden;
  background:var(--ink) repeating-linear-gradient(to bottom,transparent 0 35px,rgba(255,255,255,.05) 35px 36px)}
.hero-main{display:flex;gap:var(--sp-5);align-items:center;padding:var(--sp-6)}
.hero-text{min-width:0;flex:1}
.hero .k{color:rgba(255,255,255,.72);font-size:14px}
.hero .big{font-size:clamp(28px,4.2vw,42px);font-weight:700;line-height:1.25;margin:2px 0 var(--sp-3);letter-spacing:-.5px}
.money small{font-size:max(12px,.38em);font-weight:500;opacity:.75;margin-inline-start:6px}
.meter{height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:99px;background:#7FA6FF}
.hero .meta{margin-top:var(--sp-2);font-size:13px;color:rgba(255,255,255,.72)}
.hero-next{padding:var(--sp-6);background:rgba(255,255,255,.06);border-inline-start:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:var(--sp-2);justify-content:center}
.hero-next .t{font-weight:700;font-size:16px}
.hero-next .when{color:rgba(255,255,255,.78);font-size:14px}
.hero-next .amt-line{font-size:22px;font-weight:700;margin:var(--sp-1) 0 var(--sp-2)}
.ring{width:112px;height:112px;flex:none}
.ring-bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:10}
.ring-fg{fill:none;stroke:#7FA6FF;stroke-width:10;stroke-linecap:round}
.ring-t{fill:#fff;font-size:24px;font-weight:700}
.banner{display:flex;gap:var(--sp-3);align-items:center;background:var(--bad-tint);color:var(--bad);border:1px solid var(--bad-line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-weight:600}
.banner a{margin-inline-start:auto;font-weight:700;color:var(--bad);text-decoration:underline}

/* ============ نوار شاخص‌ها ============ */
.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.strip>div{padding:var(--sp-4) var(--sp-5);border-inline-start:1px solid var(--line);border-top:1px solid var(--line)}
.strip>div:nth-child(3n+1){border-inline-start:0}
.strip>div:nth-child(-n+3){border-top:0}
.strip .k{color:var(--muted);font-size:13px}
.strip .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.strip .bad .v{color:var(--bad)}

/* ============ دکمه‌ها ============ */
.btn{background:var(--blue-ink);color:#fff;border:0;min-height:40px;padding:0 var(--sp-5);border-radius:var(--r-sm);cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);text-decoration:none;transition:background .15s,filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.95)}
.btn.sec{background:var(--blue-tint);color:var(--blue-ink)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line-strong)}
.btn.danger{background:var(--bad-tint);color:var(--bad)}
.btn.light{background:#fff;color:var(--ink)}
.btn.sm{min-height:34px;padding:0 var(--sp-4);font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ============ وضعیت‌ها ============ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-paid{background:var(--ok-tint);color:var(--ok)}
.b-unpaid{background:var(--idle-tint);color:var(--idle)}
.b-due_soon{background:var(--warn-tint);color:var(--warn)}
.b-overdue{background:var(--bad-tint);color:var(--bad)}
.b-partial{background:var(--part-tint);color:var(--part)}

/* ============ جدول و فهرست ============ */
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--surface-2);text-align:start;padding:10px 12px;font-weight:700;color:var(--muted);white-space:nowrap;font-size:13px}
th:first-child{border-start-start-radius:10px;border-end-start-radius:10px}
th:last-child{border-start-end-radius:10px;border-end-end-radius:10px}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:var(--row-hover)}
tr.od td{background:var(--row-od)}
.tscroll{overflow-x:auto}
.num{white-space:nowrap}
.progress{height:6px;border-radius:99px;background:var(--idle-tint);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--blue);border-radius:99px}
.list .it{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--line);flex-wrap:wrap}
.list .it:first-child{border-top:0;padding-top:0}
.list .it b{display:block}
.list .it .muted{font-size:13px}
.it-side{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}

/* ============ فرم ============ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
label.f input,label.f select,label.f textarea,.inp{border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 var(--sp-3);min-height:44px;background:var(--surface);color:var(--text);font-size:15px;width:100%;font-weight:400}
label.f textarea{padding:var(--sp-3);min-height:84px}
label.f input:focus,label.f select:focus,label.f textarea:focus,.inp:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,255,.2)}
.ltr{direction:ltr;text-align:left}
.chk{display:flex;gap:var(--sp-2);align-items:center;font-size:15px;color:var(--text);cursor:pointer;min-height:32px}
.chk input{width:18px;height:18px;accent-color:var(--blue-ink)}
.hint{font-size:12px;color:var(--muted);font-weight:400}
.money-hint{min-height:18px}

/* ============ مودال و پیام ============ */
.modal-bg{position:fixed;inset:0;background:rgba(10,26,58,.55);display:grid;place-items:center;padding:var(--sp-4);z-index:50}
.modal{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-6);width:min(640px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow-pop)}
.modal h2{margin:0 0 var(--sp-4);font-size:19px}
.modal .actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5);justify-content:flex-start}
.err{background:var(--bad-tint);color:var(--bad);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);margin-top:var(--sp-3);font-size:14px;font-weight:600}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;z-index:99;box-shadow:var(--shadow-pop);display:flex;gap:10px;align-items:center;max-width:min(92vw,520px)}
.toast.bad{background:var(--bad)}
.toast svg.ic{width:18px;height:18px}

/* ============ ورود ============ */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--sp-4);
  background:var(--ink) repeating-linear-gradient(to bottom,transparent 0 35px,rgba(255,255,255,.045) 35px 36px)}
.auth .box{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-6);width:min(400px,100%);box-shadow:var(--shadow-pop)}
.auth .mark{width:48px;height:48px;margin-bottom:var(--sp-3)}
.auth h1{margin:0 0 4px;font-size:22px}
.auth .form{grid-template-columns:1fr;margin-top:var(--sp-4)}

/* ============ تقویم ============ */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .wd{text-align:center;color:var(--muted);font-size:13px;font-weight:700;padding:4px}
.cal .d{min-height:78px;border:1px solid var(--line);border-radius:12px;padding:6px 8px;background:var(--surface);color:var(--text);cursor:pointer;text-align:start;display:flex;flex-direction:column;gap:3px;transition:border-color .15s}
.cal .d:hover{border-color:var(--blue)}
.cal .d.blank{background:none;border:0;cursor:default}
.cal .d.today .n{background:var(--blue-ink);color:#fff;border-radius:99px;min-width:26px;height:26px;display:inline-grid;place-items:center;padding:0 4px}
.cal .d.sel{background:var(--blue-tint);border-color:var(--blue)}
.cal .d.has{border-color:var(--has-line)}
.cal .d .n{font-weight:700;font-size:14px;align-self:flex-start}
.pill{font-size:11px;padding:1px 7px;border-radius:99px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.legend{display:flex;gap:var(--sp-4);font-size:13px;color:var(--muted);flex-wrap:wrap;margin-top:var(--sp-3)}

/* ============ نمودار میله‌ای (HTML، متن همیشه خوانا) ============ */
.bars{display:flex;gap:10px;align-items:flex-end;height:210px;min-width:600px;padding-top:var(--sp-3)}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bars .col .v{font-size:12px;color:var(--text);font-weight:700;min-height:18px;font-variant-numeric:tabular-nums}
.bars .col .b{width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:var(--bar);min-height:3px}
.bars .col.now .b{background:var(--blue-ink)}
.bars .col .m{font-size:12px;color:var(--muted);white-space:nowrap}
.chart-note{font-size:12px;color:var(--muted);margin:-8px 0 0}

details.help summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
details.help summary::before{content:'';width:8px;height:8px;border-inline-end:2px solid var(--blue-ink);border-bottom:2px solid var(--blue-ink);transform:rotate(135deg);transition:transform .15s}
details.help[open] summary::before{transform:rotate(45deg)}
.help-body{margin-top:var(--sp-3)}
.help-body ol,.help-body ul{padding-inline-start:22px;margin:6px 0}
.help-body li{margin:6px 0}

/* ============ واکنش‌گرا ============ */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;bottom:0;top:auto;inset-inline:0;height:auto;width:auto;box-sizing:border-box;z-index:40;padding:6px 6px calc(6px + env(safe-area-inset-bottom));flex-direction:row;border-radius:18px 18px 0 0}
  .brand,.side-foot{display:none}
  #nav{flex-direction:row;width:100%;justify-content:space-around;gap:0}
  #nav button{flex-direction:column;gap:2px;padding:6px 4px;font-size:12px;text-align:center;justify-content:center;flex:1;min-height:52px}
  #nav button.on{box-shadow:none}
  main{padding:var(--sp-4) var(--sp-4) 110px}
  .top h1{font-size:21px}
  .two{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero-main{padding:var(--sp-5)}
  .hero-next{border-inline-start:0;border-top:1px solid rgba(255,255,255,.1);padding:var(--sp-5)}
  .ring{width:84px;height:84px}
  .ring-t{font-size:22px}
  .card{padding:var(--sp-4)}
  .strip{grid-template-columns:1fr 1fr}
  .strip>div{border-inline-start:1px solid var(--line);border-top:1px solid var(--line)}
  .strip>div:nth-child(odd){border-inline-start:0}
  .strip>div:nth-child(-n+2){border-top:0}
  .cal .d{min-height:56px;padding:4px}
  .pill{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat .v{font-size:17px}
  .modal{padding:var(--sp-5)}
}
@media (pointer:coarse){
  .btn,.btn.sm{min-height:44px}
  .chk{min-height:44px}
}

/* ============ اپ‌گونه (موبایل/PWA) ============ */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
body{padding-inline:env(safe-area-inset-right) env(safe-area-inset-left);min-height:100dvh}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue-ink);flex:none}
input[type=file]{min-height:44px;padding:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.btn:active{transform:scale(.98)}
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:sk 1.2s linear infinite;min-height:84px;margin-bottom:var(--sp-3)}
@keyframes sk{to{background-position:-200% 0}}
.offline{position:fixed;top:0;inset-inline:0;background:var(--warn-tint);color:var(--warn);text-align:center;padding:8px;font-weight:600;z-index:80;padding-top:calc(8px + env(safe-area-inset-top))}
@media (max-width:860px){
  .cal{gap:3px}.cal .d{padding:3px}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
  .top{padding-top:env(safe-area-inset-top)}
}
@media (pointer:coarse){
  input,select,textarea{font-size:16px!important}
  .cal .d{min-width:0}
  #nav button{min-height:56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.side,.top .chip,.btn{display:none}.shell{display:block}main{padding:0}}

.side-foot small{font-size:12px}

/* ============ گزارش‌ها (آکاردئون) ============ */
.acc{display:flex;flex-direction:column;gap:var(--sp-3);max-width:920px}
.acc-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s}
.acc-item.open{border-color:var(--blue-ink)}
.acc-head{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);min-height:64px;cursor:pointer;color:var(--text)}
.acc-head:hover{background:var(--row-hover)}
.acc-head:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.acc-ic{width:40px;height:40px;border-radius:12px;background:var(--blue-tint);color:var(--blue-ink);display:grid;place-items:center;flex:none}
.acc-ic svg.ic{width:22px;height:22px}
.acc-t{display:flex;flex-direction:column;flex:1;min-width:0}
.acc-t b{font-size:16px}
.acc-t small{color:var(--muted);font-size:13px}
.acc-chev{width:10px;height:10px;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin-inline:6px;flex:none}
.acc-item.open .acc-chev{transform:rotate(-45deg)}
.acc-body{padding:0 var(--sp-4) var(--sp-4);border-top:1px solid var(--line)}
.acc-body[hidden]{display:none}
.acc-tools{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;padding:var(--sp-3) 0}
.acc-tools .grow{flex:1}
.acc-tools select{max-width:100%;width:auto;min-width:200px}
tr.tot td{font-weight:700;background:var(--surface-2)}