/* ============================================================ 主题变量：默认「纯白」，切深色只需给 加 data-quiz-theme="dark" 画布配色也走 --cv-* 变量（引擎用 getComputedStyle 读取）， 这样一套代码同时支持两种主题，不用在 JS 里写死两套颜色。 ============================================================ */ :root{ --bg:#ffffff; --panel:#ffffff; --panel2:#f7f8fb; --line:#e6e9f0; --txt:#1b1f2a; --sub:#5d6577; --dim:#8b93a5; --brand:#6c5ce7; --brand2:#0e9db5; --warn:#c07a12; --ok:#1a9d63; --err:#d64545; --cv-bg:#ffffff; --cv-grid:#e6e9f0; --cv-mid:#b9c0d0; --cv-quad:#98a0b3; --cv-axis:#5d6577; --cv-tick:#9aa1b2; --cv-ring:#ffffff; --cv-bubble:rgba(255,255,255,.94); --cv-track:#eceff5; --cv-facet:#3d4457; --cv-q1:rgba(214,69,69,.10); --cv-q2:rgba(192,122,18,.12); --cv-q3:rgba(26,157,99,.13); --cv-q4:rgba(14,157,181,.10); --cv-n:#d64545; --cv-e:#c07a12; --cv-o:#0e9db5; --cv-a:#1a9d63; --cv-c:#6c5ce7; } html[data-quiz-theme="dark"]{ --bg:#0f1117; --panel:#171a23; --panel2:#1e222e; --line:#2a2f3d; --txt:#e8eaf0; --sub:#9aa3b8; --dim:#6b7387; --brand:#7c6cf0; --brand2:#4dd0e1; --warn:#ffb74d; --ok:#66bb6a; --err:#ef5350; --cv-bg:#12151d; --cv-grid:#252a38; --cv-mid:#5b6480; --cv-quad:#7b849c; --cv-axis:#9aa3b8; --cv-tick:#6b7387; --cv-ring:#0f1117; --cv-bubble:rgba(18,21,29,.92); --cv-track:#252a38; --cv-facet:#c3c9db; --cv-q1:rgba(239,83,80,.08); --cv-q2:rgba(255,183,77,.09); --cv-q3:rgba(102,187,106,.11); --cv-q4:rgba(77,208,225,.08); --cv-n:#ef5350; --cv-e:#ffb74d; --cv-o:#4dd0e1; --cv-a:#66bb6a; --cv-c:#7c6cf0; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--txt); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",Roboto,sans-serif; line-height:1.75;font-size:16px; background-image:radial-gradient(900px 500px at 12% -10%,rgba(108,92,231,.07),transparent 60%), radial-gradient(800px 500px at 92% 0%,rgba(14,157,181,.05),transparent 60%); background-attachment:fixed; } html[data-quiz-theme="dark"] body{ background-image:radial-gradient(900px 500px at 12% -10%,rgba(124,108,240,.16),transparent 60%), radial-gradient(800px 500px at 92% 0%,rgba(77,208,225,.10),transparent 60%); } .wrap{max-width:880px;margin:0 auto;padding:0 16px 80px} .hidden{display:none !important} .center{text-align:center} /* ---------- 头部 ---------- */ .hd{padding:40px 0 24px;text-align:center} .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(108,92,231,.10); border:1px solid rgba(108,92,231,.28);color:#5a4fd0;padding:5px 14px; border-radius:999px;font-size:12.5px;margin-bottom:16px} h1{font-size:29px;margin:0 0 10px;font-weight:800;letter-spacing:-.4px} h1 span{background:linear-gradient(92deg,#6c5ce7,#0e9db5);-webkit-background-clip:text; background-clip:text;color:transparent} html[data-quiz-theme="dark"] .badge{background:rgba(124,108,240,.14); border-color:rgba(124,108,240,.35);color:#b9aeff} html[data-quiz-theme="dark"] h1 span{background:linear-gradient(92deg,#a99bff,#4dd0e1); -webkit-background-clip:text;background-clip:text} .sub{color:var(--sub);font-size:14.5px;margin:0} /* ---------- 卡片 ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:22px;margin-bottom:16px} .card.tight{padding:18px} .note-card{background:transparent;border:none;padding:0} .sect{margin:0 0 14px;font-size:16px} /* ---------- 首页题库列表 ---------- */ .qlist{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px} .qcard{display:block;background:var(--panel);border:1px solid var(--line); border-radius:14px;padding:18px;text-decoration:none;color:inherit;transition:.18s} .qcard:hover{transform:translateY(-3px);border-color:var(--brand); box-shadow:0 12px 30px rgba(124,108,240,.22)} .qcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .qtag{font-size:12px;color:#5a4fd0;background:rgba(108,92,231,.10); border:1px solid rgba(108,92,231,.28);padding:3px 10px;border-radius:999px} html[data-quiz-theme="dark"] .qtag{color:#b9aeff;background:rgba(124,108,240,.14); border-color:rgba(124,108,240,.35)} .qcnt{font-size:12px;color:var(--dim)} .qtitle{margin:0 0 4px;font-size:18px} .qen{font-size:12px;color:var(--dim);margin-bottom:10px;letter-spacing:.3px} .qdesc{margin:0 0 14px;font-size:13.8px;color:var(--sub);line-height:1.7} .qfoot{display:flex;justify-content:space-between;align-items:center; border-top:1px solid var(--line);padding-top:12px} .qtime{font-size:12.5px;color:var(--dim)} .qgo{font-size:13.5px;color:#5a4fd0;font-weight:600} html[data-quiz-theme="dark"] .qgo{color:#b9aeff} /* ---------- 介绍页 ---------- */ .back{font-size:13px;color:var(--sub);cursor:pointer;display:inline-block;margin-bottom:12px} .back:hover{color:var(--brand2)} .ptitle{margin:0 0 4px;font-size:25px} .pen{color:var(--dim);font-size:13px;margin-bottom:14px} .pdesc{color:var(--sub);font-size:14.8px;margin:0 0 16px} .meta{display:flex;flex-wrap:wrap;gap:8px} .tag{font-size:12.5px;color:var(--sub);background:var(--panel2); border:1px solid var(--line);padding:4px 10px;border-radius:8px} .instr{background:linear-gradient(160deg,rgba(108,92,231,.07),rgba(14,157,181,.04)); border:1px solid rgba(108,92,231,.20)} .instr h3{margin:0 0 10px;font-size:15.5px;color:#4a3fd0} .instr p{margin:0 0 9px;font-size:14.5px;color:#4d5566} .instr p:last-child{margin-bottom:0} .note{font-size:13px;color:var(--dim);line-height:1.7;margin:0} .warnbox{background:#fdf7ec;border:1px solid #f0dcb4; border-radius:11px;padding:13px 15px;color:#8a5a0a;font-size:13.5px;line-height:1.7} html[data-quiz-theme="dark"] .instr{background:linear-gradient(160deg,rgba(124,108,240,.10),rgba(77,208,225,.05)); border-color:rgba(124,108,240,.26)} html[data-quiz-theme="dark"] .instr h3{color:#cfc4ff} html[data-quiz-theme="dark"] .instr p{color:#c3c9db} html[data-quiz-theme="dark"] .warnbox{background:rgba(255,183,77,.09); border-color:rgba(255,183,77,.3);color:#ffd08a} /* ---------- 测试码：入站界面（首页唯一的卡片） ---------- */ .gate{border-color:rgba(108,92,231,.24)} .gate .sect{margin-bottom:8px} .gate.done{border-color:rgba(26,157,99,.42); background:linear-gradient(160deg,rgba(26,157,99,.09),transparent 62%),var(--panel)} /* 注意：这里不再有「整卡隐藏」的测试码卡规则 —— 门禁关闭时首页也要靠这张卡 （换成量表直达列表），藏掉它首页就空了。 */ /* 门禁关闭（ACCESS_MODE=open）时才出现的量表直达列表 */ .gate.nogate .gaterow{display:none} .openlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .openlist .obtn{font:inherit;font-size:13px;cursor:pointer;padding:8px 13px;border-radius:9px; border:1px solid var(--line);background:var(--panel2);color:var(--txt);transition:.16s} .openlist .obtn:hover{border-color:var(--brand);background:var(--panel)} .gaterow{display:flex;gap:9px;align-items:stretch;margin-top:12px} .gatein{flex:1;min-width:0;font-family:inherit;font-size:16px;font-weight:700; letter-spacing:2.4px;font-variant-numeric:tabular-nums;color:var(--txt); background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:12px 13px;text-transform:uppercase} .gatein::placeholder{font-weight:500;letter-spacing:0;font-size:13px;text-transform:none} .gatein:focus{outline:none;border-color:var(--brand);background:var(--panel)} .gatein:disabled{opacity:.75} .gaterow .btn{flex:none;padding:0 20px} .gatemsg{margin:9px 0 0;font-size:13px;line-height:1.65;color:var(--dim);min-height:0} .gatemsg.err{color:var(--err)} .gatemsg.ok{color:var(--ok)} .gateokline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center; margin-top:11px;padding:10px 13px;border-radius:10px;font-size:13.2px; background:rgba(26,157,99,.09);border:1px solid rgba(26,157,99,.3);color:var(--ok)} .gateokline b{color:var(--txt);letter-spacing:.6px;font-variant-numeric:tabular-nums} .gateokline span{color:var(--sub);font-size:12.5px} /* 验证通过后露出来的两个动作按钮 */ .gateacts{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:12px} .gateacts .btn{flex:1 1 auto} .gateacts .btn.small{flex:none} /* 已验证后露出来的「分享链接」小条（link 模式：码 = 可以直接发出去的链接） */ .sharebox{display:flex;align-items:center;gap:9px;margin-top:11px;padding:9px 12px; border-radius:10px;background:var(--panel2);border:1px solid var(--line)} .sharebox .sharelbl{flex:none;font-size:12px;color:var(--sub);letter-spacing:.4px} .sharebox .sharein{flex:1;min-width:0;font-family:inherit;font-size:12.5px;color:var(--txt); background:transparent;border:none;padding:2px 0;letter-spacing:.3px;text-overflow:ellipsis} .sharebox .sharein:focus{outline:none} .sharebox .btn.small{flex:none} html[data-quiz-theme="dark"] .gate.done{border-color:rgba(102,187,106,.4); background:linear-gradient(160deg,rgba(102,187,106,.12),transparent 62%),var(--panel)} html[data-quiz-theme="dark"] .gateokline{background:rgba(102,187,106,.12); border-color:rgba(102,187,106,.32);color:#9ddcae} /* ---------- 入站界面：只有一个输码框，页面上没有别的内容 ---------- */ .gate.inbound{margin:6vh auto 0;max-width:440px;padding:34px 26px 28px;text-align:center; border-radius:18px;box-shadow:0 14px 44px rgba(24,28,45,.08)} .gate.inbound .inico{font-size:38px;line-height:1;margin-bottom:12px} .gate.inbound .inh{margin:0 0 8px;font-size:21px;letter-spacing:.4px} .gate.inbound .inp{margin:0 0 22px;font-size:13.5px;color:var(--sub)} .gate.inbound .gatein{text-align:center;font-size:18px;letter-spacing:3.2px;padding:14px 13px} /* ⚠️ 这里不要再给 .gaterow .btn 写 padding —— 窄屏断点会把 .gaterow 改成竖排、 按钮靠 padding:12px 20px 撑高度；用更高特异性的选择器覆盖 padding 会把按钮压成一条线。 */ .gate.inbound .gatemsg{text-align:left} .gate.inbound .note{margin-top:16px;text-align:center} html[data-quiz-theme="dark"] .gate.inbound{box-shadow:0 14px 44px rgba(0,0,0,.4)} /* ---------- 按钮 ---------- */ .btn{display:inline-block;border:none;cursor:pointer;font-family:inherit; background:linear-gradient(92deg,var(--brand),#5a86f5);color:#fff;font-weight:600; padding:13px 30px;border-radius:11px;font-size:15.5px;transition:.18s; box-shadow:0 6px 20px rgba(124,108,240,.28)} .btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(124,108,240,.38)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--sub);box-shadow:none} .btn.ghost:hover{border-color:var(--brand);color:var(--txt)} .btn.full{width:100%} /* ---------- 进度条 ---------- */ .pbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94); backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:11px 0;margin-bottom:16px} html[data-quiz-theme="dark"] .pbar{background:rgba(15,17,23,.93)} .pbar-in{max-width:880px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:12px} .pnum{font-size:13px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums} .pnum b{color:var(--brand2);font-size:15px} .track{flex:1;height:7px;background:var(--panel2);border-radius:99px;overflow:hidden} .fill{height:100%;width:0;border-radius:99px;transition:width .3s ease; background:linear-gradient(90deg,var(--brand),var(--brand2))} .scalehint{background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:10px 13px;font-size:13.5px;color:var(--sub);margin-bottom:6px} /* ---------- 题目 ---------- */ .qhead{display:flex;align-items:center;justify-content:space-between;gap:12px; border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px} .qtitle2{margin:0;font-size:17.5px;font-weight:700} .qhead .back{margin:0;white-space:nowrap} .q{padding:18px 0;border-bottom:1px solid var(--line)} .q:last-child{border-bottom:none} .qtop{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px} .qn{flex:none;width:30px;height:30px;border-radius:9px;background:var(--panel2); border:1px solid var(--line);color:var(--sub);font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .q.answered .qn{background:rgba(77,208,225,.16);border-color:rgba(77,208,225,.5);color:var(--brand2)} .qtext{font-size:16.2px;line-height:1.7;flex:1} .en{display:block;font-size:12.5px;color:var(--dim);margin-top:5px;line-height:1.55;font-style:italic} .q.miss .qtext{color:var(--warn)} .scale{display:flex;gap:5px} .scale label{flex:1;text-align:center;cursor:pointer} .scale input{position:absolute;opacity:0;width:0;height:0} .scale .cell{display:block;background:var(--panel2);border:1px solid var(--line); border-radius:9px;padding:9px 0;font-size:14.5px;font-weight:600;color:var(--sub);transition:.15s} .scale label:hover .cell{border-color:var(--brand);color:var(--txt)} .scale input:checked + .cell{background:linear-gradient(150deg,var(--brand),#5a86f5); border-color:var(--brand);color:#fff;transform:translateY(-2px); box-shadow:0 6px 16px rgba(124,108,240,.32)} .legend{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim); margin-top:7px;padding:0 2px} /* ---------- 结果 ---------- */ .res-head{text-align:center;padding:8px 0 4px} .rtype{font-size:30px;font-weight:800;margin:6px 0 4px;letter-spacing:-.5px} .rdesc{color:var(--sub);font-size:14.5px;max-width:620px;margin:0 auto} .scores{display:grid;grid-template-columns:1fr 1fr;gap:14px} .sc{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center} .sc .lab{font-size:13px;color:var(--sub);margin-bottom:6px} .sc .val{font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .sc .raw{font-size:11.5px;color:var(--dim);margin-top:7px} .bar{height:6px;background:#eceff5;border-radius:99px;margin-top:10px;overflow:hidden} html[data-quiz-theme="dark"] .bar{background:#252a38} .bar i{display:block;height:100%;border-radius:99px;transition:width .8s cubic-bezier(.2,.8,.2,1)} .dimlist{display:flex;flex-direction:column;gap:18px} .dimrow{} .dimhead{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .dimname{font-size:15.5px;font-weight:600;flex:1} .dimname em{font-style:normal;font-size:11.5px;color:var(--dim);margin-left:7px} .dimval{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums} .dimlevel{font-size:12.5px;font-weight:600;min-width:34px;text-align:right} .dimdesc{margin:6px 0 0;font-size:13.5px;color:var(--sub);line-height:1.7} #chartBox,#facetBox{text-align:center} canvas{max-width:100%;height:auto} .tblwrap{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:11px} table{width:100%;border-collapse:collapse;font-size:13.5px} thead th{position:sticky;top:0;background:var(--panel2);padding:9px 10px; text-align:left;color:var(--sub);border-bottom:1px solid var(--line);font-weight:600} tbody td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--sub)} tbody td.cen{text-align:center} tbody td.small{font-size:12px} tbody td b{font-variant-numeric:tabular-nums} footer{text-align:center;color:var(--dim);font-size:12.5px;padding:26px 0 0;line-height:1.8} /* ---------- 首页分组标题 ---------- */ .grouph{font-size:14px;font-weight:700;color:var(--sub);margin:22px 0 10px; padding-left:11px;border-left:3px solid var(--brand);line-height:1.2} .grouph:first-child{margin-top:0} /* ---------- 单维结果：大分数 ---------- */ .rtype2{font-size:22px;font-weight:800;margin:6px 0 8px;letter-spacing:-.3px} .single{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:4px 0 2px} .single .val{font-size:56px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1.5px} .single .unit{font-size:16px;color:var(--dim);font-weight:600} .bandname{font-size:19px;font-weight:800;margin:6px 0 0} .bigbar{max-width:420px;margin:14px auto 16px;height:9px} /* ---------- 小字体选项格（选项文字较长时用） ---------- */ .scale.mini .cell{font-size:10.5px;line-height:1.25;padding:9px 1px;white-space:normal;word-break:break-all} .scale .cell{white-space:nowrap;overflow:hidden} /* ---------- 下拉选择（选项文字很长的量表用） ---------- */ .picksel{width:100%;font-family:inherit;font-size:15px;color:var(--txt); background:var(--panel2);border:1px solid var(--line);border-radius:10px; padding:12px 13px;appearance:none;-webkit-appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%; background-size:6px 6px,6px 6px;background-repeat:no-repeat} .picksel:focus{outline:none;border-color:var(--brand)} .q.answered .picksel{border-color:rgba(77,208,225,.5);background-color:rgba(77,208,225,.07)} /* ---------- 强制选择（A / B 二选一） ---------- */ .fc{display:flex;flex-direction:column;gap:8px} .fc label{cursor:pointer;display:block} .fc input{position:absolute;opacity:0;width:0;height:0} .fc .fcbox{display:flex;align-items:flex-start;gap:10px;background:var(--panel2); border:1px solid var(--line);border-radius:10px;padding:11px 13px; font-size:14.8px;color:var(--sub);line-height:1.6;transition:.15s} .fc .fcbox i{flex:none;font-style:normal;width:22px;height:22px;border-radius:7px; background:var(--panel);border:1px solid var(--line);color:var(--dim); font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px} .fc .fcbox .fct{flex:1} .fc .fcbox .fct em{display:block;font-style:italic;font-size:12px;color:var(--dim); margin-top:3px;line-height:1.5} .fc label:hover .fcbox{border-color:var(--brand);color:var(--txt)} .fc input:checked + .fcbox{background:linear-gradient(150deg,rgba(124,108,240,.20),rgba(90,134,245,.14)); border-color:var(--brand);color:var(--txt);box-shadow:0 5px 14px rgba(124,108,240,.20)} .fc input:checked + .fcbox i{background:var(--brand);border-color:var(--brand);color:#fff} /* ---------- 结果人格卡（persona） ---------- */ .pcard{position:relative;overflow:hidden;border-color:var(--pcb); background:linear-gradient(158deg,var(--pca),transparent 58%),var(--panel)} .pcard::before{content:"";position:absolute;top:-78px;right:-64px;width:230px;height:230px; border-radius:50%;background:var(--pca);pointer-events:none} .phead{display:flex;align-items:center;gap:16px;position:relative} .pemoji{flex:none;font-size:54px;line-height:1} .pmeta{flex:1;min-width:0} .prare{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px; padding:3px 10px;border-radius:999px;border:1px solid;margin-bottom:7px} .ptitle{margin:0;font-size:28px;font-weight:800;letter-spacing:-.6px; color:var(--pc);line-height:1.25} .psub{font-size:12.5px;color:var(--dim);margin-top:4px} .pquote{margin:16px 0 0;padding:13px 16px;border-left:3px solid var(--pc); background:var(--pca);border-radius:0 10px 10px 0;font-size:14.5px; color:var(--txt);position:relative} .ptraits{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;position:relative} .ptag{font-size:12px;color:var(--sub);background:var(--panel2); border:1px solid var(--line);padding:4px 11px;border-radius:999px} .pmain{margin-top:16px;position:relative} .pmain-h{display:flex;justify-content:space-between;align-items:baseline; font-size:13px;color:var(--sub);margin-bottom:7px} .pmain-h b{color:var(--pc);font-size:15px} .psocial{margin-top:14px;font-size:13.5px;color:var(--sub);line-height:1.95; background:var(--panel2);border:1px dashed var(--line);border-radius:10px; padding:11px 13px;position:relative} .pfoot{display:flex;align-items:center;gap:12px;margin-top:16px; flex-wrap:wrap;position:relative} .btn.small{padding:9px 18px;font-size:13.5px;border-radius:9px} .pfoot-tip{font-size:12px;color:var(--dim)} .pcard-note{font-size:11.5px;color:var(--dim);margin:13px 0 0;position:relative} /* ---------- 结果图片：弹出预览层 ---------- 为什么要有这层：在内置浏览器 / webview 里， 常被静默丢掉， 用户点了「下载」却哪儿都找不到文件。所以生成后直接把图摆出来， 右键 / 长按就能保存，不依赖浏览器的下载通道。 z-index 刻意低于 .toast(99)，让提示能盖在弹层上面。 */ .imgmask{position:fixed;inset:0;z-index:90;background:rgba(16,18,26,.72); display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto} .imgbox{background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:14px;max-width:100%;max-height:100%;overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.4)} .imghead{display:flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline;margin-bottom:10px} .imghead b{font-size:14px;color:var(--txt)} .imghead span{font-size:12px;color:var(--dim)} .imgbox img{display:block;max-width:100%;height:auto;border-radius:10px; border:1px solid var(--line);background:#fff} .imgacts{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .pspectrum{margin-top:16px;position:relative} .pspec-h{display:flex;justify-content:space-between;font-size:12.5px; color:var(--sub);margin-bottom:7px} .pspec-bar{height:10px;border-radius:99px;overflow:hidden;display:flex;background:var(--panel2)} .pspec-bar i{display:block;height:100%;transition:width .8s cubic-bezier(.2,.8,.2,1)} /* ---------- 轻提示 ---------- */ .toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,18px);opacity:0; background:var(--panel2);border:1px solid var(--brand);color:var(--txt); padding:12px 24px;border-radius:11px;font-size:14px;z-index:99;pointer-events:none; transition:.28s;box-shadow:0 14px 40px rgba(0,0,0,.45);white-space:nowrap} .toast.on{opacity:1;transform:translate(-50%,0)} .toast.bad{border-color:var(--err);box-shadow:0 14px 40px rgba(214,69,69,.22)} @media(max-width:720px){ .pemoji{font-size:44px} .ptitle{font-size:23px} .prare{font-size:10.5px} .toast{white-space:normal;max-width:88vw} .gaterow{flex-direction:column} .gaterow .btn{padding:12px 20px} .gatein{letter-spacing:2px;font-size:15px} .gate.inbound{margin-top:4vh;padding:28px 20px 24px} .gate.inbound .gatein{font-size:17px;letter-spacing:2.6px} .gateacts{flex-direction:column} .gateacts .btn{width:100%} /* 分享链接条在窄屏折成两行：上面「分享链接 + 复制」，下面整行放链接 */ .sharebox{flex-wrap:wrap} .sharebox .sharein{order:3;flex:1 1 100%;padding:7px 0 0;font-size:11.5px; text-align:center;letter-spacing:.2px} .single .val{font-size:46px} .fc .fcbox{font-size:14.2px;padding:10px 11px} .scale.mini .cell{font-size:9.5px} .grouph{font-size:13px;margin:18px 0 9px} body{font-size:15.5px} .wrap{padding:0 12px 60px} .card{padding:17px} .qlist{grid-template-columns:1fr} .scores{grid-template-columns:1fr} h1{font-size:24px} .rtype{font-size:25px} .scale .cell{padding:10px 0;font-size:13.5px} .legend{font-size:10.5px} .pbar-in{gap:8px} .back{margin-bottom:0} }