:root {
  --orange: #ff5c7a;
  --lime: #d7f44a;
  --teal: #087f68;
  --blue: #3f50d9;
}

.brand-mark { background: #39d98a; }
.side-tip { background: #d7f44a; }
.principles { background: #087f68; }
.lesson-badge { background: #39d98a; }
.portal-back { display: inline-flex; margin: 0 10px 18px; color: var(--muted); font: 750 11px var(--mono); text-decoration: none; text-transform: uppercase; }
.portal-back:hover { color: var(--ink); }

.data-card { position: relative; width: 100%; max-width: 610px; min-width: 0; transform: rotate(1deg); }
.data-card::before { content: ""; position: absolute; inset: -18px 24px 18px -18px; border: 2px solid var(--ink); border-radius: 20px; background: #ff5c7a; transform: rotate(-3deg); }
.schema-window { position: relative; padding-bottom: 28px; border: 2px solid var(--ink); border-radius: 16px; background: #dff8e9; box-shadow: 10px 12px 0 var(--ink); overflow: hidden; }
.schema-canvas { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; min-height: 330px; padding: 34px; }
.schema-table { position: relative; z-index: 2; border: 2px solid var(--ink); border-radius: 11px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; }
.schema-table strong { display: block; padding: 10px 12px; border-bottom: 2px solid var(--ink); background: #39d98a; font: 900 12px var(--mono); text-transform: uppercase; }
.schema-table span { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid #cbc7bb; font: 11px var(--mono); }
.schema-table span:last-child { border-bottom: 0; }
.schema-table b { color: var(--teal); font-weight: 800; }
.relation-line { position: absolute; z-index: 1; top: 50%; left: 42%; width: 18%; height: 3px; background: var(--ink); }
.relation-line::before, .relation-line::after { content: ""; position: absolute; top: -5px; width: 11px; height: 11px; border: 2px solid var(--ink); border-radius: 50%; background: #d7f44a; }
.relation-line::before { left: -4px; }
.relation-line::after { right: -4px; }
.query-strip { margin: 0 26px; padding: 11px 14px; border: 2px solid var(--ink); border-radius: 8px; background: #171916; color: #d7f44a; font: 11px/1.5 var(--mono); }
.data-sticker { position: absolute; right: -18px; bottom: -24px; z-index: 3; display: grid; place-items: center; width: 106px; height: 106px; border: 2px solid var(--ink); border-radius: 50%; background: #d7f44a; font: 900 12px/1.15 var(--mono); text-align: center; transform: rotate(-8deg); }

.sql-lab-shell { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr) 250px; gap: 18px; margin-top: 34px; }
.sql-panel { min-width: 0; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.sql-panel-bar { display: flex; align-items: center; justify-content: space-between; min-height: 46px; gap: 10px; padding: 9px 12px; border-bottom: 2px solid var(--ink); background: var(--paper-2); font: 800 11px var(--mono); text-transform: uppercase; }
.sql-panel-actions { display: flex; gap: 7px; }
.sql-panel-bar button, .sample-query { padding: 5px 9px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--white); font: 750 10px var(--mono); cursor: pointer; }
.sql-panel-bar button.primary { background: #39d98a; }
.sql-editor { display: block; width: 100%; min-height: 320px; padding: 18px; border: 0; outline: 0; resize: vertical; background: #171916; color: #f7f3e8; font: 13px/1.65 var(--mono); tab-size: 2; }
.sql-editor:focus-visible { outline: 3px solid var(--blue); outline-offset: -5px; }
.sql-samples { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px; border-top: 2px solid var(--ink); background: #dff8e9; }
.sample-query:hover { background: #d7f44a; }
.sql-results { min-height: 379px; padding: 16px; overflow: auto; }
.sql-result-meta { margin-bottom: 10px; color: var(--teal); font: 800 11px var(--mono); text-transform: uppercase; }
.sql-result-table { min-width: 100%; border: 2px solid var(--ink); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; font: 12px/1.4 var(--mono); }
.sql-result-table th { background: #39d98a; }
.sql-result-table th, .sql-result-table td { padding: 9px 11px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); white-space: nowrap; }
.sql-result-table th:last-child, .sql-result-table td:last-child { border-right: 0; }
.sql-result-table tbody tr:last-child td { border-bottom: 0; }
.sql-result-table tbody tr:nth-child(even) { background: #f0f8ee; }
.sql-error { padding: 15px; border: 2px solid var(--ink); border-radius: 9px; background: #ffb0a2; font: 12px/1.6 var(--mono); }
.sql-empty { padding: 36px 18px; color: var(--muted); text-align: center; }
.sql-help { margin: 0; padding: 11px 14px; border-top: 2px solid var(--ink); background: var(--paper-2); color: var(--muted); font: 10px/1.5 var(--mono); }
.sql-lab-shell .lab-guide { box-shadow: 4px 4px 0 var(--ink); }

@media (max-width: 1220px) {
  .sql-lab-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sql-lab-shell .lab-guide { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .home h1 { font-size: clamp(48px, 16vw, 68px); }
  .data-card { max-width: calc(100vw - 52px); margin-inline: auto; transform: none; }
  .data-card::before { inset: -12px 12px 12px -10px; transform: rotate(-1deg); }
  .schema-canvas { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .relation-line { display: none; }
  .query-strip { overflow-x: auto; white-space: nowrap; }
  .data-sticker { right: -8px; width: 84px; height: 84px; font-size: 10px; }
  .sql-lab-shell { grid-template-columns: 1fr; }
  .sql-lab-shell .lab-guide { grid-column: auto; order: -1; }
  .sql-editor { min-height: 260px; }
  .sql-results { min-height: 310px; }
}