
:root{
 --navy:#071525;--navy2:#0B1F33;--navy3:#102940;
 --gold:#D7AD42;--gold2:#E8C866;--paper:#FFFFFF;
 --ink:#122033;--muted:#667085;--line:#D5DEE8;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body.iauth-page{
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 background:radial-gradient(circle at 16% 14%,rgba(215,173,66,.12),transparent 28%),
 linear-gradient(135deg,var(--navy),var(--navy2) 58%,var(--navy3));
 color:#fff;
}
.iauth-shell{
 width:min(1080px,calc(100% - 32px));min-height:100vh;margin:auto;padding:42px 0;
 display:grid;grid-template-columns:minmax(290px,.82fr) minmax(430px,1.18fr);
 grid-template-areas:"brand card" "selector card";gap:26px 38px;align-content:center;
}
.iauth-brand{grid-area:brand;display:flex;align-items:center;gap:18px}
.iauth-mark{width:72px;height:72px;border-radius:20px;background:var(--gold);color:#111827;
 display:grid;place-items:center;font:900 2.1rem Georgia,serif;box-shadow:0 18px 45px rgba(0,0,0,.25)}
.iauth-brand span,.iauth-eyebrow{color:var(--gold2);font-size:.76rem;letter-spacing:.15em;font-weight:900}
.iauth-brand h1{font:900 2.35rem Georgia,serif;margin:6px 0;color:#fff}
.iauth-brand p{margin:0;color:#C5D2DF;line-height:1.5}
.iauth-selector{grid-area:selector;display:grid;gap:12px}
.iauth-role{display:flex;gap:14px;align-items:center;padding:17px 18px;border-radius:17px;
 border:1px solid #38516C;background:rgba(16,41,64,.82);text-decoration:none;transition:.18s}
.iauth-role:hover{transform:translateY(-1px);border-color:var(--gold);background:#16344F}
.iauth-role.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(215,173,66,.14)}
.iauth-role i{font-style:normal;width:44px;height:44px;border-radius:13px;background:var(--gold);
 color:#111827;display:grid;place-items:center;font-weight:900}
.iauth-role b{display:block;color:#fff;font-size:1.02rem}
.iauth-role small{display:block;color:#BECBD8;margin-top:4px;line-height:1.35}
.iauth-card{grid-area:card;background:var(--paper);color:var(--ink);border:1px solid var(--gold);
 border-top:5px solid var(--gold);border-radius:23px;padding:36px;box-shadow:0 32px 90px rgba(0,0,0,.33)}
.iauth-card h2,.iauth-card h1{font:900 2.15rem Georgia,serif;margin:9px 0;color:var(--ink)}
.iauth-card>p{color:var(--muted);line-height:1.55;margin:0 0 22px}
.iauth-card form{display:grid;gap:17px}
.iauth-card label{display:grid;gap:8px;color:#28384B;font-weight:800}
.iauth-card input{width:100%;padding:14px 15px;border-radius:12px;border:1px solid #B8C5D3;
 background:#F7F9FC;color:#111827;font:inherit}
.iauth-card input:focus{outline:3px solid rgba(215,173,66,.28);border-color:var(--gold)}
.iauth-card button{padding:14px 18px;border:1px solid #B98B18;border-radius:12px;
 background:var(--gold);color:#111827;font-weight:900;font-size:1rem;cursor:pointer}
.iauth-card button.secondary{background:#F7F9FC;border-color:#B8C5D3;color:var(--ink)}
.iauth-security-note{margin-top:20px;padding:13px 14px;border-radius:11px;background:#F4F7FB;color:#536478;font-size:.9rem}
.iauth-alert{padding:13px 15px;border-radius:12px;margin:14px 0;line-height:1.45}
.iauth-alert.error{background:#FEF3F2;color:#B42318;border:1px solid #FECDCA}
.iauth-alert.warning{background:#FFFAEB;color:#7A4D00;border:1px solid #FEDF89}
.iauth-alert.success{background:#ECFDF3;color:#067647;border:1px solid #ABEFC6}
.iauth-verify-shell{width:min(560px,calc(100% - 28px));min-height:100vh;margin:auto;display:grid;place-items:center;padding:30px 0}
.iauth-code-card{text-align:center;width:100%}
.iauth-code-icon{width:66px;height:66px;margin:0 auto 18px;border-radius:19px;background:var(--gold);
 color:#111827;display:grid;place-items:center;font-size:1.8rem}
.iauth-code-form{margin-top:18px}
.iauth-code-form label{text-align:left}
.iauth-code-form input{text-align:center;font-size:2rem;letter-spacing:.38em;font-weight:900;padding-left:calc(15px + .38em)}
.iauth-resend-form{margin-top:12px}
.iauth-back{display:inline-block;margin-top:20px;color:#8A650D;font-weight:800}
@media(max-width:820px){
 .iauth-shell{grid-template-columns:1fr;grid-template-areas:"brand" "selector" "card";align-content:start}
}
@media(max-width:520px){
 .iauth-shell{width:min(100% - 18px,1080px);padding:24px 0}
 .iauth-card{padding:25px 19px}
 .iauth-brand h1{font-size:1.85rem}
 .iauth-mark{width:58px;height:58px}
}
