:root {
  --ink: #e9e8e2;
  --muted: #8a8e86;
  --faint: #5f655e;
  --line: rgba(230, 235, 220, 0.1);
  --surface: #1a1d19;
  --surface-2: #20241e;
  --bg: #121411;
  --amber: #efb369;
  --amber-soft: rgba(239, 179, 105, 0.12);
  --green: #7bc59c;
  --red: #dc8374;
  --blue: #8da9e8;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 13px; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 246px; background: #171a16; border-right: 1px solid var(--line); padding: 27px 16px 18px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 0 10px 30px; }
.brand-mark { width: 27px; height: 27px; display: flex; gap: 3px; align-items: end; }
.brand-mark span { display: block; width: 6px; border-radius: 3px; background: var(--amber); transform: skew(-16deg); }
.brand-mark span:nth-child(1) { height: 14px; opacity: .55; }.brand-mark span:nth-child(2) { height: 23px; }.brand-mark span:nth-child(3) { height: 18px; opacity: .75; }
.brand-name { letter-spacing: .16em; font: 500 15px var(--mono); margin: 0; }.brand-subtitle, .eyebrow, .section-kicker, .metric-label, .sidebar-heading { color: var(--faint); font: 500 9px var(--mono); letter-spacing: .11em; margin: 0; }
.brand-subtitle { font-size: 8px; letter-spacing: .16em; margin-top: 3px; }
.workspace-switcher { display: flex; gap: 10px; align-items: center; padding: 12px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.02); margin-bottom: 25px; }
.workspace-dot, .status-pulse, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(123,197,156,.1); flex-shrink: 0; }.workspace-switcher strong { display: block; font-size: 11px; font-weight: 700; margin-top: 5px; }.chevron { color: var(--faint); margin-left: auto; font-size: 18px; }
.nav-list { display: grid; gap: 4px; }.nav-item { color: var(--muted); display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; }.nav-item:hover { background: rgba(255,255,255,.035); color: var(--ink); }.nav-item.active { color: var(--ink); background: var(--amber-soft); }.nav-icon { color: var(--amber); font-size: 16px; width: 16px; text-align: center; }.nav-count { margin-left: auto; background: var(--amber); color: #221b11; font: 500 10px var(--mono); border-radius: 10px; min-width: 21px; text-align: center; padding: 3px 5px; }.nav-count.quiet { background: transparent; color: var(--faint); }
.sidebar-section { margin-top: 35px; }.sidebar-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 12px; }.icon-button { border: 0; background: transparent; color: var(--muted); padding: 4px; font-size: 16px; }.icon-button:hover { color: var(--ink); }.stream-link { display: flex; align-items: center; gap: 9px; padding: 9px 10px; color: var(--muted); font-size: 11px; }.stream-link:hover { color: var(--ink); }.stream-dot { width: 6px; height: 6px; border-radius: 50%; }.stream-dot.amber { background: var(--amber); }.stream-dot.blue { background: var(--blue); }.stream-dot.pink { background: #cf8db7; }.stream-number { color: var(--faint); font: 10px var(--mono); margin-left: auto; }
.sidebar-footer { margin-top: auto; }.system-status { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; padding: 13px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.user-row { display: flex; align-items: center; gap: 9px; padding: 15px 10px 0; }.avatar, .top-avatar { background: #96613e; color: #f6e8d6; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 9px var(--mono); }.user-row strong { display: block; font-size: 10px; }.user-row span:not(.more) { color: var(--faint); display: block; font-size: 9px; margin-top: 3px; }.more { margin-left: auto; color: var(--faint); letter-spacing: 2px; }

.main-content { min-width: 0; flex: 1; }.topbar { min-height: 73px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 38px; }.breadcrumb { color: var(--faint); font-size: 11px; }.breadcrumb strong { color: var(--ink); font-weight: 600; }.slash { padding: 0 9px; color: #444a43; }.topbar-actions { display: flex; align-items: center; gap: 25px; }.sync-label { color: var(--faint); font: 10px var(--mono); display: flex; gap: 8px; align-items: center; }.live-dot { width: 5px; height: 5px; box-shadow: none; }.quiet-button, .text-button { color: var(--muted); border: 0; background: none; padding: 0; font-size: 11px; }.quiet-button:hover, .text-button:hover { color: var(--ink); }.quiet-button span, .text-button span { color: var(--amber); padding-left: 5px; }.top-avatar { border: 0; width: 30px; height: 30px; }
.page-wrap { max-width: 1440px; margin: 0 auto; padding: 39px 38px 56px; }.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 31px; }.section-kicker { color: var(--amber); font-size: 9px; }.page-heading h1 { margin: 10px 0 7px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.04em; line-height: 1.05; font-weight: 700; }.heading-copy { color: var(--muted); margin: 0; font-size: 13px; }.heading-copy strong { color: var(--ink); font-weight: 600; }.primary-button, .approve-button { border: 0; background: var(--amber); color: #211a11; font-size: 11px; font-weight: 800; padding: 12px 17px; border-radius: 3px; }.primary-button:hover, .approve-button:hover { background: #f7c27a; }.primary-button span { font-size: 17px; vertical-align: -1px; margin-right: 4px; }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; }.metric { min-height: 102px; padding: 20px 24px 17px 0; border-right: 1px solid var(--line); margin: 17px 24px 17px 0; }.metric:last-child { border: 0; }.metric strong { display: inline-block; font: 500 30px var(--mono); letter-spacing: -.08em; margin: 10px 10px 5px 0; }.metric-note { font-size: 10px; color: var(--faint); }.amber-text { color: var(--amber); }.green-text { color: var(--green); }
.panel-surface { background: var(--surface); border: 1px solid var(--line); }.approval-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(400px, .84fr); gap: 18px; }.panel-header { min-height: 78px; padding: 20px 22px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 16px; }.panel-header h2, .inspector h2, .account-heading h2 { margin: 7px 0 0; font-size: 16px; letter-spacing: -.025em; }.count-badge { display: inline-grid; place-items: center; background: var(--amber-soft); color: var(--amber); font: 10px var(--mono); border-radius: 50%; width: 20px; height: 20px; vertical-align: 2px; margin-left: 4px; }.filter-row { display: flex; gap: 3px; }.filter { background: none; color: var(--faint); border: 0; padding: 7px 9px; font-size: 10px; }.filter.active { color: var(--ink); background: var(--surface-2); }.queue-list { min-height: 337px; }.queue-item { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s ease; }.queue-item:hover, .queue-item.selected { background: var(--surface-2); }.platform-badge { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 4px; font: 600 12px var(--mono); }.platform-badge.linkedin { background: rgba(102,148,220,.17); color: #88afea; }.platform-badge.instagram { background: rgba(206,117,151,.14); color: #df98b1; }.platform-badge.x { background: rgba(235,235,230,.1); color: #d7d9d0; }.platform-badge.facebook { background: rgba(89,127,205,.17); color: #83a8ed; }.queue-title { font-weight: 700; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.queue-subtitle { color: var(--faint); display: block; font-size: 10px; margin-top: 4px; }.queue-status { text-align: right; }.status-chip { display: inline-block; border-radius: 3px; padding: 5px 7px; font: 9px var(--mono); white-space: nowrap; }.status-chip.awaiting { color: var(--amber); background: var(--amber-soft); }.status-chip.ready { color: var(--green); background: rgba(123,197,156,.1); }.status-chip.rewrite { color: var(--red); background: rgba(220,131,116,.1); }.queue-time { color: var(--faint); display: block; font: 9px var(--mono); margin-top: 6px; }.queue-footer { min-height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }.queue-hint { color: var(--faint); font-size: 9px; }
.inspector { padding-bottom: 18px; }.inspector-top { display: flex; align-items: start; justify-content: space-between; padding: 21px 22px 0; }.draft-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }.draft-title-row h2 { margin-top: 8px; }.draft-meta { display: flex; gap: 9px; flex-wrap: wrap; color: var(--muted); font-size: 10px; padding: 13px 22px 18px; }.meta-separator { color: var(--faint); }.draft-tabs { display: flex; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 22px; gap: 17px; }.draft-tab { border: 0; background: none; color: var(--faint); font-size: 10px; padding: 13px 0 11px; border-bottom: 2px solid transparent; }.draft-tab.active { color: var(--ink); border-bottom-color: var(--amber); }.humanizer-note { color: var(--green); font: 9px var(--mono); margin-left: auto; }.spark { color: var(--amber); font-size: 12px; }.draft-copy { white-space: pre-line; color: #d7d7d0; font-size: 12px; line-height: 1.7; min-height: 155px; padding: 21px 22px 15px; }.draft-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 20px; }.draft-tag { border: 1px solid var(--line); color: var(--muted); padding: 5px 7px; font: 9px var(--mono); }.inspector-divider { border-top: 1px solid var(--line); margin: 0 22px 16px; }.action-row { display: flex; gap: 9px; padding: 0 22px; }.reject-button { border: 1px solid rgba(220,131,116,.35); background: transparent; color: var(--red); font-size: 11px; font-weight: 700; padding: 11px 14px; border-radius: 3px; }.reject-button:hover { background: rgba(220,131,116,.08); }.approve-button { flex: 1; }.approve-button span { margin-left: 8px; }.action-note { color: var(--faint); font-size: 9px; padding: 0 22px; margin: 11px 0 0; }
.lower-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 18px; margin-top: 18px; }.compact { min-height: 72px; align-items: center; padding-top: 16px; }.refresh-time { color: var(--faint); font: 9px var(--mono); }.activity-list { padding: 4px 22px 12px; }.activity-item { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: start; }.activity-item:last-child { border-bottom: 0; }.activity-avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 9px var(--mono); }.activity-avatar.research { background: #344d59; color: #a8d7df; }.activity-avatar.write { background: #54435b; color: #dec0ea; }.activity-avatar.publish { background: #5b4830; color: #f4ce91; }.activity-copy { font-size: 10px; line-height: 1.45; }.activity-copy strong { font-weight: 700; }.activity-copy span { color: var(--muted); }.activity-time { color: var(--faint); font: 9px var(--mono); white-space: nowrap; }.signal-list { padding: 3px 22px 8px; }.signal-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.signal-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 15px; border-radius: 50%; }.signal-icon.teal { color: #7ed1c2; background: rgba(126,209,194,.12); }.signal-icon.purple { color: #bc9ce0; background: rgba(188,156,224,.12); }.signal-icon.coral { color: #dd9e86; background: rgba(221,158,134,.12); }.signal-item strong { display: block; font-size: 10px; }.signal-item span:not(.signal-icon):not(.signal-score) { display: block; color: var(--faint); font-size: 9px; margin-top: 3px; }.signal-score { color: var(--green); font: 500 14px var(--mono); }.signal-score span { color: var(--faint); font-size: 9px; }.signals-button { display: block; padding: 5px 22px 13px; }
.account-row { margin-top: 38px; border-top: 1px solid var(--line); padding-top: 20px; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 28px; }.account-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.account { display: grid; grid-template-columns: 27px minmax(0,1fr) auto; gap: 9px; align-items: center; }.account strong { display: block; font-size: 10px; }.account div span { display: block; color: var(--faint); font-size: 9px; margin-top: 4px; }.account-status { color: var(--green); font: 9px var(--mono); white-space: nowrap; }.account-status i { display: inline-block; width: 5px; height: 5px; background: var(--green); border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.live-connector-summary { grid-column: 2; display: flex; align-items: center; gap: 7px; color: var(--faint); font: 9px var(--mono); margin-top: 3px; }.live-dot.offline { background: var(--red); }.account-status.account-warning { color: var(--red); }.account-status.account-warning i { background: var(--red); }.inbox-strip { margin-top: 18px; padding: 0 22px; }.inbox-strip-heading { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }.inbox-strip-heading h2 { margin: 7px 0 3px; font-size: 15px; }.inbox-strip-heading p:not(.section-kicker) { color: var(--muted); font-size: 9px; margin: 0; }.inbox-strip-body { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; gap: 20px; align-items: center; min-height: 86px; }.inbox-count strong { display: block; color: var(--green); font: 500 27px var(--mono); }.inbox-count span { color: var(--faint); font: 8px var(--mono); letter-spacing: .08em; }.inbox-conversation-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }.inbox-conversation { min-width: 0; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; gap: 8px; align-items: center; }.inbox-conversation strong { display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.inbox-conversation small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; margin-top: 3px; }.inbox-conversation em { color: var(--faint); font: 8px var(--mono); font-style: normal; }.inbox-empty { color: var(--faint); font-size: 10px; }
.live-empty-state, .agent-empty-note { display: flex; flex-direction: column; gap: 6px; padding: 28px 22px; color: var(--faint); font-size: 10px; line-height: 1.45; }.live-empty-state strong { color: var(--muted); font-size: 11px; }.directory-state.idle, .agent-row-status.idle { color: var(--faint); }.directory-state.idle i, .agent-row-status.idle i { background: var(--faint); }
.toast { position: fixed; right: 28px; bottom: 26px; background: #e9e8e2; color: #171a16; padding: 12px 15px; border-radius: 3px; font-size: 11px; font-weight: 700; transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .25s ease; box-shadow: 0 8px 30px rgba(0,0,0,.28); }.toast.show { opacity: 1; transform: translateY(0); }
.queue-approve, .queue-reject { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 3px; padding: 5px 7px; font: 9px var(--mono); cursor: pointer; white-space: nowrap; }.queue-approve { border-color: rgba(123, 207, 168, .45); color: var(--green); }.queue-reject { color: var(--muted); }.queue-approve:disabled, .queue-reject:disabled { opacity: .55; cursor: wait; }
@media (max-width: 1100px) { .sidebar { width: 210px; }.topbar, .page-wrap { padding-left: 25px; padding-right: 25px; }.approval-layout, .lower-grid { grid-template-columns: 1fr; }.inspector { min-height: 0; }.account-row { grid-template-columns: 1fr; gap: 16px; }.live-connector-summary { grid-column: 1; }.inbox-strip-body { grid-template-columns: 100px minmax(0,1fr); }.inbox-strip-body > .quiet-button { grid-column: 2; } }
@media (max-width: 720px) { .sidebar { width: 62px; padding: 20px 8px; }.brand-lockup { padding: 0 9px 28px; }.brand-lockup > div:last-child, .workspace-switcher > div, .workspace-switcher .chevron, .nav-item:not(.active)::after, .nav-item { font-size: 0; }.workspace-switcher { padding: 12px 14px; }.nav-item { justify-content: center; padding: 11px; }.nav-icon { font-size: 16px; }.nav-count, .sidebar-section, .sidebar-footer { display: none; }.topbar { padding: 0 16px; min-height: 62px; }.topbar-actions { gap: 12px; }.sync-label, .quiet-button { display: none; }.page-wrap { padding: 27px 16px 42px; }.page-heading { align-items: start; gap: 20px; flex-direction: column; }.page-heading h1 { font-size: 29px; }.metric-strip { grid-template-columns: repeat(2, 1fr); }.metric { min-height: 92px; padding-right: 12px; margin-right: 12px; }.metric:nth-child(2) { border-right: 0; }.metric strong { font-size: 25px; }.metric-note { display: block; }.panel-header { align-items: start; flex-direction: column; }.filter-row { width: 100%; }.filter { flex: 1; }.queue-item { padding: 14px 15px; grid-template-columns: 27px minmax(0,1fr); }.queue-status { grid-column: 2; text-align: left; margin-top: -7px; }.queue-footer { padding: 0 15px; align-items: start; flex-direction: column; justify-content: center; gap: 5px; }.humanizer-note { display: none; }.draft-tabs { padding: 0 15px; gap: 12px; }.draft-copy, .inspector-top, .draft-meta, .draft-tags, .action-row, .action-note { padding-left: 15px; padding-right: 15px; }.inspector-divider { margin-left: 15px; margin-right: 15px; }.account-list { grid-template-columns: 1fr; gap: 14px; }.account { grid-template-columns: 27px minmax(0,1fr) auto; }.activity-list, .signal-list { padding-left: 15px; padding-right: 15px; }.live-connector-summary { align-items: start; line-height: 1.5; }.inbox-strip { padding: 0 15px; }.inbox-strip-heading { align-items: start; padding: 15px 0; }.inbox-strip-body { grid-template-columns: 1fr; padding: 14px 0 17px; }.inbox-strip-body > .quiet-button { grid-column: 1; }.inbox-conversation-list { grid-template-columns: 1fr; gap: 11px; } }

/* Login modal — overlaid on every page when 401 is observed */
#loginModal {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 7, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#loginModal.open { display: flex; }
#loginModal .login-card {
  width: min(420px, 92vw);
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: #f4f3ef;
  font-family: 'Manrope', system-ui, sans-serif;
}
#loginModal .login-card h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
#loginModal .login-card p {
  margin: 0 0 18px;
  color: #c2c4bd;
  font-size: 13.5px;
  line-height: 1.45;
}
#loginModal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a9c95;
  margin-bottom: 6px;
}
#loginModal input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #0e0f10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f4f3ef;
  font-size: 14px;
  font-family: inherit;
}
#loginModal input:focus { outline: 2px solid #d6a45a; }
#loginModal .login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
#loginModal .login-error {
  color: #ef6a6a;
  font-size: 13px;
  min-height: 18px;
  margin-bottom: 8px;
}
#loginModal button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
#loginModal .cancel { background: transparent; color: #c2c4bd; }
#loginModal .cancel:hover { color: #f4f3ef; }
#loginModal .primary { background: #d6a45a; color: #1a1714; }
#loginModal .primary:hover { background: #e6b46a; }
#topbarLogout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c2c4bd;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-right: 10px;
}
#topbarLogout:hover { color: #f4f3ef; border-color: rgba(255, 255, 255, 0.25); }