/* Prompt Cleaner — styles are scoped to this tool and its modal. */
#page-prompt-cleaner {
    --cleaner-accent: #14b8a6;
    --cleaner-success: #34d399;
    --cleaner-surface: rgba(15, 23, 42, 0.78);
    --cleaner-surface-strong: rgba(15, 23, 42, 0.96);
    --cleaner-border: rgba(148, 163, 184, 0.16);
    height: 100%; overflow: auto; color: var(--text-primary);
}
#page-prompt-cleaner .cleaner-shell {
    min-height: 100%; display: grid; grid-template-rows: auto minmax(430px, 1fr) auto;
    gap: 16px; padding: 20px; box-sizing: border-box;
    background: radial-gradient(circle at 8% 0%, rgba(20,184,166,.09), transparent 30%), radial-gradient(circle at 96% 100%, rgba(59,130,246,.07), transparent 34%);
}
#page-prompt-cleaner .cleaner-hero,
#cleaner-builder-modal .cleaner-builder-header,
#cleaner-builder-modal .cleaner-builder-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#page-prompt-cleaner .cleaner-hero {
    padding: 16px 18px; border: 1px solid var(--cleaner-border); border-radius: 16px;
    background: linear-gradient(115deg, rgba(20,184,166,.09), rgba(15,23,42,.62) 38%, rgba(15,23,42,.86));
    box-shadow: 0 12px 32px rgba(2,6,23,.16);
}
#page-prompt-cleaner .cleaner-heading,
#cleaner-builder-modal .cleaner-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
#page-prompt-cleaner .cleaner-mark,
#cleaner-builder-modal .cleaner-mark {
    width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center;
    color: #5eead4; border: 1px solid rgba(45,212,191,.28); border-radius: 14px;
    background: linear-gradient(145deg, rgba(20,184,166,.2), rgba(13,148,136,.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
#page-prompt-cleaner .cleaner-mark svg,
#cleaner-builder-modal .cleaner-mark svg { width: 25px; height: 25px; }
#page-prompt-cleaner .cleaner-eyebrow,
#cleaner-builder-modal .cleaner-eyebrow { margin: 0 0 2px; color: var(--cleaner-accent, #14b8a6); font-size: 10px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
#page-prompt-cleaner .cleaner-heading h1,
#cleaner-builder-modal .cleaner-heading h1 { margin: 0; color: var(--text-primary); font-size: 22px; line-height: 1.2; letter-spacing: -.4px; }
#page-prompt-cleaner .cleaner-heading p:last-child,
#cleaner-builder-modal .cleaner-heading p:last-child { margin: 4px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
#page-prompt-cleaner .cleaner-hero-actions,
#page-prompt-cleaner .cleaner-secondary-actions,
#cleaner-builder-modal .cleaner-builder-footer > div { display: flex; align-items: center; gap: 8px; }
#page-prompt-cleaner .cleaner-pattern-status {
    min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap;
    color: #a7f3d0; border: 1px solid rgba(52,211,153,.28); border-radius: 999px;
    background: rgba(16,185,129,.1); font-size: 11px; font-weight: 750;
}
#page-prompt-cleaner .cleaner-pattern-status::before { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--cleaner-success); box-shadow: 0 0 0 3px rgba(52,211,153,.11); content: ''; }
#page-prompt-cleaner .cleaner-pattern-status.inactive { color: var(--text-muted); border-color: var(--cleaner-border); background: rgba(148,163,184,.05); }
#page-prompt-cleaner .cleaner-pattern-status.inactive::before { background: #64748b; box-shadow: none; }

#page-prompt-cleaner .cleaner-button,
#cleaner-builder-modal .cleaner-button,
#cleaner-builder-modal .cleaner-icon-button {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px;
    color: var(--text-primary); border: 1px solid var(--cleaner-border, rgba(148,163,184,.16)); border-radius: 10px;
    background: rgba(255,255,255,.045); font: 700 12px/1 var(--font-sans); white-space: nowrap; cursor: pointer; touch-action: manipulation;
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
#page-prompt-cleaner .cleaner-button svg,
#cleaner-builder-modal .cleaner-button svg { width: 17px; height: 17px; flex: 0 0 17px; }
#page-prompt-cleaner .cleaner-button:hover,
#cleaner-builder-modal .cleaner-button:hover,
#cleaner-builder-modal .cleaner-icon-button:hover { border-color: rgba(45,212,191,.42); background: rgba(20,184,166,.1); transform: translateY(-1px); }
#page-prompt-cleaner .cleaner-button:active,
#cleaner-builder-modal .cleaner-button:active,
#cleaner-builder-modal .cleaner-icon-button:active { transform: scale(.97); }
#page-prompt-cleaner :is(.cleaner-button,.cleaner-textarea):focus-visible,
#cleaner-builder-modal :is(.cleaner-button,.cleaner-icon-button,.cleaner-input,.cleaner-textarea,.cleaner-token):focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; }
#page-prompt-cleaner .cleaner-button-primary,
#cleaner-builder-modal .cleaner-button-primary { color: #f0fdfa; border-color: rgba(45,212,191,.38); background: linear-gradient(135deg, rgba(13,148,136,.95), rgba(15,118,110,.95)); box-shadow: 0 8px 18px rgba(13,148,136,.14); }
#page-prompt-cleaner .cleaner-button-clean,
#cleaner-builder-modal .cleaner-button-clean { min-width: 154px; color: #ecfdf5; border-color: rgba(52,211,153,.4); background: linear-gradient(135deg,#059669,#0d9488); box-shadow: 0 9px 22px rgba(5,150,105,.16); }
#page-prompt-cleaner .cleaner-button-copy { color: #a7f3d0; border-color: rgba(52,211,153,.35); background: rgba(16,185,129,.11); }
#page-prompt-cleaner .cleaner-danger,
#cleaner-builder-modal .cleaner-danger { color: #fda4af; }
#page-prompt-cleaner .cleaner-danger:hover,
#cleaner-builder-modal .cleaner-danger:hover { color: #fecdd3; border-color: rgba(251,113,133,.38); background: rgba(244,63,94,.09); }

#page-prompt-cleaner .cleaner-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); align-items: stretch; }
#page-prompt-cleaner .cleaner-editor-card {
    min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(240px,1fr) auto; overflow: hidden;
    border: 1px solid var(--cleaner-border); border-radius: 16px; background: linear-gradient(180deg, rgba(30,41,59,.77), var(--cleaner-surface));
    box-shadow: 0 16px 38px rgba(2,6,23,.18);
}
#page-prompt-cleaner .cleaner-editor-output { border-color: rgba(52,211,153,.16); background: linear-gradient(180deg, rgba(16,185,129,.045), var(--cleaner-surface)); }
#page-prompt-cleaner .cleaner-card-header,
#page-prompt-cleaner .cleaner-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
#page-prompt-cleaner .cleaner-card-header { border-bottom: 1px solid var(--cleaner-border); }
#page-prompt-cleaner .cleaner-card-header > div:first-child { display: flex; align-items: center; gap: 9px; }
#page-prompt-cleaner .cleaner-card-header h2 { margin: 0; color: var(--text-primary); font-size: 14px; line-height: 1.2; }
#page-prompt-cleaner .cleaner-step { width: 25px; height: 25px; display: grid; place-items: center; color: #5eead4; border: 1px solid rgba(45,212,191,.25); border-radius: 8px; background: rgba(20,184,166,.08); font-size: 9px; font-weight: 850; }
#page-prompt-cleaner .cleaner-metrics { display: flex; align-items: center; gap: 7px; }
#page-prompt-cleaner .cleaner-count { padding: 5px 8px; color: var(--text-muted); border-radius: 7px; background: rgba(148,163,184,.06); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
#page-prompt-cleaner .cleaner-count-success.is-active { color: #a7f3d0; background: rgba(16,185,129,.1); }
#page-prompt-cleaner .cleaner-textarea,
#cleaner-builder-modal .cleaner-textarea { width: 100%; height: 100%; min-height: 0; box-sizing: border-box; padding: 18px; resize: none; color: var(--text-primary); border: 0; border-radius: 0; outline: 0; background: rgba(2,6,23,.19); font: 14px/1.65 var(--font-mono,monospace); caret-color: #5eead4; }
#page-prompt-cleaner .cleaner-textarea::placeholder,
#cleaner-builder-modal .cleaner-textarea::placeholder,
#cleaner-builder-modal .cleaner-input::placeholder { color: var(--text-muted); }
#page-prompt-cleaner .cleaner-textarea:focus { background: rgba(2,6,23,.28); }
#page-prompt-cleaner .cleaner-card-footer { min-height: 64px; border-top: 1px solid var(--cleaner-border); background: rgba(15,23,42,.32); }
#page-prompt-cleaner .cleaner-output-footer p { margin: 0; color: var(--text-muted); font-size: 11px; }
#page-prompt-cleaner .cleaner-flow-arrow { align-self: center; justify-self: center; width: 30px; height: 30px; display: grid; place-items: center; color: #5eead4; border: 1px solid rgba(45,212,191,.24); border-radius: 50%; background: var(--cleaner-surface-strong); box-shadow: 0 0 0 6px rgba(20,184,166,.035); z-index: 1; }
#page-prompt-cleaner .cleaner-flow-arrow svg { width: 15px; height: 15px; }
#page-prompt-cleaner .cleaner-tip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: 11px; }
#page-prompt-cleaner .cleaner-tip svg { width: 15px; height: 15px; flex: 0 0 15px; color: #2dd4bf; }
#page-prompt-cleaner .cleaner-sr-only,
#cleaner-builder-modal .cleaner-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Pattern builder */
#cleaner-builder-modal { --cleaner-accent: #14b8a6; --cleaner-border: rgba(148,163,184,.17); background: rgba(2,6,23,.68); backdrop-filter: blur(8px); }
#cleaner-builder-modal .cleaner-builder-dialog { width: min(1100px,calc(100vw - 48px)); max-width: 1100px; height: min(720px,calc(100vh - 48px)); max-height: 720px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: 0; overflow: hidden; border-color: rgba(45,212,191,.2); border-radius: 18px; background: #0f172a; box-shadow: 0 32px 90px rgba(2,6,23,.72),0 0 0 1px rgba(255,255,255,.025); }
#cleaner-builder-modal .cleaner-builder-header,
#cleaner-builder-modal .cleaner-builder-footer { padding: 18px 22px; }
#cleaner-builder-modal .cleaner-builder-header { border-bottom: 1px solid var(--cleaner-border); background: linear-gradient(110deg,rgba(20,184,166,.09),rgba(15,23,42,.96) 45%); }
#cleaner-builder-modal .cleaner-builder-mark { width: 44px; height: 44px; flex-basis: 44px; }
#cleaner-builder-modal .cleaner-icon-button { width: 40px; min-width: 40px; padding: 0; color: var(--text-secondary); }
#cleaner-builder-modal .cleaner-icon-button svg { width: 19px; height: 19px; }
#cleaner-builder-modal .cleaner-builder-body { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 14px; padding: 16px 22px; overflow: auto; }
#cleaner-builder-modal .cleaner-builder-step { min-width: 0; min-height: 0; padding: 15px; border: 1px solid var(--cleaner-border); border-radius: 14px; background: rgba(30,41,59,.55); }
#cleaner-builder-modal .cleaner-builder-step-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
#cleaner-builder-modal .cleaner-builder-step-heading > span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; color: #5eead4; border: 1px solid rgba(45,212,191,.28); border-radius: 50%; background: rgba(20,184,166,.1); font-size: 10px; font-weight: 850; }
#cleaner-builder-modal .cleaner-builder-step-heading h2 { margin: 0; color: var(--text-primary); font-size: 13.5px; }
#cleaner-builder-modal .cleaner-builder-step-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; }
#cleaner-builder-modal .cleaner-example-row { display: grid; grid-template-columns: minmax(260px,1fr) auto auto auto; gap: 8px; }
#cleaner-builder-modal .cleaner-input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 13px; color: var(--text-primary); border: 1px solid var(--cleaner-border); border-radius: 10px; outline: 0; background: rgba(2,6,23,.35); font: 13px var(--font-sans); }
#cleaner-builder-modal .cleaner-builder-grid { min-height: 0; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 14px; }
#cleaner-builder-modal .cleaner-token-panel,
#cleaner-builder-modal .cleaner-preview-panel { display: flex; flex-direction: column; overflow: hidden; }
#cleaner-builder-modal .cleaner-token-legend { display: flex; gap: 12px; margin: -2px 0 10px 35px; color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
#cleaner-builder-modal .cleaner-token-legend span::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; content: ''; }
#cleaner-builder-modal .cleaner-token-legend .remove::before { background: #fb7185; }
#cleaner-builder-modal .cleaner-token-legend .keep::before { background: #34d399; }
#cleaner-builder-modal .cleaner-token-area { flex: 1; min-height: 100px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; overflow: auto; padding: 14px; color: var(--text-muted); border: 1px dashed rgba(148,163,184,.2); border-radius: 11px; background: rgba(2,6,23,.22); font-size: 12px; line-height: 1.5; }
#cleaner-builder-modal .cleaner-token { min-height: 36px; padding: 0 11px; border: 1px solid rgba(52,211,153,.38); border-radius: 9px; color: #a7f3d0; background: rgba(16,185,129,.1); font: 750 12px var(--font-mono,monospace); cursor: pointer; transition: transform 150ms ease,background-color 150ms ease,border-color 150ms ease; }
#cleaner-builder-modal .cleaner-token.is-remove { color: #fecdd3; border-color: rgba(251,113,133,.42); background: rgba(244,63,94,.11); text-decoration: line-through; text-decoration-thickness: 1px; }
#cleaner-builder-modal .cleaner-token:hover { transform: translateY(-1px); }
#cleaner-builder-modal .cleaner-preview { flex: 1; min-height: 100px; padding: 14px; border: 1px solid rgba(52,211,153,.18); border-radius: 11px; background: rgba(2,6,23,.25); color: #d1fae5; font-size: 13px; }
#cleaner-builder-modal .cleaner-builder-footer { border-top: 1px solid var(--cleaner-border); background: rgba(2,6,23,.2); }

body[data-theme="soft-light"] #page-prompt-cleaner { --cleaner-surface: rgba(255,255,255,.92); --cleaner-surface-strong: #fff; --cleaner-border: rgba(15,118,110,.14); }
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-shell { background: radial-gradient(circle at 5% 0%,rgba(20,184,166,.1),transparent 30%); }
body[data-theme="soft-light"] #page-prompt-cleaner :is(.cleaner-hero,.cleaner-editor-card) { background: rgba(255,255,255,.84); box-shadow: 0 12px 32px rgba(15,23,42,.06); }
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-textarea,
body[data-theme="soft-light"] #cleaner-builder-modal :is(.cleaner-input,.cleaner-textarea,.cleaner-token-area) { color: #0f172a; background: rgba(240,253,250,.58); }
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-card-footer { background: rgba(248,250,252,.88); }
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-output-footer p { color: #64748b; }
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-pattern-status,
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-count-success.is-active { color: #047857; }
body[data-theme="soft-light"] #page-prompt-cleaner .cleaner-button-copy { color: #047857; border-color: rgba(5,150,105,.34); background: rgba(16,185,129,.09); }
body[data-theme="soft-light"] #cleaner-builder-modal .cleaner-builder-dialog { background: #f8fafc; }
body[data-theme="soft-light"] #cleaner-builder-modal .cleaner-builder-header { background: linear-gradient(110deg,#ecfdf5,#f8fafc 48%); }
body[data-theme="soft-light"] #cleaner-builder-modal .cleaner-builder-step { background: rgba(255,255,255,.8); }
body[data-theme="soft-light"] #cleaner-builder-modal .cleaner-builder-footer {
    border-top-color: rgba(15,118,110,.12);
    background: linear-gradient(180deg,#f8fafc 0%,#f0fdfa 100%);
}

@media (max-width: 1050px) {
    #page-prompt-cleaner .cleaner-shell { grid-template-rows: auto auto auto; }
    #page-prompt-cleaner .cleaner-workspace { grid-template-columns: 1fr; gap: 10px; }
    #page-prompt-cleaner .cleaner-editor-card { min-height: 390px; }
    #page-prompt-cleaner .cleaner-flow-arrow { transform: rotate(90deg); }
    #cleaner-builder-modal .cleaner-builder-grid { grid-template-columns: 1fr; }
    #cleaner-builder-modal .cleaner-builder-dialog { overflow: auto; }
    #cleaner-builder-modal .cleaner-builder-body { overflow: visible; }
}
@media (max-width: 760px) {
    #page-prompt-cleaner .cleaner-shell { padding: 12px; }
    #page-prompt-cleaner .cleaner-hero { align-items: flex-start; flex-wrap: wrap; }
    #page-prompt-cleaner .cleaner-hero-actions { width: 100%; flex-wrap: wrap; }
    #page-prompt-cleaner .cleaner-pattern-status { order: -1; }
    #page-prompt-cleaner .cleaner-card-footer,
    #page-prompt-cleaner .cleaner-output-footer { align-items: stretch; flex-direction: column; }
    #page-prompt-cleaner .cleaner-secondary-actions { justify-content: flex-end; }
    #page-prompt-cleaner .cleaner-button-clean { flex: 1; }
    #cleaner-builder-modal .cleaner-builder-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); }
    #cleaner-builder-modal .cleaner-builder-header,
    #cleaner-builder-modal .cleaner-builder-footer { padding: 14px; }
    #cleaner-builder-modal .cleaner-builder-body { padding: 12px 14px; }
    #cleaner-builder-modal .cleaner-example-row { grid-template-columns: 1fr 1fr; }
    #cleaner-builder-modal .cleaner-example-row .cleaner-input,
    #cleaner-builder-modal #btn-cleaner-analyze { grid-column: 1 / -1; }
    #cleaner-builder-modal .cleaner-builder-footer { align-items: stretch; flex-direction: column-reverse; }
    #cleaner-builder-modal .cleaner-builder-footer > div { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
    #page-prompt-cleaner *, #cleaner-builder-modal * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}