/* 奥德赛三路径生成器:问卷 + 结果 */
:root {
  --bg: #04060d;
  --wrap-w: 820px;
  --glass-pad: 22px;
  --glass-bg: rgba(10,22,44,.42);
  --glass-border: rgba(150,200,255,.20);
  --glass-blur: 26px;
  --glass-sat: 150%;
  --glass-shadow: 0 18px 50px rgba(0,0,0,.42);
  --glass-inset: rgba(190,220,255,.24);
  --ink-on-light: #10131b;
  --ov-bg: #14161d;
  --h1-size: 26px;
  --h1-mt: 8px;
  --btn-size: 14px;
  --btn-pad: 12px 22px;
}

button.ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.btnrow { margin-top: 18px; }
.foot { color: rgba(255,255,255,.45); margin-top: 20px; }

.steps { display: flex; gap: 6px; margin: 20px 0 14px; }
.steps i { height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,.16); }
.steps i.on { background: rgba(255,255,255,.85); }

.q { margin-bottom: 20px; }
.q label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.q .help { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 10px; }
input[type=text], textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 12px 14px; line-height: 1.6;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.34); }
input:focus, textarea:focus { outline: none; border-color: rgba(255,255,255,.45); }
textarea { resize: vertical; min-height: 84px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
input.other { margin-top: 10px; }
.chip {
  font-family: inherit; font-size: 13.5px; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85);
}
.chip[aria-pressed="true"] { background: rgba(255,255,255,.92); color: #10131b; border-color: transparent; font-weight: 600; }
/* 和其他项互斥的那一个:虚线边先提示"这个不一样" */
.chip.solo { border-style: dashed; }
.chip.solo[aria-pressed="true"] { border-style: solid; }

/* ---- 结果 ---- */
#result { display: none; }
.path { margin-bottom: 16px; }
/* 流式:还没轮到的那条压暗并轻微呼吸,刚写好的那条闪一下 */
.path.waiting { opacity: .42; animation: breathe 2.4s ease-in-out infinite; }
.path.fresh { animation: freshin .9s ease-out; }
@keyframes breathe { 0%,100% { opacity:.34 } 50% { opacity:.55 } }
@keyframes freshin {
  0%   { transform: translateY(6px); box-shadow: 0 0 0 0 rgba(140,200,255,.42); }
  35%  { box-shadow: 0 0 0 3px rgba(140,200,255,.22); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(140,200,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .path.waiting, .path.fresh { animation: none; }
}
.path .top { display: flex; align-items: flex-start; gap: 12px; }
.path .dot { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; margin-top: 3px;
             border: 1px solid rgba(255,255,255,.4); }
.path .tag { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.5); font-weight: 600; }
.path h3 { font-size: 19px; font-weight: 650; margin-top: 2px; }
.path h3 input {
  font-size: 19px; font-weight: 650; background: transparent; border: none;
  border-bottom: 1px dashed rgba(255,255,255,.22); border-radius: 0; padding: 2px 0; color: #fff;
}
.path .pos { font-size: 13.5px; color: rgba(255,255,255,.74); line-height: 1.7; margin-top: 8px; }
.path .five { font-size: 13.5px; color: rgba(255,255,255,.9); line-height: 1.85; margin-top: 12px;
              border-left: 2px solid rgba(255,255,255,.22); padding-left: 14px; }
.path .protos { margin-top: 14px; }
.path .protos b { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.5); font-weight: 600; }
.path .protos ul { list-style: none; margin-top: 8px; }
.path .protos li { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.7; padding: 5px 0 5px 18px; position: relative; }
.path .protos li::before { content: "→"; position: absolute; left: 0; color: rgba(255,255,255,.45); }

.gauges { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.gauges .gl { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.5); font-weight: 600; margin-bottom: 10px; }
.g { display: grid; grid-template-columns: 82px 1fr 30px; gap: 10px; align-items: center; padding: 5px 0; }
.g span { font-size: 12.5px; color: rgba(255,255,255,.72); }
.g b { font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.g input[type=range] { width: 100%; accent-color: #fff; height: 24px; }

#chart { width: 100%; height: auto; margin-top: 6px; }
.verdict { font-size: 13.5px; line-height: 1.85; color: rgba(255,255,255,.88); }
.verdict b { color: #fff; }

@media (max-width: 700px) {
  :root { --h1-size: 22px; --glass-pad: 18px; --body-pad: 22px 12px 50px; }
}