/* ==========================================================================
   發爻 · 雌堕训练 —— 前台 + 后台样式
   ========================================================================== */
:root{
  --bg:#0b0710;
  --bg-2:#140c19;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --text:#f4e9f1;
  --muted:#b9a6bd;
  --dim:#8d7b92;
  --rose:#ff5fa2;
  --rose-2:#ff9dc6;
  --violet:#a98bff;
  --gold:#e9c47f;
  --danger:#ff6b6b;
  --ok:#69d6a5;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,"Segoe UI",sans-serif;
  --radius:18px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --max:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:15px; line-height:1.75; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(255,95,162,.16), transparent 62%),
    radial-gradient(760px 480px at 6% 8%, rgba(169,139,255,.14), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(255,95,162,.08), transparent 60%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,textarea,select{font-family:inherit; font-size:inherit; color:inherit}
::selection{background:rgba(255,95,162,.35)}

/* ---------- 背景层 ---------- */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden; background:#0b0710}
.bg img{width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; transition:opacity .5s ease; opacity:0}
.bg img.on{opacity:1}
.veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,7,16,.72) 0%, rgba(11,7,16,.86) 45%, rgba(11,7,16,.94) 100%);
}
body.has-bg .veil{background:linear-gradient(180deg, rgba(11,7,16,.55), rgba(11,7,16,.82) 55%, rgba(11,7,16,.95))}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:26px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(11,7,16,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:10px; flex:none}
.brand b{
  font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:.16em;
  color:#ffd8e8;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand b{
    background:linear-gradient(120deg,#ffd8e8,var(--rose) 45%,var(--violet));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.brand span{font-size:10.5px; letter-spacing:.42em; color:var(--dim); text-transform:uppercase}
.nav{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.nav a{
  position:relative; padding:8px 14px; border-radius:999px; font-size:13.5px;
  color:var(--muted); letter-spacing:.08em; transition:.22s;
}
.nav a:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav a.on{color:#fff; background:linear-gradient(120deg,rgba(255,95,162,.22),rgba(169,139,255,.18)); box-shadow:inset 0 0 0 1px rgba(255,95,162,.3)}
.top-actions{display:flex; align-items:center; gap:10px; flex:none}
.who-chip{display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line)}
.who-chip img{width:26px; height:26px; border-radius:50%; object-fit:cover; background:#241a2c}
.who-chip .nm{font-size:12.5px; color:var(--text); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.icon-btn{background:none; border:1px solid var(--line); color:var(--muted); border-radius:999px;
  padding:7px 14px; font-size:12.5px; cursor:pointer; transition:.2s}
.icon-btn:hover{color:#fff; border-color:var(--line-2); background:rgba(255,255,255,.05)}

@media(max-width:760px){
  .topbar{flex-wrap:wrap; gap:10px; padding:12px 16px}
  .brand b{font-size:22px}
  .brand span{display:none}
  .nav{order:3; width:100%; margin-left:0; justify-content:space-between; gap:2px}
  .nav a{padding:7px 9px; font-size:12.5px}
  .top-actions{margin-left:auto}
  .who-chip .nm{max-width:84px}
}

/* ---------- 通用 ---------- */
#app{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:0 clamp(16px,4vw,40px) 96px}
.page-head{padding:64px 0 26px; max-width:760px}
.kicker{font-size:10.5px; letter-spacing:.5em; color:var(--rose); text-transform:uppercase; margin:0 0 14px; opacity:.85}
h1.title{font-family:var(--serif); font-size:clamp(34px,5vw,54px); line-height:1.18; margin:0 0 14px; letter-spacing:.04em; font-weight:700}
.lead{color:var(--muted); font-size:14.5px; margin:0; max-width:60ch}
.card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px; box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.card + .card{margin-top:18px}
hr.rule{border:0; height:1px; background:linear-gradient(90deg,var(--line),transparent); margin:22px 0}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; border:0; cursor:pointer;
  font-size:13.5px; letter-spacing:.08em; font-weight:600; transition:.22s;
  background:linear-gradient(120deg,var(--rose),#ff7fb7 45%,var(--violet));
  color:#1a0710; box-shadow:0 10px 30px rgba(255,95,162,.25);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 36px rgba(255,95,162,.35)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line-2); box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.06); box-shadow:none}
.btn.gold{background:linear-gradient(120deg,#f6dca6,var(--gold)); color:#2a1c07}
.btn.sm{padding:8px 16px; font-size:12.5px}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

.tag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; letter-spacing:.12em;
  border:1px solid var(--line-2); color:var(--muted)}
.tag.rose{color:var(--rose-2); border-color:rgba(255,95,162,.4); background:rgba(255,95,162,.08)}
.tag.gold{color:var(--gold); border-color:rgba(233,196,127,.4); background:rgba(233,196,127,.08)}

/* 身份前缀 */
.tier{
  font-family:var(--serif); font-weight:700; font-size:.92em; letter-spacing:.06em;
  padding:1px 8px 2px; margin-right:6px; border-radius:6px; vertical-align:1px;
  border:1px solid currentColor; background:rgba(255,255,255,.03); white-space:nowrap;
}
.tier-1{color:#c9a4ff; text-shadow:0 0 18px rgba(185,139,255,.45)}
.tier-2{color:#ff8cbd; text-shadow:0 0 18px rgba(255,95,162,.45)}
.tier-3{color:#ffd98d; text-shadow:0 0 20px rgba(233,196,127,.55)}
.tier-3::after{content:"·1V1"; font-size:.72em; letter-spacing:.1em; opacity:.85; margin-left:3px}

/* ---------- 首页 ---------- */
.hero{padding:clamp(54px,9vw,104px) 0 40px; position:relative}
.hero-kicker{font-size:10px; letter-spacing:.55em; color:var(--dim); margin:0 0 22px}
.hero-title{
  font-family:var(--serif); font-weight:700; margin:0; line-height:.92;
  font-size:clamp(76px,15vw,168px); letter-spacing:.06em;
  color:#ffd3e5;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title{
    background:linear-gradient(150deg,#fff 2%,#ffd4e6 24%,var(--rose) 52%,#8f6bff 88%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 12px 46px rgba(255,95,162,.28));
  }
}
.hero-sub{font-family:var(--serif); font-size:clamp(16px,2.1vw,22px); color:#e7d7e5; margin:22px 0 0; letter-spacing:.14em}
.hero-line{width:76px; height:1px; background:linear-gradient(90deg,var(--rose),transparent); margin:26px 0}
.hero-note{color:var(--muted); font-size:13.5px; max-width:52ch; margin:0}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:56px 0 18px}
.sec-head h2{font-family:var(--serif); font-size:26px; margin:0; letter-spacing:.1em; font-weight:700}
.sec-head .en{font-size:10px; letter-spacing:.42em; color:var(--dim); text-transform:uppercase}

.cards{display:grid; gap:18px; margin-top:36px}
.card-who{padding:24px 28px 26px}
.card-who::after{content:""; display:block; clear:both}
.who-head{display:block; margin:0 0 6px}
.avatar-float{position:relative; float:right; flex:none; width:clamp(72px, 11vw, 132px); margin:0 0 12px 20px}
.avatar-frame{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  background:linear-gradient(145deg,#241826,#120c17); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,95,162,.14) inset;
  transform:rotate(-2.2deg); transition:transform .35s;
}
.avatar-float:hover .avatar-frame{transform:rotate(0) translateY(-2px)}
.avatar-frame img{width:100%; height:100%; object-fit:cover; transform-origin:50% 50%}
.avatar-frame .ph{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  color:var(--dim); font-size:11px; letter-spacing:.2em; line-height:1.8;
}
.avatar-frame .ph span{
  font-family:var(--serif); font-size:clamp(20px, 3vw, 34px); letter-spacing:0;
  color:rgba(255,235,245,.16); text-shadow:0 0 24px rgba(255,95,162,.25);
}
.x-link{
  display:inline-flex; align-items:center; gap:9px; margin-top:0;
  min-width:0; white-space:nowrap;
  font-size:clamp(10px, 2.8vw, 14px); color:#ffe3ef; line-height:1.6; max-width:none;
  border-bottom:1px solid rgba(255,157,198,.35); padding-bottom:5px; transition:.22s;
}
.x-link:hover{color:#fff; border-color:var(--rose); text-shadow:0 0 24px rgba(255,95,162,.5)}
.x-link .x-mark{
  flex:none; width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  background:rgba(255,255,255,.09); border:1px solid var(--line-2); font-size:11px; color:#fff;
}
.card-who .card-title{margin:8px 0 10px}
.card-index{font-family:var(--serif); font-size:11px; font-weight:400; letter-spacing:.3em; color:var(--dim); margin-left:10px; vertical-align:3px}
.card-who .prose{line-height:1.92}

.card-no{position:absolute; top:22px; right:26px; font-family:var(--serif); font-size:12px; letter-spacing:.3em; color:var(--dim)}
.card-title{font-family:var(--serif); font-size:23px; margin:0 0 12px; letter-spacing:.14em; font-weight:700; color:#ffeaf2}
.prose{color:#dccddb; font-size:14.5px; line-height:2}
.prose p{margin:0 0 .75em}
.prose p:last-child{margin-bottom:0}
.prose ol,.prose ul{margin:0 0 .75em; padding-left:1.3em}
.prose li{margin:.2em 0}

.grid-2{display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start}
.grid-2 > .card + .card{margin-top:0}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}

/* ---------- 上贡 ---------- */
.ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:26px 0 8px}
@media(max-width:900px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ladder{grid-template-columns:1fr}}
.rung{
  position:relative; padding:20px 18px 18px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); overflow:hidden;
}
.rung::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--rose),transparent)}
.rung.t1::before{background:linear-gradient(90deg,#b98bff,transparent)}
.rung.t2::before{background:linear-gradient(90deg,var(--rose),transparent)}
.rung.t3::before{background:linear-gradient(90deg,var(--gold),transparent)}
.rung .amt{font-family:var(--serif); font-size:26px; letter-spacing:.02em; color:#fff}
.rung .amt small{font-size:12px; color:var(--dim); margin-left:6px; letter-spacing:.1em}
.rung .rk{font-size:12.5px; color:var(--text); margin:8px 0 2px; letter-spacing:.06em}
.rung .rp{font-size:12px; color:var(--muted); line-height:1.7; margin:0}

.form-note{font-size:12px; color:var(--dim); line-height:1.9; margin:14px 0 0}
.field{margin-bottom:20px}
.field label{display:block; font-size:12.5px; letter-spacing:.12em; color:#e9d9e8; margin-bottom:9px}
.field label .req{color:var(--rose); margin-left:3px}
.hint{font-size:11.5px; color:var(--dim); line-height:1.8; margin:8px 0 0}
.input,textarea.input,select.input{
  width:100%; background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-radius:12px; padding:13px 15px; color:var(--text); outline:none; transition:.2s; font-size:14px;
}
.input::placeholder,textarea.input::placeholder{color:#7a687f}
.input:focus,textarea.input:focus{border-color:rgba(255,95,162,.55); background:rgba(255,95,162,.05); box-shadow:0 0 0 3px rgba(255,95,162,.09)}
.input.missing,textarea.input.missing{border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,107,.12)}
textarea.input{resize:vertical; min-height:120px; line-height:1.9}
.counter{float:right; font-size:11px; color:var(--dim); letter-spacing:.06em}
.counter.over{color:var(--danger)}
.inline-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:600px){.inline-2{grid-template-columns:1fr}}
.amount-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.amount-chips button{
  border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px;
  padding:6px 14px; font-size:12px; cursor:pointer; transition:.2s
}
.amount-chips button:hover{border-color:var(--line-2); color:#fff; background:rgba(255,255,255,.05)}

/* 供奉墙 */
.wall-sec{margin-top:64px}
.wall-note{font-size:12px; color:var(--dim); letter-spacing:.06em}
.podium{list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:10px}
.podium li{
  display:flex; align-items:center; gap:18px; padding:16px 20px; border-radius:16px;
  border:1px solid var(--line); background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:.24s;
}
.podium li:hover{border-color:rgba(255,95,162,.35); transform:translateX(3px)}
.podium .rank{
  font-family:var(--serif); font-size:28px; width:44px; flex:none; text-align:center; color:#6f5a76; letter-spacing:0
}
.podium li:nth-child(1) .rank{color:var(--gold); text-shadow:0 0 22px rgba(233,196,127,.5)}
.podium li:nth-child(2) .rank{color:#e3e3ee}
.podium li:nth-child(3) .rank{color:#d59a74}
.podium .who{flex:none; min-width:120px; font-size:13.5px; color:#f0e2ef}
.podium .decl{flex:1; font-family:var(--serif); font-size:16px; color:#ffeaf3; letter-spacing:.06em}
.podium .decl::before{content:"「"} .podium .decl::after{content:"」"}
.wall-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.decl{
  position:relative; padding:14px 16px; border-radius:13px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); font-size:13.5px; color:#e3d3e2; transition:.22s; cursor:default;
  display:flex; flex-direction:column; gap:4px;
}
.decl:hover{border-color:rgba(255,157,198,.4); background:rgba(255,95,162,.06)}
.decl .txt{font-family:var(--serif); font-size:15px; color:#f6e6f2; letter-spacing:.04em}
.decl .meta{font-size:11px; color:var(--dim); display:flex; align-items:center; gap:6px}
.decl .at{
  position:absolute; right:10px; top:-10px; padding:2px 9px; border-radius:999px; font-size:11px;
  background:#1b1020; border:1px solid rgba(255,157,198,.35); color:var(--rose-2);
  opacity:0; transform:translateY(4px); pointer-events:none; transition:.2s; white-space:nowrap;
}
.decl:hover .at,.decl:focus .at{opacity:1; transform:translateY(0)}
.decl.seed .meta::after{content:"· 常驻"; color:#5f4d66}
@media(hover:none){.decl .at{position:static; opacity:1; transform:none; border:0; background:none; padding:0; font-size:10.5px}}

/* ---------- 小说 ---------- */
.novel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:26px}
.novel-card{
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--panel); transition:.28s; min-height:220px;
}
.novel-card:hover{transform:translateY(-4px); border-color:rgba(255,95,162,.4); box-shadow:0 24px 50px rgba(0,0,0,.5)}
.novel-cover{height:170px; background:linear-gradient(140deg,#241528,#120a17); position:relative; overflow:hidden}
.novel-cover img{width:100%; height:100%; object-fit:cover}
.novel-cover .no-cover{
  position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif);
  font-size:30px; letter-spacing:.3em; color:rgba(255,255,255,.09)
}
.novel-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(11,7,16,.85))}
.novel-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.novel-body h3{font-family:var(--serif); font-size:18px; margin:0; letter-spacing:.06em; line-height:1.5}
.novel-body .ex{font-size:12px; color:var(--muted); line-height:1.8; flex:1}
.novel-meta{display:flex; justify-content:space-between; font-size:10.5px; color:var(--dim); letter-spacing:.1em}

.reader{max-width:760px; margin:0 auto; padding:44px 0 40px}
.reader-cover{width:100%; max-height:420px; object-fit:cover; border-radius:18px; margin-bottom:28px; border:1px solid var(--line)}
.reader h1{font-family:var(--serif); font-size:clamp(28px,4vw,40px); line-height:1.35; margin:0 0 18px; letter-spacing:.04em}
.reader .body{font-family:var(--serif); font-size:16.5px; line-height:2.15; color:#e8dbe6; white-space:pre-wrap; word-break:break-word}
.reader .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font-size:12px; color:var(--dim)}

/* 上锁 */
.lock{
  max-width:620px; margin:60px auto; text-align:center; padding:46px 34px; border-radius:22px;
  border:1px solid rgba(255,95,162,.28); background:linear-gradient(180deg,rgba(255,95,162,.09),rgba(255,255,255,.02));
}
.lock .ico{font-size:30px; margin-bottom:10px; filter:drop-shadow(0 0 18px rgba(255,95,162,.5))}
.lock h2{font-family:var(--serif); font-size:24px; margin:0 0 12px; letter-spacing:.08em}
.lock p{color:var(--muted); font-size:13.5px; margin:0 0 8px}
.lock .btn{margin-top:22px}

/* ---------- 测试 ---------- */
.quiz-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.progress{display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted)}
.progress .bar{width:150px; height:4px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.progress .bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--rose),var(--violet)); transition:width .3s}
.q-list{margin-top:26px; display:grid; gap:10px}
.q{
  padding:18px 20px; border-radius:15px; border:1px solid var(--line); background:var(--panel); transition:.2s;
}
.q.answered{border-color:rgba(255,95,162,.28); background:rgba(255,95,162,.045)}
.q.missing{animation:shake .5s; border-color:var(--danger)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.q-head{display:flex; gap:12px; align-items:flex-start}
.q-no{flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:11px;
  background:rgba(255,255,255,.07); color:var(--muted); margin-top:2px}
.q-text{font-size:14.5px; margin:0; line-height:1.7}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 36px}
.opts label{
  cursor:pointer; padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  font-size:12.5px; color:var(--muted); transition:.18s; user-select:none;
}
.opts input{display:none}
.opts label:hover{border-color:var(--line-2); color:#fff}
.opts input:checked + span{color:#2a0714}
.opts label:has(input:checked){
  background:linear-gradient(120deg,var(--rose),#ff86bb); border-color:transparent; color:#2a0714; font-weight:600;
  box-shadow:0 8px 22px rgba(255,95,162,.3)
}
.quiz-bar{
  position:sticky; bottom:18px; margin-top:26px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 18px; border-radius:999px; border:1px solid var(--line-2);
  background:rgba(20,12,25,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.55); flex-wrap:wrap;
}

/* 分享闸门 */
.gate{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:26px; align-items:start; margin-top:30px}
@media(max-width:900px){.gate{grid-template-columns:1fr}}
.gate-steps{counter-reset:step; display:grid; gap:14px; margin-top:22px}
.step{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.03)}
.step .n{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; color:#2a0714; background:linear-gradient(120deg,var(--rose),var(--violet)); font-weight:700}
.step h4{margin:0 0 6px; font-size:14px; letter-spacing:.04em}
.step p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.8}
.step .btn-row{margin-top:12px}
.poster-box{border-radius:18px; overflow:hidden; border:1px solid var(--line-2); background:#0e0912; position:relative}
.poster-box canvas{display:block; width:100%; height:auto}
.poster-lock{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  background:rgba(11,7,16,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:12.5px; color:#ffd8e8; letter-spacing:.1em; line-height:2;
}
.poster-lock .lk{font-size:26px; display:block; margin-bottom:6px}
.copy-box{
  margin-top:16px; padding:16px 18px; border-radius:14px; border:1px dashed rgba(255,157,198,.3);
  background:rgba(255,95,162,.05); font-size:12.5px; color:#f0d9e6; line-height:1.9; white-space:pre-wrap; word-break:break-all;
}

/* 结果 */
.result-wrap{margin-top:26px}
.score-card{display:flex; gap:34px; align-items:center; padding:30px; border-radius:20px;
  border:1px solid var(--line); background:linear-gradient(140deg,rgba(255,95,162,.1),rgba(169,139,255,.06) 55%,rgba(255,255,255,.02));
  flex-wrap:wrap}
.ring{position:relative; flex:none; width:154px; height:154px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring .c{fill:none; stroke-width:11; stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.08)}
.ring .val{stroke:url(#rg); transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.ring .ctr{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.ring .ctr b{font-family:var(--serif); font-size:44px; line-height:1; letter-spacing:-.02em; display:block}
.ring .ctr small{font-size:10px; letter-spacing:.24em; color:var(--dim)}
.score-meta{flex:1; min-width:240px}
.score-tags{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.band-pill{padding:5px 13px; border-radius:999px; font-size:11.5px; letter-spacing:.14em; border:1px solid currentColor}
.profile-name{font-family:var(--serif); font-size:22px; letter-spacing:.06em; color:#fff}
.profile-body{font-size:13.5px; color:#e0d1de; line-height:2; white-space:pre-wrap}
.radar-card{padding:26px; border-radius:20px; border:1px solid var(--line); background:var(--panel); margin-top:18px}
.radar-card svg{width:100%; max-width:420px; height:auto; display:block; margin:6px auto}
.dim{margin-top:14px}
.dim-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px}
.dim-top b{font-family:var(--serif); font-size:15px; color:#ffd8e8}
.dim-bar{height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.dim-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--rose),var(--violet))}
.dim-note{font-size:11.5px; color:var(--dim); margin:7px 0 0; line-height:1.8}
.disclaimer{font-size:11.5px; color:#6f5f74; line-height:2; margin-top:26px; border-top:1px solid var(--line); padding-top:18px}

/* ---------- 弹窗 / 提示 ---------- */
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(6,4,9,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.modal-card{width:min(440px,100%); border-radius:20px; border:1px solid var(--line-2);
  background:linear-gradient(180deg,#1a1020,#120b18); padding:30px; box-shadow:0 40px 90px rgba(0,0,0,.7)}
.modal-card h3{font-family:var(--serif); font-size:22px; margin:0 0 8px; letter-spacing:.08em}
.modal-card p{font-size:12.5px; color:var(--muted); line-height:1.9; margin:0 0 20px}
.modal-close{position:absolute; right:18px; top:14px; background:none; border:0; color:var(--dim); font-size:20px; cursor:pointer}
.modal-card .close-row{margin-top:14px; text-align:center}
.link-btn{background:none; border:0; color:var(--rose-2); font-size:12px; cursor:pointer; letter-spacing:.06em}
.link-btn:hover{text-decoration:underline}
.x-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:13px; border-radius:12px; background:#f7f9f9; color:#0f1419; font-weight:700; font-size:14px; border:0; cursor:pointer}
.x-btn:hover{background:#fff}
.x-btn .xm{font-family:var(--serif); font-size:16px}
.dev-form{margin-top:18px; padding-top:18px; border-top:1px dashed var(--line)}
.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); z-index:100;
  padding:12px 22px; border-radius:999px; background:rgba(26,16,32,.96); border:1px solid var(--line-2);
  font-size:13px; color:#fff; opacity:0; pointer-events:none; transition:.28s; max-width:88vw; text-align:center;
  box-shadow:0 18px 40px rgba(0,0,0,.5)
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.bad{border-color:rgba(255,107,107,.5); color:#ffd4d4}

.foot{position:relative; z-index:1; max-width:var(--max); margin:0 auto; padding:34px clamp(16px,4vw,40px) 50px;
  border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; color:#6b5a71; letter-spacing:.1em}
.foot a:hover{color:var(--rose-2)}

.empty{padding:40px; text-align:center; color:var(--dim); font-size:13px; border:1px dashed var(--line); border-radius:16px}

/* ==========================================================================
   后台
   ========================================================================== */
.admin-body{background:#08050b}
.admin-wrap{display:grid; grid-template-columns:230px minmax(0,1fr); gap:26px; max-width:1360px; margin:0 auto;
  padding:26px clamp(14px,3vw,32px) 60px; position:relative; z-index:1}
@media(max-width:900px){.admin-wrap{grid-template-columns:1fr}}
.side{position:sticky; top:24px; align-self:start; border:1px solid var(--line); border-radius:18px;
  background:rgba(255,255,255,.03); padding:18px 14px}
.side .brand{font-size:20px; margin:0 6px 4px}
.side .sub{font-size:10px; letter-spacing:.24em; color:var(--dim); margin:0 6px 18px}
.side nav{display:grid; gap:4px}
.side nav button{
  text-align:left; background:none; border:0; color:var(--muted); padding:10px 12px; border-radius:10px;
  font-size:13px; cursor:pointer; letter-spacing:.05em; display:flex; align-items:center; gap:9px; transition:.2s
}
.side nav button:hover{background:rgba(255,255,255,.05); color:#fff}
.side nav button.on{background:linear-gradient(120deg,rgba(255,95,162,.18),rgba(169,139,255,.12)); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,95,162,.25)}
.side nav button .dot{width:6px; height:6px; border-radius:50%; background:var(--rose); opacity:0}
.side nav button.has-new .dot{opacity:1}
.side .side-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--dim); line-height:1.9}
.panel{display:none}
.panel.on{display:block; animation:fade .25s}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.panel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.panel-head h2{font-family:var(--serif); font-size:26px; margin:0; letter-spacing:.1em}
.panel-head p{margin:6px 0 0; font-size:12px; color:var(--dim)}
.admin-card{border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.03); padding:22px; margin-bottom:16px}
.admin-card h3{margin:0 0 4px; font-size:14px; letter-spacing:.1em}
.admin-card .sub{font-size:11.5px; color:var(--dim); margin:0 0 16px; line-height:1.8}

/* 裁切器 */
.crop-layout{display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; align-items:start}
@media(max-width:760px){.crop-layout{grid-template-columns:1fr}}
.crop-frame{
  position:relative; width:100%; max-width:280px; aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  background:#120c17; border:1px solid var(--line-2); cursor:grab; touch-action:none; user-select:none;
}
.crop-frame:active{cursor:grabbing}
.crop-frame img{width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; pointer-events:none}
.crop-frame .grid{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg,transparent 33.2%,rgba(255,255,255,.25) 33.3%,transparent 33.4%,transparent 66.5%,rgba(255,255,255,.25) 66.6%,transparent 66.7%),
  linear-gradient(0deg,transparent 33.2%,rgba(255,255,255,.25) 33.3%,transparent 33.4%,transparent 66.5%,rgba(255,255,255,.25) 66.6%,transparent 66.7%)}
.crop-frame .ph{position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font-size:11px; letter-spacing:.16em}
.crop-ctl{display:grid; gap:14px}
.crop-ctl .row{display:flex; align-items:center; gap:12px}
.crop-ctl .row label{font-size:11.5px; color:var(--muted); width:52px; flex:none; letter-spacing:.08em}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:99px;
  background:rgba(255,255,255,.14); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(120deg,var(--rose),var(--violet)); cursor:pointer; border:0; box-shadow:0 0 12px rgba(255,95,162,.6)}
.preview-mini{position:relative; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#0d0812}
.preview-mini img{width:100%; height:100%; object-fit:cover; transform-origin:50% 50%}
.preview-mini .pv-nav{position:absolute; top:0; left:0; right:0; height:22px; background:rgba(11,7,16,.7);
  border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; padding:0 8px; gap:6px}
.preview-mini .pv-nav i{width:22px; height:3px; border-radius:9px; background:rgba(255,255,255,.22); display:block}
.preview-mini .pv-txt{position:absolute; left:10%; top:42%; font-family:var(--serif); font-size:14px; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6); letter-spacing:.1em}
.preview-mini .pv-card{position:absolute; left:10%; right:10%; bottom:8%; height:26%; border-radius:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}

.bg-list{display:grid; gap:12px}
.bg-row{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; padding:12px;
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02)}
@media(max-width:640px){.bg-row{grid-template-columns:1fr}}
.bg-thumb{position:relative; width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:#0d0812;
  border:1px solid var(--line)}
.bg-thumb img{width:100%; height:100%; object-fit:cover; transform-origin:50% 50%}
.bg-thumb .none{position:absolute; inset:0; display:grid; place-items:center; font-size:10px; color:var(--dim); letter-spacing:.14em}
.bg-row .ctl{display:grid; gap:8px}
.bg-row .ctl .name{font-size:12.5px; display:flex; align-items:center; gap:8px; justify-content:space-between}

/* 小说编辑 */
.novel-editor{border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px; background:rgba(255,255,255,.02)}
.novel-editor .eh{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.novel-editor .eh b{font-size:12px; letter-spacing:.1em; color:var(--muted)}
.novel-editor textarea{min-height:140px}
.cover-pick{display:flex; align-items:center; gap:12px}
.cover-pick .thumb{width:86px; height:54px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#0d0812; flex:none}
.cover-pick .thumb img{width:100%; height:100%; object-fit:cover}
.cover-pick .thumb span{display:grid; place-items:center; height:100%; font-size:10px; color:var(--dim)}

/* 表格 */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px}
table.tbl{width:100%; border-collapse:collapse; font-size:12.5px; min-width:760px}
table.tbl th{text-align:left; padding:12px 14px; color:var(--dim); font-weight:500; letter-spacing:.1em; font-size:10.5px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.03); white-space:nowrap}
table.tbl td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr:hover td{background:rgba(255,255,255,.02)}
.mono{font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:#c9b8cc; word-break:break-all}
.status-seg{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.status-seg button{border:0; background:none; color:var(--muted); padding:5px 9px; font-size:11px; cursor:pointer; white-space:nowrap}
.status-seg button + button{border-left:1px solid var(--line)}
.status-seg button.on{color:#1a0710; background:linear-gradient(120deg,var(--rose),#ff86bb); font-weight:600}
.status-seg button.on.fake{background:linear-gradient(120deg,#ff6b6b,#ff9a9a); color:#2a0707}
.status-seg button.on.typo{background:linear-gradient(120deg,#c9b26a,#e9d79a); color:#2a2207}
.pill{display:inline-block; padding:2px 8px; border-radius:99px; font-size:10.5px; border:1px solid var(--line-2); color:var(--muted)}
.pill.claimed{color:#7be3b4; border-color:rgba(105,214,165,.4); background:rgba(105,214,165,.1)}
.pill.pending{color:#ffd38a; border-color:rgba(233,196,127,.35); background:rgba(233,196,127,.08)}
.pill.fake{color:#ff9b9b; border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.1)}
.pill.typo{color:#d8c98a; border-color:rgba(216,201,138,.35)}
.row-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.danger-link{background:none; border:0; color:#ff8a8a; font-size:11px; cursor:pointer; padding:0}
.danger-link:hover{text-decoration:underline}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px}
.stat{padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.stat b{font-family:var(--serif); font-size:26px; display:block; line-height:1.2}
.stat span{font-size:10.5px; color:var(--dim); letter-spacing:.14em}
.app-card{border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:12px; background:rgba(255,255,255,.025)}
.app-card .ah{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.app-card .kv{display:grid; grid-template-columns:86px 1fr; gap:8px 14px; font-size:12.5px; line-height:1.9}
.app-card .kv .k{color:var(--dim); font-size:11px; letter-spacing:.06em; padding-top:2px}
.app-card .kv .v{color:#e6d8e4; white-space:pre-wrap; word-break:break-word}
.status-select{background:#1a1020; border:1px solid var(--line); border-radius:9px; padding:6px 9px; font-size:11.5px; color:var(--text)}
.tiny{font-size:11px; color:var(--dim)}
.badge-x{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--dim); letter-spacing:.08em}
.login-wrap{max-width:420px; margin:12vh auto; position:relative; z-index:1; padding:0 20px}

/* ==========================================================================
   雌堕训练
   ========================================================================== */
.train-head{padding-bottom:18px}
.train-banner{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding:22px 26px; border-color:rgba(255,95,162,.28);
  background:linear-gradient(120deg,rgba(255,95,162,.13),rgba(169,139,255,.07));
}
.tb-left{display:flex; flex-direction:column; gap:4px; min-width:240px}
.tb-day{font-size:12px; letter-spacing:.18em; color:var(--muted)}
.tb-day b{font-family:var(--serif); font-size:40px; color:#fff; margin:0 5px; vertical-align:-3px; letter-spacing:0}
.tb-note{font-size:13.5px; color:#ffe3ef; letter-spacing:.02em}
.tb-right{flex:1; max-width:320px; min-width:180px}
.tb-num{font-size:11.5px; color:var(--dim); letter-spacing:.08em; text-align:right}
.tb-num b{font-family:var(--serif); font-size:19px; color:#fff; margin-right:2px}
.tb-bar{height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:8px}
.tb-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--rose),var(--violet)); transition:width .6s}
.tb-over{margin-top:8px; font-size:11px; color:#ffb0b0; text-align:right}

.task-card{margin-top:18px; padding:26px}
.task-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.08em; color:var(--dim)}
.task-tag{padding:4px 12px; border-radius:999px; color:#2a0714; font-weight:700;
  background:linear-gradient(120deg,var(--rose),#ff9dc6); letter-spacing:.06em}
.task-week{color:var(--muted)}
.task-theme{color:var(--rose-2); margin-left:auto; text-align:right; max-width:60%}
.task-headline{font-size:14px; color:#e8d9e6; margin:16px 0 0; line-height:1.9}
.task-long{font-size:12px; color:var(--dim); margin:8px 0 0; padding-left:10px; border-left:2px solid rgba(255,95,162,.35); line-height:1.9}
.task-items{display:grid; gap:12px; margin-top:18px}
.task-item{padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025)}
.ti-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.ti-no{flex:none; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; color:#2a0714; background:linear-gradient(120deg,var(--rose),var(--violet))}
.ti-head h4{margin:0; font-size:14.5px; letter-spacing:.03em}
.ti-min{margin-left:auto; font-size:11px; color:var(--dim); border:1px solid var(--line); padding:2px 9px; border-radius:99px}
.ti-body{white-space:pre-wrap; word-break:break-word; font-size:13.5px; line-height:2.05; color:#e2d3e0}
.task-msg{margin:18px 0 0; font-size:12.5px; color:#ffd8a8; background:rgba(233,196,127,.08);
  border:1px solid rgba(233,196,127,.25); border-radius:10px; padding:10px 14px; line-height:1.8}
.task-actions{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.ta-state{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.ta-refresh{font-size:11.5px; color:var(--dim); letter-spacing:.04em}
.ta-refresh b{font-family:ui-monospace,Consolas,monospace; color:#ffd8e8; font-weight:500}
.ta-btns{display:flex; gap:10px; flex-wrap:wrap}
.train-wait{margin-top:18px; text-align:center; padding:48px 26px}
.train-wait .ico{font-size:30px; margin-bottom:10px}
.train-wait h2{font-family:var(--serif); font-size:22px; margin:0 0 10px}
.train-wait p{color:var(--muted); font-size:13.5px; line-height:2; margin:0}
.train-done{margin-top:18px; text-align:center; padding:46px 26px; border-color:rgba(233,196,127,.4);
  background:linear-gradient(180deg,rgba(233,196,127,.1),rgba(255,255,255,.02))}
.done-badge{font-size:38px; color:var(--gold); text-shadow:0 0 30px rgba(233,196,127,.6); margin-bottom:6px}
.train-done h2{font-family:var(--serif); font-size:26px; margin:0 0 12px; letter-spacing:.1em}
.done-text{font-family:var(--serif); font-size:17px; line-height:2.1; color:#ffe3ef; margin:0 0 12px}
.train-history{margin-top:18px}
.train-history h3{font-family:var(--serif); font-size:17px; margin:0 0 14px; letter-spacing:.1em}
.th-list{display:grid; gap:6px}
.th-row{display:grid; grid-template-columns:110px 1fr auto; gap:10px; align-items:center;
  font-size:12.5px; color:var(--muted); padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.025)}
.th-row .pill{justify-self:end}

/* ---------- 结算动画 ---------- */
.celebrate{
  position:fixed; inset:0; z-index:120; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; padding:18px;
  background:radial-gradient(circle at 50% 40%, rgba(38,16,46,.94), rgba(6,4,9,.98) 70%);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:cbFade .35s ease both;
}
@keyframes cbFade{from{opacity:0}to{opacity:1}}
.celebrate-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.celebrate-card{
  position:relative; z-index:2; width:min(560px,100%); max-height:86vh; overflow:auto;
  padding:32px 28px; text-align:center; border-radius:22px;
  border:1px solid rgba(233,196,127,.35);
  background:linear-gradient(180deg,rgba(28,14,34,.92),rgba(14,8,18,.94));
  box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 60px rgba(255,95,162,.18);
  animation:cbIn .5s cubic-bezier(.2,.9,.25,1.1) both;
}
@keyframes cbIn{from{opacity:0; transform:translateY(18px) scale(.97)}to{opacity:1; transform:none}}
.cb-kicker{font-size:10px; letter-spacing:.5em; color:var(--gold); margin-bottom:12px}
.celebrate-card h2{font-family:var(--serif); font-size:28px; margin:0 0 14px; letter-spacing:.1em}
.celebrate-card p{font-family:var(--serif); font-size:16px; line-height:2; color:#ffe3ef; margin:0 0 14px}
.cb-meta{font-size:11px; color:var(--dim); letter-spacing:.16em; margin-bottom:22px}

/* ---------- 未配置 X 登录 ---------- */
.setup-box{margin-top:16px; padding:14px 16px; border-radius:12px; border:1px dashed rgba(255,157,198,.3);
  background:rgba(255,95,162,.05); font-size:12px; color:var(--muted); line-height:1.9; text-align:left}
.setup-box code{color:#ffd8e8; background:rgba(255,255,255,.06); padding:1px 5px; border-radius:4px}
.setup-box pre{margin:8px 0; padding:10px 12px; border-radius:8px; background:rgba(0,0,0,.35);
  font-size:11px; line-height:1.7; color:#e8dbe6; overflow:auto; white-space:pre; font-family:ui-monospace,Consolas,monospace}
.setup-box p{margin:6px 0 0; font-size:12px}

/* ==========================================================================
   移动端 / iOS / Android
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ min-height:100vh; min-height:100dvh; }

@supports(padding:max(0px)){
  .topbar{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
  #app{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
  .foot{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .quiz-bar{bottom:calc(14px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(28px + env(safe-area-inset-bottom))}
}

@media(max-width:760px){
  .card{padding:20px}
  .card-title{font-size:20px}
  .page-head{padding:40px 0 18px}
  .btn{padding:13px 20px; min-height:46px}
  .btn.sm{min-height:38px}
  .icon-btn{min-height:36px}
  .input,textarea.input,select.input{font-size:16px}      /* iOS 聚焦不放大 */
  .opts{margin-left:0}
  .opts label{padding:9px 12px; font-size:12.5px}
  .opts label:has(input:checked){box-shadow:0 4px 14px rgba(255,95,162,.28)}
  .q{padding:15px 14px}
  .q-text{font-size:14px}
  .quiz-bar{border-radius:18px; padding:10px 14px}
  .score-card{padding:22px; gap:20px; justify-content:center; text-align:center}
  .score-meta{min-width:0}
  .score-tags{justify-content:center}
  .profile-body{text-align:left}
  .podium li{flex-wrap:wrap; gap:10px 14px; padding:14px 16px}
  .podium .decl{flex-basis:100%; font-size:15px}
  .podium .who{min-width:0}
  .th-row{grid-template-columns:1fr auto; gap:6px 10px}
  .th-row > span:first-child{grid-column:1 / -1; color:var(--dim); font-size:11px}
  .train-banner{padding:18px 20px; gap:16px}
  .tb-num{text-align:left}
  .tb-bar{width:100%}
  .tb-over{text-align:left}
  .task-card{padding:18px}
  .task-theme{margin-left:0; text-align:left; max-width:100%; flex-basis:100%}
  .ti-min{margin-left:0}
  .task-actions{
    position:sticky; bottom:calc(6px + env(safe-area-inset-bottom)); z-index:5;
    margin:18px -8px 0; padding:12px; border-radius:16px;
    background:rgba(18,11,24,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border:1px solid var(--line-2);
  }
  .ta-btns{width:100%}
  .ta-btns .btn{flex:1}
  .celebrate{padding:12px}
  .celebrate-card{padding:24px 18px; max-height:88vh; max-height:88dvh}
  .celebrate-card h2{font-size:23px}
  .celebrate-card p{font-size:15px}
  .modal-card{padding:24px 20px; max-height:86vh; max-height:86dvh; overflow:auto}
  .hero-title{font-size:clamp(64px,20vw,110px)}
  .avatar-float{width:clamp(72px,11vw,96px); margin:0 0 10px 14px}
  .reader{padding:28px 0}
  .reader .body{font-size:15.5px}
}

@media(max-width:430px){
  .x-link .x-mark{display:none}
  .x-link{gap:0}
}

@media(max-width:360px){
  .avatar-float{width:64px; margin:0 0 8px 10px}
  .x-link{font-size:9.5px}
}

@media(max-width:420px){
  .nav a{padding:7px 7px; font-size:12px; letter-spacing:.02em}
  .brand b{font-size:20px}
  .who-chip .nm{max-width:70px}
  .tb-day b{font-size:34px}
  .btn{padding:12px 16px; font-size:13px}
  .celebrate-card h2{font-size:21px}
}

@media(hover:none){
  .nav a{ -webkit-tap-highlight-color:transparent; }
  .btn,.icon-btn,.decl,.novel-card,.nav a,.amount-chips button{ -webkit-tap-highlight-color:transparent; }
  .btn:active,.icon-btn:active{transform:scale(.985)}
}

/* 后台：报名 / 训练 */
.app-training{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 0 14px; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-size:12px; color:var(--muted); line-height:1.7;
}
.app-training .at-label{font-size:10px; letter-spacing:.18em; color:var(--rose-2); border:1px solid rgba(255,95,162,.35); padding:2px 8px; border-radius:99px}
.app-training .btn{margin-left:auto}

/* 小屏结算：玩具在上、卡片在下 */
@media(max-width:520px){
  .celebrate{place-items:end center; padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .celebrate-card{width:100%; max-height:62vh; max-height:62dvh}
  .celebrate-card h2{font-size:20px}
  .celebrate-card p{font-size:14px; line-height:1.9}
}