/* ===== 霍兰德职业测试 · 移动端适配 + 小湾校园主题色 ===== */
:root{
  --main:#00D6B9; --main-deep:#00A88E; --ink:#0F1B2D; --ink-soft:#5B6B82;
  --bg:#FFF0E2; --card:#FFFFFF; --pink:#FF4D8D;
  --shadow:0 12px 32px rgba(0,168,142,.18);
}

/* 容器移动端优化 */
body{
  background:#EAF1F8;
  font-family:-apple-system,'PingFang SC','Noto Sans SC',sans-serif;
}
.container{
  max-width:480px;
  margin:0 auto;
  padding:16px 16px 96px;
  background:linear-gradient(180deg,#EAF1F8 0%,#fff 60%);
  min-height:100vh;
}

/* 顶部标题区：改用 index 深色 hero 主题 */
.page-header{
  margin:0 -16px 18px;
  padding:26px 18px 22px;
  background:linear-gradient(160deg,#0F1B2D 0%,#13243B 60%,#0F2E33 100%);
  border-radius:0 0 30px 30px;
  box-shadow:0 10px 30px rgba(15,27,45,.22);
  position:relative;
  overflow:hidden;
}
.page-header:before{
  content:"";position:absolute;top:-46px;right:-46px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,214,185,.34),transparent 70%);pointer-events:none;
}
.page-header:after{
  content:"";position:absolute;bottom:-70px;left:-30px;width:180px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,140,255,.22),transparent 70%);pointer-events:none;
}
.page-header h1{
  position:relative;
  font-size:23px;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
  border-bottom:none;
  padding-bottom:0;
}

/* 题目卡片 */
.topic{
  background:var(--card);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}
.topic p{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  font-weight:600;
}

/* 选项改为流式可点击胶囊，移动端自适应换行 */
.radio-inline{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin:0 8px 10px 0 !important;
  padding:9px 14px !important;
  padding-left:14px !important;
  justify-content:flex-start;
  font-size:13px;
  color:var(--ink-soft);
  background:#F3F7F9;
  border:1px solid #E2ECF1;
  border-radius:18px;
  cursor:pointer;
  transition:.18s;
  user-select:none;
  white-space:nowrap;
  vertical-align:middle;
  position:static;
}
.radio-inline input[type=radio]{
  margin:0 !important;
  width:15px;height:15px;
  accent-color:var(--main);
  flex-shrink:0;
  position:static !important;
}
.radio-inline:active{transform:scale(.96)}
.radio-inline:has(input:checked){
  background:var(--main-soft,#D6F7F0);
  border-color:var(--main);
  color:var(--main-deep);
  font-weight:700;
}
/* JS 点击切换的选中高亮（兼容浏览器） */
.radio-inline.opt-on{
  background:var(--main-soft,#D6F7F0);
  border-color:var(--main);
  color:var(--main-deep);
  font-weight:700;
}

/* 总分输入区：不再固定悬浮，改为普通流式卡片 */
.inp{
  display:none; /* 调试隐藏域容器，页面不展示 */
}
.input-group{
  margin:10px 0;
  display:flex;
  align-items:stretch;
}
.input-group-addon{
  background:linear-gradient(160deg,#16263B,#13243B);
  color:var(--main);
  border:1px solid rgba(0,214,185,.38);
  border-right:none;
  border-radius:12px 0 0 12px;
  padding:8px 12px;
  font-size:13px;
  white-space:nowrap;
  display:flex;
  align-items:center;
}
.input-group .form-control{
  border-radius:0 12px 12px 0;
  border:1px solid #E2ECF1;
  font-size:14px;
  flex:1;
}
.input-group-btn .btn{
  border-radius:12px;
  margin-left:8px;
  white-space:nowrap;
}
/* 把“获取总分”按钮改为主题青绿色 */
.btn-info{
  background:var(--main);
  border-color:var(--main);
  color:#0F1B2D;
  font-weight:700;
}
.btn-info:hover,.btn-info:focus{
  background:var(--main-deep);
  border-color:var(--main-deep);
  color:#fff;
}

/* 结果展示区：初始隐藏，提交后由 JS 填充并显示 */
#result{
  margin:14px 0;
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:16px;
  display:none;
}
#result:not(:empty){
  display:block;
}

#myChart{
  display:none; /* 初始隐藏，提交后 JS 创建图表时显示 */
  max-width:100%;
  height:auto !important;
  margin:16px auto 0;
}

/* 提交按钮：改为底部固定条，主题色 */
.btnSubmit{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:calc(100% - 32px);
  max-width:448px;
  background:linear-gradient(135deg,var(--main),var(--main-deep));
  border:none;
  color:#0F1B2D;
  font-size:16px;
  font-weight:800;
  padding:14px 0;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,168,142,.4);
  z-index:120;
}
.btnSubmit:active{transform:translateX(-50%) scale(.97)}

/* 结果文案条：不再固定悬浮右侧，避免遮挡 */
.here{
  position:static;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.6;
  background:var(--main-soft,#D6F7F0);
  color:var(--main-deep);
  border:1px solid rgba(0,214,185,.4);
}

/* 返回按钮：沿用主题青绿 */
.app-back-btn{
  position:fixed;top:16px;right:16px;z-index:9999;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:20px;
  background:rgba(255,255,255,.92);
  color:var(--main-deep);
  border:1px solid rgba(0,214,185,.4);
  font:700 14px/1 'Microsoft YaHei',sans-serif;
  cursor:pointer;text-decoration:none;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(15,27,45,.18);
}
.app-back-btn:hover{background:#fff}

/* 小屏微调 */
@media (max-width:480px){
  .topic p{font-size:14px}
  .radio-inline{font-size:12.5px;padding:6px 11px}
  .page-header h1{font-size:21px}
}