:root{--esg-primary:var(--main-primary);--esg-text:#1e293b;--esg-text-secondary:#475569;--esg-text-muted:#64748b;--esg-bg:#fff;--esg-bg-secondary:#f8fafc;--esg-border:#e2e8f0;--esg-border-focus:var(--main-primary);--esg-radius:var(--main-radius);--esg-radius-lg:var(--main-radius-lg);--esg-shadow:var(--main-shadow-sm)}._esg-container{gap:var(--main-space-6);padding-left:var(--main-space-4);padding-right:var(--main-space-4);grid-template-columns:1fr 1fr;align-items:start;display:grid}@media (max-width:1024px){._esg-container{grid-template-columns:1fr}}@media (max-width:768px){._esg-container{padding-left:1rem;padding-right:1rem}}._esg-form-panel{gap:var(--main-space-4);flex-direction:column;display:flex}._esg-section{background:var(--esg-bg);border-radius:var(--esg-radius-lg);padding:var(--main-space-5);box-shadow:var(--esg-shadow);border-style:solid;border-width:1px;border-color:var(--esg-border)}._esg-section-header{align-items:center;gap:var(--main-space-2);margin-bottom:var(--main-space-4);font-weight:600;font-size:var(--main-text-sm);color:var(--esg-text);display:flex}._esg-section-header svg{width:16px;height:16px;color:var(--esg-primary);flex-shrink:0}._esg-style-row{justify-content:space-between;align-items:center;gap:var(--main-space-3);flex-wrap:wrap;display:flex}._esg-templates{gap:var(--main-space-2);flex-wrap:wrap;display:flex}._esg-template-btn{border-radius:var(--esg-radius);border-style:solid;border-width:1px;border-color:var(--esg-border);background:var(--esg-bg);color:var(--esg-text-secondary);font-size:var(--main-text-xs);cursor:pointer;padding:.375rem .75rem;font-weight:500;transition:border-color .15s,color .15s,background .15s}._esg-template-btn:hover{border-color:var(--esg-primary);color:var(--esg-primary)}._esg-template-btn--active{background:var(--esg-primary);border-color:var(--esg-primary);color:#fff}._esg-template-btn--active:hover{opacity:.9}._esg-color-picker{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-xs);color:var(--esg-text-muted);display:flex}._esg-color-picker input[type=color]{border-radius:var(--esg-radius);cursor:pointer;background:0 0;border:none;width:32px;height:32px;padding:0}._esg-color-picker input[type=color]::-webkit-color-swatch-wrapper{padding:2px}._esg-color-picker input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}._esg-form-grid{gap:var(--main-space-3);grid-template-columns:1fr 1fr;display:grid}._esg-field{flex-direction:column;gap:.25rem;display:flex}._esg-field--full{grid-column:1/-1}._esg-field label{font-size:var(--main-text-xs);color:var(--esg-text-muted);font-weight:500}._esg-field input{border-radius:var(--esg-radius);border-style:solid;border-width:1.5px;border-color:var(--esg-border);background:var(--esg-bg);color:var(--esg-text);font-family:inherit;font-size:var(--main-text-sm);outline:none;padding:.5rem .75rem;transition:border-color .15s,box-shadow .15s}._esg-field input::placeholder{color:var(--esg-text-muted);opacity:.6}._esg-field input:focus{border-color:var(--esg-border-focus);box-shadow:0 0 0 3px #6366f11a}@media (max-width:480px){._esg-form-grid{grid-template-columns:1fr}}._esg-form-actions{justify-content:flex-end;display:flex}._esg-btn{align-items:center;gap:var(--main-space-2);border-radius:var(--esg-radius);font-size:var(--main-text-sm);cursor:pointer;border:none;padding:.5rem 1rem;font-weight:500;transition:opacity .15s,box-shadow .15s,background .15s;display:inline-flex}._esg-btn svg{flex-shrink:0;width:14px;height:14px}._esg-btn--primary{background:var(--esg-primary);color:#fff;box-shadow:0 2px 8px #6366f140}._esg-btn--primary:hover{opacity:.9}._esg-btn--secondary{background:var(--esg-bg);color:var(--esg-text-secondary);border-style:solid;border-width:1px;border-color:var(--esg-border)}._esg-btn--secondary:hover{background:var(--esg-bg-secondary)}._esg-btn--ghost{color:var(--esg-text-muted);font-size:var(--main-text-xs);background:0 0;padding:.25rem .5rem}._esg-btn--ghost:hover{color:var(--esg-primary)}._esg-preview-panel{gap:var(--main-space-4);top:var(--main-space-4);flex-direction:column;display:flex;position:sticky}._esg-preview-card{background:var(--esg-bg);border-radius:var(--esg-radius-lg);box-shadow:var(--esg-shadow);border-style:solid;border-width:1px;border-color:var(--esg-border);overflow:hidden}._esg-preview-header{padding:var(--main-space-3) var(--main-space-5);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--esg-border);background:var(--esg-bg-secondary);justify-content:space-between;align-items:center;display:flex}._esg-preview-title{font-size:var(--main-text-sm);color:var(--esg-text);font-weight:600}._esg-preview-body{padding:var(--main-space-6);align-items:flex-start;min-height:180px;display:flex}._esg-preview-placeholder{justify-content:center;align-items:center;gap:var(--main-space-3);width:100%;min-height:160px;color:var(--esg-text-muted);flex-direction:column;display:flex}._esg-preview-placeholder svg{opacity:.4;width:32px;height:32px}._esg-preview-placeholder p{font-size:var(--main-text-sm);text-align:center;margin:0}@media (max-width:1024px){._esg-preview-panel{position:static}}._esg-output-actions{align-items:center;gap:var(--main-space-3);display:flex}._esg-output-actions ._esg-btn--primary,._esg-output-actions ._esg-btn--secondary{flex:1;justify-content:center}._esg-html-output{background:var(--esg-bg);border-radius:var(--esg-radius-lg);box-shadow:var(--esg-shadow);border-style:solid;border-width:1px;border-color:var(--esg-border);overflow:hidden}._esg-code-block{padding:var(--main-space-4);font-family:var(--main-font-mono);font-size:var(--main-text-xs);color:var(--esg-text-secondary);white-space:pre-wrap;word-break:break-all;max-height:300px;margin:0;line-height:1.6;overflow-x:auto}