:root{--bf-bg:#0b1220;--bf-panel:#111b2e;--bf-panel2:#0e1829;--bf-line:#2e425f;--bf-text:#e8f1ff;--bf-muted:#9db0c8;--bf-blue:#5ba6ff;--bf-green:#55e6a5;--bf-red:#ff6b78;--bf-orange:#ffbd66}
*{box-sizing:border-box}body{margin:0;background:var(--bf-bg);color:var(--bf-text);font-family:Meiryo,"Yu Gothic",sans-serif;font-size:14px}
.bf-page{width:min(1400px,calc(100% - 28px));margin:18px auto 40px}.bf-header,.bf-section{border:1px solid var(--bf-line);background:var(--bf-panel);border-radius:12px;padding:18px;margin-bottom:14px}
.bf-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}.bf-header h1{margin:0 0 7px;font-size:25px}.bf-header p{margin:0;color:var(--bf-muted)}
.bf-actions{display:flex;gap:8px;flex-wrap:wrap}.bf-btn{border:1px solid #476789;background:#16243a;color:var(--bf-text);padding:8px 12px;border-radius:7px;font-weight:700;cursor:pointer;text-decoration:none}.bf-btn:hover{border-color:var(--bf-blue)}.bf-btn.ok{border-color:#1e8d59;background:#103527}.bf-btn.danger{border-color:#85404a;background:#35151c}
.bf-status-badges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.bf-badge{font-size:12px;border:1px solid var(--bf-line);border-radius:999px;padding:5px 9px}.bf-badge.dev{color:#ffe0a3;border-color:#735d30}.bf-badge.num{color:#cfe5ff}
h2{font-size:18px;margin:0 0 13px}h3{font-size:15px;margin:0 0 10px}.bf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.dep{border:1px solid var(--bf-line);border-radius:9px;padding:12px;background:var(--bf-panel2)}.dep strong{display:block;margin-bottom:5px}.dep small{color:var(--bf-muted)}
.bf-two{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(420px,1.45fr);gap:14px}.panel{border:1px solid var(--bf-line);border-radius:10px;padding:14px;background:var(--bf-panel2)}
.field{display:grid;grid-template-columns:145px 1fr;gap:9px;align-items:center;margin:9px 0}.field label{font-weight:700}.field select,.field input[type=text]{width:100%;background:#0a1322;border:1px solid #405674;color:var(--bf-text);padding:8px 9px;border-radius:6px}
.color-field{display:grid;grid-template-columns:145px 1fr;gap:9px;align-items:center;margin:9px 0}.color-trigger{display:flex;align-items:center;gap:9px;width:100%;border:1px solid #405674;background:#0a1322;color:var(--bf-text);padding:7px 9px;border-radius:6px;cursor:pointer}.color-swatch{width:28px;height:22px;border-radius:5px;border:1px solid #68809e;flex:none}.color-value{font-family:Consolas,monospace}
.demo-note{border-left:3px solid var(--bf-orange);padding:9px 10px;background:#241d11;color:#f3d9a2;font-size:12px;line-height:1.55;margin:10px 0}
.preview-stage{min-height:290px;display:grid;place-items:center;border:1px dashed #45607d;border-radius:10px;background:#0b1525;overflow:hidden;padding:24px}.preview-text-card{min-width:330px;max-width:80%;padding:36px 28px;border:1px solid #426388;border-radius:12px;text-align:center;font-size:26px;font-weight:800;transform-origin:center}
.preview-meta{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preview-meta div{border:1px solid var(--bf-line);border-radius:7px;padding:8px}.preview-meta span{display:block;color:var(--bf-muted);font-size:11px}.preview-meta b{font-size:12px}
.html-sample{border:1px solid var(--bf-line);border-radius:8px;background:#08111f;padding:12px;overflow:auto}.html-sample code{white-space:pre;color:#d6e7ff;font-family:Consolas,monospace}
.effect-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.effect-item{border:1px solid var(--bf-line);border-radius:8px;padding:10px;background:#0c1728}.effect-item b{display:block}.effect-item small{color:var(--bf-muted)}
.connection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.connection-card{border:1px solid var(--bf-line);border-radius:9px;padding:12px;background:#0b1525}.joint-stage{position:relative;height:135px;border:1px dashed #405b78;border-radius:8px;overflow:hidden}.joint-stage svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}.joint-node{position:absolute;z-index:2;top:43px;width:145px;padding:9px;border:1px solid #42678e;background:#10233a;border-radius:8px;text-align:center}.joint-node.left{left:12px}.joint-node.right{right:12px}.joint-node.missing{border-style:dashed;color:#ffabb3}.joint-diagnostic{margin-top:8px;font-size:12px;color:var(--bf-muted)}
.security-actions,.delivery-actions,.qa-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.result-box{border:1px solid var(--bf-line);border-radius:8px;padding:10px;background:#07101c;min-height:72px;white-space:pre-wrap;font-family:Consolas,monospace;font-size:12px}
.qa-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.qa-summary div{border:1px solid var(--bf-line);padding:9px;border-radius:8px}.qa-summary span{display:block;color:var(--bf-muted);font-size:11px}.qa-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.qa-row{border:1px solid var(--bf-line);border-radius:7px;padding:9px;display:flex;gap:8px}.qa-row.pass strong{color:var(--bf-green)}.qa-row.fail{border-color:#733642;background:#2b1016}.qa-row.fail strong{color:var(--bf-red)}
.completion{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.completion-status{font-weight:800}
.bone-effect-active{will-change:opacity,filter,color,text-shadow,transform,animation}.bone-effect--shake{transform-origin:center}
@keyframes bone-effect-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(var(--bone-effect-shake-neg-full,-7px))}40%{transform:translateX(var(--bone-effect-shake-pos-full,7px))}60%{transform:translateX(var(--bone-effect-shake-neg-soft,-5px))}80%{transform:translateX(var(--bone-effect-shake-pos-soft,5px))}}
.guide-mask{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:9998;display:none}.guide-mask.open{display:block}.guide-dialog{position:fixed;z-index:9999;inset:5vh 6vw;background:#0e1d30;border:1px solid #47709a;border-radius:12px;display:none;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr auto;overflow:hidden}.guide-dialog.open{display:grid}.guide-head{grid-column:1/3;padding:13px 16px;border-bottom:1px solid var(--bf-line);display:flex;justify-content:space-between}.guide-nav{border-right:1px solid var(--bf-line);padding:10px;overflow:auto}.guide-nav a{display:block;color:#bfe0ff;text-decoration:none;padding:7px}.guide-body{padding:16px 22px;overflow:auto;line-height:1.75}.guide-body h2{margin-top:20px;color:#8cc5ff}.guide-body pre{background:#06101d;border:1px solid #314966;border-radius:7px;padding:11px;overflow:auto}.guide-foot{grid-column:1/3;padding:10px 16px;border-top:1px solid var(--bf-line);color:var(--bf-muted);font-size:12px}
@media(max-width:900px){.bf-two,.connection-grid{grid-template-columns:1fr}.effect-list{grid-template-columns:1fr 1fr}.guide-dialog{inset:2vh 2vw;grid-template-columns:1fr}.guide-nav{display:none}.guide-head,.guide-foot{grid-column:1}.qa-results{grid-template-columns:1fr}.field,.color-field{grid-template-columns:1fr}.qa-summary{grid-template-columns:1fr 1fr}}

.effect-settings-card{margin:10px 0;border:1px solid var(--bf-line);border-radius:8px;padding:10px;background:#091426}
.effect-setting-group{margin:0}.effect-setting-group[hidden]{display:none}.effect-setting-group h3{color:#9dccff;margin:0 0 8px}
.effect-setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.effect-setting-grid .field{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;align-items:start;min-width:0}
.effect-setting-grid .field label{min-width:0}.field input[type=number]{display:block;width:100%;min-width:0;box-sizing:border-box;background:#0a1322;border:1px solid #405674;color:var(--bf-text);padding:8px 9px;border-radius:6px}
.field small{display:block;color:var(--bf-muted);font-size:11px;margin-top:0;min-width:0}
@media(max-width:720px){.effect-setting-grid{grid-template-columns:1fr}}


/* v1.0.17 formal page reconstruction */
.section-note{color:var(--bf-muted);line-height:1.65;margin:0 0 12px}
.property-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--bf-line);border-radius:8px;padding:8px 10px;margin-bottom:10px;background:#081321}.property-language-actions{display:flex;gap:6px}.property-language-actions .bf-btn{padding:5px 9px;font-size:12px}.property-language-actions .bf-btn.is-active{border-color:#55aaff;background:#18395a;color:#fff}
.joint-stage{overflow:visible}.joint-stage .joint-base,.joint-stage .joint-overlay{position:absolute;inset:0;width:100%;height:100%}.joint-stage .joint-base{z-index:1}.joint-stage .joint-node{z-index:2}.joint-stage .joint-overlay{z-index:3;pointer-events:none}.joint-break-marker{fill:#ffd66f;font-weight:900;font-size:20px;paint-order:stroke;stroke:#0b1525;stroke-width:4px;stroke-linejoin:round}.joint-diagnostic>div{display:grid;grid-template-columns:145px minmax(0,1fr);gap:8px}.joint-diagnostic strong{color:#cfe2fa;overflow-wrap:anywhere}.effect-joint-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:var(--bf-muted);font-size:12px}.effect-joint-legend span{display:flex;align-items:center;gap:6px}.legend-line{display:inline-block;width:34px;height:4px;border-radius:4px;background:#2d799e}.legend-line.is-mismatch{background:#f5a623}.legend-line.is-error{background:#8f3544}.legend-line.is-disconnected{height:0;border-top:3px dashed #ffd66f;background:none}.legend-line.is-reconnect{background:#7055a0;box-shadow:0 0 7px #c6a7ff}
.bf-security-node--effect strong{font-size:13px}.bf-security-stage>.bf-svg,.bf-delivery-stage>.bf-svg{z-index:1}.bf-security-stage>.bf-security-node,.bf-delivery-stage>.bf-delivery-node{z-index:2}.bf-security-stage>.bf-delivery-overlay,.bf-delivery-stage>.bf-delivery-overlay{z-index:3!important;pointer-events:none}.bf-security-result{margin-top:10px;border:1px solid var(--bf-line);border-radius:8px;padding:9px;background:#08111e}.bf-target-log{min-height:76px}.bf-visual-status{margin-top:8px;color:var(--bf-muted);font-size:12px}.bf-delivery-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.bone-label-test-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.bone-label-overall-summary{margin:10px 0 14px}.bone-label-overall-summary .bf-overall{font-weight:900;font-size:18px}.qa-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}.qa-row small{color:var(--bf-muted);font-family:Consolas,monospace}.bf-completion-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bf-completion-actions span{color:var(--bf-muted)}
@media(max-width:760px){.property-toolbar{align-items:flex-start;flex-direction:column}.joint-diagnostic>div{grid-template-columns:1fr}.qa-row{grid-template-columns:auto minmax(0,1fr)}.qa-row small{grid-column:2}}