/* QPad – Gestaltung. Große Tippflächen (≥ 44 px), helles und dunkles Schema. */

:root {
    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-2: #f9fafb;
    --border: #dfe2e7;
    --text: #1d2129;
    --muted: #6b7280;
    --accent: #1f5fbf;
    --accent-text: #ffffff;
    --accent-soft: #e6eefb;
    --ok: #1e8e4f;
    --ok-soft: #e5f5ec;
    --err: #c4312b;
    --err-soft: #fdecea;
    --warn: #a36b00;
    --warn-soft: #fff5dc;
    --shadow: 0 8px 30px rgba(20, 25, 35, .18);

    --hl-keyword: #1f4fbf;
    --hl-type: #0b7a75;
    --hl-function: #7a3db8;
    --hl-string: #b5442a;
    --hl-number: #0b7a2f;
    --hl-comment: #7c8591;
    --hl-ident: #8a5a00;
    --hl-operator: #444b55;
    --hl-punct: #6b7280;

    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --app-height: 100dvh;
    color-scheme: light;
}

:root[data-effective="dark"] {
    --bg: #16181d;
    --panel: #1e2128;
    --panel-2: #23262e;
    --border: #343843;
    --text: #e6e8ec;
    --muted: #9aa1ad;
    --accent: #5b9bff;
    --accent-text: #0d1320;
    --accent-soft: #22324d;
    --ok: #4cc283;
    --ok-soft: #1c3427;
    --err: #ff7a70;
    --err-soft: #3d2222;
    --warn: #f0bd4f;
    --warn-soft: #3a3120;
    --shadow: 0 8px 30px rgba(0, 0, 0, .5);

    --hl-keyword: #79a8ff;
    --hl-type: #4fd1c5;
    --hl-function: #c99bff;
    --hl-string: #ff9e7a;
    --hl-number: #8fd694;
    --hl-comment: #7f8896;
    --hl-ident: #f0c674;
    --hl-operator: #c5cad3;
    --hl-punct: #9aa1ad;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; height: 100%; overflow: hidden;
    background: var(--bg); color: var(--text);
    font-family: var(--sans); font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
button { font: inherit; color: inherit; touch-action: manipulation; }
kbd.kbd-ret { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; min-width: 1.6em; }
kbd.kbd-ret svg { width: 1em; height: 1em; display: block; }
kbd {
    font-family: var(--sans); font-size: .8em; padding: 1px 6px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--panel-2);
}
code { font-family: var(--mono); font-size: .9em; }

.app {
    height: var(--app-height);
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* ---------- Kopfzeile ---------- */
.topbar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; min-height: 56px;
    background: var(--panel); border-bottom: 1px solid var(--border);
}
.spacer { flex: 1; }
.project-name {
    border: 0; background: none; font-weight: 650; font-size: 17px;
    padding: 8px 6px; border-radius: 8px; max-width: 34vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.project-name:active { background: var(--accent-soft); }
.saved-local { color: var(--muted); font-size: 13px; white-space: nowrap; }

.btn, .iconbtn {
    min-height: 44px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--panel-2); cursor: pointer; padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.iconbtn { min-width: 44px; padding: 0; font-size: 19px; }
.iconbtn.small { min-width: 40px; min-height: 40px; font-size: 18px; border: 0; background: none; }
.btn:active, .iconbtn:active { filter: brightness(.92); }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.disabled { opacity: .45; }

.btn.download { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; position: relative; }
.btn.download.dirty::after {
    content: ""; position: absolute; top: -4px; right: -4px; width: 13px; height: 13px;
    background: #f5a623; border: 2px solid var(--panel); border-radius: 50%;
}

/* ---------- Arbeitsbereich ---------- */
.workspace { flex: 1; min-height: 0; display: flex; position: relative; }

.sidebar {
    width: 290px; flex: none; display: flex; flex-direction: column;
    background: var(--panel); border-right: 1px solid var(--border); min-height: 0;
}
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 12px 6px 14px; }
.sidebar-title { font-weight: 650; }
.db-name { color: var(--muted); font-size: 13px; margin-top: 2px; word-break: break-word; }
.schema-tree { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 6px 20px; flex: 1; }
.sidebar-backdrop { display: none; }
.only-narrow { display: none; }

.app.sidebar-closed .sidebar { display: none; }

@media (max-width: 899px) {
    .dl-txt { display: none; }
    .saved-local { display: none; }
}

.tbl { border-radius: 10px; margin: 2px 0; }
.tbl-head { display: flex; align-items: center; min-height: 44px; }
.tbl-head button { border: 0; background: none; cursor: pointer; min-height: 44px; }
.tbl-head .toggle { width: 34px; color: var(--muted); transition: transform .15s; font-size: 14px; }
.tbl.open .toggle { transform: rotate(90deg); }
.tbl-head .tname { flex: 1; text-align: left; font-weight: 600; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-head .tsize { color: var(--muted); font-size: 12px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.tbl-head .show {
    font-size: 13px; color: var(--accent); padding: 0 10px; border-radius: 8px; min-height: 34px !important;
    border: 1px solid var(--border) !important;
}
.tag { font-size: 11px; font-weight: 500; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 0 4px; }
.cols { display: none; padding: 0 0 6px 30px; }
.tbl.open .cols { display: block; }
.col {
    display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; flex-wrap: wrap;
    border: 0; background: none; padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.col:active, .tbl-head .tname:active { background: var(--accent-soft); }
.col .pk { width: 18px; font-size: 12px; flex: none; }
.col .cname { font-family: var(--mono); font-size: 14px; }
.col .ctype { color: var(--muted); font-size: 12px; }
.col .fk { color: var(--hl-function); font-size: 12px; width: 100%; padding-left: 24px; }

/* ---------- Editor ---------- */
.center { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.editor-pane { flex: 1 1 0; min-height: 110px; display: flex; flex-direction: column; background: var(--panel); }

.tabbar { display: flex; align-items: center; border-bottom: 1px solid var(--border); padding-right: 4px; }
.tabs { display: flex; overflow-x: auto; flex: 1; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    border: 0; background: none; padding: 0 16px; min-height: 42px; cursor: pointer; white-space: nowrap;
    color: var(--muted); border-bottom: 3px solid transparent; font-size: 15px;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab-add { font-size: 21px; padding: 0 14px; }

.symbolbar {
    display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; border-bottom: 1px solid var(--border);
    background: var(--panel-2); scrollbar-width: none; flex: none;
}
.symbolbar::-webkit-scrollbar { display: none; }
.symbolbar button {
    flex: none; min-height: 38px; min-width: 40px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel); cursor: pointer;
    font-family: var(--mono); font-size: 15px; user-select: none; -webkit-user-select: none;
}
.symbolbar .sym { font-weight: 700; font-size: 17px; }
.symbolbar .kw { color: var(--hl-keyword); }
.symbolbar button:active { background: var(--accent-soft); }
.symbolbar button { position: relative; overflow: hidden; -webkit-touch-callout: none; touch-action: pan-x; }
/* Fortschrittsbalken beim langen Drücken (erst nach kurzer Verzögerung sichtbar) */
.symbolbar button.holding::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent);
    transform-origin: left; transform: scaleX(0); animation: qp-hold .4s linear .1s forwards;
}
@keyframes qp-hold { to { transform: scaleX(1); } }

/* Kopfzeile: Rückgängig/Wiederholen, dezenter Trennstrich, Glühbirne (links neben „Tabellen“) */
.topbar-gap { width: 6px; flex: none; }
.topbar-sep { width: 1px; height: 28px; background: var(--border); margin: 0 6px; flex: none; }
.histbtn { min-width: 48px; min-height: 44px; background: var(--panel-2); color: var(--text); }
.histbtn .jp-icon { width: 24px; height: 24px; }
.topbar .bulb { min-width: 48px; background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* Standard-Theme: Glühbirne wie in JPad – hell gelb gefüllt mit dunklem Symbol, dunkel ohne Füllung im Gelb des Start-Knopfs */
:root:not([data-skin]) .topbar .bulb { background: var(--marker); border: 1.5px solid var(--marker); color: var(--marker-ink); }
:root:not([data-skin])[data-effective="dark"] .topbar .bulb { background: transparent; border-color: transparent; color: var(--marker); }
:root:not([data-skin])[data-effective="dark"] .topbar .bulb:active { background: var(--marker-soft); filter: none; }
.topbar .bulb .jp-icon { width: 24px; height: 24px; }
.topbar .bulb:active { filter: brightness(1.15); }
@media (max-width: 520px) {
    .topbar { gap: 4px; padding-inline: 6px; }
    .topbar .histbtn, .topbar .bulb, .topbar .iconbtn { min-width: 40px; }
    .topbar-sep { margin: 0 1px; } .topbar-gap { display: none; }
    .project-name { min-width: 64px; font-size: 15px; padding-inline: 2px; }
}
/* Handy: „Code kopieren“ steht dann nur im Menü, damit der Projektname Platz hat */
@media (max-width: 430px) { #btnCopyAll { display: none; } }
.symhelp-info { width: min(380px, calc(100vw - 16px)); }
.symhelp-info-row { display: flex; align-items: flex-start; gap: 10px; }
.symhelp-info-row p { margin: 4px 0; font-size: 15px; line-height: 1.45; flex: 1; }
.symhelp-info-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-text);
    display: inline-flex; align-items: center; justify-content: center; }
.symhelp-info-icon svg { width: 20px; height: 20px; }

/* Kurzhilfe zur Symbolleiste */
.symhelp {
    position: fixed; z-index: 150; width: min(440px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow-y: auto;
    background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 12px 14px 10px; animation: qp-pop .14s ease-out;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
@keyframes qp-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.symhelp-head { display: flex; align-items: center; gap: 8px; }
.symhelp-title { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--hl-keyword); }
.symhelp-kind { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.symhelp-head .spacer { flex: 1; }
.symhelp-close { min-height: 34px; min-width: 34px; }
.symhelp-text { margin: 8px 0 10px; font-size: 15px; line-height: 1.45; }
.symhelp-ex { margin-top: 8px; }
.symhelp-ex-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 650;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.symhelp-insert { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--accent);
    background: var(--accent-soft); border: none; border-radius: 8px; min-height: 30px; padding: 0 10px; cursor: pointer; }
.symhelp-code { margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
    user-select: text; -webkit-user-select: text; }
.symhelp-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.symhelp-foot { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

.editor { flex: 1; min-height: 0; position: relative; }
.editor .cm-editor { height: 100%; font-size: var(--editor-font, 16px); background: var(--panel); color: var(--text); }
.editor .cm-editor.cm-focused { outline: none; }
.editor .cm-scroller { font-family: var(--mono); line-height: 1.55; -webkit-overflow-scrolling: touch; }
.editor .cm-content { padding: 8px 0 40px; caret-color: var(--accent); }
.editor .cm-gutters { background: var(--panel-2); border-right: 1px solid var(--border); color: var(--muted); }
.editor .cm-activeLineGutter { background: var(--accent-soft); color: var(--text); }
.editor .cm-line.cm-stmt-ok { background: var(--ok-soft); box-shadow: inset 4px 0 0 var(--ok); }
.editor .cm-line.cm-stmt-error { background: var(--err-soft); box-shadow: inset 4px 0 0 var(--err); }
.editor .cm-selectionBackground, .editor ::selection { background: rgba(31, 95, 191, .25); }
.editor .cm-matchingBracket { background: var(--accent-soft); outline: 1px solid var(--accent); }
.editor .cm-lintRange-error { background-image: none; text-decoration: wavy underline var(--err); text-underline-offset: 3px; }
.editor .cm-lintRange-warning { background-image: none; text-decoration: wavy underline var(--warn); text-underline-offset: 3px; }
.editor .cm-lintRange-info { background-image: none; text-decoration: dotted underline var(--muted); }
.editor .cm-gutter-lint { width: 14px; }

/* Vorschlagsliste */
.cm-tooltip { border: 1px solid var(--border) !important; background: var(--panel) !important; color: var(--text); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.cm-tooltip-autocomplete > ul { font-family: var(--mono) !important; max-height: 16em !important; }
.cm-tooltip-autocomplete > ul > li { padding: 8px 12px !important; font-size: 15px; line-height: 1.3; }
.cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--accent) !important; color: var(--accent-text) !important; }
.cm-completionDetail { font-family: var(--sans); font-style: normal !important; opacity: .7; margin-left: 1em; font-size: 13px; }
.cm-completionMatchedText { text-decoration: none !important; font-weight: 700; }
.cm-tooltip-lint { padding: 4px; font-family: var(--sans); }

/* ---------- Ausführen-Leiste ---------- */
.runbar {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: var(--panel); border-top: 1px solid var(--border);
}
/* Ausführen und Alle: gelb wie der Start-Knopf in JPad („Textmarker“), Alle mit Doppelpfeil wie dessen Zuklapp-Knopf */
:root { --marker: #FFD43B; --marker-ink: #1B1B12; --marker-soft: rgba(255, 212, 59, .42); }
:root[data-effective="dark"] { --marker-soft: rgba(255, 212, 59, .22); }
.btn.run {
    background: var(--marker); border: 0; color: var(--marker-ink); font-weight: 700; font-size: 17px;
    padding: 0 18px 0 14px; min-height: 46px; gap: 8px; border-radius: 14px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); transition: transform 120ms ease, opacity 150ms;
}
.btn.run .jp-icon { width: 24px; height: 24px; }
.btn.runall { padding: 0 16px 0 10px; gap: 4px; }
.btn.runall .jp-icon { stroke-width: 2.6; }
.btn.run:active { transform: translateY(1px) scale(.97); filter: none; }
.btn.run.disabled { opacity: .45; }
.btn.run.running { opacity: .7; }
.status {
    flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; padding: 6px 10px; border-radius: 8px;
    max-height: 46px; overflow: hidden; cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.status-ok { color: var(--muted); }
.status-error { background: var(--err-soft); color: var(--err); }
.status-warning { background: var(--warn-soft); color: var(--warn); }
.status-info { background: var(--accent-soft); }

.splitter {
    flex: none; height: 16px; display: flex; align-items: center; justify-content: center;
    cursor: row-resize; touch-action: none; background: var(--bg);
}
.splitter span { width: 54px; height: 5px; border-radius: 3px; background: var(--border); }

/* ---------- Ergebnisse ---------- */
.results {
    flex: 1 1 0; min-height: 90px; overflow: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 10px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.result-block { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; overflow: hidden; }
.result-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.result-sql { font-family: var(--mono); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message .result-sql, .error .result-sql { padding: 8px 12px 0; }
.result-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.result-msg { padding: 6px 12px 10px; font-size: 15px; }
.message .result-msg { color: var(--ok); font-weight: 600; }
.result-block.error { border-color: var(--err); background: var(--err-soft); cursor: pointer; }
.error .result-msg { color: var(--err); }
.result-time { color: var(--muted); font-size: 12px; text-align: right; padding: 0 4px; }

.table-wrap { overflow: auto; max-height: 60vh; -webkit-overflow-scrolling: touch; }
table { border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 100%; }
th, td { padding: 7px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
th { position: sticky; top: 0; background: var(--panel-2); font-weight: 650; z-index: 1; }
tbody tr:nth-child(even) td { background: var(--panel-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.null { color: var(--muted); font-style: italic; }
td.bool { color: var(--hl-number); }
.rownum { color: var(--muted); font-size: 12px; text-align: right; width: 1%; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px; font-size: 14px; color: var(--muted); }
.pager button { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
.pager button:disabled { opacity: .4; }
.empty { color: var(--muted); padding: 22px 12px; text-align: center; line-height: 1.6; }
.empty.small { font-size: 14px; padding: 14px 8px; text-align: left; }
/* Hinweis im noch leeren Ergebnisbereich: als Kasten in der Farbe des Editors, damit er auf jedem Hintergrund lesbar ist */
/* Mehrere Ergebnisse: Sprungleiste oben, Nummern, niedrigere Tabellen */
.results { position: relative; }
.result-nav {
    position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0 -10px; padding: 6px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border);
}
.result-nav-title { font-size: 13px; color: var(--muted); margin-right: 2px; }
.result-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 4px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px; background: var(--panel); font-size: 13px; color: var(--text);
}
.result-chip b, .result-nr {
    display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px;
    background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 700; flex: none;
}
.result-chip.is-error b { background: var(--err); }
.result-nr { margin-right: 2px; }
.message > .result-nr, .error > .result-nr { margin: 8px 0 0 12px; }
.results.is-multi .table-wrap { max-height: min(42vh, 320px); }
.results .empty-box { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px; margin: 10px 0; padding: 16px 14px; }

.hl-keyword { color: var(--hl-keyword); font-weight: 600; }
.hl-string { color: var(--hl-string); }
.hl-number { color: var(--hl-number); }
.hl-type { color: var(--hl-type); }
.hl-comment { color: var(--hl-comment); }

/* ---------- Menüs, Dialoge, Meldungen ---------- */
.overlay {
    position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 20, .35);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } }
.sheet {
    width: min(520px, 100%); max-height: calc(var(--app-height) - 32px); display: flex; flex-direction: column;
    background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
    animation: rise .18s ease;
}
@keyframes rise { from { transform: translateY(14px); opacity: .6; } }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 18px; font-weight: 650; font-size: 17px; border-bottom: 1px solid var(--border); }
.sheet-title .close { border: 0; background: none; min-width: 44px; min-height: 44px; font-size: 18px; cursor: pointer; color: var(--muted); }
.sheet-list { overflow: auto; padding: 6px; }
.sheet-sub { color: var(--muted); font-size: 13px; padding: 12px 12px 4px; }
.sheet-row { display: flex; align-items: center; gap: 4px; }
.sheet-item {
    flex: 1; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: none;
    min-height: 54px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
.sheet-item:active { background: var(--accent-soft); }
.sheet-item:disabled { opacity: .4; }
.sheet-item.danger { color: var(--err); }
.sheet-item .ico { width: 28px; text-align: center; font-size: 19px; flex: none; }
.sheet-item .txt { display: flex; flex-direction: column; }
.sheet-item small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sheet-secondary { border: 1px solid var(--border); background: none; border-radius: 8px; min-height: 40px; padding: 0 12px; color: var(--err); cursor: pointer; font-size: 14px; }
.dialog-body { padding: 6px 20px 12px; overflow: auto; line-height: 1.5; font-size: 15px; }
.dialog-body h3 { font-size: 15px; margin: 16px 0 4px; }
.dialog-body ol { padding-left: 22px; }
.dialog-body li { margin: 6px 0; }
.muted { color: var(--muted); font-size: 13px; }
.dialog-body a { color: var(--accent); }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px 16px; flex-wrap: wrap; }

.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    z-index: 200; max-width: min(560px, calc(100vw - 32px));
    background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 12px; box-shadow: var(--shadow);
    font-size: 15px; line-height: 1.4; transition: opacity .4s;
}
.toast.hide { opacity: 0; }

#wait, .loading {
    position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 14, 20, .3); flex-direction: column; gap: 14px;
}
.loading { background: var(--bg); color: var(--muted); }
.wait-box { background: var(--panel); padding: 22px 28px; border-radius: 16px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; max-width: 90vw; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.fatal { position: fixed; inset: auto 16px 16px; background: var(--err); color: #fff; padding: 14px; border-radius: 12px; z-index: 400; }

/* ---------- Symbole (gleicher Satz wie JPad) ---------- */
.jp-icon { width: 22px; height: 22px; flex: none; }
.btn .jp-icon { width: 20px; height: 20px; }
@media (max-width: 899px) { .hide-narrow { display: none; } }

/* ---------- Menü als Schublade von links (wie JPad / EOS Web) ---------- */
.qp-drawer-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(10, 14, 24, .38);
    opacity: 0; pointer-events: none; transition: opacity 200ms;
}
.qp-drawer {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 41;
    width: min(380px, 88vw);
    background: var(--panel); box-shadow: var(--shadow);
    transform: translateX(-105%);
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app.drawer-open .qp-drawer { transform: none; }
.app.drawer-open .qp-drawer-backdrop { opacity: 1; pointer-events: auto; }
.qp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 4px 18px; }
.qp-drawer-head .iconbtn { border: 0; background: none; }
.qp-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; }
.qp-brand-mark {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--accent); color: var(--accent-text);
    font-family: var(--mono); font-weight: 700; transform: rotate(-4deg);
}
.qp-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 24px; }
.qp-drawer h2 { font-size: 15px; font-weight: 700; color: var(--muted); margin: 22px 0 8px; }
.qp-h2-note { font-weight: 500; }
.qp-h2-note:not(:empty)::before { content: "· "; }
.qp-menu-actions { display: flex; flex-direction: column; gap: 2px; }
.qp-menu-actions button {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
    border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer; font-size: 16px;
}
.qp-menu-actions button:active { background: var(--panel-2); }
.qp-menu-actions button:disabled { opacity: .4; }
.qp-menu-actions .jp-icon { color: var(--accent); }
.qp-menu-actions button.danger, .qp-menu-actions button.danger .jp-icon { color: var(--err); }

.qp-projectlist { list-style: none; margin: 10px 0 0; padding: 0; }
.qp-projectitem { display: flex; align-items: center; border-radius: 12px; }
.qp-projectitem.is-current { background: var(--accent-soft); }
.qp-projectitem-open {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 0; background: none; text-align: left; cursor: pointer;
}
.qp-projectitem-open > span { display: flex; flex-direction: column; min-width: 0; }
.qp-projectitem.is-current .jp-icon { color: var(--accent); }
.qp-projectitem-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-projectitem-date { font-size: 13px; color: var(--muted); }
.qp-projectitem-del { border: 0 !important; background: none !important; color: var(--muted); }

.qp-segmented { display: flex; gap: 4px; padding: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; }
.qp-segmented button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 0 10px; border: 0; background: none; border-radius: 9px;
    color: var(--muted); font-size: 15px; cursor: pointer;
}
.qp-segmented button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.qp-segmented .jp-icon { width: 18px; height: 18px; }
.qp-setting-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.qp-stepper { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.qp-stepper button { min-width: 44px; min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; font-weight: 600; }
.qp-about { font-size: 14px; line-height: 1.5; color: var(--muted); }
.qp-about a { color: var(--accent); }

/* Kopier-Knöpfe in der Kopfzeile (wie JPad); auf schmalen Handys nur „alles kopieren“ */
@media (max-width: 520px) { #btnCopyScript { display: none; } }

/* =====================================================================
   Layouts wie in JPad
   - quer (iPad quer, Laptop; ab 900 px und breiter als hoch): Tabellen | Code | Lernpfad nebeneinander
   - hochkant (iPad hoch, Handy): eine Ansicht, unten die Reiter Lernpfad · Code · Tabellen
   ===================================================================== */
.lp-only { display: none !important; }
.app[data-lernpfad="1"] .lp-only { display: inline-flex !important; }
.layoutbtn[hidden] { display: none !important; }
.layoutbtn .jp-icon { width: 19px; height: 19px; }

.lp-pane { display: none; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.lp-head {
    display: flex; align-items: center; gap: 2px; min-height: 45px; padding: 0 4px 0 12px;
    border-bottom: 1px solid var(--border); background: var(--panel);
}
.lp-head-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 650; }
.lp-head-title .jp-icon { color: var(--accent); }
.lp-head-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-host { flex: 1; min-height: 0; position: relative; background: var(--panel); }
.lp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--panel); }

/* --- quer --- */
.app[data-layout="split"] .bottomnav { display: none; }
.app[data-layout="split"][data-lernpfad="1"] .lp-pane { display: flex; flex: none; width: 38%; border-left: 1px solid var(--border); }
.app[data-layout="split"][data-lernpfad="1"][data-lp="wide"] .lp-pane { width: 50%; }
.app[data-layout="split"][data-lernpfad="1"][data-lp="full"] .lp-pane { flex: 1; width: auto; border-left: 0; }
.app[data-layout="split"][data-lernpfad="1"][data-lp="full"] :is(.sidebar, .center) { display: none !important; }
.app[data-layout="split"][data-lernpfad="1"][data-lp="hidden"] .lp-pane { display: none; }
.app[data-layout="split"][data-lernpfad="1"] .sidebar { width: 250px; }
.app[data-layout="split"] .sidebar-backdrop, .app[data-layout="split"] #btnSidebarClose { display: none; }

/* --- hochkant --- */
.app[data-layout="tabs"] .sidebar { display: none !important; }
.app[data-layout="tabs"] .sidebar-backdrop { display: none !important; }
.app[data-layout="tabs"] #btnSidebarClose { display: none; }
.app[data-layout="tabs"] #btnEditorWide { display: none !important; }
.app[data-layout="tabs"][data-view="tabellen"] .sidebar { display: flex !important; flex: 1; width: auto; border-right: 0; }
.app[data-layout="tabs"][data-view="tabellen"] .center { display: none; }
.app[data-layout="tabs"][data-lernpfad="1"][data-view="lernpfad"] .lp-pane { display: flex; flex: 1; }
.app[data-layout="tabs"][data-lernpfad="1"][data-view="lernpfad"] .center { display: none; }
.app[data-layout="tabs"][data-lernpfad="1"][data-view="lernpfad"] #btnLpFull,
.app[data-layout="tabs"][data-lernpfad="1"][data-view="lernpfad"] #btnLpWide { display: none !important; }
/* Tastatur bleibt beim Wechsel zu Lernpfad/Tabellen offen: der Editor wird unsichtbar „geparkt“ (wie JPad) */
.app[data-kbhold="true"][data-layout="tabs"]:not([data-view="code"]) .center {
    display: flex; position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; overflow: hidden; pointer-events: none; z-index: -1;
}
.app[data-layout="tabs"] .results { padding-bottom: 24px; }

.bottomnav {
    display: none; flex: none;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 0 8px env(safe-area-inset-bottom);
    background: var(--panel); border-top: 1px solid var(--border);
}
.app[data-layout="tabs"] .bottomnav { display: flex; }
.bottomnav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: none; font-size: 12.5px; color: var(--muted); cursor: pointer; min-height: 44px;
    -webkit-user-select: none; user-select: none;
}
.app[data-lernpfad="1"] .bottomnav .lp-only { display: flex !important; }
.bottomnav button[aria-current="true"] { color: var(--accent); font-weight: 700; }
.bottomnav button[aria-current="true"] .jp-icon { stroke-width: 2.4; }
/* Mit offener Bildschirmtastatur: auf dem iPad flacher (Symbol und Text nebeneinander), auf dem Handy ausgeblendet */
html.keyboard-open:not(.phone) .bottomnav { height: 42px; padding-bottom: 0; }
html.keyboard-open:not(.phone) .bottomnav button { flex-direction: row; gap: 6px; }
html.phone.keyboard-open .app[data-view="code"] .bottomnav { display: none; }

/* Menü: Gruppen wie in JPad */
.qp-menu-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ---------- Hinweis „Dreh dein iPad hochkant“ (wie JPad) ---------- */
.overlay.is-rotate-layer { align-items: flex-start; padding-top: max(10px, env(safe-area-inset-top)); }
.sheet.is-rotate { width: min(720px, calc(100vw - 24px)); padding: 14px 18px 12px; }
.rotate-row { display: flex; gap: 16px; align-items: center; }
.rotate-anim { flex: none; width: 96px; color: var(--accent); }
.rotate-anim svg { width: 96px; height: auto; display: block; overflow: visible; }
.rotate-text h2 { margin: 0 0 4px; font-size: 18px; }
.rotate-text p { margin: 0; font-size: 15px; line-height: 1.45; }
.rotate-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.rotate-foot label { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rotate-foot input { width: 20px; height: 20px; accent-color: var(--accent); }
.rot-body { fill: var(--panel-2); stroke: var(--text); stroke-width: 4; }
.rot-screen { fill: var(--accent-soft); }
.rot-kb rect { fill: var(--border); }
.rot-kb path { stroke: var(--panel); stroke-width: 1.4; }
.rot-device { transform-box: view-box; transform-origin: 110px 93px; animation: qp-rot-turn 3.2s ease-in-out infinite; }
.rot-arrows { opacity: .25; animation: qp-rot-arrows 3.2s ease-in-out infinite; }
.rot-kb { animation: qp-rot-kb 3.2s ease-in-out infinite; }
@keyframes qp-rot-turn { 0%, 22% { transform: rotate(0deg); } 52%, 88% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes qp-rot-arrows { 0%, 18% { opacity: .2; } 30%, 48% { opacity: 1; } 60%, 100% { opacity: .2; } }
@keyframes qp-rot-kb { 0%, 20% { opacity: 1; } 32%, 94% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rot-device { animation: none; transform: rotate(-90deg); } .rot-arrows, .rot-kb { animation: none; } }

/* Meldungen im Reiter-Layout über der unteren Navigation */
html[data-layout="tabs"] .toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
/* hochkant: Kopf der Lernpfad-Ansicht entfällt (der Reiter unten sagt schon, wo man ist), wie in JPad */
.app[data-layout="tabs"] .lp-head { display: none; }

/* =====================================================================
   Themes wie in JPad (Menü → Darstellung, gemerkt in qpad.skin), alle folgen Hell/Dunkel/System.
   Standard · Blockwelt · Hund · Schaf · Flach · Hacker · Pink
   ===================================================================== */

/* ---------- Auswahl im Menü ---------- */
.qp-skin-picker { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 4px; }
.qp-skin-picker::-webkit-scrollbar { display: none; }
.qp-skin-picker button {
    flex: none; display: grid; place-items: center; padding: 4px; cursor: pointer;
    border: 2px solid transparent; border-radius: 12px; background: transparent;
}
.qp-skin-picker button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.qp-skin-swatch {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: var(--sw-bg); color: var(--sw-fg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.qp-skin-swatch .jp-icon { width: 24px; height: 24px; }

/* ---------- Blockwelt: alles pixelig und kantig wie in einem Blockspiel ----------
   Texturen (Gras, Erde, Steinmauer, Holz): selbst erzeugte 32×32-Pixelbilder in tiles/, 4× ohne Glättung vergrößert
   und mit 64 px angezeigt – auf Retina-Bildschirmen also Pixel für Pixel scharf (vorlagen-quellen/erzeuge_tiles.py). */
:root[data-skin="block"] {
    --sans: "Pixelify Sans", "Courier New", monospace;
    --mono: "VT323", "Share Tech Mono", ui-monospace, Menlo, monospace;
    --t-grass: url("tiles/grass.png"); --t-dirt: url("tiles/dirt.png"); --t-stone: url("tiles/stonebricks.png"); --t-planks: url("tiles/planks.png");
    --bg: #7d7d7d; --panel: #f3ead7; --panel-2: #e6d8b9; --border: #2a1d10;
    --text: #1e1a14; --muted: #5a4a36;
    --accent: #3f8f2a; --accent-text: #ffffff; --accent-soft: #d3ebbd;
    --ok: #3f8f2a; --ok-soft: #d6efc4; --err: #b3261e; --err-soft: #f6d3cf; --warn: #9a6a00; --warn-soft: #fbe9b7;
    --hl-keyword: #2b4fb8; --hl-type: #0f7f7a; --hl-function: #8a2be2; --hl-string: #a8431c; --hl-number: #2e7d32;
    --hl-comment: #7a6a55; --hl-ident: #8a5a00; --hl-operator: #2a1d10; --hl-punct: #5a4a36;
    --shadow: 0 0 0 3px #000, 6px 6px 0 rgba(0, 0, 0, .35);
    --bevel: inset -3px -3px 0 rgba(0, 0, 0, .35), inset 3px 3px 0 rgba(255, 255, 255, .45);
    --bevel-down: inset 3px 3px 0 rgba(0, 0, 0, .35), inset -3px -3px 0 rgba(255, 255, 255, .25);
    color-scheme: light;
}
:root[data-skin="block"][data-effective="dark"] {
    --t-stone: url("tiles/deepslatebricks.png"); --t-planks: url("tiles/darkplanks.png");
    --bg: #2f2f37; --panel: #1f1a14; --panel-2: #2c241a; --border: #000000;
    --text: #f1e7d0; --muted: #bba886;
    --accent: #6fcf3f; --accent-text: #10200a; --accent-soft: #24401a;
    --ok: #6fcf3f; --ok-soft: #1f3a17; --err: #ff6b5e; --err-soft: #4a1d1a; --warn: #ffcf4a; --warn-soft: #3d3112;
    --hl-keyword: #7aa2ff; --hl-type: #5ee6dc; --hl-function: #c792ff; --hl-string: #ffa36b; --hl-number: #8ee28a;
    --hl-comment: #9a8a72; --hl-ident: #ffd75e; --hl-operator: #e9dcc0; --hl-punct: #bba886;
    color-scheme: dark;
}
:root[data-skin="block"] *, :root[data-skin="block"] *::before, :root[data-skin="block"] *::after { border-radius: 0 !important; }
:root[data-skin="block"] :is(.app, .topbar, .bottomnav, .sidebar, .lp-head, .tabbar, .runbar, .gutter, .editor .cm-gutters) { image-rendering: pixelated; }
:root[data-skin="block"] .app { background: var(--t-stone) 0 0 / 64px 64px, var(--bg); }

/* Kopfzeile und untere Reiter: Grasblock */
:root[data-skin="block"] :is(.topbar, .bottomnav) {
    background: var(--t-grass) 0 0 / 64px 64px repeat-x, var(--t-dirt) 0 0 / 64px 64px;
    border-bottom: 3px solid #000; color: #fff;
}
:root[data-skin="block"] .bottomnav { border-top: 3px solid #000; border-bottom: 0; background: var(--t-dirt) 0 0 / 64px 64px; }
:root[data-skin="block"] :is(.project-name, .saved-local, .bottomnav button) { color: #fff; text-shadow: 2px 2px 0 #000; }
:root[data-skin="block"] .project-name { font-size: 21px; font-weight: 700; }
:root[data-skin="block"] .bottomnav button[aria-current="true"] { color: #ffe14a; }
:root[data-skin="block"] .bottomnav .jp-icon { filter: drop-shadow(2px 2px 0 #000); }

/* Knöpfe: kantig mit 3D-Rand wie Steinknöpfe */
:root[data-skin="block"] :is(.btn, .iconbtn:not(.small), .symbolbar button, .tbl-head .show, .pager button, .qp-stepper button, .sheet-secondary) {
    background: #c6c6c6; color: #1e1a14; border: 2px solid #000; box-shadow: var(--bevel); font-family: var(--sans);
}
:root[data-skin="block"] :is(.btn, .iconbtn:not(.small), .symbolbar button, .tbl-head .show, .pager button, .qp-stepper button):active { box-shadow: var(--bevel-down); filter: none; }
:root[data-skin="block"] .topbar .iconbtn.small { color: #fff; filter: drop-shadow(2px 2px 0 #000); }
:root[data-skin="block"] .symbolbar .kw { color: #24419a; }
:root[data-skin="block"] .symbolbar .sym { font-family: var(--mono); font-size: 22px; }
:root[data-skin="block"] .topbar .bulb { background: #ffd83d; color: #3a2a00; border: 2px solid #000; box-shadow: var(--bevel); }
:root[data-skin="block"] .btn.run { background: #f2c230; color: #2a1d00; font-size: 19px; border: 2px solid #000; box-shadow: var(--bevel); }
:root[data-skin="block"] .btn.run:active { box-shadow: var(--bevel-down); transform: none; }
:root[data-skin="block"] .btn.download { background: #4fd6d6; color: #08302f; }
:root[data-skin="block"] .btn.download.dirty::after { background: #ff4b3e; border: 2px solid #000; }
:root[data-skin="block"] .btn.ghost.disabled { opacity: .55; }
:root[data-skin="block"] .qp-segmented { background: #8b8b8b; border: 2px solid #000; }
:root[data-skin="block"] .qp-segmented button { color: #1e1a14; }
:root[data-skin="block"] .qp-segmented button[aria-pressed="true"] { background: #c6c6c6; box-shadow: var(--bevel); }

/* Flächen: Pergament mit schwarzem Pixelrand, Seitenleisten aus Holz */
:root[data-skin="block"] :is(.sidebar, .lp-pane) { border-color: #000; border-width: 3px; }
:root[data-skin="block"] .sidebar { background: linear-gradient(color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--panel) 82%, transparent)), var(--t-planks) 0 0 / 64px 64px; }
:root[data-skin="block"] :is(.lp-head, .tabbar, .runbar) { background: var(--t-planks) 0 0 / 64px 64px; border-color: #000; }
:root[data-skin="block"] :is(.lp-head-title, .tab, .status, .tabbar .iconbtn.small) { color: #fff; text-shadow: 2px 2px 0 #000; }
:root[data-skin="block"] .tab.active { color: #ffe14a; border-bottom-color: #ffe14a; }
/* Meldungen in der Statuszeile: dunkle Schrift auf hellem Grund (hell), helle Schrift auf dunklem Grund (dunkel).
   Bewusst mit .runbar davor: die Regel für weiße Schrift auf Holz oben ist durch :is(…) sehr spezifisch. */
:root[data-skin="block"] .runbar .status:is(.status-error, .status-warning, .status-info),
:root[data-skin="block"] .runbar .status:is(.status-error, .status-warning, .status-info) * { text-shadow: none; }
:root[data-skin="block"] .runbar .status:is(.status-error, .status-warning, .status-info) { border: 2px solid #000; }
:root[data-skin="block"] .runbar .status.status-error { color: #5c0f0a; }
:root[data-skin="block"] .runbar .status.status-warning { color: #4a3300; }
:root[data-skin="block"] .runbar .status.status-info { color: var(--text); }
:root[data-skin="block"][data-effective="dark"] .runbar .status.status-error { color: #ffd2cc; }
:root[data-skin="block"][data-effective="dark"] .runbar .status.status-warning { color: #ffe9a8; }
:root[data-skin="block"] .lp-head-title .jp-icon { color: #ffe14a; filter: drop-shadow(2px 2px 0 #000); }
:root[data-skin="block"] .editor .cm-gutters { background: var(--t-planks) 0 0 / 64px 64px; color: #fff; border-right: 3px solid #000; text-shadow: 2px 2px 0 #000; }
:root[data-skin="block"] .editor .cm-editor { font-size: calc(var(--editor-font, 16px) * 1.3); }
:root[data-skin="block"] .editor .cm-cursor { border-left: 10px solid color-mix(in srgb, var(--accent) 55%, transparent); }
:root[data-skin="block"] .editor .cm-line.cm-stmt-ok { box-shadow: inset 6px 0 0 var(--ok); }
:root[data-skin="block"] .editor .cm-line.cm-stmt-error { box-shadow: inset 6px 0 0 var(--err); }
:root[data-skin="block"] :is(.result-block, .sheet, .symhelp, .tbl, .toast, .empty-box) { border: 3px solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); }
:root[data-skin="block"] .results { background: transparent; }
:root[data-skin="block"] :is(.result-time, .splitter) { color: #fff; text-shadow: 2px 2px 0 #000; background: transparent; }
:root[data-skin="block"] .splitter span { background: #000; height: 6px; }
:root[data-skin="block"] :is(table, .result-sql, .cm-tooltip) { font-family: var(--mono); font-size: 17px; }
:root[data-skin="block"] th { background: var(--panel-2); border-bottom: 3px solid #000; }
:root[data-skin="block"] .toast { background: #1e1a14; color: #fff; font-family: var(--sans); }
:root[data-skin="block"] .qp-drawer { border-right: 3px solid #000; }
:root[data-skin="block"] .qp-brand-mark {
    transform: none; color: #fff; text-shadow: 2px 2px 0 #000; border: 2px solid #000;
    background: linear-gradient(#5f9f35 0 35%, #866043 35% 100%);
}
:root[data-skin="block"] :is(.qp-brand, .qp-drawer h2, .sheet-title) { font-family: var(--sans); }
:root[data-skin="block"] ::selection { background: rgba(79, 214, 214, .45); }
:root[data-skin="block"] .editor .cm-selectionBackground { background: rgba(79, 214, 214, .4) !important; }

/* ---------- Flach, Hacker, Pink: feine Linien, spitze Ecken, Chakra Petch / Share Tech Mono ---------- */
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) {
    --sans: "Chakra Petch", "Share Tech Mono", ui-monospace, Menlo, monospace;
    --mono: "Share Tech Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) *,
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) *::before,
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) *::after { border-radius: 0 !important; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .project-name { letter-spacing: .04em; text-transform: uppercase; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .topbar .iconbtn,
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .tabbar .iconbtn { color: var(--accent); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .btn:not(.download):not(.run):not(.primary) { background: transparent; border-color: var(--border); color: var(--accent); }
:root:is([data-skin="hacker"], [data-skin="pink"]) { --marker: #F2FF3A; --marker-ink: #121400; }
:root:is([data-skin="hacker"], [data-skin="pink"])[data-effective="light"] { --marker: #FFD43B; --marker-ink: #1B1B12; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .btn.run { box-shadow: 0 0 0 1px #E0B400; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .symbolbar button:not(.bulb) { background: transparent; border-color: var(--border); box-shadow: none; color: var(--accent); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .symbolbar .kw { color: var(--hl-keyword); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .symbolbar button:not(.bulb):active { background: var(--accent); color: var(--accent-text); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .tab.active { color: var(--accent); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .qp-segmented { background: transparent; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .qp-segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); box-shadow: none; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .editor .cm-cursor { border-left: 9px solid color-mix(in srgb, var(--accent) 45%, transparent); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) :is(.qp-drawer, .sheet, .symhelp) { border: 1px solid var(--accent); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .result-block { border-color: var(--border); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .app {
    background:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--grid) 3.5%, transparent) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, color-mix(in srgb, var(--grid) 6%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(0deg, color-mix(in srgb, var(--grid) 6%, transparent) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--bg);
}
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .results { background: transparent; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .splitter { background: transparent; }

/* Flach hell: Weiß und Blau */
:root[data-skin="flat"] {
    --grid: #0050F0;
    --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #F1F5FF; --border: #BCCDF2;
    --text: #0A1F4D; --muted: #4D6694;
    --accent: #0050F0; --accent-text: #FFFFFF; --accent-soft: #E2EBFF;
    --ok: #0050F0; --ok-soft: #E2EBFF; --err: #D61F69; --err-soft: #FDE6EF; --warn: #B76E00; --warn-soft: #FFF3DC;
    --shadow: 0 0 0 1px #0050F0, 0 12px 28px -10px rgba(0, 80, 240, .25);
    --hl-keyword: #C0158A; --hl-type: #00809E; --hl-function: #0040C8; --hl-string: #B25400; --hl-number: #C2410C;
    --hl-comment: #7489B6; --hl-ident: #2B54C9; --hl-operator: #56709F; --hl-punct: #56709F;
    color-scheme: light;
}
/* Flach dunkel: Navy, weiße Linien, Hacker-Schriftfarben */
:root[data-skin="flat"][data-effective="dark"] {
    --grid: #FFFFFF;
    --bg: #000080; --panel: #000080; --panel-2: #00006A; --border: #FFFFFF;
    --text: #D7FFE6; --muted: #A9C8FF;
    --accent: #FFFFFF; --accent-text: #000080; --accent-soft: rgba(255, 255, 255, .16);
    --ok: #00FF9C; --ok-soft: rgba(0, 255, 156, .14); --err: #FF5CA8; --err-soft: #2A0A4A; --warn: #FFB020; --warn-soft: rgba(255, 176, 32, .15);
    --shadow: 0 0 0 1px #FFFFFF, 0 14px 30px -12px rgba(0, 0, 0, .6);
    --hl-keyword: #FF2EC4; --hl-type: #00E5FF; --hl-function: #7CFFCB; --hl-string: #F2FF3A; --hl-number: #FF9F1C;
    --hl-comment: #8FA6E8; --hl-ident: #B8FF5A; --hl-operator: #C9D6FF; --hl-punct: #C9D6FF;
    color-scheme: dark;
}
:root[data-skin="flat"][data-effective="dark"] .topbar .bulb { background: #FFFFFF; color: #000080; }

/* Hacker: schwarz und Neon-Grün (hell: weiß mit kräftigeren Hacker-Farben) */
:root[data-skin="hacker"] {
    --grid: #00FF9C;
    --bg: #020604; --panel: #050C08; --panel-2: #0A1710; --border: #12462C;
    --text: #D7FFE6; --muted: #5FB386;
    --accent: #00FF9C; --accent-text: #001A0E; --accent-soft: #04291A;
    --ok: #00FF9C; --ok-soft: #04291A; --err: #FF2E88; --err-soft: #2A0716; --warn: #FFB020; --warn-soft: #2A1F05;
    --shadow: 0 0 0 1px #00FF9C, 0 0 28px rgba(0, 255, 156, .25);
    --hl-keyword: #FF2EC4; --hl-type: #00E5FF; --hl-function: #7CFFCB; --hl-string: #F2FF3A; --hl-number: #FF9F1C;
    --hl-comment: #2F7A52; --hl-ident: #B8FF5A; --hl-operator: #6FA88A; --hl-punct: #6FA88A;
    color-scheme: dark;
}
:root[data-skin="hacker"][data-effective="light"] {
    --grid: #00B86E;
    --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #EEFBF4; --border: #B5E6CC;
    --text: #06281A; --muted: #2C7A54;
    --accent: #00B86E; --accent-text: #FFFFFF; --accent-soft: #DDF8EA;
    --ok: #00B86E; --ok-soft: #DDF8EA; --err: #E0106A; --err-soft: #FDE3EE; --warn: #B76E00; --warn-soft: #FFF3DC;
    --shadow: 0 0 0 1px #00B86E, 0 0 28px rgba(0, 184, 110, .18);
    --hl-keyword: #E0109F; --hl-type: #0093B0; --hl-function: #0E9F6E; --hl-string: #8C8200; --hl-number: #D97800;
    --hl-comment: #6E9C84; --hl-ident: #4F8F00; --hl-operator: #5E8A74; --hl-punct: #5E8A74;
    color-scheme: light;
}

/* Pink: wie Hacker, alles Grüne pink, Schlüsselwörter grün */
:root[data-skin="pink"] {
    --grid: #FF2EC4;
    --bg: #060204; --panel: #0C050A; --panel-2: #170A13; --border: #46123A;
    --text: #FFD7F2; --muted: #B35F9C;
    --accent: #FF2EC4; --accent-text: #1A0012; --accent-soft: #290420;
    --ok: #FF2EC4; --ok-soft: #290420; --err: #FF2E88; --err-soft: #2A0716; --warn: #FFB020; --warn-soft: #2A1F05;
    --shadow: 0 0 0 1px #FF2EC4, 0 0 28px rgba(255, 46, 196, .25);
    --hl-keyword: #00FF9C; --hl-type: #00E5FF; --hl-function: #FF7CDB; --hl-string: #F2FF3A; --hl-number: #FF9F1C;
    --hl-comment: #7A2F62; --hl-ident: #FFA0E8; --hl-operator: #A86F96; --hl-punct: #A86F96;
    color-scheme: dark;
}
:root[data-skin="pink"][data-effective="light"] {
    --grid: #E0109F;
    --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #FDEEF8; --border: #F0BEE2;
    --text: #2A0620; --muted: #7A2C66;
    --accent: #E0109F; --accent-text: #FFFFFF; --accent-soft: #FDE3F5;
    --ok: #E0109F; --ok-soft: #FDE3F5; --err: #E0106A; --err-soft: #FDE3EE; --warn: #B76E00; --warn-soft: #FFF3DC;
    --shadow: 0 0 0 1px #E0109F, 0 0 28px rgba(224, 16, 159, .18);
    --hl-keyword: #00B86E; --hl-type: #0093B0; --hl-function: #C21088; --hl-string: #8C8200; --hl-number: #D97800;
    --hl-comment: #9C6E8E; --hl-ident: #B0408F; --hl-operator: #8A5E7C; --hl-punct: #8A5E7C;
    color-scheme: light;
}
/* Neon-Leuchten nur im Dunkeln */
:root:is([data-skin="hacker"], [data-skin="pink"]):not([data-effective="light"]) .editor .cm-content { text-shadow: 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
:root:is([data-skin="hacker"], [data-skin="pink"]):not([data-effective="light"]) :is(.tab.active, .bottomnav button[aria-current="true"]) { text-shadow: 0 0 8px var(--accent); }
:root:is([data-skin="hacker"], [data-skin="pink"]):not([data-effective="light"]) .btn.run { box-shadow: 0 0 0 1px var(--marker), 0 0 16px rgba(242, 255, 58, .45); }
:root[data-skin] ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-skin] .editor .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; }

/* ---------- Hund und Schaf: Farbwelten der JPad-Lernpfade „Bello lernt Java“ und „Der Schaf-Konstruktor“ ---------- */
:root:is([data-skin="hund"], [data-skin="schaf"]) {
    --sans: "Atkinson Hyperlegible", -apple-system, "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --err: #c23b3b; --err-soft: #fbe0e0; --ok: #2f8a4a; --ok-soft: #dcf1e1; --warn: #a36b00; --warn-soft: #fff0c8;
    --hl-keyword: #8a3bc9; --hl-type: #b2437a; --hl-string: #c2551c; --hl-number: #2b7d4a; --hl-comment: #9a8692; --hl-function: #4b4fd0;
    color-scheme: light;
}
:root[data-skin="hund"] {
    --bg: #f4faf5; --panel: #ffffff; --panel-2: #e5f3ea; --border: #cfe5d7; --text: #17302a; --muted: #4f6b62;
    --accent: #1f8a6a; --accent-text: #ffffff; --accent-soft: #d4efe3; --hl-ident: #17302a; --hl-operator: #4f6b62; --hl-punct: #4f6b62;
}
:root[data-skin="schaf"] {
    --bg: #fff6ef; --panel: #ffffff; --panel-2: #fdebdd; --border: #f0d5c3; --text: #2b1d36; --muted: #6f5a6c;
    --accent: #e05d26; --accent-text: #ffffff; --accent-soft: #fde0cc; --hl-ident: #2b1d36; --hl-operator: #6f5a6c; --hl-punct: #6f5a6c;
}
:root:is([data-skin="hund"], [data-skin="schaf"])[data-effective="dark"] {
    --err: #ff8a8a; --err-soft: #452326; --ok: #6fd08b; --ok-soft: #1f3a2a; --warn: #ffc35c; --warn-soft: #3a2c14;
    --hl-keyword: #d6a3ff; --hl-type: #ff8fbf; --hl-string: #ffab78; --hl-number: #7fd69a; --hl-comment: #9b8aa3; --hl-function: #a9adff;
    color-scheme: dark;
}
:root[data-skin="hund"][data-effective="dark"] {
    --bg: #0f1a17; --panel: #152420; --panel-2: #1c302a; --border: #2a4a3f; --text: #e8f5ef; --muted: #a9c4ba;
    --accent: #4fd1a5; --accent-text: #0f1a17; --accent-soft: #173a30; --hl-ident: #e8f5ef; --hl-operator: #a9c4ba; --hl-punct: #a9c4ba;
}
:root[data-skin="schaf"][data-effective="dark"] {
    --bg: #1a1430; --panel: #231b3c; --panel-2: #2d244d; --border: #3c305e; --text: #fbeee6; --muted: #c8b4c6;
    --accent: #ff8a4f; --accent-text: #1a1430; --accent-soft: #46283a; --hl-ident: #fbeee6; --hl-operator: #c8b4c6; --hl-punct: #c8b4c6;
}
:root:is([data-skin="hund"], [data-skin="schaf"]) :is(.app, .editor-pane) {
    background: linear-gradient(180deg, color-mix(in srgb, #5457c4 22%, var(--bg)) 0%, color-mix(in srgb, #c2477a 16%, var(--bg)) 45%, color-mix(in srgb, #f0a12e 18%, var(--bg)) 85%, var(--bg) 100%);
}
:root:is([data-skin="hund"], [data-skin="schaf"])[data-effective="dark"] :is(.app, .editor-pane) {
    background: linear-gradient(180deg, color-mix(in srgb, #a8abff 22%, var(--bg)) 0%, color-mix(in srgb, #ff7fae 16%, var(--bg)) 45%, color-mix(in srgb, #ffc35c 18%, var(--bg)) 85%, var(--bg) 100%);
}
:root:is([data-skin="hund"], [data-skin="schaf"]) .editor :is(.cm-editor, .cm-gutters) { background: transparent; }
:root:is([data-skin="hund"], [data-skin="schaf"]) :is(.topbar, .runbar, .bottomnav, .tabbar) { background: color-mix(in srgb, var(--panel) 70%, transparent); }
:root:is([data-skin="hund"], [data-skin="schaf"]) :is(.project-name, .qp-brand, .sidebar-title, .lp-head-title) { font-family: "Pixelify Sans", var(--sans); letter-spacing: .02em; }
:root:is([data-skin="hund"], [data-skin="schaf"]) .project-name { font-size: 19px; }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .topbar .bulb { color: var(--accent-text); }
:root:is([data-skin="flat"], [data-skin="hacker"], [data-skin="pink"]) .topbar .histbtn { background: transparent; border-color: var(--border); color: var(--accent); }