.csp-wrap{display:flex;flex-direction:column;gap:.75rem;flex:1;min-width:0;min-height:0}.csp-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:1rem;flex:1;min-width:0;min-height:0}.csp-rail{overflow:hidden}.csp-actions,.csp-action,.csp-field-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.csp-actions{gap:.65rem}#csp-status{min-height:2.8em;margin:0}.csp-settings{display:flex;flex-direction:column;gap:.75rem}.csp-editor-area{flex:1 1 0;min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:.65rem}.csp-hash-head{display:flex;align-items:flex-start;gap:.4rem;flex:none}.csp-hash-head .csp-section{flex:1;min-width:0}.csp-result{display:flex;flex-direction:column;gap:.75rem;min-width:0;min-height:0}.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-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}.csp-add-field{flex:1 1 140px}.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:minmax(0,1fr);flex:none;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);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:.35rem;flex-direction:column;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{display:flex;flex-direction:column;gap:.6rem;flex:1;min-width:0;min-height:0}.csp-output-panel{flex:1;min-width:0;min-height:0;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%;overflow:auto;flex:1 1 0;min-height:120px}.csp-validation{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem;max-height:12rem;overflow:auto;flex:none}.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:860px){.csp-body{display:flex;flex-direction:column;flex:none}.csp-rail{overflow:visible}.csp-editor-area{flex:none;overflow:visible}.csp-directive-grid{max-height:16rem;overflow:auto}.csp-result[data-empty=true]{display:none}.csp-output,.csp-output-panel{flex:none}.csp-output-pre{flex:none;height:22rem}}@media(max-width:640px){.csp-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}.csp-rail{gap:.6rem}.csp-actions button,.csp-select,.csp-source-input,#csp-hash-input,#csp-hash-add,#csp-hash-copy{min-height:44px}.csp-mode-toggle{flex-wrap:wrap}.csp-mode-btn,.csp-tab,.csp-directive-remove,.csp-source-add-btn,.csp-keyword-chip,.csp-section-summary,.csp-flag{min-height:24px;min-width:24px}.csp-directive-grid{max-height:9rem}.csp-hash-actions{margin-left:0;width:100%}.csp-hash-actions .btn-primary{width:100%}.csp-output-pre{height:20rem;font-size:.78rem}.csp-source-remove{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px}}