:root {
    color-scheme: dark;
    --bg: #070b18;
    --surface: #11172a;
    --surface-2: #18213a;
    --line: rgba(159, 183, 230, 0.2);
    --text: #f6f8ff;
    --muted: #aab5ca;
    --cyan: #28d5ff;
    --violet: #7c5cff;
    --green: #43d98b;
    --orange: #ffbf47;
    --red: #ff6b91;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 5%, rgba(124,92,255,.18), transparent 31%), radial-gradient(circle at 88% 25%, rgba(40,213,255,.13), transparent 26%), var(--bg); color: var(--text); font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.lab-shell { width: min(1060px, calc(100% - 32px)); margin: 30px auto; }
.lab-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.lab-brand { display: flex; align-items: center; gap: 11px; }
.lab-brand > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(40,213,255,.38); border-radius: 8px; background: rgba(40,213,255,.1); color: var(--cyan); font-weight: 900; }
.lab-brand strong, .lab-brand small { display: block; }
.lab-brand small { color: var(--muted); }
.lab-label { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: .76rem; font-weight: 850; }
.browser-window { overflow: hidden; border: 1px solid rgba(40,213,255,.25); border-radius: 10px; background: var(--surface); box-shadow: 0 28px 70px rgba(0,0,0,.34); }
.browser-bar { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 14px; min-height: 58px; border-bottom: 1px solid var(--line); padding: 10px 15px; background: #151b2a; }
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff645f; }
.browser-dots i:nth-child(2) { background: #ffbd44; }
.browser-dots i:nth-child(3) { background: #20ca55; }
.browser-url { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 8px 12px; background: #0c111d; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.app-demo { padding: 28px; }
.app-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--cyan); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.subtitle { margin: 0; color: var(--muted); }
.status { border: 1px solid rgba(67,217,139,.32); border-radius: 999px; padding: 7px 10px; background: rgba(67,217,139,.08); color: var(--green); font-size: .75rem; font-weight: 900; }
.task-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface-2); }
.task-form input { min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; background: #0d1324; color: var(--text); }
.primary-button, .secondary-button { border: 1px solid transparent; border-radius: 7px; padding: 10px 14px; font-weight: 850; }
.primary-button { background: linear-gradient(135deg, var(--violet), var(--cyan)); color: #fff; }
.secondary-button { border-color: var(--line); background: var(--surface-2); color: var(--text); }
.task-list { display: grid; gap: 10px; }
.task { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface-2); }
.task strong, .task small { display: block; }
.task small { margin-top: 3px; color: var(--muted); }
.task[data-status="done"] { border-color: rgba(67,217,139,.28); opacity: .78; }
.task[data-status="done"] strong { text-decoration: line-through; }
.tag { border-radius: 999px; padding: 5px 8px; background: rgba(255,191,71,.1); color: var(--orange); font-size: .7rem; font-weight: 900; }
.lab-note { display: flex; gap: 10px; margin-top: 16px; border-left: 3px solid var(--cyan); padding: 10px 12px; background: rgba(40,213,255,.06); color: var(--muted); }
.error-panel { border: 1px solid rgba(255,107,145,.3); border-radius: 8px; padding: 24px; background: rgba(255,107,145,.06); text-align: center; }
.error-code { color: var(--red); font-size: 4rem; font-weight: 950; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { border-bottom: 1px solid var(--line); padding: 11px; text-align: left; }
th { background: rgba(40,213,255,.06); color: var(--cyan); font-size: .74rem; text-transform: uppercase; }
.message { min-height: 28px; color: var(--muted); }
.message.is-error { color: var(--red); }
.message.is-success { color: var(--green); }
.source-hint { margin-top: 18px; color: var(--muted); font-size: .78rem; }
code { color: #bdefff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 680px) {
    .lab-shell { width: min(100% - 20px, 1060px); margin: 12px auto; }
    .lab-topbar, .app-header { align-items: flex-start; flex-direction: column; }
    .browser-bar { grid-template-columns: 1fr; }
    .browser-dots { display: none; }
    .app-demo { padding: 18px; }
    .task-form, .task { grid-template-columns: 1fr; }
    .primary-button, .secondary-button { width: 100%; }
}