/* ==================== 骚货认证局 · 样式 ==================== */
:root{
  --paper:#FBF3EA; --card:#FFFDF9; --ink:#231F1F; --ink2:#7A6A6E; --line:rgba(35,31,31,.12);
  --red:#D7263D; --red-d:#A3172A; --pink:#EF5D8F; --pink-s:#FDE8EF; --gold:#B8862F;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#EADFD3;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
input{outline:none}
[hidden]{display:none!important}

#app{
  max-width:560px;min-height:100vh;min-height:100dvh;margin:0 auto;position:relative;
  background:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .25  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:0 0 40px rgba(60,20,30,.12);
}
.page{display:none;min-height:100vh;min-height:100dvh}
.page.on{display:block}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:46px;padding:0 18px;border-radius:12px;font-weight:700;font-size:15px;white-space:nowrap;
  transition:transform .08s,box-shadow .08s,background .15s;user-select:none;
}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--red);color:#fff;box-shadow:0 3px 0 var(--red-d)}
.btn.primary:active{box-shadow:0 1px 0 var(--red-d)}
.btn.ghost{background:rgba(255,255,255,.55);border:1.5px solid var(--line);color:var(--ink)}
.btn.big{height:54px;font-size:17px;border-radius:14px}
.btn.small{height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.wide{width:100%}
.btn.grow{flex:1}
.link{color:var(--ink2);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.link.danger{color:var(--red)}
.icon-btn{width:40px;height:40px;border-radius:10px;font-size:22px;line-height:40px;text-align:center;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.icon-btn svg{width:23px;height:23px}
.icon-btn svg.ib{width:28px;height:28px}
.icon-btn{min-width:44px}
.icon-btn:active{background:rgba(0,0,0,.06)}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;padding:6px 8px;height:52px;
  background:rgba(251,243,234,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.tb-title{flex:1;text-align:center;line-height:1.2;min-width:0}
.tb-title b{display:block;font-family:var(--serif);font-weight:900;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title small{display:block;font-size:11px;color:var(--ink2)}

/* ---------- 首页 ---------- */
.home{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px calc(28px + var(--safe-b));text-align:center}
.home-seal{margin-top:auto;width:168px;height:168px;color:var(--red);filter:url(#inkfx);opacity:.92;transform:rotate(-10deg);animation:sealIn .6s cubic-bezier(.3,1.6,.5,1) both;mix-blend-mode:multiply}
.home-seal text{font-family:var(--serif)}
@keyframes sealIn{from{transform:rotate(-10deg) scale(2.4);opacity:0}to{transform:rotate(-10deg) scale(1);opacity:1}}
.home-title{font-family:var(--serif);font-weight:900;font-size:44px;letter-spacing:4px;margin:18px 0 2px;line-height:1.15}
.home-en{font-size:10.5px;letter-spacing:2.5px;color:var(--ink2);margin:0}
.home-tag{margin:14px 0 26px;font-size:15px;color:var(--ink);background:linear-gradient(transparent 58%,rgba(239,93,143,.28) 58%);padding:0 4px}
.home-gender{display:flex;align-items:center;gap:10px;width:100%;max-width:320px;margin:0 0 14px}
.home-gender.shake{animation:shake .4s}
.hg{flex:1;height:48px;border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.6);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s}
.gi{width:1.2em;height:1.2em;flex:none;display:block}
.hg .gi{width:21px;height:21px}
.hg.f .gi,.gcard.f .gi,.gseg [data-v=f] .gi{color:var(--pink)}
.hg.m .gi,.gcard.m .gi,.gseg [data-v=m] .gi{color:#3B6FD4}
.gseg button{display:flex;align-items:center;justify-content:center;gap:5px}
.gseg .gi{width:16px;height:16px}
.hg span,.gseg span{display:block;line-height:1}
.ic{display:inline-block;line-height:1;font-style:normal}
.hg.on{border-color:var(--red);background:var(--pink-s);color:var(--red)}
.home-btns{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}
.home-hint{margin:14px 0 0;font-size:13px;color:var(--ink2);letter-spacing:1px}
.home-foot{margin:auto 0 0;padding-top:28px;font-size:11.5px;color:var(--ink2)}

/* ---------- 选词页 ---------- */
.subbar{position:sticky;top:52px;z-index:19;background:rgba(251,243,234,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.meter{padding:2px 16px 8px}
.meter-info{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--ink2)}
.meter-info b{font-family:var(--serif);font-weight:900;font-size:16px;color:var(--red)}
.meter-bar{height:6px;border-radius:3px;background:rgba(35,31,31,.08);overflow:hidden;margin-top:5px}
.meter-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#F7A1BF,var(--pink),var(--red));transition:width .35s}
.meter.max .meter-bar i{animation:maxGlow 1s ease-in-out infinite alternate}
@keyframes maxGlow{to{filter:brightness(1.25) saturate(1.3)}}
.jump{display:flex;gap:6px;overflow-x:auto;padding:0 12px 9px;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump button{flex:none;height:30px;padding:0 11px;border-radius:15px;font-size:13px;color:var(--ink2);background:rgba(255,255,255,.6);border:1px solid var(--line);display:inline-flex;align-items:center;gap:4px;line-height:1}
.jump button.on{color:var(--red);border-color:rgba(215,38,61,.45);background:var(--pink-s);font-weight:700}
.jump button em{font-style:normal;font-size:11px;margin-left:3px;opacity:.8}

.sections{padding:4px 0 calc(96px + var(--safe-b))}
.sec{padding:16px 16px 6px;scroll-margin-top:150px}
.sec-h{display:flex;align-items:center;gap:10px;margin:2px 0 14px}
.sec-h::before,.sec-h::after{content:"";flex:1;height:0;border-top:1.5px solid rgba(35,31,31,.18)}
.sec-h h2{margin:0;font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:1px;white-space:nowrap;display:flex;align-items:center;gap:6px;line-height:1.2}
.sec-h h2 .ic{font-size:.95em}
.sec-h .n{font-size:12px;color:var(--ink2);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:10px 8px}
.chip{
  position:relative;padding:8px 13px;border-radius:10px;background:var(--card);border:1px solid var(--line);
  font-size:15px;line-height:1.25;color:var(--ink);transition:background .15s,transform .1s;
}
.chip:active{transform:scale(.96)}
.chip svg.ring{position:absolute;left:-7px;top:-6px;width:calc(100% + 14px);height:calc(100% + 12px);pointer-events:none;overflow:visible}
.chip svg.ring path{fill:none;stroke:var(--pink);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset .35s ease-out}
.chip.on{background:var(--pink-s);border-color:transparent;font-weight:700}
.chip.on svg.ring path{stroke-dashoffset:0}
.chip.add{border-style:dashed;color:var(--ink2);background:transparent}
.chip .del{display:inline-block;margin-left:6px;width:16px;height:16px;line-height:15px;border-radius:50%;background:rgba(35,31,31,.1);font-size:12px;text-align:center;color:var(--ink2)}

.actionbar{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:25;width:100%;max-width:560px;
  display:flex;gap:8px;padding:10px 12px calc(10px + var(--safe-b));
  background:rgba(251,243,234,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
}
.actionbar .btn.ghost{padding:0 14px}

/* ---------- 盖章页 ---------- */
.page.dark{background:#1E1517;color:#fff}
.topbar.dark{background:rgba(30,21,23,.92)}
.topbar.dark .icon-btn{color:#fff}
.topbar.dark small{color:rgba(255,255,255,.65)}
.stamp-wrap{display:flex;justify-content:center;padding:10px 16px}
.stamp-stage{position:relative;display:inline-block;line-height:0;max-width:100%;cursor:crosshair;border-radius:6px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.stamp-stage img{max-width:min(528px,calc(100vw - 32px));max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);width:auto;height:auto;display:block}
.stamp-stage.shake{animation:shake .32s}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,4px)}40%{transform:translate(5px,-5px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(3px,3px)}}
.tap-hint{position:absolute;left:50%;top:50%;font-size:44px;line-height:1;transform:translate(-50%,-50%);animation:tapPulse 1.2s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
@keyframes tapPulse{50%{transform:translate(-50%,-50%) scale(1.25)}}
.stamp-bottom{text-align:center;padding:4px 0 calc(16px + var(--safe-b))}
.stamp-bottom .link{color:rgba(255,255,255,.65)}
.seal-drop{position:absolute;pointer-events:none;mix-blend-mode:multiply;transform:translate(-50%,-50%) rotate(-12deg) scale(2.6);opacity:0;animation:sealDrop .3s cubic-bezier(.55,0,.8,.2) forwards}
@keyframes sealDrop{to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:.92}}
.ink-dot{position:absolute;border-radius:50%;background:var(--red);pointer-events:none;animation:inkFly .55s ease-out forwards}
@keyframes inkFly{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}

/* ---------- 加载 ---------- */
.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(251,243,234,.75);color:var(--ink);font-size:14px;line-height:1.4}
.page.dark .loading{background:rgba(30,21,23,.85);color:#fff}
.loading.on{display:flex}
.loading span{width:30px;height:30px;border-radius:50%;border:3px solid rgba(215,38,61,.25);border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 结果页 ---------- */
.result{padding:6px 0 calc(28px + var(--safe-b))}
.score-card{margin:6px 16px 14px;padding:14px 16px 12px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-align:center}
.sc-label{font-size:12px;color:var(--ink2)}
.sc-rank{font-family:var(--serif);font-weight:900;font-size:24px;color:var(--red);line-height:1.3;margin:2px 0 4px}
.sc-sub{font-size:14px;color:var(--ink2);margin-bottom:6px}
.sc-sub b{font-family:var(--serif);color:var(--ink)}
.sc-row{display:flex;justify-content:center;gap:16px;font-size:13px;color:var(--ink2)}
.sc-row b{color:var(--ink);font-size:15px}
.sc-say{margin-top:8px;font-size:13px;color:var(--ink);font-family:var(--serif);line-height:1.6}
.sc-say span{color:var(--ink2)}
.sc-tend{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);text-align:left}
.sc-tend:empty{display:none}
.sc-tend h4{margin:0 0 6px;font-size:13px;color:var(--ink2);font-weight:700;text-align:center}
.tend{display:grid;grid-template-columns:96px 1fr 76px;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.tend .tb{height:6px;border-radius:3px;background:rgba(35,31,31,.08);overflow:hidden}
.tend .tb i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#F7A1BF,var(--pink),var(--red))}
.tend .tp{text-align:right;font-size:12px;color:var(--ink2)}
.tend .tp b{color:var(--red)}
.sc-badges{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.ach-h{font-size:13px;color:var(--ink2);font-weight:700;margin-bottom:6px}
.ach-h b{color:#A0731E;font-size:15px}
.ach-got{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.ach-none{font-size:12px;color:var(--ink2)}
.ach-more{margin-top:8px;font-size:12.5px;color:var(--ink2);text-align:left}
.ach-more summary{cursor:pointer;text-align:center;color:var(--red);font-weight:700;list-style:none}
.ach-more summary::-webkit-details-marker{display:none}
.ach-more div{padding:4px 0;border-bottom:1px dashed var(--line)}
.ach-got span{font-size:12px;padding:3px 9px;border-radius:999px;background:#FBF0D9;color:#8A5E12;border:1px solid rgba(184,134,47,.35)}
.preview{position:relative;margin:0 16px;border-radius:12px;overflow:auto;max-height:72vh;max-height:72dvh;background:#E6DBD0;box-shadow:0 6px 24px rgba(60,20,30,.14);line-height:0;min-height:200px}
.preview img{width:100%;display:block}
.overflow-tip{margin:10px 16px 0;padding:8px 12px;border-radius:10px;background:#FFF4DB;font-size:13px;color:#7A5410}
.opt-h{margin:20px 16px 8px;font-family:var(--serif);font-weight:900;font-size:15px;display:flex;align-items:baseline;gap:8px}
.opt-h small{font-family:var(--sans);font-weight:400;font-size:12px;color:var(--ink2)}
.style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 16px}
.sty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:60px;padding:9px 2px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.55);font-size:12px;color:var(--ink)}
.sty i{font-style:normal;font-size:22px;line-height:1.1}
.sty.on{border-color:var(--red);background:var(--pink-s);color:var(--red);font-weight:700}
.seg{display:flex;margin:0 16px;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.55)}
.seg button{flex:1;padding:8px 2px;font-size:14px;line-height:1.2;color:var(--ink);border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}
.seg button small{display:block;font-size:10.5px;color:var(--ink2);margin-top:1px}
.seg button.on{background:var(--pink-s);color:var(--red);font-weight:700}
.seg button.on small{color:var(--red)}
.seg button:disabled{opacity:.3;cursor:not-allowed}
.seg.mini{margin:0}
.seg.mini button{padding:9px 2px}
.avatar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 16px 0}
.avatar-row small{font-size:11.5px;color:var(--ink2)}
.result-actions{margin:22px 16px 0}
.ra-sub{display:flex;gap:8px;margin-top:10px}
.ra-sub .btn{flex:1;padding:0 6px;font-size:14px}
.tip{text-align:center;font-size:12px;color:var(--ink2);margin:12px 0 0}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(30,15,20,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal.on{display:flex}
.mcard{position:relative;width:100%;max-width:380px;background:var(--card);border-radius:20px;padding:24px 20px 20px;text-align:center;animation:pop .22s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.mcard h2{margin:0 0 6px;font-family:var(--serif);font-weight:900;font-size:21px}
.mcard p{margin:0 0 18px;font-size:14px;color:var(--ink);line-height:1.7}
.mcard .btn+.btn{margin-top:10px}
.m-ic{font-size:40px;line-height:1;margin-bottom:8px}
.m-sub{color:var(--ink2)!important;font-size:13px!important}
.m-x{position:absolute;right:10px;top:8px;width:36px;height:36px;font-size:24px;color:var(--ink2)}
.m-note{margin:10px 0 0!important;font-size:12px!important;color:var(--ink2)!important}
.field{display:block;text-align:left;margin:0 0 14px}
.field>span{display:block;font-size:13px;color:var(--ink2);margin-bottom:5px}
.field input,.dr-item input{width:100%;height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:0 14px;font-size:16px}
.field input:focus,.dr-item input:focus{border-color:var(--pink)}
.gender-pick{display:flex;gap:12px}
.gcard{flex:1;border-radius:16px;border:2px solid var(--line);padding:18px 0 14px;background:#fff;transition:transform .1s}
.gcard:active{transform:scale(.96)}
.gcard .gi{width:46px;height:46px;margin:0 auto 2px}
.gcard b{display:block;font-family:var(--serif);font-size:18px;margin-top:4px}

/* ---------- 设置抽屉 ---------- */
.drawer-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:70;background:rgba(30,15,20,.45);display:none}
.drawer-mask.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:71;width:min(86vw,380px);background:var(--card);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.15)}
.drawer.on{transform:none}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px 18px;border-bottom:1px solid var(--line)}
.dr-head b{font-family:var(--serif);font-size:18px}
.dr-save{height:34px;padding:0 16px;border-radius:17px;background:var(--red);color:#fff;font-size:14px;font-weight:700;box-shadow:0 2px 0 var(--red-d)}
.dr-save:active{transform:translateY(1px);box-shadow:0 1px 0 var(--red-d)}
.dr-body{flex:1;overflow-y:auto;padding:8px 18px calc(24px + var(--safe-b));overscroll-behavior:contain}
.dr-item{padding:12px 0;border-bottom:1px dashed var(--line)}
.dr-item>span{display:block;font-size:13px;color:var(--ink2);margin-bottom:7px}
.preset{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.preset button{font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}
.preset button.on{border-color:var(--red);color:var(--red);background:var(--pink-s)}
.dr-about{margin:18px 0 0;font-size:12px;color:var(--ink2);line-height:1.7;text-align:center}

/* ---------- 吐司 ---------- */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;width:max-content;max-width:min(88vw,460px);padding:11px 18px;border-radius:14px;line-height:1.45;background:rgba(35,25,28,.92);color:#fff;font-size:14px;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast .link{color:#FFB3C8;font-weight:700;white-space:nowrap}
.fx{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:80}

@media (min-width:600px){
  body{padding:0}
  .home-title{font-size:50px}
}