.sql-eu-card{background: var(--surface, #fff);border: 1px solid var(--border, #e5e7eb);border-radius: 16px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);overflow: hidden;margin-bottom: 2rem;}
.sql-eu-ops{display: flex;gap: 0;padding: 12px 12px 0;background: var(--surface-muted, #f9fafb);border-bottom: 1px solid var(--border, #e5e7eb);}
.sql-eu-op{flex: 1;padding: 12px 16px;font-size: 14px;font-weight: 600;border: none;border-radius: 10px 10px 0 0;cursor: pointer;background: transparent;color: var(--text-muted, #6b7280);transition: background 0.2s, color 0.2s;-webkit-tap-highlight-color: transparent;}
.sql-eu-op:hover{color: var(--text-main, #111);background: rgba(255, 255, 255, 0.9);}
.sql-eu-op.sql-eu-op-active{background: var(--surface, #fff);color: var(--primary, #0d6efd);border: 1px solid var(--border, #e5e7eb);border-bottom-color: transparent;margin-bottom: -1px;}
.sql-eu-run-wrap{padding: 16px 16px 0;text-align: center;}
.sql-eu-run{padding: 12px 28px;font-size: 15px;font-weight: 600;border: none;border-radius: 12px;cursor: pointer;background: var(--primary, #0d6efd);color: #fff;transition: filter 0.2s, transform 0.1s;-webkit-tap-highlight-color: transparent;}
.sql-eu-run:hover{filter: brightness(1.08);}
.sql-eu-run:active{transform: scale(0.98);}
.sql-eu-panels{display: flex;flex-direction: column;gap: 20px;padding: 20px;}
.sql-eu-panel{display: flex;flex-direction: column;min-width: 0;}
.sql-eu-panel-out .sql-eu-copy{margin-top: 10px;align-self: flex-start;}
.sql-eu-label{display: block;font-size: 12px;font-weight: 600;color: var(--text-muted, #6b7280);text-transform: uppercase;letter-spacing: 0.04em;margin-bottom: 8px;}
.sql-eu-textarea{width: 100%;min-height: 160px;padding: 14px 16px;font-family: ui-monospace, "SF Mono", Consolas, monospace;font-size: 14px;line-height: 1.55;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-tap-highlight-color: transparent;}
.sql-eu-textarea:focus{outline: 0;border-color: var(--primary, #0d6efd);box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);}
.sql-eu-textarea::placeholder{color: var(--text-muted, #9ca3af);opacity: 0.9;}
.sql-eu-textarea.sql-eu-output{background: var(--surface-muted, #f9fafb);cursor: default;}
.sql-eu-copy{padding: 10px 20px;font-size: 14px;font-weight: 600;border-radius: 10px;border: 1px solid var(--border, #e5e7eb);background: var(--surface-muted, #f3f4f6);color: var(--text-main, #111);cursor: pointer;transition: background 0.2s, color 0.2s;-webkit-tap-highlight-color: transparent;}
.sql-eu-copy:hover:not(:disabled){background: var(--border, #e5e7eb);}
.sql-eu-copy:disabled{opacity: 0.6;cursor: not-allowed;}
.sql-eu-notice{font-size: 13px;color: var(--text-muted, #6b7280);margin: 0;padding: 14px 20px;border-top: 1px solid var(--border, #e5e7eb);background: var(--surface-muted, #f9fafb);}
.sql-eu-content{margin-bottom: 2rem;}
.sql-eu-content .sql-eu-h2{font-size: 1.25rem;font-weight: 700;margin-top: 1.5rem;margin-bottom: 0.5rem;}
.sql-eu-content .sql-eu-h2:first-child{margin-top: 0;}
.sql-eu-content p{margin-bottom: 1rem;max-width: 65ch;}
.sql-eu-toast{position: fixed;bottom: 24px;left: 50%;transform: translateX(-50%) translateY(80px);padding: 12px 24px;border-radius: 12px;background: var(--text-main, #1f2937);color: #fff;font-size: 14px;font-weight: 500;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);opacity: 0;transition: transform 0.25s ease, opacity 0.25s ease;z-index: 1000;pointer-events: none;}
.sql-eu-toast.sql-eu-toast-visible{transform: translateX(-50%) translateY(0);opacity: 1;}
@media (min-width: 768px){.sql-eu-card{margin-left: auto;margin-right: auto;}
.sql-eu-ops{padding: 16px 20px 0;}
.sql-eu-op{padding: 14px 20px;font-size: 15px;}
.sql-eu-run-wrap{padding: 20px 24px 0;}
.sql-eu-panels{flex-direction: row;padding: 24px;gap: 24px;}
.sql-eu-panel{flex: 1;min-height: 0;}
.sql-eu-textarea{min-height: 220px;}
.sql-eu-panel-out .sql-eu-copy{margin-top: 12px;}}