.cp-workspace{gap:var(--space-4);width:100%;margin-bottom:var(--space-8);flex-direction:column;display:flex}.cp-features-grid{gap:var(--space-4);margin-top:var(--space-6);text-align:left;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.cp-feature-item{background:var(--color-surface-subtle);padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--color-border)}.cp-feature-title{font-weight:600;font-size:var(--text-sm);color:var(--color-text);margin-bottom:var(--space-1);align-items:center;gap:6px;display:flex}.cp-feature-desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45}.cp-workspace-grid{gap:var(--space-6);grid-template-columns:360px minmax(0,1fr);align-items:start;display:grid}.cp-controls-pane{gap:var(--space-4);flex-direction:column;display:flex}.cp-doc-bar{padding:var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-wrap:wrap;display:flex}.cp-doc-title{font-size:var(--text-sm);color:var(--color-text);text-overflow:ellipsis;white-space:nowrap;max-width:240px;font-weight:600;display:block;overflow:hidden}.cp-doc-meta{font-size:var(--text-xs);color:var(--color-text-muted)}.cp-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}.cp-section-title{margin-bottom:var(--space-3);color:var(--color-text);font-weight:600}.cp-row-2col{gap:var(--space-3);margin-bottom:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.cp-field-label{font-size:var(--text-xs);color:var(--color-text);margin-bottom:4px;font-weight:500;display:block}.cp-field-error{color:var(--color-danger);font-size:var(--text-xs);margin-top:var(--space-1)}.cp-presets-wrap{gap:var(--space-1);flex-wrap:wrap;margin-top:4px;display:flex}.cp-compass-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);max-width:320px;margin:0 auto;display:grid}.cp-compass-input{text-align:center;width:100px;font-size:var(--text-xs);font-variant-numeric:tabular-nums;margin:0 auto}.cp-impact-card{background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}.cp-impact-row{font-size:var(--text-xs);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:6px;display:flex}.cp-advisory-box{padding:var(--space-3);border-radius:var(--radius-sm);color:#92400e;background:#fffbeb;border:1px solid #fef3c7;font-size:11px;line-height:1.45}.cp-success-card{padding:var(--space-3) var(--space-4);background:var(--color-success-bg);border:1px solid var(--color-success-border);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.cp-preview-pane{gap:var(--space-3);flex-direction:column;display:flex}.cp-preview-toolbar{padding:var(--space-2) var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-wrap:wrap;display:flex}.cp-canvas-area{padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:#e2e8f0;justify-content:center;min-height:520px;display:flex;overflow-x:auto}.cp-page-wrap{background:#fff;max-width:100%;display:inline-block;position:relative;box-shadow:0 4px 16px #00000026}.cp-page-canvas{max-width:100%;height:auto;display:block}.cp-rendering-overlay{font-size:var(--text-sm);color:var(--color-brand-strong);background:#ffffffbf;justify-content:center;align-items:center;font-weight:600;display:flex;position:absolute;inset:0}.cp-mask-container{pointer-events:none;position:absolute;inset:0}.cp-active-badge{background:var(--color-brand);color:#fff;pointer-events:none;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600}@media (width<=899px){.cp-workspace-grid{grid-template-columns:1fr}.cp-doc-title{max-width:100%}}@media (width<=480px){.cp-features-grid{grid-template-columns:1fr}.cp-compass-grid{max-width:100%}.cp-row-2col{grid-template-columns:1fr}}@media (width<=360px){.cp-card,.cp-doc-bar{padding:var(--space-2) var(--space-2)!important}}
