:root {
  color-scheme: dark;
  --canvas: #212121;
  --sidebar: #171717;
  --surface: #2a2a2a;
  --surface-raised: #303030;
  --surface-hover: #343434;
  --line: #3a3a3a;
  --line-strong: #505050;
  --ink: #f1f1f1;
  --muted: #a7a7a7;
  --muted-dim: #777;
  --accent: #9ec5ff;
  --accent-soft: #26384f;
  --green: #62d5a0;
  --green-soft: #173a2d;
  --amber: #f2bd67;
  --amber-soft: #40331d;
  --red: #ff858c;
  --red-soft: #45252a;
  --radius: 8px;
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-size: 15px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 238px; flex: 0 0 238px; display: flex; flex-direction: column; padding: 20px 12px 15px; background: var(--sidebar); border-right: 1px solid #2b2b2b; }
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 11px 32px; }
.brand-lockup strong, .brand-lockup span { display: block; letter-spacing: -.01em; }
.brand-lockup strong { color: #f5f5f5; font-size: 15px; font-weight: 650; }.brand-lockup span { margin-top: 3px; color: #8c8c8c; font-size: 12px; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #555; border-radius: 7px; color: #fff; font-family: Georgia, serif; font-size: 16px; font-weight: 700; }
.primary-nav { display: grid; gap: 3px; }.primary-nav::before { content: "WORKSPACE"; margin: 0 12px 7px; color: #707070; font-size: 10px; font-weight: 650; letter-spacing: .1em; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: #a5a5a5; text-align: left; font-size: 14px; }.nav-item:hover { background: #242424; color: #eee; }.nav-item.is-active { background: #2b2b2b; color: #fff; }.nav-item.is-active .nav-glyph { color: var(--accent); }.nav-glyph { display: inline-grid; width: 17px; place-items: center; color: #858585; }.nav-glyph svg { width: 17px; height: 17px; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; margin: auto 10px 0; padding: 13px 0 0; border-top: 1px solid #2d2d2d; color: #898989; font-size: 12px; }.live-dot, .session-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.sidebar-foot .mono { margin-left: auto; }
.mono { font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace; font-size: 11px; letter-spacing: .02em; }.main-column { min-width: 0; flex: 1; }
.topbar { height: 63px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid #303030; background: var(--canvas); }.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #858585; font-size: 13px; }.breadcrumbs i { color: #565656; font-style: normal; }.breadcrumbs strong { color: #e1e1e1; font-weight: 550; }.topbar-actions { display: flex; align-items: center; gap: 15px; }.icon-button { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #a8a8a8; }.icon-button:hover { background: #2c2c2c; color: #fff; }.icon-button .bell-icon { width: 17px; height: 17px; }.notification-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border: 1px solid var(--canvas); border-radius: 50%; background: var(--red); }.session-chip { display: flex; align-items: center; gap: 8px; color: #a6a6a6; font-size: 13px; }.text-button { margin-left: 5px; padding: 4px 0; border: 0; background: none; color: var(--accent); font-size: 12px; }.notification-wrap { position: relative; }.notification-popover { position: absolute; z-index: 5; top: 40px; right: -5px; width: 340px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #262626; box-shadow: 0 18px 45px rgba(0,0,0,.38); }.popover-heading { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.popover-heading strong { font-size: 14px; }.popover-heading span { color: var(--muted); font-size: 12px; }.notification-list { display: grid; gap: 2px; padding-top: 8px; }.notification-item { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; padding: 9px 2px; }.notification-item .signal { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--amber); }.notification-item.technical .signal { background: var(--red); }.notification-item strong { display: block; font-size: 13px; font-weight: 600; }.notification-item p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }.notification-item time { color: #858585; font-family: "Geist Mono", monospace; font-size: 10px; }
.view { display: none; max-width: 1240px; margin: 0 auto; padding: 38px 38px 70px; }.view.is-visible { display: block; }.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }.eyebrow { margin: 0 0 9px; color: #8f8f8f; font-size: 11px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }.page-intro h1 { margin: 0; color: #f4f4f4; font-size: 31px; font-weight: 650; letter-spacing: -.04em; }.subhead { max-width: 650px; margin: 9px 0 0; color: var(--muted); line-height: 1.55; }.outline-button, .primary-button, .filter-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 13px; border-radius: 6px; font-size: 13px; font-weight: 600; }.outline-button, .filter-button { border: 1px solid var(--line-strong); background: transparent; color: #d1d1d1; }.outline-button:hover, .filter-button:hover { border-color: #777; background: var(--surface-hover); }.outline-button svg, .primary-button svg { width: 15px; height: 15px; }.primary-button { border: 1px solid #e6e6e6; background: #efefef; color: #171717; }.primary-button:hover { background: #fff; }.small { min-height: 32px; }.wide { width: 100%; }.toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }.search-field { display: flex; align-items: center; gap: 9px; width: min(365px, 100%); height: 38px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: #262626; color: #9b9b9b; }.search-field:focus-within { border-color: #7e9ec8; box-shadow: 0 0 0 2px rgba(126,158,200,.14); }.search-field svg { width: 16px; height: 16px; }.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }.search-field input::placeholder { color: #777; }.filter-button { font-size: 13px; font-weight: 500; color: #a8a8a8; }.filter-button span { color: #8a8a8a; font-size: 14px; }
.table-surface, .status-card, .control-list, .stack-list, .event-list, .business-editor { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.table-header, .conversation-row { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(150px, 1fr) minmax(140px, .8fr) minmax(220px, 1.1fr); align-items: center; gap: 18px; }.table-header { padding: 12px 17px; border-bottom: 1px solid var(--line); color: #888; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }.conversation-row { min-height: 77px; padding: 13px 17px; border-bottom: 1px solid #373737; }.conversation-row:last-child { border-bottom: 0; }.conversation-row:hover { background: #2d2d2d; }.guest { display: flex; align-items: center; gap: 11px; }.avatar { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #4b4b4b; border-radius: 7px; background: #333; color: #c4c4c4; font-size: 11px; font-weight: 650; }.guest strong { display: block; color: #ededed; font-size: 14px; font-weight: 600; }.guest small, .activity, .status-card p, .control-list small { display: block; margin-top: 4px; color: #929292; font-size: 12px; }.activity { margin: 0; }.status-badge { display: inline-flex; width: max-content; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 5px; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 650; letter-spacing: .02em; }.status-green { background: var(--green-soft); color: var(--green); }.status-blue { background: var(--accent-soft); color: var(--accent); }.status-amber { background: var(--amber-soft); color: var(--amber); }.status-red { background: var(--red-soft); color: var(--red); }.row-actions { display: flex; align-items: center; gap: 6px; }.row-action { padding: 7px 9px; border: 1px solid #555; border-radius: 6px; background: transparent; color: #d1d1d1; font-size: 12px; font-weight: 600; }.row-action.take { border-color: #5678a8; color: var(--accent); background: #26384f; }.row-action:hover { border-color: #8b8b8b; background: var(--surface-hover); }.quiet-note, .quiet-label { color: #858585; font-size: 12px; }.quiet-note { margin: 13px 0 0; }.empty-state { padding: 32px 18px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.status-card { padding: 19px; }.status-card-head, .section-heading, .editor-footer, .control-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.status-card-head { margin-bottom: 22px; color: #999; font-size: 13px; }.status-card strong { display: block; color: #f0f0f0; font-size: 16px; font-weight: 620; }.status-card p { min-height: 38px; margin-bottom: 18px; line-height: 1.5; }.section-heading { margin: 38px 0 12px; }.section-heading h2 { margin: 0; color: #ededed; font-size: 17px; letter-spacing: -.02em; }.muted { color: var(--muted); }.control-list > div { padding: 17px 18px; border-bottom: 1px solid var(--line); }.control-list > div:last-child { border-bottom: 0; }.control-list strong { color: #e5e5e5; font-size: 14px; font-weight: 600; }.switch { width: 35px; height: 21px; padding: 2px; border: 0; border-radius: 12px; background: #555; }.switch i { display: block; width: 17px; height: 17px; border-radius: 50%; background: #d8d8d8; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .16s; }.switch.is-on { background: #5e85bb; }.switch.is-on i { transform: translateX(14px); background: #f5f5f5; }
.callout { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid #69542e; border-radius: var(--radius); background: #302919; }.callout-icon { color: var(--amber); font-size: 17px; }.callout strong { color: #f0dfb9; font-size: 14px; }.callout p { margin: 5px 0 0; color: #bca575; font-size: 13px; line-height: 1.45; }.stack-list { margin-top: 14px; }.gap-item { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 17px 18px; border-bottom: 1px solid var(--line); }.gap-item:last-child { border-bottom: 0; }.gap-item strong { color: #ededed; font-size: 14px; }.gap-item p { margin: 6px 0 0; color: #9c9c9c; font-size: 13px; line-height: 1.45; }.gap-item .mono { display: block; margin-top: 9px; color: #777; }.gap-actions { display: flex; align-items: center; gap: 8px; }
.kba-tabs { display: flex; gap: 3px; margin-bottom: 25px; border-bottom: 1px solid var(--line); }.kba-tab { padding: 0 12px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #929292; font-size: 13px; }.kba-tab:hover { color: #e2e2e2; }.kba-tab.is-active { border-color: var(--accent); color: var(--accent); font-weight: 650; }.kba-panel { display: none; }.kba-panel.is-visible { display: block; }.event-list { overflow: hidden; }.event-row { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1.5fr auto; gap: 13px; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--line); }.event-row:last-child { border-bottom: 0; }.event-row:hover { background: #2d2d2d; }.event-cell span { display: block; color: #858585; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }.event-cell strong { display: block; margin-top: 5px; color: #e4e4e4; font-size: 13px; font-weight: 600; }.event-cell .mono { font-size: 11px; }.business-editor { padding: 18px; }.business-editor label, .login-card label { display: grid; gap: 8px; color: #a9a9a9; font-size: 13px; font-weight: 600; }.business-editor textarea, .login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 6px; outline: none; background: #252525; color: var(--ink); font-size: 14px; line-height: 1.5; resize: vertical; }.business-editor textarea:focus, .login-card input:focus { border-color: #7e9ec8; box-shadow: 0 0 0 2px rgba(126,158,200,.14); }.business-editor textarea::placeholder { color: #707070; }.editor-footer { margin-top: 14px; }
.login-overlay { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: #171717; }.login-card { width: min(408px, 100%); padding: 36px; border: 1px solid #454545; border-radius: 10px; background: #252525; box-shadow: 0 22px 65px rgba(0,0,0,.42); }.login-symbol { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid #555; border-radius: 10px; color: #e7e7e7; background: #303030; }.login-symbol svg { width: 19px; height: 19px; }.login-card h1 { margin: 0; color: #f4f4f4; font-size: 26px; letter-spacing: -.035em; }.login-card > p:not(.eyebrow) { margin: 9px 0 27px; color: #9f9f9f; line-height: 1.5; }.login-card form { display: grid; gap: 15px; }.form-error { min-height: 17px; color: var(--red); font-size: 12px; }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 370px; padding: 12px 14px; border: 1px solid #555; border-radius: 7px; background: #383838; color: #f2f2f2; font-size: 13px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: .18s; }.toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .sidebar { width: 205px; flex-basis: 205px; }.topbar { padding: 0 24px; }.view { padding: 32px 24px 55px; }.table-header, .conversation-row { grid-template-columns: minmax(170px, 1.4fr) 1fr 1fr; }.table-header span:nth-child(2), .conversation-row > .activity { display: none; }.row-actions { flex-wrap: wrap; }.event-row { grid-template-columns: 1fr 1fr 1.4fr; }.event-row .event-cell:nth-child(3) { order: 4; }.event-row .row-actions { order: 5; } }
@media (max-width: 620px) { .app-shell { display: block; }.sidebar { width: 100%; height: auto; padding: 12px 12px 8px; border-right: 0; border-bottom: 1px solid #2d2d2d; }.brand-lockup { padding: 0 5px 11px; }.primary-nav { display: flex; overflow: auto; }.primary-nav::before { display: none; }.nav-item { flex: 0 0 auto; width: auto; padding: 8px 10px; }.sidebar-foot { display: none; }.topbar { height: 54px; padding: 0 15px; }.view { padding: 25px 15px 45px; }.page-intro { display: block; margin-bottom: 24px; }.page-intro .outline-button, .page-intro .primary-button { margin-top: 18px; }.status-grid { grid-template-columns: 1fr; }.table-surface { overflow-x: auto; }.table-header, .conversation-row { min-width: 610px; }.table-header span:nth-child(2), .conversation-row > .activity { display: block; }.toolbar { flex-wrap: wrap; }.search-field { width: 100%; }.notification-popover { position: fixed; top: 59px; right: 14px; width: min(340px, calc(100vw - 28px)); }.session-chip span:not(.session-dot), .session-chip .text-button { font-size: 11px; }.event-list { overflow-x: auto; }.event-row { min-width: 560px; }.gap-item { display: block; }.gap-actions { margin-top: 14px; }.login-card { padding: 28px; } }