/* 二十七测评 · 全站样式（阿里巴巴普惠体 · 靛蓝主色 · 移动优先） */
:root{
  --pri:#4f46e5; --pri-d:#4338ca; --bg:#f4f6fb; --card:#fff;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --ok:#10b981; --warn:#f59e0b;
  --hot:#f97316; --risk:#e11d48; --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box;
  font-family:"阿里巴巴普惠体 3.0 55 Regular","阿里巴巴普惠体 3","阿里巴巴普惠体 55 Regular","阿里巴巴普惠体","Alibaba PuHuiTi","Alibaba PuHuiTi 3.0","Alibaba PuHuiTi Regular","PingFang SC","Microsoft YaHei",sans-serif}
body{background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
b{font-weight:700}
/* 铁律：hidden 属性永远生效，任何作者样式不得覆盖（防止 loading 遮罩等层失控） */
[hidden]{display:none!important}

/* ---------- 报告保存引导条 ---------- */
.savebar{background:#eef2ff;border:1px solid #c7d2fe;border-radius:14px;padding:13px 15px;margin:14px 0 2px}
.sb-txt{font-size:12.5px;color:#3730a3;line-height:1.7}
.sb-txt b{display:block;font-size:13.5px;margin-bottom:2px;color:#312e81}
.sb-copy{flex-shrink:0;font-size:13px;padding:9px 14px}
/* ---------- 心理年龄对比卡 ---------- */
.cmp{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.cmp-box{flex:1;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.cmp-box.hi{background:#eef2ff;border-color:#c7d2fe}
.cmp-k{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.cmp-v{font-size:19px;font-weight:900;color:var(--ink)}
.cmp-box.hi .cmp-v{color:#4f46e5}
.cmp-arrow{color:var(--muted);font-size:18px;flex-shrink:0}

/* ---------- 首页 ---------- */
.hero{background:linear-gradient(135deg,#4f46e5,#6d28d9);color:#fff;padding:34px 20px 28px;text-align:center}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px}
.logo{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;letter-spacing:.5px;border:1px solid rgba(255,255,255,.35)}
.tag{margin-top:8px;opacity:.92;font-size:14px;letter-spacing:2px}
.hero-note{margin-top:14px;font-size:13.5px;opacity:.85;line-height:1.7}
.wrap{max-width:520px;margin:0 auto;padding:20px 16px 40px}
.sec{font-size:17px;margin:8px 2px 14px}
.tcard{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:var(--r);
  padding:18px 16px;margin-bottom:12px;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 3px rgba(15,23,42,.06);border:1px solid var(--line);transition:.15s}
.tcard:active{transform:scale(.985)}
.t-ico{font-size:30px;width:52px;height:52px;background:#eef2ff;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.t-info{flex:1;min-width:0}
.t-name{font-weight:700;font-size:15.5px}
.t-tag{display:inline-block;background:#eef2ff;color:var(--pri);font-size:11px;padding:2px 8px;border-radius:20px;margin-left:6px;font-weight:700}
.t-sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.t-meta{color:#94a3b8;font-size:12px;margin-top:5px}
.t-go{color:var(--pri);font-weight:700;font-size:14px;flex:none}
.help{background:var(--card);border-radius:var(--r);padding:20px 18px;border:1px solid var(--line);margin-top:22px}
.help h3{font-size:15px;margin-bottom:10px}
.help ol{padding-left:20px;font-size:13.5px;line-height:2;color:#334155}
.fine{font-size:11.5px;color:#94a3b8;line-height:1.8;margin-top:10px}
.center{text-align:center}
.foot{text-align:center;color:#94a3b8;font-size:12px;padding:26px 16px 40px}

/* ---------- 答题页 ---------- */
.ttop{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;background:var(--card);position:sticky;top:0;z-index:5;max-width:560px;margin:0 auto}
.back{color:var(--muted);text-decoration:none;font-size:15px;flex:1}
.ttop-name{font-weight:700;font-size:15px;text-align:center;flex:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttop-prog{flex:1;text-align:right;color:var(--pri);font-weight:700;font-size:13.5px}
.pbar{max-width:560px;margin:0 auto;background:#e2e8f0;height:4px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#7c3aed);transition:.3s}
#app{max-width:560px;margin:0 auto;padding:0 14px 50px}
.gate{padding-top:22px}
.card{background:var(--card);border-radius:var(--r);padding:22px 20px;border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(15,23,42,.05);margin-bottom:14px}
.card h2{font-size:19px;margin-bottom:6px}
.card h3{font-size:16px;margin-bottom:10px}
.muted{color:var(--muted);font-size:13.5px;line-height:1.8}
.small{font-size:12.5px}
.instruct{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13.5px;line-height:1.9;color:#334155;margin:14px 0}
.optdemo{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.optdemo-item{background:#eef2ff;color:var(--pri);font-size:12px;padding:4px 10px;border-radius:16px;font-weight:600}
.redeem{display:flex;gap:10px;margin-top:6px}
.redeem input{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font-size:16px;letter-spacing:2px;text-transform:uppercase;outline:none}
.redeem input:focus{border-color:var(--pri)}
.btn{border:none;border-radius:12px;padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;transition:.15s}
.btn.primary{background:var(--pri);color:#fff}
.btn.primary:active{transform:scale(.97)}
.btn.primary:disabled{background:#a5b4fc}
.btn.ghost{background:#fff;color:var(--pri);border:1.5px solid var(--pri)}
.btnrow{display:flex;gap:10px;margin-top:14px}
.err{color:var(--risk);font-size:13px;margin-top:10px}
.pagehint{color:#94a3b8;font-size:12.5px;margin:14px 4px 8px}

/* 题目行（矩阵） */
.qrow{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 14px 13px;margin-bottom:10px}
.qrow.un{border-color:#fecaca;background:#fffafa}
.qno{display:inline-block;background:#eef2ff;color:var(--pri);font-weight:800;font-size:12px;padding:2px 9px;border-radius:8px;margin-bottom:7px}
.qtext{font-size:14.5px;line-height:1.75;margin-bottom:10px}
.qopts{display:flex;justify-content:space-between}
.scalebtns{display:flex;gap:6px;width:100%}
.optbtn{border:1.5px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;transition:.12s}
.optbtn.round{flex:1;padding:9px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px}
.optbtn.round span{font-size:16px;font-weight:800;color:#475569}
.optbtn.round i{font-style:normal;font-size:10.5px;color:#94a3b8}
.optbtn.round.sel{background:var(--pri);border-color:var(--pri)}
.optbtn.round.sel span,.optbtn.round.sel i{color:#fff}
.optbtn.wide{display:block;width:100%;text-align:left;padding:12px 14px;font-size:14px;margin-bottom:8px}
.optbtn.wide.sel{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.optbtn.wide:last-child{margin-bottom:0}

/* card 模式 */
#quizBody .qrow{padding:26px 20px}
#quizBody .qtext{font-size:17px;font-weight:600;margin-bottom:18px}
.navrow{display:flex;gap:10px;margin-top:16px}
.navrow .btn{flex:1}
#saveHint{margin-top:12px}

/* ---------- 报告页 ---------- */
.rhead{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:0 auto;padding:18px 18px 8px}
.rhead .brand{justify-content:flex-start;font-size:16px}
.rhead-r{font-size:11px;color:#94a3b8;text-align:right;line-height:1.7}
.rpt .wrap{max-width:560px}
.hlabel{color:var(--muted);font-size:12.5px;letter-spacing:1px;margin-bottom:6px}
.bignum{font-size:56px;font-weight:900;color:var(--pri);line-height:1.1;margin-bottom:10px}
.bignum small{font-size:18px;color:#94a3b8;font-weight:600}
.badge{display:inline-block;color:#fff;font-weight:700;font-size:13.5px;padding:5px 14px;border-radius:20px;margin-bottom:12px}
.body{font-size:14px;line-height:2;color:#1e293b}
.hero-card.center{text-align:center}
.emoji{font-size:46px;margin-bottom:6px}
.typecode{font-size:52px;font-weight:900;letter-spacing:6px;color:var(--pri);line-height:1.2}
.typename{font-size:19px;font-weight:800;margin-top:4px}
.keywords{color:var(--muted);font-size:13.5px;margin-top:8px}
.tipbox{background:#eef2ff;border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.9;color:var(--pri-d);margin-top:14px;text-align:left}
.chart{width:100%;height:auto;margin-top:8px}
.c-label{font-size:15px;fill:#334155}
.c-val{font-size:15px;fill:#64748b;font-weight:700}
.c-ref{font-size:12px;fill:#94a3b8}
.frow{border-top:1px dashed var(--line);padding:15px 0 13px}
.frow:first-of-type{border-top:none}
.frow-hot{background:#fffbeb;margin:0 -12px;padding:15px 12px 13px;border-radius:10px}
.fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pill{color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:14px}
.fdetail{background:#f8fafc;border-radius:10px;padding:12px 14px;margin-top:8px}
.tips{list-style:none}
.tips li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.9;color:#334155;margin-bottom:6px}
.tips li:before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--pri)}
.tips.warn li:before{background:var(--warn)}
.tips.big li{font-size:14px}
.disc{font-size:12px;color:#94a3b8;line-height:1.9;margin-top:6px}
.dimrow{margin-bottom:16px}
.dimhead{display:flex;justify-content:space-between;align-items:baseline}
.dimbar{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.dimtag{width:20px;font-weight:800;color:var(--pri)}
.dimtrack{flex:1;height:14px;background:#eef2f7;border-radius:7px;position:relative}
.dimtrack i{display:block;height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:7px}
.dimnote{margin-top:2px}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50}
.spinner{width:42px;height:42px;border:4px solid #e2e8f0;border-top-color:var(--pri);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 管理后台 ---------- */
.adm{max-width:860px;margin:0 auto;padding:24px 16px 60px}
.adm h1{font-size:20px;margin-bottom:18px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:13px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
th{background:#f8fafc;color:var(--muted);font-weight:600}
.tag-used{color:var(--risk)}.tag-active{color:var(--warn)}.tag-unused{color:var(--ok)}
.formrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.formrow select,.formrow input{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
.statgrid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;min-width:120px}
.stat b{font-size:26px;color:var(--pri);display:block}
.stat span{font-size:12.5px;color:var(--muted)}
.codes{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}

/* ---------- 保存PDF按钮组 ---------- */
.sb-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (min-width:560px){.savebar{display:flex;align-items:center;gap:16px}.sb-txt{flex:1;min-width:0}.sb-btns{margin-top:0;flex-shrink:0}}
.upgrade-card{background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid #c7d2fe}

/* ---------- 打印/PDF导出排版（A4分页友好） ---------- */
@media print{
  body{background:#fff!important;font-size:12.5px}
  .rhead{-webkit-print-color-adjust:exact;print-color-adjust:exact;border-bottom:2px solid #4f46e5}
  .rhead-r{color:#64748b}
  .savebar,.btnrow{display:none!important}
  .wrap,.wrap.main{max-width:100%;padding:0;margin:0}
  .card{box-shadow:none!important;border:1px solid #e2e8f0!important;break-inside:avoid;page-break-inside:avoid;margin-bottom:14px!important}
  .hero-card,.upgrade-card{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .chart{max-width:100%;height:auto}
  h3{break-after:avoid;page-break-after:avoid}
  .frow{break-inside:avoid;page-break-inside:avoid}
  a[href]:after{content:""}
}

/* 页脚 ICP 备案链接 */
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--pri, #4f46e5); }