/* Stand-alone sign-in cards (platform panel sign-in, two-step verification, set-password pages) — the office login's look. */
:root { --brand:#086547; --brand-2:#08734f; --bg:#07392b; --card:#fffef9; --line:#dedfd3; --text:#173d30; --muted:#637367; --danger:#b42318; --ok:#067647; color-scheme:light; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { font-family:"Cairo","Tajawal",system-ui,sans-serif; color:var(--text);
       background:radial-gradient(1200px 600px at 80% -10%, #24674e 0%, transparent 60%), var(--bg);
       display:flex; align-items:center; justify-content:center; padding:24px 16px; min-height:100dvh; }
.card { width:100%; max-width:420px; background:var(--card); border:1px solid var(--line);
        border-top:3px solid #b79955; border-radius:18px; padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.brand .logo { width:38px; height:38px; border-radius:10px; background:var(--brand); border:1px solid #b79955;
               display:grid; place-items:center; color:#f4ecd6; font-weight:700; }
.brand b { font-size:18px; } .brand span { display:block; font-size:12px; color:var(--muted); }
h1 { font-size:20px; margin:18px 0 4px; }
p.sub { color:var(--muted); margin:0 0 18px; font-size:13px; line-height:1.7; }
label { display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
input { width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:#f7f8f2;
        color:var(--text); font-family:inherit; font-size:15px; }
input:focus { outline:none; border-color:var(--brand-2); }
input.code { letter-spacing:.3em; text-align:center; font-size:20px; direction:ltr; }
button, .button { display:block; width:100%; margin-top:22px; padding:13px; border:0; border-radius:11px; cursor:pointer; text-align:center;
         background:var(--brand); color:#fff; font-family:inherit; font-weight:700; font-size:15px; text-decoration:none; }
button.link { background:none; color:var(--muted); margin-top:10px; padding:6px; font-weight:400; font-size:13px; }
input:focus-visible, button:focus-visible, .button:focus-visible { outline:3px solid var(--brand-2); outline-offset:3px; }
.msg { margin-top:16px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.7; }
.msg.err { background:#fff0ec; color:var(--danger); border:1px solid #efc2b8; }
.msg.ok { background:#ecfdf3; color:var(--ok); border:1px solid #abefc6; }
.qr { display:flex; justify-content:center; margin:14px 0 6px; }
.qr svg { width:200px; height:200px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; }
.qr-alt { font-size:12px; color:var(--muted); text-align:center; margin:8px 0 6px; }
.secret { direction:ltr; text-align:center; font-family:ui-monospace,Consolas,monospace; font-size:17px; letter-spacing:.12em;
          background:#f7f8f2; border:1px dashed var(--line); border-radius:11px; padding:12px; word-break:break-all; user-select:all; }
ol.steps { margin:6px 0 0; padding-inline-start:20px; font-size:13px; color:var(--muted); line-height:1.9; }
.small { font-size:12px; color:var(--muted); margin-top:8px; word-break:break-all; direction:ltr; text-align:left; }