/* Base */
.mbti-compat-wrap{max-width:860px;margin:24px auto;}
.mbti-compat-card{
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  padding:22px;
}
.mbti-compat-header{margin-bottom:14px;}
.mbti-compat-title{margin:0 0 6px 0;font-size:22px;line-height:1.2;}
.mbti-compat-subtitle{margin:0;color:rgba(0,0,0,.65);font-size:14px;line-height:1.5;}

.mbti-compat-form{display:grid;gap:12px;margin-top:14px;}
.mbti-compat-row{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;}
.mbti-compat-label{font-weight:600;color:rgba(0,0,0,.8);font-size:14px;}
.mbti-compat-select{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size:14px;
  outline:none;
}
.mbti-compat-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.mbti-compat-btn{
  appearance:none;border:0;cursor:pointer;
  padding:11px 14px;
  font-weight:700;font-size:14px;
  background:#111;color:#fff;
}
.mbti-compat-btn.secondary{
  background:rgba(0,0,0,.06);
  color:#111;
}
.mbti-compat-btn:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:2px;}

.mbti-compat-result{margin-top:16px;}
.mbti-compat-loading, .mbti-compat-error{
  padding:12px 14px;border-radius:14px;
  background:rgba(0,0,0,.04);color:rgba(0,0,0,.7);
}

.mbti-compat-summary{margin-top:6px;}
.mbti-compat-summary-top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
.mbti-compat-pair{display:flex;gap:8px;align-items:baseline;}
.mbti-compat-type{font-size:22px;font-weight:900;}
.mbti-compat-x{opacity:.5;}
.mbti-compat-grade{margin-top:4px;font-size:14px;color:rgba(0,0,0,.65);font-weight:700;}
.mbti-compat-meter-wrap{min-width:240px;flex:1;max-width:360px;}
.mbti-compat-meter{width:100%;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden;}
.mbti-compat-meter-bar{height:100%;background:#111;}

.mbti-compat-oneline{margin:12px 0 12px 0;font-size:15px;line-height:1.55;color:rgba(0,0,0,.82);}

.mbti-compat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.mbti-compat-pill{display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;background:rgba(0,0,0,.05);
  font-size:12px;font-weight:700;color:rgba(0,0,0,.75);
}

.mbti-compat-section{margin-top:14px;border-top:1px solid rgba(0,0,0,.08);padding-top:12px;}
.mbti-compat-section h4{margin:0 0 8px 0;font-size:15px;}
.mbti-compat-section ul{margin:0;padding-left:18px;}
.mbti-compat-section li{margin:6px 0;line-height:1.55;color:rgba(0,0,0,.82);}

.mbti-compat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;}
.mbti-compat-box{border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.02);padding:12px;border-radius:16px;}
.mbti-compat-box h4{margin:0 0 8px 0;font-size:14px;}
.mbti-compat-mini{margin:0;padding-left:18px;}
.mbti-compat-mini li{margin:6px 0;line-height:1.5;color:rgba(0,0,0,.78);}

.mbti-compat-share{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.mbti-compat-share-input{
  flex:1;min-width:220px;
  border:1px solid rgba(0,0,0,.12);
  padding:10px 12px;border-radius:12px;
  font-size:13px;color:rgba(0,0,0,.8);
  background:#fff;
}

.mbti-compat-disclaimer{margin-top:14px;color:rgba(0,0,0,.55);font-size:12px;line-height:1.5;}

@media (max-width:560px){
  .mbti-compat-row{grid-template-columns:1fr;gap:6px;}
  .mbti-compat-grid{grid-template-columns:1fr;}
  .mbti-compat-meter-wrap{min-width:180px;max-width:none;}
}

/* Toast */
.mbti-compat-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#111;color:#fff;padding:10px 12px;border-radius:999px;
  font-weight:700;font-size:13px;opacity:0;pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:999999;
}
.mbti-compat-toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}