/* purpose: MBTI 16-type inventory — phone-first quiz, result, type library
   author: MD Hub
   date: 2026-10-01 */
#md_mbti_root{
	--mb-accent:var(--bo-accent,#5b4bd6);
	--mb-on:#fff;
	--mb-ink:var(--bo-text,#0f172a);
	--mb-muted:var(--bo-text-muted,#64748b);
	--mb-card:var(--bo-bg-elevated,#fff);
	--mb-line:var(--bo-border,#e2e8f0);
	--mb-page:var(--bo-bg-page,#f4f1fb);
	--mb-soft:color-mix(in srgb,var(--mb-accent) 12%,var(--mb-card));
	width:100%;
	max-width:42rem;
	margin:0 auto;
	color:var(--mb-ink);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	gap:0;
	min-height:28rem;
	padding:0 .15rem .8rem;
}
#md_mbti_root *{box-sizing:border-box}
#md_mbti_root .hidden,#md_mbti_root [hidden]{display:none!important}
#md_mbti_root .mb-screen{display:none;flex-direction:column;gap:.9rem;animation:mbIn .28s ease}
#md_mbti_root .mb-screen.on{display:flex}
@keyframes mbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#md_mbti_root .mb-hero{
	background:linear-gradient(160deg,color-mix(in srgb,var(--mb-accent) 88%,#1e1b4b),#312e81 55%,#0f172a);
	color:#f8fafc;
	border-radius:1.25rem;
	padding:1.35rem 1.2rem 1.2rem;
	box-shadow:0 18px 40px color-mix(in srgb,var(--mb-accent) 28%,transparent);
	position:relative;
	overflow:hidden;
}
#md_mbti_root .mb-hero:before{
	content:"";position:absolute;right:-2rem;top:-2rem;width:9rem;height:9rem;border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%);
}
#md_mbti_root .mb-kicker{
	font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.82;margin:0 0 .35rem
}
#md_mbti_root .mb-hero h2{margin:0;font-size:1.7rem;line-height:1.15;font-weight:800}
#md_mbti_root .mb-hero p{margin:.45rem 0 0;font-size:.95rem;line-height:1.45;opacity:.9;max-width:34rem}
#md_mbti_root .mb-hero-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem;position:relative}
#md_mbti_root .mb-btn{
	appearance:none;border:0;cursor:pointer;font-weight:750;font-size:.95rem;
	border-radius:.95rem;min-height:2.75rem;padding:.55rem 1.05rem;
	display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
}
#md_mbti_root .mb-btn-primary{background:#fff;color:#312e81}
#md_mbti_root .mb-btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
#md_mbti_root .mb-btn-solid{
	background:var(--mb-accent);color:var(--mb-on);
}
#md_mbti_root .mb-btn-line{
	background:var(--mb-card);color:var(--mb-ink);border:1px solid var(--mb-line);
}
#md_mbti_root .mb-btn:disabled{opacity:.45;cursor:not-allowed}
#md_mbti_root .mb-note{
	font-size:.78rem;color:var(--mb-muted);line-height:1.4;margin:0
}

#md_mbti_root .mb-quad{
	display:grid;grid-template-columns:1fr 1fr;gap:.55rem
}
#md_mbti_root .mb-chip{
	border:1px solid var(--mb-line);background:var(--mb-card);border-radius:1rem;padding:.75rem .8rem;
	display:flex;flex-direction:column;gap:.15rem;min-height:4.4rem
}
#md_mbti_root .mb-chip b{font-size:.82rem}
#md_mbti_root .mb-chip span{font-size:.75rem;color:var(--mb-muted);line-height:1.3}
#md_mbti_root .mb-chip i{color:var(--chip,var(--mb-accent));margin-bottom:.15rem}

#md_mbti_root .mb-progress-wrap{display:flex;align-items:center;gap:.65rem}
#md_mbti_root .mb-progress{
	flex:1;height:.42rem;background:var(--mb-line);border-radius:99px;overflow:hidden
}
#md_mbti_root .mb-progress > i{
	display:block;height:100%;width:0;background:var(--mb-accent);border-radius:99px;transition:width .25s ease
}
#md_mbti_root .mb-count{font-size:.78rem;font-weight:750;color:var(--mb-muted);white-space:nowrap}

#md_mbti_root .mb-q{
	background:var(--mb-card);border:1px solid var(--mb-line);border-radius:1.15rem;padding:1.05rem 1rem 1.1rem
}
#md_mbti_root .mb-q-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--mb-accent);margin:0 0 .45rem}
#md_mbti_root .mb-q h3{margin:0 0 .85rem;font-size:1.12rem;line-height:1.35}
#md_mbti_root .mb-choices{display:flex;flex-direction:column;gap:.55rem}
#md_mbti_root .mb-choice{
	appearance:none;text-align:left;cursor:pointer;border:1px solid var(--mb-line);
	background:var(--mb-page);color:var(--mb-ink);border-radius:1rem;padding:.9rem .95rem;
	font-size:.98rem;line-height:1.4;font-weight:600;min-height:3.4rem;
	display:flex;align-items:flex-start;gap:.7rem
}
#md_mbti_root .mb-choice .mb-letter{
	flex:none;width:1.7rem;height:1.7rem;border-radius:.55rem;display:inline-flex;align-items:center;justify-content:center;
	background:var(--mb-soft);color:var(--mb-accent);font-size:.78rem;font-weight:800
}
#md_mbti_root .mb-choice.on{
	border-color:var(--mb-accent);background:var(--mb-soft);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--mb-accent) 18%,transparent)
}
#md_mbti_root .mb-nav{
	display:flex;gap:.5rem;align-items:center
}
#md_mbti_root .mb-nav .mb-btn{flex:1}

#md_mbti_root .mb-result-head{
	border-radius:1.25rem;padding:1.2rem 1.1rem 1.05rem;color:#fff;position:relative;overflow:hidden
}
#md_mbti_root .mb-result-head .mb-code{
	font-size:2.35rem;font-weight:850;letter-spacing:.06em;margin:.1rem 0 0;line-height:1
}
#md_mbti_root .mb-result-head h2{margin:.25rem 0 0;font-size:1.35rem}
#md_mbti_root .mb-result-head p{margin:.4rem 0 0;opacity:.92;font-size:.95rem}

#md_mbti_root .mb-bars{display:flex;flex-direction:column;gap:.7rem}
#md_mbti_root .mb-bar-row{display:grid;grid-template-columns:4.6rem 1fr 4.6rem;gap:.4rem;align-items:center}
#md_mbti_root .mb-bar-lab{font-size:.7rem;font-weight:800;color:var(--mb-muted);line-height:1.15}
#md_mbti_root .mb-bar-lab.r{text-align:right}
#md_mbti_root .mb-bar{
	height:.72rem;border-radius:99px;background:var(--mb-line);position:relative;overflow:hidden
}
#md_mbti_root .mb-bar > i{
	position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--mb-accent);border-radius:99px
}

#md_mbti_root .mb-card{
	background:var(--mb-card);border:1px solid var(--mb-line);border-radius:1.1rem;padding:.95rem 1rem
}
#md_mbti_root .mb-card h3{margin:0 0 .45rem;font-size:1rem}
#md_mbti_root .mb-card p,#md_mbti_root .mb-card li{font-size:.92rem;line-height:1.45;color:var(--mb-ink)}
#md_mbti_root .mb-card ul{margin:.2rem 0 0;padding-left:1.1rem}
#md_mbti_root .mb-fns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
#md_mbti_root .mb-fn{
	font-size:.78rem;font-weight:750;border-radius:999px;padding:.28rem .65rem;
	background:var(--mb-soft);color:var(--mb-accent)
}

#md_mbti_root .mb-grid{
	display:grid;grid-template-columns:1fr 1fr;gap:.55rem
}
#md_mbti_root .mb-type-tile{
	appearance:none;border:1px solid var(--mb-line);background:var(--mb-card);border-radius:1rem;
	padding:.8rem .75rem;text-align:left;cursor:pointer;min-height:5.2rem;
	display:flex;flex-direction:column;gap:.12rem
}
#md_mbti_root .mb-type-tile b{font-size:1.05rem;letter-spacing:.04em}
#md_mbti_root .mb-type-tile span{font-size:.78rem;color:var(--mb-muted)}
#md_mbti_root .mb-type-tile i{width:100%;height:.28rem;border-radius:99px;background:var(--tile,#5b4bd6);margin-bottom:.3rem}

#md_mbti_root .mb-toast{
	position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
	background:#0f172a;color:#fff;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:700;
	z-index:40;box-shadow:0 10px 24px rgba(15,23,42,.25)
}

html.dark #md_mbti_root{
	--mb-page:#0f172a;
	--mb-card:#1e293b;
	--mb-line:#334155;
}
html.md-phone #md_mbti_root .mb-choice,
html.md-native-android #md_mbti_root .mb-choice{font-size:16px;min-height:44px}
html.md-phone #md_mbti_root .mb-btn,
html.md-native-android #md_mbti_root .mb-btn{min-height:44px}

@media (max-width:420px){
	#md_mbti_root .mb-quad{grid-template-columns:1fr}
	#md_mbti_root .mb-bar-row{grid-template-columns:3.6rem 1fr 3.6rem}
}