/* portal-auth.css — header login control + license login modal + toast.
   Themed to match the self-service license portal card (subtle neon, sectioned
   card, gradient primary button). Injected on every portal page by portal-auth.js. */

/* ---- Header control (logged-out button + logged-in chip) ------------------ */
#kp-header .kp-auth{ display:inline-flex; align-items:center; gap:8px; }

#kp-header .kp-login-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  color:var(--neon); background:rgba(159,239,0,.08); border:1px solid var(--border-strong);
  padding:8px 14px; border-radius:6px; font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.02em; white-space:nowrap; line-height:1;
}
#kp-header .kp-login-btn:hover{ background:rgba(159,239,0,.16); }
#kp-header .kp-login-btn svg{ width:15px; height:15px; }

/* logged-in: Dashboard button styled + sized to match the Download button next to it */
#kp-header .kp-user{ display:inline-flex; align-items:center; gap:8px; }
#kp-header .kp-dash-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none;
  color:var(--neon); background:rgba(159,239,0,.08); border:1px solid var(--border-strong);
  padding:8px 14px; border-radius:6px; font-weight:700; font-size:13px; white-space:nowrap;
  font-family:'Orbitron',sans-serif; letter-spacing:.02em; line-height:1;
}
#kp-header .kp-dash-btn:hover{ background:rgba(159,239,0,.16); }
#kp-header .kp-dash-btn svg{ width:15px; height:15px; }
#kp-header .kp-logout-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--neon); background:rgba(159,239,0,.08); border:1px solid var(--border-strong);
  width:34px; height:34px; border-radius:6px; padding:0;
}
#kp-header .kp-logout-btn:hover{ color:var(--danger,#ff3b3b); border-color:var(--danger,#ff3b3b); background:rgba(255,59,59,.08); }
#kp-header .kp-logout-btn svg{ width:16px; height:16px; }

.kp-auth-hidden{ display:none !important; }

@media (max-width:720px){
  #kp-header .kp-login-btn .kp-login-label{ display:none; }
  #kp-header .kp-login-btn{ padding:8px 10px; }
}

/* ---- Modal ---------------------------------------------------------------- */
#kp-auth-overlay{
  position:fixed; inset:0; z-index:4000; display:none;
  background:rgba(0,0,0,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:24px 16px;
}
#kp-auth-overlay.kp-open{ display:flex; }

.kp-auth-modal{
  position:relative; width:100%; max-width:432px; overflow:hidden;
  background:rgba(10,14,4,.97); border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(159,239,0,.05), 0 20px 60px rgba(0,0,0,.72), 0 0 60px rgba(159,239,0,.04);
  font-family:'Inter',sans-serif; color:var(--text,#f0f0f0);
  animation:kpAuthIn .16s ease-out;
}
@keyframes kpAuthIn{ from{ transform:translateY(-8px); opacity:0; } to{ transform:none; opacity:1; } }

.kp-auth-head{ display:flex; align-items:center; gap:12px; padding:26px 26px 0; }
.kp-auth-head svg{ width:24px; height:24px; color:var(--neon); flex:0 0 auto; }
.kp-auth-title{ font-family:'Orbitron',sans-serif; font-size:17px; font-weight:700; color:#fff; margin:0; }
.kp-auth-desc{ padding:8px 26px 0; margin:0; font-size:13px; color:var(--text-muted,#9a9a9a); line-height:1.55; }

.kp-auth-form{ padding:20px 26px 22px; }

.kp-auth-field-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.kp-auth-label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted,#9a9a9a); }
.kp-auth-paste{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:rgba(159,239,0,.06); border:1px solid var(--border); border-radius:6px; color:var(--neon);
  font-size:11px; font-weight:600; letter-spacing:.03em; padding:4px 9px; font-family:'Inter',sans-serif;
}
.kp-auth-paste:hover{ background:rgba(159,239,0,.12); border-color:var(--border-strong); }
.kp-auth-paste svg{ width:12px; height:12px; }

.kp-auth-input{
  display:block; width:100%; background:rgba(6,9,2,.96); border:1px solid var(--border-strong,rgba(159,239,0,.28));
  color:var(--text,#f0f0f0); border-radius:10px; padding:13px 15px;
  font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; outline:none;
}
.kp-auth-input:focus{ border-color:var(--neon); box-shadow:0 0 0 3px rgba(159,239,0,.13); }
.kp-auth-input::placeholder{ color:var(--text-dim,#666); letter-spacing:.08em; }

.kp-auth-remember{ display:flex; align-items:center; gap:9px; margin:14px 0 0; font-size:12.5px; color:var(--text-muted,#9a9a9a); cursor:pointer; user-select:none; }
.kp-auth-remember input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative;
  width:16px; height:16px; border:1px solid var(--border-strong); border-radius:4px;
  background:rgba(6,9,2,.9); cursor:pointer;
}
.kp-auth-remember input:checked{ background:var(--neon); border-color:var(--neon); }
.kp-auth-remember input:checked::after{ content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #000; border-width:0 2px 2px 0; transform:rotate(45deg); }

.kp-auth-hint{ margin:8px 0 0; font-size:11.5px; color:var(--text-dim,#666); line-height:1.5; }

.kp-auth-submit{
  position:relative; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  margin-top:16px; padding:14px 20px;
  background:linear-gradient(180deg, rgba(159,239,0,.18) 0%, rgba(159,239,0,.07) 100%);
  border:1px solid var(--border-strong); border-radius:10px; color:var(--neon-bright,#b6ff1a);
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px; letter-spacing:.06em;
  transition:background .15s, border-color .15s; appearance:none; -webkit-appearance:none;
}
.kp-auth-submit:hover{ background:linear-gradient(180deg, rgba(159,239,0,.26) 0%, rgba(159,239,0,.12) 100%); border-color:var(--neon); }
.kp-auth-submit[disabled]{ opacity:.6; cursor:default; }
.kp-auth-submit svg{ width:16px; height:16px; }
.kp-auth-submit.kp-loading{ pointer-events:none; }
.kp-auth-submit.kp-loading svg{ animation:kpSpin .8s linear infinite; }
@keyframes kpSpin{ to{ transform:rotate(360deg); } }

.kp-auth-msg{ font-size:12.5px; margin-top:12px; min-height:1em; line-height:1.5; }
.kp-auth-msg.kp-error{ color:var(--danger,#ff3b3b); }
.kp-auth-msg.kp-warn{ color:var(--warn,#ffcc00); }
.kp-auth-msg.kp-ok{ color:var(--neon); }

.kp-auth-foot{ padding:15px 26px; font-size:12px; color:var(--text-dim,#666); text-align:center; border-top:1px solid var(--border); background:rgba(0,0,0,.22); }
.kp-auth-foot a{ color:var(--neon); text-decoration:none; }
.kp-auth-foot a:hover{ text-decoration:underline; }

.kp-auth-close{
  appearance:none; -webkit-appearance:none;
  position:absolute; top:14px; right:14px; cursor:pointer; background:none; border:0;
  color:var(--text-muted,#9a9a9a); width:30px; height:30px; border-radius:6px; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.kp-auth-close:hover{ color:#fff; background:rgba(255,255,255,.06); }

/* ---- Toast ---------------------------------------------------------------- */
#kp-auth-toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:4100; background:var(--bg-soft,#0a0a0a); color:var(--text,#f0f0f0);
  border:1px solid var(--neon); border-radius:9px; padding:12px 18px;
  font-family:'Inter',sans-serif; font-size:13px; box-shadow:0 12px 40px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; max-width:min(92vw,420px);
}
#kp-auth-toast.kp-show{ opacity:1; transform:translateX(-50%) translateY(0); }
#kp-auth-toast svg{ width:18px; height:18px; color:var(--neon); flex:0 0 auto; }