.tool-hero{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-bottom:1rem;}
.hero-text{flex:1;min-width:260px;}
.hero-text h1{font-size:40px;font-weight:700;line-height:1.2;margin-bottom:0;}
.hero-subtitle{font-size:18px;color:var(--text-muted);max-width:760px;margin-bottom:1rem;margin-top:0;}
@media (max-width:767px){.hero-text h1{font-size:clamp(1.75rem,5vw,2.5rem);}.hero-subtitle{font-size:clamp(1rem,3vw,1.125rem);}}
.cppbf-section{margin-bottom:2rem;}
.cppbf-card{background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);overflow:hidden;}
.cppbf-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--surface-muted,rgba(0,0,0,.03));border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
.cppbf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.cppbf-actions-end{margin-left:auto;}
.cppbf-btn{border-radius:8px;font-size:0.9rem;font-weight:500;padding:10px 18px;border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent;}
.cppbf-btn-format{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.cppbf-btn-format:hover{background:var(--primary-dark,#1d4ed8);border-color:var(--primary-dark,#1d4ed8);box-shadow:0 4px 12px rgba(37,99,235,.25);}
.cppbf-btn-ghost{background:transparent;color:var(--text-main,#111);border-color:var(--border,rgba(0,0,0,.12));}
.cppbf-btn-ghost:hover{background:var(--surface-muted,rgba(0,0,0,.05));border-color:var(--border,rgba(0,0,0,.2));}
.cppbf-btn-outline{background:var(--surface,#fff);color:var(--primary,#2563eb);border-color:var(--primary,#2563eb);}
.cppbf-btn-outline:hover{background:rgba(37,99,235,.08);color:var(--primary-dark,#1d4ed8);}
.cppbf-btn-outline.copied{background:rgba(34,197,94,.1);color:#15803d;border-color:#22c55e;}
.cppbf-notice{display:none;font-size:0.875rem;padding:10px 16px;margin:0 16px 12px;border-radius:8px;}
.cppbf-notice.is-visible{display:block;}
.cppbf-notice.is-error{background:#fef2f2;color:#b91c1c;}
.cppbf-notice.is-success{background:#f0fdf4;color:#166534;}
.cppbf-panels{display:flex;flex-direction:column;}
.cppbf-panel{display:flex;flex-direction:column;border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
.cppbf-panel:last-child{border-bottom:none;}
.cppbf-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 16px;background:var(--surface-muted,rgba(0,0,0,.02));}
.cppbf-panel-title{font-weight:600;font-size:0.95rem;color:var(--text-main,#111);}
.cppbf-panel-hint{font-size:0.8rem;color:var(--text-muted,#6b7280);}
.cppbf-editor{min-height:320px;width:100%;}
@media (min-width:768px){.cppbf-toolbar{padding:14px 20px;}
.cppbf-notice{margin:0 20px 14px;}
.cppbf-panel-head{padding:12px 20px;}
.cppbf-editor{min-height:480px;}
.cppbf-panels{display:grid;grid-template-columns:1fr 1fr;}
.cppbf-panel{border-bottom:none;border-right:1px solid var(--border,rgba(0,0,0,.08));}
.cppbf-panel:last-child{border-right:none;}
}
@media (max-width:479px){.cppbf-toolbar{flex-direction:column;align-items:stretch;}
.cppbf-actions-end{margin-left:0;}
.cppbf-btn{flex:1;min-width:0;}
.cppbf-editor{min-height:280px;}
}