/* ============================================================
   Regency Analytics LLC — Shared Components
   Login portal UI (used on both index.html and login.html).
   Requires: tokens.css loaded first.
   ============================================================ */
/* LOGIN PORTAL (Admin + Client) */ .login-portal {   max-width: 1100px;   margin: 0 auto;   padding: 0 48px; } .login-shell {   border-radius: 18px;   border: 1px solid rgba(10, 17, 33, 0.14);   background: rgba(255, 255, 255, 0.82);   backdrop-filter: blur(10px);   box-shadow: 0 24px 70px rgba(8, 18, 37, 0.12);   overflow: hidden; } .login-head {   padding: 28px 28px 16px 28px;   display: flex;   gap: 16px;   align-items: flex-start;   justify-content: space-between; } .login-title {   font-family: var(--font-display);   font-size: 26px;   font-weight: 800;   letter-spacing: 0.2px;   color: var(--navy-900);   margin-bottom: 6px; } .login-subtitle {   font-size: 14px;   color: var(--gray-500);   max-width: 62ch; } .login-tabs {   display: inline-flex;   gap: 8px;   border-radius: 999px;   padding: 6px;   background: rgba(8, 18, 37, 0.06);   border: 1px solid rgba(8, 18, 37, 0.08); } .login-tab {   appearance: none;   border: none;   background: transparent;   font-family: var(--font-body);   font-size: 13px;   font-weight: 700;   letter-spacing: 0.2px;   color: var(--gray-500);   padding: 10px 14px;   border-radius: 999px;   cursor: pointer;   transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);   display: inline-flex;   align-items: center;   gap: 8px;   user-select: none; } .login-tab:hover { transform: translateY(-1px); } .login-tab[aria-selected="true"] {   background: linear-gradient(135deg, rgba(15,43,91,1) 0%, rgba(59,111,232,1) 100%);   color: var(--white);   box-shadow: 0 10px 26px rgba(15, 43, 91, 0.18); } .login-body {   display: grid;   grid-template-columns: 1.2fr 0.8fr;   gap: 0;   border-top: 1px solid rgba(10, 17, 33, 0.10); } .login-panel {   padding: 22px 28px 28px 28px; } .login-aside {   padding: 22px 22px 28px 22px;   border-left: 1px solid rgba(10, 17, 33, 0.10);   background: radial-gradient(1200px 420px at 10% 10%, rgba(201,169,110,0.18), transparent 55%),               radial-gradient(900px 500px at 90% 30%, rgba(59,111,232,0.14), transparent 55%); } .login-card {   border-radius: 16px;   border: 1px solid rgba(10, 17, 33, 0.10);   background: rgba(255, 255, 255, 0.78);   padding: 16px; } .login-form {   margin-top: 14px;   display: grid;   gap: 12px; } .login-row {   display: grid;   gap: 6px; } .login-label {   font-size: 13px;   font-weight: 700;   color: var(--navy-900); } .login-input {   height: 46px;   border-radius: 12px;   border: 1px solid rgba(10, 17, 33, 0.16);   background: rgba(255,255,255,0.95);   padding: 0 14px;   font-family: var(--font-body);   font-size: 14px;   outline: none;   transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .login-input:focus {   border-color: rgba(59,111,232,0.6);   box-shadow: 0 0 0 4px rgba(59,111,232,0.16); } .login-actions {   display: flex;   align-items: center;   justify-content: space-between;   gap: 12px;   margin-top: 6px;   flex-wrap: wrap; } .login-link {   font-size: 13px;   font-weight: 700;   color: var(--blue-600);   cursor: pointer; } .login-link:hover { text-decoration: underline; } .login-submit {   border: none;   cursor: pointer;   border-radius: 12px;   height: 46px;   padding: 0 16px;   font-family: var(--font-body);   font-size: 14px;   font-weight: 800;   letter-spacing: 0.2px;   color: var(--white);   background: linear-gradient(135deg, rgba(15,43,91,1) 0%, rgba(59,111,232,1) 100%);   box-shadow: 0 14px 30px rgba(15, 43, 91, 0.18);   display: inline-flex;   align-items: center;   gap: 10px;   transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .login-submit:hover {   transform: translateY(-1px);   box-shadow: 0 18px 36px rgba(15, 43, 91, 0.22); } .login-note {   margin-top: 10px;   font-size: 12px;   color: var(--gray-500);   line-height: 1.5; } .login-alert {   display: none;   border-radius: 12px;   padding: 12px 12px;   border: 1px solid rgba(220, 38, 38, 0.20);   background: rgba(220, 38, 38, 0.06);   color: #991B1B;   font-size: 13px;   font-weight: 700; } .login-alert.show { display: block; } .login-success {   display: none;   border-radius: 12px;   padding: 12px 12px;   border: 1px solid rgba(5, 150, 105, 0.24);   background: rgba(5, 150, 105, 0.08);   color: #065F46;   font-size: 13px;   font-weight: 800; } .login-success.show { display: block; } .login-inline {   display: flex;   gap: 10px;   align-items: center;   flex-wrap: wrap; } .login-pill {   display: inline-flex;   align-items: center;   gap: 8px;   padding: 8px 10px;   border-radius: 999px;   border: 1px solid rgba(10, 17, 33, 0.10);   background: rgba(255,255,255,0.85);   font-size: 12px;   font-weight: 800;   color: var(--navy-900); } .login-muted {   font-size: 12px;   color: var(--gray-500);   font-weight: 600;   line-height: 1.55; } @media (max-width: 980px) {   .login-portal { padding: 0 16px; }   .login-body { grid-template-columns: 1fr; }   .login-aside { border-left: none; border-top: 1px solid rgba(10, 17, 33, 0.10); }   .login-head { flex-direction: column; align-items: flex-start; } }