.b4j-guide{max-width:1180px;margin:0 auto;padding:0 24px 72px}
.b4j-guide *{box-sizing:border-box}
.b4j-guide .b4j-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:26px;align-items:start;margin:10px 0 34px}
.b4j-guide .b4j-lead,.b4j-guide .b4j-side-note,.b4j-guide .b4j-card,.b4j-guide .b4j-dialog-frame,.b4j-guide .b4j-compare-wrap,.b4j-guide .b4j-callout{border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.62);border-radius:18px}
.b4j-guide .b4j-lead{padding:28px}
.b4j-guide .b4j-lead h2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.08;margin:0 0 14px}
.b4j-guide .b4j-lead p{font-size:1.04rem;line-height:1.75;margin:0;color:var(--muted,#a9b5c5)}
.b4j-guide .b4j-side-note{padding:22px}
.b4j-guide .b4j-side-note strong{display:block;font-size:1rem;margin-bottom:8px}
.b4j-guide .b4j-side-note p{margin:0;color:var(--muted,#a9b5c5);line-height:1.65}
.b4j-guide .b4j-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(96,165,250,.3);border-radius:999px;background:rgba(37,99,235,.12);color:#93c5fd;font-weight:700;font-size:.8rem;letter-spacing:.02em;margin-bottom:14px}
.b4j-guide .b4j-dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 5px rgba(52,211,153,.08)}
.b4j-guide .b4j-section{margin:44px 0}
.b4j-guide .b4j-section-head{max-width:820px;margin-bottom:20px}
.b4j-guide .b4j-section-head h2{margin:0 0 10px;font-size:clamp(1.45rem,2.6vw,2rem)}
.b4j-guide .b4j-section-head p{margin:0;color:var(--muted,#a9b5c5);line-height:1.7}
.b4j-guide .b4j-dialog-frame{overflow:hidden;padding:10px;background:linear-gradient(180deg,rgba(30,41,59,.86),rgba(15,23,42,.76));box-shadow:0 28px 70px rgba(0,0,0,.24)}
.b4j-guide .b4j-dialog-frame img{display:block;width:100%;height:auto;border-radius:12px}
.b4j-guide .b4j-caption{margin:12px 4px 2px;color:var(--muted,#94a3b8);font-size:.88rem;line-height:1.55}
.b4j-guide .b4j-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.b4j-guide .b4j-card{padding:22px}
.b4j-guide .b4j-step{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:10px;background:rgba(59,130,246,.15);border:1px solid rgba(96,165,250,.28);color:#93c5fd;font-weight:800;margin-bottom:12px}
.b4j-guide .b4j-card h3{font-size:1.06rem;margin:0 0 8px}
.b4j-guide .b4j-card p{margin:0;color:var(--muted,#a9b5c5);line-height:1.65;font-size:.95rem}
.b4j-guide code{padding:.12em .35em;border-radius:6px;background:rgba(148,163,184,.11);font-size:.9em}
.b4j-guide .b4j-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.b4j-guide .b4j-node{padding:10px 13px;border:1px solid rgba(148,163,184,.24);border-radius:11px;background:rgba(15,23,42,.72);font-weight:700;font-size:.88rem}
.b4j-guide .b4j-arrow{color:#60a5fa;font-weight:900}
.b4j-guide .b4j-callout{padding:24px;border-color:rgba(59,130,246,.35);background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(15,23,42,.7))}
.b4j-guide .b4j-callout h3{margin:0 0 10px;font-size:1.25rem}
.b4j-guide .b4j-callout p{margin:0;color:var(--muted,#a9b5c5);line-height:1.72}
.b4j-guide .b4j-compare-wrap{overflow:auto}
.b4j-guide .b4j-compare{width:100%;border-collapse:collapse;min-width:760px}
.b4j-guide .b4j-compare th,.b4j-guide .b4j-compare td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid rgba(148,163,184,.15);line-height:1.55}
.b4j-guide .b4j-compare th{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:#93c5fd;background:rgba(30,41,59,.52)}
.b4j-guide .b4j-compare td{color:var(--muted,#cbd5e1)}
.b4j-guide .b4j-compare tr:last-child td{border-bottom:0}
.b4j-guide .b4j-compare td:first-child{font-weight:700;color:var(--text,#fff);width:21%}
.b4j-guide .b4j-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.b4j-guide .b4j-check{padding:16px;border:1px solid rgba(52,211,153,.2);border-radius:14px;background:rgba(16,185,129,.06)}
.b4j-guide .b4j-check b{display:block;margin-bottom:5px}
.b4j-guide .b4j-check span{font-size:.9rem;color:var(--muted,#a9b5c5);line-height:1.5}
.b4j-guide .b4j-footer-note{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:28px;padding:18px 20px;border-top:1px solid rgba(148,163,184,.16)}
.b4j-guide .b4j-footer-note p{margin:0;color:var(--muted,#a9b5c5);font-size:.9rem;line-height:1.5}
@media(max-width:900px){
  .b4j-guide .b4j-intro,.b4j-guide .b4j-grid{grid-template-columns:1fr}
  .b4j-guide .b4j-checks{grid-template-columns:1fr}
}
@media(max-width:620px){
  .b4j-guide{padding:0 14px 48px}
  .b4j-guide .b4j-lead,.b4j-guide .b4j-card,.b4j-guide .b4j-callout{padding:18px}
  .b4j-guide .b4j-dialog-frame{padding:5px;border-radius:12px}
  .b4j-guide .b4j-footer-note{align-items:flex-start;flex-direction:column}
}
.b4j-guide .b4j-ui{border:1px solid rgba(100,116,139,.35);border-radius:18px;background:#0f1218;box-shadow:0 28px 70px rgba(0,0,0,.28);overflow:hidden}
.b4j-guide .b4j-ui-title{display:flex;justify-content:space-between;align-items:center;padding:15px 20px 10px;font-size:.92rem;font-weight:800;color:#f8fafc}
.b4j-guide .b4j-ui-close{font-size:1.65rem;line-height:1;color:#f8fafc}
.b4j-guide .b4j-ui-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 24px 18px}
.b4j-guide .b4j-ui-panel{padding:19px;border:1px solid rgba(148,163,184,.32);border-radius:12px;background:#30343a}
.b4j-guide .b4j-ui-kicker{margin:0 0 14px;color:#60a5fa;font-size:.86rem;font-weight:800;letter-spacing:.03em}
.b4j-guide .b4j-ui-row{display:grid;grid-template-columns:128px 1fr;gap:10px;align-items:center;margin:9px 0}
.b4j-guide .b4j-ui-label{font-size:.8rem;color:#d1d5db}
.b4j-guide .b4j-ui-hint{display:block;color:#a3a3a3;font-size:.72rem;font-weight:700;margin-bottom:4px}
.b4j-guide .b4j-ui-input{min-height:36px;display:flex;align-items:center;padding:8px 11px;border-radius:9px;background:#202536;color:#f3f4f6;font-size:.78rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.b4j-guide .b4j-ui-input.multiline{min-height:92px;align-items:flex-start;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.b4j-guide .b4j-ui-status{margin-top:18px;line-height:1.6;font-size:.78rem;color:#e5e7eb}
.b4j-guide .b4j-ui-ok{color:#86efac;font-weight:800}
.b4j-guide .b4j-ui-warn{color:#fbbf24}
.b4j-guide .b4j-ui-tool{display:grid;grid-template-columns:1fr 126px;gap:8px;align-items:center;margin:8px 0}
.b4j-guide .b4j-ui-btn{display:inline-grid;place-items:center;min-height:34px;padding:7px 12px;border:1px solid #334155;border-radius:7px;background:#2b3037;color:#e5e7eb;font-size:.74rem}
.b4j-guide .b4j-ui-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:6px 24px 22px}
.b4j-guide .b4j-ui-loaded{color:#86efac;font-weight:800;font-size:.78rem}
.b4j-guide .b4j-ui-actions{display:flex;gap:12px}
.b4j-guide .b4j-ui-btn.secondary{min-width:166px;background:transparent}
.b4j-guide .b4j-ui-btn.primary{min-width:176px;background:#2856d9;border-color:#2856d9;color:#fff}
.b4j-guide .b4j-ui-note{padding:0 24px 18px;color:#94a3b8;font-size:.82rem;line-height:1.6}
@media(max-width:900px){
  .b4j-guide .b4j-ui-body{grid-template-columns:1fr}
}
@media(max-width:680px){
  .b4j-guide .b4j-ui-body{padding:10px 12px 14px}
  .b4j-guide .b4j-ui-panel{padding:15px}
  .b4j-guide .b4j-ui-row{grid-template-columns:1fr}
  .b4j-guide .b4j-ui-tool{grid-template-columns:1fr}
  .b4j-guide .b4j-ui-footer{padding:4px 12px 16px;align-items:flex-start;flex-direction:column}
  .b4j-guide .b4j-ui-actions{width:100%;flex-direction:column}
  .b4j-guide .b4j-ui-btn.secondary,.b4j-guide .b4j-ui-btn.primary{width:100%}
}