.ued-wrap{background: var(--surface, #fff);border: 1px solid var(--border, #e5e7eb);border-radius: 16px;box-shadow: 0 1px 3px rgba(0,0,0,0.04);overflow: hidden;margin-bottom: 2rem;}
.ued-toolbar{display: flex;flex-wrap: wrap;align-items: center;gap: 0.75rem 1.25rem;padding: 1rem 1.25rem;background: var(--surface-muted, #f9fafb);border-bottom: 1px solid var(--border, #e5e7eb);}
.ued-mode,.ued-scope{display: flex;border-radius: 10px;overflow: hidden;border: 1px solid var(--border, #e5e7eb);background: var(--surface, #fff);}
.ued-mode-btn,.ued-scope-btn{padding: 0.5rem 1rem;font-size: 0.875rem;font-weight: 500;color: var(--text-muted);background: transparent;border: none;cursor: pointer;transition: color 0.2s, background 0.2s;}
.ued-mode-btn:first-child,.ued-scope-btn:first-child{border-right: 1px solid var(--border, #e5e7eb);}
.ued-mode-btn.is-active,.ued-scope-btn.is-active{color: var(--primary, #2563eb);background: rgba(37,99,235,0.08);}
.ued-mode-btn:hover:not(.is-active),.ued-scope-btn:hover:not(.is-active){color: var(--text-main, #111);background: rgba(0,0,0,0.03);}
.ued-panes{display: flex;flex-direction: column;gap: 0;}
@media (min-width: 768px){.ued-panes{flex-direction: row;}}
.ued-pane{flex: 1;min-width: 0;display: flex;flex-direction: column;padding: 1rem 1.25rem;}
.ued-pane-out{border-top: 1px solid var(--border, #e5e7eb);background: var(--surface-muted, #f9fafb);}
@media (min-width: 768px){.ued-pane-out{border-top: none;border-left: 1px solid var(--border, #e5e7eb);}}
.ued-label{font-size: 0.8125rem;font-weight: 600;color: var(--text-muted);letter-spacing: 0.02em;margin-bottom: 0.5rem;display: block;}
.ued-textarea{width: 100%;min-height: 120px;padding: 0.875rem 1rem;font-size: 0.9375rem;line-height: 1.5;font-family: ui-monospace, monospace;color: var(--text-main, #111);background: var(--surface, #fff);border: 1px solid var(--border, #e5e7eb);border-radius: 10px;resize: vertical;transition: border-color 0.2s, box-shadow 0.2s;-webkit-appearance: none;appearance: none;}
.ued-textarea:focus{outline: 0;border-color: var(--primary, #2563eb);box-shadow: 0 0 0 3px rgba(37,99,235,0.12);}
.ued-textarea::placeholder{color: var(--text-muted);opacity: 0.8;}
.ued-textarea-readonly{background: var(--surface, #fff);cursor: default;}
.ued-meta{display: flex;flex-wrap: wrap;gap: 0.5rem 1rem;margin-top: 0.5rem;font-size: 0.8125rem;color: var(--text-muted);}
.ued-meta-item{display: inline-block;}
.ued-actions{display: flex;flex-wrap: wrap;gap: 0.75rem;padding: 1rem 1.25rem;border-top: 1px solid var(--border, #e5e7eb);background: var(--surface, #fff);}
.ued-btn{padding: 0.625rem 1.25rem;font-size: 0.9375rem;font-weight: 500;border-radius: 10px;border: none;cursor: pointer;transition: background 0.2s, color 0.2s, transform 0.1s;}
.ued-btn:active{transform: scale(0.98);}
.ued-btn-copy{color: #fff;background: var(--primary, #2563eb);}
.ued-btn-copy:hover{filter: brightness(1.08);}
.ued-btn-clear{color: var(--text-main, #111);background: var(--surface-muted, #f3f4f6);border: 1px solid var(--border, #e5e7eb);}
.ued-btn-clear:hover{background: var(--border, #e5e7eb);}
.ued-toast{position: fixed;bottom: 1.5rem;left: 50%;transform: translateX(-50%) translateY(100%);padding: 0.75rem 1.25rem;font-size: 0.875rem;font-weight: 500;color: #fff;background: var(--primary, #2563eb);border-radius: 10px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);opacity: 0;transition: transform 0.25s ease, opacity 0.25s ease;z-index: 1000;pointer-events: none;}
.ued-toast.is-visible{transform: translateX(-50%) translateY(0);opacity: 1;}
@media (min-width: 480px){.ued-toolbar{padding: 1.25rem 1.5rem;}.ued-pane{padding: 1.25rem 1.5rem;}.ued-textarea{min-height: 140px;font-size: 1rem;}.ued-actions{padding: 1.25rem 1.5rem;gap: 1rem;}.ued-btn{padding: 0.75rem 1.5rem;font-size: 1rem;}}