/* assets/css/auth.css — Authentication pages */
:root{--accent:#00e5ff;--accent2:#00ff88;--bg-base:#070d1a;--bg-card:#0d1628;--border:#1e2f4a;--text:#e8f0fe;--muted:#7a92b8}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Outfit',sans-serif;background:var(--bg-base);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden;color:var(--text)}
.auth-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.auth-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,47,74,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(30,47,74,.4) 1px,transparent 1px);background-size:40px 40px}
.auth-orbs .orb{position:absolute;border-radius:50%;filter:blur(80px)}
.orb1{width:400px;height:400px;background:rgba(0,229,255,.07);top:-100px;left:-100px}
.orb2{width:300px;height:300px;background:rgba(0,255,136,.05);bottom:-80px;right:-80px}
.auth-wrap{position:relative;z-index:1;width:100%;max-width:460px;padding:20px;display:flex;flex-direction:column;gap:20px}
.auth-wide{max-width:680px}
.auth-card{background:rgba(13,22,40,.9);border:1px solid var(--border);border-radius:20px;padding:36px;backdrop-filter:blur(12px)}
.auth-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:28px}
.logo-hex{font-size:2rem;color:var(--accent);filter:drop-shadow(0 0 8px var(--accent))}
.logo-text{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-title{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:6px}
.auth-sub{font-size:.875rem;color:var(--muted);text-align:center;margin-bottom:24px}
.alert{padding:12px 14px;border-radius:8px;font-size:.85rem;margin-bottom:16px}
.alert-error{background:rgba(255,75,110,.1);border:1px solid rgba(255,75,110,.3);color:#ff9ab0}
.alert-success{background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.25);color:var(--accent2)}
.form-group{margin-bottom:16px}
.form-label{display:flex;justify-content:space-between;font-size:.72rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:6px}
.label-link{color:var(--accent);font-size:.72rem;text-transform:none;letter-spacing:0}
.input-wrap{position:relative}
.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:.95rem;pointer-events:none;opacity:.6}
.form-input{width:100%;background:#070d1a;border:1px solid var(--border);border-radius:8px;padding:12px 14px 12px 40px;color:var(--text);font-family:'Outfit',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,229,255,.1)}
select.form-input{-webkit-appearance:none;cursor:pointer}
select.form-input option{background:#0d1628}
.eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:.9rem;opacity:.6;transition:opacity .2s}
.eye-btn:hover{opacity:1}
.form-check{font-size:.83rem;color:var(--muted);margin-bottom:10px}
.form-check input{margin-right:6px;accent-color:var(--accent)}
.form-check a{color:var(--accent)}
.btn-auth{width:100%;padding:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#070d1a;font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;border:none;border-radius:8px;cursor:pointer;transition:all .2s;margin-top:4px}
.btn-auth:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,255,.25)}
.auth-foot{text-align:center;font-size:.83rem;color:var(--muted);margin-top:16px}
.auth-foot a{color:var(--accent)}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-features{display:flex;flex-direction:column;gap:12px}
.feature-item{display:flex;align-items:center;gap:14px;background:rgba(13,22,40,.7);border:1px solid var(--border);border-radius:12px;padding:14px;backdrop-filter:blur(8px)}
.f-icon{font-size:1.3rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(0,229,255,.08);border-radius:8px;flex-shrink:0}
.f-title{font-weight:600;font-size:.88rem}
.f-sub{font-size:.75rem;color:var(--muted);margin-top:2px}
@media(max-width:600px){.form-row2{grid-template-columns:1fr}.auth-card{padding:24px}}

/* ═══════════════════════════════════════════
   LOGIN TABS (Email / Seed Phrase toggle)
═══════════════════════════════════════════ */
.login-tabs {
  display: flex;
  gap: 8px;
  background: #070d1a;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 22px;
}
.login-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all .2s;
}
.login-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #070d1a;
}
.login-tab:not(.active):hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

/* Seed phrase textarea (login form) */
.seed-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: 'DM Mono', monospace;
  font-size: .82rem;
  line-height: 1.6;
  padding: 12px 14px;
}
.seed-hint {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   SEED PHRASE CONFIRMATION PAGE
═══════════════════════════════════════════ */
.seed-warning {
  display: flex;
  gap: 12px;
  background: rgba(245,200,66,0.08);
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.seed-warning-icon {
  font-size: 1.1rem;
  color: var(--gold, #f5c842);
  flex-shrink: 0;
}
.seed-warning strong {
  display: block;
  font-size: .85rem;
  color: var(--gold, #f5c842);
  margin-bottom: 4px;
}
.seed-warning p {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6;
}

.seed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.seed-word {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #111e35;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.seed-num {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  color: var(--dim, #3d5278);
  flex-shrink: 0;
}
.seed-text {
  font-family: 'DM Mono', monospace;
  font-size: .85rem;
  color: var(--text);
  font-weight: 500;
  transition: filter .2s;
}
.seed-text.seed-hidden {
  filter: blur(6px);
  user-select: none;
}

.seed-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 8px;
  color: var(--accent);
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.seed-toggle-btn:hover {
  background: rgba(0,229,255,0.14);
}

.seed-confirm-check {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.seed-confirm-check label {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 600px) {
  .seed-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════
   AUTH LIGHT MODE SUPPORT
═══════════════════════════════════════════ */
[data-theme="light"] {
  --accent:#00c8e0; --accent2:#00cc6a; --bg-base:#f0f4ff;
  --bg-card:#ffffff; --border:#dde5f5; --text:#0f1a35; --muted:#5a6e96;
}
[data-theme="light"] body { background: var(--bg-base); color: var(--text); }
[data-theme="light"] .auth-card { background: rgba(255,255,255,0.95); border-color: var(--border); }
[data-theme="light"] .form-input { background: #f7f9ff; color: var(--text); border-color: var(--border); }
[data-theme="light"] .form-input:focus { border-color: var(--accent); }
[data-theme="light"] .auth-grid { background-image: linear-gradient(rgba(180,200,240,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(180,200,240,.4) 1px,transparent 1px); }
[data-theme="light"] select.form-input option { background: #ffffff; }