:root { --bg:#f4f6f8; --card:#fff; --text:#1f2a30; --muted:#5f6b73; --accent:#2e7d4f; --accent2:#1f3a2e;
        --line:#dde2e6; --red:#c62828; --yellow:#fff4d6; --radius:10px; }
* { box-sizing:border-box; }
html[dir=rtl] body { font-family:"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic",Tahoma,sans-serif; font-size:17px; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; }
a { color:var(--accent); }
header.top { background:var(--accent2); color:#fff; }
header.top .wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 20px; }
header.top .brand { font-weight:700; font-size:20px; color:#fff; text-decoration:none; margin-inline-end:auto; }
header.top nav a { color:#d6e8de; text-decoration:none; margin-inline-start:14px; }
header.top nav a:hover { color:#fff; }
.langs button { background:transparent; color:#d6e8de; border:1px solid #4f7a66; border-radius:6px; padding:3px 9px; cursor:pointer; font:inherit; font-size:14px; }
.langs button.on { background:#2f5444; color:#fff; }
.wrap { max-width:1060px; margin:0 auto; }
main.wrap { padding:24px 20px 40px; }
.hero { padding:44px 20px; text-align:center; background:linear-gradient(#1f3a2e,#2f5444); color:#fff; }
.hero h1 { margin:0 0 10px; font-size:36px; }
.hero p { max-width:760px; margin:0 auto 22px; color:#e3efe8; font-size:18px; }
.btn { display:inline-block; font:inherit; padding:10px 20px; border-radius:8px; border:1px solid var(--line); background:#fff;
       color:var(--text); cursor:pointer; text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.light { background:#fff; color:var(--accent2); border-color:#fff; }
.btn.danger { color:var(--red); border-color:#f0c4c4; }
.btn:disabled { opacity:.6; cursor:default; }
.hero .btn { margin:4px 6px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; }
.card h2, section h2 { margin:0 0 12px; font-size:22px; }
.card h3 { margin:0 0 6px; font-size:18px; }
.muted { color:var(--muted); } .small { font-size:14px; } .red { color:var(--red); } .green { color:var(--accent); }
.center { text-align:center; }
table { border-collapse:collapse; width:100%; }
th, td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:start; }
th { color:var(--muted); font-weight:600; font-size:14px; }
.scroll { overflow-x:auto; }
label { display:block; color:var(--muted); font-size:14px; margin:10px 0 4px; }
input, select { width:100%; font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; }
input.ltr, .ltr { direction:ltr; text-align:left; }
.row { display:flex; gap:12px; flex-wrap:wrap; } .row > * { flex:1 1 200px; }
.narrow { max-width:440px; margin:20px auto; }
.notice { padding:10px 14px; border-radius:8px; background:var(--yellow); margin:10px 0; }
.notice.bad { background:#fdecea; color:var(--red); }
.notice.good { background:#e8f5ec; color:#1b5e20; }
.big { font-size:26px; font-weight:700; }
.mono { font-family:Consolas,monospace; direction:ltr; unicode-bidi:embed; }
.steps { counter-reset:s; list-style:none; padding:0; }
.steps li { counter-increment:s; margin:0 0 12px; padding-inline-start:44px; position:relative; }
.steps li::before { content:counter(s); position:absolute; inset-inline-start:0; top:0; width:32px; height:32px; border-radius:50%;
                    background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.paybox div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line); }
footer { text-align:center; color:var(--muted); padding:24px; font-size:14px; }
.hidden { display:none !important; }

/* ===== خاصيتون (features.html) ===== */
.feature { display:grid; grid-template-columns:1fr 1.3fr; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.feature:nth-child(even) .shot { order:-1; }
.feature h2 { font-size:24px; } .feature .icon { font-size:34px; }
.feature ul { padding-inline-start:20px; color:var(--muted); }
.shot { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:6px; box-shadow:0 6px 20px rgba(0,0,0,.07); }
.shot img { display:block; width:100%; height:auto; border-radius:6px; }
.shot.noimg { min-height:220px; display:flex; align-items:center; justify-content:center; font-size:64px; background:linear-gradient(135deg,#eef4f0,#f9fbfa); }
.shot.noimg img { display:none; }
@media (max-width:760px) { .feature { grid-template-columns:1fr; } .feature:nth-child(even) .shot { order:0; } }

/* ===== مدد (help.html) ===== */
.helpgrid { display:grid; grid-template-columns:260px 1fr; gap:20px; align-items:start; }
.toc { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.toc h4 { margin:12px 0 4px; color:var(--muted); font-size:13px; text-transform:uppercase; }
.toc a { display:block; padding:3px 0; text-decoration:none; color:var(--text); font-size:15px; }
.toc a:hover { color:var(--accent); }
.topic h3 { font-size:20px; margin:0 0 8px; }
.topic ol { padding-inline-start:22px; } .topic li { margin:4px 0; }
.topic .notice { margin:12px 0; }
#helpSearch { margin-bottom:14px; }
@media (max-width:760px) { .helpgrid { grid-template-columns:1fr; } .toc { position:static; max-height:none; } }

/* ===== پاسورڊ ڏيکاريو/لڪايو ۽ 2FA ===== */
.pw-wrap { position:relative; direction:ltr; }   /* پاسورڊ هميشه کاٻي کان؛ بٽڻ ساڄي */
.pw-wrap input { padding-right:44px; }
.pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:transparent;
          cursor:pointer; font-size:18px; padding:4px 8px; line-height:1; border-radius:6px; }
.pw-eye:hover { background:#eef4f0; }
input.code6 { font-family:Consolas,monospace; font-size:24px; letter-spacing:8px; text-align:center; max-width:220px; }

/* ===== گيلري ===== */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.gallery .shot { text-decoration:none; color:var(--text); }
.gallery .shot span { display:block; padding:8px 6px 4px; font-weight:600; }
a.shot { display:block; transition:transform .15s; } a.shot[href]:hover { transform:translateY(-2px); }