.sql-page { background: var(--site-page-bg); color: #19212b; min-height: 100vh; }
.sql-hero { color: #fff; }
.sql-workspace { align-items: start; display: grid; gap: 24px; grid-template-columns: var(--task-sidebar-width) minmax(0, 1fr); padding-block: 24px 48px; }
.sql-sidebar, .sql-lab, .sql-introduction { box-sizing: border-box; min-width: 0; }
.sql-sidebar, .sql-lab { background: #fff; border: 1px solid var(--task-panel-border); border-radius: var(--task-panel-radius); box-shadow: var(--task-panel-shadow); }
.sql-sidebar { overflow: hidden; position: sticky; top: 78px; }
.sql-sidebar-heading { padding: 22px 22px 16px; }
.sql-sidebar-heading h2, .sql-lab h2, .sql-result-heading h3 { font-family: Sora, sans-serif; }
.sql-sidebar-heading h2 { font-size: 1.3rem; margin: 0 0 7px; }
.sql-sidebar-heading p:last-child { color: #687480; font-size: .88rem; line-height: 1.5; margin: 0; }
.sql-dataset-title { color: #687480; font-family: Sora, sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .1em; margin: 0; padding: 18px 22px 4px; text-transform: uppercase; }
.sql-dataset-list { display: grid; gap: 5px; padding: 6px 10px 10px; }
.sql-intro-button { align-items: center; background: #f5faf9; border: 0; border-bottom: 1px solid #e7ecef; color: #2a5050; display: flex; gap: 10px; padding: 13px 20px; text-align: left; width: 100%; }
.sql-intro-button:hover, .sql-intro-button[aria-pressed="true"] { background: #ddf4f1; color: #075f59; }
.sql-intro-button > i { font-size: 1.2rem; }
.sql-intro-button strong, .sql-intro-button small { display: block; }
.sql-intro-button small { font-size: .76rem; margin-top: 2px; }
.sql-dataset { background: transparent; border: 0; border-radius: 10px; color: #3d4954; padding: 11px 12px; text-align: left; }
.sql-dataset:hover { background: #f0f5f5; }
.sql-dataset[aria-pressed="true"] { background: #ddf4f1; color: #075f59; }
.sql-dataset strong, .sql-dataset span { display: block; }
.sql-dataset span { color: #71808c; font-size: .8rem; margin-top: 3px; }
.sql-schema-panel { border-top: 1px solid #e7ecef; padding: 18px; }
.sql-schema-heading, .sql-query-toolbar, .sql-result-heading, .sql-lab-header { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.sql-schema-heading h3 { font-size: 1rem; margin: 0; }
.sql-schema-heading span, .sql-result-meta { color: #6c7782; font-size: .78rem; }
.sql-tables { display: grid; gap: 7px; margin-top: 12px; }
.sql-table { border: 1px solid #dfe6ea; border-radius: 9px; overflow: hidden; }
.sql-table summary { align-items: center; cursor: pointer; display: flex; gap: 8px; list-style: none; padding: 9px 10px; }
.sql-table summary::-webkit-details-marker { display: none; }
.sql-table summary i { color: #087a72; }
.sql-table ul { border-top: 1px solid #e7ecef; color: #53616d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; line-height: 1.55; list-style: none; margin: 0; padding: 9px 12px; }
.sql-lab { min-height: 600px; overflow: hidden; padding: clamp(22px, 3vw, 38px); }
.sql-introduction { background: #fff; border: 1px solid var(--task-panel-border); border-radius: var(--task-panel-radius); box-shadow: var(--task-panel-shadow); padding: clamp(24px, 4vw, 44px); }
.sql-intro-lead { border-bottom: 1px solid #e6ebef; max-width: 760px; padding-bottom: 25px; }
.sql-intro-lead h2 { font-family: Sora, sans-serif; font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 0 0 12px; }
.sql-intro-lead p:last-child { color: #586774; line-height: 1.7; margin: 0; max-width: 780px; }
.sql-query-guide pre { background: #111b29; border-radius: 9px; color: #e9f0f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem; line-height: 1.55; margin: 0; overflow: auto; padding: 15px; }
.sql-query-guide { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sql-query-guide article { border: 1px solid #e1e8ec; border-radius: 12px; padding: 18px; }
.sql-query-guide h3 { color: #263642; font-family: Sora, sans-serif; font-size: .96rem; margin: 0 0 12px; }
.sql-query-guide p { color: #566572; font-size: .88rem; line-height: 1.6; margin: 0 0 14px; }
.sql-query-guide p code { background: #e5eeef; border-radius: 4px; color: #086b65; font-size: .86em; padding: 1px 4px; }
.sql-video-resources { border-top: 1px solid #e6ebef; display: grid; gap: 20px; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); margin-top: 28px; padding-top: 26px; }
.sql-video-resources h3 { font-family: Sora, sans-serif; font-size: 1.05rem; margin: 0 0 9px; }
.sql-video-resources p:last-child { color: #61707c; font-size: .88rem; line-height: 1.6; margin: 0; }
.sql-video-resources ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sql-video-resources a { background: #f6f9fa; border: 1px solid #e0e8eb; border-radius: 9px; color: #075f59; display: block; padding: 11px 13px; text-decoration: none; }
.sql-video-resources a:hover { background: #eaf8f6; border-color: #b9dfda; }
.sql-video-resources a::after { content: "↗"; float: right; font-weight: 700; }
.sql-video-resources strong, .sql-video-resources span { display: block; }
.sql-video-resources span { color: #677782; font-size: .79rem; margin-top: 3px; }
.sql-overview-heading { color: #263642; font-family: Sora, sans-serif; font-size: 1rem; margin: 26px 0 12px; }
.sql-overview-tables { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sql-overview-tables article { background: #f6f9fa; border: 1px solid #e1e8ec; border-radius: 10px; padding: 14px 16px; }
.sql-overview-tables h4 { color: #075f59; font-size: .95rem; font-weight: 700; margin: 0 0 6px; }
.sql-overview-tables p { color: #566572; font-size: .86rem; line-height: 1.55; margin: 0; }
.sql-overview-example ul { color: #566572; line-height: 1.7; margin: 0; padding-left: 1.2rem; }
.sql-intro-actions { align-items: center; border-top: 1px solid #e6ebef; display: flex; gap: 18px; margin-top: 28px; padding-top: 22px; }
.sql-intro-actions p { color: #687683; font-size: .86rem; margin: 0; }
.sql-info-note { align-items: flex-start; background: #f2f8f7; border-left: 4px solid #24a69b; border-radius: 8px; color: #4f6068; display: flex; font-size: .88rem; gap: 10px; line-height: 1.55; margin-top: 22px; padding: 12px 14px; }
.sql-info-note i { color: #087a72; flex: 0 0 auto; font-size: 1.05rem; margin-top: 1px; }
.sql-info-note p { margin: 0; }
.sql-info-note a { color: #075f59; font-weight: 600; }
.sql-lab-header { border-bottom: 1px solid #e6ebef; margin-bottom: 24px; padding-bottom: 20px; }
.sql-lab-header h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); margin: 0; }
.sql-kicker { color: #087a72; font-size: .75rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 5px; text-transform: uppercase; }
.sql-connection { align-items: center; background: #fff7df; border-radius: 999px; color: #805600; display: inline-flex; font-size: .8rem; font-weight: 700; gap: 7px; padding: 7px 11px; white-space: nowrap; }
.sql-connection i { font-size: .55rem; }
.sql-connection.is-ready { background: #e4f7f3; color: #087168; }
.sql-connection.is-error { background: #fff0f0; color: #a32d2d; }
.sql-query-card, .sql-result-card { border: 1px solid #dfe6ea; border-radius: 13px; overflow: hidden; }
.sql-query-toolbar { background: #f7f9fa; border-bottom: 1px solid #dfe6ea; padding: 12px 14px; }
.sql-query-toolbar label { color: #3c4853; font-size: .88rem; font-weight: 700; }
.sql-query-actions { display: flex; gap: 8px; }
#sqlQuery { background: #111b29; border: 0; color: #e9f0f5; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; line-height: 1.6; min-height: 175px; outline: 0; padding: 18px; resize: vertical; width: 100%; }
.sql-query-help { color: #667480; font-size: .83rem; margin: 0; padding: 10px 14px; }
.sql-query-help code, .sql-result-empty code { color: #0b7069; }
.sql-result-card { margin-top: 22px; }
.sql-result-heading { background: #fbfcfd; border-bottom: 1px solid #e2e8ec; padding: 17px 18px; }
.sql-result-heading h3 { font-size: 1.08rem; margin: 0; }
.sql-result { min-height: 205px; padding: 18px; }
.sql-result-empty { align-items: center; color: #667480; display: grid; justify-items: center; margin: 22px auto; max-width: 440px; text-align: center; }
.sql-result-empty > i { color: #36a89e; font-size: 2.1rem; }
.sql-result-empty p { color: #34414c; font-weight: 600; margin: 12px 0 6px; }
.sql-result-empty small { line-height: 1.5; }
.sql-result-notice { align-items: flex-start; background: #eef8f7; border: 1px solid #cce8e5; border-radius: 10px; color: #195f5a; display: flex; gap: 12px; margin: 4px; padding: 16px; }
.sql-result-notice > i { font-size: 1.2rem; }
.sql-result-notice p { color: #426762; margin: 5px 0 0; }
.sql-result-table-wrap { overflow: auto; }
.sql-result-table { border-collapse: collapse; font-size: .88rem; min-width: 100%; width: max-content; }
.sql-result-table th { background: #f3f7f8; color: #33414c; font-weight: 700; text-align: left; }
.sql-result-table th, .sql-result-table td { border-bottom: 1px solid #e3e9ec; padding: 10px 12px; white-space: nowrap; }
.sql-result-table td { color: #4e5b66; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sql-result-table tr:last-child td { border-bottom: 0; }
.sql-result-error { align-items: flex-start; background: #fff3f2; border: 1px solid #ffd0cc; border-radius: 10px; color: #9b3027; display: flex; gap: 12px; padding: 16px; }
.sql-result-error > i { font-size: 1.2rem; }
.sql-result-error p { color: #783e39; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 5px 0 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .sql-workspace { grid-template-columns: minmax(0, 1fr); } .sql-sidebar { position: static; } .sql-video-resources { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 576px) { .sql-lab, .sql-introduction { border-radius: 13px; padding: 18px; } .sql-lab-header, .sql-intro-actions { align-items: flex-start; flex-direction: column; } .sql-query-toolbar { align-items: flex-start; flex-direction: column; } .sql-query-guide { grid-template-columns: minmax(0, 1fr); } }