/* Web Lab */
.web-frame { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: block; }
.web-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.web-eds { display: flex; flex-direction: column; gap: 10px; }
.web-ed { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.web-ed .lk-editor { min-height: 110px; max-height: 260px; }
.web-ed-tag { position: absolute; right: 8px; top: 6px; z-index: 2; padding: 1px 8px; border-radius: 999px; font: 700 11px system-ui; color: #fff; }
.web-ed-tag[data-k="html"] { background: #e34c26; } .web-ed-tag[data-k="css"] { background: #2563eb; } .web-ed-tag[data-k="js"] { background: #ca8a04; }
.web-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.web-console-wrap small { color: var(--muted); }
.web-console { margin-top: 6px; max-height: 140px; min-height: 40px; overflow-y: auto; padding: 8px 10px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font: 12px/1.5 "JetBrains Mono", monospace; }
.web-console [data-k="error"] { color: #fca5a5; } .web-console [data-k="warn"] { color: #fde68a; }
.web-browser { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.web-bar { display: flex; align-items: center; gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); }
.web-bar .lk-btn { padding: 4px 10px; }
.web-host { color: var(--muted); font: 13px "JetBrains Mono", monospace; }
.web-path { flex: 1; min-width: 0; font-family: "JetBrains Mono", monospace !important; }
.web-code { padding: 2px 8px; border-radius: 999px; font: 700 12px system-ui; }
.web-code[data-ok="true"] { background: #dcfce7; color: #166534; } .web-code[data-ok="false"] { background: #fee2e2; color: #991b1b; }
.web-view .web-frame { border: 0; border-radius: 0; }
@media (max-width: 900px) { .web-play { grid-template-columns: minmax(0, 1fr); } }