.csp-wrap{display:flex;flex-direction:column;gap:1rem}.csp-toolbar,.csp-section,.csp-output{background:var(--color-bg-secondary);border-radius:var(--radius-md);padding:.95rem 1rem;box-shadow:inset 0 0 0 1px var(--color-border-soft)}.csp-toolbar-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.csp-toolbar-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}.csp-toolbar-actions{margin-left:auto}.csp-add-field{flex:1 1 220px}.csp-select{padding:.5rem .75rem;border-radius:var(--radius-md);border:0;background:var(--color-surface);color:var(--color-text);font-family:var(--font-sans);font-size:.9rem;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),box-shadow var(--transition-fast)}.csp-select:focus{outline:none;box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 4px var(--color-primary-light)}.csp-mode-toggle{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:var(--radius-pill);background:var(--color-surface-muted);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.csp-mode-btn{min-height:32px;padding:.3rem .95rem;border:0;background:transparent;color:var(--color-text-secondary);border-radius:var(--radius-pill);cursor:pointer;font-weight:700;font-size:.82rem;transition:background-color var(--transition-fast),color var(--transition-fast)}.csp-mode-btn.is-active{background:var(--color-surface);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}@media(hover:hover){.csp-mode-btn:hover:not(.is-active){color:var(--color-text)}}.csp-directive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:.85rem}.csp-directive{background:var(--color-surface);border-radius:var(--radius-md);padding:.85rem .9rem;box-shadow:inset 0 0 0 1px var(--color-border-soft);display:flex;flex-direction:column;gap:.55rem}.csp-directive-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.csp-directive-name{font-family:var(--font-mono);font-size:.92rem;font-weight:700;color:var(--color-primary);word-break:break-all}.csp-directive-remove{background:transparent;border:0;color:var(--color-text-muted);cursor:pointer;padding:.2rem .45rem;border-radius:var(--radius-sm);font-size:.85rem;transition:color var(--transition-fast),background-color var(--transition-fast)}@media(hover:hover){.csp-directive-remove:hover{color:var(--color-danger);background:var(--color-surface-muted)}}.csp-source-list{display:flex;flex-wrap:wrap;gap:.4rem}.csp-source-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border-radius:var(--radius-pill);background:var(--color-surface-muted);box-shadow:inset 0 0 0 1px var(--color-border-soft);font-family:var(--font-mono);font-size:.78rem;color:var(--color-text);max-width:100%}.csp-source-tag-text{overflow-wrap:anywhere}.csp-source-tag.is-keyword{color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent);background:var(--color-primary-light)}.csp-source-tag.is-hash,.csp-source-tag.is-nonce{color:var(--color-accent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-accent) 45%,transparent)}.csp-source-remove{background:transparent;border:0;color:inherit;cursor:pointer;font-size:.85rem;padding:0;line-height:1;opacity:.65}@media(hover:hover){.csp-source-remove:hover{opacity:1}}.csp-source-add-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.csp-source-input{flex:1 1 140px;min-width:0;min-height:32px;padding:.32rem .6rem;border:0;border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text);font-family:var(--font-mono);font-size:.8rem;box-shadow:inset 0 0 0 1px var(--color-border-soft)}.csp-source-input:focus{outline:none;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 4px var(--color-primary-light)}.csp-source-add-btn{min-height:32px;padding:.25rem .7rem;font-size:.78rem;border:0;background:var(--color-surface-muted);color:var(--color-text-secondary);border-radius:var(--radius-pill);cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-border-soft);font-weight:700;white-space:nowrap;transition:background-color var(--transition-fast),color var(--transition-fast)}@media(hover:hover){.csp-source-add-btn:hover{color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}}.csp-keyword-pool{display:flex;flex-wrap:wrap;gap:.3rem}.csp-keyword-chip{background:transparent;border:0;padding:.2rem .55rem;font-family:var(--font-mono);font-size:.74rem;color:var(--color-text-muted);border-radius:var(--radius-pill);cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}@media(hover:hover){.csp-keyword-chip:hover:not(:disabled){color:var(--color-primary);background:var(--color-primary-light);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}}.csp-keyword-chip:disabled{opacity:.4;cursor:not-allowed}.csp-pool-row{display:flex;flex-direction:column;gap:.35rem}.csp-pool-label{font-size:.72rem;color:var(--color-text-muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}.csp-add-row{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}.csp-flag-row{display:flex;flex-wrap:wrap;gap:.85rem 1.4rem;padding:.4rem .2rem 0;font-size:.85rem}.csp-flag{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;color:var(--color-text-secondary);font-family:var(--font-mono)}.csp-section-summary{cursor:pointer;list-style:none;font-weight:700;color:var(--color-text);display:flex;align-items:center;gap:.5rem}.csp-section-summary::-webkit-details-marker{display:none}.csp-section-summary:after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--transition-fast)}details[open]>.csp-section-summary:after{transform:rotate(45deg)}.csp-section-body{display:flex;flex-direction:column;gap:.65rem;padding-top:.7rem}.csp-hash-controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}.csp-hash-actions{margin-left:auto}.csp-hash-output{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;background:var(--color-bg-secondary);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-border-soft);flex-wrap:wrap}.csp-hash-value{flex:1;font-family:var(--font-mono);font-size:.8rem;color:var(--color-text);word-break:break-all;min-width:0}.csp-tab-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}.csp-tab{min-height:32px;padding:.3rem .85rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-text-secondary);font-weight:700;font-size:.8rem;cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast)}@media(hover:hover){.csp-tab:hover:not(.is-active){color:var(--color-text)}}.csp-tab.is-active{background:var(--color-primary-light);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}.csp-output-panel{display:flex;flex-direction:column;gap:.5rem}.csp-output-pre{margin:0;padding:.85rem .95rem;background:var(--color-surface);color:var(--color-text);font-family:var(--font-mono);font-size:.85rem;line-height:1.55;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--color-border-soft);white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}.csp-validation{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.csp-validation-item{padding:.5rem .7rem;border-radius:var(--radius-md);font-size:.85rem;box-shadow:inset 0 0 0 1px var(--color-border-soft);background:var(--color-bg-secondary)}.csp-validation-item.is-warn{color:var(--color-danger);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-danger) 45%,transparent);background:color-mix(in oklch,var(--color-danger) 8%,var(--color-bg-secondary))}.csp-validation-item.is-info{color:var(--color-text-secondary)}@media(max-width:540px){.csp-toolbar-row{gap:.7rem}.csp-toolbar-actions{margin-left:0;width:100%}.csp-toolbar-actions .btn-secondary{width:100%}.csp-mode-toggle{width:100%;justify-content:stretch}.csp-mode-btn{flex:1}.csp-hash-actions{margin-left:0;width:100%}.csp-hash-actions .btn-primary{width:100%}}@media(max-width:640px){.csp-source-remove{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}}