/* ========================================
   AuraOS — Global Styles
   Shared across all public-facing pages
   ======================================== */

/* ---------- Reset ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }

/* ---------- Typography ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter',
               'PingFang SC', 'Microsoft YaHei', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---------- Brand Utilities ---------- */
.brand-gradient {
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-btn {
  padding: 10px 28px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}
.brand-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
}

/* ---------- Navigation Bar ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 52px;
  background: rgba(5, 5, 8, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-logo {
  position: absolute;
  left: 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.nav-links { display: flex; align-items: center; gap: 8px }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06) }
.nav-link.active { color: #818cf8; background: rgba(99, 102, 241, 0.1) }

/* ---------- Footer ---------- */
.ft {
  text-align: center;
  padding: 24px;
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-top: auto;
}

/* ---------- Footer 固定底部 ---------- */
body { display:flex; flex-direction:column; min-height:100vh }
#main-content { flex:1 }

/* ---------- Navigation Bar (主题跟随 body[data-theme]) ---------- */
body[data-theme="dark"] .nav { background:rgba(5,5,8,.8); border-bottom:1px solid rgba(255,255,255,.04) }
body[data-theme="dark"] .nav-link { color:rgba(255,255,255,.4) }
body[data-theme="dark"] .nav-link:hover,
body[data-theme="dark"] .nav-link.active { color:rgba(255,255,255,.8) }
body[data-theme="dark"] .ctx-menu { background:#13132a; border:1px solid rgba(255,255,255,.06); box-shadow:0 8px 32px rgba(0,0,0,.4) }
body[data-theme="dark"] .ctx-item { color:rgba(255,255,255,.7) }
body[data-theme="dark"] .ctx-item:hover { background:rgba(99,102,241,.1); color:#818cf8 }
body[data-theme="dark"] .ctx-divider { background:rgba(255,255,255,.06) }
body[data-theme="dark"] .footer { border-top:1px solid rgba(255,255,255,.04); background:#050508 }
body[data-theme="dark"] .footer-links a { color:rgba(255,255,255,.25) }
body[data-theme="dark"] .footer-links a:hover { color:rgba(255,255,255,.5) }
body[data-theme="dark"] .footer-copy { color:rgba(255,255,255,.15) }
body[data-theme="dark"] .footer .sep { color:rgba(255,255,255,.1) }
body[data-theme="dark"] ::-webkit-scrollbar-track { background:#050508 }
body[data-theme="dark"] ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.06) }
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.12) }

body[data-theme="light"] .nav { background:rgba(255,255,255,.9); border-bottom:1px solid rgba(0,0,0,.06) }
body[data-theme="light"] .nav-link { color:rgba(0,0,0,.35) }
body[data-theme="light"] .nav-link:hover,
body[data-theme="light"] .nav-link.active { color:rgba(0,0,0,.7) }
body[data-theme="light"] .ctx-menu { background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 32px rgba(0,0,0,.08) }
body[data-theme="light"] .ctx-item { color:rgba(0,0,0,.6) }
body[data-theme="light"] .ctx-item:hover { background:rgba(99,102,241,.06); color:#6366f1 }
body[data-theme="light"] .ctx-divider { background:rgba(0,0,0,.06) }
body[data-theme="light"] .footer { border-top:1px solid rgba(0,0,0,.04); background:#f5f5f7 }
body[data-theme="light"] .footer-links a { color:rgba(0,0,0,.25) }
body[data-theme="light"] .footer-links a:hover { color:rgba(0,0,0,.5) }
body[data-theme="light"] .footer-copy { color:rgba(0,0,0,.15) }
body[data-theme="light"] .footer .sep { color:rgba(0,0,0,.1) }
body[data-theme="light"] ::-webkit-scrollbar-track { background:#f5f5f7 }
body[data-theme="light"] ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.08) }
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.15) }

/* ---------- Nav/Footer 公共样式 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:0 32px;height:52px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nav-logo{position:absolute;left:32px;font-size:15px;font-weight:700;letter-spacing:-.01em;background:linear-gradient(135deg,#00d4ff,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-link{text-decoration:none;font-size:13px;letter-spacing:.04em;transition:color .2s}
.nav-btn{background:linear-gradient(135deg,#00d4ff,#7c3aed);color:#fff;border:none;padding:6px 18px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;letter-spacing:.02em}
.nav-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,212,255,.25)}
.nav-avatar{position:absolute;right:32px;cursor:pointer}
.nav-avatar-img{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#7c3aed);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff;user-select:none}
.ctx-menu{position:absolute;top:38px;right:0;border-radius:10px;padding:4px;min-width:140px;display:none;z-index:200}
.ctx-menu.show{display:block}
.ctx-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .15s;border:none;background:transparent;width:100%;text-align:left}
.ctx-divider{height:1px;margin:4px 0}

.footer{padding:32px 24px;text-align:center}
.footer-links{display:flex;justify-content:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.footer-links a{text-decoration:none;font-size:12px;transition:color .2s}
.footer-copy{font-size:11px;letter-spacing:.05em}
.footer .sep{font-size:11px}

/* ---------- Selection ---------- */
::selection { background: rgba(0, 212, 255, 0.3); color: #fff }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .nav { padding: 0 16px }
  .nav-links { gap: 4px }
  .nav-link { padding: 6px 10px; font-size: 12px }
}