/* =========================================================
   Neon Groove SQL Playground — bold synth-lounge theme
   Palette: deep plum canvas, magenta + mint neon, warm gold.
   Contrast targets WCAG AA against the dark surfaces.
   ========================================================= */

:root {
    --bg:        #140b1f;   /* deep plum-black */
    --surface:   #1e1330;
    --surface-2: #271840;
    --line:      #3a2a55;
    --text:      #f3ecff;   /* ~15:1 on --bg */
    --muted:     #b8a6d6;   /* ~7:1 on --bg  */
    --magenta:   #ff4d9d;
    --magenta-ink:#2a0716;
    --mint:      #4df0c4;
    --gold:      #ffcb47;
    --danger:    #ff8a8a;

    --radius: 14px;
    --shadow: 0 18px 50px -20px rgba(0,0,0,.8);
    --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    font-family: var(--sans);
    color: var(--text);
    background:
        radial-gradient(1100px 600px at 15% -10%, rgba(255,77,157,.20), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(77,240,196,.14), transparent 55%),
        var(--bg);
    min-height: 100vh;
    line-height: 1.5;
}

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.6rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
    flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .9rem; }
.brand-mark {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--magenta);
    text-shadow: 0 0 22px rgba(255,77,157,.7);
    animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.topbar h1 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: .5px;
    font-weight: 800;
}
.topbar h1 span { color: var(--mint); font-weight: 700; }
.tagline { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }

.engine-badge {
    font-family: var(--mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--gold);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem .9rem;
    display: flex;
    align-items: baseline;
    gap: .45rem;
    background: rgba(0,0,0,.25);
}
.engine-badge small { color: var(--muted); font-weight: 600; }

/* ---------- Layout ---------- */
.layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.4rem;
    padding: 1.4rem 1.6rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
}

/* ---------- Rail ---------- */
.rail { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 1rem; }
@media (max-width: 900px) { .rail { position: static; } }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1.2rem;
    box-shadow: var(--shadow);
}
.panel h2 {
    margin: 0 0 .4rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--mint);
}
.hint { margin: 0 0 .7rem; color: var(--muted); font-size: .85rem; }
.hint strong { color: var(--text); }

.schema-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.table-name {
    width: 100%;
    text-align: left;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: .5rem .65rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: border-color .15s, transform .1s;
}
.table-name:hover { border-color: var(--magenta); transform: translateX(2px); }
.table-name .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--magenta);
    box-shadow: 0 0 10px var(--magenta);
}
.cols { list-style: none; margin: .15rem 0 .4rem; padding: 0 0 0 1.1rem; display: none; }
.cols.open { display: block; }
.cols li {
    display: flex; justify-content: space-between; gap: .5rem;
    font-family: var(--mono); font-size: .78rem;
    padding: .12rem 0;
    border-bottom: 1px dashed rgba(255,255,255,.06);
}
.col-name { color: var(--text); }
.col-type { color: var(--muted); }

.examples { display: flex; flex-direction: column; gap: .5rem; }
.example {
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 9px;
    padding: .55rem .7rem;
    cursor: pointer;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    transition: border-color .15s, transform .1s, background .15s;
}
.example:hover { transform: translateX(2px); background: #2f1d4d; border-left-color: var(--magenta); }
.example-title { font-weight: 700; font-size: .9rem; }
.example-note { color: var(--muted); font-size: .78rem; }

/* ---------- Workspace ---------- */
.workspace { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.editor-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.editor-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .9rem;
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
    border-bottom: 1px solid var(--line);
}
.prompt {
    font-family: var(--mono); font-weight: 800; letter-spacing: .12em;
    color: var(--mint); font-size: .8rem;
}
.editor-actions { display: flex; gap: .5rem; }

textarea#sql {
    width: 100%;
    min-height: 210px;
    resize: vertical;
    border: 0;
    outline: none;
    padding: 1rem 1.1rem;
    background: transparent;
    color: var(--text);
    font-family: var(--mono);
    font-size: .95rem;
    line-height: 1.6;
    tab-size: 2;
}
textarea#sql::placeholder { color: #7c6a9c; }

.btn {
    font: inherit;
    font-weight: 700;
    border-radius: 9px;
    padding: .5rem .9rem;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: .4rem;
    transition: transform .1s, filter .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
    background: var(--magenta); color: var(--magenta-ink);
    box-shadow: 0 8px 24px -8px rgba(255,77,157,.8);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost {
    background: transparent; color: var(--muted);
    border-color: var(--line);
}
.btn.ghost:hover { color: var(--text); border-color: var(--magenta); }
kbd {
    font-family: var(--mono); font-size: .68rem;
    background: rgba(0,0,0,.35); color: var(--magenta-ink);
    border-radius: 4px; padding: .05rem .3rem;
    border: 1px solid rgba(0,0,0,.25);
}

/* ---------- Status ---------- */
.status { font-size: .85rem; min-height: 1.2em; color: var(--muted); font-family: var(--mono); }
.status.ok    { color: var(--mint); }
.status.error { color: var(--danger); }
.status.busy  { color: var(--gold); }

/* ---------- Results ---------- */
.results { min-width: 0; }
.result-error {
    background: rgba(255,138,138,.08);
    border: 1px solid rgba(255,138,138,.5);
    color: var(--danger);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    font-family: var(--mono);
    white-space: pre-wrap;
    word-break: break-word;
}
.result-note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    color: var(--mint);
    font-family: var(--mono);
}
.table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 60vh;
}
table.grid {
    border-collapse: collapse;
    width: 100%;
    font-size: .88rem;
}
table.grid th, table.grid td {
    padding: .55rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.grid thead th {
    position: sticky; top: 0;
    background: var(--surface-2);
    color: var(--gold);
    font-family: var(--mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    z-index: 1;
}
table.grid tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }
table.grid tbody tr:hover td { background: rgba(255,77,157,.10); }
table.grid td { font-family: var(--mono); color: var(--text); }
table.grid td.null { color: #7c6a9c; font-style: italic; }
.rownum { color: var(--muted); text-align: right; width: 1%; }