/* Shared SuperMiracle design system. Loaded after feature layouts.
   Keep semantic warning/success colors; all chrome uses these Notes tokens.
   Contract: docs/style-guide.md. */
:root, body.chat-view {
  --notes-paper: #fff;
  --notes-sidebar: #f7f7f5;
  --notes-ink: #37352f;
  --notes-muted: #787774;
  --notes-faint: #9b9a97;
  --notes-line: rgba(55, 53, 47, .09);
  --notes-hover: rgba(55, 53, 47, .055);
  --notes-active: rgba(55, 53, 47, .09);
  --notes-accent: #2383e2;
  --notes-accent-soft: #eaf3fd;
  --notes-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --ink: var(--notes-ink);
  --muted: var(--notes-muted);
  --line: var(--notes-line);
  --green: var(--notes-accent); /* Compatibility with existing components. */
  --bg: var(--notes-paper);
  --app-sidebar-width: 224px;
  color-scheme: light;
}
body, body.meeting-view {
  background: var(--notes-paper);
  color: var(--notes-ink);
  font: 14px/1.65 var(--notes-font);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: var(--notes-font); }
button { min-height: 34px; padding: 6px 11px; border-radius: 5px; font-size: 13px; box-shadow: none; }
button:hover { background: var(--notes-hover); }
button.primary, .ai-start-btn { background: var(--notes-accent); border-color: var(--notes-accent); color: white; }
button.primary:hover, .ai-start-btn:hover { background: #1b73c9; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--notes-accent); outline-offset: 2px; }
input, select, textarea { accent-color: var(--notes-accent); }
input:not([type=checkbox]):not([type=radio]), select, textarea { color: var(--notes-ink); }
input::placeholder, textarea::placeholder { color: var(--notes-faint); }
input[type=checkbox], input[type=radio] { min-height: 0; }
a { color: var(--notes-accent); }

/* Application navigation is identical in every management view. */
#workspace > aside, body.meeting-view #workspace > aside {
  position: fixed; inset: 0 auto 0 0; width: var(--app-sidebar-width);
  padding: 18px 10px; display: flex; align-items: stretch; flex-direction: column;
  background: var(--notes-sidebar); border-right: 1px solid var(--notes-line);
}
#workspace > aside .brand, body.meeting-view #workspace > aside .brand {
  color: var(--notes-ink); font-size: 24px; letter-spacing: -1px; gap: 10px; padding: 0 9px;
}
#workspace > aside .brand span, body.meeting-view #workspace > aside .brand span {
  display: block; font-size: 15px; font-weight: 650; letter-spacing: -.35px;
}
#workspace > aside .brand small { display: none; }
#workspace > aside .workspace, body.meeting-view #workspace > aside .workspace {
  display: flex; border: 0; background: transparent; padding: 10px 9px;
  margin-top: 16px; font-size: 13px; gap: 9px;
}
#workspace > aside .workspace span { font-size: 12px; font-weight: 500; }
#workspace > aside .workspace small { font-size: 11px; color: var(--notes-faint); margin-top: 2px; }
#workspace > aside .nav-label, body.meeting-view #workspace > aside .nav-label {
  display: block; margin: 24px 10px 7px; color: var(--notes-faint); font-size: 10px; letter-spacing: .08em;
}
#workspace > aside #nav, body.meeting-view #workspace > aside #nav {
  display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0;
}
#workspace > aside #nav button, body.meeting-view #workspace > aside #nav button {
  justify-content: flex-start; text-align: left; gap: 11px; font-size: 14px;
  color: var(--notes-muted); margin: 0; padding: 7px 10px; border: 0;
  min-height: 36px; border-radius: 5px; background: transparent;
}
#workspace > aside #nav button span, body.meeting-view #workspace > aside #nav button span {
  display: block; font-size: 13px; font-weight: 450; flex: 1;
}
#workspace > aside #nav button:hover { background: var(--notes-hover); }
#workspace > aside #nav button.active, body.meeting-view #workspace > aside #nav button.active {
  background: var(--notes-active); color: var(--notes-ink); box-shadow: none;
}
#workspace > aside #nav button.active span { font-weight: 600; }
#workspace > aside #nav i { font-size: 11px; color: var(--notes-faint); }
#workspace > aside .aside-bottom, body.meeting-view #workspace > aside .aside-bottom {
  display: block; padding: 16px 9px 0; margin-top: auto; font-size: 11px; color: var(--notes-faint);
}
.aside-bottom .online { color: var(--notes-muted); font-size: 11px; margin-bottom: 5px; }
.aside-bottom small { font-size: 10px; }
#workspace > .shell, body.meeting-view #workspace > .shell {
  margin-left: var(--app-sidebar-width); min-width: 0; background: var(--notes-paper);
}
.shell > header, body.meeting-view .shell > header {
  height: 48px; min-height: 48px; padding: 0 26px; border-color: var(--notes-line);
  font-size: 12px; background: var(--notes-paper);
}
.shell > header button { border: 0; min-height: 28px; font-size: 12px; padding: 3px 7px; }
.shell > header > div { gap: 9px; }
.shell > header em { margin: 0 10px; color: var(--notes-faint); }
.avatar { width: 26px; height: 26px; font-size: 12px; background: #eeede9; color: var(--notes-muted); border-radius: 5px; }
#integration-note { padding: 6px 26px; font-size: 11px; font-weight: 400; }
#integration-note.production-banner { background: var(--notes-sidebar); color: var(--notes-muted); border-bottom: 1px solid var(--notes-line); }
#integration-note.sandbox-banner { padding: 6px 26px; font-size: 11px; font-weight: 500; border-bottom-width: 1px; }
#main { max-width: 1280px; padding: 44px 48px 60px; min-width: 0; min-height: calc(100dvh - 150px); }
#main[data-view=portal], #main[data-view=settings] { max-width: 1100px; }
.heading { gap: 20px; align-items: flex-start; margin-bottom: 30px; }
.heading h1, .project-dashboard-heading h1 { font-size: 30px; line-height: 1.35; letter-spacing: -.035em; margin: 8px 0 10px; font-weight: 700; }
.heading > button { margin-top: 22px; flex: none; }
.eyebrow { font-size: 10px; letter-spacing: .07em; color: var(--notes-faint); font-weight: 500; }
.subtitle { font-size: 13px; color: var(--notes-muted); line-height: 1.8; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
h3 { font-weight: 600; }
footer { margin: 0 48px; padding: 15px 0; font-size: 10px; color: var(--notes-faint); }
footer b { font-size: 9px; letter-spacing: .05em; }

/* Document sections, database tables and compact property fields. */
.panel, .project-data, .settings-panel { border-color: var(--notes-line); border-radius: 6px; box-shadow: none; }
.stats { gap: 0; margin: 0 0 28px; border-block: 1px solid var(--notes-line); }
.stat { border: 0; border-right: 1px solid var(--notes-line); border-radius: 0; padding: 18px 20px; }
.stat:last-child { border-right: 0; }
.stat.highlight { background: var(--notes-sidebar); }
.stat .label, .stat small { font-size: 11px; }
.stat strong { font-size: 26px; margin: 10px 0 4px; font-weight: 600; color: var(--notes-ink); }
.stat.highlight strong { color: var(--notes-ink); }
.panel-heading { padding: 17px 18px; }
.panel-heading h2 { font-size: 15px; }
.scope { background: var(--notes-sidebar); color: var(--notes-muted); border-radius: 4px; font-size: 11px; padding: 4px 7px; }
.toolbar { padding: 0 18px 14px; gap: 8px; }
.toolbar input, .toolbar select, .field input, .field select, .field textarea, .line-item input {
  border: 1px solid var(--notes-line); border-radius: 5px; min-height: 36px;
  background: var(--notes-paper); color: var(--notes-ink); font-size: 13px; padding: 7px 10px;
}
th { background: var(--notes-sidebar); border-color: var(--notes-line); color: var(--notes-muted); font-size: 11px; padding: 10px 16px; }
td { border-color: var(--notes-line); font-size: 13px; padding: 13px 16px; }
td small { font-size: 11px; }
tbody tr:hover { background: #fafaf9; }
.table-foot { padding: 12px 18px; font-size: 11px; }
.status { font-size: 11px; padding: 3px 7px; border-radius: 4px; }
.note { background: var(--notes-sidebar); padding: 12px 14px; border-radius: 5px; color: var(--notes-muted); font-size: 12px; }
.note b { color: var(--notes-ink); }
.settings-panel { padding: 24px; margin-bottom: 20px; }
.settings-panel .field { margin-top: 18px; }
.field { font-size: 12px; gap: 6px; }
.check-list { gap: 4px; }
.check-list input, .permission-row input { width: 16px; height: 16px; min-height: 16px; }
.check-list small, .permission-row small { font-size: 11px; }
.permission-row { font-size: 13px; padding: 12px 0; }
.integration-toggle span { padding: 10px; border: 1px solid var(--notes-line); border-radius: 5px; font-size: 13px; }
.integration-toggle input:checked + span { background: var(--notes-accent-soft); border-color: var(--notes-accent); color: #1b6fbd; font-weight: 600; }
.cetus-portal { border-color: var(--notes-line); background: var(--notes-sidebar); border-radius: 5px; }
.cetus-portal-sandbox { background: #fff8e8; border-color: #e8d9b5; }
.cetus-portal dl, .cetus-portal p { font-size: 12px; }
.portal-link { color: var(--notes-accent); font-size: 12px; }
.cards { gap: 16px; }
.project-card { padding: 22px; }
.project-card h2 { margin: 12px 0 8px; font-size: 18px; }
.project-card p { font-size: 13px; }
.project-actions button { font-size: 12px; }
.project-kpis > div { border-color: var(--notes-line); border-radius: 5px; }
.project-kpis small { font-size: 11px; }
.project-kpis b { font-size: 22px; }
.project-tabs button { border-radius: 0; font-size: 13px; }
.project-tabs button.active { color: var(--notes-ink); border-color: var(--notes-ink); }
.project-list-row, .project-list-head { font-size: 13px; }
.project-list-row small { font-size: 11px; }
.project-bars em.payment { background: #a4a29b; }
.portal-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; }
.portal-card { position: relative; border: 0; border-bottom: 1px solid var(--notes-line); border-radius: 0; padding: 24px 8px; background: white; }
.portal-card:hover { background: #fafaf9; border-color: var(--notes-line); }
.portal-card-icon { width: 30px; height: 30px; background: var(--notes-sidebar); color: var(--notes-muted); font-size: 19px; border-radius: 5px; }
.portal-card-icon .sm-icon { width: 20px; height: 20px; }
.portal-card h2 { font-size: 17px; margin: 12px 0 6px; }
.portal-card p { font-size: 12px; line-height: 1.8; margin-bottom: 14px; }
.portal-card-arrow { font-size: 11px; color: var(--notes-muted); }
.portal-card:hover .portal-card-arrow { color: var(--notes-accent); }

/* Shared dialogs, including AI extraction and login. */
dialog { color: var(--notes-ink); background: var(--notes-paper); border: 1px solid var(--notes-line); border-radius: 10px; box-shadow: 0 16px 65px rgba(15,15,15,.18); }
dialog::backdrop { background: rgba(30,30,30,.25); backdrop-filter: blur(2px); }
.modal-top { padding: 16px 22px; }
.modal-top h2 { font-size: 18px; }
.modal-body { padding: 20px 22px; }
.modal-actions { padding: 12px 22px max(12px, env(safe-area-inset-bottom)); }
.totals { background: var(--notes-sidebar); border-radius: 5px; font-size: 13px; }
.timeline { border-color: var(--notes-line); }
.gate { background: var(--notes-sidebar); }
.login-card { border-color: var(--notes-line); border-radius: 8px; box-shadow: none; }
.login-card .brand { color: var(--notes-ink); }
.login-card .brand small { color: var(--notes-faint); }
.login-card h1 { font-size: 25px; }
#toast { background: var(--notes-ink); font-size: 13px; border-radius: 6px; }
.ai-original, .ai-result, .provider-result { box-shadow: none; border-color: var(--notes-line); border-radius: 6px; }
.ai-result, .ai-original { background: var(--notes-paper); }
.ai-total-grand { border-color: var(--notes-line); }

/* Cost reports use the same database palette, including sticky columns. */
.gcp-cost { color: var(--notes-ink); }
.gcp-status, .gcp-credit, .gcp-controls label, .gcp-toolbar span, .gcp-secondary p, .gcp-cost td small { color: var(--notes-muted); }
.gcp-controls select, .gcp-controls input, .gcp-pagination select { border-color: var(--notes-line); border-radius: 5px; min-height: 36px; font-size: 13px; }
.gcp-kpis { gap: 0; border-block: 1px solid var(--notes-line); }
.gcp-kpis > div { border: 0; border-right: 1px solid var(--notes-line); border-radius: 0; padding: 18px; }
.gcp-kpis > div:last-child { background: var(--notes-sidebar); color: var(--notes-ink); border-right: 0; }
.gcp-kpis small, .gcp-kpis > div:last-child small { color: var(--notes-muted); font-size: 11px; }
.gcp-kpis b { font-size: 23px; }
.gcp-cost th, .gcp-cost td, .gcp-data-grid { border-color: var(--notes-line); }
.gcp-data-grid thead, .gcp-data-grid thead th:first-child { background: #eeedea; }
.gcp-data-grid th:first-child, .gcp-data-grid td:first-child, .gcp-data-grid tr:nth-child(even) { background: var(--notes-sidebar); }
.gcp-data-grid th button { color: var(--notes-muted); }
.gcp-chart i { background: var(--notes-sidebar); }
.gcp-chart em { background: var(--notes-accent); }

/* Chat keeps its focused navigation and uses the same Notes surfaces. */
body.chat-view .cowork { grid-template-columns: 280px minmax(0, 1fr); }
body.chat-view .cowork-list { background: var(--notes-sidebar) !important; }
body.chat-view .cowork-list-head h2 { font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
body.chat-view .cowork-head-actions > button { border-radius: 5px; background: transparent; color: var(--notes-muted); }
body.chat-view .cowork-search input { border: 1px solid var(--notes-line); border-radius: 5px; background: white; height: 36px; min-height: 36px; font-size: 13px; padding-block: 6px; }
body.chat-view .cowork-search > .sm-icon { top: 9px; color: var(--notes-faint); }
body.chat-view .cowork-tools button { background: transparent; border-radius: 5px; color: var(--notes-muted); }
body.chat-view .cowork-tools button[aria-current=page] { background: var(--notes-active); color: var(--notes-ink); }
body.chat-view .cowork-conversation { min-height: 65px; border-radius: 5px; gap: 10px; padding: 10px 8px; }
body.chat-view .cowork-conversation.selected { background: var(--notes-active); }
body.chat-view .cowork-conversation strong { font-size: 13px; font-weight: 550; }
body.chat-view .cowork-conversation small { font-size: 12px; color: var(--notes-muted); }
body.chat-view .cowork-conversation-icon { width: 32px; height: 32px; border-radius: 5px; background: #eeede9; color: var(--notes-muted); font-size: 15px; }
body.chat-view .cowork-room { background: var(--notes-paper); }
body.chat-view .cowork-room-head { min-height: 60px; }
body.chat-view .cowork-message-text { background: var(--notes-sidebar); border-radius: 5px; line-height: 1.8; }
body.chat-view .cowork-mine .cowork-message-text { background: var(--notes-accent-soft); border-radius: 5px; }
body.chat-view .cowork-agent .cowork-message-text { border-color: var(--notes-line); }
.cowork-avatar, .cowork-agent .cowork-avatar { background: var(--notes-sidebar); color: var(--notes-muted); border-radius: 5px; }
.cowork-agent-tag { background: var(--notes-accent-soft); color: #1b6fbd; }
body.chat-view .cowork-compose form { background: white; border-radius: 6px; }
.cowork-work, .cowork-menu > div, .cowork-artifact, .cowork-suggestions, .cowork-thread-origin { border-radius: 6px; }
.cowork-artifact, .cowork-suggestions, .cowork-thread-origin { background: var(--notes-sidebar); }
body.chat-view .cowork-todo-add { border-color: var(--notes-line); border-radius: 5px; }
body.chat-view .cowork-todo-add button { border-radius: 5px; }
body.chat-view .cowork-todos { gap: 0; }
body.chat-view .cowork-todo { border: 0; border-bottom: 1px solid var(--notes-line); border-radius: 0; }
body.chat-view .cowork-todo > span { font-size: 14px; line-height: 1.8; }
body.chat-view .cowork-todo.done { background: var(--notes-sidebar); }
.cowork-menu > div { box-shadow: 0 8px 30px rgba(15,15,15,.12); }
.sm-sync, .cowork-list-meta time { color: var(--notes-faint); }

@media (max-width: 1050px) and (min-width: 761px) {
  :root { --app-sidebar-width: 200px; }
  #main { padding: 32px 28px 48px; }
  body.meeting-view .meeting-app { grid-template-columns: 205px minmax(0, 1fr); }
  .portal-grid { gap: 0 18px; }
}
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  #workspace > aside, body.meeting-view #workspace > aside {
    position: sticky; inset: auto; top: 0; z-index: 10; height: 98px; width: 100%;
    padding: 8px 12px 0; border-right: 0; border-bottom: 1px solid var(--notes-line);
  }
  #workspace > aside .brand, body.meeting-view #workspace > aside .brand { font-size: 21px; padding: 0 5px; height: 34px; flex: none; }
  #workspace > aside .brand span, body.meeting-view #workspace > aside .brand span { font-size: 14px; }
  #workspace > aside :is(.workspace, .nav-label, .aside-bottom), body.meeting-view #workspace > aside :is(.workspace, .nav-label, .aside-bottom) { display: none; }
  #workspace > aside #nav, body.meeting-view #workspace > aside #nav {
    flex-direction: row; gap: 4px; margin: 5px 0 0; overflow-x: auto; overflow-y: hidden;
    min-height: 45px; align-items: center; scrollbar-width: none;
  }
  #workspace > aside #nav button, body.meeting-view #workspace > aside #nav button {
    width: auto; min-width: 0; flex: none; gap: 7px; padding: 6px 10px; min-height: 36px;
  }
  #workspace > aside #nav button span, body.meeting-view #workspace > aside #nav button span { flex: none; white-space: nowrap; font-size: 12px; }
  #workspace > .shell, body.meeting-view #workspace > .shell { margin-left: 0; }
  .shell > header, body.meeting-view .shell > header { height: 44px; min-height: 44px; padding: 0 16px; }
  .shell > header > span, body.meeting-view .shell > header > span { display: block; font-size: 11px; }
  .shell > header > div { width: auto; gap: 5px; }
  #user-name, #avatar { display: none; }
  #main { padding: 28px 18px 40px; }
  .heading { flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
  .heading h1 { font-size: 26px; }
  .heading > button { margin-top: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat { padding: 14px 12px; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--notes-line); }
  .stat strong { font-size: 23px; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { padding: 20px 6px; }
  .portal-card-icon { float: left; margin: 2px 13px 45px 0; }
  .portal-card h2 { margin: 0 0 5px; }
  .portal-card p { margin: 0 0 8px; }
  .portal-card-arrow { margin-left: 43px; }
  .settings-panel { padding: 18px; }
  .toolbar { padding: 0 12px 12px; }
  .toolbar input { min-width: 0; flex-basis: 100%; }
  .permission-row { grid-template-columns: 1fr; gap: 4px; }
  .panel-heading { padding: 14px 12px; flex-wrap: wrap; }
  .table-foot { flex-wrap: wrap; gap: 7px; }
  .modal-top, .modal-body { padding: 16px; }
  .modal-actions { padding-inline: 16px; flex-wrap: wrap; }
  dialog button, .heading button, .project-actions button { min-height: 40px; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 40px; }
  #integration-note, #integration-note.sandbox-banner { padding: 6px 16px; }
  footer { margin: 0 18px; }
  body.meeting-view .meeting-app { height: calc(100dvh - 142px); }
}
@media (min-width: 641px) and (max-width: 900px) { body.chat-view .cowork { grid-template-columns: 250px minmax(0,1fr); } }
@media (max-width: 640px) {
  body.chat-view .cowork { grid-template-columns: minmax(0,1fr); }
  body.chat-view .cowork-mobile-nav { border-color: var(--notes-line); background: var(--notes-sidebar); }
  body.chat-view .cowork-mobile-nav button { color: var(--notes-muted); }
  body.chat-view .cowork-mobile-nav button[aria-current=page] { color: var(--notes-accent); }
  body.chat-view .cowork-conversation { min-height: 72px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; } }
/* Match legacy selectors with higher specificity without changing their behavior. */
#main .subtitle { color: var(--notes-muted); font-size: 13px; line-height: 1.8; }
.stat { box-shadow: none; }
.stat .label { color: var(--notes-muted); font-weight: 500; }
h3 { font-size: 14px; }
.settings-panel h2 { font-size: 16px; }
.stat.highlight { border-color: var(--notes-line); }
.detail-grid, .detail-line { font-size: 14px; }
.detail-grid small, .timeline p { font-size: 12px; }
.ai-entry { background: var(--notes-accent-soft); border-color: #c8ddf5; color: #1b6fbd; border-radius: 5px; font-size: 14px; padding: 14px; }
.ai-entry span { font-size: 12px; }
.ai-dialog .modal-top small, .ai-progress { color: var(--notes-muted); }
.ai-dialog .modal-top h2 { font-size: 18px; }
.ai-steps { border-color: var(--notes-line); }
.ai-steps [aria-current=step] { background: var(--notes-accent); }
.ai-totals { background: var(--notes-sidebar); }
.provider-result { background: var(--notes-sidebar); }
.provider-result strong { font-size: 22px; }
.provider-result a { color: var(--notes-accent); }