:root{
  --bg:#f3f1f8; --surface:#ffffff; --surface-2:#faf9fd; --line:#e7e3f1; --line-soft:#f0edf7;
  --ink:#191524; --ink-2:#6b6580; --ink-3:#9c96ae;
  --brand:#6d3bf5; --brand-2:#9b6bff; --brand-deep:#4d21c9; --brand-soft:#eee7ff; --on-brand:#ffffff;
  --mint:#0b9f6b; --mint-soft:#e2f6ee;
  --amber:#c97a10; --amber-soft:#fcefdb;
  --rose:#df1f45; --rose-soft:#fde7eb;
  --blue:#2563eb; --blue-soft:#e6eeff;
  --teal:#0e8f8a; --teal-soft:#def5f3;
  --stage-a:#efecf7; --stage-b:#e4dff2;
  --shadow-1:0 1px 2px rgba(25,21,36,.05), 0 6px 18px -10px rgba(25,21,36,.16);
  --shadow-2:0 10px 40px -12px rgba(25,21,36,.28);
  --sheet-scrim:rgba(20,16,32,.38);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0912; --surface:#171324; --surface-2:#1e1930; --line:#2b2440; --line-soft:#231d38;
    --ink:#f5f3fb; --ink-2:#a9a2c0; --ink-3:#7c7596;
    --brand:#a684ff; --brand-2:#c3a8ff; --brand-deep:#7c4dff; --brand-soft:#2a2046; --on-brand:#120c23;
    --mint:#3ddba0; --mint-soft:#133328;
    --amber:#f2b55c; --amber-soft:#3a2b14;
    --rose:#fb7185; --rose-soft:#3c1926;
    --blue:#7aa2ff; --blue-soft:#1b2440;
    --teal:#4ad4ce; --teal-soft:#0f3331;
    --stage-a:#0a0810; --stage-b:#141026;
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);
    --shadow-2:0 12px 44px -10px rgba(0,0,0,.7);
    --sheet-scrim:rgba(4,2,10,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0b0912; --surface:#171324; --surface-2:#1e1930; --line:#2b2440; --line-soft:#231d38;
  --ink:#f5f3fb; --ink-2:#a9a2c0; --ink-3:#7c7596;
  --brand:#a684ff; --brand-2:#c3a8ff; --brand-deep:#7c4dff; --brand-soft:#2a2046; --on-brand:#120c23;
  --mint:#3ddba0; --mint-soft:#133328;
  --amber:#f2b55c; --amber-soft:#3a2b14;
  --rose:#fb7185; --rose-soft:#3c1926;
  --blue:#7aa2ff; --blue-soft:#1b2440;
  --teal:#4ad4ce; --teal-soft:#0f3331;
  --stage-a:#0a0810; --stage-b:#141026;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);
  --shadow-2:0 12px 44px -10px rgba(0,0,0,.7);
  --sheet-scrim:rgba(4,2,10,.6);
}

html,body{height:100%}

/* أشرطة التمرير: مخفية داخل التطبيق، ورفيعة أنيقة على مستوى الصفحة */
.scroll,.sheet-body,.sub-body,.auth-body,.login-sheet,.chips,.pcar,.pick-row{scrollbar-width:none;-ms-overflow-style:none}
.scroll::-webkit-scrollbar,.sheet-body::-webkit-scrollbar,.sub-body::-webkit-scrollbar,
.auth-body::-webkit-scrollbar,.login-sheet::-webkit-scrollbar,.pcar::-webkit-scrollbar,
.pick-row::-webkit-scrollbar{width:0;height:0;display:none}
html{scrollbar-width:thin;scrollbar-color:rgba(130,120,160,.45) transparent}
html::-webkit-scrollbar{width:8px;height:8px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(130,120,160,.4);border-radius:8px;border:2px solid transparent;background-clip:content-box}
html::-webkit-scrollbar-thumb:hover{background:rgba(130,120,160,.7);background-clip:content-box}
body{
  margin:0;background:linear-gradient(170deg,var(--stage-a),var(--stage-b));color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums;font-family:"Readex Pro","IBM Plex Sans Arabic",sans-serif}

/* ===== stage + device ===== */
.stage{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px 16px 28px}
.phone{position:relative;width:390px;height:838px;flex:none;background:var(--bg);border-radius:52px;overflow:hidden;
  box-shadow:0 0 0 11px #100d1c, 0 0 0 13px #2b2740, var(--shadow-2)}
.notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:116px;height:32px;background:#100d1c;border-radius:18px;z-index:80}
.statusbar{position:absolute;inset-inline:0;top:0;height:52px;z-index:75;display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px 0;color:var(--ink);font-size:14px;font-weight:600;pointer-events:none;transition:color .3s}
.statusbar.on-dark{color:#fff}
.statusbar .sb-icons{display:flex;align-items:center;gap:5px}
.caption{max-width:400px;text-align:center;color:var(--ink-2);font-size:13px;line-height:1.75}
.caption b{color:var(--ink);font-weight:600}
.stage-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tool-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:var(--surface);color:var(--ink);
  font-size:13px;font-weight:600;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.tool-btn:hover{border-color:var(--brand);color:var(--brand)}

.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;z-index:10}

/* ===== onboarding ===== */
.ob{color:#fff;padding:0 0 calc(22px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));z-index:20;
  --ob-a:#3f18cc; --ob-b:#6d3bf5; --ob-c:#a077ff;
  background:linear-gradient(162deg,var(--ob-a) 0%,var(--ob-b) 54%,var(--ob-c) 100%);transition:background .65s ease}
.ob[data-slide="1"]{--ob-a:#2c1596;--ob-b:#5433e8;--ob-c:#8f66ff}
.ob[data-slide="2"]{--ob-a:#4f17b8;--ob-b:#7b3bf0;--ob-c:#b088ff}
.ob[data-slide="3"]{--ob-a:#241785;--ob-b:#5b2ee6;--ob-c:#9b6bff}
.ob-glow{position:absolute;border-radius:50%;filter:blur(52px);pointer-events:none}
.ob-glow.g1{width:240px;height:240px;background:#cbb0ff;opacity:.42;top:-70px;inset-inline-end:-70px}
.ob-glow.g2{width:280px;height:280px;background:#1a0a60;opacity:.5;bottom:40px;inset-inline-start:-110px}
.ob-top,.ob-stack,.ob-foot{position:relative;z-index:2}
.ob-top{display:flex;justify-content:space-between;align-items:center;padding:60px 22px 0;flex:none}
.ob-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.ob-mark{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);display:grid;place-items:center;
  font-family:"Readex Pro",sans-serif;font-size:15px;border:1px solid rgba(255,255,255,.26)}
.ob-skip{font-size:13px;color:rgba(255,255,255,.78);font-weight:600;padding:6px 10px;border-radius:10px}
.ob-stack{flex:1;position:relative}
.ob-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:0 28px;opacity:0;transform:translateY(16px);transition:opacity .45s, transform .45s;pointer-events:none}
.ob-slide.on{opacity:1;transform:none;pointer-events:auto}
.ob-art{width:218px;height:218px;flex:none;padding:24px;border-radius:40px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 26px 54px -20px rgba(8,2,34,.8);animation:floaty 6s ease-in-out infinite}
.ob-art text{direction:ltr;unicode-bidi:isolate}
@keyframes floaty{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
.ob-txt{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.ob-kicker{font-size:10.5px;font-weight:700;letter-spacing:1.4px;color:rgba(255,255,255,.88);padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.ob-title{font-family:"Readex Pro",sans-serif;font-size:26px;font-weight:600;margin:0;line-height:1.42;text-wrap:balance;letter-spacing:-.3px}
.ob-body{font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.82);margin:0;max-width:31ch}
.ob-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ob-chip{font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9)}
.ob-foot{flex:none;padding:0 26px;display:flex;flex-direction:column;gap:16px}
.ob-prog{display:flex;gap:6px}
.ob-prog i{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.24);position:relative;overflow:hidden}
.ob-prog i.done{background:rgba(255,255,255,.95)}
.ob-prog i.on::after{content:"";position:absolute;inset:0;background:#fff;border-radius:3px;transform-origin:right;animation:fillbar .5s ease forwards}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ob-row{display:flex;align-items:center;gap:10px}
.ob-btn{flex:1;padding:15px;border-radius:18px;background:#fff;color:#3f18cc;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 14px 32px rgba(8,2,34,.34)}
.ob-btn:active{transform:scale(.98)}
.ob-back{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);flex:none}
.ob-back[hidden]{display:none}

/* ===== login ===== */
/* ===== شاشة الدخول — بُنيت لتملأ الشاشة لا لتتركها فارغة ===== */
.login{background:var(--bg);z-index:18;padding:0;justify-content:flex-start}

/* الترويسة: شريط هوية واضح، والشعار عنصرها الرئيسي */
.login-hero{flex:none;position:relative;overflow:hidden;color:#fff;
  padding:46px 26px 50px;text-align:center;
  background:linear-gradient(158deg,#3b14c4 0%,#6d3bf5 54%,#a479ff 100%)}
.login-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 82% at 78% 6%,rgba(255,255,255,.22),transparent 58%)}
.login-hero > *{position:relative;z-index:2}
.login-mark{width:72px;height:72px;border-radius:24px;margin:0 auto 18px;
  background:#fff;color:var(--brand);display:grid;place-items:center;
  box-shadow:0 16px 34px -14px rgba(20,8,60,.6),inset 0 0 0 1px rgba(255,255,255,.9)}
.login-mark svg{width:40px;height:40px}
.login-hero h1{font-family:"Readex Pro",sans-serif;font-size:25px;font-weight:600;
  margin:0 0 6px;letter-spacing:-.4px}
.login-hero p{margin:0 auto;font-size:13px;color:rgba(255,255,255,.82);
  line-height:1.75;max-width:31ch}

/* الورقة: عمود يدفع التذييل لأسفل — هذا ما يمنع الفراغ الميت */
.login-sheet{flex:1;min-height:0;overflow-y:auto;position:relative;z-index:3;
  margin-top:-30px;background:var(--bg);border-radius:32px 32px 0 0;
  padding:26px 24px calc(18px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));
  display:flex;flex-direction:column;gap:0;
  box-shadow:0 -18px 40px rgba(20,10,50,.16)}
.login-grab{width:44px;height:4px;border-radius:99px;background:var(--line);
  margin:-8px auto 20px;flex:none}

.login-form{display:flex;flex-direction:column;gap:14px}

/* الحقول: عنوان صغير فوق، وحقل بارتفاع مريح للإصبع */
.field{display:flex;flex-direction:column;gap:7px}
.field > label{font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:.2px}
.in-wrap{display:flex;align-items:center;gap:11px;min-height:52px;padding:0 14px;
  border-radius:16px;background:var(--surface);border:1.5px solid var(--line);
  color:var(--ink-3);transition:border-color .18s,box-shadow .18s,background .18s}
.in-wrap:focus-within{border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 4px var(--brand-soft)}
.in-wrap > svg{flex:none;order:-1}          /* الأيقونة في بداية الحقل (يمين RTL) */
.in-wrap > button{order:2}                   /* زر العين في نهايته */
.in-wrap input{flex:1;border:0;background:none;color:var(--ink);font-size:15px;
  outline:none;min-width:0;padding:14px 0}
.in-wrap input::placeholder{color:var(--ink-3)}
.in-wrap input[type="email"],.in-wrap input[type="password"],.in-wrap input[type="tel"]{
  direction:ltr;text-align:start}
.in-wrap > button{flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:var(--ink-3);transition:background .15s,color .15s}
.in-wrap > button:active{background:var(--surface-2);color:var(--ink-2)}
.pfx{font-size:14px;font-weight:600;color:var(--ink-2);font-family:"Readex Pro",sans-serif;
  padding-inline-end:11px;border-inline-end:1.5px solid var(--line);direction:ltr}

/* «نسيت كلمة المرور؟» وحده في سطره — لا يزاحم جملة */
.login-row{display:flex;align-items:center;justify-content:flex-end;
  font-size:12.5px;color:var(--ink-2);margin-top:-4px}
.link{color:var(--brand);font-weight:700;font-size:12.5px}

.login-cta{min-height:54px;padding:15px;border-radius:17px;font-size:15.5px;font-weight:700;
  box-shadow:0 14px 30px -12px var(--brand);margin-top:4px}
.login-note{display:flex;gap:9px;align-items:flex-start;background:var(--brand-soft);
  color:var(--brand-deep);border-radius:14px;padding:12px 13px;font-size:12px;line-height:1.7}
.login-note svg{flex:none;width:15px;height:15px;margin-top:2px}

/* فاصل قبل الطريق الثاني */
.or-line{display:flex;align-items:center;gap:12px;color:var(--ink-3);
  font-size:11.5px;font-weight:600;margin:18px 0 14px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

.btn-outline{min-height:50px;border-radius:16px;font-size:14.5px;font-weight:700;
  background:var(--surface);color:var(--brand);border:1.5px solid var(--line);
  box-shadow:var(--shadow-1)}
.btn-outline:active{background:var(--brand-soft)}

/* التذييل يُدفع لأسفل الشاشة دائماً */
.login-foot{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:12px}
.reg-strip{display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:14px;font-size:13px;color:var(--ink-2);box-shadow:var(--shadow-1)}
.reg-line{text-align:center;font-size:12.5px;color:var(--ink-3)}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10.5px;color:var(--ink-3)}
.legal-note{text-align:center;font-size:10.5px;line-height:1.9;color:var(--ink-3)}
.legal-note button{color:var(--brand);font-weight:700;font-size:10.5px}

.otp-block{display:flex;flex-direction:column;gap:11px}
.otp-row{display:flex;gap:9px;direction:ltr;justify-content:center}
.otp-row input{width:100%;max-width:60px;height:58px;text-align:center;font-family:"Readex Pro",sans-serif;font-size:21px;
  border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);outline:none}
.otp-row input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.otp-meta{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
.divider{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:11.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.faceid{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.login-hint{text-align:center;font-size:11.5px;line-height:1.8;padding:11px;border-radius:14px;background:var(--brand-soft);color:var(--brand)}
.reg-line{text-align:center;font-size:12.5px;color:var(--ink-3)}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;color:var(--ink-3)}
.legal-note{text-align:center;font-size:10.5px;line-height:1.85;color:var(--ink-3)}
.legal-note button{color:var(--brand);font-weight:600;font-size:10.5px}
.auth-row{display:flex;gap:9px}
.auth-row > *{flex:1;min-width:0}
.apple-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 10px;border-radius:16px;
  background:#000;color:#fff;font-weight:600;font-size:13.5px;border:1px solid #000;white-space:nowrap}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .apple-btn{background:#fff;color:#000;border-color:#fff}
}
:root[data-theme="dark"] .apple-btn{background:#fff;color:#000;border-color:#fff}

/* ===== signup / auth ===== */
.auth-nav{flex:none;display:flex;align-items:center;gap:11px;padding:56px 20px 8px}
.back-btn{width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);flex:none}
.auth-title{font-family:"Readex Pro",sans-serif;font-size:19px;font-weight:600}
.auth-body{flex:1;min-height:0;overflow-y:auto;padding:8px 24px calc(24px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));
  display:flex;flex-direction:column;gap:13px}
.auth-body > *{flex:none}
.auth-lead{font-size:12.5px;color:var(--ink-2);line-height:1.8}
.f-label{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.slug-note{font-size:10.5px;color:var(--ink-3);direction:ltr;text-align:start;font-family:"Readex Pro",sans-serif}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:11.5px;color:var(--ink-2);line-height:1.8;text-align:start}
.consent button.link{display:inline}
.check{width:22px;height:22px;border-radius:7px;border:1.7px solid var(--line);background:var(--surface);
  display:grid;place-items:center;flex:none;color:transparent;margin-top:1px}
.check[aria-checked="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.policy-txt{font-size:12.5px;line-height:1.95;color:var(--ink-2)}
.policy-txt h4{margin:12px 0 4px;font-size:13px;color:var(--ink);font-weight:700}
.policy-txt ul{margin:4px 0;padding-inline-start:18px}
.danger .set-label{color:var(--rose)}
.warn-box{padding:12px 14px;border-radius:14px;background:var(--rose-soft);color:var(--rose);font-size:12px;line-height:1.8;font-weight:600}
.spinner{width:17px;height:17px;border-radius:50%;border:2.4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== home ===== */
.home-hero{position:relative;overflow:hidden;border-radius:22px;padding:15px 16px 13px;color:#fff;
  background:linear-gradient(145deg,var(--brand),var(--brand-deep));box-shadow:0 18px 36px -20px var(--brand)}
.home-hero > *{position:relative;z-index:2}
.hh-spark{position:absolute;inset-inline:0;bottom:0;height:74px;z-index:1;opacity:.55;pointer-events:none}
.hh-spark svg{width:100%;height:100%;display:block}
.hh-label{font-size:11.5px;color:rgba(255,255,255,.78);display:flex;align-items:center;justify-content:space-between;gap:8px}
.tag-glass{padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.16);font-size:10.5px;font-weight:700;color:#fff}
.hh-val{font-family:"Readex Pro",sans-serif;font-size:33px;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums;
  margin-top:5px;display:flex;align-items:baseline;gap:5px}
.hh-val .cur{font-size:.4em;font-weight:400;opacity:.8}
.hh-trend{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 9px;border-radius:8px;
  background:rgba(255,255,255,.18);font-size:11.5px;font-weight:600}
.hh-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:15px;border-top:1px solid rgba(255,255,255,.2);padding-top:11px}
.hh-stats div{text-align:center;border-inline-start:1px solid rgba(255,255,255,.16);padding:0 6px}
.hh-stats div:first-child{border-inline-start:0}
.hh-stats b{display:block;font-family:"Readex Pro",sans-serif;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.hh-stats span{font-size:10.5px;color:rgba(255,255,255,.74)}

.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border-radius:17px;
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1);font-size:10.5px;font-weight:600;color:var(--ink-2)}
.qa button:active{transform:scale(.96)}
.qa-ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:#fff}
.qa-ico svg{width:17px;height:17px}

.task-row{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line-soft);width:100%;text-align:start}
.task-row:last-child{border-bottom:0}
.task-ico{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none}
.task-ico svg{width:17px;height:17px}
.task-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.task-t{font-size:13.5px;font-weight:600}
.task-d{font-size:11px;color:var(--ink-3);margin-top:2px}
.count-pill{min-width:25px;height:25px;padding:0 7px;border-radius:9px;display:grid;place-items:center;
  font-family:"Readex Pro",sans-serif;font-size:12px;font-weight:700}

.pcar{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.pcar::-webkit-scrollbar{display:none}
.pmini{flex:none;width:136px;background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;
  box-shadow:var(--shadow-1);overflow:hidden;text-align:start;display:flex;flex-direction:column}
.pmini .p-media{aspect-ratio:1.4/1}
.pmini .p-media svg{width:38%;height:38%}
.pmini-b{padding:9px 10px 11px;display:flex;flex-direction:column;gap:5px}
.pmini-n{font-size:12px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.pmini-m{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px}
.pmini-m .s{color:var(--ink-3)}
.rank{position:absolute;top:8px;inset-inline-start:8px;width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.94);
  color:#191524;font-size:11px;font-weight:700;display:grid;place-items:center;font-family:"Readex Pro",sans-serif}

/* ===== reports ===== */
.rep-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-1);
  padding:15px 14px 10px;display:flex;flex-direction:column;gap:10px}
.rep-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rep-lbl{font-size:11.5px;color:var(--ink-3)}
.rep-big{font-family:"Readex Pro",sans-serif;font-size:27px;font-weight:600;letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;margin-top:3px}
.rep-big .cur{font-size:.44em;font-weight:400;color:var(--ink-3);margin-inline-start:4px}
.lchart svg{width:100%;height:auto;display:block}
.lchart .g{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.lchart .lbl{fill:var(--ink-3);font-size:10px;font-family:"IBM Plex Sans Arabic",sans-serif}
.lchart .line{fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.lchart .dot{fill:var(--surface);stroke:var(--brand);stroke-width:2.4}
.lchart .peak{fill:var(--ink);font-size:10.5px;font-weight:600;font-family:"Readex Pro",sans-serif;direction:ltr}

.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{background:var(--surface);border:1px solid var(--line-soft);border-radius:17px;box-shadow:var(--shadow-1);
  padding:12px 13px;display:flex;flex-direction:column;gap:4px}
.mini .l{font-size:11px;color:var(--ink-3)}
.mini .v{font-family:"Readex Pro",sans-serif;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.mini .v .cur{font-size:.55em;font-weight:400;color:var(--ink-3);margin-inline-start:3px}

.money .mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line-soft);font-size:13px}
.money .mrow:last-child{border-bottom:0}
.money .ml{color:var(--ink-2);display:flex;align-items:center;gap:8px}
.money .ml small{font-size:10.5px;color:var(--ink-3)}
.money .mv{font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.money .neg .mv{color:var(--rose)}
.money .net{background:var(--surface-2)}
.money .net .ml{color:var(--ink);font-weight:700}
.money .net .mv{color:var(--mint);font-size:15.5px}

.rank-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.rank-row:last-child{border-bottom:0}
.rank-n{width:24px;height:24px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;
  font-family:"Readex Pro",sans-serif;font-size:11.5px;font-weight:700;flex:none}
.rank-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rank-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-bar{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.rank-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.rank-end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rank-v{font-family:"Readex Pro",sans-serif;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rank-s{font-size:10.5px;color:var(--ink-3)}

.hours{display:flex;align-items:flex-end;gap:7px;height:96px}
.hours > div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%}
.hours .hb{width:100%;border-radius:7px;background:var(--brand-soft);min-height:5px}
.hours .hb.hot{background:var(--brand)}
.hours .hl{font-size:10px;color:var(--ink-3)}

/* ===== orders ===== */
.ord-hero{background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow-1);
  padding:14px;display:flex;flex-direction:column;gap:13px}
.ord-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ord-hero-num{display:flex;flex-direction:column;gap:4px}
.spark{width:116px;height:44px;flex:none}
.spark svg{width:100%;height:100%;display:block}
.ord-stack{display:flex;gap:3px;height:9px}
.ord-stack span{border-radius:5px;min-width:5px}
.ord-legend{display:flex;flex-wrap:wrap;gap:7px 13px}
.ord-legend span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2)}
.ord-legend i{width:7px;height:7px;border-radius:2px;display:block}
.ord-legend b{font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.day-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 6px 8px}
.day-head .d{font-size:13px;font-weight:700}
.day-head .m{font-size:11.5px;color:var(--ink-3)}
.ocards{display:flex;flex-direction:column;gap:10px}
.ocard{position:relative;background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;
  box-shadow:var(--shadow-1);overflow:hidden}
.ocard::before{content:"";position:absolute;inset-inline-start:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0;background:var(--st)}
.ocard-top{display:flex;align-items:center;gap:11px;padding:12px 14px 9px;width:100%;text-align:start}
.ocard-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ocard-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard-amt{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.ocard-items{display:flex;align-items:center;gap:7px;padding:0 14px 11px;font-size:11.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocard-items svg{flex:none;color:var(--ink-3)}
.ocard-foot{display:flex;align-items:center;gap:7px;padding:8px 12px;border-top:1px solid var(--line-soft);background:var(--surface-2)}
.ocard-city{flex:1;min-width:0;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-btn{padding:7px 12px;border-radius:10px;font-size:11.5px;font-weight:600;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2)}
.mini-btn:active{transform:scale(.96)}
.mini-btn.go{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip i.cdot{width:7px;height:7px;border-radius:50%;display:block}

/* ===== app shell ===== */
.app{background:var(--bg);z-index:15}
.nav{flex:none;padding:56px 20px 10px;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  border-bottom:1px solid transparent;transition:border-color .2s;z-index:20}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(180%) blur(20px)}
.nav-title{font-family:"Readex Pro",sans-serif;font-size:26px;font-weight:600;letter-spacing:-.4px;margin:0;line-height:1.3;transition:font-size .2s}
.nav.scrolled .nav-title{font-size:19px}
.nav-sub{font-size:12px;color:var(--ink-3);margin-top:3px}
.nav.scrolled .nav-sub{display:none}
.nav-actions{display:flex;gap:8px;align-items:center;padding-bottom:4px}
.icon-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);box-shadow:var(--shadow-1);position:relative}
.icon-btn:active{transform:scale(.94)}
.icon-btn .dot{position:absolute;top:6px;inset-inline-end:7px;width:8px;height:8px;border-radius:50%;background:var(--rose);border:2px solid var(--surface)}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.view{display:flex;flex-direction:column;gap:15px;padding:14px 16px 26px}
.view[hidden]{display:none}

.tabbar{flex:none;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:9px 6px calc(20px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);font-size:10.5px;font-weight:500;padding:2px 0;position:relative}
.tab svg{width:23px;height:23px;stroke-width:1.7}
.tab[aria-selected="true"]{color:var(--brand)}
.tab .badge{position:absolute;top:-2px;inset-inline-start:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--rose);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:"Readex Pro",sans-serif}

/* ===== shared blocks ===== */
.card{background:var(--surface);border-radius:20px;border:1px solid var(--line-soft);box-shadow:var(--shadow-1)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 0}
.sec-title{font-size:15px;font-weight:700;margin:0}
.sec-note{font-size:11.5px;color:var(--ink-3)}
.sec-link{font-size:12.5px;color:var(--brand);font-weight:600}
.muted{color:var(--ink-2)}
.tiny{font-size:11.5px}
.group-label{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.6px;padding:6px 6px 0}

/* summary strip — same object on every tab */
.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line-soft);
  border-radius:18px;box-shadow:var(--shadow-1);overflow:hidden}
.strip div{padding:11px 8px;text-align:center;border-inline-start:1px solid var(--line-soft)}
.strip div:first-child{border-inline-start:0}
.strip b{display:block;font-family:"Readex Pro",sans-serif;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35}
.strip span{font-size:11px;color:var(--ink-3)}
.strip .hot{color:var(--amber)}
.strip .bad{color:var(--rose)}
.strip .good{color:var(--mint)}

/* store strip */
.store-strip{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:18px;background:var(--surface);
  border:1px solid var(--line-soft);box-shadow:var(--shadow-1)}
.store-logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  display:grid;place-items:center;font-family:"Readex Pro",sans-serif;font-weight:600;font-size:17px;flex:none}
.store-meta{flex:1;min-width:0}
.store-name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:5px}
.store-url{font-size:11.5px;color:var(--ink-3);direction:ltr;text-align:right}
.verified{width:14px;height:14px;color:var(--blue);flex:none}
.switch{width:46px;height:28px;border-radius:15px;background:var(--line);position:relative;transition:background .22s;flex:none}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .22s}
.switch[aria-checked="true"]{background:var(--mint)}
.switch[aria-checked="true"]::after{transform:translateX(-18px)}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{padding:13px 14px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;gap:5px}
.kpi.lead{grid-column:1 / -1;background:linear-gradient(145deg,var(--brand),var(--brand-deep));border-color:transparent;color:#fff}
.kpi-label{font-size:11.5px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:5px}
.kpi.lead .kpi-label{color:rgba(255,255,255,.78)}
.kpi-val{font-family:"Readex Pro",sans-serif;font-size:21px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi.lead .kpi-val{font-size:32px;color:#fff}
.kpi-val .cur{font-size:.55em;font-weight:400;margin-inline-start:3px;opacity:.75}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:7px;width:fit-content}
.trend.up{background:var(--mint-soft);color:var(--mint)}
.trend.down{background:var(--rose-soft);color:var(--rose)}
.trend.need{background:var(--amber-soft);color:var(--amber)}
.kpi.lead .trend.up{background:rgba(255,255,255,.18);color:#fff}

/* segmented */
.segmented{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-soft)}
.segmented button{flex:1;padding:7px 4px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.18s}
.segmented button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

/* chart */
.chart-card{padding:15px 14px 10px;display:flex;flex-direction:column;gap:12px}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.chart svg{width:100%;height:auto;display:block}
.chart .grid-line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .axis-lbl{fill:var(--ink-3);font-size:10px;font-family:"IBM Plex Sans Arabic",sans-serif}
.chart .val-lbl{fill:var(--ink);font-size:10.5px;font-weight:600;font-family:"Readex Pro",sans-serif}
.chart .bar{fill:var(--brand-soft)}
.chart .bar.peak{fill:var(--brand)}

/* rows */
.list{display:flex;flex-direction:column;background:var(--surface);border-radius:20px;border:1px solid var(--line-soft);
  box-shadow:var(--shadow-1);overflow:hidden}
.row{display:flex;align-items:center;gap:11px;padding:12px 14px;text-align:start;width:100%;border-bottom:1px solid var(--line-soft);transition:background .15s}
.row:last-child{border-bottom:0}
.row:active{background:var(--surface-2)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-sub{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-end{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.amount{font-family:"Readex Pro",sans-serif;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.chev{color:var(--ink-3);flex:none;width:16px;height:16px}
.av{width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;font-family:"Readex Pro",sans-serif;
  font-size:14px;font-weight:500;background:var(--surface-2);color:var(--ink-2)}

.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.st-pending{background:var(--amber-soft);color:var(--amber)}
.st-processing{background:var(--brand-soft);color:var(--brand)}
.st-shipped{background:var(--blue-soft);color:var(--blue)}
.st-delivered{background:var(--mint-soft);color:var(--mint)}
.st-cancelled{background:var(--rose-soft);color:var(--rose)}

/* chips + search */
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.chip[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .cnt{font-family:"Readex Pro",sans-serif;font-size:11px;opacity:.7}
.search{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink-3)}
.search input{flex:1;border:0;background:none;color:var(--ink);font-size:13.5px;outline:none;min-width:0}
.day-label{font-size:11.5px;font-weight:700;color:var(--ink-3);padding:10px 6px 2px;display:flex;align-items:center;gap:8px}
.day-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ===== products ===== */
.p-toolbar{display:flex;gap:8px;align-items:center}
.p-toolbar .search{flex:1}
.view-toggle{width:42px;height:40px;border-radius:13px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);flex:none}
.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.p-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:19px;box-shadow:var(--shadow-1);overflow:hidden;
  display:flex;flex-direction:column;text-align:start;transition:transform .14s}
.p-card:active{transform:scale(.98)}
.p-media{position:relative;aspect-ratio:1/1;max-width:100%;display:grid;place-items:center}
.p-media svg{width:44%;height:44%;color:#fff;opacity:.92}
.p-flag{position:absolute;top:8px;inset-inline-start:8px;padding:3px 8px;border-radius:7px;font-size:10px;font-weight:700;background:rgba(255,255,255,.92);color:var(--ink)}
.p-flag.low{background:var(--amber);color:#fff}
.p-flag.out{background:var(--rose);color:#fff}
.p-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-name{font-size:13px;font-weight:600;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-cat{font-size:10.5px;color:var(--ink-3)}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.p-price{font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.p-price .cur{font-size:.68em;font-weight:400;color:var(--ink-3);margin-inline-start:2px}
.p-stock{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--ink-2)}
.p-stock.low{background:var(--amber-soft);color:var(--amber)}
.p-stock.out{background:var(--rose-soft);color:var(--rose)}
.p-thumb{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center}
.p-thumb svg{width:22px;height:22px;color:#fff}
.stock-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;width:72px}
.stock-bar span{display:block;height:100%;border-radius:2px;background:var(--mint)}
.stock-bar.low span{background:var(--amber)}
.stock-bar.out span{background:var(--rose)}
.empty{padding:34px 16px;text-align:center;color:var(--ink-3);font-size:12px;grid-column:1/-1}

/* banner */
.banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--amber-soft);color:var(--amber);
  font-size:12.5px;font-weight:600;line-height:1.5;text-align:start;width:100%}
.banner svg{flex:none}

/* settings rows */
.set-row{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line-soft);width:100%;text-align:start}
.set-row:last-child{border-bottom:0}
.set-ico{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.set-ico svg{width:16px;height:16px}
.set-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.set-label{font-size:13.5px;font-weight:600}
.set-desc{font-size:11px;color:var(--ink-3)}
.set-val{font-size:12px;color:var(--ink-3);font-family:"Readex Pro",sans-serif;flex:none}
.tag-on{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--mint-soft);color:var(--mint)}
.tag-off{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--surface-2);color:var(--ink-3)}
.tag-new{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--brand-soft);color:var(--brand)}

/* bars */
.bar-row{display:flex;flex-direction:column;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.bar-row:last-child{border-bottom:0}
.bar-head{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600}
.bar-track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--brand-2),var(--brand))}

/* sheet */
.scrim{position:absolute;inset:0;background:var(--sheet-scrim);opacity:0;pointer-events:none;transition:opacity .28s;z-index:50;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;inset-inline:0;bottom:0;z-index:60;max-height:88%;background:var(--surface);border-radius:26px 26px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.24);transform:translateY(102%);transition:transform .34s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow:hidden}
.sheet.on{transform:translateY(0)}
.sheet-grab{width:38px;height:5px;border-radius:3px;background:var(--line);margin:9px auto 0;flex:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 10px;border-bottom:1px solid var(--line-soft);flex:none}
.sheet-title{font-family:"Readex Pro",sans-serif;font-size:17px;font-weight:600;margin:0}
.sheet-body{overflow-y:auto;padding:14px 18px calc(20px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));display:flex;flex-direction:column;gap:14px}
.close-x{width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;flex:none}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:6px 0}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.kv.total{border-top:1px dashed var(--line);margin-top:4px;padding-top:10px;font-size:15px}
.kv.total dd{font-family:"Readex Pro",sans-serif;color:var(--brand)}
.item-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.item-row:last-child{border-bottom:0}
.qty-badge{width:26px;height:26px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;
  font-size:12px;font-weight:700;font-family:"Readex Pro",sans-serif;flex:none}
.btn-row{display:flex;gap:9px}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:14px;font-size:13.5px;font-weight:600;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.btn-mint{background:var(--mint-soft);color:var(--mint)}
.btn-rose{background:var(--rose-soft);color:var(--rose)}
.status-picker{display:flex;flex-wrap:wrap;gap:7px}
.status-picker button{padding:8px 13px;border-radius:11px;font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.status-picker button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ===== sub screen (العملاء وغيرها) ===== */
.sub{background:var(--bg);z-index:25}
.sub-head{flex:none;display:flex;align-items:center;gap:11px;padding:56px 16px 10px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(18px)}
.sub-title{font-family:"Readex Pro",sans-serif;font-size:19px;font-weight:600;flex:1;min-width:0}
.sub-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px calc(24px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));
  display:flex;flex-direction:column;gap:14px}
.sub-body > *{flex:none}

/* عملاء */
.cust-av{width:40px;height:40px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;
  font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:600}
.vip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--amber-soft);color:var(--amber)}

/* منشئ الفاتورة */
.pick-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pick-row::-webkit-scrollbar{display:none}
.pick{flex:none;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);font-size:12px;font-weight:600;white-space:nowrap}
.pick b{font-family:"Readex Pro",sans-serif;font-weight:600;color:var(--ink-3);font-size:11px}
.dr-item{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.dr-item:last-child{border-bottom:0}
.dr-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-qty{display:flex;align-items:center;gap:8px;flex:none}
.dr-qty button{width:28px;height:28px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:16px;font-weight:600}
.dr-qty span{min-width:18px;text-align:center;font-family:"Readex Pro",sans-serif;font-size:13px}
.dr-line{font-family:"Readex Pro",sans-serif;font-size:13px;font-weight:600;min-width:58px;text-align:end}
.dr-total{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;
  background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:15px}
.dr-total span:last-child{font-family:"Readex Pro",sans-serif}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* رافع صورة المنتج */
.photo-pick{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1.5px dashed var(--line);
  background:var(--surface-2);width:100%;text-align:start}
.photo-prev{width:56px;height:56px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;background:var(--line)}
.photo-prev svg{width:24px;height:24px}
.photo-t{flex:1;min-width:0}
.photo-t b{font-size:13px;font-weight:600;display:block}
.photo-t small{font-size:11px;color:var(--ink-3)}

/* ===== invoice ===== */
.invoice{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:15px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  border-bottom:1px dashed var(--line);padding-bottom:12px}
.inv-store{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.inv-meta{font-size:10.5px;color:var(--ink-3);line-height:1.9;margin-top:4px}
.inv-no{text-align:end;font-size:10.5px;color:var(--ink-3);line-height:1.9}
.inv-no b{display:block;font-family:"Readex Pro",sans-serif;font-size:14px;color:var(--ink)}
.inv-to{padding:11px 0;border-bottom:1px dashed var(--line);font-size:12px;line-height:1.9}
.inv-to span{color:var(--ink-3)}
.inv-tbl{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:10px}
.inv-tbl th{text-align:start;color:var(--ink-3);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line)}
.inv-tbl td{padding:8px 4px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.inv-tbl .n{font-variant-numeric:tabular-nums;font-family:"Readex Pro",sans-serif;white-space:nowrap}
.inv-tot{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0}
.inv-tot span:last-child{font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums}
.inv-tot.big{font-size:15px;font-weight:700;border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
.inv-foot{display:flex;align-items:center;gap:11px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line)}
.inv-foot .t{flex:1;font-size:10px;color:var(--ink-3);line-height:1.8}
.qr-box{width:64px;height:64px;flex:none;background:#fff;border-radius:8px;padding:4px}
.qr-box svg{width:100%;height:100%;display:block}

@media print{
  body *{visibility:hidden !important}
  #invoiceDoc, #invoiceDoc *{visibility:visible !important}
  #invoiceDoc{position:fixed;inset:0;margin:0;padding:22px;border:0;border-radius:0;
    background:#fff;color:#111;max-height:none;overflow:visible;box-shadow:none;width:100%}
  #invoiceDoc .inv-meta,#invoiceDoc .inv-no,#invoiceDoc .inv-to span,#invoiceDoc .inv-foot .t{color:#555}
  #invoiceDoc .inv-tbl th{color:#555;border-bottom-color:#ccc}
  #invoiceDoc .inv-tbl td{border-bottom-color:#eee}
  #invoiceDoc .inv-head,#invoiceDoc .inv-to,#invoiceDoc .inv-foot,#invoiceDoc .inv-tot.big{border-color:#ccc}
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--ink-2);font-weight:600}
.field > input,.field > .f-row input{padding:11px 13px;border-radius:13px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:14px;font-family:"Readex Pro",sans-serif}
/* داخل .in-wrap الحقل شفاف — الإطار على الغلاف لا على الحقل */
.in-wrap input{padding:14px 0!important;border:0!important;background:none!important;border-radius:0!important}
.field input.txt{font-family:inherit}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:38px;height:38px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:19px;font-weight:600;display:grid;place-items:center}
.stepper input{flex:1;text-align:center}
.pay-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.pay-row:last-child{border-bottom:0}
.pay-logo{width:44px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:700;flex:none;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);letter-spacing:.3px}
.pay-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pay-name{font-size:13.5px;font-weight:600}
.pay-fee{font-size:11px;color:var(--ink-3);margin-top:2px}

/* push + toast */
.push-note{position:absolute;top:calc(8px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)));inset-inline:12px;z-index:70;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(180%) blur(22px);border:1px solid var(--line);
  border-radius:20px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;box-shadow:0 12px 34px rgba(0,0,0,.26);
  /* الإخفاء بالحالة لا بالمسافة: translateY وحده يترك طرف الشريط يطلع
     من أعلى الشاشة لما تُضاف إزاحة المنطقة الآمنة. */
  transform:translateY(-150%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .45s cubic-bezier(.32,.72,0,1),opacity .3s,visibility .3s;cursor:pointer}
.push-note.on{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.push-app{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,var(--brand),var(--brand-2));display:grid;place-items:center;
  color:#fff;flex:none;font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:600}
.push-txt{flex:1;min-width:0}
.push-title{font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;gap:8px}
.push-title span{font-weight:400;color:var(--ink-3);font-size:11px}
.push-body{font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.toast{position:absolute;bottom:106px;inset-inline:0;margin-inline:auto;width:fit-content;max-width:78%;z-index:65;background:var(--ink);
  color:var(--bg);padding:10px 18px;border-radius:14px;font-size:12.5px;font-weight:600;opacity:0;transform:translateY(10px);
  transition:.26s;pointer-events:none;box-shadow:var(--shadow-2);text-align:center}
.toast.on{opacity:1;transform:translateY(0)}
.demo-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;background:var(--brand-soft);color:var(--brand);font-size:10.5px;font-weight:700}

@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}
@media (max-width:480px){
  .stage{padding:0;gap:0;display:block;height:100%}
  .phone{width:100%;height:100%;border-radius:0;box-shadow:none}
  .notch,.statusbar{display:none}
  .nav{padding-top:calc(14px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
  .ob-top{padding-top:calc(20px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
  .caption,.stage-tools{display:none}
}

/* ===== تعديلات التطبيق الحقيقي ===== */
[hidden]{display:none!important}
img{max-width:100%}
*{-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg)}
.stage{padding:0;gap:0;display:block;height:100%;min-height:0}
.phone{position:relative;width:100%;height:100%;border-radius:0;box-shadow:none;overflow:hidden}
.notch,.statusbar,.caption,.stage-tools{display:none!important}
.nav{padding-top:calc(16px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
.sub-head{padding-top:calc(16px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
.ob-top{padding-top:calc(22px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
.login-hero{padding-top:calc(30px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
.auth-nav{padding-top:calc(18px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px)))}
.auth-body > .btn, .sub-body > .btn, .login-sheet > .btn{flex:0 0 auto}
.auth-body .login-cta{padding:15px}


/* هياكل تحميل */
.sk{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line-soft) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:12px;display:block}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-card{height:150px;border-radius:22px;margin-bottom:12px}
.sk-row{height:64px;border-radius:16px;margin-bottom:10px}
.center-note{padding:40px 18px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.9}
.retry-btn{margin-top:12px;padding:10px 18px;border-radius:12px;background:var(--brand);color:var(--on-brand);font-size:13px;font-weight:600}
.offline-bar{position:absolute;inset-inline:0;top:0;z-index:72;background:var(--amber);color:#3a2b14;font-size:12px;
  font-weight:700;text-align:center;padding:calc(6px + max(env(safe-area-inset-top,0px), var(--jrh-sat,0px))) 8px 6px;transform:translateY(-100%);transition:transform .3s}
.offline-bar.on{transform:translateY(0)}
.pull{position:absolute;inset-inline:0;top:0;height:0;display:grid;place-items:center;color:var(--ink-3);overflow:hidden;transition:height .2s}
.pull.on{height:46px}
.spin-sm{width:18px;height:18px;border-radius:50%;border:2.2px solid var(--line);border-top-color:var(--brand);animation:spin .7s linear infinite}

/* ---------- شريط الجولة التجريبية ---------- */
/* تحت الحاجب (50) والورقة (60) حتى لا يغطّي أزرارهما */
#demoBar{position:absolute;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;
  justify-content:space-between;gap:10px;
  padding:9px 16px calc(9px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)));
  background:var(--ink,#191524);color:#fff;font-size:12.5px;font-weight:600;
  box-shadow:0 -6px 18px rgba(0,0,0,.18)}
#demoBar button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:9px;
  padding:6px 14px;font:inherit;cursor:pointer}
#demoBar button:active{background:rgba(255,255,255,.28)}
html.has-demo .tabbar{padding-bottom:calc(20px + max(env(safe-area-inset-bottom,0px), var(--jrh-sab,0px)) + 40px)}

/* ---------- زر إغلاق شريط التنبيه ---------- */
#pushClose{flex:none;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface-2);color:var(--ink-3);display:grid;place-items:center;font:inherit;
  font-size:15px;line-height:1;padding:0}
#pushClose:active{background:var(--line)}

/* ---------- القائمة العلوية على الجوال ----------
   المشاكل: العنوان ٢٦px يلتف مع أسماء المتاجر الطويلة، والتاريخ سطر
   طويل بلا قصّ، والمحاذاة flex-end تترك فراغاً بين العنوان والأزرار،
   وأهداف اللمس ٣٦px أقل من الحد الموصى به (٤٤px). */
.nav{
  align-items:center;
  padding-inline:18px;
  padding-bottom:12px;
  gap:10px;
}
.nav > div:first-child{flex:1;min-width:0}
.nav-title{
  font-size:21.5px;
  line-height:1.28;
  letter-spacing:-.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-sub{
  font-size:11.5px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.1px;
}
.nav-actions{gap:9px;padding-bottom:0;flex:none}
.icon-btn{
  width:40px;height:40px;
  background:var(--surface);
  border:1px solid var(--line-soft,var(--line));
  box-shadow:0 1px 3px rgba(25,21,36,.06);
}
.icon-btn svg{width:18px;height:18px}
.icon-btn .dot{top:8px;inset-inline-end:9px;width:7px;height:7px}
/* الحالة المصغّرة عند النزول: سطر واحد نظيف */
.nav.scrolled{padding-bottom:10px}
.nav.scrolled .nav-title{font-size:17px;letter-spacing:-.3px}
.nav.scrolled .icon-btn{width:36px;height:36px;box-shadow:none}
.nav.scrolled .icon-btn svg{width:17px;height:17px}

/* ==========================================================
   مركز الإشعارات والتنبيهات التحفيزية
   ========================================================== */
/* الجرس: النقطة كانت ظاهرة دائماً — الآن تظهر فقط إذا فيه غير مقروء،
   وتتحوّل شارة برقم إذا كان العدد أكثر من واحد. */
.icon-btn .dot{display:none}
.icon-btn .dot.on{display:grid}
.icon-btn .dot.count{
  place-items:center;top:3px;inset-inline-end:3px;width:auto;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;font-size:10px;font-weight:700;line-height:1;
  color:#fff;background:var(--rose);border:2px solid var(--surface);
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif
}

/* بطاقة الحالة: تظهر فقط إذا فيه إذن ناقص */
.nperm{
  display:flex;flex-direction:column;gap:7px;
  padding:14px 15px;margin:2px 0 12px;border-radius:17px;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)
}
.nperm-t{font-size:14.5px;font-weight:700;color:var(--ink)}
.nperm-b{font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.nperm .btn{margin-top:4px}

/* شريط الجدولة القادمة */
.nsched{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;border-radius:17px;
  background:var(--surface);border:1px solid var(--line)
}
.nsched-i{
  flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
  background:var(--brand-soft);color:var(--brand)
}
.nsched-i svg{width:18px;height:18px}
.nsched > span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nsched b{font-size:13.5px;font-weight:700;color:var(--ink)}
.nsched em{font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.6}
.nsched-b{
  flex:none;padding:7px 13px;border:0;border-radius:11px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;
  background:var(--brand);color:#fff
}

/* قائمة الإشعارات */
.nlist{display:flex;flex-direction:column;gap:8px}
.nrow{
  display:flex;align-items:flex-start;gap:11px;width:100%;
  padding:13px 14px;border-radius:16px;cursor:pointer;text-align:start;
  background:var(--surface);border:1px solid var(--line);font:inherit;color:inherit;
  transition:transform .12s ease
}
.nrow:active{transform:scale(.985)}
.nrow.unread{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 18%,transparent)}
.ndot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.nrow:not(.unread) .ndot{opacity:.4}
.nmain{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.nhead{display:flex;align-items:baseline;gap:8px}
.nhead b{font-size:14px;font-weight:700;color:var(--ink);flex:1;min-width:0}
.nhead em{flex:none;font-style:normal;font-size:11px;color:var(--ink-3)}
.nbody{font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.ntag{font-size:10.5px;font-weight:700;letter-spacing:.2px;padding-top:2px}
.nlink{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:12px;color:var(--brand);font-weight:700}

/* اختيار عدد التنبيهات اليومية */
.npicks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.npick{
  display:flex;flex-direction:column;gap:3px;align-items:center;
  padding:12px 6px;border-radius:15px;cursor:pointer;font:inherit;
  background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink-2)
}
.npick b{font-size:14px;font-weight:700;color:var(--ink)}
.npick em{font-style:normal;font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.5}
.npick.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.npick.on b{color:var(--brand)}

/* ==========================================================
   صور المنتجات: الرافع والعرض
   ========================================================== */
/* الصورة تغطّي أيقونة القسم؛ لو فشل تحميلها حذفت نفسها فظهرت الأيقونة */
.p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.p-media{position:relative;overflow:hidden}
.p-thumb{position:relative;overflow:hidden}
.pmini .p-media{overflow:hidden}

/* ===== رافع الصورة ===== */
.imgpick{display:flex;flex-direction:column;gap:9px}
/* مربّع كبطاقة المنتج في المتجر، والصورة cover كما ستُعرض هناك —
   فما يوافق عليه التاجر هو ما يراه عميله، لا تكوين يُقتطع بعدها. */
.imgpick-box{
  position:relative;width:100%;aspect-ratio:1/1;max-height:320px;overflow:hidden;cursor:pointer;
  display:grid;place-items:center;padding:0;font:inherit;color:inherit;
  border:1.5px dashed var(--line);border-radius:18px;background:var(--surface-2);
  transition:border-color .15s ease,background .15s ease
}
.imgpick-box:active{transform:scale(.995)}
.imgpick.has .imgpick-box{border-style:solid;border-color:var(--line);background:var(--surface-2)}
.imgpick-ph{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;text-align:center}
.imgpick-ph svg{width:30px;height:30px;color:var(--brand)}
.imgpick-ph b{font-size:13.5px;font-weight:700;color:var(--ink)}
.imgpick-ph em{font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.6;max-width:26ch}
.imgpick.has .imgpick-ph{display:none}
#imgPrev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.imgpick.has #imgPrev{display:block}
.imgpick-busy{
  position:absolute;inset:0;display:none;place-items:center;
  background:color-mix(in srgb,var(--surface) 78%,transparent)
}
.imgpick.busy .imgpick-busy{display:grid}
.imgpick-row{display:none;gap:8px}
.imgpick.has .imgpick-row{display:flex}
.imgpick-a{
  flex:1;padding:9px 10px;border-radius:12px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:700;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2)
}
.imgpick-a.del{flex:0 0 auto;padding:9px 16px;color:var(--rose);border-color:var(--rose-soft)}
.imgpick-note{font-size:11.5px;color:var(--ink-3);min-height:15px;line-height:1.5}
.imgpick-note.bad{color:var(--rose)}

/* ==========================================================
   الرئيسية — النسخة المطوّرة
   ========================================================== */
/* حالة المتجر: المفتاح وحده كان مبهماً — ما يفتح ويغلق بالضبط؟ */
.store-state{display:flex;align-items:center;gap:8px;flex:none}
.store-state-t{
  font-size:11.5px;font-weight:700;color:var(--mint);
  padding:3px 8px;border-radius:8px;background:var(--mint-soft);white-space:nowrap
}
.store-state-t.off{color:var(--rose);background:var(--rose-soft)}

/* لا شيء يحتاج انتباهاً: شريط نحيف بدل بطاقة فراغ بعنوان */
.all-clear{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px;border-radius:15px;
  background:var(--mint-soft);color:var(--ink-2);font-size:12.5px;line-height:1.6
}
.all-clear svg{flex:none;width:17px;height:17px;color:var(--mint)}

/* بطاقة مبيعات الأسبوع */
.chart-sum{margin-top:4px;font-size:12px;color:var(--ink-2)}
.chart-sum b{font-family:"Readex Pro",sans-serif;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.chart-chip{
  flex:none;display:inline-flex;align-items:center;gap:3px;
  padding:5px 9px;border-radius:10px;font-size:11.5px;font-weight:700;
  font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums
}
.chart-chip svg{width:11px;height:11px}
.chart-chip.up{color:var(--mint);background:var(--mint-soft)}
.chart-chip.down{color:var(--rose);background:var(--rose-soft)}
.chart-foot{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  margin-top:10px;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-3);line-height:1.6
}
.chart-foot b{color:var(--ink-2);font-weight:700}
.chart-foot b.num{font-family:"Readex Pro",sans-serif;font-weight:600;font-variant-numeric:tabular-nums}

/* ==========================================================
   الكوبونات · الهدف · الفاتورة · كلمة المرور
   ========================================================== */

/* ===== هدف المبيعات داخل بطاقة اليوم ===== */
.hh-goal{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.hh-bar{
  display:flex;flex-direction:column;gap:6px;width:100%;
  padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:start
}
.hh-bar.second{padding-top:9px;border-top:1px solid rgba(255,255,255,.16)}
.hh-bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11.5px}
.hh-bar-top > span:first-child{color:rgba(255,255,255,.78)}
.hh-bar-top .num{font-family:"Readex Pro",sans-serif;font-weight:600;font-variant-numeric:tabular-nums}
.hh-bar-track{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.hh-bar-track i{display:block;height:100%;border-radius:4px;background:#fff;transition:width .5s ease}
.hh-bar-note{font-size:10.5px;color:rgba(255,255,255,.74)}
.hh-goal-add{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:14px;
  padding:10px;border-radius:13px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  color:#fff;background:rgba(255,255,255,.16);border:1px dashed rgba(255,255,255,.4)
}
.hh-goal-add svg{width:16px;height:16px}
.gl-quick{display:flex;flex-direction:column;gap:7px}

/* ===== الكوبونات ===== */
.cp-note{
  display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border-radius:16px;
  background:var(--rose-soft);font-size:12px;line-height:1.75;color:var(--ink-2)
}
.cp-note svg{flex:none;width:19px;height:19px;color:var(--rose);margin-top:1px}
.cp-list{display:flex;flex-direction:column;gap:9px}
.cp{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);transition:opacity .15s ease
}
.cp.off{opacity:.55}
.cp-code{display:flex;align-items:center;gap:5px;flex:none}
.cp-code b{
  font-family:"Readex Pro",sans-serif;font-size:14px;font-weight:600;letter-spacing:.6px;
  padding:5px 9px;border-radius:9px;background:var(--brand-soft);color:var(--brand);direction:ltr
}
.cp-copy{
  display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:9px;cursor:pointer;
  background:none;color:var(--ink-3)
}
.cp-copy svg{width:15px;height:15px}
.cp-mid{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cp-val{font-size:14px;font-weight:700;color:var(--ink)}
.cp-kind{font-size:11px;color:var(--ink-3)}
.cp-end{display:flex;align-items:center;gap:6px;flex:none}
.cp-del{
  display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:10px;cursor:pointer;
  background:none;color:var(--ink-3)
}
.cp-del svg{width:16px;height:16px}
.cp-del:active{color:var(--rose)}

/* لاحقة داخل الحقل (٪ أو ر.س) */
.in-suffix{flex:none;font-size:12.5px;font-weight:700;color:var(--ink-3);padding-inline-start:4px}

/* ===== الفاتورة ===== */
.inv-step{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--ink);padding-top:4px
}
.inv-n{
  display:grid;place-items:center;width:21px;height:21px;border-radius:7px;flex:none;
  background:var(--brand);color:#fff;font-size:11px;font-family:"Readex Pro",sans-serif
}
.inv-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.inv-opt{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 8px;border-radius:15px;cursor:pointer;font:inherit;text-align:center;
  background:var(--surface-2);border:1.5px solid var(--line);color:var(--ink-2)
}
.inv-opt svg{width:22px;height:22px;color:var(--brand);margin-bottom:2px}
.inv-opt b{font-size:13px;font-weight:700;color:var(--ink)}
.inv-opt em{font-style:normal;font-size:11px;color:var(--ink-3)}
.inv-opt:active{border-color:var(--brand);background:var(--brand-soft)}
.inv-cust{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:15px;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 18%,transparent)
}
.inv-cust-m{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.inv-cust-m b{font-size:13.5px;font-weight:700}
.inv-cust-m span{font-size:11.5px;color:var(--ink-3);direction:ltr;text-align:start}
.inv-x{
  display:grid;place-items:center;width:28px;height:28px;flex:none;border:0;border-radius:9px;
  cursor:pointer;background:rgba(0,0,0,.06);color:var(--ink-2)
}
.inv-x svg{width:14px;height:14px}
.inv-search{margin-bottom:-2px}

/* بطاقات اختيار المنتج: صورة + اسم + سعر + عدد المضاف */
.pick{position:relative}
.pick-m{
  position:relative;flex:none;width:26px;height:26px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;background:var(--brand);color:#fff
}
.pick-m svg{width:15px;height:15px}
.pick-m .p-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick-t{max-width:13ch;overflow:hidden;text-overflow:ellipsis}
.pick.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.pick.on b{color:var(--brand)}
.pick-q{
  display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:7px;
  background:var(--brand);color:#fff;font-size:10.5px;font-family:"Readex Pro",sans-serif
}
.pick-new{border-style:dashed;color:var(--brand);border-color:var(--brand);background:var(--surface)}
.pick-new svg{width:15px;height:15px}

/* الإجمالي: صار سطرين — تفصيل فوق والإجمالي تحت */
.dr-total{flex-direction:column;align-items:stretch;gap:7px}
.dr-sub{font-size:11.5px;font-weight:600;color:var(--ink-2);opacity:.85}
.dr-t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dr-t .num{font-family:"Readex Pro",sans-serif}

/* ===== قوة كلمة المرور ===== */
.pw-meter{display:flex;gap:5px;margin-top:8px}
.pw-meter i{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .2s ease}
.pw-meter.s1 i.on{background:var(--rose)}
.pw-meter.s2 i.on{background:var(--amber)}
.pw-meter.s3 i.on{background:var(--mint)}
.pw-hint{font-size:11px;color:var(--ink-3);line-height:1.6;margin-top:6px}

/* صفّ اختيار المنتجات في الفاتورة:
   overflow-x:auto يجعل الصندوق حاوية تمرير في المحورين (لا يمكن أن يكون
   محور visible والآخر auto)، فينهار ارتفاع الصف عند إعادة رسم محتواه
   وتُسحق البطاقات من ٤٠ إلى ١٦ بكسل. نثبّت الارتفاع ونلغي التمدّد
   بدل الاعتماد على حساب ضمني هشّ. */
.pick-row{align-items:center;min-height:44px}
.pick{min-height:40px}

/* ==========================================================
   بطاقات المنتجات — نغمة القسم بدل قوس قزح عشوائي
   ==========================================================
   الخلفية صارت درجة ناعمة واللون يأتي مضمّناً من نغمة القسم،
   فأيقونة البديل تُرسم بلون القسم لا بالأبيض، وتصغر قليلاً
   حتى لا تنافس صورة المنتج الحقيقية لمّا توجد. */
.p-media svg{width:34%;height:34%;color:currentColor;opacity:1;stroke-width:1.5}
.p-thumb svg{width:20px;height:20px;color:currentColor;stroke-width:1.6}
.pmini .p-media svg{width:30%;height:30%}
.pick-m svg{color:currentColor}

/* الشارة على المصغّرة الفاتحة تحتاج تباينها الخاص */
.p-flag{background:var(--surface);color:var(--ink-2);box-shadow:var(--shadow-1)}
.p-flag.low{background:var(--amber);color:#fff;box-shadow:none}
.p-flag.out{background:var(--rose);color:#fff;box-shadow:none}

/* حدّ داخلي خفيف يفصل الوسط عن جسم البطاقة بلا خط صريح */
.p-card .p-media{box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)}

/* ==========================================================
   البحث العام
   ========================================================== */
/* شريط البحث والنطاق يبقى ملتصقاً أعلى الشاشة أثناء تصفّح النتائج */
.sq-bar{
  position:sticky;top:0;z-index:4;
  display:flex;flex-direction:column;gap:9px;
  margin:-2px -2px 2px;padding:2px 2px 10px;
  background:var(--bg)
}
.sq-in{margin:0}
.sq-chips{overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.sq-chips::-webkit-scrollbar{display:none}

.sq-hint{
  display:flex;flex-direction:column;gap:5px;
  padding:16px 15px;margin-top:12px;border-radius:17px;
  background:var(--brand-soft)
}
.sq-hint b{font-size:13.5px;font-weight:700;color:var(--ink)}
.sq-hint span{font-size:12px;line-height:1.75;color:var(--ink-2)}

.sq-recent{display:flex;flex-wrap:wrap;gap:7px}
.sq-chipq{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:11px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2)
}
.sq-chipq svg{width:13px;height:13px;color:var(--ink-3);flex:none}

.sq-group{margin-top:14px}
.sq-gh{
  display:flex;align-items:center;gap:8px;
  padding:0 4px 8px;font-size:12.5px;color:var(--ink-3)
}
.sq-gh svg{width:15px;height:15px;color:var(--brand)}
.sq-gh b{font-size:13px;font-weight:700;color:var(--ink)}
.sq-gh .num{
  margin-inline-start:auto;font-family:"Readex Pro",sans-serif;font-size:11.5px;
  padding:2px 8px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line-soft)
}
.sq-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;font-size:12px;color:var(--ink-3)
}

/* أيقونة حقل البحث: كانت تعتمد على أبعاد مكتوبة في كل استدعاء،
   فأي أيقونة تُحقن بلا width/height تتمدّد وتبتلع الحقل. نثبّتها هنا. */
.search > svg{width:16px;height:16px;flex:none}

/* ==========================================================
   الشريط العلوي — بنية سلة بهويّتنا
   ==========================================================
   سلة: صفّ أيقونات فوق شريط بحث دائم. نأخذ البنية ونُبقي عنوان
   الشاشة (سلة تضع شعارها مكانه فلا يخبرك أين أنت). */
.nav{flex-direction:column;align-items:stretch;gap:10px;padding-inline:16px}
.nav-row{display:flex;align-items:flex-end;justify-content:space-between;gap:11px}
.nav-head{flex:1;min-width:0}
.nav-store{
  flex:none;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;align-self:center
}
.nav-logo{
  display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  font-family:"Readex Pro",sans-serif;font-weight:600;font-size:16px;
  box-shadow:0 6px 16px -8px var(--brand)
}
.nav.scrolled .nav-logo{width:32px;height:32px;border-radius:11px;font-size:13px;box-shadow:none}

/* شريط البحث الدائم — يفتح البحث الكامل بنطاق الشاشة الحالية */
.nav-search{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:10px 13px;border-radius:14px;cursor:pointer;font:inherit;text-align:start;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-3);
  box-shadow:var(--shadow-1)
}
.nav-search svg{width:16px;height:16px;flex:none}
.nav-search span:first-of-type{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-search-k{
  flex:none;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;
  background:var(--brand-soft);color:var(--brand)
}
.nav.scrolled .nav-search{display:none}

/* ==========================================================
   ملخص الشهر — شبكة ٢×٢ ببنية سلة
   ========================================================== */
.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 14px 13px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1)
}
.ms-ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;margin-bottom:6px
}
.ms-ico svg{width:17px;height:17px}
.ms-v{
  font-family:"Readex Pro",sans-serif;font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.25;color:var(--ink)
}
.ms-v small{font-size:11px;font-weight:500;color:var(--ink-3);margin-inline-start:3px}
.ms-k{font-size:12px;font-weight:600;color:var(--ink-2)}
.ms-s{font-size:10.5px;color:var(--ink-3);line-height:1.55;margin-top:2px}

/* ==========================================================
   بطاقات حالات الطلبات — تُصفّي بضغطة
   ========================================================== */
.ost-row{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:1px;align-items:stretch;min-height:92px}
.ost-row::-webkit-scrollbar{display:none}
.ost{
  flex:none;min-width:104px;display:flex;flex-direction:column;gap:2px;
  padding:12px 13px;border-radius:17px;cursor:pointer;font:inherit;text-align:start;
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1);
  transition:border-color .15s ease,transform .12s ease
}
.ost:active{transform:scale(.98)}
.ost.on{border-color:var(--st);box-shadow:0 0 0 1px var(--st) inset,var(--shadow-1)}
.ost-ico{
  display:grid;place-items:center;width:28px;height:28px;border-radius:9px;margin-bottom:6px;
  background:color-mix(in srgb,var(--st) 14%,transparent);color:var(--st)
}
.ost-ico svg{width:15px;height:15px}
.ost-n{
  font-family:"Readex Pro",sans-serif;font-size:20px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.2;color:var(--ink)
}
.ost-l{font-size:11px;color:var(--ink-3);white-space:nowrap}

/* الشريط الملوّن في الطلبات بقي مؤشّراً بصرياً والأسطورة حُذفت —
   لكن التقارير تستخدم نفس الصنف لأسطورة طرق الدفع، فنقصر الإخفاء. */
#view-orders .ord-legend{display:none}

/* شريط أدوات المنتجات: شرائح الأقسام تمرّ أفقياً وزر العرض ثابت */
.p-toolbar{align-items:center;gap:9px}
.p-toolbar .chips{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;margin:0}
.p-toolbar .chips::-webkit-scrollbar{display:none}
/* بطاقة «الكل» في حالات الطلبات محايدة اللون */
.ost.all .ost-ico{background:var(--surface-2);color:var(--ink-2)}

/* ==========================================================
   تحرير المنتج في مكانه
   ==========================================================
   سلة تُظهر الحقول وزر الحفظ دائماً فتزدحم البطاقة. هنا الصف نظيف،
   وقلم يفتح التحرير، وزر الحفظ لا يظهر إلا عند تغيّر رقم فعلاً. */
.prow{position:relative;background:var(--surface);border-radius:16px;overflow:hidden}
.prow.open{box-shadow:0 0 0 1px var(--brand) inset}
.prow > .row{background:none;border-radius:0;box-shadow:none;width:100%}
.prow-pen{
  position:absolute;top:10px;inset-inline-start:10px;
  display:grid;place-items:center;width:28px;height:28px;border-radius:9px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3)
}
.prow-pen svg{width:14px;height:14px}
.prow.open .prow-pen{background:var(--brand);border-color:var(--brand);color:#fff}
.prow-edit{
  display:flex;align-items:flex-end;gap:9px;
  padding:0 13px 13px;border-top:1px solid var(--line-soft);margin-top:-1px;padding-top:12px
}
.prow-edit label{flex:1;display:flex;flex-direction:column;gap:5px;position:relative;min-width:0}
.prow-edit label span{font-size:11px;color:var(--ink-3)}
.prow-edit input{
  width:100%;padding:9px 11px;border-radius:11px;font:inherit;font-size:14px;
  font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);outline:none
}
.prow-edit input:focus{border-color:var(--brand)}
.prow-edit label i{
  position:absolute;inset-inline-start:11px;bottom:11px;font-style:normal;
  font-size:11px;color:var(--ink-3);pointer-events:none
}
.prow-edit label:first-child input{padding-inline-start:34px}
.prow-save{
  flex:none;padding:10px 18px;border:0;border-radius:11px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;background:var(--brand);color:#fff
}

/* زر القلم كان معوّماً بـinset-inline-start، وهي في RTL جهة اليمين —
   أي فوق مصغّرة المنتج بالضبط. نجعله عموداً حقيقياً في نهاية الصف،
   وحقول التحرير تلتفّ لسطر خاص بها. */
.prow{display:flex;flex-wrap:wrap;align-items:center}
.prow > .row{flex:1;min-width:0;width:auto}
.prow-pen{position:static;flex:none;align-self:center;margin-inline-end:11px}
.prow-edit{flex-basis:100%;width:100%}

/* ==========================================================
   بطاقة مبيعات اليوم — نسخة مرتّبة
   ==========================================================
   حُذفت إحصاءاتها الثلاث (كانت مكرّرة في ملخص الشهر)، وصعد مؤشّر
   التغيّر بجانب العنوان، وكل هدف صار سطراً بنسبته ثم شريطه ثم تفصيله. */
.hh-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hh-label{margin:0}
.hh-trend{
  display:inline-flex;align-items:center;gap:4px;margin:0;flex:none;
  padding:4px 9px;border-radius:9px;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.2);color:#fff
}
.hh-trend svg{width:11px;height:11px}
.hh-trend .num{font-family:"Readex Pro",sans-serif;font-weight:600}
.hh-trend.down{background:rgba(255,255,255,.14)}

.hh-goal{display:flex;flex-direction:column;gap:0;margin-top:16px}
.hg{
  display:flex;flex-direction:column;gap:7px;width:100%;
  padding:12px 0 0;border:0;background:none;font:inherit;color:inherit;
  cursor:pointer;text-align:start
}
.hg.second{margin-top:11px;border-top:1px solid rgba(255,255,255,.16)}
.hg-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hg-k{font-size:12px;color:rgba(255,255,255,.82);font-weight:600}
.hg-pct{
  flex:none;font-family:"Readex Pro",sans-serif;font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;color:#fff
}
.hg-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.hg-bar i{display:block;height:100%;border-radius:3px;background:#fff;transition:width .55s cubic-bezier(.22,1,.36,1)}
.hg-sub{font-size:10.5px;color:rgba(255,255,255,.72);line-height:1.6}
.hg-sub .num{font-family:"Readex Pro",sans-serif;color:#fff;font-weight:600}

/* ==========================================================
   ملخص الشهر — صفّ بجانب بعضه بدل شبكة ٢×٢
   ========================================================== */
.ms-grid{
  display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;
  padding:1px;scroll-snap-type:x proximity
}
.ms-grid::-webkit-scrollbar{display:none}
.ms{
  flex:none;width:136px;scroll-snap-align:start;
  padding:13px 13px 12px;gap:2px
}
.ms-ico{width:30px;height:30px;border-radius:10px;margin-bottom:7px}
.ms-ico svg{width:15px;height:15px}
.ms-v{font-size:17px}
.ms-k{font-size:11.5px}
.ms-s{font-size:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}

/* ==========================================================
   بطاقة اليوم — بديل كامل للكتلة البنفسجية
   ==========================================================
   الكتلة الملوّنة الكبيرة أُلغيت: بطاقة فاتحة بتباين أعلى، وهدف
   اليوم حلقة تُقرأ بلمحة بدل شريط بنسبة مكتوبة جانبه، وهدف الشهر
   سطر واحد في التذييل. الرسم الخلفي حُذف — مخطط الأسبوع يغني عنه. */
.home-hero{
  position:relative;overflow:visible;border-radius:22px;padding:0;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1)
}
.hr-main{display:flex;align-items:center;gap:15px;padding:16px 16px 15px}
.hr-goal,.hr-set{
  position:relative;flex:none;width:74px;
  display:grid;place-items:center;padding:0;border:0;background:none;
  cursor:pointer;font:inherit;color:inherit
}
.hr-ring{display:block;width:74px;height:74px}
.hr-goal > .hr-pct{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  font-family:"Readex Pro",sans-serif;font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1
}
.hr-pct i{font-style:normal;font-size:10px;color:var(--ink-3);margin-inline-start:1px}
.hr-glabel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,10px);
  font-size:9px;color:var(--ink-3);white-space:nowrap
}
.hr-set{
  width:74px;height:74px;border-radius:50%;
  border:1.5px dashed var(--line);color:var(--brand);gap:3px;align-content:center
}
.hr-set svg{width:20px;height:20px}
.hr-set span{font-size:9.5px;font-weight:700;line-height:1.2}

.hr-num{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hr-k{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3)}
.hr-trend{
  display:inline-flex;align-items:center;gap:3px;flex:none;
  padding:2px 7px;border-radius:7px;font-size:10.5px;font-weight:700;
  background:var(--mint-soft);color:var(--mint)
}
.hr-trend.down{background:var(--rose-soft);color:var(--rose)}
.hr-trend svg{width:10px;height:10px}
.hr-v{
  font-family:"Readex Pro",sans-serif;font-size:31px;font-weight:600;
  letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink)
}
.hr-v .cur{font-size:13px;font-weight:500;color:var(--ink-3);margin-inline-start:4px;letter-spacing:0}
.hr-s{font-size:11.5px;color:var(--ink-2)}

.hr-foot{
  display:flex;flex-direction:column;gap:6px;width:100%;
  padding:12px 16px 14px;border:0;border-top:1px solid var(--line-soft);
  background:none;cursor:pointer;font:inherit;color:inherit;text-align:start
}
.hr-foot-top{display:flex;align-items:baseline;gap:8px;font-size:11.5px}
.hr-fk{font-weight:700;color:var(--ink-2);flex:none}
.hr-fv{flex:1;min-width:0;color:var(--ink-3)}
.hr-fv .num{font-family:"Readex Pro",sans-serif;font-weight:600;color:var(--ink-2)}
.hr-fp{
  flex:none;font-family:"Readex Pro",sans-serif;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--brand)
}
.hr-fbar{display:block;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.hr-fbar i{display:block;height:100%;border-radius:3px;background:var(--brand);
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.hr-fn{font-size:10.5px;color:var(--ink-3);line-height:1.55}

/* ==========================================================
   ملخص الشهر — بطاقة واحدة بأربعة أعمدة ظاهرة كلها
   ========================================================== */
.ms-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;overflow:visible;padding:0;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:18px;box-shadow:var(--shadow-1)
}
.msc{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 4px 11px;min-width:0;
  border-inline-start:1px solid var(--line-soft)
}
.msc:first-child{border-inline-start:0}
.msc-i{width:16px;height:16px;flex:none;margin-bottom:2px}
.msc-v{
  font-family:"Readex Pro",sans-serif;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.2;color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.msc-k{
  font-size:9.5px;color:var(--ink-3);text-align:center;line-height:1.35;
  max-width:100%;overflow:hidden
}

/* ==========================================================
   البطاقة بنفسجية مرة أخرى — بالبنية الجديدة
   ==========================================================
   لونا الحلقة صارا متغيّرَين، فتنقلب للأبيض هنا بلا تغيير الـSVG. */
:root{--ring-track:var(--line);--ring-fill:var(--brand)}
.home-hero{
  background:linear-gradient(145deg,var(--brand-deep),var(--brand) 42%,var(--brand-2));
  border:0;color:#fff;
  box-shadow:0 12px 30px -16px var(--brand);
  --ring-track:rgba(255,255,255,.26);
  --ring-fill:#ffffff
}
.home-hero .hr-pct{color:#fff}
.home-hero .hr-pct i{color:rgba(255,255,255,.7)}
.home-hero .hr-glabel{color:rgba(255,255,255,.72)}
.home-hero .hr-k{color:rgba(255,255,255,.8)}
.home-hero .hr-trend{background:rgba(255,255,255,.2);color:#fff}
.home-hero .hr-trend.down{background:rgba(255,255,255,.14)}
.home-hero .hr-v{color:#fff}
.home-hero .hr-v .cur{color:rgba(255,255,255,.72)}
.home-hero .hr-s{color:rgba(255,255,255,.8)}
.home-hero .hr-set{border-color:rgba(255,255,255,.45);color:#fff}
.home-hero .hr-foot{border-top-color:rgba(255,255,255,.18)}
.home-hero .hr-fk{color:#fff}
.home-hero .hr-fv{color:rgba(255,255,255,.72)}
.home-hero .hr-fv .num{color:#fff}
.home-hero .hr-fp{color:#fff}
.home-hero .hr-fbar{background:rgba(255,255,255,.22)}
.home-hero .hr-fbar i{background:#fff}
.home-hero .hr-fn{color:rgba(255,255,255,.72)}

/* ==========================================================
   الشريطان: البحث وحالة المتجر
   ==========================================================
   كانا بطاقتين بيضاوين متطابقتي الوزن فوق بعض. البحث صار حقلاً
   مسطّحاً بلا ظل (فلا ينافس المحتوى)، وشريط المتجر بطاقة لها
   نقطة حالة ورابط يُفتح. */
.nav-search{
  background:var(--surface);border:1px solid var(--line);box-shadow:none;
  padding:9px 12px;border-radius:13px;gap:8px
}
.nav-search span:first-of-type{font-size:12.5px}
.nav-search-k{font-size:10.5px;padding:2px 8px;border-radius:7px}
.nav-search:active{border-color:var(--brand)}

.store-strip{
  gap:10px;padding:11px 13px;align-items:center;
  border:1px solid var(--line-soft)
}
.ss-dot{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 18%,transparent)
}
.store-strip.closed .ss-dot{
  background:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 18%,transparent)
}
.store-name{font-size:14px;gap:6px;flex-wrap:wrap}
.ss-state{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;
  background:var(--mint-soft);color:var(--mint)
}
.store-strip.closed .ss-state{background:var(--rose-soft);color:var(--rose)}
.store-url{
  display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:0;border:0;
  background:none;cursor:pointer;font:inherit;font-size:11.5px;color:var(--ink-3);
  direction:ltr
}
.store-url svg{width:11px;height:11px;flex:none}
.store-url:active{color:var(--brand)}

/* ==========================================================
   التسويات والرسوم
   ========================================================== */
.st-warn{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 14px;border-radius:16px;margin-bottom:10px;
  background:var(--amber-soft);font-size:12px;line-height:1.7;color:var(--ink-2)
}
.st-warn svg{flex:none;width:18px;height:18px;color:var(--amber);margin-top:1px}
.st-warn span{flex:1;min-width:0}
.st-warn b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
.st-warn-b{
  flex:none;align-self:center;padding:7px 13px;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;background:var(--amber);color:#fff
}
.st-est{
  padding:10px 13px;border-radius:13px;margin-bottom:10px;
  background:var(--brand-soft);color:var(--ink-2);font-size:11.5px;line-height:1.7
}
.st-est b{color:var(--brand)}

.st-tbl{
  border-radius:18px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow-1)
}
.st-hd,.st-row{
  display:grid;grid-template-columns:1.5fr .9fr .8fr .95fr;
  align-items:center;gap:6px;padding:10px 13px
}
.st-hd{
  font-size:10.5px;color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--line-soft)
}
.st-hd span:not(:first-child),.st-row > span:not(.st-m){text-align:end}
.st-row{border-bottom:1px solid var(--line-soft);font-size:12.5px}
.st-row:last-child{border-bottom:0}
.st-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-m b{font-size:12.5px;font-weight:700;color:var(--ink)}
.st-m em{font-style:normal;font-size:10px;color:var(--ink-3);line-height:1.5}
.st-g,.st-f,.st-n{font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums}
.st-g{color:var(--ink-2)}
.st-f{color:var(--ink-3)}
.st-f.has{color:var(--rose)}
.st-n{font-weight:600;color:var(--ink)}
.st-total{background:var(--surface-2);font-weight:700}
.st-total .st-n{color:var(--mint)}
.st-note{font-size:10.5px;color:var(--ink-3);line-height:1.7;padding:9px 4px 0}

/* نافذة ضبط الرسوم */
.fee-list{display:flex;flex-direction:column;gap:8px}
.fee-row{display:grid;grid-template-columns:1fr 84px 84px;align-items:center;gap:8px}
.fee-k{font-size:12.5px;font-weight:600;color:var(--ink);min-width:0}
.fee-in{position:relative;display:block}
.fee-in input{
  width:100%;padding:9px 30px 9px 10px;border-radius:11px;font:inherit;font-size:13px;
  font-family:"Readex Pro",sans-serif;font-variant-numeric:tabular-nums;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);outline:none
}
.fee-in input:focus{border-color:var(--brand)}
.fee-in i{
  position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:10.5px;color:var(--ink-3);pointer-events:none
}

/* ==========================================================
   حالة المتجر داخل البطاقة — بديل الشريط المنفصل
   ==========================================================
   الشريطان المتتاليان كانا مستطيلين متشابهين وفي الثاني فراغ واسع.
   الحل إلغاء أحدهما: الحالة صعدت لأعلى البطاقة، أبرز مكان وأليق
   بمفتاح يُستعمل يومياً. */
.hr-st{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.16)
}
.hr-st-dot{
  flex:none;width:8px;height:8px;border-radius:50%;background:#5ff0b5;
  box-shadow:0 0 0 4px rgba(95,240,181,.22)
}
.hr-st.closed .hr-st-dot{background:#ff9aae;box-shadow:0 0 0 4px rgba(255,154,174,.22)}
.hr-st-n{
  flex:1;min-width:0;font-size:13px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.hr-st-k{
  flex:none;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:7px;
  background:rgba(255,255,255,.2);color:#fff
}
.hr-st .switch{width:42px;height:25px;background:rgba(255,255,255,.26)}
.hr-st .switch::after{width:19px;height:19px}
.hr-st .switch[aria-checked="true"]{background:#5ff0b5}
.hr-st .switch[aria-checked="true"]::after{transform:translateX(-17px)}
.hr-main{padding-top:14px}

/* ==========================================================
   مدى تاريخ التقارير
   ========================================================== */
.rep-range{display:flex;align-items:stretch;gap:9px}
.rep-range .segmented{flex:1;min-width:0}
.rep-cal{
  flex:none;width:44px;display:grid;place-items:center;border-radius:14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2)
}
.rep-cal svg{width:18px;height:18px}
.rep-cal:active{border-color:var(--brand);color:var(--brand)}
.rep-picked{display:flex}
.dr-pill{
  display:inline-flex;align-items:center;gap:7px;width:100%;
  padding:9px 12px;border-radius:13px;font-size:12px;
  background:var(--brand-soft);color:var(--ink-2)
}
.dr-pill svg{width:14px;height:14px;color:var(--brand);flex:none}
.dr-pill b{font-family:"Readex Pro",sans-serif;font-weight:600;color:var(--ink);direction:ltr}
.dr-pill em{
  font-style:normal;font-size:10.5px;color:var(--ink-3);margin-inline-start:auto;flex:none
}
.dr-pill button{
  flex:none;display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:7px;
  cursor:pointer;background:rgba(0,0,0,.06);color:var(--ink-2)
}
.dr-pill button svg{width:12px;height:12px;color:inherit}
.dr-quick{flex-wrap:wrap;overflow:visible}
.two .field input[type="date"]{
  width:100%;padding:11px 12px;border-radius:13px;font:inherit;font-size:13.5px;
  font-family:"Readex Pro",sans-serif;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);outline:none
}
.two .field input[type="date"]:focus{border-color:var(--brand)}

/* ==========================================================
   وضع الصيانة
   ========================================================== */
.mt-hero{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:20px 16px;border-radius:19px;
  background:var(--surface-2);border:1px solid var(--line)
}
.mt-hero svg{width:30px;height:30px;color:var(--ink-3);margin-bottom:3px}
.mt-hero b{font-size:14.5px;font-weight:700;color:var(--ink)}
.mt-hero em{font-style:normal;font-size:12px;line-height:1.8;color:var(--ink-2);max-width:32ch}
.mt-hero.on{background:var(--rose-soft);border-color:color-mix(in srgb,var(--rose) 22%,transparent)}
.mt-hero.on svg{color:var(--rose)}
.mt-msg{
  width:100%;resize:vertical;min-height:74px;line-height:1.8;
  padding:11px 13px;border-radius:13px;font:inherit;font-size:13.5px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);outline:none
}
.mt-msg:focus{border-color:var(--brand)}
.mt-note{
  font-size:11.5px;line-height:1.8;color:var(--ink-3);
  padding:11px 13px;border-radius:13px;background:var(--surface-2)
}