/* 人类生存辅助器 · 共享样式 */
:root{
  --bg:#0e0a1a; --bg2:#1a0f2e;
  --pink:#ff6ec7; --purple:#a86bff; --cyan:#5ee7ff; --gold:#ffcf6e;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06);
  --glass2:rgba(255,255,255,.1);
  --txt:#f3ecff; --muted:#b6a9d6;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{
  background:
    radial-gradient(circle at 15% 8%, rgba(168,107,255,.28), transparent 42%),
    radial-gradient(circle at 85% 12%, rgba(255,110,199,.22), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(94,231,255,.12), transparent 46%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  background-attachment:fixed;
}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  background:transparent;
  color:var(--txt); min-height:100%; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:600px;margin:0 auto;padding:0 16px 90px;min-height:100%;position:relative;z-index:2}

/* ===== 头部 ===== */
header{padding:30px 4px 14px;text-align:center;position:relative}
.logo{font-size:27px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(100deg,var(--cyan),var(--purple) 45%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(168,107,255,.32)}
.slogan{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.7}
.slogan b{color:var(--pink);font-weight:600}

/* ===== 首页：分类区块 + 平铺宫格 ===== */
.sec-head{padding:20px 4px 8px;display:flex;align-items:baseline;gap:8px}
.sec-head .ct{font-size:16px;font-weight:700}
.sec-head .cd{font-size:12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:6px 0 4px}
@media (min-width:520px){.grid{grid-template-columns:repeat(4,1fr)}}
.cell{position:relative;padding:16px 8px 13px;border-radius:18px;cursor:pointer;text-align:center;text-decoration:none;display:block;
  background:var(--glass);border:1px solid var(--line);transition:transform .18s ease,box-shadow .25s ease,background .25s ease;overflow:hidden}
.cell::after{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg,rgba(94,231,255,.5),rgba(255,110,199,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
.cell:active{transform:scale(.96)}
.cell:hover::after{opacity:1}
.cell .ci{font-size:26px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(168,107,255,.5))}
.cell .cn{font-size:12.5px;font-weight:600;line-height:1.35;color:#fff}

/* ===== 工具页 ===== */
.tool-top{display:flex;align-items:center;gap:10px;padding:18px 2px 6px}
.back{width:34px;height:34px;border-radius:12px;background:var(--glass);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex:0 0 auto;color:var(--txt);text-decoration:none}
.tool-title{font-size:18px;font-weight:700}
.tool-desc{font-size:12.5px;color:var(--muted);padding:2px 4px 14px;line-height:1.7}

/* 通用面板 */
.panel{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:18px 16px;margin-bottom:14px}
.qlabel{font-size:13px;color:var(--muted);margin-bottom:10px}

/* 示例 chips */
.ex-wrap{margin-bottom:12px}
.ex-title{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.ex-chips{display:flex;flex-wrap:wrap;margin:0 -4px}
.ex-chip{display:inline-block;margin:4px;padding:7px 12px;border-radius:20px;cursor:pointer;font-size:12.5px;color:var(--txt);
  background:rgba(255,255,255,.08);border:1px solid var(--line);transition:all .18s ease}
.ex-chip:active{transform:scale(.96)}
.ex-chip:hover{background:linear-gradient(120deg,rgba(168,107,255,.35),rgba(255,110,199,.3));border-color:var(--pink)}

/* 选项按钮 */
.optbtn{display:block;width:100%;text-align:left;padding:13px 15px;margin-bottom:10px;border-radius:14px;cursor:pointer;
  background:var(--glass2);border:1px solid var(--line);color:var(--txt);font-size:14px;line-height:1.5;transition:all .2s ease;font-family:inherit}
.optbtn:active{transform:scale(.985)}
.optbtn.picked{background:linear-gradient(120deg,rgba(168,107,255,.35),rgba(255,110,199,.3));border-color:var(--pink)}

/* 主按钮 */
.mbtn{display:block;width:100%;padding:14px;border:none;border-radius:16px;cursor:pointer;font-size:15px;font-weight:700;letter-spacing:1px;color:#fff;
  background:linear-gradient(120deg,var(--purple),var(--pink));box-shadow:0 8px 26px rgba(255,110,199,.3);transition:transform .18s ease;font-family:inherit}
.mbtn:active{transform:scale(.97)}
.mbtn.ghost{background:var(--glass2);border:1px solid var(--line);box-shadow:none;color:var(--txt);font-weight:600}

/* 输入框 */
textarea,input[type=text],input[type=number],input[type=date],select{
  width:100%;padding:12px 14px;border-radius:14px;background:var(--glass2);
  border:1px solid var(--line);color:var(--txt);font-size:14px;font-family:inherit;outline:none;resize:none}
textarea:focus,input:focus,select:focus{border-color:var(--pink)}
select option{background:#1a0f2e}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}

/* 进度 */
.prog{height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0 16px}
.prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--pink));transition:width .3s ease}

/* ===== 结果卡片 ===== */
.rcard{border-radius:22px;padding:26px 22px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(168,107,255,.22),rgba(255,110,199,.16)),rgba(20,12,38,.72);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(0,0,0,.4);text-align:center}
.rcard::before{content:"";position:absolute;top:-50%;left:-20%;width:140%;height:120%;
  background:radial-gradient(circle,rgba(94,231,255,.16),transparent 60%);pointer-events:none}
.rc-brand{font-size:12px;letter-spacing:3px;color:var(--muted);margin-bottom:16px}
.rc-tool{font-size:13px;color:var(--cyan);letter-spacing:1px;margin-bottom:10px}
.rc-big{font-size:34px;font-weight:800;line-height:1.25;margin:6px 0 4px;
  background:linear-gradient(100deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-title{font-size:17px;font-weight:700;margin-bottom:14px}
.rc-quote{font-size:14.5px;line-height:1.85;color:#efe7ff;padding:14px 0}
.rc-quote::before{content:"「";opacity:.5}.rc-quote::after{content:"」";opacity:.5}
.rc-advice{font-size:13px;line-height:1.8;color:var(--muted);background:rgba(0,0,0,.2);border-radius:14px;padding:12px 14px;margin-top:6px;text-align:left}
.rc-advice b{color:var(--gold)}
.rc-closing{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.18);color:var(--cyan);font-size:12.5px;line-height:1.7}
.rc-disclaimer{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.14);font-size:11px;color:rgba(182,169,214,.65);line-height:1.7}
.rc-foot{font-size:11.5px;color:var(--muted);margin-top:18px;line-height:1.7;letter-spacing:.5px}
.rc-share{margin-top:16px;font-size:12.5px;color:var(--pink);letter-spacing:.5px}
.rc-actions{display:flex;gap:10px;margin-top:16px}
.rc-actions .mbtn{flex:1}

/* ===== 许愿入口 / 页脚 ===== */
.wish{margin-top:22px;padding:18px;border-radius:20px;text-align:center;
  background:linear-gradient(120deg,rgba(94,231,255,.12),rgba(255,110,199,.12));border:1px dashed rgba(255,255,255,.22)}
.wish .wt{font-size:14px;font-weight:700;margin-bottom:6px}
.wish .wd{font-size:12px;color:var(--muted);line-height:1.7}
.foot{text-align:center;font-size:11px;color:rgba(182,169,214,.6);margin-top:26px;line-height:1.8}

/* 免责声明 */
.disclaimer{margin-top:22px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:left}
.disclaimer .dc-title{font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:8px}
.disclaimer p{font-size:11.5px;color:var(--muted);line-height:1.85;margin-bottom:6px}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer strong{color:var(--pink);font-weight:600}

/* 提示弹层 */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:rgba(30,18,50,.96);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:13px;padding:12px 20px;border-radius:30px;
  transition:all .3s ease;z-index:99;max-width:80%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   动效层（fx）—— 背景氛围 / 入场 / 揭晓 / 分类差异化 / 涟漪 / 转场
   ============================================================ */

/* 背景缓慢呼吸的光斑 */
body::before{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 30% 30%, rgba(168,107,255,.30), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,110,199,.24), transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(94,231,255,.18), transparent 46%);
  animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(1) translate(0,0);opacity:.85}
  50%{transform:scale(1.12) translate(0,-2%);opacity:1}
}

/* 持续漂浮光点层 */
.fx-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-ambient i{position:absolute;bottom:-20px;border-radius:50%;background:rgba(168,140,220,.5);
  box-shadow:0 0 6px 1px rgba(140,100,200,.28);
  animation-name:fxFloat;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fxFloat{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.35}
  90%{opacity:.35}
  100%{transform:translateY(-108vh) translateX(20px);opacity:0}
}

/* 入场：上浮渐显 */
.fx-in{opacity:0;animation:fxIn .55s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes fxIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 点击涟漪 */
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:.5;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  animation:fxRipple .6s ease-out forwards}
@keyframes fxRipple{to{transform:scale(1);opacity:0}}

/* 轻量转场幕布 */
.fx-veil{position:fixed;inset:0;z-index:200;background:#0e0a1a;opacity:0;transition:opacity .22s ease;pointer-events:none}
.fx-veil.on{opacity:1}

/* 粒子爆发 */
.fx-burst{position:absolute;inset:0;pointer-events:none;overflow:visible}
.fx-burst i{position:absolute;width:7px;height:7px;border-radius:50%;opacity:0;
  animation:fxBurst .95s ease-out forwards;box-shadow:0 0 8px currentColor}
@keyframes fxBurst{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.4)}
}

/* 结果卡入场 */
.rcard-enter{animation:rcEnter .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes rcEnter{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

/* 数据区（如需环形进度占位） */
.rc-big{will-change:contents}

/* ---------- 分类差异化揭晓风格 ---------- */

/* 治愈：柔和放大 + 光晕脉冲 */
.mv-heal{animation:rcEnter .6s ease both, mvHealPulse 2.4s ease-in-out .6s infinite}
@keyframes mvHealPulse{0%,100%{box-shadow:0 20px 50px rgba(0,0,0,.4)}50%{box-shadow:0 20px 60px rgba(168,107,255,.45)}}

/* 职场：盖章落下 */
.mv-stamp{animation:rcEnter .3s ease both, mvStamp .5s cubic-bezier(.2,1.4,.4,1) .12s both}
@keyframes mvStamp{0%{transform:scale(1.25) rotate(-4deg);opacity:.2}60%{transform:scale(.96) rotate(1deg)}100%{transform:none;opacity:1}}

/* 恋爱：心跳脉冲 */
.mv-heartbeat{animation:rcEnter .5s ease both, mvBeat .9s ease-in-out .5s infinite}
@keyframes mvBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.02)}28%{transform:scale(1)}42%{transform:scale(1.02)}}

/* 社交：弹跳登场 */
.mv-popup{animation:mvPop .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes mvPop{0%{opacity:0;transform:scale(.82) translateY(20px)}100%{opacity:1;transform:none}}

/* 吵架：能量蓄力后爆开 */
.mv-energy{animation:mvEnergy .6s cubic-bezier(.25,.9,.3,1) both}
@keyframes mvEnergy{0%{opacity:0;transform:scale(.9);filter:brightness(1.6) saturate(1.5)}55%{opacity:1;transform:scale(1.03)}100%{transform:none;filter:none}}

/* 玄学：翻牌揭晓（3D） */
.mv-draw{animation:mvDraw .7s cubic-bezier(.2,.8,.3,1) both;transform-style:preserve-3d}
@keyframes mvDraw{0%{opacity:0;transform:perspective(900px) rotateY(80deg) scale(.94)}100%{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}}

/* 脑洞：故障闪入 */
.mv-glitch{animation:mvGlitch .5s steps(2) both}
@keyframes mvGlitch{
  0%{opacity:0;transform:translateX(-6px);text-shadow:-3px 0 #ff6ec7,3px 0 #5ee7ff}
  25%{opacity:1;transform:translateX(4px)}
  50%{transform:translateX(-3px);text-shadow:3px 0 #ff6ec7,-3px 0 #5ee7ff}
  75%{transform:translateX(2px)}
  100%{transform:none;text-shadow:none}
}

/* 选项点击反馈 */
.optbtn{position:relative;overflow:hidden}
.optbtn.picked{animation:optPick .3s ease}
@keyframes optPick{50%{transform:scale(.97)}}

/* 进度条填充动画 */
.prog i{transition:width .45s cubic-bezier(.3,.9,.3,1)}

/* 答题切题：内容滑入 */
.q-slide{animation:qSlide .32s ease both}
@keyframes qSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* 首页卡片入场预备 */
.cell.fx-in{pointer-events:auto}

/* 本工具强制保留动效，不响应系统 reduced-motion */