:root { color-scheme: light; --ink:#172033; --muted:#667085; --line:#dfe5ee; --paper:#fff; --bg:#f4f7fb; --accent:#315efb; --accent-dark:#2446c4; --danger:#a12b2b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
a { color:var(--accent-dark); }
.site-header { align-items:center; background:var(--paper); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:1rem max(1rem, calc((100vw - 1180px)/2)); }
.brand { color:var(--ink); font-size:1.2rem; font-weight:800; text-decoration:none; }
nav { align-items:center; display:flex; flex-wrap:wrap; gap:1rem; }
nav a { font-size:.92rem; text-decoration:none; }
.container { margin:0 auto; max-width:1180px; padding:2rem 1rem 4rem; }
h1,h2 { line-height:1.15; margin-top:0; } h1 { font-size:clamp(1.8rem,4vw,2.7rem); }
.eyebrow { color:var(--accent-dark); font-size:.76rem; font-weight:800; letter-spacing:.1em; margin-bottom:.5rem; text-transform:uppercase; }
.page-heading,.section-heading { align-items:center; display:flex; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.workspace { align-items:start; display:grid; gap:1.25rem; grid-template-columns:minmax(0, 1fr) 290px; }
.card,.login-card { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(27,46,84,.05); padding:1.25rem; }
.hint,.muted { color:var(--muted); font-size:.92rem; }
label { display:block; font-weight:700; margin:.9rem 0 .35rem; }
input,textarea { border:1px solid #c9d1df; border-radius:8px; font:inherit; padding:.7rem .8rem; width:100%; }
textarea { min-height:230px; resize:vertical; }
.sql-editor { background:#101827; color:#edf3ff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.94rem; }
.button { background:var(--accent); border:0; border-radius:8px; color:white; cursor:pointer; display:inline-block; font:inherit; font-weight:700; margin-top:1rem; padding:.7rem 1rem; text-decoration:none; }
.button:hover { background:var(--accent-dark); } .button.secondary { background:#e8edff; color:var(--accent-dark); margin:0; }
.inline-form { display:inline; } .link-button { background:none; border:0; color:var(--accent-dark); cursor:pointer; font:inherit; padding:0; }
.notice { background:#eef3ff; border:1px solid #cbd8ff; border-radius:8px; margin-bottom:1rem; padding:.75rem 1rem; }
.error { background:#fff0f0; border:1px solid #efb4b4; border-radius:8px; color:var(--danger); margin-top:1rem; padding:.75rem 1rem; }
.query-list { list-style:none; margin:0; padding:0; } .query-list li { border-bottom:1px solid var(--line); padding:.7rem 0; } .query-list small { color:var(--muted); display:block; font-size:.78rem; }
.results-card { margin-top:1.25rem; } .section-heading span { color:var(--muted); font-size:.9rem; }
.table-scroll { overflow-x:auto; } table { border-collapse:collapse; min-width:100%; white-space:nowrap; } th,td { border-bottom:1px solid var(--line); padding:.65rem .75rem; text-align:left; } th { background:#f8faff; font-size:.82rem; }
.schema-diagram-scroll { margin-bottom:1rem; overflow-x:auto; padding-bottom:.4rem; text-align:center; white-space:nowrap; }
.schema-diagram { display:inline-block; margin:0; text-align:left; vertical-align:top; white-space:normal; }
.schema-diagram img { display:block; height:auto; max-width:none; width:auto; }
.login-card { margin:4rem auto; max-width:430px; } .login-card p { color:var(--muted); }
@media (max-width:760px) { .site-header { align-items:flex-start; flex-direction:column; gap:.75rem; } nav { gap:.65rem .9rem; } .container { padding-top:1.25rem; } .workspace { grid-template-columns:1fr; } .page-heading { align-items:flex-start; flex-direction:column; } .button.secondary { margin-top:0; } .schema-diagram-scroll { text-align:left; } }