:root{--bg:#f3f5fa;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e5e9f2;--pri:#2563eb;--pri2:#3b82f6;--teal:#0891b2;--amber:#d97706;--red:#dc2626;--green:#16a34a;--font:'IBM Plex Sans Arabic',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:linear-gradient(160deg,#eaf2ff,#f3f8ff 55%,#f3f5fa);color:var(--ink);min-height:100vh;font-size:15px}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;max-width:460px;width:100%;padding:30px 28px;box-shadow:0 20px 60px rgba(15,23,42,.08)}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.brand .lg{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--pri2),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px;flex:none}
.brand b{font-size:18px}
h1{font-size:21px;font-weight:700;margin:18px 0 4px}
.sub{color:var(--mut);font-size:13.5px;line-height:1.7;margin-bottom:6px}
.trial{display:flex;align-items:center;gap:8px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:600;margin:14px 0 20px;line-height:1.6}
form{display:flex;flex-direction:column;gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-weight:600;font-size:13px;color:#334155}
.f label small{font-weight:500;color:var(--mut);margin-right:4px}
.f input{border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px;background:#fff;outline:none;transition:.15s;font-size:14.5px;width:100%}
.f input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.f .hint{font-size:11.5px;color:var(--mut)}
.f .err{font-size:12px;color:var(--red);font-weight:600;display:none}
.f.invalid input{border-color:var(--red)}
.f.invalid .err{display:block}
.pwrap{position:relative}
.pwrap input{padding-left:44px}
.pwtoggle{position:absolute;left:4px;top:4px;bottom:4px;width:36px;border:0;background:none;border-radius:8px;display:grid;place-items:center;font-size:15px;color:var(--mut)}
.pwtoggle:hover{background:#f1f5f9}
.slugrow{display:flex;align-items:center;gap:0;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff}
.slugrow:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.slugrow input{border:0;border-radius:0;flex:1;min-width:0}
.slugrow input:focus{box-shadow:none}
.slugdom{padding:0 10px;color:var(--mut);font-size:13px;white-space:nowrap;direction:ltr;background:#f8fafc;height:100%;display:flex;align-items:center;border-right:1px solid var(--line)}
.slugstat{font-size:12px;font-weight:600;min-height:16px}
.slugstat.ok{color:var(--green)}
.slugstat.bad{color:var(--red)}
.slugstat.chk{color:var(--mut)}
dir-ltr,[dir="ltr"]{direction:ltr;text-align:left}
.btn{height:46px;border-radius:12px;border:1px solid var(--pri);background:var(--pri);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.15s;box-shadow:0 4px 14px rgba(37,99,235,.3);width:100%}
.btn:hover{background:#1d4ed8}
.btn:disabled{opacity:.6;cursor:default;box-shadow:none}
.foot{text-align:center;margin-top:18px;font-size:13px;color:var(--mut)}
.foot a{color:var(--pri);font-weight:600;text-decoration:none}
.foot a:hover{text-decoration:underline}
.formerr{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;display:none}
.formerr.show{display:block}
@media(max-width:420px){.card{padding:24px 18px;border-radius:16px}}