:root {
  --bg:#0f0f12; --card:#15171b; --text:#f3f4f6; --sub:#b8bcc7;
  --accent:#7c5cff; --muted:#2a2e36; --green:#4ad2a0;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",Meiryo,sans-serif;background:radial-gradient(1200px 600px at 50% -200px,#1a1c22,#0f0f12);color:var(--text)}
.wrap{max-width:900px;margin:0 auto;padding:16px}
header{position:sticky;top:0;background:linear-gradient(180deg,#0f0f12 85%,#0f0f1200 100%);backdrop-filter:saturate(1.2) blur(2px);z-index:5;padding-top:6px}
h1{font-size:22px;margin:0 0 6px}
header p{margin:0;color:var(--sub);font-size:14px}

/* progress */
.progress{position:sticky;top:48px;z-index:5;background:var(--card);border:1px solid var(--muted);border-radius:999px;height:10px;overflow:hidden;margin:10px 0}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#9f7bff);transition:width .25s ease}
.pct{font-variant-numeric:tabular-nums;color:var(--sub);font-size:12px;text-align:right;margin:6px 2px 12px}

.qcard{background:var(--card);border:1px solid var(--muted);border-radius:14px;padding:16px;margin:14px 0}
.pair{display:inline-block;padding:.2em .6em;border:1px solid var(--muted);border-radius:999px;font-size:12px;color:var(--sub)}
.qtext{font-size:18px;line-height:1.6;margin:8px 0 10px}

/* 6-step scale */
.scale{display:flex;flex-direction:column;gap:8px}
.knobs{display:flex;gap:8px;justify-content:space-between}
.knob{flex:1;min-width:44px;max-width:52px;aspect-ratio:1;border-radius:50%;border:2px solid #3b3f4a;background:#1b1e24;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.knob[data-w="3"],.knob[data-w="-3"]{transform:scale(1.05)}
.knob[data-w="2"],.knob[data-w="-2"]{transform:scale(1.02)}
.knob.selected{border-color:#c7b5ff;background:#242738;box-shadow:0 0 0 3px #7c5cff22 inset}
.labels{display:flex;justify-content:space-between;flex-wrap:wrap;color:var(--sub);font-size:13px}
.help{margin-top:6px;color:var(--sub);font-size:12px;text-align:center}

.cta{position:sticky;bottom:12px;display:flex;justify-content:center;margin-top:16px;z-index:5}
.primary{background:var(--accent);border:1px solid transparent;color:#fff;border-radius:12px;padding:12px 18px;font-size:16px;cursor:pointer}
.primary[disabled]{opacity:.4;cursor:not-allowed}

/* Result */
#result-area{display:none}
.result-hero{background:#10141c;border:1px solid #2c3140;border-radius:18px;overflow:hidden}
.hero-head{display:flex;align-items:center;gap:14px;padding:18px;background:linear-gradient(180deg,#22c1c3 0%,#2a2f3a 100%)}
.hero-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border-radius:12px;background:#ffffff22;color:#fff;font-weight:800;transform:translateY(2px)}
.hero-code{font-size:20px;letter-spacing:.08em}
.hero-icon{width:72px;height:72px;border-radius:12px;background:#fff1;display:flex;align-items:center;justify-content:center;font-size:34px}
.hero-title{color:#fff;margin:0;font-size:20px}
.hero-sub{margin:4px 0 0;color:#e6ecff;font-size:13px}
.hero-body{padding:16px;background:#141821}

/* meters */
.meters{display:grid;gap:12px;margin:12px 0 6px}
.meter{background:#0f1219;border:1px solid #2c3140;border-radius:10px;padding:10px 12px}
.meter-row{display:flex;justify-content:space-between;font-size:12px;color:#c6cbe0;margin-bottom:6px}
.meter-bar{position:relative;height:10px;border-radius:99px;overflow:hidden;background:#222838}
.meter-fill-left,.meter-fill-right{position:absolute;top:0;bottom:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.meter-fill-left{left:0;background:#7c5cff}
.meter-fill-right{right:0;background:var(--green)}

.note{background:#12141a;border:1px dashed #3b3f4a;border-radius:10px;padding:10px 12px;color:#c9cbe1;font-size:13px;margin-top:10px}

/* swatches */
.swatches{display:flex;gap:10px;align-items:center;margin-top:6px}
.swatch{width:28px;height:28px;border-radius:6px;border:1px solid #0008}
.two-col{display:grid;gap:16px}
@media(min-width:780px){.two-col{grid-template-columns:1fr 1fr}}

.list{margin:0;padding-left:18px}
.list li{margin:.25em 0;color:var(--sub)}

/* tiny confetti */
.confetti{position:fixed;inset:0;pointer-events:none}
.btn{background:#2a2e36;border:1px solid #3b3f4a;color:#eaeef7;border-radius:10px;padding:10px 14px;cursor:pointer}
.btn.outline{background:transparent}
.btn.active{outline:2px solid var(--accent)}
.modal{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:50}
.modal-card{background:var(--card);border:1px solid var(--muted);border-radius:16px;padding:20px;max-width:360px;width:90%}
.modal-actions{display:flex;gap:10px;margin-top:12px}

/* ==== Soft / MBTI・ラブ診断っぽいテーマ ==== */
body.soft{ --bg:#fff7fb; --card:#ffffff; --text:#2b2a30; --sub:#6f6a77; --accent:#ff7ac0; --muted:#f0e6f4; --green:#77d7c6; }
body.soft{ background:radial-gradient(1600px 900px at 50% -300px,#ffe9f5,#fff7fb); color:var(--text); }
body.soft header{ background:linear-gradient(180deg,#fff7fb 85%,#fff7fb00 100%); }
.soft .qcard{ background:#fff; border:1px solid #f3e8ff; border-radius:18px; box-shadow:0 6px 20px #f3e8ff80; }
.soft .pair{ border-color:#f3e8ff; color:#a083b5; background:#faf5ff; }
.soft .qtext{ font-weight:600; }
.soft .progress{ background:#ffe9f5; border-color:#ffe9f5; height:12px; }
.soft .bar{ background:linear-gradient(90deg,#ff86c8,#b9a6ff,#77d7c6); }
.soft .pct{ color:#9a8aa8; font-weight:600; }
.soft .pct::before{ content:"⭐ "; }
.soft .knob{ border:2px solid #edd6ff; background:#faf7ff; }
.soft .knob.selected{ border-color:#ffb3dd; background:#fff0f7; box-shadow:0 0 0 6px #ffb3dd33 inset; }
.soft .labels{ color:#8b7d93; font-weight:500; }
.soft .help{ color:#a093ac; }
.soft .primary{ background:linear-gradient(90deg,#ff86c8,#b9a6ff); border:0; box-shadow:0 8px 24px #ff86c833; }
.soft .btn{ background:#fff; border-color:#edd6ff; color:#5b5167; }
.soft .btn.outline{ background:transparent; }
.soft .result-hero{ border-color:#f3e8ff; border-radius:22px; overflow:hidden; }
.soft .hero-head{ background:linear-gradient(180deg,#ffd2ec 0%,#e9e3ff 100%); }
.soft .hero-badge{ background:#ffffffcc; color:#6d4b80; }
.soft .hero-icon{ background:#ffffffb3; }
.soft .hero-title{ color:#4b3a56; }
.soft .hero-sub{ color:#6d4b80; }
.soft .hero-body{ background:#fff; }
.soft .meter{ background:#fff8fe; border-color:#f3e8ff; }
.soft .meter-bar{ background:#f2e9ff; }
.soft .meter-fill-left{ background:#ff86c8; }
.soft .meter-fill-right{ background:#77d7c6; }
.soft .note{ background:#fff7fd; border-color:#f1ddff; color:#6a5f73; }
.soft .swatch{ border-color:#00000010; }
.soft .modal-card{ background:#ffffff; border-color:#f1ddff; box-shadow:0 10px 30px #e7d7ff88; border-radius:20px; }