/* Web Design Lab v2 — ProgressiveKids Theme */
.wlab-root *, .wlab-root *::before, .wlab-root *::after { box-sizing:border-box; margin:0; padding:0; }
.wlab-root {
    font-family:'Roboto',-apple-system,sans-serif; font-size:13px;
    background:#0d1820; color:#c9d1d9;
    display:flex; flex-direction:column; overflow:hidden;
    border-radius:10px; border:1px solid #1e3a52;
    position:relative;
}
.wlab-root.wlab-light { background:#f0f4f8; color:#275372; border-color:#c5d8e8; }
.wlab-root.wlab-fullscreen {
    position:fixed; top:0; left:0; width:100vw !important; height:100vh !important;
    z-index:99999; border-radius:0; margin:0 !important;
}

/* ── Topbar ── */
.wlab-topbar {
    display:flex; align-items:center; gap:6px; padding:7px 12px;
    background:#0a1520; border-bottom:2px solid #00a1ff;
    flex-shrink:0; flex-wrap:wrap;
}
.wlab-root.wlab-light .wlab-topbar { background:#e8edf2; }
.wlab-brand { font-weight:700; font-size:15px; color:#00a1ff; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.wlab-brand-dot { color:darkorange; }
.wlab-run-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 18px; border-radius:22px; border:none;
    background:#00a1ff; color:#fff; font-size:13px; font-weight:700;
    cursor:pointer; font-family:inherit; transition:background .15s;
    box-shadow:0 2px 8px rgba(0,161,255,.3); white-space:nowrap;
}
.wlab-run-btn:hover { background:#0090e0; }
.wlab-tool-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:5px 10px; border-radius:6px; border:1px solid #1e3a52;
    background:transparent; color:#7aa8c8; font-size:12px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap;
}
.wlab-root.wlab-light .wlab-tool-btn { border-color:#c5d8e8; color:#275372; }
.wlab-tool-btn:hover { background:#1a3a55; border-color:#00a1ff; color:#00a1ff; }
.wlab-root.wlab-light .wlab-tool-btn:hover { background:#cfe0ef; }
.wlab-tool-btn.active { background:rgba(0,161,255,.15); border-color:#00a1ff; color:#00a1ff; }
.wlab-icon-toggle {
    width:30px; height:30px; border-radius:50%; border:1px solid #1e3a52;
    background:transparent; color:#7aa8c8; font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0;
}
.wlab-icon-toggle:hover { border-color:#00a1ff; color:#00a1ff; }
.wlab-sep { width:1px; height:22px; background:#1e3a52; margin:0 2px; flex-shrink:0; }
.wlab-root.wlab-light .wlab-sep { background:#c5d8e8; }
.wlab-status { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:#4a7090; white-space:nowrap; }
.wlab-dot { width:8px; height:8px; border-radius:50%; background:#2a4a6a; flex-shrink:0; }
.wlab-dot.ready { background:#00a1ff; }
.wlab-dot.error { background:#ef4444; }

/* ── Loading bar ── */
.wlab-loading-bar { height:3px; background:#1e3a52; flex-shrink:0; }
.wlab-loading-inner { height:100%; width:0; background:#00a1ff; transition:width .3s; }

/* ── Restore banner ── */
.wlab-restore-banner {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 14px; background:rgba(0,161,255,.08);
    border-bottom:1px solid rgba(0,161,255,.18);
    font-size:12px; color:#00a1ff; flex-shrink:0;
}
.wlab-restore-clear {
    padding:2px 10px; border-radius:12px;
    border:1px solid rgba(0,161,255,.4); background:transparent;
    color:#00a1ff; font-size:11px; cursor:pointer; font-family:inherit;
}
.wlab-restore-clear:hover { background:#00a1ff; color:#fff; }

/* ── Assets bar ── */
.wlab-assets-bar {
    display:flex; align-items:center; gap:8px; padding:5px 12px;
    background:#080f18; border-bottom:1px solid #1e3a52;
    flex-shrink:0; flex-wrap:wrap; min-height:36px;
}
.wlab-root.wlab-light .wlab-assets-bar { background:#e0eaf4; border-color:#c5d8e8; }
.wlab-assets-label { font-size:11px; color:#4a7090; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.wlab-asset-item {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 10px; border-radius:12px;
    background:rgba(0,161,255,.1); border:1px solid rgba(0,161,255,.25);
    color:#00a1ff; font-size:11px; font-family:monospace; cursor:default;
    max-width:180px;
}
.wlab-asset-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wlab-asset-del {
    background:none; border:none; cursor:pointer;
    color:#4a7090; font-size:13px; padding:0; line-height:1;
    flex-shrink:0;
}
.wlab-asset-del:hover { color:#ef4444; }
.wlab-upload-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:12px;
    border:1px dashed #1e3a52; background:transparent;
    color:#4a7090; font-size:11px; cursor:pointer;
    font-family:inherit; transition:all .15s;
}
.wlab-upload-btn:hover { border-color:#00a1ff; color:#00a1ff; }
#wlab-file-input { display:none; }

/* ── Main IDE body ── */
.wlab-ide-body { display:flex; flex:1; overflow:hidden; min-height:0; }

/* ── Editor column (left) ── */
.wlab-editor-col {
    display:flex; flex-direction:column;
    overflow:hidden; min-width:80px;
    transition:width .2s;
    border-right:1px solid #1e3a52;
}
.wlab-root.wlab-light .wlab-editor-col { border-right-color:#c5d8e8; }

/* Editor tabs */
.wlab-editor-tabs {
    display:flex; background:#0a1520; border-bottom:1px solid #1e3a52;
    flex-shrink:0; overflow-x:auto; scrollbar-width:none;
}
.wlab-editor-tabs::-webkit-scrollbar { display:none; }
.wlab-root.wlab-light .wlab-editor-tabs { background:#e8edf2; border-color:#c5d8e8; }
.wlab-etab {
    padding:7px 16px; font-size:12px; font-weight:700;
    cursor:pointer; border-bottom:2px solid transparent;
    color:#4a7090; transition:all .15s; user-select:none;
    white-space:nowrap; font-family:inherit; flex-shrink:0;
}
.wlab-etab:hover { color:#00a1ff; }
.wlab-etab.html.active { color:#f97316; border-bottom-color:#f97316; }
.wlab-etab.css.active  { color:#60a5fa; border-bottom-color:#60a5fa; }
.wlab-etab.js.active   { color:#facc15; border-bottom-color:#facc15; }

/* CodeMirror */
.wlab-cm-host { flex:1; overflow:hidden; min-height:0; display:flex; flex-direction:column; }
.wlab-cm-panel { flex:1; overflow:hidden; display:none; }
.wlab-cm-panel.active { display:flex; flex-direction:column; }
.wlab-cm-panel .CodeMirror {
    height:100% !important; flex:1;
    font-family:"JetBrains Mono","Fira Code",Consolas,monospace !important;
    font-size:13px !important; line-height:1.65 !important;
    background:#0d1820 !important; color:#c9d1d9 !important;
}
.wlab-root.wlab-light .wlab-cm-panel .CodeMirror { background:#fff !important; color:#275372 !important; }
.wlab-cm-panel .CodeMirror-gutters  { background:#0a1520 !important; border-right:1px solid #1e3a52 !important; }
.wlab-root.wlab-light .wlab-cm-panel .CodeMirror-gutters { background:#e8edf2 !important; border-color:#c5d8e8 !important; }
.wlab-cm-panel .CodeMirror-linenumber  { color:#2a5a7a !important; padding:0 10px 0 6px !important; }
.wlab-cm-panel .CodeMirror-activeline-background { background:rgba(0,161,255,.05) !important; }
.wlab-cm-panel .CodeMirror-selected { background:rgba(0,161,255,.18) !important; }
.wlab-cm-panel .CodeMirror-cursor   { border-left:2px solid #00a1ff !important; }
.wlab-cm-panel .CodeMirror-matchingbracket { background:rgba(0,161,255,.22) !important; color:#00a1ff !important; font-weight:700; }
.wlab-cm-panel .cm-keyword   { color:#c792ea !important; font-weight:600; }
.wlab-cm-panel .cm-string,.wlab-cm-panel .cm-string-2 { color:#c3e88d !important; }
.wlab-cm-panel .cm-comment   { color:#546e7a !important; font-style:italic; }
.wlab-cm-panel .cm-number    { color:#f78c6c !important; }
.wlab-cm-panel .cm-atom      { color:#ff5370 !important; }
.wlab-cm-panel .cm-tag       { color:#f07178 !important; }
.wlab-cm-panel .cm-attribute { color:#ffcb6b !important; }
.wlab-cm-panel .cm-def       { color:#82aaff !important; }
.wlab-cm-panel .cm-variable  { color:#c9d1d9 !important; }
.wlab-cm-panel .cm-operator  { color:#89ddff !important; }
.wlab-cm-panel .cm-builtin   { color:#82aaff !important; }
.wlab-cm-panel .cm-property  { color:#82aaff !important; }
.CodeMirror-hints {
    background:#0f1e2e !important; border:1px solid #00a1ff !important;
    border-radius:6px !important; font-family:"JetBrains Mono",monospace !important;
    font-size:12px !important; box-shadow:0 4px 16px rgba(0,161,255,.15) !important;
}
.CodeMirror-hint { color:#c9d1d9 !important; padding:3px 12px !important; }
.CodeMirror-hint-active { background:#00a1ff !important; color:#fff !important; border-radius:4px; }

/* ── Resize handle between editor and preview ── */
.wlab-resize-handle {
    width:5px; background:#1e3a52; cursor:col-resize; flex-shrink:0;
    transition:background .15s; position:relative;
    display:flex; align-items:center; justify-content:center;
}
.wlab-resize-handle:hover, .wlab-resize-handle.dragging { background:#00a1ff; }
.wlab-resize-handle::after {
    content:'⋮'; color:#4a7090; font-size:14px; line-height:1;
    pointer-events:none;
}

/* ── Preview column (right) ── */
.wlab-preview-col {
    display:flex; flex-direction:column; overflow:hidden;
    min-width:80px; transition:width .2s;
}
.wlab-preview-toolbar {
    display:flex; align-items:center; gap:6px; padding:5px 12px;
    background:#0a1520; border-bottom:1px solid #1e3a52;
    flex-shrink:0;
}
.wlab-root.wlab-light .wlab-preview-toolbar { background:#e8edf2; border-color:#c5d8e8; }
.wlab-preview-label {
    font-size:11px; font-weight:700; color:#4a7090;
    text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
}
.wlab-preview-url {
    flex:1; background:#1a2a3a; border:1px solid #1e3a52;
    border-radius:10px; padding:3px 10px; font-size:11px;
    color:#4a7090; font-family:monospace; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis;
}
.wlab-root.wlab-light .wlab-preview-url { background:#fff; border-color:#c5d8e8; }
.wlab-preview-frame { flex:1; border:none; background:#fff; min-height:0; }

/* ── Console panel (bottom, shrinkable) ── */
.wlab-console-panel {
    border-top:2px solid #00a1ff; display:flex; flex-direction:column;
    flex-shrink:0; background:#080f18; overflow:hidden;
}
.wlab-root.wlab-light .wlab-console-panel { background:#f8fafc; }
.wlab-console-head {
    display:flex; align-items:center; gap:8px; padding:5px 12px;
    background:#0a1520; border-bottom:1px solid #1e3a52;
    font-size:11px; font-weight:700; color:#4a7090;
    text-transform:uppercase; letter-spacing:.07em;
    cursor:ns-resize; flex-shrink:0; user-select:none;
}
.wlab-root.wlab-light .wlab-console-head { background:#e8edf2; border-color:#c5d8e8; }
.wlab-console-toggle {
    font-size:11px; color:#4a7090; margin-left:6px; cursor:pointer;
    background:none; border:none; font-family:inherit;
}
.wlab-console-toggle:hover { color:#00a1ff; }
.wlab-console-clear {
    margin-left:auto; background:none; border:1px solid #1e3a52;
    color:#4a7090; font-size:11px; padding:2px 8px; border-radius:10px;
    cursor:pointer; font-family:inherit; transition:all .15s;
}
.wlab-console-clear:hover { border-color:darkorange; color:darkorange; }
.wlab-console-body {
    overflow-y:auto; padding:8px 14px;
    font-family:"JetBrains Mono",Consolas,monospace;
    font-size:12px; line-height:1.7; transition:height .2s;
}
.wlab-console-body.collapsed { height:0 !important; padding:0; }
.l-log  { color:#c9d1d9; white-space:pre-wrap; word-break:break-all; }
.l-err  { color:#ff6b6b; white-space:pre-wrap; }
.l-warn { color:#f9e2af; white-space:pre-wrap; }
.l-info { color:#4a7090; font-style:italic; }

/* ── Download dropdown ── */
.wlab-dl-wrap { position:relative; }
.wlab-dl-menu {
    position:absolute; top:calc(100% + 4px); left:0;
    background:#0f1e2e; border:1px solid #1e3a52; border-radius:8px;
    min-width:160px; z-index:500; display:none; overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.wlab-root.wlab-light .wlab-dl-menu { background:#fff; border-color:#c5d8e8; box-shadow:0 4px 16px rgba(0,0,0,.1); }
.wlab-dl-menu.open { display:block; }
.wlab-dl-item {
    display:block; width:100%; padding:8px 14px; text-align:left;
    background:none; border:none; color:#c9d1d9; font-size:12px;
    font-family:inherit; cursor:pointer; transition:background .1s;
    border-bottom:1px solid #1e3a52;
}
.wlab-root.wlab-light .wlab-dl-item { color:#275372; border-color:#e0e8f0; }
.wlab-dl-item:last-child { border-bottom:none; }
.wlab-dl-item:hover { background:#1a3a55; color:#00a1ff; }
.wlab-root.wlab-light .wlab-dl-item:hover { background:#cfe0ef; }