نموذج مصادقة

<span class="rtlok auth-form" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
        <div class="mini form">
          <div><label data-ar="البريد الإلكتروني" data-en="Email">البريد الإلكتروني</label>
            <div class="inp">name@company.com</div></div>
          <div><label data-ar="كلمة المرور" data-en="Password">كلمة المرور</label>
            <div class="inp focus">••••••••••</div>
            <div class="strength"><u class="on"></u><u class="on"></u><u class="on"></u><u></u></div></div>
          <div class="go" data-ar="تسجيل الدخول" data-en="Sign in">تسجيل الدخول</div>
        </div>

/* pt-scoped */
/* نموذج دخول */
.auth-form .form{width:100%;max-width:200px;display:flex;flex-direction:column;gap:8px}
.auth-form .form label{font-size:9px;color:var(--pt-text-muted);display:block;margin-bottom:3px;text-align:start}
.auth-form .form .inp{height:26px;border-radius:var(--pt-radius-md);border:1px solid var(--pt-border-default);
  background:var(--pt-surface);display:flex;align-items:center;padding-inline:8px;font-size:9px;
  color:var(--pt-text-muted)}
.auth-form .form .inp.focus{border-color:var(--pt-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pt-accent) 15%,transparent)}
.auth-form .form .go{height:28px;border-radius:var(--pt-radius-md);background:var(--pt-accent);
  color:var(--pt-on-accent);font-size:10px;font-weight:var(--pt-font-weight-bold);
  display:grid;place-items:center;margin-top:2px}
.auth-form .strength{display:flex;gap:3px;margin-top:4px}
.auth-form .strength u{height:3px;flex:1;border-radius:2px;background:var(--pt-border-default)}
.auth-form .strength u.on{background:var(--pt-color-success-400)}

# Auth Form

**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.

**Goal:** Auth Form — Forms

**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.

**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.

**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.

**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.

**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.

**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.

**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.

**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.