/* ============================================================
   AIEY · 晴蓝主题公共样式
   ============================================================ */

:root {
  --bg: #f4f9fd;
  --card: #ffffff;
  --border: #e1ecf5;
  --border-strong: #cce0ed;
  --c1: #1297ec;
  --c1-rgb: 18,151,236;
  --c2: #7cc4f2;
  --c1-deep: #0e7bc7;
  --fg: #1a2b3c;
  --fg2: #4a5f73;
  --fg3: #8a9eb0;
  --shadow: 0 2px 12px rgba(18,151,236,0.06);
  --shadow-hover: 0 8px 28px rgba(18,151,236,0.12);
  --radius: 18px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ---------- 导航栏 ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(244,249,253,0.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0.6rem 1.5rem;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
}
.nav-link {
  padding:0.45rem 1rem; border-radius:10px; font-size:0.78rem;
  color:var(--fg2); letter-spacing:1.5px; transition:all 0.25s;
  cursor:pointer; border:none; background:none; font-family:inherit;
}
.nav-link:hover, .nav-link.active { color:var(--c1); background:rgba(var(--c1-rgb),0.07); }

/* ---------- 页脚 ---------- */
.footer {
  text-align:center; padding:2.5rem 1rem 2rem; font-size:0.68rem;
  color:var(--fg3); letter-spacing:2px;
}
.footer a { color:var(--c1); transition:opacity 0.3s; }
.footer a:hover { opacity:0.7; }

/* ---------- 按钮 ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.35rem;
  background:var(--c1); color:#fff; border:none; border-radius:10px;
  padding:0.58rem 1.3rem; font-family:inherit; font-size:0.8rem;
  letter-spacing:1.5px; cursor:pointer; transition:all 0.28s;
  box-shadow:0 4px 14px rgba(var(--c1-rgb),0.28);
}
.btn:hover { background:var(--c1-deep); transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--c1-rgb),0.35); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.btn-ghost { background:transparent; color:var(--fg2); border:1px solid var(--border-strong); box-shadow:none; }
.btn-ghost:hover { background:rgba(var(--c1-rgb),0.06); color:var(--c1); border-color:var(--c1); box-shadow:none; }

/* ---------- 页面标题 ---------- */
.page-header { text-align:center; margin-bottom:2.2rem; animation:fadeInUp 0.7s ease both; }
.page-header h1 { font-size:clamp(1.4rem,4vw,1.8rem); font-weight:800; letter-spacing:4px; color:var(--fg); }
.page-header h1 em { color:var(--c1); font-style:normal; }
.page-header .rule { width:48px; height:2px; background:var(--c1); margin:0.8rem auto; border-radius:2px; opacity:0.6; }
.page-header p { font-size:0.82rem; color:var(--fg2); letter-spacing:2px; }

/* ---------- 骨架屏 ---------- */
.skel-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.3rem; margin-bottom:1rem; box-shadow:var(--shadow); }
.skel-row { display:flex; align-items:center; gap:0.8rem; margin-bottom:0.7rem; }
.skel-row:last-child { margin-bottom:0; }
.skel { background:linear-gradient(90deg, var(--border) 25%, #eef5fb 50%, var(--border) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:4px; }
.skel-line { height:10px; border-radius:5px; }
.skel-circle { width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.skel.w40 { width:40%; }
.skel.w70 { width:70%; }
.skel.w90 { width:90%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- 空态 ---------- */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--fg3); font-size:0.85rem; letter-spacing:1px; }

/* ---------- 动画 ---------- */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}

/* ---------- Toast ---------- */
#toastBox { position:fixed; top:1.2rem; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:0.5rem; pointer-events:none; }
.toast { background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:12px; padding:0.7rem 1.2rem; font-size:0.8rem; letter-spacing:0.5px; box-shadow:var(--shadow-hover); animation:fadeInUp 0.35s ease both; pointer-events:auto; display:flex; align-items:center; gap:0.5rem; }
.toast.error { border-color:rgba(179,86,63,0.3); color:#b3563f; }

/* ---------- 表情面板 ---------- */
.cj-emoji-toggle { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.72rem; color:var(--fg3); cursor:pointer; user-select:none; margin-bottom:0.4rem; transition:color 0.25s; }
.cj-emoji-toggle:hover { color:var(--c1); }
.cj-emoji-panel { display:none; flex-wrap:wrap; gap:0.3rem; padding:0.6rem; background:var(--card); border:1px solid var(--border); border-radius:12px; margin-top:0.3rem; max-width:280px; box-shadow:var(--shadow-hover); animation:fadeInUp 0.25s ease both; }
.cj-emoji-panel.active { display:flex; }
.cj-emoji-panel span { cursor:pointer; font-size:1.2rem; padding:0.15rem; border-radius:4px; transition:background 0.2s; line-height:1; }
.cj-emoji-panel span:hover { background:rgba(var(--c1-rgb),0.1); }

/* ---------- 滚动条 ---------- */
.slim-scroll::-webkit-scrollbar { width:4px; }
.slim-scroll::-webkit-scrollbar-track { background:transparent; }
.slim-scroll::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }

/* ---------- 加载动画 ---------- */
.spin { display:inline-block; width:12px; height:12px; border:2px solid var(--c1); border-top-color:transparent; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- 响应式 ---------- */
@media(max-width:640px){
  .nav { padding:0.5rem 0.8rem; gap:0.2rem; }
  .nav-link { padding:0.38rem 0.7rem; font-size:0.72rem; }
}