/* Blonei product system — shared with the public creation experience. */
:root {
  --ink: #202623;
  --muted: #626b64;
  --blue: #254d3b;
  --blue-soft: #e8eee8;
  --paper: #faf9f6;
  --line: #dedfd8;
  --surface: #fff;
  --accent-hover: #163b2a;
  --soft-surface: #f3f4ee;
  --focus: #477c56;
}
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.primary, button.primary { background: var(--blue); border-radius: 10px; box-shadow: none; }
.primary:hover, button.primary:hover { background: var(--accent-hover); }
.secondary { border-color: var(--line); border-radius: 10px; }
.secondary:hover, .subtle:hover, .icon-button:hover { background: var(--soft-surface); color: var(--ink); }
.brand-mark { background: var(--blue); border-radius: 10px; }
.home-nav { max-width: 1376px; height: 88px; }
.home-nav .auth-nav .secondary { background: var(--ink); border-color: var(--ink); color: #fff; }
.home-footer, .home-footer nav a, .public-info p { color: var(--muted); }
.local-pill { border-color: var(--line); color: var(--muted); }
.local-pill:before { background: #65836a; }
.notice, .auth-preserve { background: #f0f4ed; border-color: #d8e1d4; color: #476047; }
.field input, .field textarea, .field select { background: #fcfcf9; border-color: #d5dbd2; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #77927c; }
.dialog-backdrop { background: #19271f66; backdrop-filter: blur(6px); }
.dialog { border: 1px solid #e2e5dd; border-radius: 20px; box-shadow: 0 24px 90px #18271b33; padding: 30px; }
.dialog-heading { padding-bottom: 9px; }
.dialog h2 { font-size: 25px; font-weight: 500; letter-spacing: -.9px; }
.dialog-heading .icon-button { margin: -9px -9px 0 0; }
.dialog .error-copy { color: #a13d32; }
.dialog-actions { flex-wrap: wrap; }
.dialog .version-row { gap: 14px; }
.dialog .version-row > div { min-width: 0; overflow-wrap: anywhere; }
.visual-toggle input[type=checkbox] { accent-color: var(--blue); }
.visual-toggle input[type=color] { border-color: var(--line); }
.briefing-data pre { color: var(--muted); }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #cbd8ca; border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; }
#toast { background: #203d2e; color: #fff; border-color: #3c6048; }

/* The project library is a working space, with quiet navigation and real metadata. */
.dashboard-body .home-nav { max-width: none; height: 80px; padding: 0 36px; border-bottom: 1px solid var(--line); background: #fff; }
.dashboard-body .home-nav nav > a { display: none; }
.studio-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100dvh - 80px); max-width: 1800px; margin: auto; }
.studio-sidebar { display: flex; flex-direction: column; gap: 22px; padding: 34px 18px 24px; border-right: 1px solid var(--line); }
.studio-eyebrow { display: block; font-size: 10px; letter-spacing: 1.5px; font-weight: 600; color: #667560; margin-bottom: 14px; }
.studio-sidebar > .studio-eyebrow { margin: 0 12px; font-size: 9px; }
.studio-sidebar nav { display: grid; gap: 5px; }
.studio-sidebar nav > *, .studio-sidebar-bottom > a { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 11px 13px; border-radius: 9px; font-size: 13px; text-align: left; color: #5e695f; }
.studio-sidebar nav svg, .studio-sidebar-bottom > a svg { width: 18px; height: 18px; }
.studio-sidebar nav > *:hover, .studio-sidebar-bottom > a:hover { background: #eeefe8; color: var(--ink); }
.studio-sidebar nav [aria-current] { background: #e7ede3; color: #294d34; font-weight: 600; }
.studio-sidebar-bottom { margin-top: auto; padding-top: 40px; }
.studio-account { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--line); margin-top: 14px; padding: 22px 10px 0; }
.studio-account > span:last-child { min-width: 0; }
.studio-account strong { font-size: 12px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-account small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.studio-account .user-dot { width: 34px; height: 34px; background: #e7ebe1; color: #456141; flex-shrink: 0; border: 1px solid #d5dfce; }
.studio-shell .dashboard { width: 100%; max-width: 1440px; padding: 52px 46px 72px; }
.dashboard-head { align-items: center; margin-bottom: 38px; }
.dashboard-head h1 { font-size: 36px; line-height: 1.15; letter-spacing: -1.3px; margin-bottom: 12px; }
.dashboard-head .primary { font-size: 12px; white-space: nowrap; }
.project-controls { margin-bottom: 22px; }
.project-search { border-color: #d8ddd3; max-width: 360px; width: 100%; border-radius: 10px; }
.project-search svg { color: #727e6e; }
.project-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.project-search input:focus-visible { outline: 0; }
.project-list { gap: 22px; }
.project-tile { border-color: #dce0d6; border-radius: 13px; transition: border-color .18s, box-shadow .18s, transform .18s; }
.project-tile:hover { border-color: #a5b59d; box-shadow: 0 9px 22px -14px #2c4a2b40; transform: translateY(-2px); }
.project-tile > a { padding: 0; min-height: 0; height: 100%; }
.project-tile > a:hover { background: #fff; }
.project-cover { height: 136px; display: flex; align-items: center; justify-content: center; position: relative; background: #e9ede4; border-bottom: 1px solid #dfe4d8; }
.project-tile:nth-child(3n+2) .project-cover { background: #ede8df; border-color: #e4ddd1; }
.project-tile:nth-child(3n) .project-cover { background: #e7e9e8; border-color: #dce1dd; }
.project-tile .project-monogram { width: auto; height: auto; margin: 0; font-size: 49px; font-family: Georgia, serif; font-style: italic; color: #597052; border: 0; background: none; }
.project-tile:nth-child(3n+2) .project-monogram { color: #8a7253; }
.project-tile:nth-child(3n) .project-monogram { color: #5b7065; }
.project-revision { position: absolute; bottom: 13px; left: 18px; font-size: 8px; letter-spacing: 1.3px; color: #56654f; }
.project-tile-content { padding: 20px 18px 15px; }
.project-tile h2 { margin: 0 0 13px; font-size: 15px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; min-height: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.project-meta { color: #687263; align-items: center; flex-wrap: wrap; gap: 7px; }
.project-status { display: inline-flex; align-items: center; gap: 6px; }
.project-status i { height: 5px; width: 5px; background: #9c8b62; border-radius: 50%; }
.project-status.published i { background: #447a53; }
.project-status.archived i { background: #858b81; }
.project-open { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; border-top: 1px solid #eceee7; padding-top: 13px; color: #42603e; font-size: 11px; }
.project-open svg { width: 15px; height: 15px; }
.project-tile .tile-menu { right: 9px; top: 9px; color: #54674f; background: #ffffff80; width: 34px; height: 34px; }
.project-tile .tile-menu:hover { background: #fff; }
.empty-state { border-color: #ccd6c6; background: #ffffff70; min-height: 340px; }
.empty-state > svg { color: #66805c; }
.empty-state > .spinner { margin-bottom: 18px; }

/* The editor uses the same materials while keeping the customer's preview isolated. */
.workspace { --ink: #202623; --muted: #626b64; --line: #dedfd8; --blue: #254d3b; --blue-soft: #e8eee8; color-scheme: light; background: #faf9f6; color: var(--ink); }
.rail { background: #f6f7f1; border-color: #dce1d5; }
.rail .brand-mark { background: #254d3b; color: #fff; }
.rail .icon-button { color: #74806d; }
.rail .icon-button.active, .rail .icon-button:hover { background: #e5ebdf; color: #365a35; }
.user-dot { background: #e3eadc; color: #45613b; }
.work-header { background: #fff; border-color: #dce2d5; }
.work-header .primary { background: #254d3b; color: #fff; border-radius: 9px; }
.work-header .primary:hover { background: #163b2a; }
.work-header .subtle { color: #626f5c; }
.work-header .subtle:hover, .work-header .icon-button:hover { background: #eff2e9; color: #2c442a; }
.project-heading h1 { font-weight: 600; }
.revision-status { color: #687661; }
.revision-status i { background: #5f8b5f; }
.chat-panel { background: #fafbf7; }
.chat-title { border-color: #dce2d5; padding-inline: 22px; background: #fbfcf8; }
.chat-title small { color: #6c7865; }
.agent-symbol { background: #e6eddf; color: #4a6d3d; border: 1px solid #d4dfcb; border-radius: 9px; }
.connection { color: #3e724c; }
.connection.offline { color: #8a6324; }
.message-list { padding: 24px 20px; scrollbar-color: #bdc9b6 transparent; }
.chat-empty { color: #6c7865; }
.chat-empty h2 { color: #33482e; }
.chat-bubble { border-radius: 13px; font-size: 13px; line-height: 1.7; }
.chat-bubble.user { background: #e9efdf; border-color: #dde6d2; color: #34452d; border-radius: 14px 14px 4px 14px; }
.chat-bubble.assistant { background: #fff; border-color: #e0e5d8; color: #394633; border-radius: 4px 14px 14px 14px; box-shadow: 0 2px 5px #27391d03; }
.bubble-meta, .chat-bubble.user .bubble-meta { color: #66765d; }
.task-model { color: #65745b; }
.bubble-body a { color: #396638; }
.bubble-body code, .chat-bubble.user .bubble-body code { background: #f0f3e9; color: #3e5734; border-color: #d7e1cd; }
.chat-bubble .expand-message { color: #3c6535; }
.job-box { background: #fff; border-color: #d5dfcc; color: #425439; }
.job-title { color: #3e5834; }
.job-events, .job-state { color: #65765a; }
.job-title .spinner { border-color: #c6d6bb; border-top-color: #47733c; }
.job-error, .chat-compose .error-copy { color: #a43c30; }
.job-controls button { color: #45623a; border-color: #cad8bf; background: #fff; min-height: 32px; }
.job-controls button:hover { background: #edf3e6; }
.job-delta { margin-top: 10px; color: #455b3d; }
.work-plan, .work-evidence { background: #f7f9f2; border-color: #dce5d3; color: #5d7150; }
.work-plan summary, .work-evidence summary { color: #3f5d34; }
.review-limit { color: #65765b; border-color: #dce5d3; }
.chat-compose { background: #fafbf7; border-color: #dce2d5; padding: 15px 18px 12px; }
.chat-input-shell { background: #fff; border-color: #cdd9c4; border-radius: 14px; box-shadow: 0 4px 16px -10px #2b492c33; }
.chat-input-shell:focus-within { border-color: #78966a; }
.chat-input-shell textarea { color: #36432d; background: transparent; }
.chat-input-shell textarea::placeholder { color: #77846c; }
.chat-compose .icon-button { color: #66795b; }
.chat-compose .icon-button:hover { background: #edf2e6; }
.chat-input-actions select, #messageMode { color: #4b643e; background: #f3f6ec; border-color: #d4dfc9; }
.send-button, #sendMessage { color: #fff; background: #254d3b; }
.send-button:hover, #sendMessage:hover { background: #163b2a; }
.compose-shortcut, .prompt-size, .compose-model { color: #65765a; }
.compose-model { min-height: 32px; }
.compose-model:hover { color: #294d2c; }
.context-selection { background: #eff4e9; border-color: #cfddc4; color: #436037; }
.context-selection .edit-selection-button { background: #e4eddc; color: #35582d; border-color: #bfceaf; }
.context-selection button { color: #486c38; }
.chat-compose .voice-message, .voice-message { background: #f0f4e9; border-color: #dbe4cf; color: #526845; }
.chat-compose .voice-message textarea { background: #fff; color: #354a2c; border-color: #ccd9be; }
.attachment-chip, .chat-compose .attachment-chip { background: #edf2e7; color: #4e6641; }
.record-strip { color: #526f42; background: #eef3e6; border-color: #cedcc0; }
.record-strip button { color: #3b5d30; }
.agent-activity { background: #edf4e6; border-color: #cddfbf; color: #35552b; }
.agent-activity small { color: #58724a; }
.agent-activity button { border-color: #b6cba7; color: #47663a; width: 34px; height: 34px; }
.agent-activity button:hover { background: #ddebd3; }
.agent-activity .spinner { border-color: #b6cba6; border-top-color: #477036; }
.agent-activity.is-offline { background: #fff7e6; border-color: #e4ce9d; color: #775b28; }
.agent-activity.is-offline small { color: #866c3b; }
.split-handle { background: #e0e5d8; }
.split-handle:after { background: #a7b59a; }
.split-handle:hover { background: #b7c8a9; }
.stage-panel { background: #eef1e8; }
.stage-toolbar { background: #fafbf7; border-color: #dce2d5; }
.stage-tabs button { color: #6b7a61; }
.stage-tabs button.active { color: #345b2b; border-color: #4a7040; }
.stage-toolbar .icon-button { color: #607653; }
.stage-toolbar .icon-button:hover, .stage-toolbar .icon-button.active { background: #e2ebda; color: #34572b; }
.device-picker { background: #eff3e8; border-color: #d9e1d1; }
.device-picker button { color: #738269; }
.device-picker button.active { background: #dfe9d6; color: #3d6031; }
.stage-viewport { background: #edf0e7; }
.stage-viewport iframe { border-color: #d5decc; box-shadow: 0 5px 16px #2e422111; }
.stage-viewport.mobile iframe { border-color: #bdcbb1; }
.preview-empty { border-color: #c9d5bd; color: #687e59; }
.preview-empty h2 { color: #3c5c2f; }
.preview-empty svg { color: #6e8c5b; }
.stage-footer { color: #55694a; background: #f6f8f1; border-color: #dce2d5; }
.file-tree { background: #f6f8f1; border-color: #d9e2ce; }
.file-tree button { color: #667e55; }
.file-tree button:hover { background: #eaf0e1; }
.file-tree button.active { color: #3a5e2d; background: #e1ead7; }
.file-toolbar { background: #fbfcf9; border-color: #dce5d2; color: #627b50; }
.file-toolbar button { color: #fff; background: #254d3b; }
.file-editor textarea { background: #fcfdf9; color: #33482a; caret-color: #254d3b; }
.briefing-stage { background: #fafbf7; color: #647b54; }
.briefing-stage h2, .briefing-stage h3 { color: #34552a; }
.briefing-stage pre { color: #627952; }
.briefing-section { border-color: #d8e2cc; }
.briefing-stage .secondary { background: #fff; color: #48683a; border-color: #cedcbe; }
.briefing-list, .briefing-section .briefing-value { color: #4e6441; }
.briefing-details dt { color: #647a54; }
.mobile-work-tabs { background: #fafbf7; border-color: #d5dfcb; }
.mobile-work-tabs button { color: #667d55; }
.mobile-work-tabs button.active { background: #e3ecd9; color: #3b5e2d; }

/* Operations, account and information pages share the same accessible components. */
.ops-body { background: var(--paper); }
.ops-body .home-nav { border-bottom: 1px solid var(--line); }
.ops-eyebrow { color: #64795a; }
.ops-heading h1 { font-weight: 500; }
.ops-nav { background: #fff; border-radius: 13px; }
.ops-nav button { color: #64725c; }
.ops-nav button:hover { background: #f0f3eb; }
.ops-nav button[aria-current] { background: #e7eddf; color: #3b6030; }
.ops-metric, .ops-card { border-radius: 13px; }
.ops-metric:hover { border-color: #9fb48f; box-shadow: 0 4px 14px #2e56200d; }
.ops-metric > span, .ops-metric small { color: #607653; }
.ops-key-values > div, .ops-table td { border-color: #e7ecdf; }
.ops-table th { background: #f5f7f0; color: #617653; }
.ops-table tbody tr:hover { background: #fafcf6; }
.ops-table td small { color: #687b5d; }
.ops-table details summary { color: #426935; }
.ops-badge.neutral { background: #eef1e8; color: #637656; }
.ops-empty { border-color: #cedac3; }
.ops-empty > svg, .ops-search svg { color: #728965; }
.ops-audit-data { background: #f6f8f1; }
.ops-loading .spinner { border-color: #ccd9bf; border-top-color: #477038; }

@media (min-width: 1600px) { .project-list { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 1150px) {
  .studio-shell { grid-template-columns: 205px minmax(0,1fr); }
  .studio-shell .dashboard { padding: 38px 28px 56px; }
  .project-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-head { align-items: flex-start; }
  .dashboard-head h1 { font-size: 32px; }
  .dashboard-head p { font-size: 13px; }
}
@media (max-width: 800px) {
  .dashboard-body .home-nav { padding: 0 24px; }
  .studio-shell { grid-template-columns: 1fr; }
  .studio-sidebar { padding: 12px 24px; border-right: 0; border-bottom: 1px solid var(--line); gap: 0; }
  .studio-sidebar > .studio-eyebrow, .studio-sidebar-bottom { display: none; }
  .studio-sidebar nav { display: flex; gap: 4px; flex-wrap: wrap; }
  .studio-sidebar nav > * { font-size: 12px; min-height: 40px; padding: 9px 11px; }
  .studio-sidebar nav a[href='#home'] { display: none; }
  .studio-sidebar nav svg { width: 16px; height: 16px; }
  .studio-shell .dashboard { padding: 34px 24px 56px; }
}
@media (max-width: 520px) {
  .home-nav { padding-inline: 20px; }
  .dialog-backdrop { padding: 14px; }
  .dialog { padding: 24px 20px; border-radius: 17px; max-height: calc(100dvh - 28px); }
  .dialog h2 { font-size: 23px; }
  .dialog .version-row { align-items: flex-start; flex-wrap: wrap; }
  .dialog-actions > button { min-height: 44px; }
  .dashboard-body .home-nav { height: 72px; padding: 0 20px; }
  .dashboard-body .auth-nav { gap: 2px; }
  .dashboard-body .auth-nav > a { display: none; }
  .studio-sidebar { padding: 10px 12px; }
  .studio-sidebar nav { gap: 2px; }
  .studio-sidebar nav > * { font-size: 11px; padding: 9px; gap: 6px; }
  .studio-shell .dashboard { padding: 30px 20px 48px; }
  .dashboard-head { flex-direction: column; align-items: stretch; gap: 22px; margin-bottom: 24px; }
  .dashboard-head .primary { align-self: flex-start; }
  .dashboard-head h1 { font-size: 34px; }
  .dashboard-head p { line-height: 1.6; }
  .project-controls { align-items: flex-start; flex-direction: column; gap: 12px; }
  .project-search { max-width: none; }
  .project-list { grid-template-columns: 1fr; gap: 18px; }
  .project-tile h2 { min-height: 0; }
  .project-cover { height: 125px; }
  .project-tile .tile-menu { width: 40px; height: 40px; }
  .chat-title { padding-inline: 16px; }
  .message-list { padding: 20px 16px; }
  .chat-compose { padding: 12px 14px 9px; }
  .chat-compose .icon-button { min-width: 36px; min-height: 36px; }
  .mobile-work-tabs button { min-height: 42px; }
  .agent-activity button { width: 36px; height: 36px; }
  .ops-body .home-nav { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .project-tile:hover { transform: none; }
}
/* Match inherited selectors precisely so no old dark-theme values leak through. */
.studio-shell .dashboard { align-self: start; margin: 0 auto; }
.project-tile:nth-child(3n+2) .project-monogram, .project-tile:nth-child(3n) .project-monogram { background: none; border: 0; }
.chat-bubble.assistant .bubble-meta { color: #66765d; }
.chat-bubble.assistant .bubble-meta b, .chat-bubble.assistant .bubble-meta time { color: #66765d; }
.user-dot { border-color: #b9cbb0; }
.split-handle:before { background: #a7b59a; }
.split-handle:focus { background: #b7c8a9; }
.stage-viewport[data-device=mobile] iframe { border-color: #bdcbb1; }
.file-toolbar .primary { color: #fff; background: #254d3b; }
.briefing-stage > p, .briefing-stage .briefing-data pre { color: #627952; }
.briefing-stage .briefing-data h3 { color: #34552a; }
.chat-input-shell:focus-within { box-shadow: 0 0 0 2px #4b7f381b; }

.work-grid .file-toolbar small { color: #627b50 !important; }
@media (max-width: 900px) {
  .ops-table { min-width: 740px; }
  .ops-table th:first-child, .ops-table td:first-child { min-width: 175px; }
}
.dialog p, .account-actions { overflow-wrap: anywhere; }