:root{--bg:#EDF2F0;--surface:#fff;--ink:#12211D;--ink-2:#4E605A;--muted:#5E6E68;--line:#DAE3DF;--line-2:#C6D2CD;--accent:#0C7A62;--accent-2:#0A5F4D;--accent-soft:#DDF1EA;--bad:#A82424;--bad-bg:#FAE2E2;--ok:#0b6b1f;--ok-bg:#E1F3E6}
@media (prefers-color-scheme:dark){:root{--bg:#0C1412;--surface:#131D1A;--ink:#E4EEEA;--ink-2:#A2B4AE;--muted:#77897F;--line:#24342E;--line-2:#31443D;--accent:#3CC29C;--accent-2:#5AD3AF;--accent-soft:#12372D;--bad:#f07272;--bad-bg:#3d1718;--ok:#4cc75a;--ok-bg:#12301a}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif}
[dir=rtl] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
.wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 4px rgba(18,33,29,.06),0 14px 30px rgba(18,33,29,.10);padding:24px;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;gap:11px;align-items:center}
.brand .seal{color:#fff}
.seal{width:40px;height:40px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.seal svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand b{display:block;font:600 16px/1.25 "Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif}
.brand span{font-size:12px;color:var(--muted)}
form{display:flex;flex-direction:column;gap:10px;margin:0}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
input,select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;width:100%;min-width:0}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.row{display:flex;gap:6px}.row input{flex:1}
button,.btn{font:inherit;font-size:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 14px;cursor:pointer}
button.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.pri:hover{background:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm{font-size:12.5px;color:var(--muted);margin:0}
.msg{font-size:13px;border-radius:9px;padding:9px 12px;margin:0}
.msg.err{background:var(--bad-bg);color:var(--bad);font-weight:600}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.foot{display:flex;justify-content:space-between;gap:10px;align-items:center}
a{color:var(--accent)}
code{font-size:12px;background:var(--bg);padding:1px 5px;border-radius:4px}