/* Labs control center extends the established Moonbay palette and navigation. */
:root { color-scheme: dark; }
body { background: radial-gradient(ellipse at 70% 0, #10223a 0, transparent 38%), #080d17; }
.hero-card, .panel { background: #111a29; backdrop-filter: none; -webkit-backdrop-filter: none; }
.top-nav { padding-top: 24px; }
.brand-button { width: 62px; height: 62px; }
.brand-button img { width: 46px; height: 46px; }
.labs-hero { padding: 48px; position: relative; overflow: hidden; }
.labs-hero::after { content: ""; width: 320px; height: 320px; border-radius: 50%; border: 1px solid #7dd3fc18; position: absolute; top: -160px; right: -70px; box-shadow: 0 0 0 45px #7dd3fc04, 0 0 0 90px #7dd3fc03; pointer-events: none; }
.labs-hero .hero-copy h1 { font-size: clamp(38px, 4.9vw, 62px); line-height: 1.08; letter-spacing: -.045em; margin: 26px 0 18px; }
.labs-hero .hero-copy p { max-width: 600px; }
.live-dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; margin-right: 8px; }
.labs-workflow { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 18px; padding-top: 26px; border-top: 1px solid var(--border); }
.labs-workflow span { color: var(--cyan); font-size: 11px; letter-spacing: .05em; }
.labs-workflow strong { margin-left: 10px; color: #a9b6cb; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.hero-actions .primary { gap: 24px; }
.eyebrow { display: block; color: var(--cyan); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.section-head h2 { letter-spacing: -.025em; margin-bottom: 6px; }
.section-head h3 { margin: 0; }
.section-head p { font-size: 13px; }
.auth-grid { margin-top: 22px; align-items: start; }
.auth-card { background: #0d1421; padding: 26px; }
.auth-card h3 { font-size: 21px; letter-spacing: -.025em; }
.auth-form { gap: 17px; }
.auth-form input, .auth-form select, .auth-form textarea, .field input, .field select, .field textarea, .copy-field input { font-weight: 400; background: #151f30; border: 1px solid #ffffff17; border-radius: 12px; min-height: 46px; width: 100%; color: #f3f6fc; padding: 12px 14px; font-family: inherit; font-size: 13px; outline: none; }
.auth-form select, .field select { cursor: pointer; padding-right: 32px; }
.auth-form input:focus-visible, .auth-form textarea:focus-visible, .auth-form select:focus-visible, .field input:focus-visible, .field select:focus-visible, .copy-field input:focus-visible { border-color: #7dd3fc99; box-shadow: 0 0 0 3px #7dd3fc14; }
.auth-form textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.auth-form input::placeholder, .auth-form textarea::placeholder { color: #6e7c93; opacity: 1; }
.auth-form label > span { font-size: 12px; color: #c9d2e3; }
.auth-form label > span > small { color: var(--muted); font-size: 11px; font-weight: 400; }
.auth-form input[readonly] { color: #9eaec7; }
.field-hint { color: #8795ad; font-size: 11px; font-weight: 400; line-height: 1.5; }
.button { border-radius: 12px; font-family: inherit; min-height: 45px; gap: 10px; }
.button.primary { background: #b7e6fc; color: #0c1726; }
.button.secondary { background: #ffffff07; }
.button.compact { padding: 10px 16px; min-height: 39px; font-size: 12px; }
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.text-button { border: 0; padding: 8px 0; background: transparent; color: #b8d8eb; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1.4; }
.text-button:hover { color: #e4f6ff; }
.text-button:disabled { opacity: .45; cursor: wait; }
.text-button.danger-button { color: var(--danger); }
.onboarding-card .employee-note { margin: -2px 0 20px; }
.access-note { padding: 30px; min-height: 302px; display: flex; flex-direction: column; align-items: start; background: linear-gradient(135deg, #15273b, #101a2a); }
.access-note .access-symbol { font-size: 30px; color: #99dcfb; margin-bottom: 18px; }
.access-note h3 { font-size: 25px; line-height: 1.25; }
.access-note p { color: #a3b4cc; font-size: 13px; line-height: 1.65; max-width: 370px; margin: 0 0 14px; }
.access-note .employee-note { font-size: 11px; color: #7d90ab; margin-top: auto; margin-bottom: 0; }
#labsAuth { scroll-margin-top: 20px; }
#labStatusMessage:empty { display: none; }
#retryConnectionButton { margin-top: 14px; }
.lab-account-panel { padding: 16px 18px; background: #0d1421; border-radius: 14px; }
.profile-switcher { gap: 20px; justify-content: flex-start; }
.profile-switcher-main small { font-size: 12px; }
.lab-account-panel > .button { flex-shrink: 0; }
.workspace-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-top: 8px; }
.workspace-tabs a.workspace-tab { text-decoration: none; }
.workspace-tab { display: inline-flex; align-items: center; gap: 9px; border: 1px solid transparent; background: transparent; color: #96a3ba; cursor: pointer; padding: 11px 16px; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 12px; }
.workspace-tab.is-active { color: #d5f1ff; background: #7dd3fc10; border-color: #7dd3fc20; }
.workspace-tab > span { font-size: 10px; min-width: 19px; min-height: 19px; display: inline-grid; place-items: center; border-radius: 6px; color: #a3c6d9; background: #7dd3fc12; }
.workspace-caption { margin-left: auto; color: #5f728d; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-right: 3px; }
.workspace-message { margin: 18px 0; }
.workspace-message:empty { margin: 0; }
.workspace-head { margin: 30px 0 24px; }
.workspace-head h2 { font-size: 26px; }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.project-card { text-align: left; border: 1px solid #ffffff12; border-radius: 20px; background: #111a29; padding: 24px; color: #f5f8ff; cursor: pointer; font-family: inherit; min-width: 0; transition: border-color .2s, transform .2s; }
.project-card:hover { transform: translateY(-3px); border-color: #7dd3fc66; }
.project-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.project-monogram { display: inline-grid; place-items: center; width: 47px; height: 47px; background: #7dd3fc12; color: #c0e9fe; border: 1px solid #7dd3fc1c; border-radius: 14px; font-size: 16px; font-weight: 600; }
.project-arrow { color: #6f8aa7; font-size: 19px; }
.project-card h3 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 9px; overflow-wrap: anywhere; }
.project-description { color: #91a0b9; font-size: 12px; line-height: 1.7; margin: 0 0 23px; min-height: 41px; overflow-wrap: anywhere; }
.project-card-slug { color: #5f8ba4; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.empty-state { text-align: center; border: 1px dashed #ffffff1f; border-radius: 18px; padding: 40px 26px; grid-column: 1 / -1; }
.empty-state .empty-symbol { color: #5c7c99; font-size: 32px; display: block; margin-bottom: 16px; }
.empty-state h3 { font-size: 16px; margin: 0 0 9px; font-weight: 600; }
.empty-state p { color: #8797b0; font-size: 12px; line-height: 1.7; max-width: 370px; margin: 0 auto; }
#projectCreatePanel { background: #121f30; }
.form-grid { margin-top: 0; gap: 17px; }
.span-all { grid-column: 1 / -1; }
.back-button { margin: 22px 0 14px; }
.project-overview { margin-bottom: 22px; }
.project-overview .section-head { margin-bottom: 0; }
.project-overview h2 { font-size: 28px; overflow-wrap: anywhere; }
#projectDescription { overflow-wrap: anywhere; white-space: pre-line; max-width: 700px; }
.project-settings { margin-top: 22px; padding-top: 18px; border-top: 1px solid #ffffff12; }
.project-settings > summary, .build-details > summary { color: #829bb8; cursor: pointer; font-size: 11px; width: fit-content; }
.project-settings > form { margin-top: 20px; }
.release-workspace { display: grid; grid-template-columns: minmax(280px,.87fr) minmax(0,1.13fr); gap: 22px; align-items: start; }
.release-side { min-width: 0; }
.release-workspace .section-panel { padding: 24px; margin-bottom: 22px; }
.release-workspace .section-head h2 { font-size: 21px; }
.upload-intro { margin: -1px 0 22px; font-size: 12px; }
.auth-form .file-drop { border: 1px dashed #6baac55c; border-radius: 14px; background: #7dd3fc06; text-align: center; padding: 20px 14px; gap: 8px; align-items: center; justify-items: center; }
.file-drop .upload-symbol { font-size: 27px; font-weight: 300; color: #95cee6; }
.file-drop input[type="file"] { font-size: 10px; padding: 9px; background: #0e1a2a; min-width: 0; max-width: 100%; }
.file-drop input[type="file"]::file-selector-button { background: #a9def1; border: 0; border-radius: 6px; padding: 7px 9px; color: #0c1b2a; font: inherit; cursor: pointer; margin-right: 8px; }
.file-drop small { font-size: 10px; color: #718ca6; font-weight: 400; }
.count-badge { font-size: 12px; vertical-align: middle; margin-left: 5px; color: #8ca4be; }
.release-stack { display: grid; gap: 14px; }
.build-card { padding: 18px; border: 1px solid #ffffff12; background: #0c1422; border-radius: 14px; min-width: 0; }
.build-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }
.build-head h3 { font-size: 20px; font-weight: 600; margin: 0 0 3px; overflow-wrap: anywhere; }
.build-head .employee-note { font-size: 10px; }
.build-head .status { min-height: 25px; font-size: 9px; padding: 0 8px; }
.build-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.build-meta .file-chip { font-size: 9px; min-height: 24px; padding: 0 8px; border-radius: 6px; font-weight: 500; border-color: #ffffff0b; background: #ffffff05; color: #9aaec8; }
.build-notes { margin: 0 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; color: #b8c4d7; font-size: 12px; line-height: 1.6; }
.build-card > .employee-note { font-size: 10px; }
.build-details { margin-top: 15px; }
.build-details p { margin: 10px 0; font-size: 10px; overflow-wrap: anywhere; }
.checksum { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #758ca8; font-size: 9px; line-height: 1.7; overflow-wrap: anywhere; }
.build-actions { margin-top: 16px; }
.build-actions:empty { display: none; }
.build-actions .button.compact { min-height: 34px; font-size: 11px; padding: 8px 12px; }
.integration-panel h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }
.integration-panel .employee-note { font-size: 11px; }
.integration-selectors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0 12px; }
.integration-selectors .field { font-size: 10px; }
.integration-selectors select { min-height: 37px; padding: 9px 8px; font-size: 11px; }
.copy-field { display: flex; gap: 8px; align-items: center; }
.copy-field input { font-size: 10px; min-width: 0; min-height: 39px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.copy-field .button { flex-shrink: 0; }
#integrationMessage { font-size: 10px; margin-top: 10px; }
.progress-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: #8abbd2; margin-bottom: 7px; }
progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 4px; background: #24374b; }
progress::-webkit-progress-bar { background: #24374b; border-radius: 4px; }
progress::-webkit-progress-value { background: #93d9f5; border-radius: 4px; transition: width .15s; }
progress::-moz-progress-bar { background: #93d9f5; border-radius: 4px; }
.team-workspace { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: 22px; align-items: start; }
.team-workspace h3 { margin: 0 0 20px; }
.invite-card h3.invite-email { font-size: 13px; margin: 0; }
.invite-card .text-button { margin-top: 10px; font-size: 10px; }
.invite-result { padding: 18px; background: #7dd3fc08; border: 1px solid #7dd3fc24; border-radius: 14px; margin-top: 20px; display: grid; gap: 14px; }
.invite-result .field input { font-size: 10px; }
.invite-result .employee-note { font-size: 10px; }
.publish-dialog { width: min(460px,calc(100% - 32px)); border: 1px solid #7dd3fc33; border-radius: 22px; background: #111e2e; color: #f3f7fe; padding: 28px; box-shadow: 0 30px 120px #0009; }
.publish-dialog::backdrop { background: #010710bd; backdrop-filter: blur(7px); }
.publish-dialog h2 { margin: 14px 0; font-size: 23px; letter-spacing: -.025em; overflow-wrap: anywhere; }
.publish-dialog p { line-height: 1.6; font-size: 12px; color: #9cafc9; overflow-wrap: anywhere; }
.publish-dialog .button-row { margin-top: 24px; }
.overview-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.overview-stat { padding: 24px; border-radius: 18px; border: 1px solid #ffffff12; background: #101a29; display: grid; gap: 12px; }
.overview-stat > span { color: #8fa2bd; font-size: 11px; }
.overview-stat > strong { font-size: 24px; letter-spacing: -.03em; font-weight: 600; }
.overview-stat:first-child > strong { font-size: 36px; line-height: 1; }
.overview-stat > small { font-size: 10px; color: #5d7896; }
.overview-modules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.overview-modules > article { padding: 24px; border-radius: 20px; margin-bottom: 0; display: flex; flex-direction: column; align-items: start; }
.module-number { font-size: 10px; color: #668ba8; margin-bottom: 30px; }
.overview-modules h3 { font-size: 19px; margin: 0 0 14px; letter-spacing: -.02em; }
.overview-modules p { color: #8a9eb9; font-size: 12px; line-height: 1.75; margin: 0 0 22px; }
.overview-modules .button, .overview-modules .file-chip { margin-top: auto; font-size: 10px; }
.team-role-note { margin-bottom: 20px; font-size: 12px; }
.team-members { display: grid; gap: 1px; }
.team-member { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid #ffffff0d; }
.team-member:last-child { border-bottom: 0; }
.team-member .member-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
.team-member .member-email { font-size: 11px; color: #7d92ad; overflow-wrap: anywhere; }
.team-member select { background: #1a293c; color: #b7cce2; font-family: inherit; font-size: 11px; border: 1px solid #ffffff18; border-radius: 8px; padding: 9px; }
.team-member .text-button { min-width: 100px; text-align: right; font-size: 11px; }
@media(max-width:1000px) { .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .overview-modules { grid-template-columns: 1fr; } .overview-modules > article { padding: 24px; } .module-number { margin-bottom: 15px; } }
@media(max-width:860px) { .auth-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .release-workspace, .team-workspace { grid-template-columns: 1fr; } .upload-panel { order: 0; } .release-side { order: 1; } }
@media(max-width:640px) { .labs-hero { padding: 28px 22px; } .labs-hero .hero-copy h1 { font-size: 39px; } .labs-workflow { gap: 13px; flex-direction: column; } .auth-grid, .project-grid, .overview-stats { grid-template-columns: 1fr; } .overview-stat { gap: 10px; padding: 20px; } .overview-stat > strong { font-size: 23px; } .overview-stat:first-child > strong { font-size: 28px; } .auth-card { padding: 20px; } .access-note { min-height: 250px; } .workspace-head { flex-direction: column; align-items: start; gap: 18px; } .workspace-caption { display: none; } .workspace-tab { padding: 10px 12px; font-size: 12px; } .project-overview .section-head { flex-direction: column; align-items: start; } .release-workspace .section-panel { padding: 20px; } .copy-field { flex-direction: column; align-items: stretch; } .integration-selectors { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; } .profile-switcher { flex-wrap: wrap; } .lab-account-panel { align-items: stretch; } .lab-account-panel > .button { align-self: flex-start; } .publish-dialog { padding: 22px; } .team-member { grid-template-columns: minmax(0,1fr) auto; gap: 14px 10px; } .team-member > .text-button { grid-column: 2; } .team-member > div { grid-row: 1 / span 2; } .team-member select { max-width: 143px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto!important; transition: none!important; } }
.integration-project-note { color: #a9bfd6; background: #7dd3fc07; border-left: 2px solid #7dd3fc3b; border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: 11px; line-height: 1.7; margin: 16px 0 0; }