/* ============================================================
 * ideology-atlas / style.css
 * 现代深色玻璃拟态 UI
 * ============================================================ */
:root {
  --bg: #0a0e1a;
  --bg2: #0f1526;
  --panel: rgba(255,255,255,0.05);
  --panel2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.10);
  --text: #e8ecf4;
  --muted: #94a0b8;
  --accent: #6c8bff;
  --accent2: #a06cff;
  --green: #2ecc71;
  --amber: #f39c12;
  --red: #ff5a5f;
  --radius: 20px;
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
  --glow: 0 0 30px rgba(108,139,255,0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", Roboto, "Helvetica Neue", sans-serif;
  background: linear-gradient(160deg, var(--bg2) 0%, var(--bg) 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 背景光晕 */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; }
.orb-1 { width: 520px; height: 520px; background: #4a5cff; top: -180px; left: -120px; animation: drift1 18s ease-in-out infinite; }
.orb-2 { width: 460px; height: 460px; background: #9b5cff; bottom: -160px; right: -100px; animation: drift2 22s ease-in-out infinite; }
.orb-3 { width: 300px; height: 300px; background: #2ec6ff; top: 40%; left: 60%; opacity: .18; animation: drift3 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,-30px)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,60px)} }

#app { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 28px 18px 70px; }
.hidden { display: none !important; }

/* 玻璃卡片 */
.glass {
  background: var(--panel);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- 按钮 ---------- */
.btn-primary, .btn-secondary {
  border: none; border-radius: 14px; padding: 13px 30px; font-size: 1rem;
  cursor: pointer; transition: transform .15s, box-shadow .25s, opacity .2s;
  font-weight: 600; letter-spacing: .02em;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; box-shadow: var(--glow);
}
.btn-secondary { background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); opacity: .92; }
.btn-primary:hover { box-shadow: 0 0 40px rgba(108,139,255,0.45); }
.btn-lg { padding: 16px 46px; font-size: 1.15rem; border-radius: 18px; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- 首页 ---------- */
.hero { text-align: center; padding: 60px 30px 46px; position: relative; overflow: hidden; }
.hero::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius);
  background: radial-gradient(600px 300px at 50% 0%, rgba(108,139,255,0.12), transparent 70%);
}
.hero-badge {
  display:inline-block; padding:6px 18px; border-radius:99px; font-size:.8rem; font-weight:700;
  letter-spacing:.18em; color:var(--accent); background:rgba(108,139,255,.12);
  border:1px solid rgba(108,139,255,.25); margin-bottom:22px;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight:800; letter-spacing:.02em;
  background: linear-gradient(120deg, #8fb0ff, #b48cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom:10px;
}
.hero .subtitle { color: var(--muted); font-size:1.15rem; margin-bottom:18px; }
.hero .desc { max-width:640px; margin:0 auto 30px; color:#c3cbe0; font-size:1.02rem; }
.hero .desc strong { color:#dfe6ff; }

.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; max-width:800px; margin:0 auto 34px; }
.feature { background:var(--panel2); border:1px solid var(--border); border-radius:16px; padding:18px; text-align:left; transition:transform .2s; }
.feature:hover { transform:translateY(-3px); }
.feature span { font-size:1.7rem; display:block; margin-bottom:8px; }
.feature b { display:block; margin-bottom:4px; font-size:1.02rem; }
.feature p { color:var(--muted); font-size:.86rem; }

.hero .hint { color:var(--muted); font-size:.86rem; margin-top:18px; }

/* ---------- 答题页 ---------- */
.quiz-top { padding:20px 24px; margin-bottom:18px; }
.quiz-head-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.quiz-title { font-weight:700; font-size:1.05rem; }
.progress-text { color:var(--accent); font-weight:700; font-size:.9rem; }
.progress-track { height:8px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; margin-bottom:16px; }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:99px; transition:width .3s; }

/* 网格导航 */
.grid-nav { display:grid; grid-template-columns:repeat(auto-fill,minmax(30px,1fr)); gap:6px; }
.grid-nav .cell {
  height:30px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; color:var(--muted);
  cursor:pointer; transition:all .15s;
}
.grid-nav .cell.current { border-color:var(--accent); color:#fff; background:rgba(108,139,255,.25); }
.grid-nav .cell.answered { background:rgba(108,139,255,.18); color:#cfd9ff; }

.question-card { padding:34px 30px; }
.q-num { color:var(--accent); font-weight:700; font-size:.85rem; margin-bottom:12px; letter-spacing:.1em; }
.q-text { font-size:clamp(1.2rem,3vw,1.55rem); font-weight:700; margin-bottom:36px; line-height:1.5; }

/* 滑块 */
.slider-wrap { margin-bottom:34px; }
.slider-track { position:relative; padding:10px 0; }
input[type=range].q-range {
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:rgba(255,255,255,.10); outline:none; cursor:pointer; position:relative; z-index:2;
}
input[type=range].q-range::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:4px solid var(--accent); box-shadow:0 0 18px rgba(108,139,255,.6); cursor:pointer; transition:transform .15s;
}
input[type=range].q-range::-webkit-slider-thumb:hover { transform:scale(1.15); }
input[type=range].q-range::-moz-range-thumb {
  width:26px; height:26px; border-radius:50%; background:#fff; border:4px solid var(--accent); cursor:pointer;
}
.slider-fill {
  position:absolute; top:10px; height:8px; left:0; border-radius:99px; pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.slider-marks { display:flex; justify-content:space-between; margin-top:12px; color:var(--muted); font-size:.78rem; }

.slider-value { display:flex; align-items:center; gap:14px; margin-top:8px; }
.val-label { font-size:1.05rem; font-weight:700; color:var(--accent); }
.val-num { font-size:.9rem; color:var(--muted); font-family:ui-monospace,monospace; }

.nav-buttons { display:flex; justify-content:space-between; gap:12px; }
.nav-buttons .btn-primary { width:140px; }
.nav-buttons .btn-secondary { width:140px; }

/* ---------- 结果页 ---------- */
.result-wrap { display:flex; flex-direction:column; gap:22px; }
.result-card { text-align:center; padding:42px 30px; }
.result-badge {
  display:inline-block; padding:6px 18px; border-radius:99px; font-size:.82rem; font-weight:700;
  background:rgba(108,139,255,.14); color:var(--accent); margin-bottom:16px; letter-spacing:.08em;
}
.result-name { font-size:clamp(2rem,6vw,3rem); font-weight:800; margin-bottom:8px; }
.result-family { color:var(--muted); font-size:1rem; margin-bottom:16px; }
.result-blurb { max-width:660px; margin:0 auto 22px; color:#c3cbe0; font-size:1.05rem; }
.confidence { font-size:.95rem; color:var(--muted); }

.section-title { padding:16px 24px; font-size:1.1rem; font-weight:700; }
.section-title span { margin-right:8px; }

/* 雷达图 */
.radar-wrap { padding:24px; display:flex; justify-content:center; }
.radar-wrap canvas { max-width:100%; height:auto; }

/* 轴条 */
.axes { padding:20px 24px; display:grid; gap:14px; }
.axis-row .axis-head { display:flex; justify-content:space-between; font-size:.92rem; margin-bottom:8px; }
.axis-name { font-weight:600; }
.axis-val { color:var(--accent); font-family:ui-monospace,monospace; }
.axis-bar { position:relative; height:10px; background:rgba(255,255,255,.08); border-radius:99px; }
.axis-bar .center-line { position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:#3a4a66; }
.axis-bar .fill { position:absolute; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.axis-labels { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); margin-top:4px; }

/* 排名 */
.rank-list { padding:14px 24px; display:grid; gap:8px; }
.rank-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; background:var(--panel2); border:1px solid transparent; }
.rank-item.top { border-color:var(--accent); background:rgba(108,139,255,.12); }
.rank-num { font-size:1.1rem; font-weight:800; width:30px; color:var(--muted); }
.rank-dot { width:16px; height:16px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 10px rgba(255,255,255,.15); }
.rank-info { flex:1; }
.rank-name { font-weight:700; }
.rank-family { font-size:.78rem; color:var(--muted); }
.rank-dist { color:var(--muted); font-size:.82rem; }

/* 一致性 */
.quality-box { padding:18px 24px; }
.quality-item { padding:8px 0; border-bottom:1px solid var(--border); font-size:.93rem; }
.quality-item:last-child { border-bottom:none; }
.quality-item .tag { display:inline-block; font-size:.75rem; padding:2px 10px; border-radius:99px; margin-right:8px; font-weight:700; }
.tag.strong { background:rgba(255,90,95,.18); color:#ff8b8f; }
.tag.mild { background:rgba(243,156,18,.18); color:#ffc66b; }
.tag.note { background:rgba(148,160,184,.15); color:var(--muted); }
.quality-empty { color:var(--green); font-weight:700; }

.actions { display:flex; justify-content:center; gap:16px; margin-top:10px; }

/* 响应式 */
@media (max-width:600px) {
  .question-card { padding:26px 18px; }
  .slider-marks span:first-child, .slider-marks span:last-child { font-size:.68rem; }
  .nav-buttons { flex-direction:column; }
  .nav-buttons .btn-primary, .nav-buttons .btn-secondary { width:100%; }
  .actions { flex-direction:column; }
  .actions .btn-primary, .actions .btn-secondary { width:100%; }
  .hero { padding:44px 18px 34px; }
  .grid-nav { grid-template-columns:repeat(auto-fill,minmax(26px,1fr)); gap:4px; }
}