/* ===== NANODORE AUTH LAYOUT (Motion-style) ===== */
:root{
  --bg:#0d2c1d; --panel:#0b2418; --text:#E6ECE8; --muted:#B0C2B9;
  --border:#2a3c33; --accent:#00ff99;
  /* Match hero heading size on landing/download (~38px) */
  --heading-size: 2.375rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0D1F1D;
  color:var(--text);
  /* Subtle landing-like background */
  background-image: radial-gradient(circle at 20% 20%, rgba(0,255,153,0.015), transparent 70%);
  background-repeat:no-repeat;
  background-size:cover;
}

/* Animated glow orb from landing */
.glow-orb{position:fixed;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,153,0.4), transparent 70%);
  animation:pulseGlow 6s ease-in-out infinite, driftGlow 12s ease-in-out infinite;
  top:5%;left:50%;transform:translate(-50%, -50%);pointer-events:none;z-index:0}
@keyframes pulseGlow{0%,100%{transform:translate(-50%, -50%) scale(1);opacity:.4}50%{transform:translate(-50%, -50%) scale(1.2);opacity:.5}}
@keyframes driftGlow{0%{left:50%;top:45%}25%{left:53%;top:43%}50%{left:47%;top:48%}75%{left:52%;top:46%}100%{left:50%;top:45%}}

/* Reduce glow orb size and intensity on mobile */
@media (max-width: 768px) {
  .glow-orb {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0,255,153,0.08), transparent 70%);
    animation: pulseGlowMobile 6s ease-in-out infinite, driftGlowMobile 12s ease-in-out infinite;
  }
  
  @keyframes pulseGlowMobile {
    0%,100%{transform:translate(-50%, -50%) scale(1);opacity:.08}
    50%{transform:translate(-50%, -50%) scale(1.1);opacity:.12}
  }
  
  @keyframes driftGlowMobile {
    0%{left:50%;top:45%}
    25%{left:52%;top:43%}
    50%{left:48%;top:48%}
    75%{left:51%;top:46%}
    100%{left:50%;top:45%}
  }
}

@media (max-width: 480px) {
  .glow-orb {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0,255,153,0.05), transparent 70%);
  }
}

/* Simple centered auth screen */
.auth-screen{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:32px}
.back-link{position:absolute;top:24px;left:24px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#E6ECE8;border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);z-index:10}
.back-link:hover{box-shadow:0 8px 24px rgba(0,255,153,.18)}
.brand-center{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px}
.brand-center .app-icon{height:72px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.auth-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;width:100%;max-width:460px;padding:32px}
.auth-card h1{margin:10px 0 18px;font-weight:400;text-align:center;font-size:2.2rem;line-height:1.2}
.auth-card .sub{text-align:center;color:var(--muted);margin-bottom:14px}

/* Compact header (to match index) */
.navbar-links a{color:#E6ECE8;text-decoration:none;margin-left:16px;font-size:.95rem}
.navbar-cta{background:#fff;color:#0b2418;padding:8px 12px;border-radius:10px;font-weight:600;text-decoration:none;line-height:1}
.navbar-cta:hover{box-shadow:0 8px 24px rgba(0,255,153,.25)}
.download-icon svg{display:block}

/* Legacy split (kept for download page); not used on login/signup after simplification */
.auth-container{display:grid;grid-template-columns:repeat(12,1fr);min-height:100vh}
.auth-left{grid-column:1 / span 6;display:grid;place-items:center;padding:40px 24px}
.auth-right{grid-column:7 / span 6;position:relative;overflow:hidden;display:grid;place-items:center;padding:40px 24px}

/* Right hero (download page) */
.auth-hero{position:absolute;inset:0;background:
  radial-gradient(900px 600px at 70% 30%, rgba(0,255,153,.16), transparent 60%),
  linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.55))}
.auth-hero-content{position:relative;z-index:1;max-width:520px;text-align:center}
.auth-hero-content h2{margin:0 0 8px;font-weight:500}
.hero-sub{margin:0 0 16px;color:var(--muted)}
.logo-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.badge{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  padding:6px 10px;border-radius:999px;font-size:12px;color:#e7f7f0}

/* Card + form */
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  width:100%;max-width:420px;padding:28px}
.card h1{margin:0 0 12px;font-weight:300px}
.sub{color:var(--muted);font-size:.95rem;margin-bottom:14px}

/* Form field groups and validation */
.field-group {
  margin-bottom: 16px;
}

.field-label{display:block;color:#cdd6d0;font-size:.9rem;margin:8px 0 6px;font-weight:500}
.name-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width: 520px){.name-grid{grid-template-columns:1fr}}

/* Legal disclaimer styling */
.legal-disclaimer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 16px 0 20px 0;
  padding: 0 16px;
}

.legal-disclaimer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.legal-disclaimer a:hover {
  text-decoration: underline;
}

/* Error messages */
.error-message {
  color: #ff6b6b;
  font-size: 0.8rem;
  margin-top: 4px;
  padding: 4px 0;
  min-height: 20px;
  font-weight: 500;
}

.global-error {
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  text-align: center;
}

/* Button states and loading */
.btn{width:100%;height:46px;border:1px solid rgba(255,255,255,.12);border-radius:10px;
  background:#fff;color:#0b2418;font-weight:600;letter-spacing:.01em;cursor:pointer;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:.95rem;line-height:1;transition:all 0.2s ease}
.btn.neutral{background:#f2f4f3}
.btn.apple{background:#000;color:#fff;border-color:#000}
.btn-primary{background:var(--accent);color:#0b2418;border:none;margin-top:4px}

/* Button loading state */
.btn-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spinner {
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Consistent hover glow like index/download */
.btn:hover{box-shadow:0 8px 24px rgba(0,255,153,.22)}

/* Focus states for accessibility */
.btn:focus,
input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 255, 153, 0.3);
}

input:focus {
  border-color: var(--accent);
}

.divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  color:var(--muted);font-size:.9rem;margin:14px 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--border)}

input[type="email"],input[type="password"]{
  width:100%;height:44px;border-radius:8px;background:#0b1f16;border:1px solid var(--border);
  color:var(--text);padding:0 12px;margin-bottom:10px;transition:border-color 0.2s ease}
input[type="text"]{width:100%;height:44px;border-radius:8px;background:#0b1f16;border:1px solid var(--border);color:var(--text);padding:0 12px;margin-bottom:10px;transition:border-color 0.2s ease}

/* Input validation states */
input.error {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.3);
}

input.valid {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 255, 153, 0.3);
}

/* Right preview card (login) */
.preview-card{position:relative;z-index:1;background:rgba(11,36,24,.7);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:24px;width:100%;max-width:480px}
.preview-card h2{margin:0 0 12px;color:var(--accent)}
.preview-item{background:#0b2418;border:1px solid rgba(255,255,255,.06);border-radius:8px;
  padding:10px 12px;margin-bottom:8px}

/* Mobile optimizations */
@media (max-width: 768px){
  .auth-container{grid-template-columns:1fr}
  .auth-left{grid-column:1 / -1;padding:24px}
  .auth-right{grid-column:1 / -1;padding:24px}
  
  /* Reduce glow orb size and intensity on mobile */
  .glow-orb{
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0,255,153,0.15), transparent 70%);
    animation: pulseGlowMobile 6s ease-in-out infinite, driftGlowMobile 12s ease-in-out infinite;
  }
  
  @keyframes pulseGlowMobile{
    0%,100%{transform:translate(-50%, -50%) scale(1);opacity:.15}
    50%{transform:translate(-50%, -50%) scale(1.1);opacity:.2}
  }
  
  @keyframes driftGlowMobile{
    0%{left:50%;top:45%}
    25%{left:52%;top:43%}
    50%{left:48%;top:48%}
    75%{left:51%;top:46%}
    100%{left:50%;top:45%}
  }
  
  /* Mobile auth screen adjustments */
  .auth-screen{
    padding: 16px;
    min-height: 100vh;
  }
  
  .auth-card{
    padding: 24px;
    margin: 0 8px;
  }
  
  .card{
    padding: 20px;
    margin: 0 8px;
  }
  
  /* Mobile typography adjustments */
  .auth-card h1{
    font-size: 1.8rem;
    margin: 8px 0 16px;
  }
  
  .card h1{
    font-size: 1.6rem;
    margin: 0 0 10px;
  }
  
  /* Mobile form adjustments */
  .field-group{
    margin-bottom: 14px;
  }
  
  .field-label{
    font-size: 0.85rem;
    margin: 6px 0 4px;
  }
  
  input[type="email"], input[type="password"], input[type="text"]{
    height: 42px;
    font-size: 16px; /* Prevents zoom on iOS */
    margin-bottom: 8px;
  }
  
  /* Mobile button adjustments */
  .btn{
    height: 44px;
    font-size: 0.9rem;
    margin-bottom: 10px;
  }
  
  /* Mobile divider adjustments */
  .divider{
    margin: 12px 0;
    font-size: 0.85rem;
  }
  
  /* Mobile legal disclaimer */
  .legal-disclaimer{
    font-size: 0.75rem;
    margin: 12px 0 16px 0;
    padding: 0 12px;
    line-height: 1.3;
  }
  
  /* Mobile back link adjustments */
  .back-link{
    top: 16px;
    left: 16px;
    padding: 6px 8px;
    font-size: 0.9rem;
  }
  
  /* Mobile brand center adjustments */
  .brand-center{
    margin-bottom: 16px;
  }
  
  .brand-center .app-icon{
    height: 56px;
  }
  
  /* Mobile sub text adjustments */
  .sub{
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px){
  .auth-screen{
    padding: 12px;
  }
  
  .auth-card{
    padding: 20px;
    margin: 0 4px;
  }
  
  .card{
    padding: 16px;
    margin: 0 4px;
  }
  
  .auth-card h1{
    font-size: 1.6rem;
  }
  
  .card h1{
    font-size: 1.4rem;
  }
  
  .glow-orb{
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(0,255,153,0.1), transparent 70%);
  }
  
  .name-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .legal-disclaimer{
    font-size: 0.7rem;
    padding: 0 8px;
  }
}

/* Animated glow */
.auth-hero {
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 70% 30%, rgba(0,255,153,.18), transparent 60%),
    radial-gradient(600px 400px at 30% 70%, rgba(255,255,120,.10), transparent 55%),
    linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  animation: glowShift 10s ease-in-out infinite;
}
@keyframes glowShift{
  0%,100% { filter: hue-rotate(0deg) brightness(1); }
  50%     { filter: hue-rotate(-12deg) brightness(1.05); }
}

/* Prompt bar (right dashboard mock) */
.prompt-demo {
  position: relative; z-index:1;
  width:100%; max-width:560px;
  background: rgba(11,36,24,.75);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.prompt-input {
  display:flex; align-items:center; gap:10px;
  background:#0b1f16; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px;
}
.prompt-input input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-size:15px;
}
.prompt-go {
  border:none; border-radius:10px; padding:10px 12px;
  background:var(--accent); color:#0b2418; font-weight:700; cursor:pointer;
}
.prompt-list { margin-top:12px }
.prompt-item {
  background:#0b2418; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 12px; margin-top:8px;
}

/* Split center line (subtle) */
.auth-container::after{
  content:""; position:fixed; left:50%; top:0; bottom:0; width:1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.06), transparent);
  pointer-events:none;
}

/* SSO buttons with icons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; border-radius: 12px; height: 48px;
  border: 1px solid rgba(255,255,255,.12); background:#fff; color:#0b2418;
}
.btn.neutral { background:#f2f4f3 }
.btn.apple   { background:#000; color:#fff; border-color:#000 }
.btn svg { width: 18px; height: 18px; display:block; overflow:visible; position:relative; top:-1px; flex-shrink:0 }
.btn .ms-grid { display:grid; grid-template-columns:repeat(2,10px); gap:2px; align-items:center; flex-shrink:0 }
.btn .ms-grid span { width:10px; height:10px; display:block }
.btn .ms-r { background:#F25022 } .btn .ms-g { background:#7FBA00 }
.btn .ms-b { background:#00A4EF } .btn .ms-y { background:#FFB900 }

/* Success banner for new signups */
.success-banner {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.9);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  max-width: 400px;
  z-index: 1000;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,255,153,0.2);
}

.success-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.success-text h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--accent);
}

.success-text p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
}

.success-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  line-height: 1;
}

.success-close:hover {
  color: #fff;
}

/* ==== VERIFICATION CODE STYLES ==== */
.verification-text {
  text-align: center;
  color: var(--muted);
  margin: 0 0 8px 0;
}

.email-display {
  text-align: center;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 32px 0;
  word-break: break-all;
}

.verification-code {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

.code-input {
  width: 50px !important;
  height: 60px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0;
  background: #0b1f16;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.code-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,255,153,0.1);
}

.verification-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.verification-actions .btn {
  width: auto;
  min-width: 120px;
}

/* Mobile verification code adjustments */
@media (max-width: 768px) {
  .verification-code {
    gap: 8px;
    margin-bottom: 24px;
  }
  
  .code-input {
    width: 45px !important;
    height: 55px;
    font-size: 1.1rem;
  }
  
  .verification-actions {
    gap: 16px;
    margin-bottom: 20px;
  }
  
  .verification-actions .btn {
    min-width: 100px;
  }
}

/* Mobile optimizations for auth screens */
@media (max-width: 768px) {
  .auth-screen {
    padding: 16px;
  }
  
  .auth-card {
    padding: 24px;
    max-width: 100%;
    margin: 0 8px;
  }
  
  .auth-card h1 {
    font-size: 1.8rem;
  }
  
  .back-link {
    top: 16px;
    left: 16px;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
  
  .card {
    padding: 20px;
    max-width: 100%;
  }
  
  .field-group {
    margin-bottom: 14px;
  }
  
  .btn {
    height: 44px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .auth-screen {
    padding: 12px;
  }
  
  .auth-card {
    padding: 20px;
    margin: 0 4px;
  }
  
  .auth-card h1 {
    font-size: 1.6rem;
  }
  
  .back-link {
    top: 12px;
    left: 12px;
    font-size: 0.85rem;
    padding: 5px 7px;
  }
  
  .card {
    padding: 16px;
  }
  
  .btn {
    height: 42px;
    font-size: 0.85rem;
  }
  
  .legal-disclaimer {
    font-size: 0.75rem;
    margin: 12px 0 16px 0;
    padding: 0 8px;
  }
  
  .verification-code {
    gap: 6px;
  }
  
  .code-input {
    width: 40px !important;
    height: 50px;
    font-size: 1rem;
  }
  
  .verification-actions {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  
  .verification-actions .btn {
    width: 100%;
    max-width: 200px;
  }
}