:root{
  --bg:#f3f5ff;
  --fg:#1f2a40;
  --muted:#6b7b93;
  --line:rgba(31,42,64,.08);
  --accent:#6757ff;
  --accent-strong:#5345ff;
  --accent-soft:rgba(103,87,255,.12);
  --surface:#ffffff;
  --surface-soft:rgba(255,255,255,.66);
}
*{box-sizing:border-box;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  max-width:900px;
  margin:32px auto;
  padding:0 24px 64px;
  line-height:1.6;
  background:linear-gradient(180deg,#f8f9ff 0%,#eef1ff 100%);
  color:var(--fg);
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(600px circle at 20% 20%,rgba(103,87,255,.18),transparent),
             radial-gradient(520px circle at 85% 0%,rgba(255,122,172,.18),transparent);
  pointer-events:none;
  z-index:-1;
}
h1{font-size:2.1rem;font-weight:700;margin:0 0 12px;letter-spacing:-.02em;}
.muted{color:var(--muted);}
p.muted{margin-bottom:24px;}
.app-wrapper{display:flex;flex-direction:column;gap:18px;animation:fadeIn .4s ease;}
.question-list{display:flex;flex-direction:column;gap:18px;}
.card{border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin:12px 0;background:var(--surface-soft);box-shadow:0 14px 40px rgba(31,42,64,.08);backdrop-filter:blur(18px);}
.card.result{padding:28px 28px 32px;}
.q{position:relative;margin:0;border-radius:18px;padding:22px 22px 20px;border:1px solid var(--accent-soft);background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(248,249,255,.78));box-shadow:0 10px 30px rgba(84,98,140,.12);transition:transform .25s ease,box-shadow .25s ease;animation:fadeUp .45s ease both;}
.q:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(84,98,140,.15);}
.q::after{content:"";position:absolute;inset:0;border-radius:18px;border:1px solid transparent;background:linear-gradient(160deg,rgba(103,87,255,.22),rgba(255,122,172,.18)) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none;}
.q:hover::after{opacity:.9;}
.q-header{display:flex;align-items:flex-start;gap:14px;}
.q-number{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:6px 10px;border-radius:999px;background:rgba(103,87,255,.12);color:var(--accent-strong);font-weight:600;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;}
.q-text{flex:1;font-weight:600;font-size:1.05rem;color:var(--fg);}
.scale{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
.scale label{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:14px;cursor:pointer;overflow:hidden;transition:transform .2s ease;}
.scale label input{position:absolute;opacity:0;pointer-events:none;}
.scale label span{display:inline-flex;align-items:center;justify-content:center;min-width:128px;padding:12px 18px;border-radius:14px;background:rgba(103,87,255,.08);color:var(--muted);font-weight:600;letter-spacing:.01em;transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;}
.scale label:hover span{background:rgba(103,87,255,.14);color:var(--accent-strong);}
.scale label input:checked + span{background:linear-gradient(135deg,#7564ff,#a557ff);color:#fff;box-shadow:0 12px 24px rgba(117,100,255,.35);transform:translateY(-1px);}
.scale label input:focus-visible + span{outline:3px solid rgba(117,100,255,.45);outline-offset:3px;}
.scale label:active span{transform:scale(.98);}
button{border:0;border-radius:14px;padding:14px 22px;background:linear-gradient(135deg,#7564ff,#a557ff);color:#fff;font-weight:600;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.01em;box-shadow:0 18px 32px rgba(117,100,255,.35);transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;min-width:200px;}
button:hover{transform:translateY(-2px);box-shadow:0 22px 38px rgba(117,100,255,.38);}
button:active{transform:translateY(0);}
button:focus-visible{outline:3px solid rgba(117,100,255,.45);outline-offset:4px;}
button.secondary{background:rgba(117,100,255,.12);color:var(--accent-strong);box-shadow:none;border:1px solid rgba(117,100,255,.35);}
button.secondary:hover{background:rgba(117,100,255,.18);color:var(--accent-strong);box-shadow:0 10px 22px rgba(117,100,255,.22);}
button.secondary:active{transform:translateY(0);}
.form-actions{display:flex;justify-content:center;margin-top:28px;}
.form-actions button.secondary{margin-right:14px;min-width:auto;padding:12px 18px;}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(103,87,255,.12);color:var(--accent-strong);margin-right:6px;}
.result{font-size:1.1rem;}
.small{font-size:.9rem;}
input[type="text"]{padding:10px 12px;border:1px solid rgba(84,98,140,.16);border-radius:10px;}
.chart-container{position:relative;height:320px;margin:20px 0;}
.detail-section .card{box-shadow:none;background:rgba(255,255,255,.92);border:1px solid rgba(103,87,255,.12);}
.detail-section h2{font-size:1.25rem;margin:20px 0 10px;border-bottom:2px solid rgba(103,87,255,.2);padding-bottom:8px;color:var(--fg);}
.detail-section h3{font-size:1rem;margin:16px 0 8px;color:var(--accent-strong);}
.detail-section .feature-list{list-style:none;padding:0;}
.detail-section .feature-list li{padding:10px 0;border-bottom:1px solid rgba(24,32,56,.08);}
.detail-section .feature-list li:last-child{border-bottom:none;}
.compatibility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:16px 0;}
.compat-item{padding:14px;border-radius:14px;border:1px solid rgba(103,87,255,.18);background:rgba(103,87,255,.08);text-align:center;box-shadow:none;}
.compatibility-grid button.compat-item{background:rgba(103,87,255,.08);border:1px solid rgba(103,87,255,.18);box-shadow:none;color:inherit;font:inherit;padding:14px;min-width:auto;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.compatibility-grid button.compat-item:hover{background:rgba(103,87,255,.16);transform:translateY(-2px);box-shadow:0 12px 26px rgba(103,87,255,.18);}
.compatibility-grid button.compat-item:focus-visible{outline:3px solid rgba(103,87,255,.35);outline-offset:4px;}
.compatibility-grid button.compat-item.active{border-color:var(--accent-strong);background:rgba(103,87,255,.18);box-shadow:0 16px 30px rgba(103,87,255,.22);}
.compatibility-grid button.compat-item strong{font-size:1.05rem;color:var(--fg);}
.compatibility-grid button.compat-item .muted{margin-top:0;}
.compat-item.good{background:rgba(70,201,130,.12);border-color:rgba(70,201,130,.25);}
.compat-item.ok{background:rgba(255,180,99,.12);border-color:rgba(255,180,99,.25);}
.compat-group{display:flex;gap:18px;align-items:flex-start;margin:16px 0;padding:16px 18px;border-radius:16px;border:1px solid rgba(103,87,255,.16);background:rgba(103,87,255,.05);} 
.compat-rank{display:flex;align-items:flex-start;}
.compat-rank span{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#7564ff,#a557ff);color:#fff;font-weight:700;font-size:1.2rem;box-shadow:0 12px 24px rgba(117,100,255,.28);}
.compat-content{flex:1;display:flex;flex-direction:column;gap:10px;}
.compat-content .compatibility-grid{margin:0;}
.compat-item.compat-rank-S{background:rgba(103,87,255,.14);border-color:rgba(103,87,255,.3);}
.compat-item.compat-rank-A{background:rgba(70,201,130,.14);border-color:rgba(70,201,130,.28);}
.compat-item.compat-rank-B{background:rgba(255,193,102,.14);border-color:rgba(255,193,102,.28);}
.compat-item.compat-rank-C{background:rgba(244,114,182,.14);border-color:rgba(244,114,182,.28);}
.compat-group.rank-C .compat-rank span{background:linear-gradient(135deg,#f872b6,#f43f5e);}
.compat-group.rank-B .compat-rank span{background:linear-gradient(135deg,#fbbf24,#f97316);}
.compat-group.rank-A .compat-rank span{background:linear-gradient(135deg,#34d399,#10b981);}
.compat-group.rank-S .compat-rank span{background:linear-gradient(135deg,#7564ff,#a557ff);}
.compat-group.rank-B,.compat-group.rank-C .compatibility-grid .compat-item{color:var(--fg);}
.compat-group.rank-C .compatibility-grid .compat-item strong,
.compat-group.rank-B .compatibility-grid .compat-item strong,
.compat-group.rank-A .compatibility-grid .compat-item strong,
.compat-group.rank-S .compatibility-grid .compat-item strong{color:var(--fg);}
.share-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.share-button{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(103,87,255,.16);border-radius:10px;background:#fff;color:#333;text-decoration:none;cursor:pointer;transition:all .2s;box-shadow:0 6px 14px rgba(31,42,64,.08);}
.share-button:hover{background:#f5f6ff;border-color:#6757ff;color:#6757ff;}
.share-button.twitter{color:#1d9bf0;border-color:rgba(29,155,240,.25);}
.share-button.twitter:hover{background:rgba(29,155,240,.12);}
.share-button svg{width:18px;height:18px;fill:currentColor;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:720px){
  body{margin:16px auto;padding:0 18px 48px;}
  h1{font-size:1.75rem;}
  .scale label span{min-width:100px;padding:12px 14px;}
  .card{padding:18px;}
  .card.result{padding:22px;}
  .chart-container{height:280px;}
}