/* NgodingLab editor precision layer — deliberately scoped to the project workspace. */
#simpleEditorHost{position:relative;isolation:isolate;background:var(--code-bg,#101827);overflow:hidden}
#simpleEditorHost .syntax-layer{display:block!important;position:absolute!important;z-index:1!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border:0!important;border-radius:0!important;padding:18px 20px 140px!important;box-sizing:border-box!important;overflow:scroll!important;scrollbar-gutter:stable;scrollbar-color:transparent transparent;pointer-events:none!important;background:var(--code-bg,#101827)!important;color:var(--code-text,#d9e2f2)!important;font-family:var(--code-font,"Cascadia Code","SFMono-Regular",Consolas,monospace)!important;font-size:var(--code-size,14px)!important;font-weight:400!important;line-height:var(--code-line,1.65)!important;letter-spacing:0!important;font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important;tab-size:var(--code-tab,2);-moz-tab-size:var(--code-tab,2);text-align:left!important;text-indent:0!important;text-transform:none!important;text-rendering:auto!important;white-space:pre;word-break:normal;overflow-wrap:normal}
#simpleEditorHost .syntax-layer::-webkit-scrollbar{width:14px;height:14px}
#simpleEditorHost .syntax-layer::-webkit-scrollbar-thumb,#simpleEditorHost .syntax-layer::-webkit-scrollbar-track{background:transparent}
#simpleEditorHost .syntax-layer code,#simpleEditorHost .syntax-layer code span{font:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important;text-rendering:inherit!important}
#simpleEditorHost .syntax-layer code{display:block;min-width:100%;min-height:100%;padding:0!important;margin:0!important;white-space:inherit;overflow-wrap:inherit;background:transparent!important}
#simpleEditorHost .simple-code-editor.active-editor{
  display:block!important;position:absolute!important;z-index:2!important;inset:0!important;
  width:100%!important;height:100%!important;min-width:100%;min-height:100%;
  margin:0!important;border:0!important;border-radius:0!important;outline:0!important;
  padding:18px 20px 140px!important;box-sizing:border-box!important;resize:none!important;
  overflow:auto!important;overscroll-behavior:contain;
  background:transparent!important;color:transparent!important;
  -webkit-text-fill-color:transparent!important;caret-color:var(--code-caret,#fff)!important;
  font-family:var(--code-font,"Cascadia Code","SFMono-Regular",Consolas,monospace)!important;
  font-size:var(--code-size,14px)!important;font-weight:400!important;
  line-height:var(--code-line,1.65)!important;letter-spacing:0!important;
  font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important;
  tab-size:var(--code-tab,2);-moz-tab-size:var(--code-tab,2);
  text-align:left!important;text-indent:0!important;text-transform:none!important;
  text-rendering:auto!important;transform:none!important;zoom:1;
  white-space:pre;word-break:normal;overflow-wrap:normal;
}
#simpleEditorHost .simple-code-editor::selection{background:var(--code-selection,rgba(99,102,241,.30));color:transparent!important;-webkit-text-fill-color:transparent!important}
#simpleEditorHost .simple-code-editor:not(.active-editor){display:none!important}
#simpleEditorHost .simple-code-editor::-webkit-scrollbar{width:14px;height:14px}
.studio-preview,.studio-preview .preview-space,.studio-preview .device-shell{min-height:0!important}
.studio-preview .preview-space{overflow:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.studio-preview .device-shell iframe{display:block!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
@media (max-width:767.98px){#simpleEditorHost .simple-code-editor.active-editor,#simpleEditorHost .syntax-layer{padding:14px 14px 120px!important;font-size:max(13px,var(--code-size,14px))!important}}

/* V1.12 — editor productivity: line numbers, search, problems, browser PHP runtime. */
#simpleEditorHost .syntax-layer,
#simpleEditorHost .simple-code-editor.active-editor{padding-left:70px!important}
.editor-line-numbers{position:absolute;z-index:4;inset:0 auto 0 0;width:52px;overflow:hidden;pointer-events:none;background:color-mix(in srgb,var(--code-bg,#101827) 92%,#000 8%);border-right:1px solid rgba(148,163,184,.14);padding-top:18px;color:#64748b;font-family:var(--code-font,"Cascadia Code","SFMono-Regular",Consolas,monospace);font-size:var(--code-size,14px);line-height:var(--code-line,1.65);text-align:right;user-select:none}
.editor-line-numbers>div{padding-right:10px;white-space:pre;will-change:transform}
.editor-searchbar{position:absolute;z-index:24;top:84px;right:12px;width:min(520px,calc(100% - 24px));min-height:42px;display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #334155;border-radius:10px;background:#0f172a;color:#94a3b8;box-shadow:0 14px 36px rgba(2,6,23,.32)}
.editor-searchbar[hidden]{display:none!important}
.editor-searchbar input{min-width:160px;max-width:380px;flex:1;border:1px solid #334155;border-radius:8px;background:#111827;color:#e5e7eb;padding:7px 10px;outline:none;font-size:.82rem}
.editor-searchbar input:focus{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.18)}
.editor-searchbar span{font:600 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;min-width:52px;text-align:center}
.editor-searchbar button,.editor-tool-btn{width:30px;height:30px;border:1px solid transparent;border-radius:7px;background:transparent;color:#94a3b8;display:inline-grid;place-items:center;padding:0}
.editor-searchbar button:hover,.editor-tool-btn:hover{background:#1e293b;color:#fff;border-color:#334155}
.editor-shortcuts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.editor-problems{position:absolute;z-index:12;right:12px;top:92px;width:min(520px,calc(100% - 24px));max-height:42%;overflow:auto;background:#0f172a;border:1px solid #334155;border-radius:12px;box-shadow:0 20px 50px rgba(2,6,23,.42);padding:7px}
.editor-problems[hidden]{display:none!important}
.problems-head{position:sticky;top:-7px;z-index:2;margin:-7px -7px 5px;padding:8px 8px 7px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0f172a;border-bottom:1px solid #263449;border-radius:12px 12px 0 0;color:#e2e8f0;font-size:.75rem;font-weight:700}.problems-head>span{display:flex;align-items:center;gap:7px}.problems-close{width:28px;height:28px;display:grid;place-items:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#94a3b8}.problems-close:hover{background:#1e293b;border-color:#334155;color:#fff}
.editor-searchbar:not([hidden]) + .editor-problems:not([hidden]){top:136px}
.problem-item,.problem-ok{width:100%;display:flex;align-items:flex-start;gap:9px;border:0;border-radius:8px;padding:9px 10px;background:transparent;color:#cbd5e1;text-align:left;font-size:.78rem}
.problem-item:hover{background:#172033}.problem-item.error>i{color:#f87171}.problem-item.warning>i{color:#fbbf24}.problem-item span{display:grid;gap:2px}.problem-item strong{font-size:.68rem;color:#94a3b8}.problem-ok{color:#86efac;align-items:center}
.editor-status-action{border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer}.editor-status-action:hover{text-decoration:underline}
.php-runtime-state{margin-left:auto;border:1px solid rgba(148,163,184,.2);border-radius:999px;padding:2px 8px;font-size:.68rem}.php-runtime-state.ready{color:#86efac;border-color:rgba(34,197,94,.3)}.php-runtime-state.loading{color:#fde68a}.php-runtime-state.fallback{color:#fbbf24}.php-runtime-state.error{color:#fca5a5}
.file-lock-retry{border:1px solid rgba(245,158,11,.45);border-radius:7px;background:rgba(245,158,11,.1);color:#fbbf24;padding:3px 8px;font-size:.7rem;cursor:pointer}.file-lock-retry:hover{background:rgba(245,158,11,.2);color:#fff}.file-lock-retry[hidden]{display:none!important}
@media(max-width:767.98px){#simpleEditorHost .syntax-layer,#simpleEditorHost .simple-code-editor.active-editor{padding-left:58px!important}.editor-line-numbers{width:44px;padding-top:14px;font-size:max(13px,var(--code-size,14px))}.editor-shortcuts>span{display:none}.editor-searchbar{top:78px;right:8px;width:calc(100% - 16px)}.editor-problems{top:84px;max-height:50%}.php-runtime-state{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Text and syntax share identical line boxes; the line-number gutter reads
   the top edge of these source-line blocks directly. */
#simpleEditorHost .syntax-layer code{display:block!important;width:100%!important;min-width:100%!important}
#simpleEditorHost .syntax-source-line{display:block!important;width:100%!important;box-sizing:border-box!important;line-height:var(--code-line,1.65)!important}
#simpleEditorHost[data-word-wrap="on"] .simple-code-editor.active-editor,
#simpleEditorHost[data-word-wrap="on"] .syntax-layer,
#simpleEditorHost[data-word-wrap="on"] .syntax-layer code,
#simpleEditorHost[data-word-wrap="on"] .syntax-source-line,
#simpleEditorHost[data-word-wrap="on"] .syntax-source-line span{
  white-space:pre-wrap!important;word-break:break-word!important;overflow-wrap:anywhere!important;
}
#simpleEditorHost[data-word-wrap="off"] .simple-code-editor.active-editor,
#simpleEditorHost[data-word-wrap="off"] .syntax-layer,
#simpleEditorHost[data-word-wrap="off"] .syntax-layer code,
#simpleEditorHost[data-word-wrap="off"] .syntax-source-line,
#simpleEditorHost[data-word-wrap="off"] .syntax-source-line span{
  white-space:pre!important;word-break:normal!important;overflow-wrap:normal!important;
}
#simpleEditorHost[data-word-wrap="on"] .simple-code-editor.active-editor,
#simpleEditorHost[data-word-wrap="on"] .syntax-layer{overflow-x:hidden!important;overflow-y:auto!important;line-height:var(--code-line,1.65)!important;scrollbar-gutter:stable!important}
#simpleEditorHost[data-word-wrap="off"] .simple-code-editor.active-editor,
#simpleEditorHost[data-word-wrap="off"] .syntax-layer{overflow-x:auto!important;overflow-y:auto!important;line-height:var(--code-line,1.65)!important;scrollbar-gutter:stable!important}
.editor-line-numbers,.editor-line-numbers>div{
  white-space:pre!important;
  line-height:var(--code-line,1.65)!important;
}

/* Place one number at each logical source-line block. Wrapped continuations
   are inside that same block and therefore have no extra gutter number. */
.editor-line-numbers{padding:0!important}
.editor-line-numbers>div{position:absolute;inset:0;padding:0!important;transform:none!important}
.editor-line-number{position:absolute;right:10px;display:block;min-width:2ch;text-align:right;line-height:var(--code-line,1.65);white-space:pre;}
#simpleEditorHost .tok-php-delim{font-weight:400!important}

.studio-center{position:relative}

.device-shell{position:relative}
.php-loading-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(248,250,252,.92);backdrop-filter:blur(5px)}
.php-loading-overlay[hidden]{display:none!important}
.php-loading-card{width:min(430px,calc(100% - 40px));padding:34px 28px;text-align:center;border:1px solid #dbe4f0;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.18);display:grid;justify-items:center;gap:12px;color:#172033}
.php-loading-card strong{font-size:1.15rem}.php-loading-card small{color:#64748b;font-size:.9rem}
.php-loading-spinner{width:68px;height:68px;position:relative;display:grid;place-items:center}.php-loading-spinner:before{content:"";position:absolute;inset:3px;border:5px solid #e2e8f0;border-top-color:#4f46e5;border-right-color:#06b6d4;border-radius:50%;animation:phpLoadingSpin 1s linear infinite}.php-loading-spinner span{position:absolute;width:7px;height:7px;border-radius:50%;background:#4f46e5}.php-loading-spinner span:nth-child(1){transform:translateY(-19px)}.php-loading-spinner span:nth-child(2){transform:translate(16px,10px);background:#06b6d4}.php-loading-spinner span:nth-child(3){transform:translate(-16px,10px);background:#f59e0b}@keyframes phpLoadingSpin{to{transform:rotate(360deg)}}

.php-runtime-host{position:fixed!important;left:-100000px!important;top:-100000px!important;width:1px!important;height:1px!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}

/* V1.12.6 — mixed PHP + HTML syntax clarity. */
#simpleEditorHost .tok-php-delim{color:#c084fc!important;font-weight:700!important}
.studio-body:has(#simpleEditorHost[style*="#ffffff"]) #simpleEditorHost .tok-php-delim{color:#7e22ce!important}


/* V1.12.9 — isolated Console collapse; core editor/preview rules remain unchanged. */
.console-actions{display:flex;align-items:center;gap:4px}
.console-actions button{border:0;background:transparent;color:#64748b;font-size:.68rem;min-height:28px;padding:4px 7px;border-radius:6px}
.console-actions button:hover{background:#172235;color:#e2e8f0}
#closeConsole{width:28px;display:grid;place-items:center}
#toggleConsoleBtn.console-has-unread{position:relative;color:#f8fafc;background:#172235}
#toggleConsoleBtn.console-has-unread::after{content:"";position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 2px #0d1420}
.vdb-connection-check #vdbConnectionState{display:inline-flex;align-items:center}
.studio-console[hidden]{display:none!important}
@media(min-width:901px){.studio-app.console-hidden{grid-template-rows:58px minmax(0,1fr) 0!important}}
@media(max-width:900px){.studio-app.console-hidden .studio-console{display:none!important;min-height:0!important;height:0!important}}