.bmc-yaml{--surface:#ffffff;--surface-muted:#f4f6fb;--border:#e2e8f0;--text-main:#0f172a;--text-muted:#64748b;--primary:#2563eb;--primary-dark:#1d4ed8;}
.ypp-workspace{background:var(--surface);border-radius:12px;border:1px solid var(--border);overflow:hidden;margin-bottom:2rem;}
.ypp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-muted);}
.ypp-actions-primary{display:flex;align-items:center;gap:8px;}
.ypp-actions-secondary{display:flex;align-items:center;gap:8px;margin-left:auto;}
@media (max-width:639px){.ypp-actions{flex-direction:column;align-items:stretch;}.ypp-actions-secondary{margin-left:0;}}
.ypp-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:0.875rem;font-weight:500;line-height:1.4;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:background 0.15s ease,border-color 0.15s ease;}
.ypp-btn-format{background:var(--primary);color:#fff;border-color:var(--primary);}
.ypp-btn-format:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.ypp-btn-outline{background:transparent;color:var(--text-main);border-color:var(--border);}
.ypp-btn-outline:hover{background:var(--surface-muted);border-color:var(--text-muted);}
.ypp-btn-ghost{background:transparent;border-color:transparent;}
.ypp-btn-ghost:hover{background:var(--surface-muted);}
.ypp-btn-sm{padding:6px 12px;font-size:0.8125rem;}
.ypp-options-wrap{margin:0;border-bottom:1px solid var(--border);}
.ypp-options-summary{padding:10px 16px;font-size:0.875rem;font-weight:500;color:var(--text-main);cursor:pointer;list-style:none;user-select:none;}
.ypp-options-summary::-webkit-details-marker{display:none;}
.ypp-options-summary::before{content:'';display:inline-block;width:0;height:0;margin-right:8px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;vertical-align:middle;}
details[open] .ypp-options-summary::before{border-top:none;border-bottom:6px solid currentColor;}
.ypp-options{display:flex;flex-wrap:wrap;gap:16px 24px;padding:12px 16px 16px;background:var(--surface);}
.ypp-option{display:flex;flex-direction:column;gap:4px;}
.ypp-option label{font-size:0.75rem;font-weight:500;color:var(--text-muted);margin:0;}
.ypp-select{padding:6px 10px;font-size:0.875rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-main);min-width:100px;}
.ypp-option-check{justify-content:flex-end;}
.ypp-check{display:inline-flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--text-main);cursor:pointer;margin:0;}
.ypp-check input{width:1rem;height:1rem;accent-color:var(--primary);}
.ypp-panels{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:320px;}
@media (max-width:767px){.ypp-panels{grid-template-columns:1fr;min-height:auto;}}
.ypp-panel{display:flex;flex-direction:column;border-bottom:1px solid var(--border);}
.ypp-panel:last-child{border-bottom:none;}
@media (min-width:768px){.ypp-panel{border-bottom:none;border-right:1px solid var(--border);}.ypp-panel:last-child{border-right:none;}}
.ypp-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--surface-muted);border-bottom:1px solid var(--border);}
.ypp-panel-title{font-size:0.8125rem;font-weight:600;color:var(--text-muted);}
.ypp-editor-box{flex:1;min-height:380px;}
@media (max-width:767px){.ypp-editor-box{min-height:340px;}}
.ypp-editor{width:100%;height:100%;min-height:380px;}
@media (max-width:767px){.ypp-editor{min-height:340px;}}
.ypp-editor-readonly{background:var(--surface-muted);}
.ypp-stats{padding:8px 16px;font-size:0.75rem;color:var(--text-muted);background:var(--surface-muted);border-top:1px solid var(--border);}
.ypp-stats-text{white-space:normal;}
.ypp-content{margin-bottom:2rem;}
.ypp-content-title{font-size:1.25rem;font-weight:600;margin:0 0 0.75rem;color:var(--text-main);}
.ypp-content p{margin:0 0 1rem;font-size:1rem;line-height:1.6;color:var(--text-main);}
.ypp-related{margin:0;padding-left:1.25rem;}
.ypp-related li{margin-bottom:0.5rem;}
.ypp-related a{color:var(--primary);text-decoration:none;}
.ypp-related a:hover{text-decoration:underline;}