:root{
  --accent:#6b4eff;
  --bg:#f5f7fb;
  --card:#ffffff;
  --muted:#666;
  --lavender:#E6E6FA; /* banner */
  --ink:#1f2937;      /* base text */
  --ink-strong:#1a1740; /* banner title */
  --ink-soft:#4b5563; /* muted */
  --border:#e2e8f0;
  --border-soft:#e6e9f6;
  --footer-bg:#fff;
  --footer-border:#eee;
}

html,body{
  height:100%;
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--ink);
}

/* Ensure padding and borders are included in width to prevent overflow */
*,*::before,*::after{box-sizing:border-box;}

/* Prevent images from overflowing their containers */
img{max-width:100%;height:auto;}

.page{min-height:100%;display:flex;flex-direction:column;}

/* Top banner */
header{
  padding:1.2rem;
  text-align:center;
  background:var(--lavender);
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
  border-bottom:1px solid rgba(26,23,64,0.08);
}
header h1{margin:.2rem 0;color:var(--ink-strong);} 
header .lead{margin:0;color:#2f3355;}

/* Header layout with non-overlapping toggle */
header .container{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "left title toggle"
    ". lead .";
  align-items:center;
  gap:.5rem 0;
}
h1{grid-area:title;}
header .lead{grid-area:lead;}
.theme-toggle{grid-area:toggle;justify-self:end;}

/* Theme toggle button */
.icon-btn{appearance:none;-webkit-appearance:none;border:1px solid var(--border);background:transparent;color:#000;width:36px;height:36px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;}
.icon-btn:hover{background:rgba(0,0,0,0.04);} 
/* Ensure Unicode icons inherit color and size consistently */
.icon-btn .icon{font-size:18px;line-height:1;display:inline-block;color:currentColor;}

.container{max-width:960px;margin:1.2rem auto;padding:1rem;flex:1;width:calc(100% - 2rem);}    

.hero{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;}

p.lead{margin:0;color:var(--muted);}    

.signup{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:.6rem;}

form.card{
  background:var(--card);
  padding:1rem;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(38,52,64,0.06);
  display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;max-width:720px;width:100%;
  overflow:hidden; /* keep field visuals within the card */
}

/* Form fields stack vertically and take full width */
.form-field{width:100%;text-align:left;}
.form-field label{display:block;font-weight:600;margin-bottom:.35rem;color:var(--ink-strong);} 
.form-field .help{display:block;margin-top:.35rem;color:var(--muted);font-size:.9rem;}

input[type="email"]{
  width:100%;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--border);font-size:1rem;background:transparent;color:var(--ink);
}

.captcha-wrap{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.captcha-img{height:46px;border-radius:8px;border:1px solid var(--border-soft);} 
.captcha-answer{width:100px;max-width:100%;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--ink);} 

button{background:var(--accent);color:#fff;border:0;padding:.6rem .9rem;border-radius:10px;font-weight:600;cursor:pointer;}
button.secondary{background:#f3f4f6;color:#222;border:1px solid var(--border-soft);} 

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem;}
.card-simple{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(38,52,64,0.04);}    

footer{position:fixed;left:0;right:0;bottom:0;background:var(--footer-bg);border-top:1px solid var(--footer-border);padding:.6rem .8rem;text-align:center;font-size:.9rem;color:var(--muted);}    
.messages{max-width:720px;margin:0.6rem auto;display:flex;flex-direction:column;gap:.4rem;}
.msg{padding:.6rem .8rem;border-radius:8px;}
.msg.success{background:#e6fffa;color:#065f46;border:1px solid #bdeedd;}
.msg.error{background:#fff5f5;color:#7f1d1d;border:1px solid #ffd7d7;}
.msg.info{background:#f8fafc;color:#0f172a;border:1px solid #e6eef8;}

/* ensure content isn't hidden behind fixed footer */
.spacer{height:64px;}

@media (min-width:700px){
  .hero{flex-direction:row;text-align:left;justify-content:space-between;align-items:center;}
}

/* Small screens: keep title centered and move toggle to a floating position to avoid overlap */
@media (max-width:540px){
  header .container{
    grid-template-columns:.5rem auto .5rem; /* tighter gutters */
  }
  /* Float the toggle so it never collides with the title on small screens */
  .theme-toggle{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 10px);
    right:calc(env(safe-area-inset-right, 0px) + 10px);
    z-index:1000;
    justify-self:auto; /* ignore grid placement when fixed */
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
    background:rgba(255,255,255,0.7);
    backdrop-filter:saturate(180%) blur(6px);
  }
  .theme-dark .theme-toggle{
    background:rgba(17,24,39,0.5);
  }
}

/* Dark theme overrides */
.theme-dark{
  --bg:#0b1020;
  --card:#111827;
  --ink:#e5e7eb;
  --ink-strong:#f9fafb;
  --ink-soft:#c7ced8;
  --lavender:#3b2c5a; /* darker banner */
  --border:#334155;
  --border-soft:#374151;
  --footer-bg:#111827;
  --footer-border:#1f2937;
}

.theme-dark html, .theme-dark body{background:var(--bg);color:var(--ink);} /* ensure cascade */
.theme-dark header{border-bottom:1px solid rgba(255,255,255,0.06);} 
.theme-dark header .lead{color:#cfd5ff;}
.theme-dark .icon-btn{border-color:var(--border);} 
.theme-dark .icon-btn{color:#fff;}
.theme-dark .icon-btn:hover{background:rgba(255,255,255,0.06);} 
.theme-dark form.card{box-shadow:0 6px 18px rgba(0,0,0,0.35);} 
.theme-dark button.secondary{background:#1f2937;color:var(--ink);border-color:var(--border-soft);} 
.theme-dark .card-simple{box-shadow:0 6px 18px rgba(0,0,0,0.25);} 

/* Messages in dark theme */
.theme-dark .msg.success{background:rgba(16,185,129,0.12);color:#a7f3d0;border:1px solid rgba(16,185,129,0.35);} 
.theme-dark .msg.error{background:rgba(239,68,68,0.12);color:#fecaca;border:1px solid rgba(239,68,68,0.35);} 
.theme-dark .msg.info{background:rgba(148,163,184,0.12);color:#e5e7eb;border:1px solid rgba(148,163,184,0.35);}