:root{--vi-account-navy:#082b59;--vi-account-blue:#0968e5;--vi-account-orange:#ff7a1a;--vi-account-ink:#15233b;--vi-account-muted:#64748b;--vi-account-line:#dce5ef;--vi-account-bg:#f5f8fc}
.vi-account-page{min-height:70vh;padding:64px 0;background:var(--vi-account-bg)}
.vi-account-shell{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:48px;align-items:center;max-width:1080px;margin:0 auto}.vi-account-shell--single{grid-template-columns:minmax(0,650px);justify-content:center}
.vi-account-copy h1,.vi-account-heading h1,.vi-account-card h1,.vi-account-card h2{color:var(--vi-account-ink);font-weight:800;letter-spacing:-.025em}.vi-account-copy h1{font-size:44px;line-height:1.08;margin:10px 0 16px}.vi-account-copy>p,.vi-account-heading p{font-size:16px;color:var(--vi-account-muted);line-height:1.7;max-width:680px}.vi-account-eyebrow{display:inline-block;color:var(--vi-account-blue);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
.vi-account-role-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}.vi-account-role-list span{display:flex;gap:10px;align-items:center;padding:13px 15px;border:1px solid var(--vi-account-line);border-radius:12px;background:#fff;color:var(--vi-account-ink);font-weight:650}.vi-account-role-list i{color:var(--vi-account-blue)}
.vi-account-card{background:#fff;border:1px solid var(--vi-account-line);box-shadow:0 18px 55px rgba(19,44,78,.08);border-radius:20px;padding:32px}.vi-account-card--wide{max-width:900px;margin:0 auto}.vi-account-card h2{font-size:28px;margin:0 0 5px}.vi-account-muted{color:var(--vi-account-muted);line-height:1.6}.vi-account-form{display:grid;gap:17px;margin-top:24px}.vi-account-form label,.vi-account-grid label{display:grid;gap:7px;color:var(--vi-account-ink);font-size:13px;font-weight:700}.vi-account-form input[type=text],.vi-account-form input[type=password],.vi-account-form input[type=email],.vi-account-grid input{width:100%;height:48px;border:1px solid var(--vi-account-line);border-radius:10px;background:#fff;color:var(--vi-account-ink);padding:0 14px;outline:none}.vi-account-form input:focus,.vi-account-grid input:focus{border-color:#8bbcff;box-shadow:0 0 0 3px rgba(9,104,229,.10)}.vi-account-form small,.vi-account-grid small{color:#dc2626;font-weight:500}.vi-account-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important;font-weight:500!important}.vi-account-check input{width:auto!important;height:auto!important}.vi-account-submit{height:50px;border:0;border-radius:10px;background:var(--vi-account-navy);color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:.18s}.vi-account-submit:hover{background:var(--vi-account-blue)}.vi-account-bottom{display:flex;justify-content:center;gap:6px;margin-top:18px;color:var(--vi-account-muted);font-size:13px}.vi-account-bottom a,.vi-account-forgot{color:var(--vi-account-blue);font-weight:750}.vi-account-forgot{display:block;text-align:center;margin-top:13px;font-size:13px}.vi-account-alert{padding:12px 14px;border-radius:10px;margin:16px 0;font-size:13px}.vi-account-alert--error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.vi-account-alert--success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.vi-account-register{max-width:1000px;margin:auto}.vi-account-heading{text-align:center;margin-bottom:28px}.vi-account-heading h1{font-size:38px;margin:8px 0}.vi-account-heading p{margin:0 auto}.vi-role-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}.vi-role-picker--two{grid-template-columns:repeat(2,1fr)}.vi-role-option{cursor:pointer}.vi-role-option input{position:absolute;opacity:0;pointer-events:none}.vi-role-option>span{height:100%;display:flex;flex-direction:column;gap:5px;padding:17px;border:1px solid var(--vi-account-line);border-radius:13px;background:#fff;transition:.18s}.vi-role-option i{font-size:21px;color:var(--vi-account-blue);margin-bottom:4px}.vi-role-option strong{color:var(--vi-account-ink);font-size:14px}.vi-role-option small{color:var(--vi-account-muted);line-height:1.35;font-size:11px}.vi-role-option input:checked+span{border-color:var(--vi-account-blue);box-shadow:0 0 0 2px rgba(9,104,229,.08);background:#f6faff}.vi-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.vi-span-2{grid-column:span 2}.vi-agent-note{display:flex;gap:10px;margin:18px 0;padding:13px 15px;border-radius:10px;background:#eff6ff;color:#1e4f85;font-size:12px;line-height:1.5}.vi-agent-note i{margin-top:2px}.vi-account-card--wide>.vi-account-submit{width:100%;margin-top:22px}
@media(max-width:900px){.vi-account-page{padding:30px 0 92px}.vi-account-shell{grid-template-columns:1fr;gap:24px}.vi-account-copy{display:none}.vi-account-card{padding:23px;border-radius:15px}.vi-account-heading h1{font-size:29px}.vi-role-picker{grid-template-columns:1fr 1fr}.vi-account-grid{grid-template-columns:1fr}.vi-span-2{grid-column:auto}.vi-account-card--wide{padding:18px}.vi-account-register{padding:0 2px}}
@media(max-width:520px){.vi-role-picker{grid-template-columns:1fr}.vi-role-picker--two{grid-template-columns:1fr}.vi-account-heading{text-align:left}.vi-account-heading p{font-size:14px}.vi-account-card h2{font-size:24px}}
/* Admin/vendor dark template compatibility when these views are embedded or body theme class leaks. */
body.dark .vi-account-page,.dark-mode .vi-account-page,[data-theme=dark] .vi-account-page{--vi-account-bg:#111827;--vi-account-ink:#f8fafc;--vi-account-muted:#a9b6c8;--vi-account-line:#314158;background:var(--vi-account-bg)}
body.dark .vi-account-card,body.dark .vi-account-role-list span,body.dark .vi-role-option>span,.dark-mode .vi-account-card,.dark-mode .vi-account-role-list span,.dark-mode .vi-role-option>span,[data-theme=dark] .vi-account-card,[data-theme=dark] .vi-role-option>span{background:#172033;color:#f8fafc}.dark-mode .vi-account-form input,[data-theme=dark] .vi-account-form input{background:#101827;color:#f8fafc;border-color:#34435a}