/* ============================================================
   蔚蓝社区 Blue Community - 科技风主题 (PHP 版)
   主色：蔚蓝 azure / cyan，深蓝底 + 玻璃拟态 + 辉光
   性能优化：减少 backdrop-filter，使用 transform 动画
   视觉多元：渐变装饰条、多色卡片、交错动画
   ============================================================ */
:root{
  --bg:#eef4fb; --bg2:#e6eef8; --bg3:#dce8f5;
  --azure:#3b82f6; --azure-bright:#38bdf8; --azure-deep:#2563eb;
  --cyan:#06b6d4; --purple:#7c5cff; --pink:#ec4899;
  --text:#1c2a3a; --muted:#5a6b82; --faint:#8b98a9;
  --card:rgba(255,255,255,.72); --card-solid:#ffffff;
  --border:rgba(59,130,246,.18); --border-strong:rgba(59,130,246,.42);
  --glow:rgba(56,189,248,.30); --glow-soft:rgba(56,189,248,.12);
  --danger:#ef4444; --warn:#f59e0b; --ok:#10b981;
  --gold:#f59e0b; --teal:#14b8a6; --indigo:#6366f1;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px -12px rgba(30,58,90,.28);
  --font:'Segoe UI','PingFang SC','Microsoft YaHei','Hiragino Sans GB',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden; max-width:100%}
body{
  font-family:var(--font); color:var(--text); background:var(--bg);
  min-height:100vh; line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(180deg, rgba(245,249,255,.86) 0%, rgba(238,245,253,.88) 50%, rgba(232,240,251,.92) 100%),
    url('../img/bg-desktop.jpg');
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* 科技网格底纹 */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:
    linear-gradient(rgba(56,189,248,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
}
a{color:var(--azure-bright); text-decoration:none; transition:color .2s, text-shadow .2s}
a:hover{color:#9fe3ff; text-shadow:0 0 10px var(--glow)}
img{max-width:100%; display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px; position:relative; z-index:1}
.section-title{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:10px; margin:0 0 16px}
.section-title::before{content:''; width:4px; height:18px; border-radius:2px;
  background:linear-gradient(180deg,var(--azure-bright),var(--purple)); box-shadow:0 0 12px var(--glow)}

/* ============ 导航栏 ============ */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; gap:24px; height:62px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--text)}
.brand:hover{text-shadow:0 0 16px var(--glow)}
.brand .logo{width:36px; height:36px; border-radius:10px; flex:none;
  background:url('../img/logo.svg') no-repeat center/cover;
  box-shadow:0 0 18px var(--glow), inset 0 0 12px rgba(255,255,255,.2);
  transition:transform .25s, box-shadow .25s}
.brand:hover .logo{transform:scale(1.08) rotate(-2deg); box-shadow:0 0 26px var(--glow), inset 0 0 12px rgba(255,255,255,.3)}
.brand small{display:block; font-size:10px; font-weight:500; letter-spacing:.3em; color:var(--cyan); opacity:.8}
.nav-links{display:flex; gap:6px; flex:1}
.nav-links a{padding:8px 14px; border-radius:9px; color:var(--muted); font-size:14px; font-weight:600}
.nav-links a:hover{color:var(--text); background:var(--glow-soft)}
.nav-links a.cur{color:var(--text); background:var(--glow-soft)}
.nav-actions{display:flex; align-items:center; gap:10px}
/* 手机端菜单按钮 */
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--azure-bright); font-size:18px; padding:4px 10px; cursor:pointer; font-family:inherit; line-height:1}
.nav-toggle:hover{background:var(--glow-soft)}
/* 手机端下拉菜单 */
.nav-mobile{display:none; flex-direction:column; gap:2px; padding:8px 20px 12px;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border)}
.nav-mobile a{padding:10px 14px; border-radius:8px; color:var(--muted); font-size:14px; font-weight:600}
.nav-mobile a:hover{background:var(--glow-soft); color:var(--text)}
.nav-mobile a.cur{color:var(--text); background:var(--glow-soft)}
.nav-mobile.open{display:flex}

/* ============ 按钮 ============ */
.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; font-size:14px;
  font-weight:600; border:1px solid transparent; cursor:pointer; transition:all .2s; font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep)); color:#fff;
  box-shadow:0 6px 20px -6px var(--glow)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 26px -6px var(--glow)}
.btn-ghost{background:rgba(56,189,248,.08); border-color:var(--border); color:var(--azure-bright)}
.btn-ghost:hover{background:rgba(56,189,248,.16); border-color:var(--border-strong)}
.btn-danger{background:rgba(255,93,108,.14); border-color:rgba(255,93,108,.4); color:#ff8a96}
.btn-danger:hover{background:rgba(255,93,108,.24)}
.btn-warn{background:rgba(255,180,84,.14); border-color:rgba(255,180,84,.4); color:#ffc878}
.btn-warn:hover{background:rgba(255,180,84,.24)}
.btn-sm{padding:6px 12px; font-size:13px; border-radius:8px}
.btn-block{width:100%; justify-content:center}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none!important}
.user-chip{display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:30px;
  background:rgba(56,189,248,.08); border:1px solid var(--border)}
.user-chip:hover{background:rgba(56,189,248,.16)}
.user-chip em.uid{font-style:normal; font-size:11px; color:var(--cyan); margin-left:4px; opacity:.8}

/* ============ 头像 ============ */
.avatar{width:34px; height:34px; border-radius:50%; object-fit:cover;
  background:linear-gradient(135deg,var(--azure-bright),var(--purple));
  display:grid; place-items:center; color:#fff; font-weight:700; flex:none;
  border:2px solid rgba(56,189,248,.4); overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar-lg{width:96px; height:96px; font-size:34px}
.avatar-md{width:52px; height:52px; font-size:18px}
.avatar-sm{width:34px; height:34px; font-size:13px}

/* ============ 卡片 ============ */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); position:relative; overflow:hidden}
.card-pad{padding:22px}
.card-glow::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--border-strong), transparent 40%, transparent 60%, var(--border-strong));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
/* 渐变顶饰条 */
.card-accent{position:relative}
.card-accent::after{content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--azure-bright), var(--purple), var(--cyan));
  opacity:.6; transition:opacity .3s}
.card-accent:hover::after{opacity:1}
/* 流光特效 - 优化：降低频率和透明度 */
.card-stream::before{content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(105deg, transparent 40%, rgba(56,189,248,.04) 50%, transparent 60%);
  pointer-events:none; animation:cardStream 12s ease-in-out infinite; animation-delay:var(--stream-delay, 0s)}
@keyframes cardStream{0%,100%{left:-100%}50%{left:200%}}

/* ============ Hero ============ */
.hero{position:relative; padding:46px 0 30px; overflow:hidden}
.hero h1{font-size:40px; font-weight:800; letter-spacing:.01em; line-height:1.15;
  background:linear-gradient(120deg, var(--azure-deep) 20%, var(--azure-bright) 55%, var(--cyan) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p{color:var(--muted); margin-top:12px; max-width:560px; font-size:15px}
.hero-orb{position:absolute; border-radius:50%; filter:blur(40px); opacity:.5; z-index:-1; animation:float 9s ease-in-out infinite}
.hero-orb.a{width:260px;height:260px;background:radial-gradient(circle,var(--azure-bright),transparent 70%); top:-60px; right:6%}
.hero-orb.b{width:200px;height:200px;background:radial-gradient(circle,var(--purple),transparent 70%); top:80px; right:22%; animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.hero-stats{display:flex; gap:28px; margin-top:26px; justify-content:center}
.hero-stat{display:inline-flex; align-items:baseline; gap:5px; font-size:14px; color:var(--muted)}
.hero-stat b{font-size:22px; font-weight:800; color:var(--text)}
.hero-stats .stat .n{font-size:24px; font-weight:800; color:var(--text)}
.hero-stats .stat .l{font-size:12px; color:var(--faint); letter-spacing:.1em}
.hero-sm{padding:36px 0 24px}
.hero-sm .hero-title{font-size:30px}
.hero-sm .hero-subtitle{font-size:14px}

/* ============ 首页布局 ============ */
.grid-home{display:grid; grid-template-columns:1fr 300px; gap:24px; padding-bottom:48px}
.home-main{min-width:0}
.home-side{display:flex; flex-direction:column; gap:18px}
.side-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px}
.side-title{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:14px;
  display:flex; align-items:center; gap:8px}
.side-title::before{content:''; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--azure-bright),var(--purple)); box-shadow:0 0 10px var(--glow)}
.tag-cloud{display:flex; flex-wrap:wrap; gap:8px}
.tag-cnt{font-style:normal; font-size:11px; opacity:.6; margin-left:2px}
.mini-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0}
.mini-item{padding:0}
.mini-link{display:block; padding:10px 8px; border-radius:8px; transition:background .2s}
.mini-link:hover{background:var(--glow-soft)}
.mini-title{display:block; font-size:13px; font-weight:600; color:#cdddf2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px}
.mini-meta{font-size:11px; color:var(--faint)}

.cat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.cat-card{display:flex; gap:14px; padding:18px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); transition:transform .25s, border-color .25s, box-shadow .25s; cursor:pointer; text-decoration:none; color:var(--text);
  position:relative; overflow:hidden}
.cat-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0;
  background:var(--cat-accent, linear-gradient(90deg, var(--azure-bright), var(--cyan))); opacity:.7; transition:opacity .3s}
.cat-card:hover{transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 14px 34px -14px var(--glow)}
.cat-card:hover::before{opacity:1; height:4px}
.cat-icon{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:22px; flex:none;
  background:var(--cat-icon-bg, linear-gradient(135deg, rgba(56,189,248,.25), rgba(124,92,255,.2)));
  border:1px solid var(--border); color:var(--cat-icon-color, var(--azure-bright));
  transition:transform .3s}
.cat-card:hover .cat-icon{transform:scale(1.1) rotate(-5deg)}
.cat-body{flex:1; min-width:0}
.cat-card h3{font-size:16px; margin-bottom:4px}
.cat-card .desc{font-size:13px; color:var(--muted); line-height:1.5}
.cat-card .count{margin-top:10px; font-size:12px; color:var(--cyan); display:inline-flex; align-items:center; gap:6px}
/* 分类卡片多色变体 */
.cat-card:nth-child(1){--cat-accent:linear-gradient(90deg,var(--azure-bright),var(--cyan)); --cat-icon-color:var(--azure-bright); --cat-icon-bg:linear-gradient(135deg,rgba(56,189,248,.25),rgba(34,211,238,.15))}
.cat-card:nth-child(2){--cat-accent:linear-gradient(90deg,var(--purple),var(--indigo)); --cat-icon-color:#b9a4ff; --cat-icon-bg:linear-gradient(135deg,rgba(124,92,255,.25),rgba(129,140,248,.15))}
.cat-card:nth-child(3){--cat-accent:linear-gradient(90deg,var(--pink),var(--warn)); --cat-icon-color:var(--pink); --cat-icon-bg:linear-gradient(135deg,rgba(255,126,182,.25),rgba(255,180,84,.15))}
.cat-card:nth-child(4){--cat-accent:linear-gradient(90deg,var(--teal),var(--cyan)); --cat-icon-color:var(--teal); --cat-icon-bg:linear-gradient(135deg,rgba(45,212,191,.25),rgba(34,211,238,.15))}
.cat-card:nth-child(5){--cat-accent:linear-gradient(90deg,var(--gold),var(--pink)); --cat-icon-color:var(--gold); --cat-icon-bg:linear-gradient(135deg,rgba(251,191,36,.25),rgba(255,126,182,.15))}
.cat-card:nth-child(6){--cat-accent:linear-gradient(90deg,var(--indigo),var(--azure-bright)); --cat-icon-color:var(--indigo); --cat-icon-bg:linear-gradient(135deg,rgba(129,140,248,.25),rgba(56,189,248,.15))}

/* ============ 帖子列表 ============ */
.post-list{display:flex; flex-direction:column; gap:12px}
.post-item{display:flex; gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--card); transition:transform .2s, border-color .2s; text-decoration:none; color:var(--text);
  position:relative; overflow:hidden}
.post-item::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--azure-bright); border-radius:3px 0 0 3px; opacity:0; transition:opacity .2s}
.post-item:hover{border-color:var(--border-strong); transform:translateX(4px)}
.post-item:hover::before{opacity:1}
.post-item .pi-avatar{flex:none}
.post-item .pi-main{flex:1; min-width:0}
.post-item .pi-title{font-size:15.5px; font-weight:700; color:var(--text); margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s}
.post-item:hover .pi-title{color:var(--azure-bright)}
.post-item .pi-cat{font-size:12px; color:var(--cyan)}
.post-item .pi-meta{display:flex; gap:14px; font-size:12px; color:var(--faint); margin-top:9px; align-items:center; flex-wrap:wrap}
.pi-meta .m{display:inline-flex; align-items:center; gap:4px}
.pi-tags{display:flex; gap:6px; flex-wrap:wrap}

/* ============ 标签 ============ */
.tag{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:12px; border-radius:20px;
  background:rgba(56,189,248,.1); border:1px solid var(--border); color:var(--azure-bright); transition:all .2s}
.tag:hover{background:rgba(56,189,248,.2); border-color:var(--border-strong)}
.tag.purple{background:rgba(124,92,255,.12); border-color:rgba(124,92,255,.3); color:#b9a4ff}
.tag-list{display:flex; flex-wrap:wrap; gap:8px}

/* ============ 侧栏 ============ */
.sidebar{display:flex; flex-direction:column; gap:18px; position:sticky; top:80px; align-self:start}
.mini-list{display:flex; flex-direction:column; gap:2px}
.mini-list a{padding:9px 10px; border-radius:8px; display:flex; gap:9px; align-items:center; color:var(--muted); font-size:13px;
  transition:background .2s, color .2s, padding-left .2s; position:relative}
.mini-list a:hover{background:var(--glow-soft); color:var(--text); padding-left:14px}
.mini-list a::before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2px; height:0;
  background:var(--azure-bright); border-radius:2px; transition:height .2s}
.mini-list a:hover::before{height:60%}
.mini-list .rank{width:18px; text-align:center; font-weight:800; font-size:12px; color:var(--faint)}
.mini-list a:nth-child(1) .rank{color:var(--pink)}
.mini-list a:nth-child(2) .rank{color:var(--azure-bright)}
.mini-list a:nth-child(3) .rank{color:var(--warn)}
.mini-list .ml-title{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ============ 徽章 ============ */
.badge{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; font-size:11px; border-radius:20px; font-weight:600; letter-spacing:.02em}
.badge-super{background:linear-gradient(135deg,#ffb454,#ff7eb6); color:#3a1500; box-shadow:0 0 12px rgba(255,180,84,.4)}
.badge-admin{background:rgba(56,189,248,.2); border:1px solid var(--border-strong); color:#9fe3ff}
.badge-muted{background:rgba(255,93,108,.18); border:1px solid rgba(255,93,108,.4); color:#ff8a96}
.badge-title{background:rgba(124,92,255,.16); border:1px solid rgba(124,92,255,.3); color:#bfa8ff}
.badge-cat{background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.3); color:#7fe9ff}

/* ============ 表单 ============ */
.auth-box{max-width:420px; margin:48px auto}
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:600}
.input, .textarea, select.input{width:100%; padding:11px 14px; background:rgba(8,16,38,.7); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:14px; font-family:inherit; transition:all .2s}
.input:focus, .textarea:focus, select.input:focus{outline:none; border-color:var(--azure-bright);
  box-shadow:0 0 0 3px rgba(56,189,248,.15); background:rgba(8,16,38,.9)}
.textarea{resize:vertical; min-height:140px; line-height:1.7}
.input-hint{font-size:12px; color:var(--faint); margin-top:6px}
.form-error{background:rgba(255,93,108,.1); border:1px solid rgba(255,93,108,.35); color:#ff9aa5;
  padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px}
.form-ok{background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); color:#7ef0c8;
  padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px}

/* ============ 帖子详情 ============ */
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--faint); margin:20px 0}
.breadcrumb a:hover{color:var(--azure-bright)}
.breadcrumb .sep{opacity:.5}
.post-hero{padding:24px 26px}
.post-hero h1{font-size:26px; font-weight:800; margin:10px 0 14px; line-height:1.35; color:var(--text)}
.post-meta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted)}
.post-author{display:flex; align-items:center; gap:10px}
.post-content{padding:4px 26px 26px; font-size:15.5px; line-height:1.9; color:#dbe7f7}
.post-content br+br{display:block; margin-top:6px}
.post-actions{display:flex; gap:12px; padding:16px 26px; border-top:1px solid var(--border); align-items:center; flex-wrap:wrap}
.like-btn{display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:30px; cursor:pointer;
  border:1px solid var(--border); background:rgba(56,189,248,.06); color:var(--muted); font-size:14px; font-weight:600; transition:all .2s; font-family:inherit}
.like-btn:hover{border-color:var(--border-strong); color:var(--azure-bright)}
.like-btn .heart{font-size:16px; transition:transform .2s}
.like-btn.liked{background:linear-gradient(135deg, rgba(255,126,182,.2), rgba(124,92,255,.2)); border-color:rgba(255,126,182,.5); color:#ff9ec7}
.like-btn.liked .heart{color:var(--pink); transform:scale(1.15)}
.like-btn.bumping .heart{animation:pop .4s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1.15)}}

/* 帖子编辑/删除操作 */
.post-owner-actions{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
.btn-edit{border-color:rgba(56,189,248,.3)!important; color:var(--azure-bright)!important}
.btn-edit:hover{background:rgba(56,189,248,.16)!important; border-color:var(--border-strong)!important}
.btn-del{border-color:rgba(255,93,108,.3)!important; color:#ff8a96!important}
.btn-del:hover{background:rgba(255,93,108,.24)!important; border-color:rgba(255,93,108,.5)!important}

/* ============ 回复（嵌套树） ============ */
.reply-section{padding:8px 26px 26px}
.reply-block{padding:16px 0; border-top:1px solid var(--border)}
.reply{display:flex; gap:12px; padding:14px 0}
.reply .r-body{flex:1; min-width:0}
.reply .r-head{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:5px}
.reply .r-name{font-weight:700; font-size:14px; color:var(--text)}
.reply .r-time{font-size:12px; color:var(--faint)}
.reply .r-content{font-size:14px; color:#cdddf2; line-height:1.7; padding:4px 0}
.reply .r-actions{display:flex; gap:14px; margin-top:7px; font-size:12px}
.r-children{margin-left:20px; padding-left:18px; border-left:2px solid var(--glow-soft); margin-top:4px}
.r-children .reply{padding:10px 0}
.r-mention{color:var(--cyan); font-weight:600}
.reply-form{margin-top:8px}
.reply-mini-form{display:none; margin:8px 0 4px}
.reply-mini-form.open{display:block}

/* ============ 资料 ============ */
.profile-head{display:flex; gap:24px; padding:28px; align-items:center; flex-wrap:wrap}
.profile-info h1{font-size:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.profile-info .sig{color:var(--muted); margin-top:8px; font-size:14px}
.profile-info .pinfo{display:flex; gap:18px; margin-top:10px; font-size:13px; color:var(--faint); flex-wrap:wrap}
.profile-tabs{padding:0 26px; border-bottom:1px solid var(--border); display:flex; gap:4px}
.profile-tabs a{padding:13px 18px; color:var(--muted); font-size:14px; font-weight:600; border-bottom:2px solid transparent}
.profile-tabs a.active{color:var(--text); border-color:var(--azure-bright)}

/* ============ 管理面板 ============ */
.admin-grid{display:grid; grid-template-columns:1fr; gap:18px; padding-bottom:48px}
.member-row{display:flex; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap}
.member-row:last-child{border-bottom:none}
.member-row .mr-main{flex:1; min-width:180px}
.member-row .mr-name{font-weight:700; color:var(--text); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.member-row .mr-sub{font-size:12px; color:var(--faint); margin-top:3px}
.member-row .mr-ip{font-family:'SF Mono',Consolas,monospace; font-size:12px; color:var(--cyan); background:rgba(34,211,238,.08); padding:2px 8px; border-radius:6px}
.mr-actions{display:flex; gap:6px; flex-wrap:wrap}
.table-head{display:flex; padding:12px 18px; font-size:11px; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; border-bottom:1px solid var(--border)}
.ban-row{display:flex; justify-content:space-between; align-items:center; padding:11px 18px; border-bottom:1px solid var(--border); font-size:13px}
.ban-row:last-child{border-bottom:none}

/* 成员列表项 */
.member-item{padding:14px 0; border-bottom:1px solid var(--border)}
.member-item:last-child{border-bottom:none}
.member-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.member-cb{width:17px; height:17px; accent-color:var(--cyan); cursor:pointer; flex:none}
.member-cb:disabled{cursor:not-allowed; opacity:.35}
.member-info{flex:1; min-width:160px}
.member-name{font-weight:700; color:var(--text); font-size:14px; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.member-badges{display:flex; gap:5px; flex-wrap:wrap; margin-top:5px}
.member-meta{font-size:12px; color:var(--faint); margin-top:5px; display:flex; gap:14px; flex-wrap:wrap}
.member-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding-left:29px}
.inline-form{display:inline-flex; gap:6px; align-items:center}
.inline-form .input{width:auto; min-width:90px; padding:6px 10px; font-size:13px}

/* 封禁 IP 列表 */
.banned-ip-list{display:flex; flex-direction:column}
.banned-ip-item{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); gap:12px; flex-wrap:wrap}
.banned-ip-item:last-child{border-bottom:none}
.banned-ip-info{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px}
.banned-ip{font-family:'SF Mono',Consolas,monospace; color:var(--cyan); background:rgba(34,211,238,.08); padding:2px 8px; border-radius:6px}
.banned-reason{color:var(--muted)}
.banned-date{color:var(--faint); font-size:12px}

/* 资料编辑 - 头像区域 */
.avatar-section{display:flex; flex-direction:column; gap:14px}
.avatar-preview{margin-bottom:0}
.avatar-input-row{display:flex; gap:10px; align-items:center}
.avatar-input-row .input{flex:1}
.avatar-option{cursor:pointer; border:2px solid transparent; transition:all .2s; border-radius:50%}
.avatar-option:hover{border-color:var(--border-strong)}
.avatar-option.selected{border-color:var(--azure-bright); box-shadow:0 0 14px var(--glow)}

/* ============ 通用 ============ */
.page-head{display:flex; justify-content:space-between; align-items:center; padding:24px 0 18px; flex-wrap:wrap; gap:12px}
.page-head h1{font-size:24px; color:var(--text)}
.muted{color:var(--muted)} .faint{color:var(--faint)} .cyan{color:var(--cyan)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.between{display:flex; justify-content:space-between; align-items:center}
.footer{text-align:center; padding:40px 0 30px; color:var(--faint); font-size:12px; border-top:1px solid var(--border); margin-top:30px}
.pagination{display:flex; gap:6px; justify-content:center; padding:20px 0}
.pagination a, .pagination span{padding:7px 13px; border-radius:8px; font-size:13px; border:1px solid var(--border); color:var(--muted)}
.pagination a:hover{background:var(--glow-soft); color:var(--text)}
.pagination .cur{background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep)); color:#fff; border-color:transparent}
.empty{text-align:center; padding:48px 20px; color:var(--faint)}
.empty .ico{font-size:40px; opacity:.4; margin-bottom:10px}

/* ============ 头像选择器 ============ */
.avatar-picker{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px}
.avatar-opt{width:56px; height:56px; border-radius:12px; overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--bg2)}
.avatar-opt img{width:100%; height:100%}
.avatar-opt.sel{border-color:var(--azure-bright); box-shadow:0 0 14px var(--glow)}
.upload-row{display:flex; gap:10px; align-items:center; margin-top:8px; font-size:12px; color:var(--faint)}
.preview-avatar{width:96px; height:96px; border-radius:14px; overflow:hidden; border:2px solid var(--border-strong); background:var(--bg2)}
.preview-avatar img{width:100%; height:100%}

/* ============ UID 徽章 ============ */
.uid-badge{font-size:13px; font-weight:600; color:var(--cyan); background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.3); padding:2px 9px; border-radius:6px; font-family:'SF Mono',Consolas,monospace}
.uid-mini{font-size:11px; color:var(--faint); font-family:'SF Mono',Consolas,monospace; margin-left:2px}

/* ============ 验证码 ============ */
.captcha-row{display:flex; gap:10px; align-items:center}
.captcha-img{height:46px; width:130px; border-radius:10px; border:1px solid var(--border-strong); background:var(--bg2); cursor:pointer; flex:none}
.captcha-img:hover{border-color:var(--azure-bright); box-shadow:0 0 12px var(--glow-soft)}

/* ============ 门户主页 ============ */
.portal{padding-bottom:50px}
/* 通用 section 头部 */
.section{margin-top:30px}
.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.section-more{font-size:13px; color:var(--muted); transition:color .2s}
.section-more:hover{color:var(--azure-bright)}
/* 新闻列 */
.news-col{padding:20px}
/* Hero 内部容器 */
.hero-inner{position:relative; z-index:1; text-align:center; max-width:1180px; margin:0 auto; padding:0 20px}
.hero-inner .hero-title{font-size:40px; font-weight:800; letter-spacing:.01em; line-height:1.15;
  background:linear-gradient(120deg, var(--azure-deep) 20%, var(--azure-bright) 55%, var(--cyan) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-inner .hero-subtitle{color:var(--muted); margin-top:12px; max-width:560px; margin-left:auto; margin-right:auto; font-size:15px}

.portal-hero{padding:56px 0 36px; text-align:center; position:relative; overflow:hidden}
.portal-hero .hero-orb.a{right:50%; transform:translateX(50%); top:-100px}
.portal-hero .hero-orb.b{right:50%; transform:translateX(50%) translateX(120px); top:-40px}
/* 第三个装饰光球 */
.portal-hero .hero-orb.c{width:160px; height:160px; right:50%; transform:translateX(50%) translateX(-140px); top:20px;
  background:radial-gradient(circle,var(--teal),transparent 70%); animation-delay:-5s}
/* 左侧贴边光球 */
.portal-hero .hero-orb.d{width:300px; height:300px; left:-80px; top:-40px;
  background:radial-gradient(circle,var(--azure-bright),transparent 70%); opacity:.3; animation-delay:-2s}
/* 右侧贴边光球 */
.portal-hero .hero-orb.e{width:280px; height:280px; right:-80px; top:-60px;
  background:radial-gradient(circle,var(--purple),transparent 70%); opacity:.25; animation-delay:-4s}
.hero-badge{display:inline-block; padding:6px 16px; border-radius:30px; font-size:12px; letter-spacing:.2em; color:var(--azure-bright);
  background:rgba(56,189,248,.08); border:1px solid var(--border); margin-bottom:18px;
  position:relative; overflow:hidden}
.hero-badge::before{content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(105deg, transparent 40%, rgba(56,189,248,.25) 50%, transparent 60%);
  animation:cardStream 6s ease-in-out infinite}
.portal-hero h1{font-size:46px; margin:0 auto; max-width:680px;
  background:linear-gradient(120deg, var(--azure-deep) 20%, var(--azure-bright) 55%, var(--cyan) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.portal-hero .hero-sub{margin:14px auto 0; max-width:560px; font-size:15px; color:var(--muted)}
.hero-cta{display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.portal-section{margin-top:34px; position:relative}
/* 分区标题装饰 */
.portal-section .section-title{position:relative; padding-left:0}
.portal-section .section-title::after{content:''; position:absolute; bottom:-2px; left:0; width:40px; height:1px;
  background:linear-gradient(90deg,var(--azure-bright),transparent)}
.grid-fun{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.fun-card{position:relative; overflow:hidden}
.fun-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:var(--radius) var(--radius) 0 0;
  opacity:.5; transition:opacity .3s}
.fun-card:hover::before{opacity:1}
.fortune-card::before{background:linear-gradient(90deg,var(--gold),var(--warn))}
.checkin-card::before{background:linear-gradient(90deg,var(--teal),var(--cyan))}
.hito-card::before{background:linear-gradient(90deg,var(--purple),var(--indigo))}
.fun-head{display:flex; align-items:center; gap:10px; margin-bottom:16px; font-weight:700; font-size:15px}
.fun-ico{padding:3px 10px; border-radius:6px; font-size:12px; color:#fff}
.fun-ico.azure{background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep))}
.fun-ico.purple{background:linear-gradient(135deg,var(--purple),#5b8cff)}
.hito-refresh{margin-left:auto; font-size:12px; font-weight:400; color:var(--muted); cursor:pointer; transition:transform .3s, color .2s}
.hito-refresh:hover{color:var(--azure-bright); transform:rotate(180deg)}
.hito-text{font-size:17px; line-height:1.8; color:var(--text); min-height:60px; font-weight:500}
.hito-from{margin-top:10px; font-size:13px; color:var(--faint)}

/* 运势 */
.fortune-level{font-size:36px; font-weight:800; line-height:1.1; margin-bottom:6px}
.fortune-desc{font-size:13px; color:var(--muted); margin-bottom:14px}
.fortune-grid{display:flex; flex-direction:column; gap:8px}
.fortune-grid .lbl{display:inline-block; width:24px; text-align:center; font-weight:800; color:var(--ok); margin-right:6px; vertical-align:middle}
.fortune-grid .lbl.ji{color:var(--danger)}
.yi,.ji-tag{display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; margin-right:5px; margin-bottom:4px}
.yi{background:rgba(52,211,153,.12); color:#7ef0c8; border:1px solid rgba(52,211,153,.25)}
.ji-tag{background:rgba(255,93,108,.12); color:#ff9aa5; border:1px solid rgba(255,93,108,.25)}
.fortune-foot{margin-top:12px; font-size:12px; color:var(--faint)}

/* 签到 */
.checkin-info{font-size:14px; color:var(--muted); margin-bottom:14px}
.checkin-done{font-size:18px; font-weight:700; color:var(--ok); margin-bottom:8px}
.checkin-streak{font-size:13px; color:var(--muted)}
.checkin-result{margin-top:10px; font-size:13px; min-height:18px}
.checkin-result.ok{color:var(--ok)}
.checkin-result.err{color:var(--danger)}

.welcome-card .welcome-text{font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:16px}

/* ============ 新闻 / 热搜 ============ */
.grid-news{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.news-card{padding:20px; position:relative}
.news-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:var(--radius) var(--radius) 0 0}
.news-card.daily::before{background:linear-gradient(90deg,var(--cyan),var(--teal))}
.news-card.hot::before{background:linear-gradient(90deg,var(--pink),var(--warn))}
.news-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px}
.news-badge{font-size:13px; font-weight:700; color:var(--azure-bright); display:inline-flex; align-items:center; gap:5px}
.news-badge.daily{color:var(--cyan)}
.news-badge.hot{color:var(--pink)}
.news-date{font-size:12px; color:var(--faint); flex-shrink:0}
.news-list{list-style:none; padding:0; margin:0}
.news-list li{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid rgba(56,189,248,.06); font-size:13.5px; color:#cdddf2; line-height:1.55;
  transition:padding-left .2s, background .2s; border-radius:6px}
.news-list li:hover{padding-left:6px; background:rgba(56,189,248,.04)}
.news-list li:last-child{border-bottom:none}
.news-list li a{color:#cdddf2; display:flex; gap:10px; align-items:flex-start; flex:1; transition:color .2s}
.news-list li a:hover{color:var(--azure-bright)}
.news-text{flex:1; min-width:0; word-break:break-word}
.news-no{flex:none; width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:700;
  background:rgba(56,189,248,.1); color:var(--azure-bright); margin-top:1px; flex-shrink:0; transition:transform .2s}
.news-list li:hover .news-no{transform:scale(1.15)}
.news-list li:nth-child(1) .news-no,.news-list li:nth-child(2) .news-no,.news-list li:nth-child(3) .news-no{background:rgba(255,126,182,.18); color:var(--pink)}
.hot-val{margin-left:auto; font-size:11px; color:var(--warn); white-space:nowrap; display:inline-flex; align-items:center; gap:8px; flex-shrink:0; padding-left:12px}
.hot-ico{font-size:14px; line-height:1; opacity:.9}
.hot-num{font-variant-numeric:tabular-nums; letter-spacing:.03em}
.news-empty{text-align:center; padding:30px 10px; color:var(--faint); font-size:13px}
.news-src{text-align:center; font-size:11px; color:var(--faint); margin-top:12px; opacity:.8}

/* 热搜 Tab */
.hot-tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:8px}
.hot-tab{padding:7px 14px; background:none; border:none; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; font-family:inherit}
.hot-tab.active{color:var(--text); border-color:var(--azure-bright)}
.hot-panel{display:none; max-height:420px; overflow-y:auto}
.hot-panel.active{display:block}
.hot-pane{display:none; max-height:420px; overflow-y:auto}
.hot-pane.active{display:block}

/* ============ 响应式 ============ */
/* 手机端隐藏顶栏按钮（移入下拉菜单） */
.nav-logout-form{display:inline-flex}
.nav-login-btn, .nav-register-btn{display:inline-flex}

/* ============ 交错入场动画 ============ */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0; transform:scale(.95)}to{opacity:1; transform:scale(1)}}
@keyframes slideInLeft{from{opacity:0; transform:translateX(-20px)}to{opacity:1; transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0; transform:translateX(20px)}to{opacity:1; transform:translateX(0)}}

.fade-up{animation:fadeUp .5s ease both}
.fade-in{animation:fadeIn .6s ease both}
.scale-in{animation:scaleIn .4s ease both}

/* 交错延迟 */
.stagger-1{animation-delay:.05s}
.stagger-2{animation-delay:.10s}
.stagger-3{animation-delay:.15s}
.stagger-4{animation-delay:.20s}
.stagger-5{animation-delay:.25s}
.stagger-6{animation-delay:.30s}

/* 导航链接下划线动画 */
.nav-links a{position:relative}
.nav-links a::after{content:''; position:absolute; bottom:2px; left:14px; right:14px; height:2px;
  background:linear-gradient(90deg,var(--azure-bright),var(--cyan)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s}
.nav-links a:hover::after,.nav-links a.cur::after{transform:scaleX(1)}

/* 按钮波纹效果 */
.btn{position:relative; overflow:hidden}
.btn-primary::after{content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,.3); transform:translate(-50%,-50%); transition:width .4s, height .4s}
.btn-primary:active::after{width:200%; height:200%; transition:0s}

/* 浮动渐变背景装饰 */
.bg-deco{position:fixed; pointer-events:none; z-index:0; opacity:.15; filter:blur(60px); border-radius:50%}
.bg-deco.a{width:400px; height:400px; top:-140px; right:-140px; background:radial-gradient(circle,var(--azure-bright),transparent 70%);
  animation:bgFloat1 20s ease-in-out infinite}
.bg-deco.b{width:300px; height:300px; bottom:10%; left:-100px; background:radial-gradient(circle,var(--purple),transparent 70%);
  animation:bgFloat2 25s ease-in-out infinite}
.bg-deco.c{width:250px; height:250px; top:40%; right:-80px; background:radial-gradient(circle,var(--teal),transparent 70%);
  animation:bgFloat1 30s ease-in-out infinite reverse; opacity:.08}
/* 左上角贴边渐变 - 偏移更大确保完全贴边 */
.bg-deco.d{width:380px; height:380px; top:-140px; left:-140px; background:radial-gradient(circle,var(--azure-bright),transparent 70%);
  animation:bgFloat2 22s ease-in-out infinite; opacity:.10}
@keyframes bgFloat1{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-20px)}66%{transform:translate(-20px,30px)}}
@keyframes bgFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,20px)}}

/* 标签 hover 弹跳 */
.tag{transition:transform .2s, background .2s, border-color .2s}
.tag:hover{transform:translateY(-2px)}

/* 分区标题增强 */
.section-title{position:relative}
.section-title .st-extra{margin-left:auto; font-size:12px; font-weight:500; letter-spacing:.02em;
  text-transform:none; color:var(--faint)}

@media(max-width:920px){
  body{
    background-image:
      linear-gradient(180deg, rgba(245,249,255,.86) 0%, rgba(238,245,253,.88) 50%, rgba(232,240,251,.92) 100%),
      url('../img/bg-mobile.jpg');
    background-size:cover;
    background-position:center top;
  }
  .grid-home{grid-template-columns:1fr}
  .sidebar{position:static}
  /* 主页分区：双列紧凑 */
  .cat-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .cat-card{padding:12px; gap:10px; flex-direction:column; align-items:flex-start}
  .cat-icon{width:36px; height:36px; border-radius:10px; font-size:18px}
  .cat-body{flex:1; min-width:0}
  .cat-card h3{font-size:14px; margin-bottom:2px}
  .cat-card .desc, .cat-card .cat-desc{font-size:11px; color:var(--faint);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; max-width:100%}
  .cat-card .count, .cat-card .cat-count{margin-top:4px; font-size:11px}
  /* 论坛页分区：单列水平卡片，完整描述 */
  .home-main .cat-grid{grid-template-columns:1fr; gap:8px}
  .home-main .cat-card{flex-direction:row; align-items:center; padding:12px 14px; gap:12px; max-width:100%; min-width:0}
  .home-main .cat-card .cat-icon{width:40px; height:40px; font-size:20px; flex:none; flex-shrink:0}
  .home-main .cat-card .cat-body{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; overflow:hidden}
  .home-main .cat-card .cat-desc{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; line-height:1.5; font-size:12px; color:var(--muted); word-break:break-all}
  .home-main .cat-card .cat-count{margin-top:0; font-size:11px; flex:none; flex-shrink:0; align-self:center; white-space:nowrap}
  .home-main .cat-card h3{font-size:14px; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hero h1{font-size:30px}
  .nav-links{display:none}
  .grid-fun{grid-template-columns:1fr!important}
  .grid-news{grid-template-columns:1fr!important}
  .portal-hero h1{font-size:32px}
  /* 手机端顶栏精简：只留 logo + 头像 + 菜单 */
  .nav-inner{gap:8px; height:52px}
  .brand{font-size:14px; gap:6px}
  .brand .logo{width:30px; height:30px; border-radius:8px}
  .brand small{display:none}
  .brand span:not(.logo){display:none}
  .nav-actions{gap:6px}
  .user-chip{padding:2px; border-radius:50%; border-width:2px}
  .user-chip-text{display:none}
  .user-chip em.uid{display:none}
  /* 隐藏顶栏按钮（已移入下拉菜单） */
  .nav-logout-form{display:none}
  .nav-login-btn, .nav-register-btn{display:none}
  .nav-toggle{display:inline-block}
  /* 手机端下拉菜单增强 */
  .nav-mobile-divider{height:1px; background:var(--border); margin:6px 0}
  .nav-mobile-logout{width:100%; text-align:left; padding:10px 14px; border-radius:8px;
    border:none; background:none; color:var(--danger); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit}
  .nav-mobile-logout:hover{background:rgba(255,93,108,.12)}
  .nav-mobile form{margin:0 -4px}
}
@media(max-width:560px){
  .post-content,.reply-section,.post-actions,.post-hero{padding-left:16px; padding-right:16px}
  .profile-tabs{padding:0 14px}
  .hero h1{font-size:25px}
  .r-children{margin-left:8px; padding-left:10px}
  .hero-stats{gap:16px}
  .hero-stats .stat .n{font-size:20px}
}

/* ============================================================
   蔚蓝档案点击特效开关
   ============================================================ */
.ba-fx-toggle{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--muted); cursor:pointer; display:grid; place-items:center;
  transition:all .3s; box-shadow:0 4px 20px -4px rgba(0,0,0,.5);
  font-family:inherit; padding:0
}
.ba-fx-toggle:hover{
  border-color:var(--border-strong); color:var(--azure-bright);
  background:rgba(56,189,248,.12); transform:scale(1.08)
}
.ba-fx-toggle.active{
  color:var(--azure-bright); border-color:var(--azure-bright);
  background:rgba(56,189,248,.15);
  box-shadow:0 0 24px -4px var(--glow), 0 4px 20px -4px rgba(0,0,0,.5);
  animation:baFxPulse 2.5s ease-in-out infinite
}
.ba-fx-toggle.active svg{
  filter:drop-shadow(0 0 6px var(--glow))
}
@keyframes baFxPulse{
  0%,100%{box-shadow:0 0 24px -4px var(--glow), 0 4px 20px -4px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 36px -2px var(--glow), 0 4px 20px -4px rgba(0,0,0,.5)}
}
@media(max-width:560px){
  .ba-fx-toggle{bottom:16px; right:16px; width:40px; height:40px}
}

/* ============================================================
   五子棋 Gomoku 游戏样式
   ============================================================ */
.game-wrap{max-width:1000px; margin:0 auto}
.game-header-card{margin-bottom:16px}
.game-header-card.expanded{margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0}
.game-header{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.game-header-left{flex:1; min-width:200px}
.game-title{font-size:24px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px}
.game-subtitle{font-size:13px; margin-top:6px}
.game-mode-select{display:flex; gap:8px; flex-wrap:wrap}
.game-mode-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between}

/* 折叠展开按钮 */
.game-collapse-toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:10px; background:rgba(56,189,248,.1); border:1px solid var(--border);
  color:var(--azure-bright); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s;
  user-select:none; flex:none}
.game-collapse-toggle:hover{background:rgba(56,189,248,.2); border-color:var(--border-strong)}
.toggle-arrow{font-size:14px; transition:transform .25s}
.gomoku-collapse:hover .toggle-arrow{transform:translateY(2px)}
.gomoku-collapse.expanded:hover .toggle-arrow{transform:translateY(-2px)}

/* 折叠内容 */
.gomoku-body{animation:gameExpand .3s ease}
@keyframes gameExpand{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}
.game-mode-btn{padding:10px 20px; font-size:14px; font-weight:700; border-radius:12px;
  background:rgba(56,189,248,.06); border:1px solid var(--border); color:var(--muted); cursor:pointer;
  transition:all .2s; font-family:inherit}
.game-mode-btn:hover{background:rgba(56,189,248,.14); border-color:var(--border-strong); color:var(--azure-bright)}
.game-mode-btn.active{background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep)); color:#fff;
  border-color:transparent; box-shadow:0 6px 20px -6px var(--glow)}

/* 游戏主体区域 */
.game-area{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap}
.board-wrap{position:relative; flex:none}
#gomoku-board{
  border-radius:14px; border:1px solid var(--border-strong);
  box-shadow:0 0 30px -8px var(--glow), 0 12px 40px -12px rgba(0,0,0,.7);
  cursor:pointer; max-width:100%; height:auto; display:block;
  background:#0c1830;
}

/* 侧栏 */
.game-side{width:280px; flex:none; display:flex; flex-direction:column; gap:16px}
.game-side-title{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:12px; display:flex; align-items:center; gap:8px}
.game-side-title::before{content:''; width:3px; height:14px; border-radius:2px; background:var(--azure-bright); box-shadow:0 0 8px var(--glow)}

/* 状态栏 */
.game-status{padding:16px 18px}
.game-turn-row{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--text)}
.turn-dot{width:14px; height:14px; border-radius:50%; flex:none; animation:turnPulse 1.4s ease-in-out infinite}
.turn-dot.black{background:radial-gradient(circle at 35% 35%, #5a6070, #0a0d14); box-shadow:0 0 10px rgba(120,130,160,.6)}
.turn-dot.white{background:radial-gradient(circle at 35% 35%, #fff, #b8c4d8); box-shadow:0 0 10px rgba(255,255,255,.5)}
.turn-dot.done{animation:none; opacity:.4}
@keyframes turnPulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.25); opacity:.7}}
.game-status-text{margin-top:8px; font-size:13px; color:var(--muted)}
.game-status-text.win{color:var(--ok)}
.game-status-text.lose{color:var(--danger)}
.game-status-text.draw{color:var(--warn)}

/* 当前玩家 */
.game-player{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.gp-info{min-width:0}
.gp-name{font-weight:700; color:var(--text); font-size:15px}
.gp-color{font-size:12px; margin-top:2px}
.game-opponent{font-size:13px; padding-top:10px; border-top:1px solid var(--border)}

/* 游戏信息行 */
.game-info-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13px}
.game-info-row + .game-info-row{border-top:1px solid rgba(56,189,248,.08)}

/* 操作按钮 */
.game-actions{display:flex; flex-direction:column; gap:8px}

/* 匹配状态 */
.matchmaking-box{text-align:center}
.mm-spinner{width:38px; height:38px; border-radius:50%; margin:0 auto 14px;
  border:3px solid rgba(56,189,248,.18); border-top-color:var(--azure-bright);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mm-text{font-size:14px; color:var(--muted); margin-bottom:14px}
#mm-cancel{margin:0 auto}

/* 游戏结束遮罩 */
.game-overlay{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.82), rgba(255,255,255,.95));
  border-radius:14px; z-index:5; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .35s ease
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-inner{text-align:center; padding:24px}
.overlay-ico{font-size:64px; margin-bottom:12px; animation:bounceIn .5s ease}
@keyframes bounceIn{0%{transform:scale(.3); opacity:0}60%{transform:scale(1.15); opacity:1}100%{transform:scale(1)}}
.overlay-text{font-size:30px; font-weight:800; color:var(--text); margin-bottom:6px;
  background:linear-gradient(120deg, var(--azure-deep), var(--azure-bright)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.overlay-sub{font-size:14px; margin-bottom:22px}

/* 五子棋响应式 */
@media(max-width:768px){
  .game-area{flex-direction:column; align-items:center}
  .game-side{width:100%; max-width:580px}
  #gomoku-board{width:100%; max-width:580px}
  .game-header{flex-direction:column; align-items:stretch}
  .game-mode-select{justify-content:center}
}
@media(max-width:560px){
  .game-title{font-size:20px}
  .overlay-text{font-size:24px}
  .overlay-ico{font-size:48px}
}

/* ============ 头像裁剪弹窗 ============ */
.crop-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:cropFade .25s ease;
}
@keyframes cropFade{from{opacity:0}to{opacity:1}}
.crop-modal-inner{
  width:100%; max-width:380px;
  background:var(--card-solid);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  box-shadow:0 20px 60px -12px rgba(0,0,0,.7), 0 0 30px -8px var(--glow);
  overflow:hidden;
}
.crop-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.crop-title{font-size:15px; font-weight:700; color:var(--text); letter-spacing:.02em}
.crop-close{
  width:28px; height:28px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(56,189,248,.08); color:var(--muted); font-size:20px; line-height:1;
  display:grid; place-items:center; transition:all .2s; font-family:inherit;
}
.crop-close:hover{background:rgba(255,93,108,.18); color:var(--danger)}
.crop-stage{
  position:relative; width:300px; height:300px; margin:16px auto 0;
  border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border);
}
#crop-canvas{
  display:block; width:300px; height:300px;
  cursor:grab; background:var(--bg2);
}
#crop-canvas:active{cursor:grabbing}
.crop-overlay-box{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:220px; height:220px; border-radius:50%;
  border:2px solid var(--azure-bright);
  box-shadow:0 0 0 9999px rgba(255,255,255,.55), 0 0 18px var(--glow);
  pointer-events:none;
}
.crop-controls{
  padding:16px 18px 10px; display:flex; flex-direction:column; gap:14px;
}
.crop-zoom-row{
  display:flex; align-items:center; gap:12px;
}
.crop-zoom-row label{flex:none}
.crop-zoom-row input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:3px;
  background:linear-gradient(90deg, var(--azure-bright), var(--purple));
  outline:none; cursor:pointer;
}
.crop-zoom-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--azure-bright); border:2px solid #fff; box-shadow:0 0 10px var(--glow); cursor:pointer;
}
.crop-zoom-row input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; border:2px solid #fff;
  background:var(--azure-bright); box-shadow:0 0 10px var(--glow); cursor:pointer;
}
.crop-actions{display:flex; gap:10px; justify-content:flex-end}
.crop-hint{padding:0 18px 16px; font-size:12px; text-align:center; color:var(--faint)}

/* ============ 工具箱 ============ */
.toolbox-tabs{
  display:flex; gap:6px; flex-wrap:wrap; padding:8px 0 0;
}
.toolbox-tab{
  padding:9px 16px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,.55); color:var(--muted); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .25s; font-family:inherit; white-space:nowrap;
  position:relative; overflow:hidden;
}
.toolbox-tab::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform .5s;
}
.toolbox-tab:hover::before{transform:translateX(100%)}
.toolbox-tab:hover{color:var(--text); background:var(--glow-soft); border-color:var(--border-strong); transform:translateY(-1px)}
.toolbox-tab.cur{
  color:#fff; background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep));
  border-color:transparent; box-shadow:0 4px 16px -4px var(--glow);
  animation:tabPulse 2.5s ease-in-out infinite;
}
@keyframes tabPulse{
  0%,100%{box-shadow:0 4px 16px -4px var(--glow)}
  50%{box-shadow:0 4px 28px -2px rgba(56,189,248,.55)}
}
/* 加密解密 - 模式标签 */
.crypto-mode-tabs{
  display:flex; gap:6px; flex-wrap:wrap; padding-top:8px;
}
.crypto-mode{
  padding:7px 14px; border-radius:9px; border:1px solid var(--border);
  background:rgba(255,255,255,.55); color:var(--muted); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .25s; font-family:inherit;
}
.crypto-mode:hover{color:var(--text); background:var(--glow-soft); border-color:var(--border-strong); transform:translateY(-1px)}
.crypto-mode.cur{
  color:#fff; background:linear-gradient(135deg,var(--purple),var(--azure-deep));
  border-color:transparent; box-shadow:0 4px 16px -4px rgba(124,92,255,.5);
}
.crypto-duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
/* 加密解密 - 图片放入条 */
.crypto-img-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding:12px 16px; border-radius:12px;
  border:1px dashed var(--border-strong); background:rgba(255,255,255,.35);
}
.crypto-img-out-btn{
  padding:5px 12px; border-radius:8px; border:1px solid var(--border-strong);
  background:rgba(56,189,248,.12); color:var(--azure-bright); font-size:13px;
  font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit;
}
.crypto-img-out-btn:hover{ background:rgba(56,189,248,.24); box-shadow:0 0 14px var(--glow-soft)}
.toolbox-panel{display:none}
.toolbox-panel.cur{display:block; animation:panelIn .4s cubic-bezier(.22,1,.36,1)}
@keyframes panelIn{
  from{opacity:0; transform:translateY(12px) scale(.98); filter:blur(4px)}
  to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}
.toolbox-h3{
  font-size:18px; font-weight:700; color:var(--text); margin-bottom:6px;
}
.toolbox-desc{font-size:13px; color:var(--muted); margin-bottom:16px}
.toolbox-label{
  display:block; font-size:12px; font-weight:600; color:var(--cyan);
  letter-spacing:.1em; margin-bottom:6px; text-transform:uppercase;
}
.toolbox-input{
  width:100%; padding:9px 12px; border-radius:9px;
  border:1px solid var(--border); background:rgba(255,255,255,.6);
  color:var(--text); font-size:14px; font-family:inherit; transition:all .25s;
}
.toolbox-input:focus{
  outline:none; border-color:var(--border-strong);
  box-shadow:0 0 0 3px var(--glow-soft), 0 0 20px -4px var(--glow);
  animation:inputGlow 1.5s ease-in-out infinite;
}
@keyframes inputGlow{
  0%,100%{box-shadow:0 0 0 3px var(--glow-soft), 0 0 16px -6px var(--glow)}
  50%{box-shadow:0 0 0 3px var(--glow-soft), 0 0 28px -2px var(--glow)}
}
.toolbox-textarea{
  width:100%; padding:12px; border-radius:9px;
  border:1px solid var(--border); background:rgba(255,255,255,.6);
  color:var(--text); font-size:14px; font-family:inherit; resize:vertical; transition:all .25s;
}
.toolbox-textarea:focus{
  outline:none; border-color:var(--border-strong);
  box-shadow:0 0 0 3px var(--glow-soft), 0 0 20px -4px var(--glow);
}
.toolbox-color-input{
  width:100%; height:42px; padding:4px; border-radius:9px;
  border:1px solid var(--border); background:rgba(255,255,255,.6); cursor:pointer;
  transition:all .25s;
}
.toolbox-color-input:hover{border-color:var(--border-strong); box-shadow:0 0 12px -2px var(--glow)}
.toolbox-row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.toolbox-result-box{
  padding:20px; border-radius:12px; background:rgba(255,255,255,.5);
  border:1px solid var(--border); text-align:center;
  animation:resultIn .4s ease;
}
@keyframes resultIn{
  from{opacity:0; transform:scale(.95)}
  to{opacity:1; transform:scale(1)}
}
.toolbox-progress{
  margin-top:16px; padding:14px; border-radius:10px;
  background:rgba(255,255,255,.6); border:1px solid var(--border);
}
.toolbox-progress-bar{
  width:0%; height:6px; border-radius:3px; transition:width .3s;
  background:linear-gradient(90deg,var(--azure-bright),var(--cyan));
  margin-bottom:8px; position:relative; overflow:hidden;
}
.toolbox-progress-bar::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation:shimmer 1.2s linear infinite;
}
@keyframes shimmer{
  from{transform:translateX(-100%)} to{transform:translateX(100%)}
}
.palette-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;
}
.palette-item{
  height:100px; border-radius:12px; display:flex; align-items:flex-end;
  justify-content:center; padding:10px; cursor:pointer; transition:all .25s;
  border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden;
}
.palette-item::before{
  content:''; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.2), transparent 60%);
  opacity:0; transition:opacity .25s;
}
.palette-item:hover{transform:scale(1.05) translateY(-2px); box-shadow:0 8px 24px -6px rgba(0,0,0,.5)}
.palette-item:hover::before{opacity:1}
.palette-hex{
  background:rgba(0,0,0,.5); color:#fff; padding:3px 8px; border-radius:6px;
  font-size:12px; font-weight:600; font-family:monospace; letter-spacing:.05em;
}
.counter-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;
}
.counter-item{
  padding:20px; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.5); border:1px solid var(--border); transition:all .25s;
  position:relative; overflow:hidden;
}
.counter-item::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--azure-bright), var(--cyan), var(--purple));
  opacity:0; transition:opacity .25s;
}
.counter-item:hover{border-color:var(--border-strong); transform:translateY(-3px); box-shadow:0 8px 20px -8px var(--glow)}
.counter-item:hover::before{opacity:1}
.counter-num{
  display:block; font-size:28px; font-weight:800; color:var(--azure-bright);
  font-variant-numeric:tabular-nums; transition:transform .15s;
}
.counter-num.bump{animation:numBump .3s ease}
@keyframes numBump{0%{transform:scale(1)}40%{transform:scale(1.25); color:var(--cyan)}100%{transform:scale(1)}}
.counter-label{display:block; margin-top:4px; font-size:12px; color:var(--muted)}

/* ====== 工具箱卡片鼠标追踪光效 ====== */
.toolbox-card-glow{
  position:relative; overflow:hidden;
}
.toolbox-card-glow::after{
  content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.12) 0%, transparent 70%);
  pointer-events:none; opacity:0; transition:opacity .3s;
  left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%);
}
.toolbox-card-glow:hover::after{opacity:1}

/* ====== 工具箱按钮波纹 ====== */
.btn-toolbox-ripple{position:relative; overflow:hidden}
.toolbox-ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.3);
  pointer-events:none; animation:rippleExpand .5s ease-out forwards;
}
@keyframes rippleExpand{
  from{width:0; height:0; opacity:.5}
  to{width:300px; height:300px; opacity:0}
}

/* ====== 工具箱浮动粒子 ====== */
.toolbox-particles{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.toolbox-particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--azure-bright); opacity:.15;
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{transform:translateY(100vh) scale(0); opacity:0}
  10%{opacity:.15}
  90%{opacity:.15}
  100%{transform:translateY(-10vh) scale(1); opacity:0}
}

/* ============ AI 聊天 ============ */
.ai-chat-container{
  margin-top:16px; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.55); border:1px solid var(--border);
  display:flex; flex-direction:column; height:calc(100vh - 220px); min-height:500px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.ai-chat-messages{
  flex:1; overflow-y:auto; padding:20px; scroll-behavior:smooth;
}
.ai-chat-messages::-webkit-scrollbar{width:6px}
.ai-chat-messages::-webkit-scrollbar-track{background:transparent}
.ai-chat-messages::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px}
.ai-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

.ai-msg{
  display:flex; gap:12px; margin-bottom:20px;
  animation:aiMsgIn .35s cubic-bezier(.22,1,.36,1);
}
@keyframes aiMsgIn{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:translateY(0)}
}
.ai-msg-avatar{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:rgba(56,189,248,.12); border:1px solid var(--border);
}
.ai-msg-user{flex-direction:row-reverse}
.ai-msg-user .ai-msg-avatar{
  background:rgba(124,92,255,.12); border-color:rgba(124,92,255,.3);
}
.ai-msg-bubble{
  max-width:80%; border-radius:14px; padding:12px 16px;
  line-height:1.7; font-size:14px; word-break:break-word;
}
.ai-msg-bot .ai-msg-bubble{
  background:rgba(255,255,255,.6); border:1px solid var(--border);
  border-top-left-radius:4px;
}
.ai-msg-user .ai-msg-bubble{
  background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep));
  color:var(--text); border-top-right-radius:4px;
}
.ai-msg-content{white-space:pre-wrap}
.ai-msg-user .ai-msg-content{white-space:pre-wrap}

/* Markdown 渲染样式 */
.ai-md-h{font-size:15px; font-weight:700; margin:8px 0 4px; color:var(--text)}
.ai-md-list{margin:6px 0; padding-left:20px}
.ai-md-list li{margin-bottom:3px; list-style:disc}
.ai-code-block{
  background:rgba(0,0,0,.4); border:1px solid var(--border); border-radius:8px;
  padding:12px; margin:8px 0; overflow-x:auto; font-size:13px;
}
.ai-code-block code{font-family:'Fira Code','Consolas',monospace; color:var(--cyan)}
.ai-code-inline{
  background:rgba(56,189,248,.12); padding:2px 6px; border-radius:4px;
  font-family:'Fira Code','Consolas',monospace; font-size:13px; color:var(--cyan);
}

/* 打字动画 */
.ai-typing{display:flex; gap:5px; align-items:center; padding:4px 0}
.ai-typing-dot{
  width:8px; height:8px; border-radius:50%; background:var(--azure-bright);
  animation:typingBounce .6s ease-in-out infinite;
}
.ai-typing-dot:nth-child(2){animation-delay:.15s}
.ai-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{
  0%,100%{transform:translateY(0); opacity:.4}
  50%{transform:translateY(-6px); opacity:1}
}

.ai-error{color:var(--danger); font-weight:600}

/* 快捷提示 */
.ai-prompts{
  display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px;
  border-top:1px solid var(--border); background:rgba(255,255,255,.3);
}
.ai-prompt-chip{
  padding:7px 14px; border-radius:20px; border:1px solid var(--border);
  background:rgba(255,255,255,.6); color:var(--muted); font-size:13px;
  cursor:pointer; transition:all .2s; font-family:inherit; white-space:nowrap;
}
.ai-prompt-chip:hover{
  color:var(--text); border-color:var(--border-strong); background:var(--glow-soft);
  transform:translateY(-1px);
}

/* 输入区域 */
.ai-chat-input-area{
  padding:14px 20px; border-top:1px solid var(--border);
  background:rgba(255,255,255,.5);
}
.ai-chat-input-row{display:flex; gap:10px; align-items:flex-end}
.ai-chat-input{
  flex:1; padding:12px 16px; border-radius:14px;
  border:1px solid var(--border); background:rgba(255,255,255,.6);
  color:var(--text); font-size:14px; font-family:inherit;
  resize:none; line-height:1.5; transition:all .25s; max-height:150px;
}
.ai-chat-input:focus{
  outline:none; border-color:var(--border-strong);
  box-shadow:0 0 0 3px var(--glow-soft), 0 0 20px -4px var(--glow);
}
.ai-chat-send, .ai-chat-stop{
  width:44px; height:44px; border-radius:12px; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s; flex:none; color:var(--text);
}
.ai-chat-send{
  background:linear-gradient(135deg,var(--azure-bright),var(--azure-deep));
  box-shadow:0 4px 14px -4px var(--glow);
}
.ai-chat-send:hover{transform:scale(1.05); box-shadow:0 6px 20px -4px var(--glow)}
.ai-chat-send:active{transform:scale(.95)}
.ai-chat-stop{
  background:linear-gradient(135deg,var(--danger),#cc3344);
  box-shadow:0 4px 14px -4px rgba(255,93,108,.4);
}
.ai-chat-stop:hover{transform:scale(1.05)}

.ai-chat-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; font-size:12px;
}
.ai-status-idle{color:var(--faint)}
.ai-status-thinking{color:var(--cyan); animation:statusPulse 1s ease-in-out infinite}
.ai-status-error{color:var(--danger)}
@keyframes statusPulse{0%,100%{opacity:.5}50%{opacity:1}}
.ai-chat-clear{
  background:none; border:1px solid var(--border); color:var(--muted);
  padding:4px 12px; border-radius:8px; font-size:12px; cursor:pointer;
  transition:all .2s; font-family:inherit;
}
.ai-chat-clear:hover{color:var(--danger); border-color:rgba(255,93,108,.3)}

@media (max-width:768px){
  .ai-chat-container{height:calc(100vh - 180px); min-height:400px}
  .ai-msg-bubble{max-width:88%}
  .ai-prompts{padding:10px 14px}
  .ai-prompt-chip{font-size:12px; padding:6px 12px}
  .ai-chat-input-area{padding:10px 14px}
  .ai-chat-input{padding:10px 14px; font-size:13px}
}

/* ============ 保险柜 ============ */
.vault-alert{
  padding:12px 16px; border-radius:10px; margin-top:12px; font-size:14px; font-weight:600;
}
.vault-alert-error{
  background:rgba(255,93,108,.12); border:1px solid rgba(255,93,108,.4); color:#ff8a96;
}
.vault-alert-success{
  background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.4); color:#6ee7b7;
}
.vault-stats{
  display:flex; gap:16px; margin-top:16px; flex-wrap:wrap;
}
.vault-stat-item{
  flex:1; min-width:120px; padding:18px 20px; border-radius:12px;
  background:var(--card); border:1px solid var(--border); text-align:center;
}
.vault-stat-num{
  display:block; font-size:24px; font-weight:800; color:var(--azure-bright);
  font-variant-numeric:tabular-nums;
}
.vault-stat-label{display:block; margin-top:4px; font-size:12px; color:var(--muted); letter-spacing:.1em}
.vault-upload-zone{
  border:2px dashed var(--border); border-radius:14px; padding:36px 20px;
  text-align:center; cursor:pointer; transition:all .25s;
  background:rgba(255,255,255,.4);
}
.vault-upload-zone:hover{border-color:var(--border-strong); background:var(--glow-soft)}
.vault-dragover{border-color:var(--azure-bright) !important; background:var(--glow-soft) !important}
.vault-upload-icon{font-size:40px; margin-bottom:8px}
.vault-upload-text{font-size:15px; font-weight:600; color:var(--text)}
.vault-upload-hint{font-size:12px; color:var(--faint); margin-top:4px}
.vault-upload-filename{font-size:13px; color:var(--cyan); margin-top:8px; font-weight:600}
.vault-empty{
  padding:48px 20px; text-align:center;
}
.vault-empty-icon{font-size:48px; opacity:.4; margin-bottom:12px}
.vault-empty p{color:var(--faint); font-size:14px}
.vault-file-list{display:flex; flex-direction:column; gap:8px}
.vault-file-item{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:12px; background:rgba(255,255,255,.4); border:1px solid var(--border);
  transition:all .2s;
}
.vault-file-item:hover{border-color:var(--border-strong); background:rgba(255,255,255,.6)}
.vault-file-icon{font-size:28px; flex:none}
.vault-file-info{flex:1; min-width:0}
.vault-file-name{
  font-size:14px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vault-file-meta{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:3px; font-size:12px; color:var(--muted);
}
.vault-dot{color:var(--faint)}
.vault-file-desc{
  color:var(--cyan); font-style:italic; max-width:300px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vault-file-actions{
  display:flex; gap:8px; flex:none;
}

/* ============ 响应式 ============ */
@media (max-width:768px){
  .toolbox-row{grid-template-columns:1fr}
  .toolbox-tab{font-size:12px; padding:7px 12px}
  .crypto-duo{grid-template-columns:1fr}
  .vault-file-item{flex-wrap:wrap}
  .vault-file-actions{width:100%; justify-content:flex-end}
  .vault-file-desc{max-width:200px}
  .palette-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .counter-grid{grid-template-columns:repeat(2,1fr)}
}