/* Code Lab: premium coding look (founder 2026-10-12: "give premium coding vibe design to code lab").
   A look layer only, loaded after every other Code Lab stylesheet on codelab.html (website and app). It changes
   colours, borders, glows and fonts. It never changes sizes or positions, so every tool, the phone layout and the
   editor themes (playground-fx.js: Midnight, Dracula, Ocean, Light) keep working.
   - The page: a deep night background with a faint blue and violet glow and a fine dot grid.
   - Both panels: glass cards with a thin still top edge, like a modern code editor.
   - Bars, tabs and labels: JetBrains Mono, small caps, IDE-style tabs with a glowing underline.
   - Run and Publish: Academy blue (#1f7bff) with a light shadow; other buttons are quiet outlined chips.
   - The preview bar looks like a browser address bar; the console looks like a terminal; the status bar like an IDE's. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  --clp-bg: #05070d;
  --clp-panel: rgba(12, 16, 26, 0.86);
  --clp-bar: rgba(255, 255, 255, 0.025);
  --clp-line: rgba(148, 163, 184, 0.2);
  --clp-line-hi: rgba(148, 163, 184, 0.22);
  --clp-text: #e6edf6;
  --clp-muted: #8b98ad;
  --clp-blue: #2f81f7;
  --clp-cyan: #22d3ee;
  --clp-violet: #8b5cf6;
  --clp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --clp-grad: linear-gradient(180deg, #2f8bff 0%, #1f7bff 100%);
  --clp-edge: linear-gradient(90deg, rgba(47, 129, 247, 0) 0%, #2f81f7 20%, #8b5cf6 50%, #22d3ee 80%, rgba(34, 211, 238, 0) 100%);
}

/* ---------- Premium Night: the default editor colours (the Midnight theme) ---------- */
html body #codeLab.plx-t-midnight, html body #codeLab:not([class*="plx-t-"]) {
  --code-bg: #0a0e1a; --code-gutter: #0a0e1a; --code-text: #c9d4f0; --code-muted: #4e5a78;
  --code-tag: #f7768e; --code-attr: #7dcfff; --code-string: #9ece6a; --code-keyword: #bb9af7; --code-number: #ff9e64;
  --code-prop: #7aa2f7; --code-def: #e0af68; --code-select: rgba(122, 162, 247, 0.25);
  --plx-line: rgba(122, 162, 247, 0.08); --plx-ed-bar: #070a13; --plx-mini: rgba(169, 177, 214, 0.45); --plx-accent: #7aa2f7;
}

/* ---------- The page behind the Code Lab ---------- */
body.lab-bare, html.taa-app body:has(#codeLab) {
  background-color: var(--clp-bg) !important;
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(47, 129, 247, 0.1), transparent 60%),
    radial-gradient(760px 460px at 96% 4%, rgba(139, 92, 246, 0.07), transparent 62%),
    radial-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px) !important;
  background-size: auto, auto, 22px 22px !important;
  background-attachment: fixed !important;
}

/* ---------- The two panels: glass cards with a glowing top edge ---------- */
#codeLab .lab-editor, #codeLab .lab-right {
  position: relative;
  background: var(--clp-panel) !important;
  border: 1px solid rgba(122, 162, 247, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 50px -28px rgba(47, 129, 247, 0.16) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  overflow: hidden;
}
#codeLab .lab-editor::before, #codeLab .lab-right::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none;
  background: var(--clp-edge); background-size: 200% 100%; opacity: 0.55;
}
#codeLab .lab-preview, #codeLab .lab-preview-bar, #codeLab .lab-site-pbar { background: transparent !important; }

/* ---------- Bars ---------- */
#codeLab .lab-pbar, #codeLab .lab-editor-bar, #codeLab .lab-preview-bar, #codeLab .lab-site-pbar {
  background: var(--clp-bar) !important;
  border-color: var(--clp-line) !important;
}
#codeLab .lab-pbar { border-bottom: 1px solid var(--clp-line) !important; }
#codeLab .lab-editor-bar { border-bottom: 1px solid var(--clp-line) !important; }

/* ---------- Buttons: quiet outlined chips ---------- */
#codeLab .lab-pbtn, #codeLab .lcl-near-b, #codeLab .lab-icon-btn, #codeLab .lab-site-dev, #codeLab .lab-quick-btn, #codeLab .lab-askai-btn,
#codeLab .btn-secondary {
  color: #dbe4f0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--clp-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#codeLab .lab-pbtn:hover, #codeLab .lcl-near-b:hover, #codeLab .lab-icon-btn:hover, #codeLab .lab-site-dev:hover, #codeLab .lab-quick-btn:hover,
#codeLab .lab-askai-btn:hover, #codeLab .btn-secondary:hover {
  color: #fff !important;
  background: rgba(47, 129, 247, 0.08) !important;
  border-color: rgba(47, 129, 247, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.08) !important;
}
#codeLab .lab-pbtn svg, #codeLab .lcl-near-b svg, #codeLab .lab-icon-btn svg { color: #7cc4ff; }
#codeLab .lab-site-dev[aria-pressed="true"], #codeLab .lab-site-dev.is-on {
  color: #fff !important; border-color: rgba(34, 211, 238, 0.55) !important; background: rgba(34, 211, 238, 0.08) !important;
}

/* ---------- Primary: Run and Publish ---------- */
#codeLab .lab-run, #codeLab .btn-primary, #codeLab .lab-pbtn-pub, #codeLab .lab-pbar-tools .lab-pbtn.is-primary, #codeLab [data-track="codelab-publish-open"] {
  color: #ffffff !important;
  background: var(--clp-grad) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px -4px rgba(31, 123, 255, 0.3), 0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
  text-shadow: none !important;
}
#codeLab .lab-run svg, #codeLab .btn-primary svg, #codeLab [data-track="codelab-publish-open"] svg { color: #ffffff !important; }
#codeLab .lab-run svg path { fill: currentColor; }
#codeLab .lab-run:hover, #codeLab .btn-primary:hover, #codeLab [data-track="codelab-publish-open"]:hover {
  filter: brightness(1.08); box-shadow: 0 4px 14px -4px rgba(31, 123, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.16) inset !important;
}

/* ---------- The Code tab: an IDE file tab ---------- */
#codeLab .lab-tabs { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#codeLab .lab-tab {
  font-family: var(--clp-mono) !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.01em;
  color: var(--clp-muted) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 8px 8px 0 0 !important;
  box-shadow: none !important;
}
#codeLab .lab-tab[aria-selected="true"] {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(47, 129, 247, 0.12), rgba(47, 129, 247, 0.02)) !important;
  border-color: var(--clp-line) var(--clp-line) transparent !important;
  box-shadow: inset 0 -2px 0 0 var(--clp-cyan) !important;
}

/* ---------- The editor ---------- */
#codeLab .CodeMirror { font-family: var(--clp-mono) !important; font-feature-settings: "liga" 1, "calt" 1; background: transparent; }
#codeLab .lab-panel { background: rgba(5, 8, 14, 0.55); }
#codeLab .CodeMirror-gutters { border-right: 1px solid var(--clp-line) !important; background: rgba(255, 255, 255, 0.012) !important; }
#codeLab .CodeMirror-linenumber { color: #4b5568 !important; }
#codeLab .CodeMirror-activeline-background { background: rgba(47, 129, 247, 0.07) !important; }
#codeLab .CodeMirror-activeline-gutter .CodeMirror-linenumber, #codeLab .CodeMirror-activeline .CodeMirror-linenumber { color: #9fb6d9 !important; }
#codeLab .CodeMirror-cursor { border-left: 2px solid var(--clp-cyan) !important; }
#codeLab .CodeMirror-selected, #codeLab .CodeMirror-focused .CodeMirror-selected { background: rgba(47, 129, 247, 0.22) !important; }

/* ---------- Status bar: an IDE status bar ---------- */
#codeLab .plx-status {
  font-family: var(--clp-mono) !important; font-size: 0.72rem !important; letter-spacing: 0.02em;
  color: #eaf2ff !important; background: linear-gradient(90deg, #1f6feb 0%, #6d4aff 100%) !important; border-top: 0 !important;
}
#codeLab .plx-status * { color: inherit; }

/* ---------- Preview: a browser window ---------- */
#codeLab .lab-dots i { box-shadow: none; }
#codeLab .lab-preview-title {
  font-family: var(--clp-mono) !important; font-size: 0.78rem !important; font-weight: 600 !important;
  color: #cfe3ff !important; background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--clp-line) !important; border-radius: 999px !important;
}
#codeLab .lab-frame { border-radius: 10px !important; box-shadow: 0 0 0 1px var(--clp-line-hi), 0 18px 40px -18px rgba(0, 0, 0, 0.8) !important; }
#codeLab .lab-site-dev { font-family: var(--clp-mono) !important; font-size: 0.74rem !important; }

/* ---------- Console: a terminal ---------- */
#codeLab .lab-console { background: rgba(3, 5, 10, 0.9) !important; border-top: 1px solid var(--clp-line) !important; }
#codeLab .lab-console summary { background: transparent !important; font-family: var(--clp-mono) !important; font-size: 0.78rem !important; color: var(--clp-muted) !important; }
#codeLab .lab-console summary span:first-child::before { content: "> "; color: var(--clp-cyan); }
#codeLab .lab-console-out { font-family: var(--clp-mono) !important; }

/* ---------- Small labels in mono ---------- */
#codeLab .lab-askai-label, #codeLab .lab-pname, #codeLab .lab-autosave, #codeLab .lab-run-status { font-family: var(--clp-mono) !important; }
#codeLab .lab-askai-label { color: var(--clp-muted) !important; text-transform: uppercase; font-size: 0.7rem !important; letter-spacing: 0.08em; }

/* ---------- Menus and dialogs opened from the Code Lab ---------- */
#codeLab .lcl-menu, #codeLab .lab-dl-menu {
  background: rgba(10, 14, 24, 0.96) !important; border: 1px solid var(--clp-line-hi) !important; border-radius: 12px !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
#codeLab .lcl-head { font-family: var(--clp-mono) !important; letter-spacing: 0.1em; color: #5f6b80 !important; }

/* ---------- Phones: keep it light ---------- */
@media (max-width: 640px) {
  #codeLab .lab-editor, #codeLab .lab-right { backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 12px !important; }
  body.lab-bare, html.taa-app body:has(#codeLab) { background-attachment: scroll !important; }
}
@media (prefers-reduced-motion: reduce) {
  #codeLab .lab-pbtn, #codeLab .lcl-near-b, #codeLab .lab-icon-btn { transition: none; }
}

/* ---------- Highlights ---------- */
#codeLab .lab-quick-btn { color: #a5f3fc !important; border-color: rgba(34, 211, 238, 0.5) !important; background: rgba(34, 211, 238, 0.08) !important;
  box-shadow: 0 0 12px -6px rgba(34, 211, 238, 0.3) !important; }
#codeLab .lab-quick-btn svg { color: #67e8f9 !important; }
#codeLab .lab-welcome { background: rgba(34, 197, 94, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-left: 3px solid #22c55e !important; border-radius: 10px !important; }
#codeLab .plx-auto, #codeLab .lab-autorun, #codeLab label:has(#labAutoRun) { font-family: var(--clp-mono) !important; font-size: 0.78rem !important; color: var(--clp-muted) !important; }
#codeLab .lab-dots i:nth-child(1) { background: #ff5f57 !important; } #codeLab .lab-dots i:nth-child(2) { background: #febc2e !important; } #codeLab .lab-dots i:nth-child(3) { background: #28c840 !important; }
@media (prefers-reduced-motion: reduce) { #codeLab .lab-editor::before, #codeLab .lab-right::before { animation: none; } }

/* Brackets and punctuation in the code: soft, so the words stand out. */
html body #codeLab:not(.plx-t-light) .lab-panel .cm-bracket, html body #codeLab:not(.plx-t-light) .lab-panel .cm-tag.cm-bracket { color: #565f89 !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-tag { color: var(--code-tag) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-attribute { color: var(--code-attr) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-string { color: var(--code-string) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-keyword { color: var(--code-keyword) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-number { color: var(--code-number) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-property { color: var(--code-prop) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-def, html body #codeLab:not(.plx-t-light) .lab-panel .cm-variable-2 { color: var(--code-def) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .cm-comment { color: #565f89 !important; font-style: italic; }
html body #codeLab:not(.plx-t-light) .lab-panel .CodeMirror { color: var(--code-text) !important; background: var(--code-bg) !important; }
html body #codeLab:not(.plx-t-light) .lab-panel .CodeMirror-gutters { background: var(--code-bg) !important; }

/* The editor's foot (website Code Lab: "Saved in this browser"; app: Update preview as I type): IDE-style. */
#codeLab .lab-editor-foot { font-family: var(--clp-mono) !important; font-size: 0.76rem !important; color: var(--clp-muted) !important;
  background: rgba(255, 255, 255, 0.02) !important; border-top: 1px solid var(--clp-line) !important; }
#codeLab .lab-saved { color: #9ece6a !important; }
#codeLab .lab-saved::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #9ece6a; box-shadow: 0 0 4px rgba(158, 206, 106, 0.6); vertical-align: 1px; }

/* ---------- Quick website keeps its cyan on hover, just a little brighter ---------- */
#codeLab .lab-quick-btn:hover { color: #cffafe !important; border-color: rgba(34, 211, 238, 0.75) !important; background: rgba(34, 211, 238, 0.14) !important;
  box-shadow: 0 0 14px -6px rgba(34, 211, 238, 0.4) !important; }
#codeLab .lab-quick-btn:hover svg { color: #a5f3fc !important; }

/* ---------- Full screen preview (founder 2026-10-13: "I clicked on the full screen mode ... it doesn't work") ----------
   The glass blur on .lab-right (backdrop-filter above) makes it the box that position: fixed is measured from, so the
   full screen preview (html.lab-full .lab-preview, playground.css) stayed inside the right panel and ran off the screen.
   In full screen nothing around the preview may blur, filter, transform or contain it. */
html.lab-full :has(.lab-preview) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; transform: none !important; contain: none !important; }
/* The panel's glass was the preview's only background: in full screen the bar gets a solid one, so the page behind it never shows through. */
html.lab-full #codeLab .lab-preview { background: #0a0e18 !important; width: auto !important; } /* inset: 0 sizes it to the window; 100vw also counted the scrollbar space and cut off the shrink button */