/* Unified interaction language layered over the compact base stylesheet. */
button, a, input, textarea { transition: border-color .18s, box-shadow .18s, background-color .18s, transform .18s, opacity .18s; }
button:not(:disabled) { cursor: pointer; }
button:not(:disabled):active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .45; }
.back-button svg, .icon-button svg, .viewport-switch svg, .build-button svg, .composer-foot button svg, .publish-note svg, .direction-form svg, .failure-icon svg, .hint-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewport-switch button { display: grid; place-items: center; }
.viewport-switch button:hover:not(.active) { color: #554b78; background: rgba(255,255,255,.52); }
.viewport-switch button.active { color: #664bc5; }

.form-label, .builder-label, .composer > label { color: #34312d; font-size: 14px; font-weight: 780; letter-spacing: -.01em; }
.form-control { min-height: 48px; border: 1px solid #ded9d0; border-radius: 13px; background: #fbfaf8; padding: 11px 13px; color: #262421; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }
.form-control::placeholder, .project-name-input::placeholder, .builder-card textarea::placeholder, .composer textarea::placeholder { color: #aaa59c; opacity: 1; }
.form-control:hover, .project-name-input:hover, .builder-card textarea:hover { border-color: #c9c2b7; }
.form-control:focus, .project-name-input:focus, .builder-card textarea:focus, .composer:focus-within { border-color: #846bec !important; box-shadow: 0 0 0 4px rgba(124,88,238,.10) !important; background: #fff; outline: 0; }
.form-control:not(:placeholder-shown):invalid, .project-name-input:not(:placeholder-shown):invalid, .builder-card textarea:not(:placeholder-shown):invalid { border-color: #d86d62; }
.password-field { position: relative; }
.password-field .form-control { width: 100%; padding-right: 54px; }
.password-toggle { position: absolute; top: 50%; right: 5px; width: 40px; height: 40px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 10px; background: transparent; color: #777169; }
.password-toggle:hover { background: #eeeae4; color: #554b78; }
.password-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(124,88,238,.16); }
.password-toggle:active { transform: translateY(calc(-50% + 1px)) !important; }
.password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-invalid { border-color: #d86d62 !important; box-shadow: 0 0 0 4px rgba(216,109,98,.09) !important; }
.field-error { display: flex; align-items: center; gap: 6px; margin: 7px 2px 0; color: #a6473e; font-size: 13px; font-weight: 650; line-height: 1.45; }
.field-error:before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 6px; background: #fce5e1; font-size: 9px; font-weight: 900; }
.form-hint { display: flex; align-items: flex-start; gap: 7px; margin: 8px 2px 0; color: #777169; font-size: 13px; line-height: 1.5; }
.hint-icon { display: inline-grid; place-items: center; flex: 0 0 17px; height: 17px; border-radius: 6px; background: #eeebe5; color: #716c65; font-size: 9px; font-weight: 900; }
.hint-icon svg { width: 13px; height: 13px; }
.hint-success { color: #43805d; }
.hint-success .hint-icon { background: #def4e7; color: #347650; }
.alert { border: 0; border-radius: 12px; padding: 11px 13px; font-size: 12px; line-height: 1.5; }
.alert-danger { color: #923d35; background: #fff0ed; box-shadow: inset 3px 0 #e06c60; }
.auth-card .btn { border-radius: 12px; min-height: 47px; font-weight: 720; }
.auth-card .form-label { display: block; margin-bottom: 7px; }
.auth-switch a { color: #5d43ca; font-weight: 700; text-underline-offset: 3px; }

.builder-card { padding: 14px 18px 17px; }
.builder-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 6px; }
.builder-label small { color: #a09a91; font-size: 10px; font-weight: 550; }
.builder-label.prompt-label { padding-top: 17px; border-top: 1px solid var(--line); }
.project-name-input { border: 1px solid transparent; border-radius: 11px; background: #faf9f6; padding: 12px 11px; font-size: 17px; }
.builder-card textarea { border: 1px solid transparent; border-radius: 12px; background: #faf9f6; height: 170px; padding: 14px 11px; }
.prompt-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 7px 2px; }
.prompt-examples > span { margin-right: 3px; color: #99938a; font-size: 9px; font-weight: 700; }
.prompt-examples button { border: 1px solid #e4dfd6; border-radius: 999px; background: #fff; padding: 6px 9px; color: #665f57; font-size: 9px; font-weight: 680; }
.prompt-examples button:hover { border-color: #b6a7e7; color: #6046b5; background: #faf8ff; }
.builder-actions { margin-top: 10px; }
.prompt-tips span:first-child { color: #625b52; font-weight: 700; }
.build-button:hover { background: #333; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.build-button svg { width: 15px; height: 15px; }
.empty-icon { width: 46px; height: 46px; margin: auto; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#ff8264,#7854ff); color: #fff; box-shadow: 0 10px 25px rgba(106,72,228,.22); }
.empty-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.status-pill { max-width: 150px; text-align: center; justify-content: center; text-transform: none; letter-spacing: 0; line-height: 1.25; padding: 5px 9px; font-size: 9px; }
.status-awaiting_approval { background: #eee8ff; color: #6244bd; box-shadow: 0 0 0 1px #ddd2ff inset; }
.stage-rail { padding-bottom: 10px; }
.stage-row { padding: 7px 9px; }
.stage-row strong { font-size: 10px; }
.stage-row small { font-size: 9px; line-height: 1.35; }
.stage-row.awaiting { background: #f2eeff; color: #4e399d; box-shadow: 0 0 0 1px #dfd5ff inset; }
.stage-row.awaiting > span { background: #7658dc; color: #fff; border-color: #7658dc; animation: softpulse 1.8s infinite; }
@keyframes softpulse { 50% { box-shadow: 0 0 0 5px rgba(118,88,220,.12); } }
.event-stream { background: linear-gradient(#faf9f7,#f7f5f1); }
.event-item { padding: 8px 5px; border-bottom: 1px solid rgba(224,220,212,.55); }
.event-item strong { color: #5f5a53; letter-spacing: .01em; }
.event-item p { color: #79746c; font-size: 10px; }
.event-progress .event-dot { background: #8266ea; box-shadow: 0 0 0 3px rgba(130,102,234,.10); }
.event-decision { margin: 5px 0; border: 1px solid #e0d6ff; border-radius: 10px; background: #f6f2ff; }
.event-decision .event-dot { background: #7958dc; }

.message-author { display: block; margin-bottom: 5px; color: #716b64; font-size: 9px; font-weight: 850; letter-spacing: .025em; }
.message-assistant .message-bubble { background: #f6f3ff; }
.message-assistant .message-avatar { box-shadow: 0 6px 16px rgba(112,77,221,.2); }
.composer { border-color: #ddd7cd; padding: 12px; }
.composer > label { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px 8px; }
.composer > label small { color: #a29c92; font-size: 9px; font-weight: 500; }
.composer textarea { height: 84px; padding: 10px; border: 0; border-radius: 9px; background: #faf9f6; }
.composer-foot { padding: 8px 2px 0; }
.composer-foot b { margin-right: 4px; color: #6555a0; }
.composer-disabled { background: #f4f2ee; box-shadow: none; }
.composer-disabled:focus-within { border-color: #ddd7cd !important; box-shadow: none !important; }
.composer-foot button:hover { background: #7658dc; }

.plan-review { margin: 12px 12px 0; padding: 14px; border: 1px solid #ddd3fb; border-radius: 16px; background: linear-gradient(145deg,#fbf9ff,#f4f0ff); box-shadow: 0 8px 26px rgba(84,59,159,.08); max-height: 56%; overflow: auto; }
.plan-review-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.plan-review h3 { margin: 3px 0 0; font-size: 16px; letter-spacing: -.03em; }
.decision-kicker { color: #7658ca; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }
.decision-badge { white-space: nowrap; border-radius: 999px; background: #e3f5e9; color: #347450; padding: 5px 7px; font-size: 8px; font-weight: 800; }
.plan-content { margin: 12px 0; padding: 12px; max-height: 190px; overflow: auto; border: 1px solid #e7e0f7; border-radius: 10px; background: rgba(255,255,255,.76); color: #5f5967; font-size: 10px; line-height: 1.55; }
.plan-content h4, .plan-content h5 { margin: 0 0 7px; color: #393340; font-weight: 820; letter-spacing: -.015em; }
.plan-content h4 { font-size: 12px; }
.plan-content h5 { margin-top: 10px; font-size: 10px; }
.plan-content p { margin: 5px 0; }
.plan-content ul { margin: 5px 0 8px; padding-left: 16px; }
.plan-content li { margin: 3px 0; }
.plan-content pre { margin: 8px 0; padding: 9px; overflow: auto; border-radius: 8px; background: #29262e; color: #eeeaf3; font: 8px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.plan-content table { width: 100%; margin: 8px 0; border-collapse: collapse; font-size: 8px; }
.plan-content th, .plan-content td { padding: 6px; border-bottom: 1px solid #ebe5f3; text-align: left; vertical-align: top; }
.plan-content th { color: #453b54; font-weight: 820; background: #faf8fd; }
.direction-title { display: block; margin: 0 0 7px; color: #514b58; font-size: 10px; font-weight: 800; }
.direction-form button { position: relative; width: 100%; display: block; margin-top: 6px; padding: 9px 28px 9px 10px; border: 1px solid #e2dcef; border-radius: 10px; background: #fff; text-align: left; color: #39343f; }
.direction-form button:hover { border-color: #9c83e8; background: #fdfcff; box-shadow: 0 5px 14px rgba(90,65,164,.09); }
.direction-form button strong, .direction-form button small { display: block; }
.direction-form button strong { font-size: 10px; }
.direction-form button small { margin-top: 2px; color: #8c8493; font-size: 8px; line-height: 1.4; }
.direction-form button > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #7559ca; }
.plan-feedback-hint { margin: 11px 2px 0; color: #837c89; font-size: 9px; line-height: 1.5; }
.plan-feedback-hint span { color: #5f4aa8; font-weight: 800; }
.failure-notice { display: flex; gap: 10px; margin: 12px 12px 0; padding: 12px; border: 1px solid #f0d3a6; border-radius: 13px; background: #fff9ed; color: #675234; }
.failure-icon { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border-radius: 9px; background: #f7e5c7; color: #9b6924; font-size: 14px; font-weight: 850; }
.failure-notice strong { display: block; font-size: 10px; }
.failure-notice p { margin: 3px 0 0; color: #8d7450; font-size: 9px; line-height: 1.45; }
.failure-icon svg { width: 15px; height: 15px; }

/* Connected team flow and collaboration transcript. */
.stage-rail { position: relative; padding: 3px 11px 13px; }
.stage-rail:before { content: ""; position: absolute; z-index: 0; left: 31px; top: 20px; bottom: 29px; width: 2px; border-radius: 2px; background: linear-gradient(#88cda4 0 35%,#bba9f2 60%,#dedad3 100%); }
.stage-row { position: relative; z-index: 1; min-height: 48px; margin: 0 0 5px; padding: 8px 9px; border: 1px solid transparent; background: rgba(250,249,247,.9); }
.stage-row > span { background: #faf9f7; }
.stage-row.done:not(.active) { color: #57534d; }
.stage-row.done:not(.active) > span { border-color: #b9dec8; background: #e3f5ea; color: #2e7750; }
.stage-row.active { border-color: #2c2931; background: #25232a; color: #fff; box-shadow: 0 9px 24px rgba(30,27,36,.18); }
.stage-row.active strong { color: #fff; }
.stage-row.active small { color: rgba(255,255,255,.62); }
.stage-row.active > span, .stage-row.active.done > span { border-color: #8066df; background: linear-gradient(145deg,#9679f1,#6c4ed4); color: #fff; box-shadow: 0 0 0 4px rgba(128,102,223,.18); }
.stage-row.active.awaiting { border-color: #6951ba; background: #2b2638; color: #fff; }
.team-room-head { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding: 12px 16px 10px; border-top: 1px solid var(--line); color: #3e3a35; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }
.team-room-head small { color: #9d978e; font-size: 8px; font-weight: 650; letter-spacing: .04em; }
.event-stream { position: relative; padding: 2px 15px 28px; background: #faf9f7; }
.event-stream:before { content: ""; position: absolute; left: 29px; top: 17px; bottom: 31px; width: 1px; background: linear-gradient(#d9d4cc,#cfc3ef 72%,transparent); }
.event-item { position: relative; z-index: 1; grid-template-columns: 29px 1fr; gap: 11px; margin: 0; padding: 10px 1px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.event-item + .event-item { border-top: 1px solid rgba(224,220,212,.48); }
.event-item:last-child { border-right: 0; border-bottom: 0; border-left: 0; background: transparent; box-shadow: none; }
.event-dot, .event-progress .event-dot, .event-decision .event-dot { width: 25px; height: 25px; margin: 0; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg,#8e72e9,#684bc9); color: #fff; font-size: 7px; font-weight: 850; box-shadow: 0 5px 12px rgba(100,74,190,.18); }
.event-item strong { display: block; color: #514c46; font-size: 8px; line-height: 1.25; }
.event-item p { margin-top: 3px; color: #756f67; font-size: 9px; line-height: 1.4; }
.event-success .event-dot { background: linear-gradient(145deg,#64bd86,#3d8e61); }
.event-error .event-dot { background: linear-gradient(145deg,#e27b70,#b94c42); }

.message-team { grid-template-columns: 24px 1fr; gap: 8px; margin-bottom: 9px; }
.message-team .message-avatar { width: 23px; height: 23px; border-radius: 8px; font-size: 7px; box-shadow: 0 4px 10px rgba(112,77,221,.14); }
.message-team .message-bubble { padding: 8px 10px; border: 1px solid #ebe6f4; border-radius: 4px 11px 11px 11px; background: #fbfaff; color: #68616e; font-size: 10px; line-height: 1.45; }
.message-team .message-author { margin-bottom: 3px; font-size: 8px; }
.message-team.team-decision .message-bubble { border-color: #d9cff5; background: #f4f0ff; color: #564873; }
.message-team.team-success .message-bubble { border-color: #d6ecdf; background: #f3fbf6; color: #476652; }
.message-team.team-error .message-bubble { border-color: #f0d4cf; background: #fff5f3; color: #844e47; }
#agent-progress .message-bubble { border: 1px solid #d9cff8; background: linear-gradient(145deg,#f8f5ff,#f1ecff); box-shadow: 0 7px 20px rgba(92,65,173,.08); }
.composer-live { border-color: #cfc3f1; background: linear-gradient(#fff,#fcfaff); box-shadow: 0 8px 26px rgba(83,62,147,.10); }
.composer-live > label span { color: #5e48a7; }
.composer-foot button { display: grid; place-items: center; }
.composer-foot button svg { width: 15px; height: 15px; }
.direction-form button > span { display: grid; place-items: center; }
.direction-form button > span svg { width: 14px; height: 14px; }
.publish-note a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 700; }
.publish-note svg { width: 12px; height: 12px; }

/* Larger, calmer desktop studio with role-specific identity colors. */
.studio { grid-template-columns: 330px minmax(420px,1fr) 500px; grid-template-rows: 64px minmax(0,1fr); }
.studio-topbar { padding: 0 16px; }
.project-head strong { font-size: 15px; }
.project-head span { margin-top: 5px; font-size: 11px; }
.back-button, .icon-button { width: 38px; height: 38px; }
.viewport-switch button { width: 40px; height: 32px; }
.studio-actions .btn { min-height: 34px; padding: 7px 12px; font-size: 11px; }
.run-control { margin: 0; }
.run-control button { display: inline-flex; align-items: center; gap: 7px; }
.run-control svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.studio[data-paused="true"] .live-dot { background: #e8a547; box-shadow: 0 0 0 4px rgba(232,165,71,.14); }
.studio[data-paused="true"] .status-pill { background: #f7ead6; color: #8c5b20; }
.studio[data-paused="true"] .typing i { animation-play-state: paused; }
.sidebar-title { padding: 20px 19px 15px; font-size: 12px; }
.stage-rail { padding-right: 13px; padding-left: 13px; }
.stage-rail:before { left: 35px; }
.stage-row { grid-template-columns: 32px 1fr; gap: 10px; min-height: 58px; padding: 10px; }
.stage-row > span { width: 28px; height: 28px; font-size: 11px; }
.stage-row strong { font-size: 12px; }
.stage-row small { margin-top: 3px; font-size: 10.5px; line-height: 1.4; }
.team-room-head { padding: 14px 18px 11px; font-size: 11px; }
.team-room-head small { font-size: 9px; }
.event-stream { padding-right: 17px; padding-left: 17px; }
.event-stream:before { left: 31px; }
.event-item { grid-template-columns: 29px 1fr; gap: 11px; padding: 11px 1px; }
.event-dot, .event-progress .event-dot, .event-decision .event-dot { width: 29px; height: 29px; font-size: 8px; }
.event-item strong { font-size: 10px; }
.event-item p { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.chat-head { padding: 19px 20px 16px; }
.chat-head .eyebrow { font-size: 10px; }
.chat-head h2 { margin-top: 4px; font-size: 22px; }
.status-pill { max-width: 175px; padding: 7px 11px; font-size: 11px; }
.messages { padding: 20px; }
.message { grid-template-columns: 38px 1fr; gap: 11px; margin-bottom: 17px; }
.message-avatar { position: relative; isolation: isolate; overflow: hidden; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.72); border-radius: 12px; color: #fff; font-size: 10px; letter-spacing: .035em; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 20px rgba(82,62,138,.18); }
.message-avatar::before { content: ""; position: absolute; z-index: -1; inset: -55% -20%; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.38) 45%, transparent 68%); transform: translateX(-34%) rotate(12deg); }
.message-bubble { padding: 13px 15px; font-size: 14px; line-height: 1.58; }
.message-author { margin-bottom: 6px; font-size: 10px; }
.message-team { grid-template-columns: 34px 1fr; gap: 11px; margin-bottom: 12px; }
.message-team .message-avatar { width: 33px; height: 33px; border-radius: 11px; font-size: 9px; }
.message-team .message-bubble { padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.message-team .message-author { margin-bottom: 4px; font-size: 9px; }
.progress-bubble { gap: 11px; }
.composer { margin: 14px; padding: 14px; border-radius: 17px; }
.composer > label { padding-bottom: 10px; font-size: 13px; }
.composer > label small { font-size: 10px; }
.composer textarea { height: 96px; padding: 12px; font-size: 13px; line-height: 1.55; }
.composer-foot { padding-top: 10px; font-size: 10px; }
.composer-foot button { width: 34px; height: 34px; border-radius: 10px; }
.plan-review { margin: 14px 14px 0; padding: 17px; }
.plan-review h3 { font-size: 19px; }
.decision-kicker, .direction-title { font-size: 11px; }
.decision-badge { padding: 6px 9px; font-size: 9px; }
.plan-content { max-height: 220px; padding: 14px; font-size: 12px; }
.plan-content h4 { font-size: 14px; }
.plan-content h5, .direction-form button strong { font-size: 12px; }
.direction-form button { padding: 11px 34px 11px 12px; }
.direction-form button small, .plan-feedback-hint { font-size: 10px; }
.failure-notice { margin: 14px 14px 0; padding: 14px; }
.failure-notice strong { font-size: 12px; }
.failure-notice p { font-size: 10.5px; }
.publish-note { margin: 0 14px 14px; padding: 12px 14px; font-size: 11px; }

.message-assistant .message-avatar.avatar-ad { background: radial-gradient(circle at 22% 15%,#ffd7c9 0 5%,transparent 27%),linear-gradient(140deg,#ff9677 0%,#d95c9f 52%,#7759df 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(200,74,118,.24); }
.message-assistant .message-avatar.avatar-ma { background: radial-gradient(circle at 22% 15%,#ece0ff 0 5%,transparent 27%),linear-gradient(140deg,#c19cff 0%,#825bea 50%,#4f70d9 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(104,74,208,.24); }
.message-assistant .message-avatar.avatar-no { background: radial-gradient(circle at 22% 15%,#d7f5ff 0 5%,transparent 27%),linear-gradient(140deg,#69cde9 0%,#4d8ce2 52%,#7257df 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(57,118,199,.23); }
.message-assistant .message-avatar.avatar-qu { background: radial-gradient(circle at 22% 15%,#dcffed 0 5%,transparent 27%),linear-gradient(140deg,#72d7a7 0%,#42a39a 52%,#526fcf 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(48,139,113,.23); }
.message-assistant .message-avatar.avatar-at { background: radial-gradient(circle at 22% 15%,#fff1c8 0 5%,transparent 27%),linear-gradient(140deg,#f4c56e 0%,#ed8a68 50%,#c85caa 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 8px 22px rgba(202,115,66,.23); }
.message-user .message-avatar.avatar-you { border-color: #37343c; background: linear-gradient(145deg,#39363f,#211f25); color: #fff; box-shadow: 0 7px 18px rgba(24,22,28,.16); }
#agent-progress .message-avatar::before { animation: avatar-flow 2.8s ease-in-out infinite; }
@keyframes avatar-flow { 50% { transform: translateX(36%) rotate(12deg); } }
.event-stage-queued .event-dot { background: linear-gradient(140deg,#ff9677,#d95c9f 54%,#7759df); }
.event-stage-planning .event-dot, .event-stage-awaiting_approval .event-dot { background: linear-gradient(140deg,#c19cff,#825bea 52%,#4f70d9); }
.event-stage-building .event-dot { background: linear-gradient(140deg,#69cde9,#4d8ce2 52%,#7257df); }
.event-stage-reviewing .event-dot, .event-stage-failed .event-dot { background: linear-gradient(140deg,#72d7a7,#42a39a 52%,#526fcf); }
.event-stage-starting .event-dot, .event-stage-ready .event-dot { background: linear-gradient(140deg,#f4c56e,#ed8a68 50%,#c85caa); }
.stage-row[data-stage="queued"].active > span { background: linear-gradient(145deg,#f08a6d,#cf5d43); border-color: #e77c5f; }
.stage-row[data-stage="planning"].active > span { background: linear-gradient(145deg,#9a7cf0,#6d4ed1); border-color: #8c6ee2; }
.stage-row[data-stage="building"].active > span { background: linear-gradient(145deg,#5c9bef,#3471c7); border-color: #4c8bdd; }
.stage-row[data-stage="reviewing"].active > span { background: linear-gradient(145deg,#60bd8a,#32845c); border-color: #50a97a; }
.stage-row[data-stage="starting"].active > span { background: linear-gradient(145deg,#efb65e,#c88128); border-color: #dda349; }
.event-stream, .messages, .plan-review, .plan-content { scrollbar-width: thin; scrollbar-color: #c8c1d7 transparent; }
.event-stream::-webkit-scrollbar, .messages::-webkit-scrollbar, .plan-review::-webkit-scrollbar, .plan-content::-webkit-scrollbar { width: 7px; height: 7px; }
.event-stream::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb, .plan-review::-webkit-scrollbar-thumb, .plan-content::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c8c1d7; background-clip: padding-box; }
.form-label { font-size: 14px; }
.form-hint { font-size: 13px; }
.form-control { font-size: 15px; }

/* Readability floor: helper copy is product UI, not legal fine print. */
.eyebrow, .sidebar-title, .team-room-head, .team-room-head small,
.project-head span, .studio-actions .btn, .status-pill,
.builder-label small, .prompt-examples > span, .prompt-examples button,
.prompt-tips, .project-footer, .form-hint, .composer > label small,
.composer-foot, .message-author, .message-team .message-author,
.event-item strong, .direction-title, .decision-kicker, .decision-badge,
.direction-form button small, .plan-feedback-hint, .failure-notice p,
.publish-note { font-size: 13px; }
.stage-row small, .event-item p, .plan-content, .plan-content h5,
.plan-content table, .plan-content pre, .direction-form button strong,
.failure-notice strong { font-size: 13px; }
.stage-row strong, .composer > label { font-size: 14px; }
.message-team .message-bubble, .composer textarea { font-size: 14px; }
.builder-label small, .composer > label small, .plan-feedback-hint,
.direction-form button small, .failure-notice p { color: #777169; line-height: 1.5; }

@media (max-width: 1280px) {
  .studio { grid-template-columns: 290px minmax(380px,1fr) 440px; }
}

@media (max-width: 1080px) {
  .studio { grid-template-columns: 260px minmax(340px,1fr) 410px; }
  .plan-review { max-height: 52%; }
}
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; grid-template-rows: 64px minmax(360px,1fr) 430px; grid-template-areas: "top" "preview" "chat"; overflow: auto; }
  .messages { padding: 18px; }
  .message-bubble { font-size: 13px; }
}
@media (max-width: 620px) {
  .studio-actions .run-control { display: block; }
  .run-control button { width: 38px; min-width: 38px; padding: 0; justify-content: center; }
  .run-control button span { display: none; }
  .builder-label small { display: none; }
  .plan-review { max-height: none; }
  .form-control { min-height: 46px; }
}