/* ============================================================
   SQL 格式化 / 压缩 —— 页面私有样式（/devtools/sql-formatter）
   通用结构复用 devtools.css；高亮色统一用私有变量承载 rgba 值，
   随主题切换，自动适配黑夜模式。
   ============================================================ */

[hidden] { display: none; }

/* 输入 / 输出面板等高 */
.sf-textarea {
    min-height: 300px;
}

/* 高亮配色变量：浅色主题 */
.sql-hl-scope {
    --sql-kw: rgba(215, 58, 73, .95);
    --sql-str: rgba(3, 47, 98, .95);
    --sql-num: rgba(0, 92, 197, .95);
    --sql-cmt: rgba(106, 115, 125, .95);
}

/* 高亮配色变量：黑夜主题 */
[data-theme="dark"] .sql-hl-scope {
    --sql-kw: rgba(255, 123, 114, .95);
    --sql-str: rgba(165, 214, 255, .95);
    --sql-num: rgba(121, 192, 255, .95);
    --sql-cmt: rgba(139, 148, 158, .95);
}

.sql-keyword { color: var(--sql-kw); font-weight: 700; }
.sql-string  { color: var(--sql-str); }
.sql-number  { color: var(--sql-num); }
.sql-comment { color: var(--sql-cmt); font-style: italic; }

/* 高亮结果的代码块：保留换行并允许长行折行 */
.sql-code {
    white-space: pre;
    word-break: break-word;
}

/* 处理中提示 */
.sql-loading {
    padding: 10px 0;
    color: var(--c-text-muted);
    font-size: 13.5px;
}

@media (max-width: 860px) {
    .sf-textarea {
        min-height: 200px;
    }
}