/* Code Lab project bar and its tools (code-lab-projects.js, code-lab-tools.js) */
.lab-pbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.lab-pbar-tools { flex-wrap: wrap; }
.lab-pbar::-webkit-scrollbar { display: none; }
.lab-pbar-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lab-pbtn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 34px; padding: 0 11px; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text); background: transparent;
  border: 1px solid var(--border); border-radius: 9px; white-space: nowrap;
}
.lab-pbtn:hover { border-color: var(--accent); }
.lab-pbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-pbtn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lab-pbtn-proj { max-width: 260px; background: var(--code-bg); }
.lab-pbtn-proj .lab-pname { overflow: hidden; text-overflow: ellipsis; }
.lab-psync { display: inline-flex; color: var(--text-muted); }
.lab-psync svg { width: 16px; height: 16px; }
.lab-psync.is-ok { color: #34d399; }
.lab-psync.is-busy { color: var(--accent); }
.lab-psync.is-err { color: #fbbf24; }
/* Auto save + continue later (2026-10-08): the "Auto-saved · 2 min ago" label and the Welcome back note */
.lab-psync { align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.lab-psync.is-local { color: #34d399; }
.lab-welcome { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 10px 12px; border: 1px solid rgba(34, 197, 94, 0.45); border-radius: 12px; background: rgba(34, 197, 94, 0.08); font-size: 0.86rem; }
.lab-welcome > svg { width: 18px; height: 18px; flex-shrink: 0; color: #22c55e; }
.lab-welcome p { margin: 0; flex: 1; min-width: 0; }
.lab-welcome .lab-icon-btn { flex-shrink: 0; }
@media (max-width: 640px) { .lab-psync-ago { display: none; } .lab-welcome { flex-wrap: wrap; } .lab-welcome p { flex: 1 1 calc(100% - 30px); } .lab-welcome .lab-img-act { margin-left: 28px; } .lab-welcome .lab-icon-btn { margin-left: auto; } }
.lab-class-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.lab-class-pill[hidden] { display: none; }
.lab-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: labLive 1.4s infinite; }
@keyframes labLive { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .lab-live-dot { animation: none; } }
@media (max-width: 640px) { .lab-pbar, .lab-pbar-tools { flex-wrap: nowrap; } .lab-pbar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lab-pbar::-webkit-scrollbar { display: none; } .lab-pbtn:not(.lab-pbtn-proj) span { display: none; } .lab-pbtn:not(.lab-pbtn-proj) { width: 34px; padding: 0; justify-content: center; } .lab-pbtn-proj { max-width: 46vw; } }

/* Dialogs */
.lab-proj-dialog, .lab-tool-dialog { width: min(560px, calc(100vw - 32px)); }
.lab-tool-dialog.is-wide { width: min(760px, calc(100vw - 32px)); }
.lab-proj-new { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.lab-proj-new svg { width: 18px; height: 18px; }
.lab-proj-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; max-height: 42vh; overflow-y: auto; }
.lab-proj-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; }
.lab-proj-item.is-current { border-color: var(--accent); background: rgba(59, 130, 246, 0.08); }
/* My projects > My websites (2026-10-07) */
.lab-proj-sub { margin: 4px 0 8px; font-size: .95rem; }
.lab-proj-note { margin: 0 0 10px; font-size: .85rem; color: var(--text-muted); }
.lab-proj-acts a.lab-img-act { text-decoration: none; display: inline-flex; align-items: center; }
.lab-proj-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--text); background: none; border: 0; padding: 2px 0; cursor: pointer; }
div.lab-proj-name { cursor: default; }
.lab-proj-name strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.lab-proj-name small { font-size: 0.76rem; color: var(--text-muted); }
.lab-proj-acts { display: flex; gap: 6px; flex-shrink: 0; }
.lab-proj-rename { flex: 1; min-width: 0; }
.lab-proj-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--code-bg); font-size: 0.85rem; }
.lab-proj-box > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.lab-proj-box p { margin: 0 0 8px; color: var(--text-muted); }
.lab-proj-box p strong { color: var(--text); }
.lab-proj-signin { display: flex; gap: 6px; flex-wrap: wrap; }
.lab-proj-signin input { flex: 1; min-width: 180px; }
.lab-proj-offline-msg { font-size: 0.8rem; color: var(--text-muted); }
.lab-proj-back { margin-top: 12px; }
.lab-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 56vh; overflow-y: auto; padding: 2px; }
.lab-tpl-level { grid-column: 1 / -1; margin: 12px 0 2px; padding-bottom: 4px; font-size: 0.82rem; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--border, rgba(127,127,127,.3)); }
.lab-tpl-level:first-child { margin-top: 0; }
.lab-tpl { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: var(--text); background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px; }
.lab-tpl:hover, .lab-tpl:focus-visible { border-color: var(--accent); }
.lab-tpl-thumb { position: relative; height: 96px; overflow: hidden; background: #fff; pointer-events: none; }
.lab-tpl-thumb iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; border: 0; transform: scale(0.25); transform-origin: 0 0; }
.lab-tpl-tx { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.lab-tpl-tx strong { font-size: 0.86rem; }
.lab-tpl-tx small { font-size: 0.74rem; color: var(--text-muted); }

/* Insert */
.lab-ins-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.lab-ins-tab { flex: 1; padding: 8px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.lab-ins-tab.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
.lab-ins-body code, .lab-tool-dialog .lab-dialog-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; background: var(--code-bg); padding: 1px 5px; border-radius: 5px; }
.lab-ins-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
.lab-ins-swatch { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; }
.lab-ins-swatch:hover { transform: scale(1.06); }
.lab-tool-dialog .lab-ins-own { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.lab-ins-own input[type=color] { width: 56px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; }
.lab-ins-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.lab-ins-font { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; cursor: pointer; color: var(--text); background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; }
.lab-ins-font:hover { border-color: var(--accent); }
.lab-ins-font strong { font-size: 1.05rem; }
.lab-ins-font small { font-size: 0.8rem; color: var(--text-muted); }
.lab-ins-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.lab-ins-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; cursor: pointer; color: var(--text); background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.lab-ins-icon:hover { border-color: var(--accent); }
.lab-ins-icon svg { width: 24px; height: 24px; }
.lab-ins-icon small { font-size: 0.68rem; color: var(--text-muted); }

/* Check */
.lab-check-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.lab-check { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--code-bg); font-size: 0.86rem; }
.lab-check div { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.lab-check small { color: var(--text-muted); font-size: 0.8rem; }
.lab-check-ic { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px; }
.lab-check.is-ok .lab-check-ic { background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.lab-check.is-warn .lab-check-ic { background: #f59e0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.5'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Publish and class */
.lab-pub-addr { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.lab-pub-addr span { padding: 0 4px 0 10px; font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.lab-tool-dialog .lab-pub-addr input { border: 0; border-radius: 0; background: transparent; min-width: 0; }
.lab-pub-avail { margin: 6px 0 0; font-size: 0.8rem; min-height: 1em; }
.lab-pub-avail.is-ok { color: #34d399; }
.lab-pub-avail.is-err { color: #fbbf24; }
.lab-pub-open { margin-top: 12px; }
.lab-pub-share { margin-top: 12px; }
.lab-cls-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.3rem !important; letter-spacing: 0.25em; text-transform: uppercase; }
@media (max-width: 480px) { .lab-pub-addr { flex-direction: column; align-items: stretch; } .lab-pub-addr span { padding: 8px 10px 0; } }
.lab-pub-addr .lab-pub-post { padding: 0 10px 0 2px; }
.lab-pub-addr .lab-pub-post:empty, .lab-pub-addr .lab-pub-pre:empty { display: none; }

/* Publish-only mode on the website after the app launches (code-lab-lite.js) */
html.lab-lite .lab-pbar button:not([data-track="codelab-publish-open"]) { display: none !important; }
html.lab-lite .lab-pbar .lab-pbar-tools { margin: 0; }
/* The project bar (Auto-saved, "Projects, templates ... are in the app") and the "Welcome back ... My projects" note
   are app only (founder 2026-10-09); Publish already sits next to Live preview. */
html.lab-lite .lab-pbar, html.lab-lite .lab-welcome { display: none !important; }
.lab-preview-bar .lab-pub-moved { height: 30px; padding: 0 11px; font-size: 0.8rem; margin-left: 8px; }
.lab-preview-bar .lab-pub-moved span { display: inline !important; }
.lab-preview-bar .lab-pub-moved { width: auto !important; min-width: 0; flex: none; gap: 6px; }
html.lab-lite .lab-preview-title { white-space: nowrap; }
@media (max-width: 420px) { .lab-preview-bar .lab-pub-moved { margin-left: 4px; padding: 0 9px; } html.lab-lite .lab-preview-bar .lab-dots { display: none; } }
.lab-lite-note { font-size: 0.82rem; color: #7cc4ff; text-decoration: none; margin-left: 10px; align-self: center; }
.lab-lite-note:hover { text-decoration: underline; }

/* App: editing a published website (code-lab-edit-site.js) */
.lab-editsite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(56, 182, 255, 0.35); background: rgba(56, 182, 255, 0.08); font-size: 0.88rem; }
.lab-editsite-txt { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lab-editsite-txt a { color: #7cc4ff; font-weight: 600; text-decoration: none; }
.lab-editsite-txt span { color: var(--text-muted, #9aa3b2); }
.lab-editsite-ver { font: inherit; font-size: 0.82rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border, #2a3352); background: var(--surface, #111827); color: inherit; }
/* New website and My projects in the top row on tanimawoai.com (code-lab-lite.js, founder 2026-10-07) */
.lab-home-bar .lab-new, .lab-home-bar .lab-myproj { font: inherit; cursor: pointer; }
.lab-home-bar .lab-new { background: linear-gradient(135deg, #1f7bff, #14b8c9); border-color: transparent; color: #fff; font-weight: 700; }
.lab-home-bar .lab-new:hover, .lab-home-bar .lab-new:focus-visible { filter: brightness(1.08); color: #fff; }

/* Simpler Code Lab on tanimawoai.com (founder 2026-10-08: "Remove unecesary features here https://tanimawoai.com/codelab.html").
   Website only (html.lab-lite, set by code-lab-lite.js off the app host); the app keeps every one of these. Left: the
   HTML/CSS/JS tabs, Undo/Redo, Run, Ask AI (ChatGPT, Claude, Gemini), Publish,
   the preview with Phone and Computer, How it works. Images (pictures, videos, audio), Paste AI answer and Quick website are app only too (founder 2026-10-09). To bring one back, delete its selector here. */
html.lab-lite #labUpload, html.lab-lite #labDownload, html.lab-lite .lab-dl, html.lab-lite #labExplainCode, html.lab-lite #labShare,
html.lab-lite #labReset, html.lab-lite .lab-tools [aria-label="Find in your code"], html.lab-lite .lab-tools .lab-tool-sep,
html.lab-lite .lab-askai-copy, html.lab-lite .lab-askai-side, html.lab-lite .lab-site-addpage, html.lab-lite .lab-site-dev[data-dev="tablet"],
/* Quick website shows on the website too (founder 2026-10-12) */
html.lab-lite #labConsole, html.lab-lite .lab-img-btn, html.lab-lite #labPasteAi, html.lab-lite .lab-editor-foot .lab-switch { display: none !important; }