/* Warm, quiet workspace chrome. Canvas content keeps its own typography. */
:root {
  --ws-paper: #f5f3ee;
  --ws-surface: #fffefa;
  --ws-ink: #233633;
  --ws-muted: #6b746d;
  --ws-line: #dedfd6;
  --ws-teal: #17695f;
  --ws-teal-soft: #e7f0e9;
  --ws-danger: #a53d35;
}
html { min-height: 100%; height: auto; }
body.workspace-body { min-height: 100vh; height: auto; background: var(--ws-paper); color: var(--ws-ink); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; }
.workspace-body #header { position: relative; flex: none; z-index: 50; }
.workspace-body .navbar { min-height: 66px; padding: 10px 24px; border-bottom: 1px solid var(--ws-line); background: var(--ws-surface) !important; }
.workspace-body .navbar-collapse-self { gap: 16px; flex-wrap: wrap; }
.workspace-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; font-weight: 750; letter-spacing: -.05em; color: var(--ws-ink) !important; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--ws-ink); color: #fffefa; border-radius: 10px 10px 10px 2px; font-family: Georgia, serif; font-size: 28px; line-height: 1; }
.workspace-body .auth-header { align-items: center; gap: 12px; margin: 0 !important; }
.workspace-body .auth-a, .workspace-body .auth-a-out { color: var(--ws-ink); font-size: 13px; padding: 6px; }
.workspace-body .account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* the language menu: a small globe; choosing a language in it switches at once */
.lang-menu { position: relative; }
.lang-menu > summary { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px; border-radius: 13px; color: var(--ws-muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; cursor: pointer; list-style: none; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { background: var(--ws-teal-soft); color: var(--ws-teal); }
.lang-menu-list { position: absolute; z-index: 60; right: 0; top: 100%; min-width: 132px; margin: 4px 0 0; padding: 4px; background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.lang-menu-option { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--ws-ink); font-size: 13px; text-align: left; cursor: pointer; }
.lang-menu-option:hover { background: var(--ws-teal-soft); color: var(--ws-teal); }
.lang-menu-option.is-current { font-weight: 650; }
.lang-menu-option.is-current::after { content: '\2713'; float: right; margin-left: 10px; color: var(--ws-teal); }
.workspace-body a { color: var(--ws-teal); }
.workspace-body a:hover { color: #104a43; }
.workspace-body :focus-visible { outline: 3px solid #258879; outline-offset: 3px; }
.workspace-body .btn { border-radius: 7px; font-weight: 600; font-size: 13px; padding: 9px 14px; }
.workspace-body .btn:focus, .workspace-body .btn.focus { box-shadow: none; }
.workspace-body .btn-primary, .workspace-body .btn-success { background: var(--ws-teal); border-color: var(--ws-teal); color: #fff; }
.workspace-body .btn-primary:hover, .workspace-body .btn-success:hover { background: #104f48; border-color: #104f48; }
.workspace-body .btn-primary:not(:disabled):not(.disabled):active, .workspace-body .btn-primary:not(:disabled):not(.disabled).active,
.workspace-body .btn-success:not(:disabled):not(.disabled):active, .workspace-body .btn-success:not(:disabled):not(.disabled).active { background: #0d3f39; border-color: #0d3f39; }
.workspace-body .btn-outline-primary { color: var(--ws-teal); border-color: #aabfb4; background: transparent; }
.workspace-body .btn-outline-primary:hover { background: var(--ws-teal-soft); border-color: var(--ws-teal); }
.workspace-body .btn-outline-primary:not(:disabled):not(.disabled):active, .workspace-body .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--ws-teal); border-color: var(--ws-teal); color: #fff; }
.workspace-body .btn-light, .workspace-body .btn-secondary { color: var(--ws-ink); background: #edece5; border-color: transparent; }
.workspace-body .btn-light:hover, .workspace-body .btn-secondary:hover { background: #e1e3d8; }
.workspace-body .btn-light:not(:disabled):not(.disabled):active, .workspace-body .btn-light:not(:disabled):not(.disabled).active,
.workspace-body .btn-secondary:not(:disabled):not(.disabled):active, .workspace-body .btn-secondary:not(:disabled):not(.disabled).active { background: #d5d7c9; }
.workspace-body [hidden] { display: none !important; }
.workspace-body .modal-content { border: 1px solid var(--ws-line); border-radius: 14px; background: var(--ws-surface); box-shadow: 0 24px 80px #23363326; }
.workspace-body .modal-title { font-size: 20px; font-weight: 650; }
.workspace-body .modal-header, .workspace-body .modal-footer { border-color: var(--ws-line); }
.workspace-body .form-control, .workspace-body .form-select { border: 1px solid #c8cec2; border-radius: 6px; background-color: #fff; color: var(--ws-ink); }
.workspace-body input[type=file] { max-width: 100%; height: auto; font-size: 13px; }
.workspace-muted, .navigator-hint { color: var(--ws-muted); }
.workspace-eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ws-muted); }
.library { max-width: 1240px; padding: 52px 32px 80px; }
.library-heading { padding-bottom: 8px; }
.library h1 { margin: 0 0 14px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; font-weight: 650; }
.library-heading .workspace-muted { font-size: 16px; }
.library .main_page { margin: 0; }
.presentation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; align-items: start; }
.library-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--ws-line); }
.presentation-card.cards-self { margin: 0; border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-surface); transition: border-color .15s, box-shadow .15s; }
.presentation-card:hover { border-color: #aabfb4; box-shadow: 0 8px 28px #2336330c; }
.presentation-card .card-img-top, .cover-placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 11px 11px 0 0; background: #e9e9df; }
.cover-placeholder { display: grid; place-items: center; font: italic 60px Georgia, serif; color: #60786b; }
.presentation-card .card-body { padding: 20px 20px 12px; }
.presentation-card .card-title { margin: 0 0 10px; font-size: 17px; line-height: 1.4; font-weight: 650; color: var(--ws-ink); overflow-wrap: anywhere; }
.presentation-card .main-link-movie-self:hover { text-shadow: none; }
.presentation-card .card-actions { padding: 4px 12px 12px; }
.workspace-body .icon-btn, .workspace-body button.btn-del { min-width: 32px; height: 32px; padding: 0; color: var(--ws-muted); }
.workspace-body .ic-trash:hover, .workspace-body button.btn-del:hover { color: var(--ws-danger); background: #f8e8e2; }
.workspace-body .export-menu > summary { height: 34px; color: var(--ws-teal); }
.workspace-body .export-menu > summary:hover, .workspace-body .export-menu[open] > summary { background: var(--ws-teal-soft); color: var(--ws-teal); }
.workspace-body .export-list { background: var(--ws-surface); border-color: var(--ws-line); }
.workspace-empty { padding: 40px; text-align: center; }
.workspace-empty h1, .workspace-empty h2 { font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.workspace-empty h2 { font-size: 25px; }
.workspace-empty p:not(.workspace-eyebrow) { color: var(--ws-muted); line-height: 1.7; max-width: 440px; margin: 16px auto 24px; }
.library-empty { grid-column: 1 / -1; padding: 64px 24px; border: 1px dashed #cbd1c3; border-radius: 12px; }
.empty-illustration { display: grid; place-items: center; width: 70px; height: 54px; margin: 0 auto 24px; border: 2px solid #afc1b2; border-radius: 6px; color: var(--ws-teal); font-size: 26px; transform: rotate(-6deg); box-shadow: 6px 6px 0 #e3e7dc; }

/* A single ordered list is shared by preview and editor; sections never wrap it. */
/* flex-basis must stay auto: with `flex: 1` (basis 0) the height below is ignored, a long slide list stretches the whole page and the editor scrolls away */
.presentation-workspace { display: flex; flex: 0 0 auto; min-height: 0; height: calc(100vh - 66px); height: calc(100dvh - 66px); }
.slide-navigator.left-menu { display: flex; flex-direction: column; flex: 0 0 256px; width: 256px; height: 100%; min-height: 0; margin-top: 0 !important; padding: 0; background: var(--ws-surface); border-right: 1px solid var(--ws-line); overflow: visible; animation: none; text-align: left; font-size: 13px; }

/* The branch graph: a slim gutter drawn INSIDE the slide navigator, immediately to the left of
   the real thumbnails (no separate list of its own) -- #tree-toggle only reveals/hides it by
   growing the thumbnail column's left padding, so the lines simply appear beside the slides they
   connect. --graph-pad is set from JS once the lane layout of the current branches is known. */
.slide-graph-wrap { position: relative; --graph-pad: 10px; }
.slide-navigator .slide-list { transition: padding-left .22s ease; }
.slide-graph-wrap.open .slide-list { padding-left: var(--graph-pad); }
.slide-graph-lines { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .18s ease; }
.slide-graph-wrap.open .slide-graph-lines { opacity: 1; }
.slide-graph-lines .graph-branch { fill: none; stroke: var(--branch, var(--ws-teal)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slide-graph-lines .graph-chevron { fill: none; stroke: var(--branch, var(--ws-teal)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slide-graph-lines .graph-port { fill: var(--branch, var(--ws-teal)); }
.slide-graph-lines .graph-joint { fill: var(--branch, var(--ws-teal)); }
.slide-graph-note { margin: 0 12px 8px; padding: 8px 10px; border-radius: 7px; background: #eef3ee; color: var(--ws-muted, #5f6b66); font-size: 12px; line-height: 1.4; }
.slide-graph-note[hidden] { display: none; }
.tree-toggle svg { display: block; }
.navigator-heading { position: relative; flex: none; padding: 18px 16px 10px; }
.navigator-back { display: inline-block; font-size: 12px; margin-bottom: 10px; }
.navigator-back::before { content: '\2190'; margin-right: 6px; }
.navigator-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.navigator-heading h2 { flex: 1; min-width: 0; margin: 0; font-weight: 650; line-height: 1.35; font-size: 18px; overflow-wrap: anywhere; letter-spacing: -.025em; }
.navigator-heading h2 a { color: var(--ws-ink); }
.navigator-title-input {
  display: block; width: 100%; min-width: 0; margin: -4px -8px; padding: 3px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--ws-ink); font-family: inherit; font-weight: 650; line-height: 1.35; font-size: 18px; letter-spacing: -.025em;
}
.navigator-title-input:hover { border-color: var(--ws-line); }
.navigator-title-input:focus { outline: none; border-color: var(--ws-teal); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-teal) 18%, transparent); text-overflow: clip; }
.navigator-icons { display: flex; flex: none; align-items: center; gap: 4px; }
.nav-icon-btn, .workspace-body .export-menu.is-compact > summary { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ws-line); border-radius: 50%; background: transparent; color: var(--ws-muted); font-size: 14px; font-weight: 650; line-height: 1; cursor: pointer; }
.nav-icon-btn:hover, .nav-icon-btn[aria-expanded=true], .workspace-body .export-menu.is-compact > summary:hover, .workspace-body .export-menu.is-compact[open] > summary { background: var(--ws-teal-soft); border-color: #8eafa2; color: var(--ws-teal); }
.export-menu.is-compact > summary::after { display: none; }
.export-menu.is-compact > summary { font-size: 17px; }
.export-menu.is-compact .export-list { left: auto; right: 0; }
.export-title { display: block; padding: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-muted); }
.navigator-hint { font-size: 11px; line-height: 1.6; margin: 10px 0 0; }
.navigator-help { position: absolute; z-index: 20; left: 12px; right: 12px; top: 100%; margin: -2px 0 0; padding: 10px 12px; border: 1px solid var(--ws-line); border-radius: 8px; background: var(--ws-surface); box-shadow: 0 8px 24px #2336331f; color: var(--ws-ink); }
.navigator-scroll { flex: 1; min-height: 80px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c3cbbb transparent; }
.slide-navigator .slide-list { list-style: none; margin: 0; padding: 4px 10px 16px; }
.slide-list .slide-row { position: relative; display: block; margin: 0 0 8px; padding: 8px 8px 6px; user-select: none; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ws-ink); }
.slide-list .slide-row:hover { background: #f4f4ec; }
.slide-list .slide-row.active { background: var(--ws-teal-soft); border-color: #8eafa2; box-shadow: inset 3px 0 0 var(--ws-teal); }
.slide-list .slide-line { display: block; }
.slide-line .slide-card-link { display: block; min-width: 0; white-space: normal; overflow: visible; }
.slide-line .slide-card-link[data-reorderable] { cursor: grab; }
.slide-preview { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #23363314; border-radius: 5px; background: #fff; }
.thumb-canvas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.slide-preview .ew-canvas, .slide-preview .ew-canvas * { pointer-events: none; }
.slide-preview .ew-pulse { animation: none; }
.slide-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
.slide-preview img.preview-cover { object-fit: cover; }
.slide-preview img.preview-stretch { object-fit: fill; }
.preview-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: Georgia, serif; font-size: 30px; color: #7e918580; }
.slide-position { position: absolute; bottom: 5px; right: 5px; min-width: 24px; padding: 2px 6px; border-radius: 4px; background: #233633e6; color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.slide-caption { display: block; padding: 10px 6px 4px; }
.slide-name { display: block; font-weight: 600; color: var(--ws-ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.slide-row .row-tools { margin: 4px 0 0; padding: 0 2px; gap: 3px; }
.slide-row .slide-delete { margin-left: auto; }
.slide-row.is-dragging { border-color: var(--ws-teal); border-style: dashed; background: #dcebe2; box-shadow: 0 4px 16px #2336331a; }
.slide-row.is-dragging, .slide-row.is-dragging * { cursor: grabbing; }
.slide-navigator.is-dragging { user-select: none; }
.slide-navigator[aria-busy=true] .slide-list { opacity: .65; }
.slide-navigator [aria-disabled=true] { cursor: not-allowed; }
.slide-navigator button:disabled { opacity: .35; cursor: not-allowed; }
.navigator-empty { padding: 28px 16px; color: var(--ws-muted); text-align: center; border: 1px dashed var(--ws-line); border-radius: 8px; }
.navigator-footer { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--ws-line); }
.navigator-footer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.navigator-footer .btn { font-size: 12px; }
.order-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ws-teal); }
.order-status:not(:empty) { margin-bottom: 10px; }
.order-status.is-error { color: var(--ws-danger); }
.order-reload { margin-bottom: 10px; }
.presentation-workspace .slide-col { flex: 1; min-width: 0; height: 100%; padding: 0; display: flex; flex-direction: column; background: #eaeae2; }
.viewer-heading { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 28px; border-bottom: 1px solid var(--ws-line); background: var(--ws-paper); }
.viewer-heading .workspace-eyebrow { margin-bottom: 5px; }
.viewer-heading h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.viewer-navigation { display: flex; flex: none; align-items: center; gap: 6px; }
.viewer-present { margin-right: 0; }
.presentation-workspace .stage { flex: 1; min-height: 0; height: auto; margin: 24px 24px 64px; overflow: visible; }
.presentation-workspace .stage-sizer { box-shadow: 0 8px 36px #2336331a; }
.presentation-workspace .stage-info { bottom: -44px; left: 0; background: transparent; padding: 8px 0; color: var(--ws-muted); font-variant-numeric: tabular-nums; }
.presentation-workspace .stage-tools { bottom: -46px; right: 0; }
.presentation-workspace .stage-tools .btn { box-shadow: none; }
.viewer-empty { margin: auto; max-width: 660px; }
.overview-cover { max-width: 220px; max-height: 150px; border-radius: 8px; object-fit: contain; margin: 20px 0 0; }
.presentation-workspace .slide-col:fullscreen { height: 100%; background: #000; }
.slide-col:fullscreen .viewer-heading { display: none; }
.presentation-workspace .slide-col:fullscreen .stage { margin: 0; }
.presentation-workspace .slide-col:fullscreen .stage-tools { bottom: 12px; right: 12px; }

/* ---- SQL window under the slide ---- */
.sql-panel { flex: none; display: flex; flex-direction: column; height: 40%; min-height: 190px; max-height: 46vh; background: #0b1220; color: #e2e8f0; border-top: 1px solid #1e293b; font-size: 14px; }
.sql-panel[hidden] { display: none; }
.sql-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: #111a2e; }
.sql-head kbd { margin-left: 4px; padding: 0 4px; font-size: 11px; background: #ffffff26; color: inherit; }
.sql-status { flex: 1; min-width: 0; color: #94a3b8; font-size: 13px; }
.sql-busy .sql-status::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid #94a3b8; border-right-color: transparent; border-radius: 50%; animation: sql-spin .8s linear infinite; vertical-align: -1px; }
@keyframes sql-spin { to { transform: rotate(360deg); } }
.sql-actions { display: flex; gap: 6px; flex: none; }
.sql-actions .btn-outline-light:not(.sql-sure):hover { background: #1e8578; border-color: #1e8578; color: #fff; }
.sql-actions .btn-outline-light:not(.sql-sure):not(:disabled):not(.disabled):active, .sql-actions .btn-outline-light:not(.sql-sure):not(:disabled):not(.disabled).active { background: #145850; border-color: #145850; color: #fff; }
.sql-actions .btn-outline-light.sql-sure { background: #dc2626; border-color: #dc2626; color: #fff; }
.sql-actions .btn-outline-light.sql-sure:hover { background: #c11f1f; border-color: #c11f1f; }
.sql-actions .btn-outline-light.sql-sure:not(:disabled):not(.disabled):active, .sql-actions .btn-outline-light.sql-sure:not(:disabled):not(.disabled).active { background: #a11a1a; border-color: #a11a1a; }
.sql-panel .btn:focus, .sql-panel .btn.focus { box-shadow: none; }
.sql-input { flex: none; display: block; width: 100%; min-height: 72px; max-height: 40%; padding: 8px 12px; border: 0; border-bottom: 1px solid #1e293b; resize: vertical; background: #0f172a; color: #e2e8f0; font: 14px/1.5 'JetBrains Mono', Consolas, 'Courier New', monospace; tab-size: 4; }
.sql-input:focus { outline: 2px solid #3b82f6; outline-offset: -2px; }
.sql-output { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; }
.sql-table-wrap { overflow: auto; max-width: 100%; margin: 4px 0; }
.sql-table { border-collapse: collapse; font: 13px/1.4 'JetBrains Mono', Consolas, 'Courier New', monospace; }
.sql-table th, .sql-table td { padding: 3px 12px; border: 1px solid #263349; white-space: pre; text-align: left; }
.sql-table th { position: sticky; top: 0; background: #1a2540; color: #cbd5e1; font-weight: 600; }
.sql-table .sql-num { text-align: right; }
.sql-table .sql-null { color: #64748b; font-style: italic; }
.sql-command { margin: 2px 0 8px; color: #94a3b8; font-size: 12px; }
.sql-prompt { margin: 6px 0 4px; color: #7dd3fc; font: 12px/1.4 "JetBrains Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.sql-message { margin: 4px 0; padding: 6px 10px; border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sql-error { background: #7f1d1d80; color: #fecaca; border-left: 3px solid #ef4444; }
.sql-error a { color: #fff; text-decoration: underline; }
.sql-note { background: #1e293b; color: #cbd5e1; }
.sql-ok { background: #14532d80; color: #bbf7d0; border-left: 3px solid #22c55e; }
.sql-where, .sql-detail { margin-top: 2px; font-size: 12px; opacity: .85; }
/* the console: a log of commands and answers, and the input line under it */
.sql-console { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #070d18; }
.sql-console[hidden] { display: none; }
.sql-console-log { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 4px; font: 13px/1.45 "JetBrains Mono", Consolas, "Courier New", monospace; }
.sql-console-lang { margin: 6px 0 4px; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.sql-console-entry { margin-bottom: 6px; }
.sql-console-entry .sql-message { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; }
.sql-console-entry .sql-table-wrap { margin: 2px 0; }
.sql-console-entry .sql-command { margin: 0 0 4px; }
.sql-console-waiting::after { content: '…'; color: #64748b; }
.sql-console-echo, .sql-console-out { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; color: #e2e8f0; background: none; }
.sql-console-ps { color: #7dd3fc; user-select: none; }
.sql-console-out { color: #cbd5e1; }
.sql-console-err { color: #fca5a5; }
.sql-console-entry .sql-stdout, .sql-console-entry .sql-stderr { margin: 0 0 2px; padding: 0; background: none; max-height: none; }
.sql-console-note { color: #64748b; font-style: italic; }
.sql-console-line { flex: none; display: flex; align-items: flex-start; gap: 0; padding: 6px 12px; border-top: 1px solid #1e293b; background: #0b1220; font: 14px/1.5 "JetBrains Mono", Consolas, "Courier New", monospace; }
.sql-console-prompt { flex: none; color: #7dd3fc; white-space: pre; }
.sql-console-input { flex: 1; min-width: 0; min-height: 21px; padding: 0; border: 0; resize: none; overflow: auto; background: none; color: #f1f5f9; font: inherit; tab-size: 4; white-space: pre; }
.sql-console-input:focus { outline: none; }
.sql-console-input::placeholder { color: #475569; font-size: 12px; }
.sql-console-mode .sql-console-line:focus-within { box-shadow: inset 2px 0 0 #3b82f6; }
#sql-mode[aria-pressed="true"] { background: #1e8578; border-color: #1e8578; color: #fff; }

@media (min-width: 1600px) { .slide-navigator.left-menu { flex-basis: 272px; width: 272px; } }
@media (max-width: 1000px) {
  .slide-navigator.left-menu { flex-basis: 238px; width: 238px; }
  .navigator-heading { padding: 16px 14px 10px; }
  .workspace-body .account-name { display: none; }
}
@media (max-width: 700px) {
  /* the workspace stacks into a single column here -- a graph gutter to the left of a horizontal
     thumbnail row no longer makes sense, so the branches stay reachable only above this width */
  .tree-toggle { display: none; }
  .slide-graph-wrap.open .slide-list { padding-left: 0; }
  .slide-graph-lines { display: none; }
  .workspace-body .navbar { padding: 8px 12px; min-height: 62px; }
  .workspace-body .navbar-collapse-self { gap: 8px; }
  .workspace-body .navbar-nav { display: none; }
  .workspace-body .auth-header { margin-left: auto !important; gap: 4px; }
  .workspace-brand { font-size: 17px; gap: 6px; margin-right: 0; }
  .brand-mark { width: 28px; height: 28px; font-size: 23px; }
  .library { padding: 30px 18px 50px; }
  .presentation-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .presentation-workspace { flex-direction: column; height: auto; min-height: calc(100dvh - 62px); }
  .slide-navigator.left-menu { flex: none; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--ws-line); }
  .navigator-heading { padding: 12px 16px 6px; }
  .navigator-heading h2 { font-size: 16px; margin-bottom: 8px; }
  .navigator-back { margin-bottom: 6px; }
  .navigator-scroll { flex: none; min-height: 0; max-height: 240px; }
  .slide-navigator .slide-list { padding: 4px 12px 8px; }
  .slide-list .slide-row { padding: 6px; margin-bottom: 4px; }
  .slide-line .slide-card-link { display: flex; align-items: center; gap: 12px; }
  .slide-preview { flex: 0 0 100px; width: 100px; }
  .slide-caption { flex: 1; min-width: 0; padding: 0 4px; }
  .preview-placeholder { font-size: 20px; }
  .slide-row .row-tools { margin-top: 2px; }
  .workspace-body .icon-btn, .workspace-body button.btn-del { min-width: 36px; height: 36px; }
  .navigator-footer { padding: 8px 16px; }
  .viewer-heading { padding: 16px; }
  .presentation-workspace .slide-col { flex: none; min-height: 420px; height: 65dvh; }
  .presentation-workspace .stage { margin: 16px 12px 60px; }
  .workspace-empty { padding: 32px 20px; }
  .viewer-empty { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) { .workspace-body *, .workspace-body *::before, .workspace-body *::after { scroll-behavior: auto !important; transition: none !important; } }

/* ---- theme picker of the "New presentation" dialog ---- */
.theme-picker { border: 0; margin: 14px 0 6px; padding: 0; min-width: 0; }
.theme-picker legend { font-size: 1rem; font-weight: 500; width: auto; margin-bottom: 6px; }
.theme-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.theme-swatch { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; cursor: pointer; }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-swatch-card {
  position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--ws-line); border-radius: 8px;
  background: var(--sw-bg); color: var(--sw-text); overflow: hidden;
}
.theme-swatch-card b { position: absolute; left: 10px; top: 6px; font: 700 20px/1 Georgia, serif; }
.theme-swatch-card i { position: absolute; right: 8px; bottom: 7px; width: 34%; height: 9px; border-radius: 5px; background: var(--sw-accent); }
.theme-swatch-name { font-size: .8rem; color: var(--ws-muted); }
.theme-swatch input:checked + .theme-swatch-card { border-color: var(--ws-teal); box-shadow: 0 0 0 2px var(--ws-teal); }
.theme-swatch input:checked ~ .theme-swatch-name { color: var(--ws-ink); font-weight: 600; }
.theme-swatch input:focus-visible + .theme-swatch-card { outline: 2px solid var(--ws-ink); outline-offset: 2px; }

/* ---- the tutorial presentation ---- */
.guide-card.cards-self { border-color: #b9d2c6; background: linear-gradient(180deg, #f2f8f4 0, var(--ws-surface) 60%); }
.guide-cover { position: relative; display: block; }
.guide-badge {
  position: absolute; left: 12px; top: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--ws-teal); color: #fff; font-size: 12px; font-weight: 650; letter-spacing: .02em;
}
.guide-actions { display: flex; align-items: center; gap: 8px; }
.guide-copy { display: grid; gap: 8px; margin-top: 10px; }
.guide-copy .navigator-hint { margin: 0; }

/* ---- sign-in (Google, Apple, Yandex) ---- */
.auth-page { display: flex; justify-content: center; padding: 56px 16px 80px; }
.auth-card { width: 100%; max-width: 440px; padding: 32px 30px 30px; border: 1px solid var(--ws-line); border-radius: 14px; background: var(--ws-surface); box-shadow: 0 8px 28px #2336330c; }
.auth-card h1 { margin: 0 0 12px; font-size: 28px; font-weight: 650; letter-spacing: -.04em; }
.auth-card > .workspace-muted { margin-bottom: 24px; line-height: 1.55; font-size: 14px; }
.auth-providers { display: grid; gap: 12px; }
.auth-providers form { margin: 0; }
.auth-provider { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 1px solid #c8cec2; background: #fff; color: var(--ws-ink); font-size: 15px; text-align: left; }
.auth-provider:hover { border-color: var(--ws-teal); background: var(--ws-teal-soft); color: var(--ws-ink); }
.auth-provider-mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ws-ink); color: #fffefa; font: 700 14px/1 Georgia, serif; }
.auth-none { margin: 0; font-size: 14px; }

/* Python and Bash in the window of results: plain text of stdout and stderr */
.sql-stdout, .sql-stderr { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 13px/1.45 "JetBrains Mono", Consolas, monospace; }
.sql-stdout { background: rgba(255, 255, 255, .06); color: inherit; }
.sql-stderr { background: rgba(220, 53, 69, .16); color: #ffb4bd; }

/* ---- AI agents: API keys page (agents/templates/agents/tokens.html) ---- */
.agents-page .agents-card { margin: 22px 0; padding: 20px 22px; border: 1px solid var(--ws-line); border-radius: 14px; background: var(--ws-surface); }
.agents-page .agents-card h2 { margin: 0 0 12px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.agents-page .agents-new-key { border-color: var(--ws-teal); background: var(--ws-teal-soft); }
.agents-page .agents-key { display: block; padding: 10px 12px; border-radius: 8px; background: #fff; color: var(--ws-ink); font-size: 14px; word-break: break-all; user-select: all; }
.agents-page .agents-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.agents-page .agents-form label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--ws-muted); }
.agents-page .agents-form .form-control { min-width: 240px; font-size: 14px; }
.agents-page .agents-table { width: 100%; border-collapse: collapse; }
.agents-page .agents-table th, .agents-page .agents-table td { padding: 8px 10px; border-bottom: 1px solid var(--ws-line); text-align: left; vertical-align: middle; }
.agents-page .agents-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ws-muted); font-weight: 700; }
.agents-page .agents-table form { margin: 0; }
.agents-page .agents-snippet { padding: 10px 12px; border-radius: 8px; background: #233633; color: #eef3ef; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; }
@media (max-width: 700px) { .agents-page .agents-table th:nth-child(4), .agents-page .agents-table td:nth-child(4), .agents-page .agents-table th:nth-child(5), .agents-page .agents-table td:nth-child(5) { display: none; } }

/* ---- Notes on a slide (viewer, static/night_gospel/canvas/notes.js) ---- */
.notes-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--ws-teal); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.notes-panel { flex: none; max-height: 42vh; margin: 0 24px 24px; display: flex; flex-direction: column; border: 1px solid var(--ws-line); border-radius: 14px; background: var(--ws-surface); overflow: hidden; }
.notes-panel[hidden] { display: none; }
.notes-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ws-line); }
.notes-head .notes-hint { flex: 1; font-size: 12px; }
.notes-list { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px; }
.notes-empty { margin: 8px 0; }
.notes-error { margin: 6px 0; color: var(--ws-danger); }
.note { padding: 10px 0; border-bottom: 1px solid var(--ws-line); }
.note:last-child { border-bottom: 0; }
.note-resolved > .note-head, .note-resolved > .note-text { opacity: .55; }
.note-reply { margin: 8px 0 0 18px; padding: 8px 0 0 12px; border-left: 2px solid var(--ws-line); border-bottom: 0; }
.note-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 12px; }
.note-agent { padding: 1px 7px; border-radius: 9px; background: var(--ws-teal-soft); color: var(--ws-teal); font-weight: 600; }
.note-time { color: var(--ws-muted); }
.note-text { margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.note-actions .btn-link { padding: 0 10px 0 0; font-size: 12px; color: var(--ws-teal); }
.note-actions .note-delete { color: var(--ws-danger); }
.note-reply-form, .notes-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.notes-form { margin: 0; padding: 10px 14px; border-top: 1px solid var(--ws-line); }
.note-reply-form textarea, .notes-form textarea { flex: 1; font-size: 13px; }
.presentation-workspace .slide-col:fullscreen .notes-panel { display: none; }

/* ---- Access and history (collab/templates/collab/*) ---- */
.agents-page .access-level { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-weight: 400; cursor: pointer; }
.agents-page .access-level input { margin-top: 4px; }
.agents-page .access-decide { display: flex; gap: 6px; align-items: center; margin: 0; }
.agents-page .access-decide .form-control { width: auto; }
.agents-page .agents-grow { flex: 1; min-width: 240px; }
.agents-page .history-current td { background: var(--ws-teal-soft); }
.shared-heading { margin-top: 40px; }
.shared-heading h2 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 6px; }