/* ============================================================
   common.css — 全局共享基础样式
   导航 / 页脚 / 弹窗 / 按钮 / 表单 / Toast / 动画
   ============================================================ */

:root{--purple:#A5B4FC;--pink:#FBCFE8;--blue:#BFDBFE;--yellow:#FDE68A;--bg:#FDF8FF;--white:#FFFFFF;--dark:#1E1B4B;--muted:#6B7280;--accent:#4F46E5;--clay-shadow:12px 12px 30px rgba(165,180,252,0.15),-10px -10px 20px rgba(255,255,255,0.9),inset 4px 4px 12px rgba(255,255,255,0.8),inset -4px -4px 12px rgba(165,180,252,0.15);--clay-hover:16px 16px 40px rgba(165,180,252,0.25),-12px -12px 25px rgba(255,255,255,1),inset 6px 6px 15px rgba(255,255,255,0.9),inset -6px -6px 15px rgba(165,180,252,0.2);--bounce:all 0.5s cubic-bezier(0.34,1.56,0.64,1);--ease:all 0.3s ease}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--dark);overflow-x:hidden;line-height:1.6}
.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* ---- 导航栏 ---- */
#main-nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1160px;background:rgba(255,255,255,0.72);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.85);border-radius:24px;z-index:900;box-shadow:0 8px 32px rgba(165,180,252,0.12);transition:var(--ease)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 24px;gap:16px}
.brand-mark{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6366F1,#EC4899);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(99,102,241,0.28)}
.brand-mark--sm{width:34px;height:34px;border-radius:10px;box-shadow:0 3px 10px rgba(99,102,241,0.22)}
.brand-mark--lg{width:48px;height:48px;border-radius:14px;box-shadow:0 6px 18px rgba(99,102,241,0.3)}
.brand-cloud-img{width:58%;height:auto;display:block;object-fit:contain}
.nav-logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.nav-logo-text{font-size:22px;font-weight:900;background:linear-gradient(135deg,#6366F1,#EC4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:700;font-size:14px;padding:6px 14px;border-radius:12px;transition:var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--accent);background:rgba(99,102,241,0.08)}
/* OpenClaw：默认与其它导航一致，仅当前页 .active 时保留强调样式 */
.nav-links a.nav-openclaw{color:var(--muted);font-weight:700;font-size:14px;background:transparent;border:1px solid transparent}
.nav-links a.nav-openclaw:hover{color:var(--accent);background:rgba(99,102,241,0.08);border-color:transparent}
.nav-links a.nav-openclaw.active,.nav-links a.nav-openclaw.active:hover{color:#5b21b6;background:rgba(91,33,182,0.1);border:1px solid rgba(91,33,182,0.22);font-weight:800}
.nav-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.btn-ghost{background:none;border:none;color:var(--muted);font-weight:600;font-size:14px;padding:8px 14px;border-radius:12px;cursor:pointer;transition:var(--ease);font-family:inherit}
.btn-ghost:hover{color:var(--accent);background:rgba(99,102,241,0.06)}
.btn-nav-primary{background:linear-gradient(135deg,#818CF8,#A78BFA);color:white;border:none;padding:9px 20px;border-radius:14px;font-weight:700;font-size:14px;cursor:pointer;transition:var(--bounce);font-family:inherit;box-shadow:0 4px 14px rgba(129,140,248,0.35)}
.btn-nav-primary:hover{transform:translateY(-2px) scale(1.03)}
.btn-lang{background:rgba(241,245,249,0.8);border:1.5px solid transparent;color:var(--muted);font-size:16px;width:36px;height:36px;border-radius:12px;cursor:pointer;transition:var(--ease);display:flex;align-items:center;justify-content:center;position:relative}
.btn-lang:hover{background:rgba(99,102,241,0.08);color:var(--accent)}
.btn-lang.lang-active{background:rgba(99,102,241,0.07);border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,0.12)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;border-radius:12px}
.hamburger span{width:22px;height:2px;background:var(--dark);border-radius:2px;transition:var(--ease)}
.user-pill{display:flex;align-items:center;gap:8px;background:rgba(241,245,249,0.9);border-radius:50%;padding:4px;cursor:pointer;transition:var(--ease);font-weight:700;font-size:14px;color:var(--dark);text-decoration:none}
.user-pill:hover{background:rgba(99,102,241,0.08);color:var(--accent)}
.user-avatar{width:28px;height:28px;background:linear-gradient(135deg,#818CF8,#EC4899);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:800}

/* ---- 公共按钮 ---- */
.btn-clay{background:var(--white);color:var(--accent);padding:12px 28px;border-radius:16px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:var(--clay-shadow);border:1.5px solid rgba(255,255,255,0.85);transition:var(--bounce);display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit}
.btn-clay:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--clay-hover)}
.btn-primary{background:linear-gradient(135deg,#818CF8,#A78BFA);color:white;border:none;padding:14px 32px;border-radius:16px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px rgba(129,140,248,0.35);transition:var(--bounce);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 30px rgba(129,140,248,0.5)}

/* ---- 公共标题排版 ---- */
.section-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(99,102,241,0.08);color:var(--accent);font-size:12px;font-weight:700;padding:6px 14px;border-radius:100px;letter-spacing:0.5px;margin-bottom:16px}
.section-title{font-size:clamp(26px,4vw,42px);font-weight:900;line-height:1.2;letter-spacing:-0.5px}
.section-sub{color:var(--muted);font-size:17px;margin-top:12px;max-width:540px}

/* ---- 通用标签按钮（博客分类 / 联系主题等） ---- */
.tag-btn{padding:7px 18px;border-radius:100px;border:1.5px solid #E2E8F0;font-size:13px;font-weight:700;color:var(--muted);background:var(--white);cursor:pointer;font-family:inherit;transition:var(--ease)}
.tag-btn:hover,.tag-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(99,102,241,0.05)}

/* ---- 页脚（全站统一：上圆角 + 柔和紫灰渐变，与浅底页面自然衔接） ---- */
#main-footer{
  margin-top:48px;
  padding:52px 0 36px;
  border-radius:36px 36px 0 0;
  background:linear-gradient(175deg,#f4f2fb 0%,#ebe7f6 14%,#ddd8ef 38%,#cec4e4 62%,#c0b3d9 85%,#b5a8cf 100%);
  color:#475569;
  box-shadow:0 -16px 52px rgba(99,80,180,0.11),inset 0 1px 0 rgba(255,255,255,0.65);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-logo-text{
  font-size:20px;font-weight:900;
  background:linear-gradient(135deg,#4f46e5,#6d4ad6 40%,#7b61ff 75%,#9b87f5);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.footer-brand p{font-size:14px;line-height:1.65;max-width:280px;color:#556070}
.footer-col h4{color:#151528;font-weight:800;font-size:14px;margin-bottom:16px}
.footer-col a{display:block;color:#4b5568;text-decoration:none;font-size:14px;margin-bottom:10px;transition:var(--ease);font-weight:600}
.footer-col a:hover{color:#5f3fd4}
.footer-bottom{
  border-top:1px solid rgba(79,70,150,0.14);
  padding-top:28px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.footer-bottom p{font-size:13px;color:#5c6577}
.footer-langs{display:flex;gap:12px;flex-wrap:wrap}
.footer-langs a{color:#5c6577;font-size:12px;font-weight:600;text-decoration:none;transition:var(--ease);cursor:pointer}
.footer-langs a:hover{color:#5f3fd4}

/* ---- 弹窗通用 ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.6);backdrop-filter:blur(10px);z-index:1500;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
@keyframes modal-in{from{opacity:0;transform:scale(0.88) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;background:#F1F5F9;border:none;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:var(--ease)}
.modal-close:hover{background:#E2E8F0}

/* ---- 登录 / 注册弹窗 ---- */
.auth-modal{background:var(--white);border-radius:32px;padding:40px;width:100%;max-width:420px;position:relative;box-shadow:0 32px 80px rgba(15,23,42,0.3);animation:modal-in 0.35s cubic-bezier(0.34,1.56,0.64,1)}
.auth-logo{font-size:22px;font-weight:900;text-align:center;margin-bottom:8px;background:linear-gradient(135deg,#6366F1,#EC4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-logo--brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:12px;background:none;-webkit-text-fill-color:initial}
.auth-logo--brand .auth-logo-text{font-size:22px;font-weight:900;background:linear-gradient(135deg,#6366F1,#EC4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-tabs{display:flex;gap:0;margin:20px 0 24px}
.auth-tab{flex:1;padding:10px 0 13px;text-align:center;border:none;background:none;font-weight:700;font-size:16px;color:var(--muted);cursor:pointer;font-family:inherit;transition:var(--ease);position:relative}
.auth-tab:hover{color:var(--dark)}
.auth-tab.active{color:var(--dark)}
.auth-tab.active::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2.5px;background:var(--accent);border-radius:2px}
.auth-form{display:none}
.auth-form.active{display:block}

/* ---- 表单 ---- */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;font-weight:700;color:#475569;margin-bottom:6px}
.form-input{width:100%;padding:12px 16px;border:1.5px solid #E2E8F0;border-radius:12px;font-size:14px;font-weight:500;font-family:inherit;color:var(--dark);background:#F8FAFC;transition:var(--ease);outline:none}
.form-input:focus{border-color:var(--accent);background:var(--white);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.form-row{display:flex;gap:10px}
.form-row .form-input{flex:1}
.btn-send-code{padding:12px 16px;background:#F1F5F9;border:1.5px solid #E2E8F0;border-radius:12px;font-size:13px;font-weight:700;color:var(--accent);cursor:pointer;font-family:inherit;transition:var(--ease);white-space:nowrap}
.btn-send-code:hover{background:rgba(99,102,241,0.08);border-color:var(--accent)}
.btn-send-code:disabled{color:var(--muted);cursor:not-allowed}
.btn-submit{width:100%;padding:14px;background:linear-gradient(135deg,#818CF8,#A78BFA);color:white;border:none;border-radius:14px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;box-shadow:0 6px 20px rgba(129,140,248,0.35);transition:var(--bounce);margin-top:8px}
.btn-submit:hover{transform:translateY(-2px)}
.mode-toggle{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;white-space:nowrap;transition:var(--ease);text-decoration:none}
.mode-toggle:hover{opacity:0.75}
.auth-footer-link{text-align:center;margin-top:16px;font-size:13px;color:var(--muted)}
.auth-footer-link a{color:var(--accent);font-weight:700;cursor:pointer;text-decoration:none}

/* ---- 语言切换弹窗 ---- */
.lang-modal{background:var(--white);border-radius:28px;padding:32px;width:100%;max-width:480px;box-shadow:0 32px 80px rgba(15,23,42,0.25);animation:modal-in 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative}
.lang-modal h3{font-size:20px;font-weight:800;margin-bottom:24px}
.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lang-option{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:1.5px solid #E2E8F0;cursor:pointer;transition:var(--ease);font-weight:600;font-size:14px;color:var(--dark)}
.lang-option:hover{border-color:var(--accent);background:rgba(99,102,241,0.04)}
.lang-option.selected{border-color:var(--accent);background:rgba(99,102,241,0.06);color:var(--accent)}
.lang-flag{font-size:22px}

/* ---- 移动端菜单 ---- */
#mobile-menu{position:fixed;inset:0;background:rgba(15,23,42,0.7);backdrop-filter:blur(12px);z-index:980;display:none;align-items:flex-start;justify-content:flex-end;padding:16px}
#mobile-menu.open{display:flex}
.mobile-nav-panel{background:var(--white);border-radius:24px;padding:28px 24px;width:100%;max-width:320px;box-shadow:0 24px 60px rgba(0,0,0,0.2);animation:modal-in 0.3s cubic-bezier(0.34,1.56,0.64,1);margin-top:16px}
.mobile-nav-panel a{display:block;padding:13px 16px;border-radius:14px;font-weight:700;font-size:16px;color:var(--dark);text-decoration:none;transition:var(--ease)}
.mobile-nav-panel a:hover{background:rgba(99,102,241,0.07);color:var(--accent)}
.mobile-nav-actions{margin-top:16px;padding-top:16px;border-top:1px solid #F1F5F9}

/* ---- Toast 提示 ---- */
#toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:#0F172A;color:white;padding:14px 24px;border-radius:16px;font-size:14px;font-weight:600;z-index:2000;opacity:0;pointer-events:none;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.success{background:#10B981}
#toast.error{background:#EF4444}

/* ---- 滚动入场 / 离场（向上滚出视口时淡出）---- */
.pop-in{opacity:0;transform:scale(0.9) translateY(24px);filter:blur(0);transition:var(--bounce)}
.pop-in.visible{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
.pop-in.visible.scroll-out{opacity:0;transform:scale(0.92) translateY(-32px);filter:blur(6px);pointer-events:none}
.pop-l{opacity:0;transform:translateX(-32px);filter:blur(0);transition:opacity 0.55s cubic-bezier(0.34,1.2,0.64,1),transform 0.55s cubic-bezier(0.34,1.2,0.64,1),filter 0.45s ease}
.pop-l.visible{opacity:1;transform:translateX(0);filter:blur(0)}
.pop-l.visible.scroll-out{opacity:0;transform:translateX(-40px) translateY(-24px) scale(0.96);filter:blur(5px);pointer-events:none}
.pop-r{opacity:0;transform:translateX(32px);filter:blur(0);transition:opacity 0.55s cubic-bezier(0.34,1.2,0.64,1),transform 0.55s cubic-bezier(0.34,1.2,0.64,1),filter 0.45s ease}
.pop-r.visible{opacity:1;transform:translateX(0);filter:blur(0)}
.pop-r.visible.scroll-out{opacity:0;transform:translateX(40px) translateY(-24px) scale(0.96);filter:blur(5px);pointer-events:none}

/* ---- 响应式 ---- */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  #main-footer{margin-top:36px;padding:44px 0 32px;border-radius:28px 28px 0 0}
  #main-footer .footer-bottom{align-items:flex-start}
}
@media(max-width:480px){
  .nav-actions .btn-ghost{display:none}
  .footer-grid{grid-template-columns:1fr}
  .lang-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .pop-in.visible.scroll-out,.pop-l.visible.scroll-out,.pop-r.visible.scroll-out{opacity:1;transform:none;filter:none;pointer-events:auto}
}