/* ================================================================ Geeni "workspace" theme
   A calm, document-like look inspired by Notion: warm neutrals, light sidebar, hairline borders,
   flat surfaces, compact type. Loaded last so it refines every page without changing markup. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --surface-3: #efeeeb;
  --hover: rgba(55, 53, 47, .06);
  --hover-strong: rgba(55, 53, 47, .09);
  --border: #e9e9e7;
  --border-strong: #dcdbd8;
  --text: #37352f;
  --text-2: #6b6a66;
  --muted: #9b9a97;
  --primary: #2383e2;
  --primary-hover: #0b6ec5;
  --primary-soft: rgba(35, 131, 226, .1);
  --primary-text: #ffffff;
  --success: #2f7d4f; --success-soft: #dbeddb;
  --warning: #9a5b13; --warning-soft: #fbecdd;
  --danger: #c4372c;  --danger-soft: #ffe2dd;
  --info: #1f6aa5;    --info-soft: #d3e5ef;
  --sidebar: #f7f7f5;
  --sidebar-2: rgba(55, 53, 47, .06);
  --sidebar-text: #5f5e5b;
  --sidebar-active: #37352f;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --shadow-pop: 0 0 0 1px rgba(15, 15, 15, .05), 0 3px 6px rgba(15, 15, 15, .1), 0 9px 24px rgba(15, 15, 15, .2);
  --shadow-lg: var(--shadow-pop);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji";
  --chart-grid: #ededeb; --chart-text: #6b6a66;
}
:root[data-theme="dark"] {
  --bg: #191919;
  --surface: #191919;
  --surface-2: #202020;
  --surface-3: #2c2c2c;
  --hover: rgba(255, 255, 255, .055);
  --hover-strong: rgba(255, 255, 255, .08);
  --border: #2f2f2f;
  --border-strong: #3a3a3a;
  --text: rgba(255, 255, 255, .86);
  --text-2: #a5a5a5;
  --muted: #7f7f7f;
  --primary: #2f8fec;
  --primary-hover: #529ff0;
  --primary-soft: rgba(47, 143, 236, .16);
  --success: #4dab9a; --success-soft: rgba(77, 171, 154, .16);
  --warning: #e0a458; --warning-soft: rgba(224, 164, 88, .16);
  --danger: #ff7369;  --danger-soft: rgba(255, 115, 105, .15);
  --info: #6fb6e8;    --info-soft: rgba(111, 182, 232, .15);
  --sidebar: #202020;
  --sidebar-2: rgba(255, 255, 255, .055);
  --sidebar-text: #9b9b9b;
  --sidebar-active: rgba(255, 255, 255, .9);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .07), 0 3px 6px rgba(0, 0, 0, .3), 0 9px 24px rgba(0, 0, 0, .45);
  --chart-grid: #2f2f2f; --chart-text: #a5a5a5;
}

body { font-size: 14px; line-height: 1.55; letter-spacing: 0; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.005em; color: var(--text); }
h1 { font-size: 26px; } h2 { font-size: 17px; } h3 { font-size: 14.5px; }
a { color: var(--primary); }
::selection { background: rgba(35, 131, 226, .25); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ---------------------------------------------------------------- sidebar */
.app { grid-template-columns: 248px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
body.sb-collapsed .app { grid-template-columns: 0 minmax(0, 1fr); }
body.sb-collapsed .sidebar { overflow: hidden; padding: 0; border: 0; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--border); padding: 8px 8px 10px; gap: 1px; }
.sb-head { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.brand { flex: 1; min-width: 0; padding: 6px 8px; margin: 0; gap: 8px; color: var(--text); font-size: 14px; font-weight: 600; border-radius: 6px; }
.brand:hover { background: var(--hover); text-decoration: none; }
.brand > div:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand small { display: none; }
.brand-logo { width: 22px; height: 22px; border-radius: 5px; font-size: 13px; box-shadow: none; background: var(--surface-3); flex: none; }
.sb-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; color: var(--muted); cursor: pointer; flex: none; }
.sb-btn:hover { background: var(--hover-strong); color: var(--text); }
.sb-quick { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.nav-label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); padding: 12px 8px 3px; cursor: pointer; user-select: none; border-radius: 6px; }
.nav-label:hover { color: var(--text-2); }
.nav-label::before { content: "▾"; font-size: 10px; width: 12px; transition: transform .15s; opacity: .7; }
.nav-label.collapsed::before { transform: rotate(-90deg); }
.nav-link { gap: 8px; padding: 0 8px; height: 28px; border-radius: 6px; color: var(--sidebar-text); font-weight: 500; font-size: 14px; }
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link.active { background: var(--hover-strong); color: var(--sidebar-active); font-weight: 600; }
.nav-link svg { width: 17px; height: 17px; opacity: .72; stroke-width: 1.7; }
.nav-link.active svg { opacity: 1; }
.nav-count { background: var(--danger); font-size: 10.5px; min-width: 18px; height: 18px; }
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 8px; margin-top: auto; }
.ai-status { color: var(--muted); font-size: 12px; padding: 4px 8px; }
.ai-status .kbd { background: transparent; }
.dot.on { background: #4dab9a; box-shadow: none; }
@media (max-width: 900px) {
  .sidebar { width: 272px; box-shadow: none; }
  .sidebar.open { box-shadow: var(--shadow-pop); }
  body.sb-collapsed .sidebar { padding: 8px; }
}

/* ---------------------------------------------------------------- top bar & page */
.topbar { height: 46px; padding: 0 14px 0 16px; gap: 6px; background: var(--bg); border-bottom: 1px solid transparent; }
.main.scrolled .topbar { border-bottom-color: var(--border); }
.topbar .title { font-size: 14px; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-root { color: var(--muted); font-weight: 400; }
.crumb-sep { color: var(--border-strong); }
.topbar .btn { height: 28px; }
.topbar .btn-icon { width: 30px; padding: 0; }
.search-trigger { height: 30px; min-width: 200px; border-radius: 6px; border-color: transparent; background: var(--hover); color: var(--muted); font-size: 13px; margin-left: 8px; }
.search-trigger:hover { border-color: transparent; background: var(--hover-strong); }
.search-trigger .kbd { background: transparent; border: 0; }
.menu-btn, .sb-open { display: none; }
body.sb-collapsed .sb-open { display: inline-flex; }
.content { padding: 28px clamp(16px, 4vw, 56px) 56px; }
.content > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.content.flush > * { max-width: none; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.015em; }
.page-head p { color: var(--text-2); font-size: 14.5px; }
.top-banner { background: var(--primary-soft); color: var(--text); border-bottom: 1px solid var(--border); font-size: 13px; padding: 6px 16px; }
.banner { background: var(--warning-soft); color: var(--text); border-radius: 6px; }
@media (max-width: 900px) { .content { padding: 18px 16px 48px; } .search-trigger { min-width: 0; } }

/* ---------------------------------------------------------------- surfaces */
.card { border-radius: var(--radius); border-color: var(--border); box-shadow: none; padding: 16px 18px; }
a.card:hover, .project-card:hover, .cl-card:hover, .job-card:hover { background: var(--surface-2); border-color: var(--border); }
.cl-card.active, .job-card.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: var(--surface); }
.card-head { margin-bottom: 10px; }
.card-head h2, .card-head h3 { font-size: 14.5px; font-weight: 650; }
.stat { gap: 2px; }
.stat .label { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.stat .value { font-size: 26px; font-weight: 650; letter-spacing: -.01em; }
.section-title { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* ---------------------------------------------------------------- controls */
.btn { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 500; font-size: 14px; box-shadow: 0 1px 1px rgba(15, 15, 15, .03); transition: background .1s; }
.btn:hover { background: var(--hover); }
.btn:active { transform: none; background: var(--hover-strong); }
.btn-primary { background: var(--primary); border-color: transparent; color: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { border-color: transparent; box-shadow: none; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); color: var(--text); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { height: 28px; padding: 0 9px; font-size: 13px; }
.btn-icon { width: 32px; padding: 0; } .btn-icon.btn-sm { width: 28px; padding: 0; }
.input, .select, .textarea { height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; box-shadow: inset 0 1px 1px rgba(15, 15, 15, .02); }
.textarea { padding: 8px 10px; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
label.field { font-weight: 500; font-size: 12.5px; color: var(--text-2); gap: 5px; }
.switch { color: var(--text-2); font-size: 13px; }
.composer-box { border-radius: 8px; border-color: var(--border-strong); }

/* tags (Notion-style, square-ish) */
.badge { height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--text-2); }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.warning, .badge.overdue.warning { background: var(--warning-soft); color: var(--warning); }
.badge.danger, .badge.overdue { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.primary { background: var(--primary-soft); color: var(--primary); }
.project-key { background: var(--surface-3); color: var(--text-2); font-weight: 600; border-radius: 4px; padding: 1px 6px; }
.chip { background: var(--surface); border-color: var(--border-strong); }
.kbd { border-radius: 4px; border-bottom-width: 1px; background: var(--surface-2); color: var(--text-2); }
.rec { border-radius: 6px; }

/* tabs: quiet, underlined */
.tabs { gap: 2px; border-bottom-color: var(--border); margin-bottom: 18px; }
.tab { padding: 8px 10px; font-weight: 500; font-size: 14px; color: var(--text-2); border-radius: 6px 6px 0 0; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab.active { color: var(--text); border-bottom-color: var(--text); }
.admin-nav button { padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.admin-nav button.active { background: var(--hover-strong); color: var(--text); font-weight: 600; }
.mode-pills { background: var(--surface-2); border-radius: 8px; }
.mode-pill { border-radius: 6px; font-weight: 500; }
.mode-pill.active { color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }

/* tables: database-view feel */
.table-wrap { border-radius: 6px; border-color: var(--border); }
table.table { font-size: 13.5px; }
.table th { background: var(--surface); color: var(--muted); font-weight: 500; font-size: 12.5px; border-bottom: 1px solid var(--border); padding: 8px 12px; }
.table td { padding: 8px 12px; border-bottom-color: var(--border); }
.table tbody tr:hover { background: var(--hover); }
.list-item { border-bottom-color: var(--border); }
a.list-item:hover { background: var(--hover); }

/* menus, modals, toasts */
.dropdown-menu { border-radius: 8px; border: 0; box-shadow: var(--shadow-pop); padding: 4px; }
.dropdown-menu a, .dropdown-menu button { padding: 6px 10px; border-radius: 5px; font-size: 14px; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--hover); }
.notif.unread { background: var(--primary-soft); }
.modal-backdrop { background: rgba(15, 15, 15, .45); backdrop-filter: none; }
.modal { border-radius: 10px; border: 0; box-shadow: var(--shadow-pop); padding: 22px 24px; }
.modal-head h2 { font-size: 18px; }
.toasts { top: auto; bottom: 24px; right: auto; left: 50%; transform: translateX(-50%); align-items: center; }
.toast { background: #2f2f2f; color: #fff; border: 0; border-radius: 8px; box-shadow: var(--shadow-pop); padding: 9px 14px; min-width: 0; font-size: 13.5px; }
.toast::before { margin-right: 8px; }
.toast.success::before { content: "✓"; color: #6fcf97; }
.toast.error { background: #c4372c; }
.palette-box { border-radius: 10px; border: 0; box-shadow: var(--shadow-pop); }
.palette-item.sel { background: var(--hover-strong); }

/* avatars, progress */
.avatar { font-weight: 600; }
.progress { height: 5px; background: var(--surface-3); }
.progress > span { background: var(--primary); }
.ring { background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-3) 0); }

/* ---------------------------------------------------------------- page layouts */
.docs-tree, .channel-list, .conv-list, .ds-side { background: var(--sidebar); border-right-color: var(--border); padding: 10px 8px; }
.tree-item, .channel, .conv, .ds-item { border-radius: 5px; padding: 4px 8px; font-size: 14px; color: var(--sidebar-text); }
.tree-item:hover, .channel:hover, .conv:hover, .ds-item:hover { background: var(--hover); color: var(--text); }
.tree-item.active, .channel.active, .conv.active, .ds-item.active { background: var(--hover-strong); color: var(--text); font-weight: 600; border-color: transparent; }
.doc-pane { padding: 48px clamp(20px, 8vw, 96px) 80px; }
.doc-pane > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.doc-title { font-size: 40px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.doc-icon { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.doc-editor { font: 16px/1.65 var(--font); }
.markdown { font-size: 16px; line-height: 1.65; }
.markdown h1 { font-size: 30px; font-weight: 700; margin: 1.4em 0 .3em; }
.markdown h2 { font-size: 23px; font-weight: 650; margin: 1.3em 0 .3em; }
.markdown h3 { font-size: 19px; font-weight: 650; margin: 1.1em 0 .25em; }
.markdown blockquote { border-left: 3px solid var(--text); background: none; border-radius: 0; color: var(--text); padding: 2px 14px; }
.markdown code { background: rgba(135, 131, 120, .15); color: #eb5757; border-radius: 4px; padding: 1px 5px; font-size: .85em; }
:root[data-theme="dark"] .markdown code { color: #ff7369; }
.markdown pre { background: var(--surface-2); border-radius: 6px; }
.markdown pre code { color: inherit; }
.markdown th, .markdown td { border-color: var(--border); }
.markdown th { background: var(--surface-2); font-weight: 600; }
.markdown hr { border-top-color: var(--border); }
.chat-head, .ai-head { background: var(--bg); border-bottom-color: var(--border); padding: 8px 20px; }
.composer { background: var(--bg); border-top-color: var(--border); }
.msg:hover { background: var(--hover); }
.msg.bot .body { background: var(--surface-2); }
.bubble { border-radius: 10px; border-color: var(--border); }
.bubble-row.user .bubble { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.ai-input { background: var(--bg); }
.ai-input .composer-box { box-shadow: var(--shadow-pop); border: 0; }
.suggestion { border-radius: 8px; }
.suggestion:hover { background: var(--hover); border-color: var(--border-strong); }
.tool-chip { border-radius: 4px; }
.chart-card { border-radius: 8px; }

/* boards */
.column { background: var(--surface-2); border: 0; border-radius: 8px; }
.column-head { font-size: 13.5px; font-weight: 600; color: var(--text-2); padding: 10px 12px 6px; }
.task-card, .cand, .deal { border-radius: 6px; border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 15, 15, .06); }
.task-card:hover, .cand:hover, .deal:hover { background: var(--surface-2); box-shadow: 0 1px 2px rgba(15, 15, 15, .08); }
:root[data-theme="dark"] .task-card, :root[data-theme="dark"] .cand, :root[data-theme="dark"] .deal { background: #252525; border-color: #2f2f2f; }

/* calendar */
.cal-grid { border-radius: 6px; border-color: var(--border); background: var(--border); }
.cal-dow { background: var(--surface); color: var(--muted); font-weight: 500; }
.cal-day.other { background: var(--surface-2); }
.cal-day:hover { background: var(--hover); }
.cal-ev { border-radius: 3px; border-left-width: 2px; }

/* inbox / autopilot items */
.ib-item { border-radius: 8px; border-color: var(--border); }
.ib-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.recipe { border-radius: 8px; }
.recipe:hover { border-color: var(--border-strong); box-shadow: none; background: var(--surface-2); }
.builder-row { background: var(--surface-2); border-style: solid; border-color: var(--border); }
.setup-card { background: var(--surface-2); border-color: var(--border); }

/* ---------------------------------------------------------------- auth & public pages */
.auth { grid-template-columns: 1fr 1fr; }
.auth-hero { background: var(--surface-2); color: var(--text); border-right: 1px solid var(--border); padding: 64px clamp(24px, 6vw, 88px); }
.auth-hero h1 { font-size: 38px; font-weight: 700; letter-spacing: -.02em; }
.auth-hero p, .auth-hero ul { color: var(--text-2); }
.auth-form { background: var(--bg); }
.auth-card { border: 0; padding: 8px; }
.auth-card h1 { font-size: 28px; }
.center-page { background: var(--surface-2); }
.center-card { border: 0; box-shadow: var(--shadow-pop); border-radius: 12px; }
.lp-nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.lp .lp-window { box-shadow: var(--shadow-pop); transform: none; border-radius: 12px; }
.lp .lp-side { background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--border); }
.lp .lp-side b { color: var(--text); }
.lp .lp-side span.on { background: var(--hover-strong); color: var(--text); }
.lp .lp-feature, .lp .lp-stats div, .lp .lp-chat { border-radius: 10px; }
.lp .lp-feature:hover { transform: none; background: var(--surface-2); box-shadow: none; }
.lp .lp-ico { background: var(--surface-3); border-radius: 8px; }
.lp .lp-pill { background: var(--surface-3); color: var(--text-2); font-weight: 500; }
.lp .lp-chat .me { background: var(--surface-3); color: var(--text); }
.lp .lp-stats b { color: var(--text); }
.lp .lp-cta { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 16px; }
.lp .lp-cta .btn:not(.btn-primary) { color: var(--text); border-color: var(--border-strong); }

/* ---------------------------------------------------------------- voice orb: quieter */
.orb { width: 48px; height: 48px; box-shadow: var(--shadow-pop); }
.orb svg { width: 20px; height: 20px; }
.voice-dock { right: 18px; bottom: 18px; }
.voice-panel { border-radius: 10px; border: 0; box-shadow: var(--shadow-pop); }
.voice-status { color: var(--text-2); }

.sb-action { width: 100%; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.sb-action .kbd { font-size: 10.5px; opacity: .8; border: 0; background: transparent; }
html.sb-pre .app { grid-template-columns: 0 minmax(0, 1fr); }
html.sb-pre .sidebar { overflow: hidden; padding: 0; border: 0; }
html.sb-pre .sb-open { display: inline-flex; }
.nav-hidden { display: none !important; }
@media (max-width: 900px) { .sb-open { display: none !important; } #sbCollapse { display: none; } html.sb-pre .app, body.sb-collapsed .app { grid-template-columns: 1fr; } }

.card.briefing { background: var(--surface-2); }
@media (max-width: 900px) {
  .app, body.sb-collapsed .app, html.sb-pre .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar, body.sb-collapsed .sidebar, html.sb-pre .sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: 272px; padding: 8px 8px 10px; border-right: 1px solid var(--border); overflow-y: auto; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex; }
  .crumb-root, .crumb-sep { display: none; }
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar .btn:not(.btn-icon) { padding: 0 8px; font-size: 13px; }
  .search-trigger { margin-left: 2px; padding: 0 8px; }
}

/* Sign in with Google */
.google-btn { justify-content: center; gap: 10px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-weight: 500; text-decoration: none; }
.google-btn:hover { background: var(--surface-2); color: var(--text); }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Super admin console */
.super { min-height: 100vh; background: var(--bg); }
.super-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.super-top .row { gap: 10px; align-items: center; }
.super-main { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
@media (max-width: 760px) { .super-top, .super-main { padding-left: 16px; padding-right: 16px; } }
.super-top .row { flex-wrap: wrap; }
.super-main .card { min-width: 0; }
.super-main .table-wrap { overflow-x: auto; }
@media (max-width: 760px) { .super-who { display: none; } }