/* ============================================================
   auth.css
   Part of KineticAI Frontend — split from v6_updated.html
   ============================================================ */

/* ---- AUTH PAGE ---- */
#page-auth{background:var(--bg0);align-items:center;justify-content:center;position:relative;}
.auth-orb1,.auth-orb2{display:none;}
.auth-wrap{width:100%;max-width:460px;padding:24px;position:relative;z-index:5;}
.auth-back{display:inline-flex;align-items:center;gap:8px;color:var(--text2);font-size:14px;cursor:pointer;border:none;background:none;font-family:var(--font);margin-bottom:28px;padding:0;transition:color .2s;}
.auth-back:hover{color:var(--text);}
.auth-card{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-lg);}
.auth-logo{display:flex;justify-content:center;margin-bottom:22px;}
.auth-header{text-align:center;margin-bottom:26px;}
.auth-portal-tag{display:inline-flex;margin-bottom:10px;}
.auth-h{font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px;color:var(--text);}
.auth-sub{font-size:14px;color:var(--text2);}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg0);border-radius:var(--r);padding:4px;margin-bottom:22px;gap:2px;border:1px solid var(--border);}
.auth-tab{padding:9px;text-align:center;font-size:14px;font-weight:600;cursor:pointer;border-radius:var(--r-sm);border:none;background:none;font-family:var(--font);color:var(--text2);transition:all .15s;}
.auth-tab.ACTIVE{background:var(--bg1);color:var(--text);box-shadow:var(--shadow);}
.form-group{margin-bottom:14px;}
.form-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;display:block;letter-spacing:.2px;text-transform:uppercase;}
.form-input{width:100%;padding:10px 14px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:border-color .15s;box-sizing:border-box;}
.form-input:focus{border-color:var(--neon);background:var(--bg1);}
.form-input::placeholder{color:var(--text3);}
.form-select{width:100%;padding:10px 14px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none;cursor:pointer;appearance:none;box-sizing:border-box;}
.form-select:focus{border-color:var(--neon);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sbtn{width:100%;padding:12px;border:none;border-radius:var(--r);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:all .18s;margin-top:6px;}
.sbtn-g{background:var(--neon);color:#fff;}
.sbtn-g:hover{background:var(--neon2);box-shadow:var(--glow-neon);}
.sbtn-o{background:var(--orange);color:#fff;}
.sbtn-o:hover{background:var(--orange2);}
.sbtn-b{background:var(--blue);color:#fff;}
.sbtn-b:hover{background:var(--blue2);}
.auth-note{font-size:12px;color:var(--text3);text-align:center;margin-top:16px;}


/* ---- Auth Note ---- */
.auth-note{font-size:11px;color:var(--text3);text-align:center;margin-top:10px;line-height:1.5;}

/* ---- Login Role Selector ---- */
.badge-grey{background:var(--bg2);color:var(--text2);border:1px solid var(--border2);}
.role-select{display:flex;gap:8px;}
.role-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 6px;border-radius:var(--r-sm);border:1px solid var(--border2);
  background:var(--bg2);color:var(--text2);font-family:var(--font);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.role-btn i{font-size:15px;}
.role-btn:hover{border-color:var(--text3);}
.role-btn.ROLE-ACTIVE.role-g{background:var(--neon-bg);border-color:var(--neon-border);color:var(--neon);}
.role-btn.ROLE-ACTIVE.role-o{background:var(--orange-bg);border-color:var(--orange-border);color:var(--orange);}
.role-btn.ROLE-ACTIVE.role-b{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue);}