:root {
  color-scheme: dark;
  --bg: #0a0d12;
  --panel: #11161e;
  --panel-2: #171e28;
  --line: #273141;
  --text: #f3f6fa;
  --muted: #8f9bad;
  --accent: #63e6be;
  --accent-2: #4dabf7;
  --danger: #ff8787;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 60% -20%, #192637 0, var(--bg) 38%); color: var(--text); }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; transform: none !important; }
.hidden { display: none !important; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 12px; line-height: 1.5; }
.eyebrow, .section-label { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #57dcb4; color: var(--accent); font-weight: 850; letter-spacing: -.08em; border-radius: 16px; background: linear-gradient(145deg, #1b3b37, #0f171b); box-shadow: 0 0 40px #63e6be22; }
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.primary, .secondary, .ghost, .danger, .file-button { border-radius: 10px; padding: 10px 14px; color: var(--text); transition: .15s ease; }
.primary { background: var(--accent); color: #07110e; font-weight: 750; }
.primary:hover { background: #8af0cf; transform: translateY(-1px); }
.secondary { background: #213042; border: 1px solid #35465b; }
.ghost, .file-button { background: transparent; border: 1px solid var(--line); }
.ghost:hover, .secondary:hover, .file-button:hover { border-color: #61718a; background: #1b2430; }
.danger { background: #3a1d24; color: var(--danger); border: 1px solid #66303a; }
.full { width: 100%; }
.spacer { flex: 1; }
label { display: grid; gap: 7px; color: #c4cbd5; font-size: 13px; }
input, textarea { width: 100%; color: var(--text); background: #0c1118; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; resize: vertical; }
input:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px #4dabf71c; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 480px) minmax(400px, 1fr); align-items: center; gap: 8vw; padding: 8vw; }
.auth-card { max-width: 430px; }
.auth-card h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.055em; margin: 22px 0; }
.auth-card form { display: grid; gap: 14px; margin-top: 30px; }
.auth-visual { min-height: 500px; position: relative; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: linear-gradient(145deg, #111a25, #090c11); display: grid; place-items: center; }
.auth-visual::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(#668 1px, transparent 1px), linear-gradient(90deg,#668 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent); }
.wire-object { width: 240px; height: 180px; border: 2px solid var(--accent); transform: rotateX(60deg) rotateZ(-30deg); box-shadow: inset 0 0 50px #63e6be1a; position: relative; }
.wire-object span { position: absolute; border: 2px solid var(--accent-2); border-radius: 50%; width: 26px; height: 26px; }
.wire-object span:nth-child(1){left:20px;top:20px}.wire-object span:nth-child(2){right:20px;top:20px}.wire-object span:nth-child(3){left:105px;bottom:28px;width:34px;height:34px}
.flow-copy { position: absolute; left: 28px; bottom: 26px; display: grid; grid-template-columns: 70px 1fr; gap: 8px 16px; font-size: 13px; }
.flow-copy span { color: var(--muted); }
.app-shell { height: 100vh; display: grid; grid-template-columns: 248px minmax(480px, 1fr) 330px; }
.sidebar, .artifact-panel { background: #0d1219e8; border-right: 1px solid var(--line); padding: 22px 16px; min-height: 0; }
.sidebar { display: flex; flex-direction: column; }
.artifact-panel { border-left: 1px solid var(--line); border-right: 0; overflow: auto; }
.artifact-panel-header { display: none; align-items: center; justify-content: space-between; gap: 12px; }
.brand-row { display: flex; gap: 11px; align-items: center; margin: 0 4px 24px; }
.brand-row small { display: block; color: var(--muted); margin-top: 3px; }
.section-label { margin: 24px 8px 10px; }
.project-list { display: grid; gap: 5px; overflow-y: auto; }
.project-item { text-align: left; width: 100%; padding: 11px 12px; background: transparent; color: #cdd5df; border-radius: 9px; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-item:hover { background: #171e28; }.project-item.active { background: #18312e; color: #d8fff1; border-color: #28554d; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 6px; }
.workspace { min-width: 0; display: flex; flex-direction: column; background: #0b0f15; }
.workspace-header { min-height: 94px; padding: 20px 28px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.workspace-header h2 { margin: 2px 0; font-size: 22px; }.workspace-header p { margin: 0; }
.header-statuses { display: flex; align-items: center; gap: 8px; }
.artifact-toggle { display: none; padding: 7px 11px; border-radius: 999px; background: #213042; color: var(--text); border: 1px solid #35465b; font-size: 12px; }
.connection-badge { padding: 7px 11px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.connection-badge.connected { color: var(--accent); border-color: #28554d; background: #10221e; }
.connection-badge.disconnected { color: #ffd8a8; border-color: #66572b; background: #2b2513; }
.status-pill { padding: 7px 11px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); color: var(--muted); }
.status-pill.running { color: #ffe8a1; border-color: #66572b; background: #2b2513; }.status-pill.succeeded { color: var(--accent); border-color: #28554d; }.status-pill.failed { color: var(--danger); border-color: #63313a; }
.empty-state { margin: auto; text-align: center; max-width: 480px; color: var(--muted); }.empty-state h3 { color: var(--text); font-size: 24px; }.empty-icon { color: var(--accent); font-size: 72px; }
.project-view { min-height: 0; flex: 1; display: grid; grid-template-rows: minmax(180px, 1fr) auto auto; }
.message-list { overflow-y: auto; padding: 26px 8%; display: flex; flex-direction: column; gap: 18px; }
.message { max-width: 760px; padding: 14px 16px; border-radius: 14px; white-space: pre-wrap; line-height: 1.55; font-size: 14px; }
.message.user { align-self: flex-end; background: #213042; }.message.assistant { align-self: flex-start; background: #152620; border: 1px solid #24483e; }.message.system { align-self: flex-start; background: #311c22; color: #ffd1d1; border: 1px solid #5d2c36; }
.message-meta { display: block; opacity: .6; font-size: 10px; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .08em; }
.message.retry { padding-block: 10px; opacity: .84; }
.message.retry details summary { cursor: pointer; color: #d9e4ef; }
.retry-content { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff1a; color: #c3cedb; }
.message-action { margin-top: 10px; padding: 7px 10px; border-radius: 8px; background: transparent; color: #ffc9c9; border: 1px solid #81404d; }
.message-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.message-images figure { margin: 0; padding: 6px; border: 1px solid #ffffff1a; border-radius: 10px; background: #0d141d; }.message-images img { display: block; width: 140px; height: 100px; object-fit: cover; border-radius: 7px; border: 1px solid #ffffff22; }.message-images figcaption { max-width: 140px; margin-top: 5px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.message-images a { display: block; margin-top: 4px; color: var(--accent-2); font-size: 10px; text-decoration: none; }
.composer { margin: 0 5% 14px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px #0005; }
.run-progress { margin: -2px -2px 9px; padding: 9px 11px; border-radius: 10px; background: #172231; color: #c8d7e9; font-size: 12px; }
.run-progress.running, .run-progress.queued { background: #2b2513; color: #ffe8a1; }
.run-progress.succeeded { background: #10221e; color: var(--accent); }
.run-progress.failed { background: #311c22; color: #ffc9c9; }
.composer-header { display: flex; justify-content: space-between; gap: 12px; padding: 2px 8px 5px; color: #d8e0ea; font-size: 12px; font-weight: 700; }
.composer-shortcut { color: var(--muted); font-weight: 500; }
.composer textarea { border: 0; background: transparent; box-shadow: none; min-height: 78px; }
.composer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }.file-button input { display: none; }
.send-button { min-width: 190px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.file-preview { display: grid; gap: 7px; padding: 0 6px 8px; }
.file-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #0c1118; color: #aeb9c7; font-size: 11px; }
.file-card img { width: 52px; height: 42px; object-fit: cover; border-radius: 7px; }
.heic-marker { width: 52px; height: 42px; display: grid; place-items: center; align-content: center; border-radius: 7px; background: #18312e; color: var(--accent); font-size: 9px; line-height: 1.15; }.heic-marker b { font-size: 11px; }.heic-marker span { color: #9fb7ae; }
.file-card span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-log-panel { margin: 0 5% 16px; border: 1px solid var(--line); border-radius: 10px; background: #090d12; }.run-log-panel summary { cursor: pointer; padding: 8px 12px; color: var(--muted); font-size: 12px; }.run-log-panel pre { max-height: 180px; overflow: auto; padding: 12px; margin: 0; border-top: 1px solid var(--line); color: #b9c4d2; font-size: 11px; white-space: pre-wrap; }
.viewer { height: 280px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle, #1b2532, #080b0f 70%); overflow: hidden; position: relative; }.viewer canvas { width: 100%; height: 100%; display: block; }.viewer-placeholder { height: 100%; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 30px; }
.viewer-help { color: var(--muted); font-size: 10px; text-align: center; padding: 7px; }.artifact-heading { margin-top: 14px; }
.artifact-list { display: grid; gap: 8px; }.artifact-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: #111720; }.artifact-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #1d2937; color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }.artifact-card small { color: var(--muted); display: block; margin-top: 3px; }.artifact-card a { color: var(--accent-2); text-decoration: none; font-size: 12px; }.artifact-card button { color: var(--text); background: transparent; font-size: 12px; }
dialog { width: min(520px, 92vw); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 24px 80px #000a; } dialog::backdrop { background: #000a; backdrop-filter: blur(4px); } dialog form { display: grid; gap: 16px; } dialog h3 { margin: 0; }.dialog-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.device-login { display: grid; gap: 12px; padding: 14px; border: 1px solid #28554d; border-radius: 12px; background: #10221e; }
.connected-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid #28554d; border-radius: 12px; background: #10221e; color: #c8f8e9; }
.connected-panel span { color: #9fb7ae; font-size: 13px; line-height: 1.55; }
.device-code { display: block; padding: 12px; border-radius: 10px; background: #080d11; color: var(--accent); font-size: 26px; font-weight: 800; letter-spacing: .16em; text-align: center; user-select: all; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; }
.api-key-fallback { border-top: 1px solid var(--line); padding-top: 14px; }
.api-key-fallback summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.api-key-fallback[open] { display: grid; gap: 12px; }
.api-key-fallback[open] summary { margin-bottom: 2px; }
.toast { position: fixed; z-index: 20; right: 24px; top: 20px; padding: 11px 14px; border-radius: 10px; background: #213042; color: var(--text); transform: translateY(-100px); transition: .2s; box-shadow: 0 10px 40px #0008; }.toast.show { transform: translateY(0); }.toast.error { background: #5a2732; }
/* Admin panel */
.admin-dialog { width: min(600px, 94vw); }
.admin-user-list { display: grid; gap: 8px; max-height: 400px; overflow-y: auto; }
.admin-user-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0c1118; }
.admin-user-info { display: flex; align-items: center; gap: 10px; }
.admin-user-info small { color: var(--muted); font-size: 11px; }
.admin-role-badge { padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.admin-role-badge.admin { background: #2b1a3e; color: #c9a0ff; border: 1px solid #4c2d70; }
.admin-role-badge.user { background: #1a2838; color: #8fb7e4; border: 1px solid #2d4463; }
.admin-user-actions { display: flex; gap: 6px; align-items: center; }
.admin-user-actions .small { padding: 5px 8px; font-size: 11px; }
.admin-create-section { border-top: 1px solid var(--line); padding-top: 14px; }
.admin-create-section summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.admin-create-section[open] { display: grid; gap: 12px; }
select { width: 100%; color: var(--text); background: #0c1118; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; }
.model-select { width: auto; min-width: 120px; padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.lang-switch { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.lang-switch:hover { opacity: 1; }
.auth-card .lang-switch { position: absolute; top: 16px; right: 16px; padding: 4px 10px; }
.auth-card { position: relative; }
@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 210px 1fr; }
  .artifact-toggle { display: inline-flex; }
  .artifact-panel { display: none; position: fixed; z-index: 15; inset: 0 0 0 auto; width: min(390px, 94vw); box-shadow: -24px 0 70px #000c; }
  .artifact-panel.open { display: block; }
  .artifact-panel-header { display: flex; }
}
@media (max-width: 720px) { .auth-shell { grid-template-columns: 1fr; padding: 28px; }.auth-visual { display: none; }.app-shell { grid-template-columns: 1fr; }.sidebar { display: none; }.composer { margin: 0 12px 12px; }.message-list { padding: 18px; }.composer-shortcut { display: none; }.send-button { width: 100%; order: 10; }.composer-actions .spacer { display: none; } }