:root {
  --sidebar: #f9f8f7;
  --sidebar-fg: #5f5e59;
  --ink: #242320;
  --muted: #8b8984;
  --line: #ebeae7;
  --line-strong: #deddd9;
  --hover: rgba(0, 0, 0, .035);
  --selected: #ecebe8;
  --panel: #fff;
  --soft: #f7f7f5;
  --radius: 7px;
  --shadow: 0 10px 34px rgba(30, 28, 24, .12), 0 1px 4px rgba(30, 28, 24, .08);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { color: inherit; }
svg { width: 16px; height: 16px; stroke-width: 1.8; }

.boot { height: 100%; display: grid; place-content: center; gap: 10px; justify-items: center; color: var(--muted); }
.brain-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: #1e1e1c; font-size: 17px; }

.login-page { min-height: 100%; display: grid; grid-template-columns: minmax(420px, 1fr) minmax(460px, 1.08fr); background: #f7f6f3; }
.login-panel { background: white; padding: 54px max(8vw, 64px); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.login-brand { display: flex; gap: 10px; align-items: center; font-weight: 650; font-size: 16px; position: absolute; top: 32px; }
.login-brand .brain-mark { width: 28px; height: 28px; border-radius: 8px; }
.login-panel h1 { font-size: 32px; letter-spacing: -.03em; margin: 0 0 8px; }
.login-panel > p { color: var(--muted); margin: 0 0 32px; }
#google-login, .google-login-options { width: 100%; max-width: 390px; }
.google-login-options { display: grid; gap: 20px; margin-bottom: 18px; }
.google-login-button { height: 42px; border: 1px solid var(--line-strong); border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #292927; background: white; font-weight: 560; text-decoration: none; box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.google-login-button:hover { background: #fafafa; border-color: #aaa7a0; }
.google-login-button svg { width: 19px; height: 19px; stroke: none; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.login-form { width: 100%; max-width: 390px; display: grid; gap: 15px; }
.login-form label, .form-field { display: grid; gap: 7px; font-size: 13px; font-weight: 550; }
.login-form input, .form-field input, .form-field select, .form-field textarea, .input {
  width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 11px; outline: none; background: #fff;
}
.login-form input:focus, .form-field input:focus, .form-field textarea:focus, .input:focus { border-color: #aaa7a0; box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.form-field textarea { min-height: 100px; height: auto; padding: 10px; resize: vertical; }
.login-error { min-height: 19px; color: #b42318; font-size: 13px; }
.login-art { padding: 11vh 8vw; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, #e7e1d7, #f5f2eb 48%, #ddd5ca); }
.login-art h2 { max-width: 580px; font: 500 clamp(34px, 4vw, 62px)/1.04 Georgia, serif; letter-spacing: -.04em; margin: 0; }
.login-art p { max-width: 530px; color: #67625a; font-size: 17px; margin-top: 24px; }
.login-mock { margin-top: 52px; width: 100%; max-width: 600px; height: 230px; padding: 20px; background: rgba(255,255,255,.78); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; box-shadow: var(--shadow); display: grid; grid-template-columns: 120px 1fr; gap: 18px; }
.login-mock div { border-radius: 6px; background: linear-gradient(#eeece8 12px, transparent 12px); background-size: 100% 34px; }

.primary, .secondary, .quiet-button, .icon-button, .tiny-button {
  min-height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
}
.primary { background: #252522; color: white; padding: 0 12px; font-weight: 560; }
.primary:hover { background: #000; }
.primary:disabled { opacity: .5; cursor: wait; }
.secondary { border: 1px solid var(--line-strong); background: white; padding: 0 11px; }
.secondary:hover, .quiet-button:hover, .icon-button:hover { background: var(--hover); }
.quiet-button { padding: 0 9px; color: #64625d; }
.icon-button { width: 30px; height: 30px; }
.tiny-button { min-height: 25px; padding: 0 8px; font-size: 12px; border: 1px solid var(--line); background: white; }
.danger { color: #b42318; }

.workspace-shell { height: 100%; display: grid; grid-template-columns: 224px minmax(460px, 1fr) 322px; overflow: hidden; }
.workspace-shell.chat-closed { grid-template-columns: 224px minmax(460px, 1fr) 0; }
.sidebar { min-width: 0; height: 100%; background: var(--sidebar); border-right: 1px solid var(--line); padding: 7px 7px 10px; display: flex; flex-direction: column; overflow: hidden; color: var(--sidebar-fg); }
.workspace-switcher { height: 38px; padding: 0 6px; display: flex; align-items: center; gap: 8px; border-radius: 6px; color: #3a3936; font-weight: 630; }
.workspace-switcher:hover { background: var(--hover); }
.workspace-avatar { width: 20px; height: 20px; flex: 0 0 20px; background: #262522; color: #fff; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.workspace-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-spacer { margin-left: auto; display: flex; }
.nav-search { height: 32px; margin: 2px 2px 7px; padding: 0 8px; display: flex; align-items: center; gap: 8px; border-radius: 6px; }
.nav-search:hover { background: var(--hover); }
.nav-search kbd { margin-left: auto; font-size: 10px; font-family: inherit; border: 1px solid var(--line-strong); padding: 1px 4px; border-radius: 4px; color: #99968e; background: rgba(255,255,255,.5); }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.nav-section { margin: 4px 0 8px; }
.nav-heading { width: 100%; height: 27px; display: flex; align-items: center; gap: 7px; padding: 0 8px; color: #8b8983; font-size: 11px; font-weight: 630; }
.nav-heading svg { width: 13px; height: 13px; }
.nav-heading .chevron { margin-left: auto; }
.nav-item { width: 100%; min-height: 29px; padding: 4px 8px 4px 10px; border-radius: 6px; display: flex; align-items: center; gap: 9px; color: #5c5a55; text-decoration: none; font-size: 13px; }
.nav-item:hover { background: var(--hover); }
.nav-item.selected { background: var(--selected); color: #2e2d2a; font-weight: 530; }
.nav-item .nav-icon { width: 16px; display: grid; place-items: center; color: #807e78; flex: 0 0 16px; }
.nav-item .nav-icon.emoji { font-size: 13px; }
.nav-item .label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-item .count { margin-left: auto; font-size: 11px; color: #9d9a94; }
.sidebar-bottom { border-top: 1px solid var(--line); padding-top: 7px; }
.user-nav { margin-top: 4px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.user-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #d9d4ca; color: #4a4741; font-size: 10px; font-weight: 700; }
.user-meta { min-width: 0; display: grid; font-size: 11px; line-height: 1.2; }
.user-meta span { overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: #9a9790; }

.main-pane { min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.topbar { height: 45px; flex: 0 0 45px; padding: 0 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; color: #706e68; }
.breadcrumb { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-center { margin-left: auto; font-size: 11px; color: #a19f99; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mobile-menu { display: none; }
.content-scroll { flex: 1; min-height: 0; overflow: auto; }
.page { min-height: 100%; }
.page-body { max-width: 1000px; padding: 50px clamp(28px, 6vw, 82px) 100px; margin: auto; }
.page-heading { margin-bottom: 34px; }
.page-heading-line { display: flex; align-items: center; gap: 13px; }
.page-icon { font-size: 28px; width: 34px; display: grid; place-items: center; }
.page h1 { font-size: 33px; line-height: 1.16; margin: 0; letter-spacing: -.032em; font-weight: 680; }
.page h2 { font-size: 21px; letter-spacing: -.015em; margin: 28px 0 10px; }
.page-subtitle { color: var(--muted); margin: 8px 0 0; max-width: 680px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; }
.section-title h2, .section-title h3 { margin: 0; }
.section-title h3 { font-size: 14px; }

.doc-page .page-body { max-width: 880px; padding-top: 74px; }
.doc-title { width: 100%; border: 0; outline: 0; font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -.035em; padding: 0; margin: 5px 0 26px; background: transparent; }
.editor-toolbar { position: sticky; top: -1px; z-index: 4; width: max-content; display: flex; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 3px 12px rgba(0,0,0,.05); margin: 0 0 20px; }
.editor-toolbar button { width: 28px; height: 27px; border-radius: 5px; font-size: 12px; }
.editor-toolbar button:hover { background: var(--soft); }
.doc-editor { min-height: 420px; outline: none; font-family: Georgia, serif; font-size: 17px; line-height: 1.7; color: #33312d; }
.doc-editor p { margin: 0 0 1em; }
.doc-editor .lead { font-size: 21px; color: #5e5a53; }
.doc-editor h2 { font: 650 25px/1.3 Inter, sans-serif; margin: 1.7em 0 .5em; color: #252420; }
.doc-editor h3 { font: 650 19px/1.3 Inter, sans-serif; }
.doc-editor .callout { padding: 14px 16px; background: #f5f3ed; border-radius: 8px; margin: 20px 0; font-family: Inter, sans-serif; font-size: 14px; }
.doc-editor mark { background: #f4e7a2; border-radius: 3px; padding: 1px 3px; }
.saving-state { font-size: 11px; color: #aaa69f; min-width: 54px; text-align: right; }

.database-page { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.database-header { flex: 0 0 auto; padding: 27px 18px 0; }
.database-title { display: flex; align-items: center; gap: 12px; margin: 0 5px 22px; }
.database-title h1 { font-size: 31px; }
.database-title svg { width: 25px; height: 25px; }
.view-tabs { height: 39px; display: flex; align-items: end; gap: 4px; overflow-x: auto; }
.view-tab { height: 38px; padding: 0 13px; display: flex; align-items: center; position: relative; color: #6d6b65; white-space: nowrap; }
.view-tab.active { color: #252420; font-weight: 600; }
.view-tab.active::after { content: ''; position: absolute; height: 2px; background: #22211e; left: 4px; right: 4px; bottom: 0; }
.database-toolbar { flex: 0 0 48px; min-width: 0; padding: 0 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 4px; }
.database-meta { font-weight: 620; margin-right: auto; }
.database-meta span { color: var(--muted); font-weight: 400; margin-left: 5px; }
.toolbar-search { width: 0; opacity: 0; border: 0; transition: .18s; }
.toolbar-search.open { width: 130px; opacity: 1; border-bottom: 1px solid var(--line-strong); outline: 0; }
.database-content { flex: 1; min-height: 0; overflow: auto; }
.data-table { border-collapse: collapse; min-width: 100%; table-layout: fixed; }
.data-table th { height: 34px; padding: 0 10px; text-align: left; background: #f8f8f6; color: #77746e; font-size: 11px; font-weight: 560; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.data-table td { height: 38px; padding: 0; border-right: 1px solid #f0efec; border-bottom: 1px solid var(--line); overflow: hidden; }
.data-table tr:hover td { background: #fcfcfb; }
.cell-input { width: 100%; height: 37px; border: 0; outline: none; padding: 0 10px; background: transparent; text-overflow: ellipsis; font-size: 13px; }
.cell-input:focus { box-shadow: inset 0 0 0 2px #2f62c7; background: white; }
.cell-number { text-align: right; font-variant-numeric: tabular-nums; }
.cell-select { appearance: none; }
.status-cell { padding: 6px 8px !important; }
.status-select { width: auto; max-width: 100%; height: 25px; border: 0; border-radius: 6px; padding: 0 20px 0 8px; outline: 0; font-size: 12px; font-weight: 560; appearance: none; background-repeat: no-repeat; }
.status-Late { background: #f9dddd; color: #a53939; }
.status-Disputed { background: #f8e1d1; color: #9c4c24; }
.status-Due, .status-Watchlist { background: #f8edc9; color: #88641d; }
.status-Paid, .status-Committed, .status-Ready, .status-success { background: #dff0e3; color: #35714a; }
.status-New { background: #eae9e6; color: #66635e; }
.status-In-talks { background: #dce8f7; color: #3d6694; }
.new-row { height: 39px; width: 100%; padding: 0 14px; display: flex; align-items: center; gap: 7px; color: #77746e; border-bottom: 1px solid var(--line); }
.new-row:hover { background: var(--hover); color: #3b3935; }

.board { min-width: max-content; display: flex; gap: 14px; padding: 18px; align-items: flex-start; }
.board-column { width: 260px; background: #f7f7f5; border-radius: 9px; padding: 9px; }
.board-column-header { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; padding: 3px 3px 10px; }
.board-column-header span:last-child { margin-left: auto; color: var(--muted); font-weight: 400; }
.board-card { padding: 12px; margin-bottom: 7px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.board-card b { font-size: 13px; }
.board-card p { color: var(--muted); font-size: 11px; margin: 7px 0 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 18px; }
.gallery-card { min-height: 150px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: white; }
.gallery-cover { height: 74px; background: linear-gradient(135deg,#e8e3d8,#f6f3ed); }
.gallery-info { padding: 13px; display: grid; gap: 7px; }
.list-view { padding: 12px 18px; }
.list-row { min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line); gap: 10px; }
.calendar-view { padding: 18px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(100px,1fr)); border: 1px solid var(--line); }
.calendar-day { min-height: 110px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; color: var(--muted); font-size: 11px; }
.calendar-item { background: #ebe6dc; color: #49463f; padding: 4px 6px; border-radius: 4px; margin-top: 6px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 28px; }
.tab { padding: 9px 12px; position: relative; color: var(--muted); text-decoration: none; }
.tab.active { color: var(--ink); font-weight: 600; }
.tab.active::after { content: ''; position: absolute; height: 2px; left: 8px; right: 8px; bottom: -1px; background: var(--ink); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 12px; }
.asset-card { border: 1px solid var(--line); border-radius: 9px; padding: 16px; min-height: 142px; display: flex; flex-direction: column; text-align: left; background: white; }
.asset-card:hover { border-color: #d0cec8; box-shadow: 0 4px 16px rgba(0,0,0,.045); transform: translateY(-1px); }
.asset-card-top { display: flex; align-items: flex-start; gap: 10px; }
.asset-glyph { width: 31px; height: 31px; border-radius: 7px; display: grid; place-items: center; background: #f1efeb; font-size: 16px; }
.asset-card h3 { margin: 2px 0 6px; font-size: 14px; }
.asset-card p { color: var(--muted); font-size: 12px; margin: 8px 0 18px; flex: 1; }
.asset-footer { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.asset-footer > :last-child { margin-left: auto; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #bbb; }
.status-dot.active, .status-dot.connected, .status-dot.Running { background: #4c9a64; box-shadow: 0 0 0 3px #e5f2e8; }
.status-dot.draft, .status-dot.available, .status-dot.Stopped { background: #aaa; }
.status-dot.Idle { background: #d19739; }
.detail-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.detail-header .asset-glyph { width: 42px; height: 42px; font-size: 21px; }
.detail-header h1 { font-size: 29px; margin: 0 0 5px; }
.detail-header p { margin: 0; color: var(--muted); }
.detail-actions { margin-left: auto; display: flex; gap: 7px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, .7fr); gap: 25px; }
.panel { border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.panel-header { min-height: 42px; padding: 0 13px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font-weight: 620; }
.panel-body { padding: 14px; }
.meta-list { display: grid; }
.meta-row { min-height: 39px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; font-size: 12px; }
.meta-row:last-child { border-bottom: 0; }
.meta-row > span:first-child { color: var(--muted); }
.code-editor { width: 100%; min-height: 400px; padding: 16px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: #deddd9; background: #20201e; font: 12px/1.65 "SFMono-Regular", Consolas, monospace; tab-size: 2; }
.markdown-editor { width: 100%; min-height: 380px; padding: 16px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: none; font: 13px/1.6 "SFMono-Regular", Consolas, monospace; }
.run-item { border-bottom: 1px solid var(--line); padding: 13px 0; display: grid; grid-template-columns: 85px 1fr auto; gap: 12px; align-items: start; }
.run-output { margin-top: 7px; padding: 9px; border-radius: 6px; background: var(--soft); white-space: pre-wrap; font: 11px/1.5 monospace; max-height: 180px; overflow: auto; }
.trigger-item, .integration-row, .member-row, .trash-row { min-height: 56px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.integration-logo { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-weight: 700; background: #fff; }
.row-copy { min-width: 0; display: grid; }
.row-copy small { color: var(--muted); }
.row-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.toggle { width: 34px; height: 20px; padding: 2px; border-radius: 20px; background: #ccc9c3; transition: .2s; }
.toggle::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.on { background: #262522; }
.toggle.on::after { transform: translateX(14px); }
.site-preview, .component-preview { width: 100%; min-height: 430px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.split-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-card { padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.stat-card b { display: block; font-size: 26px; letter-spacing: -.03em; }
.stat-card span { color: var(--muted); font-size: 12px; }

.chat-panel { min-width: 0; height: 100%; border-left: 1px solid var(--line); display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.chat-closed .chat-panel { display: none; }
.chat-header { height: 45px; flex: 0 0 45px; border-bottom: 1px solid var(--line); padding: 0 10px 0 16px; display: flex; align-items: center; gap: 7px; }
.chat-title { font-size: 13px; font-weight: 650; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-actions { margin-left: auto; display: flex; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 14px 16px; }
.chat-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 30px; }
.chat-empty .brain-mark { width: 32px; height: 32px; margin-bottom: 13px; }
.chat-empty h3 { color: #4c4a45; font-size: 14px; margin: 0 0 5px; }
.chat-empty p { margin: 0; font-size: 12px; }
.chat-turn { margin-bottom: 21px; }
.chat-turn.user { display: flex; justify-content: flex-end; }
.chat-bubble { max-width: 88%; padding: 11px 13px; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.chat-turn.user .chat-bubble { color: white; background: #252522; border-radius: 12px 12px 3px 12px; }
.chat-turn.assistant { display: grid; grid-template-columns: 25px 1fr; gap: 9px; }
.assistant-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: white; background: #252522; font-size: 10px; }
.chat-turn.assistant .chat-bubble { max-width: none; padding: 2px 0; color: #45433e; }
.chat-turn.assistant.error .chat-bubble { color: #9d3434; }
.chat-loading { display: flex; gap: 4px; padding: 8px 2px; }
.chat-loading i { width: 5px; height: 5px; border-radius: 50%; background: #aaa; animation: bounce 1s infinite; }
.chat-loading i:nth-child(2) { animation-delay: .15s; }.chat-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity:.4 } 30% { transform: translateY(-4px); opacity:1 } }
.chat-composer { flex: 0 0 auto; margin: 8px 10px 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: white; box-shadow: 0 4px 16px rgba(0,0,0,.055); padding: 9px; }
.chat-composer textarea { width: 100%; height: 54px; resize: none; border: 0; outline: 0; padding: 3px 4px; font-size: 13px; line-height: 1.45; }
.chat-composer-footer { display: flex; align-items: center; }
.model-pill { margin-left: 3px; padding: 4px 7px; border-radius: 5px; font-size: 10px; color: #716e67; background: #f5f4f1; }
.send-button { margin-left: auto; width: 28px; height: 28px; border-radius: 7px; background: #252522; color: #fff; display: grid; place-items: center; }
.send-button svg { width: 14px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(33,31,28,.28); display: grid; place-items: center; padding: 20px; animation: fade-in .12s ease-out; }
.modal { width: min(520px, 100%); max-height: min(720px, 92vh); overflow: auto; border-radius: 11px; background: white; box-shadow: var(--shadow); }
.modal.wide { width: min(760px, 100%); }
.modal-header { height: 50px; padding: 0 14px 0 19px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 15px; margin: 0; }
.modal-header .icon-button { margin-left: auto; }
.modal-body { padding: 19px; }
.modal-footer { padding: 12px 19px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.search-modal { align-self: start; margin-top: 10vh; }
.command-input { height: 50px; border: 0; border-bottom: 1px solid var(--line); width: 100%; outline: 0; padding: 0 18px 0 49px; font-size: 15px; }
.command-icon { position: absolute; top: 17px; left: 18px; color: var(--muted); }
.command-results { padding: 7px; max-height: 430px; overflow: auto; }
.command-result { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; text-align: left; }
.command-result:hover, .command-result.active { background: var(--soft); }
.command-result small { display: block; color: var(--muted); }
.share-link { display: flex; gap: 7px; margin-top: 13px; }
.share-link input { flex: 1; }
.history-item { padding: 11px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.history-item .row-actions { margin-left: auto; }
#toast-root { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; gap: 8px; }
.toast { padding: 10px 13px; border-radius: 7px; background: #292825; color: white; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .18s ease-out; }
.toast.error { background: #9d3434; }
@keyframes fade-in { from { opacity: 0 } } @keyframes toast-in { from { opacity: 0; transform: translateY(6px) } }
.empty-state { min-height: 270px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); padding: 30px; }
.empty-state svg { width: 28px; height: 28px; margin-bottom: 12px; }
.empty-state h3 { color: var(--ink); margin: 0 0 5px; }
.empty-state p { margin: 0 0 15px; max-width: 360px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

.public-page { margin: 0; color: #2c2a26; font: 17px/1.65 Georgia, serif; }
.public-page main { width: min(760px, calc(100% - 40px)); margin: 10vh auto; }
.public-page h1 { font: 700 clamp(38px,6vw,64px)/1.1 Inter,sans-serif; letter-spacing: -.04em; }
.public-page h2 { font: 650 27px Inter,sans-serif; margin-top: 2em; }
.public-brand { font: 650 12px Inter,sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #8c8880; }
.public-database main { width: min(1200px,calc(100% - 40px)); }
.public-table { overflow: auto; border: 1px solid var(--line); }
.public-table table { width: 100%; border-collapse: collapse; font: 13px Inter,sans-serif; }
.public-table th, .public-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.public-table th { background: var(--soft); }

@media (max-width: 1050px) {
  .workspace-shell { grid-template-columns: 210px minmax(440px,1fr); }
  .chat-panel { position: fixed; z-index: 30; right: 0; top: 0; bottom: 0; width: min(360px, 92vw); box-shadow: -10px 0 30px rgba(0,0,0,.09); }
  .chat-closed .chat-panel { display: none; }
}
@media (max-width: 720px) {
  .login-page { display: block; }
  .login-panel { min-height: 100%; padding: 80px 28px 40px; }
  .login-art { display: none; }
  .workspace-shell { display: block; }
  .sidebar { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: 224px; transform: translateX(-100%); transition: .2s; box-shadow: 10px 0 28px rgba(0,0,0,.12); }
  .workspace-shell.sidebar-open .sidebar { transform: translateX(0); }
  .main-pane { width: 100%; }
  .mobile-menu { display: grid; }
  .topbar-center { display: none; }
  .page-body { padding: 34px 22px 80px; }
  .doc-page .page-body { padding: 45px 24px 80px; }
  .doc-title { font-size: 32px; }
  .database-toolbar .quiet-button span { display: none; }
  .detail-grid, .split-editor { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}