/* «قوالب الأنظمة» + محرك التجربة — theme tokens only (light/dark follow the site), logical properties (RTL/LTR), mobile first. */
.wl-sys{margin-top:8px}
.sys-wrap{padding:16px;border-radius:22px;background:var(--elevated);border:1px solid var(--stroke);box-shadow:var(--shadow-pill);display:flex;flex-direction:column;gap:14px}
.sys-intro{margin:0;font-size:14px;line-height:1.6;color:var(--text2)}
.sys-live{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--stroke));background:color-mix(in srgb,var(--accent) 9%,var(--elevated));cursor:pointer;font:inherit;color:var(--text);text-align:start;width:100%}
.sys-live b{font-size:14px}.sys-live small{display:block;color:var(--text2);font-size:12px;margin-top:2px}
.sys-live .sys-t{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:18px;direction:ltr}
.sys-pulse{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent);animation:sysPulse 1.8s infinite;flex:none}
@keyframes sysPulse{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.sys-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sys-card{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--stroke);background:var(--chrome);transition:transform .25s ease,box-shadow .25s ease}
.sys-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pill)}
.sys-art{position:relative;aspect-ratio:16/8;display:grid;place-items:center;background:radial-gradient(120% 140% at 15% 0%,color-mix(in srgb,var(--sys-tone) 60%,var(--on-brand)) 0%,var(--sys-tone) 45%,color-mix(in srgb,var(--sys-tone) 55%,var(--text)) 100%);overflow:hidden}
.sys-art::before,.sys-art::after{content:"";position:absolute;border-radius:50%;background:var(--on-brand);opacity:.12;animation:sysFloat 9s ease-in-out infinite}
.sys-art::before{width:140px;height:140px;inset-block-start:-40px;inset-inline-end:-30px}
.sys-art::after{width:90px;height:90px;inset-block-end:-30px;inset-inline-start:14%;animation-delay:-4s}
@keyframes sysFloat{50%{transform:translateY(14px) scale(1.06)}}
.sys-ic{position:relative;font-size:52px;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--text) 35%,transparent))}
.sys-badges{position:absolute;inset-block-end:10px;inset-inline-start:12px;display:flex;gap:6px}
.sys-badge{padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--text) 45%,transparent);color:var(--chrome);font-size:11.5px;font-weight:700}
.sys-art.has-shot{aspect-ratio:16/10;background:var(--chrome);display:block}
.sys-art.has-shot::before{display:none}
.sys-art.has-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* cover: inline LQIP at once → shimmer → fade-in; on error the gradient tile of the plain card shows */
.sys-art.has-shot .sys-lq,.sys-art.has-shot .sys-px{position:absolute;inset:0}
.sys-art.has-shot .sys-lq{filter:blur(12px);transform:scale(1.12)}
.sys-art.has-shot.is-loading .sys-px{opacity:0}
.sys-art.has-shot .sys-px{transition:opacity .45s ease}
.sys-art.has-shot.is-loading::after{content:"";display:block;position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--elevated) 55%,transparent) 50%,transparent 70%);background-size:220% 100%;animation:sysShimmer 1.3s linear infinite}
@keyframes sysShimmer{from{background-position:130% 0}to{background-position:-90% 0}}
.sys-art.has-shot.is-err{background:radial-gradient(120% 140% at 15% 0%,color-mix(in srgb,var(--sys-tone) 60%,var(--on-brand)) 0%,var(--sys-tone) 60%)}
.sys-art.has-shot.is-err img{display:none}
@media(prefers-reduced-motion:reduce){.sys-art.has-shot.is-loading::after{animation:none}.sys-art.has-shot .sys-px{transition:none}}
.sys-vers{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.sys-vt{font-size:12px;font-weight:700;color:var(--text3)}
.sys-vl{display:flex;gap:8px;flex-wrap:wrap}
.sys-vc{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:7px 14px;border-radius:999px;border:1px solid var(--stroke);background:var(--elevated);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sys-vc small{font-size:10.5px;font-weight:700;color:var(--text3)}
.sys-vc.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--elevated))}
.sys-vc:disabled{opacity:.55;cursor:not-allowed;border-style:dashed}
.sys-vc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sys-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.sys-body h3{margin:0;font-size:17px;line-height:1.35;color:var(--text)}
.sys-body p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text2)}
.sys-hl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sys-hl li{position:relative;padding-inline-start:20px;font-size:13px;line-height:1.5;color:var(--text2)}
.sys-hl li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--accent);font-weight:800}
.sys-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:6px}
.sys-ver{font-size:11.5px;color:var(--text3)}
.sys-empty{padding:26px 12px;text-align:center;color:var(--text2);font-size:14px}
/* sheet */
.sys-layer{position:fixed;inset:0;z-index:2147483200;display:flex;align-items:flex-end;justify-content:center;background:color-mix(in srgb,var(--text) 55%,transparent);animation:sysFade .2s ease}
@media(min-width:720px){.sys-layer{align-items:center}}
@keyframes sysFade{from{opacity:0}}
.sys-sheet{width:min(520px,100%);max-height:92dvh;overflow:auto;background:var(--elevated);color:var(--text);border-radius:22px 22px 0 0;border:1px solid var(--stroke);padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:sysUp .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:14px}
@media(min-width:720px){.sys-sheet{border-radius:22px}}
@keyframes sysUp{from{transform:translateY(24px);opacity:0}}
.sys-head{display:flex;align-items:center;gap:10px}.sys-head b{font-size:16px;flex:1}
.sys-x{border:0;background:var(--hover);color:var(--text);width:34px;height:34px;border-radius:var(--radius-pill);cursor:pointer;font:inherit}
.sys-form{display:flex;flex-direction:column;gap:12px}
.sys-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text2)}
.sys-form .sys-agree{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;line-height:1.5}
/* theme-exempt: consent checkbox size (not a text field) */ .sys-form .sys-agree input{width:20px;height:20px;margin-top:2px;flex:none}
.sys-hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.sys-note{margin:0;font-size:12.5px;line-height:1.6;color:var(--text3)}
.sys-err{margin:0;padding:10px 12px;border-radius:12px;background:var(--danger-soft);color:var(--text);font-size:13.5px;line-height:1.5}
.sys-ok{margin:0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--chrome));font-size:13.5px;line-height:1.6;color:var(--text)}
.sys-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sys-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sys-prov{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 6px;text-align:center}
.sys-spin{width:56px;height:56px;border-radius:50%;border:4px solid var(--hover);border-top-color:var(--accent);animation:sysSpin 1s linear infinite}
@keyframes sysSpin{to{transform:rotate(360deg)}}
.sys-steps{display:flex;flex-direction:column;gap:6px;align-items:flex-start;font-size:13.5px;color:var(--text3)}
.sys-steps .on{color:var(--text);font-weight:700}.sys-steps .done{color:var(--text2)}.sys-steps .done::before{content:"✓ "}
.sys-clock{display:grid;place-items:center;position:relative;width:176px;height:176px;margin:4px auto}
.sys-clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sys-clock circle{fill:none;stroke-width:9;stroke-linecap:round}
.sys-clock .bg{stroke:var(--hover)}.sys-clock .fg{stroke:var(--accent);transition:stroke-dashoffset 1s linear,stroke .4s}
.sys-clock.ending .fg{stroke:var(--warning-bar)}
.sys-clock b{font-size:34px;font-variant-numeric:tabular-nums;direction:ltr;letter-spacing:.02em}
.sys-clock small{display:block;font-size:12px;color:var(--text3);text-align:center;margin-top:2px}
.sys-plans{display:flex;flex-direction:column;gap:8px}
/* theme-exempt: plan rows are selectable list tiles, not action buttons */ .sys-plan{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:var(--radius-lg);border:1px solid var(--stroke);background:var(--chrome);color:var(--text);font:inherit;cursor:pointer;text-align:start;width:100%}
.sys-plan:hover{border-color:var(--accent)}.sys-plan b{flex:1}.sys-plan span{font-variant-numeric:tabular-nums;color:var(--text2);font-weight:700}
.sys-pend{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text2)}
.sys-pend i{font-style:normal;padding:2px 8px;border-radius:999px;background:var(--hover);font-size:11.5px;margin-inline-start:6px}
@media(prefers-reduced-motion:reduce){.sys-art::before,.sys-art::after,.sys-pulse,.sys-spin,.sys-layer,.sys-sheet{animation:none}.sys-card{transition:none}.sys-clock .fg{transition:none}}
/* guest account strip + password field (layout only; buttons/fields come from theme-components.css) */
.sys-acct{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.sys-who{font-size:13.5px;color:var(--text2);margin-inline-end:auto}
.sys-pw{display:flex;gap:var(--space-2);align-items:stretch}.sys-pw>:first-child{flex:1;min-width:0}

.sys-card{position:relative}
.sys-card:has(.sys-open){cursor:pointer}
.sys-open{color:inherit;text-decoration:none}
.sys-open::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.sys-open:focus-visible{outline:none}
.sys-card:has(.sys-open:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.sys-card .sys-vers,.sys-card .sys-foot,.sys-card .sys-more{position:relative;z-index:2}
.sys-more{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:2px;font-size:12.5px;font-weight:600;color:var(--text3);text-decoration:none}
.sys-more:hover,.sys-card:hover .sys-more{color:var(--accent);text-decoration:underline}
/* «اقترح كلمة مرور» — blue link-style text button under the new-password field (sign-up only; the log-in forms never show it) */
.sys-sug{display:inline-block;background:none;border:0;padding:4px 0;margin:0;font:inherit;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sys-sug:hover{text-decoration-thickness:2px}.sys-sug:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* home-audit visual pass */
/* responsive grid: 1 card is centred (not half a box), 2+ cards flow in 2-3 columns */
.sys-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media(min-width:720px){.sys-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.sys-grid:has(>.sys-card:only-child){grid-template-columns:minmax(0,560px);justify-content:center}
/* keep the card inside the first screen on desktop */
@media(min-width:840px){.wl-sys .sys-art{aspect-ratio:auto;height:min(260px,30vh)}}
.sys-acct:empty{display:none}
/* «قريبًا» version: clearly unavailable, not a button */
.sys-vc:disabled{cursor:not-allowed;background:transparent;border-style:dashed;border-color:var(--stroke);color:var(--text3);box-shadow:none}
.sys-vc:disabled small{color:var(--text3)}
/* v641: keep the first template card above the fold on desktop (owner 30 Oct) */
@media (min-width:840px){.sys-art.has-shot{aspect-ratio:2/1}.sys-wrap > .sys-intro{display:none}.sys-hl li:nth-child(n+4){display:none}}
.sys-art.has-shot .sys-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .4s}
.sys-art.has-shot.is-vid .sys-vid{opacity:1}
.sys-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sys-acts:has(> :only-child){grid-template-columns:1fr}
.sys-dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sys-dpick{display:grid;gap:6px;padding:8px;border:1px solid var(--stroke);border-radius:14px;background:var(--elevated);color:var(--text);text-align:start;cursor:pointer;font:inherit}
.sys-dpick:hover,.sys-dpick:focus-visible{border-color:var(--text)}
.sys-dimg{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px}
.sys-dname{font-weight:700}
.sys-duse{font-size:.85em;color:var(--text);opacity:.7}
@media (prefers-reduced-motion:reduce){.sys-art.has-shot .sys-vid{display:none}}
@media (max-width:380px){.sys-acts{grid-template-columns:1fr}.sys-dgrid{grid-template-columns:1fr 1fr;gap:8px}.sys-dpick{padding:6px}}
.sys-acts .btn{min-width:0;white-space:normal;text-align:center;line-height:1.2}