/* Product interface. This sheet is loaded only by the dashboard and builder;
   generated websites remain isolated in their preview frame. */
body:is([data-screen="dashboard"], [data-screen="builder"]) {
  --paper: #fafafa;
  --ink: #202124;
  --muted: #64666b;
  --line: #e4e4e7;
  --green: #51545a;
  --orange: #9a6319;
  --text-secondary: #5f6268;
  --text-caption: #6b6e75;
  --serif: Inter, Arial, sans-serif;
  --sidebar: 240px;
  --conversation: 360px;
  color: var(--ink);
  background: var(--paper);
}
body[data-screen] :is(.sidebar, .project-sidebar) {
  background: #f7f7f8;
  border-right-color: var(--line);
  padding: 25px 14px 14px;
}
body[data-screen] .sidebar-brand { margin: 0 10px 27px; }
body[data-screen] .brand { font-size: 23px; letter-spacing: -1px; }
body[data-screen] .brand-mark { width: 27px; height: 31px; }
body[data-screen] .brand-dot { color: #b97b21; }
body[data-screen] .new-project-button {
  min-height: 42px; padding: 10px 13px; gap: 9px;
  background: #fff; border: 1px solid #dedee2; border-radius: 7px;
  color: var(--ink); font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px #00000003;
}
body[data-screen] .new-project-button > span { display: none; }
body[data-screen] .new-project-button:hover { background: #eeeef0; }
body[data-screen] .main-nav { gap: 3px; margin-top: 20px; }
body[data-screen] .main-nav > a {
  padding: 10px 12px; min-height: 40px; gap: 11px;
  color: #45474b; border-radius: 6px; font-size: 14px; line-height: 1.45;
}
body[data-screen] .main-nav > a:is(:hover, [aria-current="page"]) { background: #eaeaec; color: #202124; }
body[data-screen] .main-nav > a[aria-current="page"] { font-weight: 550; }
body[data-screen] .main-nav .icon { color: inherit; width: 17px; height: 17px; }
body[data-screen] .sidebar-recents { margin-top: 32px; scrollbar-color: #d3d4d8 transparent; }
body[data-screen] .sidebar-label { margin: 0 12px 11px; font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; color: #686b72; }
body[data-screen] :is(.recent-link, .recent-project) {
  min-height: 38px; padding: 9px 12px; gap: 10px;
  font-size: 13px; line-height: 1.5; color: #44474c; border-radius: 6px;
}
body[data-screen] :is(.recent-link, .recent-project):hover { background: #eeeef0; }
body[data-screen] .recent-project.is-active { background: #eaeaec; color: #202124; }
body[data-screen] .recent-project .icon, body[data-screen] .recent-link .icon { width: 15px; height: 15px; color: #686b72; }
body[data-screen] .sidebar-empty { font-size: 13px; line-height: 1.7; color: #6b6e75; }
body[data-screen] .sidebar-bottom { padding-top: 12px; }
body[data-screen] :is(.sidebar-guide, .back-home) { color: #5f6268; font-size: 12px; padding: 12px; }
body[data-screen] .account-link { padding: 10px 8px; gap: 10px; border-radius: 6px; }
body[data-screen] .account-link:hover { background: #eeeef0; }
body[data-screen] .account-link :is(.avatar, .account-avatar) {
  background: #24262a; color: #fff; width: 32px; height: 32px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
}
body[data-screen] .account-link strong { font-size: 13px; font-weight: 500; color: #35373c; }
body[data-screen] .account-link small { font-size: 12px; color: #6b6e75; margin-top: 2px; }
body[data-screen] .account-link > .icon { color: #6b6e75; }
body[data-screen] :is(.button, .icon-button) { border-radius: 7px; }
body[data-screen] .button { background: #fff; border-color: var(--line); color: var(--ink); font-size: 14px; padding: 10px 15px; }
body[data-screen] :is(.button, .icon-button):hover { background: #efeff1; }
body[data-screen] :is(.mango-button, .button-mango, .button-dark, .create-button, .send-button, .generate-site) {
  background: #24262a; color: #fff; border-color: #24262a; box-shadow: none;
}
body[data-screen] :is(.mango-button, .button-mango, .button-dark, .create-button, .send-button, .generate-site):hover { background: #3b3e44; border-color: #3b3e44; }
body[data-screen] :is(.text-link, .text-button) { color: #56595f; }
body[data-screen] :is(.text-link, .text-button):hover { color: #202124; }
body[data-screen] :is(h1, h2) em { font-family: var(--sans); font-style: normal; font-weight: inherit; color: inherit; letter-spacing: inherit; }
body[data-screen] :is(h1, h2) > span { color: inherit; }
body[data-screen] :is(input, select, textarea) { border-color: #dcdde1; background-color: #fff; }
body[data-screen] :is(input, textarea)::placeholder { color: #7b7e85; }
body[data-screen] :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #b77820; outline-offset: 3px; }
body[data-screen] dialog { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 80px #00000024; }
body[data-screen] dialog::backdrop { background: #15171c66; backdrop-filter: blur(2px); }
body[data-screen] .dialog-heading h2 { font-size: 24px; letter-spacing: -.65px; }
body[data-screen] .toast { background: #24262a; color: #fff; border-radius: 8px; }

/* Workspace home and project library. */
body[data-screen="dashboard"] .topbar { height: 64px; padding-inline: 44px; }
body[data-screen="dashboard"] .mobile-brand { display: none; }
body[data-screen="dashboard"] .breadcrumb { font-size: 13px; }
body[data-screen="dashboard"] .breadcrumb strong { color: #56595f; font-weight: 500; }
body[data-screen="dashboard"] .local-status { color: #777a80; font-size: 12px; }
body[data-screen="dashboard"] main { max-width: 1240px; padding: 0 44px 36px; }
body[data-screen="dashboard"] .page { min-height: calc(100dvh - 100px); }
body[data-screen="dashboard"] .create-area { max-width: 840px; padding: 48px 0 50px; }
body[data-screen="dashboard"] h1 { font-size: clamp(29px, 2.6vw, 38px); font-weight: 600; line-height: 1.25; letter-spacing: -1.15px; }
body[data-screen="dashboard"] .create-area h1 { margin: 0 0 15px; }
body[data-screen="dashboard"] .hero-copy { color: #63666d; font-size: 15px; margin-bottom: 29px; }
body[data-screen="dashboard"] .idea-composer { padding: 20px 18px 14px; border: 1px solid #d0d1d6; border-radius: 13px; background: #fff; box-shadow: 0 2px 5px #00000003; }
body[data-screen="dashboard"] .idea-composer:focus-within { border-color: #91949b; box-shadow: 0 0 0 2px #24262a07; }
body[data-screen="dashboard"] .idea-composer textarea { background: none; min-height: 86px; font-size: 16px; line-height: 1.65; }
body[data-screen="dashboard"] .composer-bottom { padding-top: 9px; }
body[data-screen="dashboard"] .text-button { font-size: 13px; }
body[data-screen="dashboard"] .create-button { padding: 10px 13px; border-radius: 7px; font-size: 13px; gap: 9px; }
body[data-screen="dashboard"] .keyboard-hint { margin: 11px 0 21px; font-size: 12px; color: #74777e; }
body[data-screen="dashboard"] .starter-prompts { gap: 8px; }
body[data-screen="dashboard"] .starter-prompts > span { display: none; }
body[data-screen="dashboard"] .starter-prompts button { background: transparent; border: 1px solid #e3e3e7; border-radius: 6px; padding: 7px 11px; font-size: 13px; color: #60636a; }
body[data-screen="dashboard"] .starter-prompts button:hover { background: #f0f0f2; border-color: #d4d5da; }
body[data-screen="dashboard"] .starter-prompts button > span { color: #898c93; }
body[data-screen="dashboard"] .context-chip { background: #f0f0f2; color: #56595f; }
body[data-screen="dashboard"] .recent-section { max-width: 940px; margin-inline: auto; padding-bottom: 24px; }
body[data-screen="dashboard"] .section-heading { margin-bottom: 18px; }
body[data-screen="dashboard"] .section-heading h2 { font-size: 19px; font-weight: 550; letter-spacing: -.4px; }
body[data-screen="dashboard"] .section-heading p { font-size: 13px; margin-top: 5px; color: #73767d; }
body[data-screen="dashboard"] .text-link { font-size: 13px; }
body[data-screen="dashboard"] .project-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid #e0e1e5; border-radius: 9px; background: #fff; overflow: hidden; }
body[data-screen="dashboard"] .project-row { display: flex; align-items: center; min-width: 0; padding-right: 14px; }
body[data-screen="dashboard"] .project-row + .project-row { border-top: 1px solid #ebebee; }
body[data-screen="dashboard"] .project-row:hover { background: #fbfbfc; }
body[data-screen="dashboard"] .project-row-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 17px 20px; }
body[data-screen="dashboard"] .project-row-main:focus-visible { outline-offset: -3px; }
body[data-screen="dashboard"] .project-file-icon { width: 38px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #e6e6ea; border-radius: 7px; background: #fafafb; color: #767a82; }
body[data-screen="dashboard"] .project-row-info { min-width: 0; flex: 1; }
body[data-screen="dashboard"] .project-row-info strong { display: block; font-size: 15px; font-weight: 550; line-height: 1.5; color: #292b30; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-screen="dashboard"] .project-row-info small { display: block; margin-top: 3px; font-size: 12px; color: #71757d; line-height: 1.6; }
body[data-screen="dashboard"] .project-row-info small > span { padding-inline: 4px; }
body[data-screen="dashboard"] .project-row-date { font-size: 12px; color: #777b83; white-space: nowrap; margin-left: auto; }
body[data-screen="dashboard"] .project-row-state { font-size: 11px; color: #696d75; border: 1px solid #e5e5e9; border-radius: 5px; padding: 2px 7px; margin-left: 10px; }
body[data-screen="dashboard"] .project-row-open { color: #777b83; margin-left: 10px; }
body[data-screen="dashboard"] .rename-button { position: static; flex-shrink: 0; width: 32px; height: 32px; color: #777b83; }
body[data-screen="dashboard"] .rename-button .icon { width: 15px; height: 15px; }
body[data-screen="dashboard"] .empty-state { background: #fff; border: 0; border-radius: 0; padding: 46px 24px; }
body[data-screen="dashboard"] .empty-state > .icon { color: #7b7f87; width: 26px; height: 26px; }
body[data-screen="dashboard"] .empty-state h3 { font-size: 18px; }
body[data-screen="dashboard"] .empty-state p { font-size: 14px; }
body[data-screen="dashboard"] :is(.collection-page, .settings-page) { padding-top: 29px; }
body[data-screen="dashboard"] .page-heading { margin-bottom: 29px; }
body[data-screen="dashboard"] .page-heading h1 { font-size: 30px; margin: 0 0 11px; }
body[data-screen="dashboard"] .page-heading p { font-size: 15px; }
body[data-screen="dashboard"] .collection-tools { gap: 14px; }
body[data-screen="dashboard"] .search-field { width: auto; flex: 1; background: #fff; border-radius: 7px; padding: 11px 13px; }
body[data-screen="dashboard"] .search-field input { background: none; font-size: 14px; }
body[data-screen="dashboard"] .sort-field select { background-color: #fff; padding-block: 11px; border-radius: 7px; font-size: 13px; }
body[data-screen="dashboard"] .results-count { margin: 22px 0 14px; font-size: 12px; }
body[data-screen="dashboard"] .settings-tabs { gap: 23px; }
body[data-screen="dashboard"] .settings-tabs a { color: #656971; font-size: 13px; }
body[data-screen="dashboard"] .settings-tabs a[aria-current="page"] { color: #202124; border-color: #202124; }
body[data-screen="dashboard"] :is(.settings-card, .quiet-card) { background: #fff; border-color: var(--line); border-radius: 9px; box-shadow: none; }
body[data-screen="dashboard"] .settings-card h2 { font-size: 19px; }
body[data-screen="dashboard"] :is(.settings-card, .quiet-card) > p { font-size: 14px; }
body[data-screen="dashboard"] .preview-badge { background: #f2f2f4; border-color: #e3e3e7; color: #6b6e75; border-radius: 5px; }

/* Builder: chat, editor and canvas are work surfaces. */
body[data-screen="builder"] :is(.editor-panel, .preview-panel, .composer-area, .project-heading, .preview-toolbar, .panel-tabs) { background: #fff; }
body[data-screen="builder"] :is(.project-heading, .preview-toolbar) { height: 56px; padding-inline: 13px; }
body[data-screen="builder"] .project-button { color: #35383f; }
body[data-screen="builder"] .project-button > .icon { color: #797d86; }
body[data-screen="builder"] .draft-badge { color: #737780; background: #fafafa; border-color: #e4e4e7; border-radius: 4px; }
body[data-screen="builder"] .panel-tabs { height: 46px; gap: 5px; }
body[data-screen="builder"] .panel-tabs button { color: #6b6e75; font-size: 13px; border-radius: 5px; }
body[data-screen="builder"] .panel-tabs button.is-active { background: #eeeeF0; color: #25272c; }
body[data-screen="builder"] .conversation { padding: 26px 22px 16px; }
body[data-screen="builder"] .message { margin-bottom: 28px; }
body[data-screen="builder"] .message-content { color: #42454c; font-size: 15px; line-height: 1.8; }
body[data-screen="builder"] .message-label { color: #737780; font-size: 12px; margin-bottom: 10px; }
body[data-screen="builder"] .message-label .avatar { background: #f2f2f4; border-radius: 5px; width: 22px; height: 22px; }
body[data-screen="builder"] .message-user .avatar { color: #737780; }
body[data-screen="builder"] .message-user .message-content { background: #f4f4f6; border: 0; border-radius: 9px; padding: 12px 15px; }
body[data-screen="builder"] .change-tag { color: #5f6268; background: #f3f4f5; border-color: #e5e6e9; }
body[data-screen="builder"] .composer-area { padding: 12px 14px 11px; border-color: #eeeeF0; }
body[data-screen="builder"] .composer { background: #fff; border: 1px solid #d7d8dd; border-radius: 10px; padding: 13px 13px 10px; box-shadow: 0 1px 3px #00000003; }
body[data-screen="builder"] .composer:focus-within { border-color: #9498a1; }
body[data-screen="builder"] .composer textarea { background: none; height: 62px; min-height: 62px; font-size: 15px; }
body[data-screen="builder"] .composer-bottom > span { font-size: 12px; color: #777b83; }
body[data-screen="builder"] .composer-bottom > span .icon { color: #777b83; }
body[data-screen="builder"] .send-button { border-radius: 6px; }
body[data-screen="builder"] .suggestions { gap: 8px; margin-bottom: 10px; }
body[data-screen="builder"] .suggestions button { color: #737780; background: #fff; border-color: #e4e4e8; font-size: 12px; border-radius: 5px; }
body[data-screen="builder"] .prototype-caption { font-size: 12px; color: #777b83; }
body[data-screen="builder"] #ai-connection { color: #565b64; }
body[data-screen="builder"] .view-tabs { gap: 3px; }
body[data-screen="builder"] .view-tabs button { color: #676b73; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
body[data-screen="builder"] .view-tabs button.is-active { background: #eeeef0; color: #25272c; }
body[data-screen="builder"] .canvas-actions { gap: 8px; }
body[data-screen="builder"] .canvas-actions > .button { padding: 7px 11px; min-height: 34px; font-size: 13px; }
body[data-screen="builder"] .cli-link { color: #737780; }
body[data-screen="builder"] .canvas-controls { height: 43px; padding-inline: 14px; background: #fafafb; border-color: var(--line); }
body[data-screen="builder"] .device-picker { background: #eeeef1; border-color: transparent; }
body[data-screen="builder"] .device-picker button { color: #777b83; }
body[data-screen="builder"] .device-picker button.is-active { background: #fff; color: #292d34; box-shadow: 0 1px 3px #0000000a; }
body[data-screen="builder"] :is(.canvas-location, .preview-tools, .zoom-control, .canvas-footer) { color: #71757d; }
body[data-screen="builder"] .zoom-control select { background: transparent; }
body[data-screen="builder"] .canvas-stage { padding: 0; background: #f0f1f3; background-image: none; scrollbar-color: #cfd1d8 transparent; }
body[data-screen="builder"] .frame-wrap { border-radius: 0; box-shadow: none; background: #fff; }
body[data-screen="builder"] .frame-wrap:is(.is-mobile, .is-tablet) { border-radius: 0; box-shadow: 0 0 0 1px #e2e4e8; }
body[data-screen="builder"] .canvas-footer { height: 30px; min-height: 30px; background: #fafafb; border-color: #e4e4e8; font-size: 12px; }
body[data-screen="builder"] .canvas-footer button { color: #71757d; font-size: 12px; }
body[data-screen="builder"] :is(.workbench-status, .diagnostic-tabs, .editor-status, .source-toolbar, .file-tabs, .file-explorer) { background: #fafafb; border-color: #e4e4e8; color: #6b7079; }
body[data-screen="builder"] .workbench-status { height: 30px; font-size: 12px; gap: 12px; }
body[data-screen="builder"] :is(.file-list button, .file-tabs button, .diagnostic-tabs > button) { color: #61666f; }
body[data-screen="builder"] :is(.file-list button.is-active, .file-tabs button.is-active, .diagnostic-tabs > button.is-active) { background: #e9eaed; color: #24272d; }
body[data-screen="builder"] .code-editor { background: #fff; }
body[data-screen="builder"] .line-gutter { background: #fafafb; color: #9297a1; border-color: #eeeeF1; }
body[data-screen="builder"] .source-highlight .syntax-string { color: #8d4a32; }
body[data-screen="builder"] .source-highlight .syntax-comment { color: #8b909a; }
body[data-screen="builder"] .source-highlight .syntax-tag { color: #355f87; }
body[data-screen="builder"] :is(.panel-heading, .design-form, .history-list) { color: #353941; }
body[data-screen="builder"] .panel-heading h2 { font-size: 22px; letter-spacing: -.6px; }
body[data-screen="builder"] :is(.control-title, .toggle-row small, .design-footer > span, .panel-description, .history-note) { color: #71757d; }
body[data-screen="builder"] .control-title { font-size: 13px; font-weight: 550; }
body[data-screen="builder"] :is(.custom-code-note, .history-card, .guide-items > div, .asset-note) { background: #fafafb; border-color: #e4e4e8; color: #60656f; }
body[data-screen="builder"] .ai-feedback { background: #f5f5f7; border-color: #dedfe4; color: #545a65; }
body[data-screen="builder"] .ai-feedback[data-state="error"] { background: #fff5ed; border-color: #f0d8c2; color: #87401c; }

@media (min-width: 1001px) and (max-width: 1250px) {
  body[data-screen="builder"] { --sidebar: 220px; --conversation: 320px; }
  body[data-screen="builder"] .project-sidebar { padding-inline: 10px; }
  body[data-screen="builder"] .sidebar-brand { margin-inline: 6px; }
  body[data-screen="builder"] .brand { font-size: 21px; gap: 6px; }
}
@container workarea (max-width: 590px) {
  body[data-screen="builder"] .cli-link { display: none; }
  body[data-screen="builder"] .canvas-actions > .button { padding-inline: 9px; }
  body[data-screen="builder"] .preview-toolbar { gap: 6px; padding-inline: 8px; }
}
@container workarea (max-width: 430px) {
  body[data-screen="builder"] .canvas-actions > .button > span { display: none; }
  body[data-screen="builder"] .view-tabs button { padding-inline: 7px; }
  body[data-screen="builder"] .canvas-location { display: none; }
}
@media (max-width: 760px) {
  body[data-screen="dashboard"] { --sidebar: 0px; }
  body[data-screen="dashboard"] .sidebar { width: 264px; }
  body[data-screen="dashboard"] .topbar { height: 60px; padding-inline: 20px; }
  body[data-screen="dashboard"] .topbar > div { gap: 9px; }
  body[data-screen="dashboard"] .mobile-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.8px; }
  body[data-screen="dashboard"] .mobile-brand .brand-mark { width: 23px; height: 27px; }
  body[data-screen="dashboard"] .breadcrumb { display: none; }
  body[data-screen="dashboard"] .local-status { max-width: 80px; font-size: 11px; }
  body[data-screen="dashboard"] main { padding: 0 20px 24px; }
  body[data-screen="dashboard"] .create-area { padding: 35px 0 36px; }
  body[data-screen="dashboard"] .create-area h1 { font-size: 30px; letter-spacing: -.9px; }
  body[data-screen="dashboard"] .hero-copy { font-size: 14px; line-height: 1.7; margin-bottom: 26px; }
  body[data-screen="dashboard"] .idea-composer { padding: 17px 15px 12px; }
  body[data-screen="dashboard"] .idea-composer textarea { min-height: 110px; font-size: 16px; }
  body[data-screen="dashboard"] .composer-bottom { flex-wrap: nowrap; gap: 6px; }
  body[data-screen="dashboard"] .composer-tools { flex-wrap: nowrap; gap: 9px; }
  body[data-screen="dashboard"] .tool-divider { display: none; }
  body[data-screen="dashboard"] .text-button { font-size: 12px; gap: 5px; }
  body[data-screen="dashboard"] .create-button { padding: 10px; min-width: 36px; }
  body[data-screen="dashboard"] .create-button > span { display: none; }
  body[data-screen="dashboard"] .keyboard-hint { font-size: 11px; }
  body[data-screen="dashboard"] .starter-prompts { gap: 7px; }
  body[data-screen="dashboard"] .starter-prompts button { font-size: 12px; padding: 7px 9px; }
  body[data-screen="dashboard"] .section-heading h2 { font-size: 19px; }
  body[data-screen="dashboard"] .section-heading p { font-size: 13px; }
  body[data-screen="dashboard"] .project-row { padding-right: 8px; }
  body[data-screen="dashboard"] .project-row-main { min-height: 80px; gap: 12px; padding: 15px 12px; }
  body[data-screen="dashboard"] .project-file-icon { width: 32px; height: 36px; }
  body[data-screen="dashboard"] .project-row-info strong { font-size: 14px; }
  body[data-screen="dashboard"] .project-row-info small { font-size: 11px; }
  body[data-screen="dashboard"] :is(.project-row-date, .project-row-state, .project-row-open) { display: none; }
  body[data-screen="dashboard"] .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
  body[data-screen="dashboard"] .page-heading h1 { font-size: 28px; }
  body[data-screen="dashboard"] .page-heading p { font-size: 14px; }
  body[data-screen="dashboard"] .collection-tools { flex-wrap: nowrap; gap: 10px; }
  body[data-screen="dashboard"] .search-field { min-width: 0; padding-inline: 10px; }
  body[data-screen="dashboard"] .search-field input { font-size: 16px; }
  body[data-screen="dashboard"] .sort-field select { max-width: 125px; font-size: 12px; }
  body[data-screen="dashboard"] .preview-badge { display: none; }
  body[data-screen="builder"] .conversation { padding-inline: 20px; }
  body[data-screen="builder"] .composer textarea { font-size: 16px; }
  body[data-screen="builder"] .workspace-layout { --conversation: 100%; }
  body[data-screen="builder"] .workbench[data-view="split"] .canvas-stage { padding: 0; }
}
@media (max-width: 360px) {
  body[data-screen="dashboard"] .local-status { display: none; }
  body[data-screen="dashboard"] main { padding-inline: 16px; }
  body[data-screen="dashboard"] .composer-tools { gap: 6px; }
  body[data-screen="dashboard"] .text-button .icon { width: 14px; height: 14px; }
  body[data-screen="dashboard"] .idea-composer { padding-inline: 12px; }
  body[data-screen="dashboard"] .section-heading p { max-width: 205px; }
}