*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f7f7f9;color:#222;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}

/* ヘッダー */
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.header .inner{max-width:820px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.brand{font-weight:800;color:#2fc996}
.counter{margin-left:auto;color:#666;font-size:14px}

/* 本文 */
.wrap{max-width:820px;margin:0 auto;padding:8px 16px 120px}
.help{color:#888;font-size:13px;margin:8px 2px}

/* 質問カード（一覧表示） */
.card{background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:18px 16px;margin:12px 0;transition:opacity .15s,transform .12s}
.card.past{opacity:.35}
.card.future{opacity:.18;pointer-events:none}
.card.active{opacity:1;transform:translateY(-1px)}
.qtext{font-size:20px;font-weight:800;line-height:1.4;margin:4px 0 14px}

/* 4つの⭕️ */
.scale{display:flex;align-items:center;gap:14px;justify-content:center;margin:14px 0}
.dot{width:44px;height:44px;border-radius:50%;border:2px solid #d7d7dc;background:#fff;cursor:pointer;position:relative;transition:.12s}
.dot:focus{outline:none;box-shadow:0 0 0 3px rgba(47,201,150,.25)}
.dot[aria-checked="true"]{transform:scale(1.08)}
/* 左側=グリーン系、右側=パープル系（見た目の濃淡のみ） */
.dot.left{border-color:#4ccaa6}
.dot.left.far{border-color:#2fc996}
.dot.right{border-color:#9c82db}
.dot.right.far{border-color:#7b5fd0}
/* 選択時の色づけ */
.dot[aria-checked="true"].left{background:#e9fbf4;border-color:#2fc996}
.dot[aria-checked="true"].right{background:#f1eafe;border-color:#7b5fd0}
.dot[aria-checked="true"]::after{
  content:""; position:absolute; left:50%; top:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border-radius:50%; background:#888; opacity:.7;
}
.dot[aria-checked="true"].left::after{background:#2fc996;opacity:.9}
.dot[aria-checked="true"].right::after{background:#7b5fd0;opacity:.9}

/* 日本語キャプション（小さめ） */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.caps span{font-size:12px;line-height:1.2;color:#666;text-align:center;white-space:nowrap}
.caps span:nth-child(1){color:#2fc996;font-weight:600}
.caps span:nth-child(4){color:#7b5fd0;font-weight:600}

/* フッター（Next/戻る） */
.footer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #eee;z-index:10}
.footer .inner{max-width:820px;margin:0 auto;padding:12px 16px;display:flex;gap:10px}
.btn{flex:1;border:none;border-radius:999px;padding:14px 18px;font-size:16px;font-weight:800;color:#fff;background:#7b5fd0;cursor:pointer}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.back{flex:0 0 auto;background:#e9e9ee;color:#444}

/* ========================== */
/* typeme 診断中カードUI */
/* ========================== */
body{
  min-height:100svh;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 14%,rgba(124,58,237,.11),transparent 32%),
    radial-gradient(circle at 88% 24%,rgba(219,39,119,.10),transparent 30%),
    linear-gradient(180deg,#fff 0%,#f8fafc 56%,#f3f4f6 100%);
}
.progress-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:250;
  background:rgba(229,231,235,.72);
}
.progress-fill{
  width:0;
  height:100%;
  border-radius:0 999px 999px 0;
  background:linear-gradient(135deg,#7c3aed,#db2777);
  transition:width .35s ease;
}
.stage{
  width:100%;
  max-width:430px;
  height:calc(100svh - 78px);
  min-height:560px;
  margin:0 auto;
  padding:72px 20px 96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  overflow:hidden;
}
.card{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  touch-action:manipulation;
}
#card-c{
  min-height:390px;
  padding:26px 22px 22px;
  justify-content:center;
  border:1.5px solid rgba(229,231,235,.96);
  border-radius:20px;
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 34px rgba(17,24,39,.11);
  backdrop-filter:blur(18px);
  transition:opacity .16s ease, transform .16s ease;
}
#card-c.swap-next{
  opacity:0;
  transform:translateY(-8px);
}
#card-c.swap-prev{
  opacity:0;
  transform:translateY(8px);
}
.card-side{
  min-height:66px;
  padding:13px 18px;
  align-items:center;
  justify-content:center;
  border:1.5px solid rgba(243,244,246,.98);
  border-radius:14px;
  background:rgba(249,250,251,.86);
  box-shadow:none;
  color:#9ca3af;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .15s ease,color .15s ease,background .15s ease,transform .08s ease,opacity .15s ease;
}
.card-side:hover{
  border-color:#e5e7eb;
  background:#fff;
  color:#4b5563;
}
.card-side:active{
  transform:scale(.99);
}
.card-side.is-empty{
  visibility:hidden;
}
.c-qtext{
  margin:0;
  color:#111827;
  min-height:3.2em;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(1.28rem,5vw,1.62rem);
  line-height:1.55;
  font-weight:950;
  letter-spacing:0;
  text-align:center;
}
.c-axis{
  margin:0 0 12px;
  color:#7c3aed;
  font-size:.66rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-align:center;
}
.c-qtext-dim{
  margin:0;
  max-width:100%;
  color:inherit;
  font-size:.88rem;
  line-height:1.4;
  font-weight:850;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ghost-hint{
  display:block;
  margin-bottom:2px;
  color:#9ca3af;
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.06em;
}
.c-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}
.option-btn{
  width:100%;
  min-height:54px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1.5px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  color:#374151;
  font:inherit;
  font-size:1rem;
  font-weight:850;
  text-align:center;
  cursor:pointer;
  transition:transform .08s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease,color .14s ease,opacity .14s ease;
}
.option-btn:hover,
.option-btn:focus-visible{
  border-color:#7c3aed;
  background:#faf5ff;
  color:#7c3aed;
  box-shadow:0 10px 24px rgba(124,58,237,.10);
  outline:none;
}
.option-btn:active{
  transform:scale(.98);
  background:#ede9fe;
}
.option-btn.answered{
  border-color:#7c3aed;
  background:#faf5ff;
  color:#7c3aed;
}
.option-btn:disabled{
  cursor:default;
  opacity:.92;
  transform:none;
}
.diag-loading{
  font-family:inherit;
}

@media (max-width:720px){
  body{padding-bottom:76px;}
  .stage{
    height:calc(100svh - 70px);
    min-height:520px;
    padding:64px 20px 92px;
  }
  #card-c{
    min-height:380px;
    padding:24px 20px 20px;
  }
  .option-btn{min-height:52px;}
}

@media (max-width:380px){
  .stage{padding-left:16px;padding-right:16px;gap:8px;}
  #card-c{min-height:360px;padding-left:16px;padding-right:16px;}
  .c-qtext{font-size:1.18rem;}
  .option-btn{min-height:48px;font-size:.92rem;}
}