.sqlf-page {
    --sqlf-ink: #172033;
    --sqlf-muted: #6f7c92;
    --sqlf-line: #dce3ee;
    --sqlf-blue: #316dff;
    --sqlf-blue-dark: #2052cc;
    --sqlf-green: #35d6a5;
    --sqlf-code: #0d1424;
    --sqlf-code-alt: #101a2d;
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px 24px 72px;
    color: var(--sqlf-ink);
}

.sqlf-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    min-height: 148px;
    padding: 24px 30px;
    border-radius: 22px 22px 0 0;
    color: #fff;
    background:
        radial-gradient(circle at 75% -30%, rgba(79, 142, 255, .72), transparent 42%),
        linear-gradient(120deg, #101932 0%, #173776 58%, #245bd8 100%);
}

.sqlf-hero::after {
    content: "SELECT *";
    position: absolute;
    right: 25%;
    bottom: -25px;
    color: rgba(255, 255, 255, .045);
    font: 800 5.8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -.08em;
    white-space: nowrap;
    transform: rotate(-4deg);
}

.sqlf-hero-copy { position: relative; z-index: 1; max-width: 830px; }
.sqlf-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; color: #9abaff; font: 800 .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
.sqlf-eyebrow i { padding: 4px 6px; border: 1px solid rgba(142, 178, 255, .55); border-radius: 5px; color: #dce8ff; background: rgba(255, 255, 255, .08); font-style: normal; letter-spacing: .05em; }
.sqlf-hero h1 { margin: 0 0 7px; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -.052em; font-weight: 850; }
.sqlf-hero p { max-width: 790px; margin: 0; color: #ccd9f4; font-size: .88rem; line-height: 1.5; }
.sqlf-trust { position: relative; z-index: 1; flex: 0 0 260px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 12px; background: rgba(6, 14, 37, .42); backdrop-filter: blur(16px); }
.sqlf-trust-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sqlf-green); box-shadow: 0 0 0 5px rgba(53, 214, 165, .12); }
.sqlf-trust strong, .sqlf-trust small { display: block; }
.sqlf-trust strong { font-size: .77rem; }
.sqlf-trust small { margin-top: 2px; color: #aebddb; font-size: .67rem; line-height: 1.35; }

.sqlf-workspace { overflow: hidden; border: 1px solid #cfd8e7; border-top: 0; border-radius: 0 0 22px 22px; background: #fff; box-shadow: 0 26px 65px rgba(25, 43, 78, .14); }
.sqlf-toolbar { display: flex; align-items: flex-end; gap: 14px; min-height: 70px; padding: 11px 14px; border-bottom: 1px solid var(--sqlf-line); background: #f8fafd; }
.sqlf-mode-switch { display: flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid #d5deeb; border-radius: 10px; background: #fff; }
.sqlf-mode-switch button { min-height: 38px; padding: 8px 13px; border: 0; border-radius: 7px; color: #66738a; background: transparent; font-size: .72rem; font-weight: 800; }
.sqlf-mode-switch button:hover { color: #30415c; background: #f0f4fa; }
.sqlf-mode-switch button.is-active { color: #fff; background: var(--sqlf-blue); box-shadow: 0 5px 14px rgba(49, 109, 255, .25); }
.sqlf-mode-switch button span { margin-right: 4px; font-family: ui-monospace, monospace; }
.sqlf-toolbar-options { display: flex; align-items: flex-end; gap: 10px; transition: opacity .18s ease; }
.sqlf-toolbar-options.is-muted { opacity: .42; }
.sqlf-select-field { display: grid; gap: 4px; min-width: 140px; }
.sqlf-select-field span, .sqlf-indent-field legend { color: #7c8799; font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sqlf-select-field select { min-height: 38px; padding: 7px 31px 7px 10px; border: 1px solid #d5deea; border-radius: 8px; color: #2c3b54; background-color: #fff; font-size: .72rem; font-weight: 700; outline: none; }
.sqlf-select-field select:focus { border-color: #7da2ff; box-shadow: 0 0 0 3px rgba(49, 109, 255, .09); }
.sqlf-indent-field { display: flex; align-items: center; gap: 3px; min-width: 82px; margin: 0; padding: 0; border: 0; }
.sqlf-indent-field legend { position: absolute; transform: translateY(-27px); }
.sqlf-indent-field label { margin: 0; }
.sqlf-indent-field input { position: absolute; opacity: 0; }
.sqlf-indent-field span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d5deea; color: #657287; background: #fff; font: 800 .72rem ui-monospace, monospace; cursor: pointer; }
.sqlf-indent-field label:first-of-type span { border-radius: 8px 0 0 8px; }
.sqlf-indent-field label:last-of-type span { border-radius: 0 8px 8px 0; }
.sqlf-indent-field input:checked + span { position: relative; z-index: 1; border-color: #87a8ff; color: var(--sqlf-blue); background: #edf3ff; }
.sqlf-toolbar-actions { display: flex; gap: 7px; margin-left: auto; }
.sqlf-button { min-height: 38px; padding: 8px 12px; border: 1px solid #d4deeb; border-radius: 8px; font-size: .7rem; font-weight: 800; }
.sqlf-button-quiet { color: #59677e; background: #fff; }
.sqlf-button-quiet:hover { border-color: #9fb7ef; color: var(--sqlf-blue); }

.sqlf-editors { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); background: #0a1221; }
.sqlf-panel { min-width: 0; background: var(--sqlf-code); }
.sqlf-output-panel { background: var(--sqlf-code-alt); }
.sqlf-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 61px; padding: 11px 15px; border-bottom: 1px solid #22304a; color: #fff; background: #111b2d; }
.sqlf-output-panel .sqlf-panel-head { background: #142139; }
.sqlf-panel-head > div:first-child { display: grid; gap: 3px; }
.sqlf-panel-head strong { font-size: .77rem; }
.sqlf-panel-kicker { color: #71809c; font: 800 .55rem/1.2 ui-monospace, monospace; letter-spacing: .1em; }
.sqlf-panel-meta { color: #8290a8; font: .62rem/1.3 ui-monospace, monospace; white-space: nowrap; }
.sqlf-output-actions { display: flex; align-items: center; gap: 11px; }
.sqlf-copy { min-height: 34px; padding: 7px 11px; border: 1px solid #365584; border-radius: 7px; color: #dce8ff; background: #1a3158; font-size: .67rem; font-weight: 800; }
.sqlf-copy:hover:not(:disabled) { border-color: #5f8de0; background: #234273; }
.sqlf-copy:disabled { opacity: .45; cursor: not-allowed; }
.sqlf-copy span { margin-right: 4px; }
.sqlf-flow { position: relative; display: grid; place-items: center; border-right: 1px solid #22304a; border-left: 1px solid #22304a; color: #6f9cff; background: #0b1425; }
.sqlf-flow::before { content: ""; position: absolute; top: 61px; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, #28416e 25%, #28416e 75%, transparent); }
.sqlf-flow span { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #2d4775; border-radius: 50%; background: #111f38; font: 800 .85rem ui-monospace, monospace; }
.sqlf-panel > textarea { display: block; width: 100%; min-height: 450px; padding: 17px; resize: vertical; border: 0; color: #d9e3f3; background: transparent; outline: none; font: .78rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sqlf-page .CodeMirror { height: 450px; color: #d9e3f3; background: var(--sqlf-code); font: .78rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sqlf-output-panel .CodeMirror { background: var(--sqlf-code-alt); }
.sqlf-page .CodeMirror-gutters { border-right-color: #202d45; background: #09101d; }
.sqlf-output-panel .CodeMirror-gutters { background: #0d1728; }
.sqlf-page .CodeMirror-linenumber { color: #4f5f79; }
.sqlf-page .CodeMirror-cursor { border-left-color: #f3f7ff; }
.sqlf-page .CodeMirror-selected { background: #263a5e; }
.sqlf-page .CodeMirror-focused .CodeMirror-selected { background: #304b77; }
.sqlf-page .CodeMirror-matchingbracket { color: #fff !important; background: rgba(93, 140, 255, .27); }
.sqlf-page .cm-s-default .cm-keyword { color: #7aa2f7; font-weight: 700; }
.sqlf-page .cm-s-default .cm-operator { color: #89ddff; }
.sqlf-page .cm-s-default .cm-number { color: #ffcb6b; }
.sqlf-page .cm-s-default .cm-string,
.sqlf-page .cm-s-default .cm-string-2 { color: #a9dc76; }
.sqlf-page .cm-s-default .cm-atom,
.sqlf-page .cm-s-default .cm-builtin { color: #c792ea; }
.sqlf-page .cm-s-default .cm-variable,
.sqlf-page .cm-s-default .cm-variable-2 { color: #d9e3f3; }
.sqlf-page .cm-s-default .cm-comment { color: #66758e; font-style: italic; }
.sqlf-page .cm-s-default .cm-def { color: #73daca; }

.sqlf-statusbar { display: flex; align-items: center; gap: 17px; min-height: 42px; padding: 8px 14px; border-top: 1px solid var(--sqlf-line); color: #7c8799; background: #fbfcfe; font-size: .65rem; }
.sqlf-status { display: flex; align-items: center; gap: 7px; color: #68768b; font-weight: 750; }
.sqlf-status i { width: 8px; height: 8px; border-radius: 50%; background: #9aa7ba; box-shadow: 0 0 0 4px rgba(154, 167, 186, .12); }
.sqlf-status.is-ready { color: #25785f; }
.sqlf-status.is-ready i { background: #31c99a; box-shadow: 0 0 0 4px rgba(49, 201, 154, .12); }
.sqlf-status.is-error { color: #c33b50; }
.sqlf-status.is-error i { background: #d94c61; box-shadow: 0 0 0 4px rgba(217, 76, 97, .12); }
.sqlf-status.is-loading i { animation: sqlfPulse 1s infinite alternate; }
.sqlf-query-stats { flex: 1; color: #8793a5; font-family: ui-monospace, monospace; }
.sqlf-shortcut { display: flex; align-items: center; gap: 4px; }
.sqlf-shortcut kbd { padding: 2px 5px; border: 1px solid #d3dce8; border-bottom-width: 2px; border-radius: 5px; color: #667287; background: #fff; font: 600 .57rem ui-monospace, monospace; }

.sqlf-info { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; margin-top: 26px; padding: 27px; border: 1px solid var(--sqlf-line); border-radius: 17px; background: #fff; }
.sqlf-about { display: grid; grid-template-columns: auto 1fr; gap: 17px; align-items: start; }
.sqlf-about-mark { padding: 8px 10px; border-radius: 8px; color: var(--sqlf-blue); background: #edf3ff; font: 850 .65rem ui-monospace, monospace; }
.sqlf-section-label { color: #7c8aa0; font: 850 .58rem/1.2 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.sqlf-info h2, .sqlf-faq h2 { margin: 5px 0 8px; font-size: 1.13rem; font-weight: 850; }
.sqlf-about p { margin: 0; color: var(--sqlf-muted); font-size: .77rem; line-height: 1.65; }
.sqlf-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sqlf-features article { padding: 14px; border: 1px solid #e2e7ef; border-radius: 11px; background: #f9fafc; }
.sqlf-features article > span { color: var(--sqlf-blue); font-size: 1rem; }
.sqlf-features h3 { margin: 8px 0 5px; font-size: .72rem; font-weight: 850; }
.sqlf-features p { margin: 0; color: #768196; font-size: .65rem; line-height: 1.5; }
.sqlf-faq { margin-top: 18px; padding: 25px 27px; border: 1px solid var(--sqlf-line); border-radius: 17px; background: #fff; }
.sqlf-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.sqlf-faq details { border: 1px solid #e0e6ef; border-radius: 10px; background: #fafbfd; }
.sqlf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; color: #334159; font-size: .72rem; font-weight: 800; cursor: pointer; list-style: none; }
.sqlf-faq summary::-webkit-details-marker { display: none; }
.sqlf-faq summary span { color: var(--sqlf-blue); font-size: 1rem; transition: transform .16s ease; }
.sqlf-faq details[open] summary span { transform: rotate(45deg); }
.sqlf-faq details p { margin: 0; padding: 0 15px 14px; color: var(--sqlf-muted); font-size: .69rem; line-height: 1.6; }
.sqlf-seo { margin-top: 18px; }
.sqlf-seo p { font-size: .77rem; line-height: 1.65; }
.sqlf-toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; padding: 11px 16px; border-radius: 9px; color: #fff; background: #17243a; box-shadow: 0 14px 38px rgba(15, 28, 52, .25); font-size: .72rem; font-weight: 750; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .18s ease; }
.sqlf-toast.is-visible { opacity: 1; transform: translateY(0); }

@keyframes sqlfPulse { to { opacity: .35; } }

@media (max-width: 1120px) {
    .sqlf-toolbar { flex-wrap: wrap; }
    .sqlf-toolbar-actions { margin-left: 0; }
    .sqlf-info { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .sqlf-page { padding: 16px 12px 52px; }
    .sqlf-hero { align-items: flex-start; flex-direction: column; gap: 13px; min-height: 0; padding: 18px; border-radius: 17px 17px 0 0; }
    .sqlf-hero h1 { font-size: 1.85rem; }
    .sqlf-hero p { font-size: .78rem; }
    .sqlf-trust { width: 100%; flex-basis: auto; padding: 10px 13px; }
    .sqlf-toolbar { align-items: stretch; }
    .sqlf-toolbar-options { order: 3; overflow-x: auto; width: 100%; padding-top: 2px; }
    .sqlf-select-field { flex: 0 0 138px; }
    .sqlf-toolbar-actions { margin-left: auto; }
    .sqlf-editors { grid-template-columns: 1fr; }
    .sqlf-flow { height: 40px; border: 0; border-top: 1px solid #22304a; border-bottom: 1px solid #22304a; }
    .sqlf-flow::before { top: 50%; right: 0; bottom: auto; left: 0; width: auto; height: 1px; }
    .sqlf-flow span { transform: rotate(90deg); }
    .sqlf-panel > textarea, .sqlf-page .CodeMirror { min-height: 310px; height: 310px; }
    .sqlf-info, .sqlf-faq { padding: 20px; }
    .sqlf-features { grid-template-columns: 1fr; }
    .sqlf-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .sqlf-hero p, .sqlf-trust small { display: none; }
    .sqlf-hero { gap: 10px; padding: 15px; }
    .sqlf-hero h1 { margin-bottom: 0; font-size: 1.55rem; }
    .sqlf-toolbar { gap: 9px; padding: 10px; }
    .sqlf-mode-switch { width: 100%; }
    .sqlf-mode-switch button { flex: 1; }
    .sqlf-toolbar-actions { width: 100%; }
    .sqlf-toolbar-actions .sqlf-button { flex: 1; }
    .sqlf-toolbar-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 82px; gap: 7px; overflow: visible; margin-top: 4px; }
    .sqlf-select-field { min-width: 0; }
    .sqlf-select-field select { width: 100%; }
    .sqlf-panel-head { align-items: flex-start; flex-direction: column; }
    .sqlf-output-actions { justify-content: space-between; width: 100%; }
    .sqlf-statusbar { flex-wrap: wrap; }
    .sqlf-shortcut { display: none; }
    .sqlf-about { grid-template-columns: 1fr; }
}