/* مسار — نظام ألوان بوحدات (tokens): الوضع الفاتح افتراضي، الداكن بالنظام أو بالاختيار، واللون الأساسي قابل للتغيير. */
:root{
  --accent:#1F5A5E;
  --bg:#F3F5F4;--card:#FFFFFF;--line:#DCE3E1;--line2:#E8EDEB;--chip:#EDF1F0;
  --ink:#0F2D30;--ink2:#4B5F61;--ink3:#7A8C8E;
  --top-bg:color-mix(in oklab,var(--accent) 72%,#061416);--top-ink:#FFFFFF;--top-muted:color-mix(in oklab,#fff 68%,var(--accent));
  --top-line:color-mix(in oklab,#fff 22%,var(--top-bg));--top-track:color-mix(in oklab,#fff 14%,var(--top-bg));
  --mint:color-mix(in oklab,#fff 55%,var(--accent));--teal:var(--accent);
  --amber:#D98B1A;--warnbg:#FCEFD9;--warnfg:#6B3005;--danger:#8A2A06;--dangerbg:#FBE7E1;--good:#1E7A4A;--goodbg:#E2F3E9;
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;
  --radius:14px;--shadow:0 1px 2px rgba(10,30,32,.06),0 8px 24px -16px rgba(10,30,32,.25);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101617;--card:#182022;--line:#2A3537;--line2:#222C2E;--chip:#1F292B;
  --ink:#ECF2F1;--ink2:#B5C3C2;--ink3:#86979A;
  --top-bg:color-mix(in oklab,var(--accent) 48%,#070E0F);--top-muted:color-mix(in oklab,#fff 60%,var(--accent));
  --amber:#F0B45A;--warnbg:#3A2A10;--warnfg:#F7D9A3;--danger:#F08A6E;--dangerbg:#3B1C14;--good:#6FD39A;--goodbg:#143022;
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.6);color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#101617;--card:#182022;--line:#2A3537;--line2:#222C2E;--chip:#1F292B;
  --ink:#ECF2F1;--ink2:#B5C3C2;--ink3:#86979A;
  --top-bg:color-mix(in oklab,var(--accent) 48%,#070E0F);--top-muted:color-mix(in oklab,#fff 60%,var(--accent));
  --amber:#F0B45A;--warnbg:#3A2A10;--warnfg:#F7D9A3;--danger:#F08A6E;--dangerbg:#3B1C14;--good:#6FD39A;--goodbg:#143022;
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.6);color-scheme:dark;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* رمز الريال السعودي الرسمي U+20C1: خط صغير (حرف واحد) كي يظهر على كل الأجهزة قبل أن تدعمه خطوط النظام */
@font-face{font-family:'Masar Symbols';src:url('/fonts/masar-symbols.ttf') format('truetype');unicode-range:U+20C1;font-display:block}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Masar Symbols','IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-height:100vh}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;min-height:44px;border-radius:10px;padding:0 18px;border:1px solid transparent;font-weight:600;background:var(--chip);color:var(--ink)}
.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.danger{background:var(--card);color:var(--danger);border-color:var(--danger)}
.ghost{background:transparent;color:var(--top-ink);border-color:var(--top-line)}
.ghost-dark{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;padding:0 18px;border:1px solid transparent;font-weight:600;text-decoration:none}
.small-btn{min-height:34px;padding:0 12px;font-size:14px;border-radius:8px}
.icon-btn{min-width:44px;padding:0;background:transparent;color:var(--top-ink);border-color:var(--top-line);font-size:20px}
button:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
input,select,textarea{min-width:0;max-width:100%}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--card);color:var(--ink);width:100%}
input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.muted{color:var(--ink2);margin:0;font-size:14.5px}.muted-on-dark{color:var(--top-muted);font-size:12.5px;display:block}
.small{font-size:13.5px}.error{color:var(--danger);margin:0;min-height:1.2em;font-size:14.5px}
.ltr{direction:ltr;unicode-bidi:isolate}.rtl{direction:rtl;unicode-bidi:isolate}
.neg{color:var(--danger)}.pos{color:var(--good)}

/* ───── الدخول: لوحة تعريف بالنظام (المسار) على جانب، والنموذج على الجانب الآخر ───── */
#login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr)}
.login-hero{background:var(--top-bg);color:var(--top-ink);padding:28px 22px 22px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.hero-brand{margin:0;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:.2px}
.hero-brand .mark{width:22px;height:22px;border-width:2px}.hero-brand .mark::after{inset:5px}
.hero-title{margin:6px 0 0;font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.3px}
.hero-lead{margin:0;max-width:34em;color:var(--top-muted);font-size:15px;line-height:1.75}
.hero-path{width:100%;max-width:560px;height:auto;margin:8px 0 2px;overflow:visible}
.hero-path .rail{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:rail 1.9s cubic-bezier(.4,0,.2,1) .2s forwards}
.hero-path .st circle{fill:var(--top-bg);stroke:var(--mint);stroke-width:3}
.hero-path .st text{fill:#fff;font-size:14.5px;text-anchor:middle;font-weight:600}
.hero-path .st{opacity:0;animation:pop .45s ease-out forwards}
.hero-path .s1{animation-delay:.25s}.hero-path .s2{animation-delay:.7s}.hero-path .s3{animation-delay:1.15s}.hero-path .s4{animation-delay:1.6s}.hero-path .s5{animation-delay:2.05s}
.hero-path .s5 circle{fill:var(--mint)}
.hero-path .coin{fill:#fff;stroke:var(--top-bg);stroke-width:2}
@keyframes rail{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hero-facts{list-style:none;margin:6px 0 0;padding:0;display:none;flex-direction:column;gap:8px;max-width:36em;color:var(--top-muted);font-size:14.5px;line-height:1.65}
.hero-facts li{position:relative;padding-inline-start:18px}
.hero-facts li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.owner-line{margin:0;font-size:13px;line-height:1.7;display:flex;flex-wrap:wrap;gap:4px 14px}
.hero-owner{display:none;margin-top:auto;padding-top:18px;color:var(--top-muted)}.hero-owner strong{color:#fff;font-weight:700}
.login-owner{color:var(--ink3);justify-content:center;text-align:center;padding:4px 8px 12px}.login-owner strong{color:var(--ink2)}
.support-line{display:inline-flex;flex-wrap:wrap;gap:4px 10px}.support-line a{color:inherit;text-decoration:underline;text-underline-offset:3px}.hero-owner .support-line a{color:#fff}
.login-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 16px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;width:min(440px,100%);min-width:0;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.login-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.login-hello{font-size:20px;font-weight:700}
.lang-pick{width:auto;min-height:36px;padding:0 8px;font-size:13.5px}
@media (min-width:761px){
  #login{grid-template-columns:minmax(0,1fr) minmax(420px,46%)}
  .login-hero{grid-column:1;padding:44px 44px 32px;gap:14px;justify-content:center;min-height:100vh;position:sticky;top:0}
  .login-side{grid-column:2;padding:32px 24px}
  .hero-brand{font-size:19px}.hero-title{font-size:46px;margin-top:10px}.hero-lead{font-size:16px}
  .hero-path{margin:18px 0 6px}.hero-facts{display:flex}.hero-owner{display:flex}.login-owner{display:none}
}
@media (max-width:760px){.hero-path .st text{font-size:20px}.hero-path{margin:6px 0 0}}
[dir=ltr] .hero-path{transform:scaleX(-1)}[dir=ltr] .hero-path text{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.hero-path .rail{animation:none;stroke-dashoffset:0}.hero-path .st{animation:none;opacity:1}.hero-path .coin{display:none}}
.members{display:flex;flex-direction:column;gap:8px}
.members button{display:flex;justify-content:space-between;gap:12px;background:var(--chip);text-align:start;padding:10px 14px;border-color:var(--line)}
.members small{color:var(--ink2);font-weight:400}
.link{background:transparent;border:0;color:var(--accent);text-decoration:underline;min-height:0;padding:4px 0;font-size:14px;align-self:center}
.file-row input{padding:8px 0;min-height:0;border:0;background:transparent}
.attach-list{display:flex;flex-wrap:wrap;gap:10px}.attach-list .att{width:120px;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:12.5px}.attach-list .att img,.attach-list .att .pdf{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--chip);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink2)}.attach-list .att a{color:var(--ink);text-decoration:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-grid{overflow:auto;max-height:50vh}.import-grid table td,.import-grid table th{font-size:13px;padding:5px 6px;white-space:nowrap}.import-grid select{min-height:32px;font-size:13px;padding:0 6px}.import-grid tr.skip td{opacity:.45}.map-row{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.map-row label{display:flex;flex-direction:column;gap:4px;font-size:13.5px}.map-row select{min-height:38px}
.tabs{display:flex;gap:6px;background:var(--chip);padding:4px;border-radius:10px}
.tabs button{flex:1;background:transparent;border-color:transparent}
.tabs button[aria-selected=true]{background:var(--card);border-color:var(--line);font-weight:700}
.form-inline{display:flex;flex-direction:column;gap:12px}
.form-inline label:not(.check):not(.choice-opt),.form label:not(.check):not(.choice-opt),.add-col label:not(.check){display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:500}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px}.check input{width:20px;height:20px;margin-top:3px;flex:none}
.choice{display:grid;gap:8px;grid-template-columns:1fr 1fr}
#f-signup .choice{grid-template-columns:1fr}#f-signup .choice-opt span{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.plan-tag{font-style:normal;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--chip);color:var(--ink2);border:1px solid var(--line)}.plan-tag.free{background:var(--goodbg);color:var(--good);border-color:transparent}
.choice-opt{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.choice-opt:has(input:checked){border-color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,var(--card))}
.choice-opt input{margin-top:4px}.choice-opt span{display:flex;flex-direction:column;gap:2px}.choice-opt small{color:var(--ink2);font-weight:400;font-size:12.5px}
@media (max-width:420px){.choice{grid-template-columns:1fr}}

/* ───── الرأس والتنقل ───── */
.top{background:var(--top-bg);color:var(--top-ink);padding:12px max(16px,calc((100% - 1280px)/2 + 24px)) 12px;display:flex;flex-direction:column;gap:8px}
.top-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.mark{width:26px;height:26px;border:2px solid var(--mint);border-radius:50%;position:relative;flex:none}
.mark::after{content:'';position:absolute;inset:6px;background:var(--mint);border-radius:50%}
.nav{display:flex;gap:4px;background:var(--top-track);padding:4px;border-radius:12px}
.nav a{color:var(--top-ink);text-decoration:none;padding:8px 14px;border-radius:9px;font-weight:600;font-size:15px;opacity:.85}
.nav a[aria-current=page]{background:var(--card);color:var(--ink);opacity:1}
.top-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:100%}
.top-actions select,#role-switch{min-height:40px;border-radius:9px;padding:0 10px;background:var(--top-track);color:var(--top-ink);border:1px solid var(--top-line);max-width:100%}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--top-muted)}.live i{width:9px;height:9px;border-radius:50%;background:var(--ink3);display:inline-block}
.live.on i{background:#4ED08F;box-shadow:0 0 0 3px rgba(78,208,143,.25)}
.demo-banner{margin:0;padding:8px 12px;background:var(--top-track);border-radius:8px;font-size:14px;color:var(--top-muted)}
.demo-banner.plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.demo-banner.plan a{color:inherit;font-weight:600}.demo-banner.plan.locked{background:var(--warnbg);color:var(--warnfg)}
.demo-banner.install{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--top-ink)}.demo-banner.install .small-btn{background:var(--mint);color:#0d2b2d;border-color:transparent}.demo-banner.install .link{color:var(--top-muted)}
@media (display-mode:standalone){.demo-banner.install{display:none!important}}
.bottom-nav{display:none}
@media (max-width:760px){
  .nav{display:none}
  .bottom-nav{position:fixed;inset-inline:0;bottom:0;display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;background:var(--card);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:20}
  .bottom-nav a{color:var(--ink2);text-decoration:none;font-size:12.5px;text-align:center;padding:8px 2px;border-radius:8px}
  .bottom-nav a[aria-current=page]{color:var(--accent);font-weight:700}
  body{padding-bottom:84px}
}
.fab{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;font-size:28px;line-height:1;padding:0;margin:-28px 6px 0;box-shadow:var(--shadow);display:none}
@media (max-width:760px){.fab{display:inline-flex;align-items:center;justify-content:center}}
#quick-pop{top:auto;bottom:calc(96px + env(safe-area-inset-bottom));inset-inline:16px;min-width:0}
#quick-pop button{width:100%}

/* ───── الصفحات ───── */
.view{max-width:1280px;margin:0 auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:20px}
.view-box{display:contents}
@media (max-width:640px){.view{padding:14px 12px 32px;gap:14px}}
.grid{display:grid;gap:20px;grid-template-columns:repeat(12,1fr)}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
@media (max-width:980px){.span-8,.span-6,.span-4{grid-column:span 12}.span-3{grid-column:span 6}}
@media (max-width:640px){.grid{gap:12px}.span-3{grid-column:span 6}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:var(--shadow)}
.card h2{margin:0;font-size:18px}.card h3{margin:0;font-size:15.5px}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
@media (max-width:640px){.card{padding:14px}}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.page-head h1{margin:0;font-size:24px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink2)}
.toolbar input,.toolbar select{width:auto;min-height:40px}
.seg{display:inline-flex;gap:2px;background:var(--chip);padding:3px;border-radius:10px;flex-wrap:wrap}
.seg button{min-height:36px;padding:0 12px;background:transparent;border-color:transparent;font-size:14px;border-radius:8px}
.seg button[aria-pressed=true]{background:var(--card);border-color:var(--line)}

/* بطاقات الأرقام */
.stat{display:flex;flex-direction:column;gap:4px;padding:16px 18px}
.stat .k{font-size:13.5px;color:var(--ink2)}
.stat .v{font-size:26px;font-weight:700;line-height:1.2;direction:ltr;text-align:start}
.stat .n{font-size:12.5px;color:var(--ink3)}
.stat.accent{background:color-mix(in oklab,var(--accent) 10%,var(--card))}
.big{display:flex;align-items:baseline;gap:10px}.big strong{font-size:52px;line-height:1;font-weight:700}.big span{font-size:17px;font-weight:600}

/* الإجراءات */
.actions{display:flex;flex-wrap:wrap;gap:10px}
.attention{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.attention li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--chip);font-size:14.5px}
.attention li.warn{background:var(--warnbg);color:var(--warnfg)}.attention li.bad{background:var(--dangerbg);color:var(--danger)}
.attention .small-btn{background:var(--card);border-color:var(--line);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;flex:none}.attention li.info{color:var(--ink2)}
.empty{color:var(--ink2);padding:8px 0;margin:0}

/* رحلة الريال */
.journey{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px 0}
.stage{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:6px}
.rail{display:flex;align-items:center}.dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none}.dot.warn{background:var(--amber)}.line{flex:1;height:2px;background:var(--line)}
.stage-body{padding-inline-end:14px;display:flex;flex-direction:column;gap:3px}
.stage-label{font-size:13px;color:var(--ink2)}.stage-value{font-size:20px;font-weight:700;direction:ltr;text-align:start}
.track{height:6px;border-radius:3px;background:var(--line2);overflow:hidden}.track i{display:block;height:6px;border-radius:3px;background:var(--accent)}.track i.warn{background:var(--amber)}
.stage-note{font-size:12.5px;color:var(--ink3)}.stage-note.warn{color:var(--warnfg);font-weight:500}

/* الأظرف */
.tier{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line2);cursor:pointer}
.tier:first-child{border-top:0;padding-top:0}
.tier-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:center}
.badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:600;margin-inline-end:8px}
.bar{height:10px;border-radius:5px;background:var(--line2);overflow:hidden}.bar i{display:block;height:10px;border-radius:5px;background:var(--accent)}
.items{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.items li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink2)}
.note{align-self:flex-start;padding:3px 10px;border-radius:6px;font-size:13px;font-weight:500;background:var(--chip)}.note.warn{background:var(--warnbg);color:var(--warnfg)}
.surplus{color:var(--good);font-weight:600}
.rows{margin:0;display:flex;flex-direction:column}.rows div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.rows dt{color:var(--ink2);font-size:14.5px}.rows dd{margin:0;font-weight:600;direction:ltr}.rows .total{border-top-color:var(--ink)}.rows .total dd{font-size:17px;font-weight:700}
.warnbox{padding:10px 14px;border-radius:10px;background:var(--warnbg);color:var(--warnfg);font-size:14.5px;margin:0}

/* الجداول */
table{width:100%;border-collapse:collapse}th,td{text-align:start;padding:9px 8px;border-top:1px solid var(--line2);font-size:14.5px;vertical-align:middle}
th{color:var(--ink2);font-weight:500;border-top:0;white-space:nowrap}
tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--chip)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.status{display:inline-block;padding:2px 10px;border-radius:6px;background:var(--chip);font-size:13px;white-space:nowrap}
.status.pending{background:var(--warnbg);color:var(--warnfg)}.status.paid,.status.approved{background:var(--goodbg);color:var(--good)}.status.rejected,.status.voided{background:var(--dangerbg);color:var(--danger)}
.table-actions{display:flex;gap:6px;flex-wrap:wrap}
.cell-in{min-height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--card);width:120px}
.cell-in.wide{width:180px}select.cell-in{width:140px}
.toast{position:fixed;inset-inline:16px;bottom:16px;max-width:520px;margin-inline:auto;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:10px;z-index:30;box-shadow:var(--shadow)}
.toast.bad{background:var(--danger);color:#fff}
@media (max-width:760px){.toast{bottom:92px}}

/* الحوارات والقوائم */
dialog{border:0;border-radius:var(--radius);padding:0;width:min(480px,calc(100% - 20px));color:var(--ink);background:var(--card);box-shadow:var(--shadow)}
dialog.wide{width:min(860px,calc(100% - 20px))}
dialog::backdrop{background:rgba(5,15,16,.55)}
.form{padding:22px;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}.form h2{margin:0}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.form .table-wrap{max-height:48vh;overflow:auto}
.add-col{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}.add-col h3{margin:0}
.add-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.add-row input,.add-row select{width:auto;min-height:40px}.add-row input[name=name]{flex:1 1 160px}
.setup{min-height:420px}.setup-dots{display:flex;gap:6px}.setup-dots i{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block}.setup-dots i.on{background:var(--accent)}.setup-dots i.done{background:var(--good)}
.setup-body{display:flex;flex-direction:column;gap:12px;flex:1}.setup-body h2{margin:0}.setup-nav{justify-content:flex-start;align-items:center}
.setup-budgets{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.setup-dept h3{margin:0 0 6px;font-size:14.5px;color:var(--ink2)}.form .setup-dept label.dl{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center;padding:4px 0;font-weight:400}.setup-dept input{direction:ltr;text-align:end;min-height:36px}
.daily-lines{display:flex;flex-direction:column;gap:8px}.form .daily-lines label.dl{display:grid;grid-template-columns:1fr 150px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line2)}.daily-lines .dl small{display:block;color:var(--ink3);font-size:12px}.daily-lines input{direction:ltr;text-align:end}.daily-total{display:flex;justify-content:space-between;margin:0;padding:8px 0;border-top:1px solid var(--line);font-weight:600}
.coverage{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--chip);display:flex;flex-direction:column;gap:4px;font-size:14px}
.coverage .row{display:flex;justify-content:space-between;gap:12px}
.coverage .gap{color:var(--warnfg);font-weight:600}.coverage.ok .gap{color:var(--good)}
.pop{position:fixed;top:64px;inset-inline-end:16px;z-index:25;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:240px;box-shadow:var(--shadow)}
.pop strong{font-size:13.5px;color:var(--ink2)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;border:2px solid transparent}
.swatches button[aria-pressed=true]{border-color:var(--ink)}
.color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.quick{display:flex;flex-direction:column;gap:6px}.quick button{justify-content:flex-start;text-align:start;background:var(--chip);border-color:transparent}

/* الإعداد */
.danger-zone{border-color:color-mix(in oklab,var(--danger) 45%,var(--line))}.danger-zone h2{color:var(--danger)}
.settings-nav{display:flex;flex-wrap:wrap;gap:6px}
.settings-nav button{min-height:38px;padding:0 14px;font-size:14.5px;background:var(--chip);border-color:transparent;border-radius:999px}
.settings-nav button[aria-pressed=true]{background:var(--accent);color:#fff}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:500}
.fields .wide{grid-column:1/-1}
.list-edit{display:flex;flex-direction:column;gap:6px}
.list-edit .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;border-radius:10px;background:var(--chip)}
.list-edit .row input{flex:1 1 160px;min-height:38px}
.list-edit .row.archived{opacity:.6}
.rule{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.rule .meta{color:var(--ink2);font-size:13.5px}.rule.off{opacity:.6}.rule .err{color:var(--danger);font-size:13.5px}
table.edit{min-width:720px}
@media (max-width:760px){table.edit{min-width:0}table.edit thead{display:none}table.edit,table.edit tbody,table.edit tr{display:block}table.edit tr{border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:10px;background:var(--chip)}table.edit td{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;border:0;padding:4px 0}table.edit td::before{content:attr(data-label);color:var(--ink2);font-size:13px}table.edit td input,table.edit td select{min-width:0}}table.edit td input,table.edit td select{min-height:38px;min-width:110px;width:100%}table.edit td:first-child input{min-width:160px}
table.edit input[inputmode=decimal],.list-edit input[inputmode=decimal]{direction:ltr;text-align:end}table.edit .table-actions{flex-wrap:nowrap}
tr.archived td{opacity:.6}tr.total td{font-weight:700;border-top:2px solid var(--ink)}
.check.small{font-size:13.5px;align-items:center}.check.small input{margin-top:0;width:18px;height:18px}
.list-edit .row select{min-height:38px}

/* الرسوم */
.chart{width:100%;position:relative}
.chart svg{display:block;overflow:visible;max-width:100%}
.chart .axis text{font-family:inherit}
.tip i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle}.tip i.ln{height:2px;width:14px}
.chart .grid line{stroke:var(--line2);stroke-width:1}
.chart .axis text{fill:var(--ink3);font-size:11px}
.chart .bar-s1{fill:var(--s1)}.chart .bar-s2{fill:var(--s2)}.chart .line-s3{stroke:var(--s3);fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot-s3{fill:var(--s3);stroke:var(--card);stroke-width:2}
.chart .hit{fill:transparent;cursor:pointer}.chart .hit:hover+g rect,.chart g.hover rect{filter:brightness(1.12)}
.chart .cross{stroke:var(--ink3);stroke-width:1;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}.legend i.ln{height:2px;width:16px;border-radius:1px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);padding:8px 10px;border-radius:8px;font-size:13px;min-width:140px;box-shadow:var(--shadow);z-index:5}
.tip strong{display:block;font-size:12px;color:var(--bg);opacity:.75;margin-bottom:4px}
.tip .r{display:flex;justify-content:space-between;gap:12px}.tip .r b{direction:ltr}
.hbar{display:flex;flex-direction:column;gap:6px}
.hbar .r{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto;gap:10px;align-items:center;font-size:14px}
.hbar .t{height:14px;border-radius:4px;background:var(--line2);overflow:hidden}.hbar .t i{display:block;height:14px;border-radius:4px;background:var(--s2)}
.hbar .v{direction:ltr;font-weight:600;min-width:80px;text-align:end}
.months-strip td,.months-strip th{text-align:center;white-space:nowrap}
#card-annual tr.total td{font-weight:700;border-top:2px solid var(--ink)}
@media print{.top-actions,.actions,.toast,.bottom-nav,.fab,.nav{display:none}}

/* الجولة الإرشادية: طبقة تحجب النقر، ثقب مضيء فوق العنصر، وبطاقة شرح قريبة منه (أو مثبتة أسفل/أعلى الجوال) */
.tour-overlay{position:fixed;inset:0;z-index:50}
.tour-spot{position:fixed;z-index:51;border-radius:12px;box-shadow:0 0 0 9999px rgba(5,15,16,.62),0 0 0 3px var(--accent);pointer-events:none;transition:top .18s,left .18s,width .18s,height .18s}
.tour-spot[hidden]{display:block;top:50%;left:50%;width:0;height:0;border-radius:0;box-shadow:0 0 0 9999px rgba(5,15,16,.62)}
.tour-tip{position:fixed;z-index:52;width:min(360px,calc(100vw - 24px));background:var(--card);color:var(--ink);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);outline:0;display:flex;flex-direction:column;gap:8px}
.tour-tip.center{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:min(440px,calc(100vw - 24px))}
.tour-tip.center .tour-nav{justify-content:center}
.tour-tip.at-bottom{bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto}.tour-tip.at-top{top:12px;left:12px;right:12px;width:auto}
.tour-tip h3{margin:0;font-size:17px}.tour-tip p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.65}
.tour-count{font-variant-numeric:tabular-nums}.tour-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}.tour-nav .link{margin-inline-start:auto}
.hijri{font-size:13.5px;align-self:center}

/* الدعم العائم: زر «؟» في الطرف البادئ أسفل الشاشة (فوق الشريط السفلي في الجوال) ولوحة محادثة صغيرة */
.support-fab{position:fixed;inset-inline-start:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 14px;border-radius:999px;background:#25D366;color:#fff;border:0;font-size:15px;font-weight:700;box-shadow:0 6px 20px -6px rgba(5,15,16,.5)}
.support-fab .ico{width:24px;height:24px}.support-fab[aria-expanded=true]{background:var(--ink)}
.ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.22em;fill:currentColor}.ico.wa{color:#25D366}a .ico.wa,.btn-link .ico{margin-inline-end:6px}
.wa-btn{background:#25D366;color:#fff;border-color:transparent}.wa-btn .ico{color:#fff}
.support-panel{position:fixed;inset-inline-start:16px;bottom:76px;z-index:41;width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);display:flex;flex-direction:column;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.support-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--top-bg);color:var(--top-ink)}.support-head strong{flex:1;font-size:15px}.support-head .mark{width:20px;height:20px;border-width:2px}.support-head .mark::after{inset:5px}
.icon-x{background:transparent;border:0;color:inherit;min-height:0;padding:0 6px;font-size:22px;line-height:1}
.support-log{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.support-msg{max-width:92%;padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.6}.support-msg p{margin:0;white-space:pre-wrap}
.support-msg.assistant{background:var(--chip);align-self:flex-start;border-start-start-radius:4px}.support-msg.user{background:var(--accent);color:#fff;align-self:flex-end;border-start-end-radius:4px}
.support-msg.typing p{letter-spacing:3px;opacity:.6}.support-msg .btn-link{margin-top:8px}
.support-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px}.chip{min-height:30px;padding:0 10px;font-size:12.5px;font-weight:500;border-radius:999px;background:var(--card);border-color:var(--line)}
.support-form{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line2)}.support-form input{min-height:40px}.support-form button{min-height:40px;padding:0 14px}
.support-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px 10px;font-size:13px;border-top:1px solid var(--line2)}.support-links a{color:var(--accent)}.support-links .link{min-height:0;padding:0;margin-inline-start:auto}
@media (max-width:760px){
  .support-fab{padding:0;width:52px;height:52px;justify-content:center}.support-fab .lbl{display:none}
  #shell:not([hidden]) ~ .support-fab{bottom:calc(74px + env(safe-area-inset-bottom))}
  .support-panel{inset-inline:12px;bottom:12px;width:auto;max-height:78vh}
  #shell:not([hidden]) ~ .support-panel{bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media print{.support-fab,.support-panel{display:none!important}}

/* صفحة الانتقال للرابط القديم */
body.moved{display:grid;place-items:center;padding:24px}.moved-box{max-width:520px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.moved-box h1{margin:0;font-size:28px}.moved-box p{margin:0;color:var(--ink2);line-height:1.7}.moved-box .hero-brand{color:var(--accent);justify-content:center}.moved-box .hero-brand .mark{border-color:var(--accent)}.moved-box .hero-brand .mark::after{background:var(--accent)}
.btn-link.big{font-size:18px;padding:0 26px;min-height:50px;direction:ltr}