/* Shared styles for /login, /register, /account, /api pages. */

.nav-auth{font-size:11.5px;color:var(--tx2);transition:color 0.2s;letter-spacing:0.02em}
.nav-auth:hover{color:var(--tx)}

/* ---------- shared shell ---------- */
.auth-shell{
  min-height:100vh;padding:120px 1.2rem 4rem;
  display:flex;flex-direction:column;align-items:center;
}
.auth-card{
  width:100%;max-width:420px;
  background:var(--card);border:1px solid var(--bd);
  border-radius:14px;padding:2.2rem 2rem;
}
.auth-card-wide{max-width:880px}

.auth-h{font-size:22px;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px}
.auth-sub{font-size:13px;color:var(--tx2);margin-bottom:1.6rem;line-height:1.5}

.auth-form{display:flex;flex-direction:column;gap:1.1rem}
.auth-label{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;display:block}
.auth-input{
  width:100%;background:var(--bg2);border:1px solid var(--bd2);
  color:var(--tx);font-family:var(--font);font-size:14px;
  padding:11px 14px;border-radius:8px;transition:border-color 0.2s, box-shadow 0.2s;
}
.auth-input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(74,158,255,0.10)}
.auth-input::placeholder{color:var(--dm)}
.auth-input[readonly]{background:var(--bg);color:var(--tx2);font-family:var(--mono);font-size:12.5px}

.auth-btn{
  background:var(--ac);color:#fff;border:none;font-family:var(--font);
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:8px;
  cursor:pointer;transition:background 0.2s, transform 0.05s;
}
.auth-btn:hover{background:var(--ac2)}
.auth-btn:active{transform:translateY(1px)}
.auth-btn:disabled{opacity:0.6;cursor:not-allowed}
.auth-btn-ghost{
  background:transparent;color:var(--tx2);border:1px solid var(--bd2);
}
.auth-btn-ghost:hover{background:var(--bg2);color:var(--tx)}
.auth-btn-danger{background:var(--rd)}
.auth-btn-danger:hover{background:#dc2626}

.auth-foot{margin-top:1.4rem;font-size:12.5px;color:var(--tx2);text-align:center}
.auth-foot a{color:var(--ac);transition:color 0.2s}
.auth-foot a:hover{color:#fff}

.auth-err{
  background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);
  color:#fda4af;font-size:13px;padding:10px 14px;border-radius:8px;
  margin-bottom:1rem;display:none;
}
.auth-err.show{display:block}
.auth-ok{
  background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.2);
  color:#86efac;font-size:13px;padding:10px 14px;border-radius:8px;
  margin-bottom:1rem;display:none;
}
.auth-ok.show{display:block}

/* "Save this once" — for recovery code / api key reveals */
.reveal{
  background:rgba(124,92,252,0.05);border:1px solid rgba(124,92,252,0.25);
  border-radius:10px;padding:14px 16px;margin-bottom:1.2rem;
}
.reveal-label{font-size:10.5px;color:var(--pp);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.reveal-value{
  font-family:var(--mono);font-size:12.5px;color:#e8e8ee;
  word-break:break-all;background:var(--bg);padding:8px 10px;border-radius:6px;
}
.reveal-warn{font-size:11.5px;color:var(--tx2);margin-top:8px;line-height:1.5}

/* ---------- /api info page ---------- */
.apinfo-hero{
  text-align:center;padding:2.5rem 0 2rem;
}
.apinfo-h{font-size:clamp(28px,5vw,42px);font-weight:800;letter-spacing:-0.02em;margin-bottom:10px}
.apinfo-h span{color:var(--ac)}
.apinfo-sub{font-size:15px;color:var(--tx2);max-width:560px;margin:0 auto;line-height:1.5}

.apinfo-cta{display:flex;gap:12px;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}

.apinfo-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;margin-top:2.2rem;
}
.apinfo-card{
  background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:1.4rem;
}
.apinfo-card h3{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--tx)}
.apinfo-card p{font-size:13px;color:var(--tx2);line-height:1.55}
.apinfo-card .feat-ic{
  width:34px;height:34px;border-radius:8px;
  background:rgba(74,158,255,0.08);color:var(--ac);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.apinfo-card .feat-ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.code-block{
  background:var(--bg2);border:1px solid var(--bd);border-radius:10px;
  padding:14px 18px;font-family:var(--mono);font-size:12.5px;color:var(--tx);
  overflow-x:auto;line-height:1.6;margin:0.8rem 0;
}
.code-block .c-comment{color:var(--dm)}
.code-block .c-method{color:var(--gn)}
.code-block .c-key{color:var(--pp)}

.apinfo-section{margin-top:2.4rem}
.apinfo-section h2{font-size:18px;font-weight:700;margin-bottom:0.6rem}
.apinfo-section p{font-size:13.5px;color:var(--tx2);line-height:1.6;margin-bottom:0.8rem}
.apinfo-section ul{list-style:none;font-size:13.5px;color:var(--tx2);line-height:1.7;padding-left:0}
.apinfo-section ul li{padding-left:1.2em;position:relative}
.apinfo-section ul li::before{content:'›';position:absolute;left:0;color:var(--ac)}

/* ---------- /account dashboard ---------- */
.acct-shell{
  min-height:100vh;padding:100px clamp(1rem,3vw,2rem) 4rem;
  max-width:1100px;margin:0 auto;
}
.acct-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.8rem}
.acct-name{font-size:22px;font-weight:700}
.acct-email{font-size:12.5px;color:var(--tx2);margin-top:2px;font-family:var(--mono)}
.acct-badge{display:inline-block;font-size:10px;padding:3px 8px;border-radius:100px;border:1px solid var(--bd2);color:var(--tx2);letter-spacing:0.04em;text-transform:uppercase;margin-left:6px}
.acct-badge.pending{color:#f59e0b;border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.05)}
.acct-badge.admin{color:var(--pp);border-color:rgba(124,92,252,0.3);background:rgba(124,92,252,0.05)}

.acct-tabs{
  display:flex;gap:2px;border-bottom:1px solid var(--bd);margin-bottom:1.6rem;
  overflow-x:auto;
}
.acct-tab{
  padding:10px 16px;font-size:13px;color:var(--tx2);background:none;border:none;
  cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;
  font-family:var(--font);white-space:nowrap;
}
.acct-tab:hover{color:var(--tx)}
.acct-tab.active{color:var(--ac);border-bottom-color:var(--ac)}

.acct-panel{display:none}
.acct-panel.active{display:block}

.acct-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:14px 0;border-bottom:1px solid var(--bd);
}
.acct-row:last-child{border-bottom:none}
.acct-row-l{flex:1;min-width:0}
.acct-row-title{font-size:13.5px;color:var(--tx);font-weight:500}
.acct-row-meta{font-size:11.5px;color:var(--tx2);margin-top:3px;font-family:var(--mono)}

.acct-stats{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:0.8rem;margin-bottom:1.4rem;
}
.acct-stat{background:var(--bg2);border:1px solid var(--bd);border-radius:10px;padding:14px}
.acct-stat-label{font-size:10.5px;color:var(--tx2);text-transform:uppercase;letter-spacing:0.05em}
.acct-stat-value{font-size:22px;font-weight:700;margin-top:4px;font-family:var(--mono)}

.danger-section{
  background:rgba(239,68,68,0.03);border:1px solid rgba(239,68,68,0.15);
  border-radius:10px;padding:1.2rem;margin-top:1rem;
}
.danger-section h3{font-size:13px;color:var(--rd);margin-bottom:8px}
.danger-section p{font-size:12.5px;color:var(--tx2);margin-bottom:0.9rem;line-height:1.5}

/* ---------- scope picker for key create ---------- */
.scope-row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.scope-chip{
  display:flex;align-items:center;gap:6px;padding:5px 12px;
  background:var(--bg2);border:1px solid var(--bd2);border-radius:100px;
  font-size:12px;color:var(--tx2);cursor:pointer;user-select:none;
  transition:all 0.15s;
}
.scope-chip input{margin:0}
.scope-chip.on{background:rgba(74,158,255,0.08);border-color:var(--ac);color:var(--ac)}

@media (max-width: 640px){
  .auth-shell{padding-top:90px}
  .acct-shell{padding-top:80px}
}