/* ===== zz-bot Common Styles — Blue/White Theme ===== */

/* Reset & Variables */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-primary:#f8fafc;--bg-secondary:#f1f5f9;
  --surface:#ffffff;--surface-hover:#f8fafc;
  --accent:#2563eb;--accent-light:#3b82f6;
  --green:#2563eb;--green-dim:#2563eb1a;--cyan:#06b6d4;
  --text-primary:#0f172a;--text-secondary:#64748b;
  --text:#0f172a;--text-dim:#64748b;
  --border:#e2e8f0;--glow:rgba(37,99,235,0.12);
  --mono:'Courier New',Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}

/* Body */
body{
  color:var(--text-primary);
  font-family:var(--sans);
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg-primary);
}

/* Content Layout */
.content{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:6rem 2rem 4rem}

/* Hero Section */
.hero{margin-top:30px;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--border);animation:fadeUp .6s ease both}
.hero h1{font-size:2.25rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-0.03em;color:var(--text-primary)}
.hero h1 .highlight{background:linear-gradient(135deg,var(--accent) 0%,#06b6d4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero .subtitle{font-size:1.1rem;color:var(--text-dim)}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Navigation */
nav{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,0.88);border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
nav .logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text-primary);font-size:1.25rem;font-weight:700;padding:0 1.5rem}
nav .logo svg{width:32px;height:32px}
nav .nav-links{display:flex;gap:.25rem;margin-left:1rem}
nav .nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;padding:.5rem .75rem;border-radius:6px;transition:color .2s,background .2s}
nav .nav-links a:hover{color:var(--accent);background:rgba(37,99,235,0.06)}
nav .nav-links a.active{color:var(--accent);background:rgba(37,99,235,0.08);font-weight:600}

/* Nav Right — Auth Buttons */
nav .nav-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;padding-right:1.5rem}
nav .nav-right .nav-login{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;padding:.4rem .75rem;border-radius:6px;transition:color .2s,background .2s}
nav .nav-right .nav-login:hover{color:var(--accent);background:rgba(37,99,235,0.06)}
nav .nav-right .nav-register{background:var(--accent);color:#fff;text-decoration:none;font-size:.8rem;font-weight:600;padding:.4rem 1rem;border-radius:6px;transition:all .2s}
nav .nav-right .nav-register:hover{background:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 12px var(--glow)}

/* Footer */
footer{position:relative;height:64px;display:flex;align-items:center;justify-content:center;gap:2rem;padding:0 2rem;border-top:1px solid var(--border);z-index:1;background:#fff}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:0.8rem;transition:color 0.3s;display:flex;align-items:center;gap:0.35rem}
.footer-links a:hover{color:var(--accent)}
.copyright{color:var(--text-secondary);font-size:0.75rem;white-space:nowrap}

/* Responsive */
@media(max-width:768px){
  nav .nav-links{display:none}
  nav .nav-right .nav-login{display:none}
}
@media(max-width:640px){
  .content{padding:5rem 1rem 3rem}
}