/* Threadline production UI — 2026-08. One final presentation layer. */

[data-team-billing] [data-seat-review] { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
[data-team-billing] [data-seat-review] > p { flex-basis:100%; margin:8px 0; }
[data-team-billing] a.btn { display:inline-flex; align-items:center; min-height:38px; padding:8px 12px; border:1px solid var(--tl-border-strong); border-radius:6px; text-decoration:none; box-sizing:border-box; }

:root {
  color-scheme: light;
  --tl-shell: #11152b;
  --tl-shell-deep: #0b1024;
  --tl-shell-raised: #191e38;
  --tl-shell-border: rgba(255, 255, 255, 0.09);
  --tl-workspace: #f3f4f7;
  --tl-surface: #ffffff;
  --tl-surface-subtle: #f8f9fb;
  --tl-surface-muted: #f0f2f5;
  --tl-border: #e1e4ea;
  --tl-border-strong: #d1d6de;
  --tl-text: #171a24;
  --tl-text-secondary: #474e5e;
  --tl-text-muted: #626a79;
  --tl-purple: #6657e8;
  --tl-purple-hover: #5849d8;
  --tl-purple-soft: #f0eefe;
  --tl-pink: #d64a98;
  --tl-teal: #167e82;
  --tl-teal-soft: #e9f6f5;
  --tl-success: #157347;
  --tl-success-soft: #eaf6ef;
  --tl-warning: #9a6700;
  --tl-warning-soft: #fff7df;
  --tl-danger: #c43d4b;
  --tl-danger-soft: #fff0f1;
  --tl-focus: rgba(102, 87, 232, 0.28);
  --tl-shadow-1: 0 1px 2px rgba(20, 24, 38, 0.05);
  --tl-shadow-2: 0 8px 24px rgba(20, 24, 38, 0.07);
  --tl-motion-fast: 110ms;
  --tl-motion-ui: 150ms;
  --tl-motion-content: 190ms;
  --tl-motion-page: 220ms;
  --tl-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --tl-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --tl-radius-sm: 6px;
  --tl-radius-md: 9px;
  --tl-radius-lg: 12px;
  --tl-sidebar: 248px;
  --tl-topbar: 64px;
  --accent-purple: var(--tl-purple);
  --accent-pink: var(--tl-pink);
  --accent-green: var(--tl-teal);
  --text-purple: #5142cb;
  --bg: var(--tl-workspace);
  --text: var(--tl-text);
  --muted: var(--tl-text-secondary);
  --card: var(--tl-surface);
  --border: var(--tl-border);
  --good: var(--tl-success);
  --bad: var(--tl-danger);
  --pill: var(--tl-purple-soft);
}

* { box-sizing: border-box; }

html { background: var(--tl-workspace); }

body {
  display: block !important;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  background: var(--tl-workspace) !important;
  color: var(--tl-text);
  font-family: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after,
.ambient-blob { display: none !important; }

a { color: var(--tl-purple); text-underline-offset: 2px; }
a:hover { color: var(--tl-purple-hover); }

h1, h2, h3, h4, h5, h6 {
  color: var(--tl-text) !important;
  font-family: inherit;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

h2 { margin: 0; font-size: 20px !important; line-height: 1.25; font-weight: 720 !important; }
h3 { font-size: 16px; line-height: 1.35; }
p { color: var(--tl-text-secondary); }

button, input, select, textarea { font: inherit; }

button,
.connect-action,
.guide-link,
.team-btn,
.brief-dashboard-btn,
.brief-workspace-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--tl-radius-sm) !important;
  box-shadow: none !important;
  font-weight: 650;
  transition: background-color var(--tl-motion-ui) var(--tl-ease-standard), border-color var(--tl-motion-ui) var(--tl-ease-standard), color var(--tl-motion-ui) var(--tl-ease-standard), box-shadow var(--tl-motion-ui) var(--tl-ease-standard), transform var(--tl-motion-fast) var(--tl-ease-standard);
}

button {
  background: var(--tl-surface) !important;
  border-color: var(--tl-border-strong) !important;
  color: var(--tl-text) !important;
  cursor: pointer;
}

.primary,
#btnLogin,
#btnCreateAccount,
#btnCompleteRecovery,
#btnUpgradePro,
#btnSaveVendor,
#btnSaveStatuses,
#btnJoinTeam,
#btnSaveTerritory,
#btnSaveMessagingPrompts,
#btnGenPair,
#btnSendFeatureRequest,
#btnSaveProfile,
#btnFreeContinue,
#btnPaidContinue,
#btnObSaveVendor,
#btnObSaveTerritory,
#btnGoToDashboard,
.team-btn-primary,
.brief-dashboard-btn--primary,
.brief-workspace-btn--primary {
  background: var(--tl-purple) !important;
  border-color: var(--tl-purple) !important;
  color: #fff !important;
}

button:hover,
.connect-action:hover,
.guide-link:hover {
  transform: none !important;
  background: var(--tl-surface-muted) !important;
  border-color: var(--tl-border-strong) !important;
}

button:not(:disabled):active,
.connect-action:not([aria-disabled="true"]):active,
.guide-link:not([aria-disabled="true"]):active,
.team-btn:not(:disabled):active,
.brief-dashboard-btn:not(:disabled):active,
.brief-workspace-btn:not(:disabled):active {
  transform: scale(.985) !important;
}

#btnLogin:not(:disabled):hover,
#btnCreateAccount:not(:disabled):hover,
#btnCompleteRecovery:not(:disabled):hover,
#btnUpgradePro:not(:disabled):hover,
#btnSaveVendor:not(:disabled):hover,
#btnSaveStatuses:not(:disabled):hover,
#btnJoinTeam:not(:disabled):hover,
#btnSaveTerritory:not(:disabled):hover,
#btnSaveMessagingPrompts:not(:disabled):hover,
#btnGenPair:not(:disabled):hover,
#btnSendFeatureRequest:not(:disabled):hover,
#btnSaveProfile:not(:disabled):hover,
#btnFreeContinue:not(:disabled):hover,
#btnPaidContinue:not(:disabled):hover,
#btnObSaveVendor:not(:disabled):hover,
#btnObSaveTerritory:not(:disabled):hover,
#btnGoToDashboard:not(:disabled):hover,
.primary:hover,
.team-btn-primary:hover,
.brief-dashboard-btn--primary:hover,
.brief-workspace-btn--primary:hover {
  background-color: var(--tl-purple-hover) !important;
  border-color: var(--tl-purple-hover) !important;
}

button.ghost,
button.subtle,
button.outline,
.secondary,
.team-btn-secondary,
.brief-dashboard-btn--secondary,
.brief-dashboard-btn--ghost,
.brief-workspace-btn--secondary,
.brief-workspace-btn--ghost {
  background: var(--tl-surface) !important;
  border-color: var(--tl-border-strong) !important;
  color: var(--tl-text) !important;
}

.btn-delete,
.team-btn-danger,
.brief-dashboard-btn--danger,
.brief-workspace-btn--danger {
  background: var(--tl-danger-soft) !important;
  border-color: var(--tl-border-strong) !important;
  color: var(--tl-danger) !important;
}

.btn-delete:not(:disabled):hover,
.team-btn-danger:not(:disabled):hover,
.brief-dashboard-btn--danger:not(:disabled):hover,
.brief-workspace-btn--danger:not(:disabled):hover {
  background: var(--tl-danger-soft) !important;
  border-color: var(--tl-border-strong) !important;
}

button.ghost:not(:disabled):hover,
button.subtle:not(:disabled):hover,
button.outline:not(:disabled):hover,
.secondary:hover,
.team-btn-secondary:hover {
  background: var(--tl-surface-muted) !important;
  border-color: var(--tl-border-strong) !important;
}

button:disabled,
[aria-disabled="true"] { cursor: not-allowed !important; opacity: 0.52; }

button.is-current:disabled,
button[data-billing-state="current"]:disabled {
  opacity: 1;
  cursor: default !important;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tl-focus) !important;
  outline-offset: 2px;
}

label {
  display: block;
  margin: 14px 0 6px;
  color: var(--tl-text) !important;
  font-size: 13px;
  font-weight: 650;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--tl-border-strong) !important;
  border-radius: var(--tl-radius-sm) !important;
  background: var(--tl-surface) !important;
  box-shadow: none !important;
  color: var(--tl-text) !important;
}

textarea { min-height: 108px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--tl-text-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--tl-border-strong) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--tl-purple) !important; }

.hint, .muted, small { color: var(--tl-text-muted) !important; }
.row { gap: 10px; }
.pill,
.brief-dashboard-pill,
.brief-workspace-pill,
.team-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid var(--tl-border) !important;
  border-radius: 999px !important;
  background: var(--tl-purple-soft) !important;
  color: var(--tl-purple) !important;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Shell */
.container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar {
  position: fixed !important;
  z-index: 1000;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--tl-sidebar) !important;
  min-width: var(--tl-sidebar) !important;
  height: 100vh;
  padding: 22px 16px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--tl-shell-border) !important;
  border-radius: 0 !important;
  background: var(--tl-shell) !important;
  box-shadow: none !important;
}

.sidebar > .logo {
  display: flex !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 0 18px !important;
  padding: 8px !important;
  overflow: hidden !important;
  background: none !important;
}

.sidebar > .logo::before { content: none !important; }
.sidebar > .logo > img.logo {
  display: block !important;
  width: 180px !important;
  height: 180px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: center;
}
body:not(.auth-shell-only) aside.sidebar > .logo > img.logo {
  width: 180px !important;
  height: 180px !important;
  max-width: 180px !important;
}
.sidebar .brand-text { display: none !important; }

#tabs {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 3px !important;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tl-shell-raised) transparent;
}

#tabs .route {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  margin: 0 !important;
  padding: 9px 11px !important;
  gap: 11px;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--tl-text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 580 !important;
  text-decoration: none;
}

#tabs .route > i { width: 18px; color: var(--tl-text-muted); font-size: 18px !important; text-align: center; }
#tabs .route:hover { background: rgba(255,255,255,.055) !important; color: #fff !important; }
#tabs .route.active,
#tabs .route[aria-current="page"] {
  border-color: rgba(137, 120, 255, 0.24) !important;
  background: rgba(119, 99, 236, 0.17) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--tl-purple) !important;
}
#tabs .route.active > i,
#tabs .route[aria-current="page"] > i { color: var(--tl-text-secondary); }

#tabs .route-feature {
  height: auto;
  min-height: 54px;
  margin-top: auto !important;
  align-items: flex-start;
  border-color: rgba(255,255,255,.08) !important;
}
.route-feature-copy { flex: 1 1 auto; width: auto; min-width: 0; text-align: left; }
.route-feature-title { display: block; color: var(--tl-text-secondary); font-size: 12.5px; line-height: 1.35; white-space: normal; }
.route-feature-note { display: none !important; }
#nav-logout { margin-top: 4px !important; }
#connBadge { margin: 8px 10px 0; background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.09) !important; color: var(--tl-text-secondary) !important; }

.topbar {
  position: fixed !important;
  z-index: 900;
  inset: 0 0 auto var(--tl-sidebar);
  width: auto !important;
  height: var(--tl-topbar) !important;
  min-height: var(--tl-topbar);
  margin: 0 !important;
  padding: 0 28px !important;
  border-bottom: 1px solid var(--tl-border) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

.topbar::before,
.topbar::after { content: none !important; }

.topbar-brand-block { display: flex; min-width: 0; align-items: center; }
.topbar-brand-pill {
  min-width: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar-brand-copy { display: flex; min-width: 0; align-items: center; }
.topbar-vendor { color: var(--tl-text) !important; font-size: 15px !important; font-weight: 720 !important; line-height: 1.2; }
.vendor-name-loading {
  display: inline-block;
  width: 116px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--tl-surface-muted) 20%, var(--tl-surface-muted) 46%, var(--tl-surface-muted) 72%);
  background-size: 220% 100%;
  animation: tl-skeleton 1.25s linear infinite;
}
.topbar-greeting { color: var(--tl-text-secondary) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; }
.topbar-greeting::before, .topbar-greeting::after { display: none !important; }
.greeting-name { color: inherit !important; }
.topbar-greeting { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-greeting .status-metric { display: inline-flex; align-items: baseline; gap: 4px; }
.topbar-greeting .status-number { color: var(--tl-text); font-weight: 720; }
.topbar-greeting .status-label, .topbar-greeting .status-date { color: var(--tl-text-muted); }
.topbar-greeting .status-sep { color: var(--tl-text-muted); }
.topbar-actions { display: flex; align-items: center; gap: 8px !important; }
.topbar-actions button { height: 36px !important; min-height: 36px; padding: 0 11px !important; font-size: 12.5px !important; }
.topbar-credits { min-height: 32px; background: var(--tl-surface-subtle) !important; border-color: var(--tl-border) !important; color: var(--tl-text-secondary) !important; }
.topbar-credits > span { display: inline-block; }
.topbar-credits .credits-divider { margin: 0 3px; color: var(--tl-text-muted); }
.topbar-credits .credits-label { margin-left: 5px; }
.topbar .ghost,
.topbar .team-notification-button {
  background: var(--tl-surface) !important;
  border-color: var(--tl-border-strong) !important;
  color: var(--tl-text-secondary) !important;
}
.topbar .ghost:not(:disabled):hover,
.topbar .team-notification-button:not(:disabled):hover,
.topbar .ghost[aria-expanded="true"],
.topbar .team-notification-button[aria-expanded="true"] {
  background: var(--tl-surface-muted) !important;
  border-color: var(--tl-border-strong) !important;
  color: var(--tl-text) !important;
}
.avatar-button { width: 34px !important; height: 34px !important; min-height: 34px; padding: 0 !important; border-radius: 50% !important; background: var(--tl-surface) !important; }
.avatar { width: 34px !important; height: 34px !important; border: 1px solid var(--tl-border-strong) !important; box-shadow: none !important; object-fit: cover; }
.reveal-reset-control { position: relative !important; }
.reveal-reset-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  width: 292px !important;
  min-width: 292px;
  max-width: calc(100vw - 24px);
  max-height: min(520px, calc(100vh - 84px)) !important;
  padding: 7px !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-md) !important;
  background: var(--tl-surface) !important;
  box-shadow: var(--tl-shadow-2) !important;
  overflow-y: auto;
  transform-origin: top right;
  animation: tl-menu-in 120ms ease-out;
}
.reveal-reset-menu-head { display: grid; gap: 2px; padding: 8px 9px 10px !important; border-bottom: 1px solid var(--tl-border); }
.reveal-reset-menu-head strong { color: var(--tl-text); font-size: 13px; }
.reveal-reset-menu-head small { color: var(--tl-text-muted) !important; font-size: 11px; }
.reveal-reset-option { display: flex; width: 100%; justify-content: flex-start; align-items: center; gap: 9px; min-height: 38px; padding: 8px 9px !important; background: transparent !important; border: 0 !important; color: var(--tl-text-secondary) !important; text-align: left; }
.reveal-reset-option i { width: 17px; color: var(--tl-text-muted); font-size: 16px; }
.reveal-reset-option:hover { background: var(--tl-surface-muted) !important; color: var(--tl-text) !important; }
.reveal-reset-option-danger { margin-top: 5px; padding-top: 10px !important; border-top: 1px solid var(--tl-border) !important; border-radius: 0 0 var(--tl-radius-sm) var(--tl-radius-sm) !important; color: var(--tl-danger) !important; }
.reveal-reset-option-danger i { color: var(--tl-danger); }
.reveal-reset-option-danger:hover { background: var(--tl-danger-soft) !important; color: var(--tl-danger) !important; }

@keyframes tl-menu-in {
  from { opacity: 0; transform: translateY(-3px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#app {
  min-height: 100vh;
  margin-left: var(--tl-sidebar) !important;
  padding: calc(var(--tl-topbar) + 28px) 30px 48px !important;
  background: radial-gradient(circle at 10% 0, rgba(102,87,232,.025), transparent 32%), radial-gradient(circle at 100% 26%, rgba(22,126,130,.018), transparent 30%), var(--tl-workspace) !important;
}

#app > .page {
  width: min(100%, 1440px);
  margin: 0 auto;
}

.page, .card { animation: none !important; }
.is-route-entering { animation: tl-route-enter var(--tl-motion-content) var(--tl-ease-enter) both !important; }
.tl-data-ready { animation: tl-data-ready var(--tl-motion-content) var(--tl-ease-enter) both !important; }
@keyframes tl-route-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tl-data-ready {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tl-skeleton { to { background-position: -220% 0; } }

#page-dashboard { max-width: 1440px; }
#page-billing { max-width: 1240px; }
#page-messaging { max-width: 1160px; }
#page-settings { max-width: 1120px; }
#page-guide { max-width: 1180px; }

/* Four legacy route sections are container siblings rather than #app children. */
body:not(.auth-shell-only) .container > .page {
  width: calc(100% - var(--tl-sidebar)) !important;
  min-height: 100vh;
  margin: 0 0 0 var(--tl-sidebar) !important;
  padding: calc(var(--tl-topbar) + 28px) 30px 48px !important;
  background: var(--tl-workspace);
}
body[data-route="messaging"] #app,
body[data-route="library"] #app,
body[data-route="settings"] #app,
body[data-route="guide"] #app,
body[data-route="territory"] #app {
  height: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
}

#pageDashboardGrid { display: block !important; }
#pageDashboardGrid > div:first-child { display: grid; gap: 18px; }
#pageDashboardGrid > div:last-child:empty { display: none; }

/* Surfaces and tables */
.card,
.team-card,
.team-section,
.brief-card,
.brief-summary-card,
.brief-panel-card,
.brief-queue-card {
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  background: var(--tl-surface) !important;
  box-shadow: var(--tl-shadow-1) !important;
  color: var(--tl-text);
}

.card { margin-bottom: 0 !important; padding: 22px !important; }
.card::after { content: none !important; }
.card:hover { transform: none !important; box-shadow: var(--tl-shadow-1) !important; }
.section-title { min-height: 32px; margin-bottom: 14px !important; gap: 12px; align-items: center !important; }
.section-title h2 { color: var(--tl-text) !important; font-size: 18px !important; letter-spacing: -.02em !important; }

table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  color: var(--tl-text-secondary);
  font-size: 13px;
}
th {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--tl-border-strong) !important;
  background: var(--tl-surface-subtle) !important;
  color: var(--tl-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  text-align: left;
}
td { padding: 12px !important; border-bottom: 1px solid var(--tl-border) !important; background: var(--tl-surface); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0 !important; }
tbody tr:hover td { background: var(--tl-surface-subtle); }
.empty.empty-illustrated { display: grid; justify-items: center; gap: 10px; min-height: 190px; padding: 30px 20px; color: var(--tl-text-secondary); text-align: center; }
.empty.empty-illustrated img { width: 116px !important; max-width: 116px !important; height: auto !important; max-height: 96px !important; opacity: .9; }
.empty.empty-illustrated strong { color: var(--tl-text); font-size: 14px; }

/* Dashboard */
.insights-hero-card {
  position: relative;
  margin: 0 !important;
  padding: 24px !important;
  overflow: hidden;
}
.insights-hero-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tl-pink), var(--tl-purple));
}
.insights-hero-top { align-items: flex-start !important; gap: 18px; }
.insights-eyebrow,
.messaging-eyebrow,
.brief-dashboard-kicker,
.brief-workspace-eyebrow,
.team-eyebrow,
.eyebrow {
  color: var(--tl-purple) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.25;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}
.insights-eyebrow::before { display: none !important; }
.insights-hero-headline { margin-top: 6px !important; font-size: 23px !important; }
.insights-hero-subheadline { margin: 5px 0 0 !important; font-size: 14px !important; }
.insights-hero-meta { align-items: flex-end; gap: 6px !important; }
.insights-stamp { color: var(--tl-text-muted) !important; font-size: 10px !important; letter-spacing: .06em !important; }
.insights-body { min-height: 112px !important; margin-top: 18px !important; border-radius: var(--tl-radius-md) !important; }
.insights-company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.insights-company-grid[data-company-count="1"] { grid-template-columns: minmax(0,1fr); }
.insights-company-grid[data-company-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insights-company-grid[data-company-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insights-company-grid[data-company-count="1"] .insights-signal-list[data-signal-count="1"] { grid-template-columns: minmax(0,1fr); }
.insights-company-grid[data-company-count="1"] .insights-signal-list[data-signal-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.insights-company-grid[data-company-count="1"] .insights-signal-list[data-signal-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
.insights-company-card {
  padding: 16px;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-md);
  background: var(--tl-surface-subtle);
}
.insights-company-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.insights-company-name { color: var(--tl-text); font-weight: 700; }
.insights-company-meta { margin-top: 3px; color: var(--tl-text-muted); font-size: 12px; }
.insights-signal-list { display: grid; gap: 9px; margin-top: 13px; }
.insights-signal-item { display: block; min-width: 0; padding: 10px; border: 1px solid var(--tl-border); border-radius: 7px; background: var(--tl-surface); color: inherit; text-decoration: none; transition: border-color var(--tl-motion-ui) var(--tl-ease-standard), background-color var(--tl-motion-ui) var(--tl-ease-standard); }
.insights-signal-item:hover { border-color: var(--tl-border-strong); background: var(--tl-surface-subtle); color: inherit; }
.insights-signal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.insights-signal-tag { color: var(--tl-teal); font-size: 11px; font-weight: 700; }
.insights-signal-time, .insights-signal-source { color: var(--tl-text-muted); font-size: 11px; }
.insights-signal-title { margin-top: 5px; color: var(--tl-text); font-size: 13px; font-weight: 650; }
.insights-signal-why { margin-top: 4px; color: var(--tl-text-secondary); font-size: 12px; }
.insights-empty-state { display: grid; place-items: center; min-height: 112px; padding: 18px; text-align: center; }
.insights-empty-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--tl-purple-soft); color: var(--tl-purple); }
.insights-empty-title { margin-top: 8px; color: var(--tl-text); font-weight: 700; }
.insights-empty-copy { max-width: 520px; margin-top: 3px; color: var(--tl-text-muted); font-size: 12px; }

.dashboard-search-chart-card { min-height: 300px; }
#chartSearches { max-height: 220px; }
#recentCard { padding: 20px 22px !important; }
#recentSearches { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px !important; }
#recentSearches > * { min-width: 0 !important; }
#recentSearches[data-item-count="0"],
#recentSearches[data-item-count="1"] { grid-template-columns: minmax(0,1fr); }
#recentSearches[data-item-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
#recentSearches[data-item-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
#recentSearches[data-item-count="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }

/* Public brief dashboard */
#briefDashboardMount { display: grid; gap: 14px; }
.brief-card { padding: 20px !important; }
.brief-dashboard-head { display: grid; gap: 14px; }
.brief-dashboard-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.brief-dashboard-copy { display: grid; gap: 4px; }
.brief-dashboard-copy h2 { font-size: 18px !important; }
.brief-dashboard-copy p { max-width: 760px; margin: 0; font-size: 13px; }
.brief-dashboard-controls,
.brief-item-actions,
.brief-item-primary-actions,
.brief-item-utility-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brief-dashboard-status,
.brief-dashboard-note { color: var(--tl-text-muted); font-size: 12px; }
.brief-list { display: grid; gap: 10px; }
.brief-item { padding: 16px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); background: var(--tl-surface-subtle); }
.brief-item-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brief-item-title { color: var(--tl-text); font-size: 14px; font-weight: 700; }
.brief-item-meta, .brief-item-summary, .brief-item-activity { color: var(--tl-text-secondary); font-size: 12px; }
.brief-funnel { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.brief-funnel-stat { padding: 10px; border: 1px solid var(--tl-border); border-radius: 7px; background: var(--tl-surface); }
.brief-funnel-stat strong { display: block; color: var(--tl-text); font-size: 18px; line-height: 1.15; }
.brief-funnel-stat span { display: block; margin-top: 4px; color: var(--tl-text-muted); font-size: 11px; }
.brief-highlight { padding: 10px 12px; border-left: 3px solid var(--tl-purple); background: var(--tl-purple-soft); }
.brief-item-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.brief-item-actions { margin-top: 14px; }
.brief-item-utility-actions { margin-left: 8px; }
.brief-item-activity { display: grid; gap: 9px; margin-top: 14px; }
.brief-item-activity-row { padding: 11px 12px; border: 1px solid var(--tl-border); border-radius: 7px; background: var(--tl-surface); }
.brief-item-activity-row strong { display: block; color: var(--tl-text); font-size: 13px; }
.brief-item-activity-row span { display: block; margin-top: 3px; color: var(--tl-text-secondary); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.brief-dashboard-empty { display: grid; place-items: center; gap: 6px; min-height: 112px; padding: 18px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); background: var(--tl-surface-subtle); text-align: center; color: var(--tl-text-muted); }
.brief-dashboard-empty img { width: 38px !important; height: auto !important; max-height: 38px !important; opacity: .72; }
.brief-dashboard-utility,
.brief-utility-link { min-height: auto !important; padding: 2px 0 !important; border: 0 !important; background: transparent !important; color: var(--tl-purple) !important; font-size: 12px; }
.brief-dashboard-utility--danger,
.brief-utility-link--danger { color: var(--tl-danger) !important; }

/* Prospects workspace */
#prospectsRouteShell,
#prospectsWorkspaceSection { width: 100%; }
.brief-workspace-shell { color: var(--tl-text); }
.brief-workspace-frame { display: grid; gap: 18px; padding: 0; }
.brief-workspace-main { display: grid; gap: 18px; min-width: 0; }
.brief-workspace-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 18px; }
.brief-workspace-head-copy { display: grid; gap: 4px; }
.brief-workspace-head h2 { font-size: 24px !important; }
.brief-workspace-head p { max-width: 760px; margin: 0; font-size: 13px; }
.brief-workspace-head-actions,
.brief-primary-actions,
.brief-panel-actions,
.brief-panel-primary-actions,
.brief-panel-secondary-actions,
.brief-panel-danger-actions,
.brief-summary-actions,
.brief-tertiary-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.brief-queue-list { display: grid; gap: 9px; }
.brief-queue-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px 18px;
  min-height: 0;
  padding: 16px !important;
  text-align: left;
  cursor: pointer;
}
.brief-queue-card:hover { border-color: var(--tl-border-strong) !important; background: var(--tl-surface-subtle) !important; box-shadow: var(--tl-shadow-1) !important; }
.brief-queue-card.active { border-color: var(--tl-purple) !important; background: var(--tl-purple-soft) !important; box-shadow: inset 3px 0 0 var(--tl-purple) !important; }
.brief-queue-card-main { min-width: 0; display: grid; gap: 7px; }
.brief-queue-card-top, .brief-queue-copy { display: block; min-width: 0; }
.brief-queue-name { color: var(--tl-text); font-size: 15px; font-weight: 720; }
.brief-queue-role, .brief-queue-meta, .brief-queue-preview, .brief-workspace-meta, .brief-workspace-muted { color: var(--tl-text-muted); font-size: 12px; }
.brief-queue-preview, .brief-queue-meta { grid-column: 1 / -1; }
.brief-queue-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.brief-queue-side { display: grid; justify-items: end; align-content: space-between; gap: 10px; }
.brief-queue-chevron { color: var(--tl-text-muted); }
.brief-summary-card, .brief-panel-card { padding: 20px !important; }
.brief-detail-topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "back back" "heading actions"; align-items: start; gap: 16px; }
.brief-detail-back { grid-area: back; justify-self: start; }
.brief-detail-topbar > :nth-child(2) { grid-area: heading; min-width: 0; text-align: left; }
.brief-detail-topbar > :last-child { grid-area: actions; justify-self: end; }
.brief-summary-sub { margin-top: 8px; color: var(--tl-text-secondary); font-weight: 400; line-height: 1.6; overflow-wrap: anywhere; }
.brief-detail-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.brief-detail-name-row h3 { margin: 0; }
.brief-summary-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.brief-summary-stat { min-width: 130px; padding: 11px; border: 1px solid var(--tl-border); border-radius: 7px; background: var(--tl-surface-subtle); }
.brief-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.brief-detail-block { padding: 14px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); }
.brief-detail-heading, .brief-signal-label { color: var(--tl-text); font-weight: 700; }
.brief-signal-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.brief-activity-list, .brief-comment-group { display: grid; gap: 9px; }
.brief-signal-card, .brief-activity-item, .brief-comment-item, .brief-linked-row { padding: 12px; border: 1px solid var(--tl-border); border-radius: 7px; background: var(--tl-surface-subtle); }
.brief-signal-card { display: grid; gap: 4px; }
.brief-signal-card strong, .brief-summary-stat strong, .brief-detail-block strong { display: block; color: var(--tl-text); }
.brief-signal-card span, .brief-summary-stat span, .brief-detail-block span, .brief-detail-block a { display: block; color: var(--tl-text-secondary); }
.brief-summary-stat span { margin-top: 4px; }
.brief-summary-actions { display: grid; gap: 16px; margin-top: 24px; }
.brief-tertiary-actions { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--tl-border); }
.brief-utility-link + .brief-utility-link { position: relative; margin-left: 10px; padding-left: 11px !important; }
.brief-utility-link + .brief-utility-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background: var(--tl-border-strong); transform: translateY(-50%); }
.brief-tabs-section, .brief-tab-panel { display: grid; gap: 14px; }
.brief-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border: 1px solid var(--tl-border); border-radius: 8px; background: var(--tl-surface-subtle); }
.brief-tab { flex: 0 0 auto; min-height: 34px; padding: 7px 11px !important; border: 0 !important; background: transparent !important; color: var(--tl-text-secondary) !important; }
.brief-tab.active, .brief-tab[aria-selected="true"] { background: var(--tl-surface) !important; color: var(--tl-purple) !important; box-shadow: var(--tl-shadow-1) !important; }
.brief-panel-card-head, .brief-comment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brief-panel-actions { display: grid; gap: 8px; margin-top: 14px; }
.brief-panel-danger-actions { padding-top: 9px; border-top: 1px solid var(--tl-border); }
.brief-comment-meta, .brief-panel-meta { color: var(--tl-text-muted); font-size: 11px; }
.brief-comment-text { margin-top: 8px; color: var(--tl-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.brief-activity-item { display: grid; gap: 4px; }
.brief-activity-item strong { color: var(--tl-text); }
.brief-activity-item span { color: var(--tl-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.brief-detail-block { min-width: 0; }
.brief-detail-block span, .brief-detail-block a { margin-top: 5px; overflow-wrap: anywhere; }
.brief-flash { margin-bottom: 20px; padding: 12px 14px; border-radius: 7px; font-size: 12px; font-weight: 650; }
.brief-flash.success { border: 1px solid var(--tl-border-strong); background: var(--tl-success-soft); color: var(--tl-success); }
.brief-flash.error { border: 1px solid var(--tl-border-strong); background: var(--tl-danger-soft); color: var(--tl-danger); }
.brief-workspace-pill--success { border-color: var(--tl-border-strong) !important; background: var(--tl-success-soft) !important; color: var(--tl-success) !important; }
.brief-workspace-pill--warning { border-color: var(--tl-border-strong) !important; background: var(--tl-warning-soft) !important; color: var(--tl-warning) !important; }
.brief-workspace-pill--danger { border-color: var(--tl-border-strong) !important; background: var(--tl-danger-soft) !important; color: var(--tl-danger) !important; }
.brief-empty-state { display: grid; justify-items: center; gap: 3px; padding: 34px 22px; border: 1px dashed var(--tl-border-strong); border-radius: var(--tl-radius-md); background: var(--tl-surface-subtle); text-align: center; color: var(--tl-text-muted); }
.brief-empty-state strong { display: block; color: var(--tl-text); font-size: 15px; }
.brief-empty-state span { display: block; max-width: 460px; margin-top: 4px; color: var(--tl-text-muted); font-size: 12px; }
.brief-linked-row { box-shadow: inset 3px 0 0 var(--tl-purple) !important; background: var(--tl-surface-subtle) !important; }
.brief-linked-row .name-prospect { display: inline-flex; align-items: center; gap: 7px; }
.brief-linked-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 7px; border-radius: 999px; background: var(--tl-purple-soft); color: var(--tl-purple); font-size: 10px; font-weight: 700; }

/* Billing */
#page-billing { display: grid; gap: 16px; }
body:not(.auth-shell-only):not(.app-hydrating):not(.onboarding-active)[data-route="billing"] #page-billing { display: grid !important; }
#page-billing > .card { margin-top: 0 !important; }
.billing-zero-banner { margin-top: 16px; padding: 11px 13px; border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius-md); background: var(--tl-warning-soft); color: var(--tl-warning); }
.billing-balance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.billing-balance-block { min-height: 118px; padding: 15px !important; border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface-subtle) !important; box-shadow: none !important; }
.billing-balance-label { color: var(--tl-text-muted) !important; font-size: 11px !important; letter-spacing: .05em !important; text-transform: uppercase; }
.billing-balance-value { margin-top: 7px; color: var(--tl-text) !important; font-size: 25px !important; font-weight: 740; }
.billing-balance-note { margin-top: 5px; color: var(--tl-text-muted) !important; font-size: 11px !important; }
.billing-plan-table-wrap { overflow: auto; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); }
.billing-plan-table-wrap table { min-width: 650px; }
#billingPlanOptions { grid-template-columns: repeat(5,minmax(140px,1fr)) !important; gap: 8px !important; }
#billingPlanOptions button { min-width: 0; min-height: 48px; padding: 9px; background: var(--tl-surface) !important; border-color: var(--tl-border-strong) !important; color: var(--tl-text-secondary) !important; }
#billingPlanOptions button:not(:disabled):hover { background: var(--tl-purple-soft) !important; border-color: var(--tl-purple) !important; color: var(--tl-purple) !important; }
#billingPlanOptions button.is-current,
#billingPlanOptions button[data-billing-state="current"] { background: var(--tl-purple-soft) !important; border-color: var(--tl-purple) !important; color: var(--tl-purple) !important; box-shadow: inset 0 0 0 1px rgba(102,87,232,.12) !important; }
#billingPlanOptions button[data-billing-state="unavailable"] { background: var(--tl-surface-subtle) !important; color: var(--tl-text-muted) !important; }
.billing-refill-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.billing-refill-pack {
  position: relative;
  display: grid;
  min-height: 158px;
  align-content: center;
  justify-items: start;
  gap: 5px;
  padding: 17px !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-md) !important;
  background: var(--tl-surface) !important;
  color: var(--tl-text) !important;
  text-align: left;
}
.billing-refill-pack:not(:disabled):hover { border-color: var(--tl-purple) !important; background: var(--tl-surface-subtle) !important; }
.billing-refill-count { color: var(--tl-text-secondary) !important; font-size: 13px !important; font-weight: 650; }
.billing-refill-price { color: var(--tl-text) !important; font-size: 24px !important; font-weight: 760; }
.billing-refill-unit { color: var(--tl-text-muted) !important; font-size: 11px !important; }
.billing-refill-action { margin-top: 8px; color: var(--tl-purple) !important; font-size: 12px !important; font-weight: 700; }
.billing-refill-badge { position: absolute; top: 10px; right: 10px; padding: 3px 7px; border-radius: 999px; background: var(--tl-purple-soft); color: var(--tl-purple); font-size: 10px; font-weight: 700; }

/* Team */
.team-page, .team-workspace-root { color: var(--tl-text); }
.team-loading { display: grid; gap: 12px; }
.team-hero {
  padding: 22px !important;
  border: 1px solid var(--tl-shell-raised) !important;
  border-radius: var(--tl-radius-lg) !important;
  background: var(--tl-shell) !important;
  box-shadow: none !important;
}
.team-hero-row { gap: 18px; }
.team-hero .team-heading-on-dark,
.team-hero .team-heading-on-dark h2,
.team-hero .team-heading-on-dark h3 { color: #fff !important; }
.team-heading-on-light,
.team-heading-on-light h2,
.team-heading-on-light h3,
.team-metric-section h3 { color: var(--tl-text) !important; }
.team-heading-on-light p,
p.team-heading-on-light { color: var(--tl-text-secondary) !important; }
.team-hero p, .team-hero-context, .team-hero-stat { color: var(--tl-text-secondary) !important; }
.team-hero-stat { padding: 10px 12px !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 7px !important; background: rgba(255,255,255,.055) !important; }
.team-nav { margin-top: 12px !important; padding: 4px !important; gap: 3px !important; border: 1px solid var(--tl-border) !important; border-radius: 8px !important; background: var(--tl-surface) !important; box-shadow: none !important; }
.team-tab { min-height: 34px !important; padding: 7px 10px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: var(--tl-text-secondary) !important; }
.team-tab.active, .team-tab[aria-selected="true"] { background: var(--tl-purple-soft) !important; color: var(--tl-purple) !important; }
.team-view { animation: tl-team-view-enter 160ms var(--tl-ease-enter) both; }
@keyframes tl-team-view-enter { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.team-section { padding: 20px !important; }
.team-section-head { margin-bottom: 14px; }
.team-section-copy { color: var(--tl-text-muted) !important; }
.team-metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 16px !important; }
.team-metric-card { padding: 14px !important; border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface-subtle) !important; box-shadow: none !important; }
.team-columns, .team-detail-columns { gap: 20px !important; }
.team-card, .team-detail-card, .team-material-card { padding: 16px !important; border-radius: var(--tl-radius-md) !important; box-shadow: none !important; }
.team-card { padding: 24px !important; }
.team-view, .team-settings-grid { gap: 24px; }
@media (max-width: 720px) {
  .brief-signal-strip { grid-template-columns: minmax(0,1fr); }
  .brief-detail-topbar { grid-template-columns: minmax(0,1fr); grid-template-areas: "back" "heading" "actions"; }
  .brief-detail-topbar > :last-child { justify-self: start; }
  .team-card { padding: 20px !important; }
}
.team-toolbar, .team-filterbar { padding: 10px !important; border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface-subtle) !important; }
.team-preset-group { gap: 3px !important; padding: 3px !important; border: 1px solid var(--tl-border) !important; border-radius: 8px !important; background: var(--tl-surface) !important; }
.team-preset { min-height: 32px !important; padding: 6px 9px !important; border: 0 !important; background: transparent !important; color: var(--tl-text-secondary) !important; }
.team-preset:hover { background: var(--tl-surface-muted) !important; color: var(--tl-text) !important; }
.team-preset[aria-pressed="true"] { background: var(--tl-purple-soft) !important; color: var(--tl-purple) !important; box-shadow: inset 0 0 0 1px var(--tl-border) !important; }
.team-table-head { border-bottom: 1px solid var(--tl-border) !important; color: var(--tl-text-muted) !important; }
.team-prospect-row, .team-member-row, .team-list-row, .team-audit-row { border-bottom: 1px solid var(--tl-border) !important; }
.team-prospect-row:hover, .team-member-row:hover, .team-list-row:hover { background: var(--tl-surface-subtle) !important; }
.team-empty, .team-caught-up { padding: 28px !important; border: 1px dashed var(--tl-border-strong) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface-subtle) !important; }
.team-notification-panel, .team-dialog-panel { border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-lg) !important; background: var(--tl-surface) !important; box-shadow: 0 18px 50px rgba(20,24,38,.16) !important; }

/* Vendor and messaging */
#page-vendor { max-width: 1040px !important; }
#page-vendor > .card { padding: 26px !important; }
#page-vendor > .card > .card { margin-top: 20px !important; padding: 18px !important; border-color: var(--tl-border) !important; background: var(--tl-surface-subtle) !important; }
#page-vendor textarea { min-height: 96px; }
.team-vendor-profile-notice, .team-vendor-sync-success { padding: 12px 14px !important; border: 1px solid var(--tl-border-strong) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-success-soft) !important; color: var(--tl-success) !important; }
.messaging-page-shell { max-width: 1100px; padding: 26px !important; }
.messaging-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.messaging-page-heading h2 { margin-top: 5px; font-size: 24px !important; }
.messaging-page-heading p { max-width: 720px; margin: 6px 0 0; font-size: 13px; }
.messaging-model-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px !important; border: 1px solid var(--tl-border) !important; border-radius: 999px !important; background: var(--tl-purple-soft) !important; color: var(--tl-purple) !important; font-size: 11px !important; }
.messaging-safety-note { display: flex; gap: 10px; margin-top: 18px; padding: 12px 14px !important; border: 1px solid var(--tl-border-strong) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-success-soft) !important; color: var(--tl-success) !important; }
.messaging-safety-note span { display: block; margin-top: 2px; color: var(--tl-text-secondary); font-size: 12px; }
.messaging-preferences-card,
.messaging-advanced-panel,
.messaging-prompt-card,
.messaging-placeholder-panel { margin-top: 16px; padding: 18px !important; border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface-subtle) !important; box-shadow: none !important; }
.messaging-tone-picker > summary,
.messaging-advanced-panel > summary,
.messaging-placeholder-details > summary { cursor: pointer; list-style: none; }
.messaging-tone-picker > summary::-webkit-details-marker,
.messaging-advanced-panel > summary::-webkit-details-marker,
.messaging-placeholder-details > summary::-webkit-details-marker { display: none; }
.messaging-tone-picker > summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--tl-border-strong); border-radius: 7px; background: var(--tl-surface); transition: border-color var(--tl-motion-ui) var(--tl-ease-standard), box-shadow var(--tl-motion-ui) var(--tl-ease-standard); }
.messaging-tone-picker > summary:hover { border-color: var(--tl-purple); }
.messaging-tone-picker[open] > summary { border-color: var(--tl-purple); box-shadow: 0 0 0 3px var(--tl-focus); }
.messaging-tone-summary-copy { display: grid; gap: 2px; }
.messaging-tone-summary-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--tl-text-muted); }
.messaging-tone-summary-meta i,
.messaging-advanced-panel > summary > i { transition: transform var(--tl-motion-ui) var(--tl-ease-standard); }
.messaging-tone-picker[open] .messaging-tone-summary-meta i,
.messaging-advanced-panel[open] > summary > i { transform: rotate(180deg); }
.messaging-tone-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding-top: 12px; animation: tl-content-enter var(--tl-motion-ui) var(--tl-ease-enter) both; }
.messaging-tone-option {
  display: grid !important;
  grid-template-columns: 18px minmax(0,1fr);
  min-height: 66px;
  align-items: start;
  gap: 10px;
  margin: 0 !important;
  padding: 11px 12px;
  border: 1px solid var(--tl-border) !important;
  border-radius: 8px;
  background: var(--tl-surface);
  cursor: pointer;
  transition: background-color var(--tl-motion-ui) var(--tl-ease-standard), border-color var(--tl-motion-ui) var(--tl-ease-standard), box-shadow var(--tl-motion-ui) var(--tl-ease-standard);
}
.messaging-tone-option:hover { border-color: var(--tl-border-strong) !important; background: var(--tl-surface-subtle); }
.messaging-tone-option.is-selected { border-color: var(--tl-purple) !important; background: var(--tl-purple-soft); box-shadow: inset 3px 0 0 var(--tl-purple); }
.messaging-tone-option > input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-items: center;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  margin: 2px 0 0;
  padding: 0 !important;
  border: 1.5px solid var(--tl-text-muted);
  border-radius: 5px;
  background: var(--tl-surface);
  cursor: pointer;
}
.messaging-tone-option > input[type="checkbox"]::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; opacity: 0; transform: scale(.65); transition: opacity var(--tl-motion-fast) ease, transform var(--tl-motion-fast) var(--tl-ease-enter); }
.messaging-tone-option > input[type="checkbox"]:checked { border-color: var(--tl-purple); background: var(--tl-purple); }
.messaging-tone-option > input[type="checkbox"]:checked::after { opacity: 1; transform: scale(1); }
.messaging-tone-option > input[type="checkbox"]:focus-visible { outline: 3px solid var(--tl-focus); outline-offset: 2px; }
.messaging-tone-option > input[type="checkbox"]:disabled { cursor: default; opacity: .72; }
.messaging-tone-option > span { display: grid; min-width: 0; gap: 2px; }
.messaging-tone-option strong { color: var(--tl-text); font-size: 13px; line-height: 1.35; }
.messaging-tone-option small { color: var(--tl-text-muted) !important; font-size: 11px; font-weight: 500; line-height: 1.45; }
.messaging-tone-help { min-height: 18px; padding-top: 7px; color: var(--tl-danger); font-size: 11px; font-weight: 650; }
.messaging-advanced-panel > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.messaging-advanced-summary p { margin: 3px 0 0; font-size: 12px; }
.messaging-advanced-body { display: grid; gap: 12px; margin-top: 14px; animation: tl-content-enter var(--tl-motion-content) var(--tl-ease-enter) both; }
.messaging-prompt-card { margin-top: 0; background: var(--tl-surface) !important; }
.messaging-prompt-head { display: flex; justify-content: space-between; gap: 12px; }
.messaging-prompt-head p { margin: 3px 0 0; font-size: 12px; }
.messaging-prompt-status { color: var(--tl-text-muted); font-size: 11px; white-space: nowrap; }
.messaging-prompt-editor { min-height: 210px; margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.6; }
.messaging-editor-footer, .messaging-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.messaging-character-meter { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.messaging-character-meter small { color: var(--tl-text-muted); font-size: 10px; font-weight: 500; }
.messaging-auto-context-list, .messaging-placeholder-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.messaging-auto-context-list > span, .messaging-placeholder-list code { padding: 6px 8px; border: 1px solid var(--tl-border); border-radius: 6px; background: var(--tl-surface); color: var(--tl-text-secondary); font-size: 11px; }
.messaging-save-bar { position: sticky; bottom: 12px; z-index: 3; padding: 12px 14px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); background: rgba(255,255,255,.96); box-shadow: var(--tl-shadow-2); }
@keyframes tl-content-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Connection and guide */
#page-settings { display: grid; justify-items: center; }
body:not(.auth-shell-only):not(.app-hydrating):not(.onboarding-active)[data-route="settings"] #page-settings { display: grid !important; }
#connectCard { width: min(860px,100%); padding: 28px !important; overflow: hidden; }
.connection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.connection-eyebrow { margin-bottom: 5px; color: var(--tl-purple); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.connect-card-copy { max-width: 720px; margin-top: 6px; }
.connection-status { display: inline-flex; flex: 0 0 auto; min-height: 30px; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--tl-border); border-radius: 999px; background: var(--tl-surface-subtle); color: var(--tl-text-secondary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.connection-status > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-text-muted); box-shadow: 0 0 0 3px rgba(154,161,175,.14); }
.connection-status.is-connected { border-color: var(--tl-border-strong); background: var(--tl-success-soft); color: var(--tl-success); }
.connection-status.is-connected > span:first-child { background: var(--tl-success); box-shadow: 0 0 0 3px rgba(21,115,71,.12); }
.connection-status.is-disconnected { border-color: var(--tl-border-strong); background: var(--tl-warning-soft); color: var(--tl-warning); }
.connection-status.is-disconnected > span:first-child { background: var(--tl-warning); box-shadow: 0 0 0 3px rgba(154,103,0,.12); }
.connection-status.is-unavailable { border-color: var(--tl-border-strong); background: var(--tl-danger-soft); color: var(--tl-danger); }
.connection-status.is-unavailable > span:first-child { background: var(--tl-danger); box-shadow: 0 0 0 3px rgba(196,61,75,.12); }
.connection-workflow { display: grid; gap: 12px; margin-top: 24px; padding: 20px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); background: var(--tl-surface-subtle); }
.connection-step { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; }
.connection-step-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--tl-purple-soft); color: var(--tl-purple); font-size: 12px; font-weight: 800; }
.connection-step strong { display: block; color: var(--tl-text); font-size: 13px; }
.connection-step div > span { display: block; margin-top: 2px; color: var(--tl-text-muted); font-size: 11px; }
.connect-code-row { display: grid; grid-template-columns: max-content minmax(220px,1fr) max-content; align-items: stretch; gap: 8px; padding-left: 38px; }
#btnGenPair, #btnCopy { white-space: nowrap; }
.connect-code-stack { display: grid; min-width: 220px; min-height: 54px; align-content: center; padding: 7px 13px; border: 1px solid var(--tl-border); border-radius: 7px; background: var(--tl-surface); }
.connect-code-value { min-height: 24px; color: var(--tl-text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 20px !important; font-weight: 760; letter-spacing: .12em; }
.connect-code-value:empty::before { content: "—"; color: var(--tl-text-muted); }
.connect-actions, .guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.connect-action, .guide-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; text-decoration: none; }
.connect-download-note { margin-top: 12px; }
.connection-disconnect-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tl-border); }
.connection-disconnect-row strong { display: block; color: var(--tl-text); font-size: 12px; }
.connection-disconnect-row span { display: block; margin-top: 2px; color: var(--tl-text-muted); font-size: 11px; }
.connection-disconnect { flex: 0 0 auto; min-height: 34px !important; color: var(--tl-text-muted) !important; font-size: 11px !important; }
.guide-hero { position: relative; overflow: hidden; padding: 26px !important; }
.guide-hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,var(--tl-pink),var(--tl-purple)); }
.guide-lead { max-width: 900px; font-size: 14px !important; }
.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.guide-step { padding: 20px !important; }
.guide-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.guide-step-number { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px !important; background: var(--tl-purple-soft) !important; color: var(--tl-purple) !important; font-size: 12px; font-weight: 750; }
.guide-step p, .guide-step li { color: var(--tl-text-secondary); font-size: 13px; }

/* Modals and onboarding */
.profile-modal,
.onboard-overlay,
.delete-modal {
  background: rgba(9, 12, 25, .52) !important;
  backdrop-filter: blur(6px);
}
.onboard-overlay { position: fixed !important; inset: 0 !important; align-items: center !important; justify-content: center !important; padding: 20px !important; background: radial-gradient(circle at 18% 10%, rgba(102,87,232,.24), transparent 34%), rgba(7,10,24,.92) !important; }
.profile-modal > .card,
.delete-modal > .modal-box,
.onboard-inner {
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  background: var(--tl-surface) !important;
  box-shadow: 0 24px 70px rgba(9,12,25,.22) !important;
}
.profile-modal.show > .card,
.delete-modal.show > .modal-box { animation: tl-modal-enter 180ms var(--tl-ease-enter) both; }
@keyframes tl-modal-enter {
  from { opacity: 0; transform: translateY(7px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#profileModal > .card { width: min(620px, calc(100vw - 32px)) !important; max-width: 620px !important; max-height: calc(100vh - 32px) !important; padding: 24px !important; overflow-y: auto !important; }
.feature-request-modal > .card, .reveal-reset-modal > .card { width: min(620px, calc(100vw - 32px)) !important; }
.profile-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#profileModalTitle { margin: 0 !important; color: var(--tl-text) !important; font-size: 20px !important; font-weight: 720 !important; letter-spacing: -.02em !important; text-transform: none !important; }
#profileModal label { margin: 14px 0 6px !important; color: var(--tl-text) !important; font-size: 13px !important; font-weight: 650 !important; }
#btnProfileClose { min-height: 36px !important; padding: 0 11px !important; border: 1px solid var(--tl-border-strong) !important; border-radius: var(--tl-radius-sm) !important; background: var(--tl-surface) !important; color: var(--tl-text) !important; }
.profile-avatar-panel { padding: 15px !important; border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface-subtle) !important; }
.profile-avatar-head { display: flex; align-items: center; gap: 13px; }
.profile-avatar-copy { min-width: 0; }
.profile-avatar-copy h3 { margin: 0; font-size: 14px; }
.profile-avatar-copy p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.profile-avatar-preview { flex: 0 0 64px; width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; border: 1px solid var(--tl-border-strong) !important; border-radius: 10px !important; object-fit: cover !important; }
.profile-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.avatar-preset-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px !important; margin-top: 12px; }
.avatar-preset-grid button { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 52px; padding: 4px !important; border: 1px solid var(--tl-border) !important; border-radius: 8px !important; background: var(--tl-surface) !important; }
.avatar-preset-grid button:hover { border-color: var(--tl-purple) !important; background: var(--tl-surface-subtle) !important; }
.avatar-preset-grid button.is-selected { border-color: var(--tl-purple) !important; background: var(--tl-purple-soft) !important; box-shadow: 0 0 0 2px var(--tl-focus) !important; }
.avatar-preset-grid button img { width: 40px !important; max-width: 40px !important; height: 40px !important; max-height: 40px !important; border-radius: 7px !important; object-fit: cover !important; }
.avatar-helper { margin-top: 9px; color: var(--tl-text-muted); font-size: 11px; }
.profile-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; margin-top: 4px; }
.profile-field { min-width: 0; }
.profile-field--wide { grid-column: 1 / -1; }
.profile-field input, .profile-field select { margin-bottom: 0 !important; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.profile-support-link { min-height: 38px; padding: 8px 12px; border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius-sm); background: var(--tl-surface); color: var(--tl-text); font-weight: 650; text-decoration: none; }
.profile-support-link:hover { border-color: var(--tl-border-strong); background: var(--tl-surface-muted); color: var(--tl-text); }
.profile-privacy-panel { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--tl-border); color: var(--tl-text-secondary); font-size: 12px; }
.profile-privacy-panel h3 { margin: 0; font-size: 14px; }
.profile-privacy-panel p { margin: 4px 0 11px; }
.profile-privacy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#profMsg { min-height: 18px; margin-top: 11px; color: var(--tl-success) !important; font-weight: 650; }
.reveal-reset-note, .reveal-reset-browser-note { padding: 12px; border: 1px solid var(--tl-border); border-radius: var(--tl-radius-md); background: var(--tl-surface-subtle); }
.reveal-reset-summary { padding: 12px; border-radius: 7px; background: var(--tl-purple-soft); color: var(--tl-purple); }
.reveal-reset-actions, .feature-request-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.reveal-reset-confirm { background: var(--tl-danger) !important; border-color: var(--tl-danger) !important; }
.onboard-inner { width: min(980px, calc(100vw - 40px)) !important; max-width: calc(100vw - 40px) !important; max-height: calc(100vh - 40px); padding: 28px 32px 32px !important; overflow: auto; }
.onboard-logo { margin-bottom: 16px !important; }
.onboard-wordmark { display: inline-flex; width: auto; height: auto; align-items: center; gap: 9px; color: var(--tl-text) !important; font-size: 20px !important; font-weight: 800; letter-spacing: -.035em !important; background: none; filter: none; }
.onboard-wordmark::before { content: ""; width: 30px; height: 30px; border-radius: 7px; background: url("images/threadline-mark.svg") center / contain no-repeat; }
.onboard-steps { display: grid !important; grid-template-columns: max-content minmax(24px,1fr) max-content minmax(24px,1fr) max-content minmax(24px,1fr) max-content; align-items: start !important; margin: 6px auto 26px !important; }
.onboard-progress-step { display: grid; justify-items: center; gap: 5px; min-width: 76px; color: var(--tl-text-muted); font-size: 10px; font-weight: 700; text-align: center; }
.onboard-progress-step.is-active { color: var(--tl-text); }
.onboard-progress-step.is-done { color: var(--tl-success); }
.step-dot { width: 30px !important; height: 30px !important; border: 1px solid var(--tl-border-strong) !important; background: var(--tl-surface-muted) !important; color: var(--tl-text-muted) !important; transition: background-color var(--tl-motion-ui) var(--tl-ease-standard), border-color var(--tl-motion-ui) var(--tl-ease-standard), color var(--tl-motion-ui) var(--tl-ease-standard); }
.step-dot.active { border-color: var(--tl-purple) !important; background: var(--tl-purple) !important; color: #fff !important; box-shadow: 0 0 0 4px var(--tl-focus) !important; }
.step-dot.done { border-color: var(--tl-success) !important; background: var(--tl-success) !important; color: #fff !important; }
.step-line { width: 100% !important; height: 1px !important; margin-top: 15px; background: var(--tl-border-strong) !important; }
.step-line.done { background: var(--tl-success) !important; }
.onboard-step.active { animation: tl-onboard-enter var(--tl-motion-content) var(--tl-ease-enter) both; }
.onboard-step > h2, .onboard-step > .sub { text-align: center; }
.onboard-step > .sub { max-width: 620px; margin-right: auto; margin-left: auto; color: var(--tl-text-secondary) !important; }
.plan-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; }
.plan-card { display: grid; grid-template-rows: auto auto auto 1fr auto; padding: 16px !important; border: 1px solid var(--tl-border) !important; border-radius: var(--tl-radius-md) !important; background: var(--tl-surface) !important; box-shadow: none !important; cursor: default !important; transition: border-color var(--tl-motion-ui) var(--tl-ease-standard), background-color var(--tl-motion-ui) var(--tl-ease-standard); }
.plan-card:hover { transform: none !important; border-color: var(--tl-border-strong) !important; background: var(--tl-surface-subtle) !important; box-shadow: none !important; }
.plan-card.popular { border-color: var(--tl-purple) !important; box-shadow: inset 0 0 0 1px var(--tl-purple) !important; }
.plan-name { color: var(--tl-text) !important; font-size: 15px !important; font-weight: 720 !important; }
.plan-price { color: var(--tl-text) !important; font-size: 22px !important; line-height: 1.25 !important; }
.plan-credits, .plan-card li { color: var(--tl-text-secondary) !important; font-size: 12px !important; }
.plan-btn { width: 100%; }
.plan-price:not([data-price-state]) { color: transparent !important; border-radius: 5px; background: linear-gradient(90deg,var(--tl-border),var(--tl-surface-subtle),var(--tl-border)); background-size: 220% 100%; animation: tl-skeleton 1.25s linear infinite; }
.plan-price[data-price-state="unavailable"] { color: var(--tl-text-muted) !important; font-size: 14px !important; }
/* One tier per card; billing cadence is a separate, keyboard-accessible choice. */
.onboard-inner:has(#onboardStep2.active) { width: min(1180px,calc(100vw - 40px)) !important; }
.onboarding-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 32px 0; }
.onboarding-plan-heading h2 { margin: 0 0 8px; font-size: 23px; }
.onboarding-plan-heading .sub { margin: 0; max-width: 530px; color: var(--tl-text-secondary); font-size: 14px; line-height: 1.6; }
.billing-period-toggle { display: flex; flex: 0 0 auto; gap: 4px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--tl-border-strong); border-radius: 10px; background: var(--tl-surface); }
.billing-period-toggle label { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.billing-period-toggle input, .onboarding-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.billing-period-toggle label > span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 7px; color: var(--tl-text-secondary); font-size: 13px; font-weight: 650; transition: color var(--tl-motion-ui) var(--tl-ease-standard), background-color var(--tl-motion-ui) var(--tl-ease-standard), box-shadow var(--tl-motion-ui) var(--tl-ease-standard); }
.billing-period-toggle input:checked + span { background: var(--tl-purple-soft); color: var(--tl-text); box-shadow: inset 0 0 0 1px var(--tl-purple); }
.billing-period-toggle input:focus-visible + span { outline: 2px solid var(--tl-purple); outline-offset: 3px; }
.billing-period-toggle label:hover > span { color: var(--tl-text); }
.billing-period-toggle:disabled { opacity: .55; }
.billing-period-toggle:disabled label { cursor: wait; }
.billing-plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.billing-plan-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--tl-border-strong); border-radius: 12px; background: var(--tl-surface); }
.billing-plan-card h3 { margin: 0 0 20px; font-size: 17px; }
.billing-card-price { font-size: 30px; line-height: 1.2; font-weight: 750; font-variant-numeric: tabular-nums; }
.billing-plan-card p, .billing-plan-card [data-plan-period] { color: var(--tl-text-secondary); font-size: 13px; line-height: 1.6; }
.billing-plan-card .billing-card-charge { min-height: 42px; font-size: 12px; }
.billing-plan-card button, .billing-plan-card .teams-contact-button { margin-top: auto; min-height: 44px; }
.billing-plan-card [hidden] { display: none !important; }
.billing-plan-pro { border-color: var(--tl-purple); }
.billing-pending-change { margin-top: 18px; padding: 16px; border: 1px solid var(--tl-purple); border-radius: 8px; background: var(--tl-purple-soft); }
.billing-pending-change[hidden], .billing-pending-change [hidden] { display: none !important; }
.billing-pending-change p { margin: 0 0 12px; line-height: 1.6; }
#billingPeriod { width: fit-content; margin-top: 20px; }
@media (max-width: 1150px) { .billing-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 580px) {
  .billing-plan-grid { grid-template-columns: minmax(0,1fr); }
  #billingPeriod { width: 100%; }
}
.billing-period-saving { padding: 3px 6px; border-radius: 4px; background: var(--tl-success-soft); color: var(--tl-success); font-size: 10px; font-weight: 750; white-space: nowrap; }
#onboardStep2 .plan-cards { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px !important; margin: 0 0 24px; }
#onboardStep2 .plan-card { min-width: 0; padding: 22px 18px 18px !important; text-align: left; }
#onboardStep2 .plan-name { margin-bottom: 18px; font-size: 17px !important; }
#onboardStep2 .onboarding-price-block { min-height: 91px; }
#onboardStep2 .plan-price { margin: 0; font-size: 30px !important; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
#onboardStep2 .plan-price[data-price-state="unavailable"] { font-size: 16px !important; letter-spacing: normal; }
.onboarding-price-period { min-height: 20px; margin-top: 3px; color: var(--tl-text-secondary); font-size: 12px; line-height: 1.6; }
.onboarding-billing-note { margin-top: 6px; color: var(--tl-text-muted); font-size: 11px; line-height: 1.5; }
#onboardStep2 .plan-credits { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--tl-border); font-weight: 700; }
#onboardStep2 .plan-card ul { margin: 18px 0 24px; padding: 0; }
#onboardStep2 .plan-card li { position: relative; padding-left: 18px; line-height: 1.6; }
#onboardStep2 .plan-card li::before { position: absolute; top: 0; left: 0; }
#onboardStep2 .plan-btn { min-height: 44px; margin: 0; font-size: 13px; }
#onboardStep2 [hidden] { display: none !important; }
@media (max-width: 1050px) {
  #onboardStep2 .plan-cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 20px !important; }
  .onboarding-plan-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .billing-period-toggle { align-self: flex-end; }
}
@media (max-width: 580px) {
  #onboardStep2 .plan-cards { grid-template-columns: minmax(0,1fr) !important; }
  .onboarding-plan-heading { margin: 24px 0; }
  .onboarding-plan-heading h2 { font-size: 21px; }
  .billing-period-toggle { width: 100%; align-self: stretch; }
  .billing-period-toggle label { flex: 1; }
  .billing-period-toggle label > span { padding: 8px; gap: 5px; font-size: 12px; }
}
.free-confirm { display: grid; justify-items: center; padding: 28px; border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius-md); background: var(--tl-success-soft); text-align: center; }
.onboard-confirm-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 14px; background: var(--tl-success); color: #fff; font-size: 25px; }
.onboard-ready-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: var(--tl-shell); box-shadow: 0 10px 28px rgba(17,21,43,.18); }
.onboard-ready-mark img { width: 44px; height: 44px; }
.onboard-welcome { padding: 34px 0 !important; }
.onboard-welcome h2 { color: var(--tl-text) !important; font-size: 28px !important; line-height: 1.2 !important; }
.onboard-welcome p { max-width: 520px; margin: 0 auto 28px; color: var(--tl-text-secondary) !important; font-size: 15px; line-height: 1.6; }
@keyframes tl-onboard-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Auth */
.auth-shell-only { background: var(--tl-shell-deep) !important; }
.auth-shell-only .container { display: grid !important; place-items: center; min-height: 100vh; padding: 28px !important; background: radial-gradient(circle at 18% 8%, var(--tl-shell-raised) 0, transparent 38%), radial-gradient(circle at 92% 90%, rgba(214,74,152,.08), transparent 30%), var(--tl-shell-deep) !important; }
.auth-shell-only .topbar,
.auth-shell-only .sidebar,
.auth-shell-only #app { display: none !important; }
/* Legacy routes can live outside #app; none belongs beneath an auth form. */
body.auth-shell-only .page,
body.app-hydrating .page,
body.onboarding-active .page { display: none !important; }
/* Account dialogs are body children, outside the protected app container. */
body.auth-shell-only :is(.profile-modal, .delete-modal),
body.app-hydrating :is(.profile-modal, .delete-modal),
body.onboarding-active :is(.profile-modal, .delete-modal) { display: none !important; }
#authCard {
  display: grid;
  width: min(980px, 100%);
  min-height: 530px;
  grid-template-columns: minmax(320px,36%) minmax(0,1fr);
  align-content: center;
  column-gap: 42px;
  padding: 28px 40px 28px 28px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 14px !important;
  background: var(--tl-surface) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.28) !important;
  overflow: hidden;
}
body.auth-shell-only:not(.onboarding-active) #authCard { display: grid !important; }
body:not(.auth-shell-only) #authCard,
body.onboarding-active #authCard { display: none !important; }
#authCard .hint { color: var(--tl-text-muted) !important; }
#authCard a.muted { color: var(--tl-purple) !important; }
#authCard .auth-branding {
  position: relative;
  display: flex !important;
  grid-column: 1;
  grid-row: 1 / span 8;
  min-width: 0;
  min-height: 474px;
  align-items: flex-start !important;
  justify-content: space-between;
  flex-direction: column !important;
  gap: 30px !important;
  padding: 34px 30px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: linear-gradient(155deg,var(--tl-shell) 0%,var(--tl-shell) 72%,var(--tl-shell-deep) 100%);
  overflow: hidden;
}
.auth-brand-content { position: relative; z-index: 2; width: 100%; }
.auth-wordmark { color: transparent !important; font-size: 0 !important; }
.auth-wordmark::before { content: ""; display: block; width: min(100%,214px); height: 38px; background: url("images/threadline-wordmark.svg") left center / contain no-repeat; }
.auth-blurb { max-width: 255px; margin-top: 28px; color: var(--tl-text-secondary) !important; font-size: 14px !important; line-height: 1.7; }
.auth-network-motif { position: relative; z-index: 1; width: 100%; height: 142px; opacity: .68; }
.auth-network-motif::before,
.auth-network-motif::after { content: ""; position: absolute; height: 1px; transform-origin: left center; background: linear-gradient(90deg,rgba(255,99,183,.72),rgba(128,103,255,.2)); }
.auth-network-motif::before { left: 16px; bottom: 32px; width: 180px; transform: rotate(-20deg); }
.auth-network-motif::after { left: 93px; bottom: 92px; width: 130px; transform: rotate(23deg); }
.auth-network-motif span { position: absolute; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: var(--tl-shell); box-shadow: 0 0 0 5px rgba(128,103,255,.1); }
.auth-network-motif span:nth-child(1) { left: 10px; bottom: 26px; border-color: var(--tl-pink); }
.auth-network-motif span:nth-child(2) { left: 86px; bottom: 84px; }
.auth-network-motif span:nth-child(3) { right: 18px; bottom: 29px; border-color: var(--tl-purple); }
.auth-network-motif span:nth-child(4) { right: 62px; bottom: 108px; width: 7px; height: 7px; opacity: .7; }
#authCard > :not(.auth-branding) { grid-column: 2; min-width: 0; }
.auth-language-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 28px; }
.auth-language-row label { margin: 0 !important; color: var(--tl-text-muted) !important; font-size: 11px; }
.auth-language-row select { width: auto; min-width: 166px; min-height: 36px; }
.auth-heading { margin-bottom: 14px; }
.auth-eyebrow { margin-bottom: 5px; color: var(--tl-purple); font-size: 10px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
#authCardTitle { margin: 0; font-size: 26px !important; }
.auth-name-fields, .auth-identity-fields, .auth-recovery-grid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.auth-name-fields { display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#authCard label { margin: 11px 0 5px; }
#authCard input { min-height: 44px; }
.required-mark { color: var(--tl-danger); }
#passwordRequirements { margin-top: 8px; font-size: 11px; line-height: 1.5; }
.auth-action-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 8px; margin-top: 16px; }
.auth-action-row button { width: 100%; min-height: 44px; }
.auth-forgot-link { grid-column: 1 / -1; justify-self: end; margin-top: 3px; font-size: 12px; }
.auth-back-link { align-self: center; font-size: 12px; }
#btnCreateAccount, #btnBackToLogin { display: none; }
.auth-forgot-actions { display: none; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-top: 16px; }
.auth-forgot-actions #btnSendReset { min-height: 44px; }
.auth-forgot-actions #btnCancelForgot { min-height: 44px; white-space: nowrap; }
.auth-recovery-fields { display: none; }
.auth-recovery-actions { display: flex; gap: 8px; margin-top: 14px; }
.auth-message { display: none; min-height: 20px; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1.45; }
.auth-message:not(:empty) { display: flex; }
.auth-message::before { flex: 0 0 auto; width: 16px; height: 16px; font-size: 12px; font-weight: 800; text-align: center; }
.auth-message.is-error { border-color: var(--tl-border-strong); background: var(--tl-danger-soft); color: var(--tl-danger); }
.auth-message.is-error::before { content: "!"; border-radius: 50%; background: var(--tl-danger); color: #fff; }
.auth-message.is-success { border-color: var(--tl-border-strong); background: var(--tl-success-soft); color: var(--tl-success); }
.auth-message.is-success::before { content: "✓"; color: var(--tl-success); }
.auth-message.is-neutral { border-color: var(--tl-border); background: var(--tl-surface-subtle); color: var(--tl-text-secondary); }
.auth-message.is-neutral::before { content: "i"; color: var(--tl-purple); }
#authCard[data-auth-mode="signup"] .auth-name-fields { display: grid; animation: tl-auth-enter var(--tl-motion-content) var(--tl-ease-enter) both; }
#authCard[data-auth-mode="signup"] #btnLogin,
#authCard[data-auth-mode="signup"] #btnSignup { display: none; }
#authCard[data-auth-mode="signup"] #btnCreateAccount { display: inline-flex; align-items: center; justify-content: center; }
#authCard[data-auth-mode="signup"] #btnBackToLogin { display: inline; }
#authCard[data-auth-mode="forgot"] #authPasswordField,
#authCard[data-auth-mode="forgot"] #passwordRequirements,
#authCard[data-auth-mode="forgot"] #signupNameFields,
#authCard[data-auth-mode="forgot"] #authActionRow { display: none; }
#authCard[data-auth-mode="forgot"] #forgotPasswordActions { display: grid; animation: tl-auth-enter var(--tl-motion-content) var(--tl-ease-enter) both; }
#authCard[data-auth-mode="recovery"] #authIdentityFields,
#authCard[data-auth-mode="recovery"] #authActionRow,
#authCard[data-auth-mode="recovery"] #signupNameFields { display: none; }
#authCard[data-auth-mode="recovery"] #passwordRecoveryFields { display: block; animation: tl-auth-enter var(--tl-motion-content) var(--tl-ease-enter) both; }
#authCard[data-auth-mode="recovery"] .auth-language-row { margin-bottom: 40px; }
@keyframes tl-auth-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Loading */
.app-hydration-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: auto; padding: 24px; background: radial-gradient(ellipse 380px 260px at 50% 50%, rgba(122,102,251,.09), transparent 100%), var(--tl-surface, #101014) !important; }
body.app-hydrating { overflow: hidden; }
body.app-hydrating #authCard { visibility: hidden; }
#paidConfirm[data-state="pending"] .onboard-confirm-mark { background: var(--tl-surface-subtle) !important; color: var(--tl-purple) !important; }
.app-hydration-overlay[hidden] { display: none !important; }
.app-hydration-overlay [hidden] { display: none !important; }
.app-hydration-card { width: min(360px,100%); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px; }
.app-hydration-card .app-hydration-logo { display: block; width: 220px !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 0 36px; }
.app-hydration-spinner { display: block; flex: none; width: 34px; height: 34px; box-sizing: border-box; border: 2px solid rgba(122,102,251,.18); border-top-color: #a28aff; border-right-color: #cf83dc; border-radius: 50%; animation: app-hydration-spin 1s linear infinite; }
.app-hydration-label { margin-top: 16px; color: var(--tl-text-muted, #a4a1b0); font-size: 13px; line-height: 1.5; }
#appHydrationError { margin: 0 0 20px; color: var(--tl-text-secondary, #d0ccd9); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#appHydrationError:empty { display: none; }
.app-hydration-card:has(#appHydrationError:not(:empty)) .app-hydration-spinner,
.app-hydration-card:has(#appHydrationError:not(:empty)) .app-hydration-label { display: none; }
#btnHydrationRetry { min-height: 44px; padding: 10px 24px; }
@keyframes app-hydration-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-hydration-spinner { animation: none !important; } }
.app-hydration-line, .team-loading-hero, .team-loading-tabs, .team-loading-grid span { background: linear-gradient(90deg,var(--tl-border),var(--tl-surface-subtle),var(--tl-border)) !important; }

/* Responsive */
@media (max-width: 1440px) {
  #app { padding-right: 24px !important; padding-left: 24px !important; }
  #recentSearches[data-item-count="0"], #recentSearches[data-item-count="1"] { grid-template-columns: minmax(0,1fr); }
  #recentSearches[data-item-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #recentSearches[data-item-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #recentSearches[data-item-count="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #billingPlanOptions { grid-template-columns: repeat(3,minmax(150px,1fr)) !important; }
}

@media (max-width: 1280px) {
  :root { --tl-sidebar: 226px; }
  .insights-company-grid[data-company-count="3"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .billing-refill-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 1080px) {
  :root { --tl-sidebar: 248px; }
  .sidebar { transform: translateX(-102%); transition: transform 180ms ease; box-shadow: 18px 0 50px rgba(9,12,25,.18) !important; }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-nav-backdrop { position: fixed; z-index: 990; inset: 0; background: rgba(9,12,25,.45) !important; }
  body.mobile-nav-open .mobile-nav-backdrop {
    position: fixed !important;
    z-index: 990 !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(9,12,25,.45) !important;
  }
  body:not(.auth-shell-only) .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    display: flex !important;
    height: var(--tl-topbar) !important;
    margin: 0 !important;
    padding: 0 20px !important;
    flex-wrap: nowrap !important;
  }
  body:not(.auth-shell-only) .topbar-brand-block { width: auto !important; flex: 0 1 auto !important; }
  body:not(.auth-shell-only) .topbar-actions { position: static !important; width: auto !important; margin-left: auto !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; }
  #app { margin-left: 0 !important; padding: calc(var(--tl-topbar) + 22px) 20px 40px !important; }
  body:not(.auth-shell-only) .container > .page {
    width: 100% !important;
    margin-left: 0 !important;
    padding: calc(var(--tl-topbar) + 22px) 20px 40px !important;
  }
  .mobile-nav-toggle { display: inline-flex !important; }
  #page-settings { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .topbar-greeting, .reveal-reset-trigger span, .profile-btn span { display: none !important; }
  .insights-company-grid[data-company-count="2"],
  .insights-company-grid[data-company-count="3"],
  .billing-balance-grid { grid-template-columns: 1fr; }
  .insights-company-grid[data-company-count="1"] .insights-signal-list { grid-template-columns: 1fr; }
  #recentSearches,
  #recentSearches[data-item-count="2"],
  #recentSearches[data-item-count="3"],
  #recentSearches[data-item-count="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #recentSearches[data-item-count="0"], #recentSearches[data-item-count="1"] { grid-template-columns: minmax(0,1fr); }
  .guide-grid, .brief-details-grid { grid-template-columns: 1fr; }
  .plan-cards { grid-template-columns: 1fr !important; }
  .auth-shell-only .container { place-items: start center; padding: 16px !important; }
  #authCard { width: 100%; min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 18px !important; }
  #authCard .auth-branding { grid-column: 1; grid-row: auto; min-height: 136px; margin-bottom: 20px; padding: 22px !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  #authCard .auth-wordmark::before { width: 172px; height: 31px; }
  #authCard .auth-blurb { max-width: 520px; margin-top: 16px; font-size: 12px !important; line-height: 1.6; }
  #authCard .auth-network-motif { display: none; }
  #authCard > :not(.auth-branding) { grid-column: 1; }
  .auth-language-row { margin-bottom: 22px; }
  #authCard[data-auth-mode="recovery"] .auth-language-row { margin-bottom: 24px; }
}

@media (max-width: 640px) {
  :root { --tl-topbar: 58px; }
  .topbar { padding: 0 12px !important; }
  .topbar-brand-copy, #btnProfileOpen, #topbarCreditsPill { display: none !important; }
  .topbar-actions { margin-left: auto; }
  #app { padding: calc(var(--tl-topbar) + 14px) 12px 28px !important; }
  body:not(.auth-shell-only) .container > .page { padding: calc(var(--tl-topbar) + 14px) 12px 28px !important; }
  .card, .brief-card, .team-section { padding: 16px !important; border-radius: 9px !important; }
  .insights-hero-card { padding: 18px !important; }
  .insights-hero-top, .messaging-page-heading, .messaging-editor-footer, .messaging-save-bar { align-items: flex-start !important; flex-direction: column; }
  .insights-hero-meta { align-items: flex-start; }
  .billing-refill-grid, #recentSearches, #recentSearches[data-item-count] { grid-template-columns: 1fr; }
  #billingPlanOptions { grid-template-columns: 1fr !important; }
  .brief-workspace-head, .brief-queue-card { grid-template-columns: 1fr; }
  .brief-queue-side { justify-items: start; }
  .brief-queue-pills { justify-content: flex-start; }
  .brief-funnel, .team-metric-grid { grid-template-columns: 1fr !important; }
  .connect-code-row { flex-direction: column; }
  .messaging-tone-menu { grid-template-columns: 1fr; }
  .messaging-page-shell, #page-vendor > .card { padding: 18px !important; }
  .auth-name-fields { grid-template-columns: 1fr; gap: 0; }
  .auth-action-row { grid-template-columns: 1fr; }
  .auth-forgot-link { grid-column: 1; justify-self: start; }
  .auth-forgot-actions { grid-template-columns: 1fr; }
  .auth-forgot-actions #btnCancelForgot { width: 100%; }
  .auth-recovery-grid { grid-template-columns: 1fr; }
  .auth-recovery-actions { flex-direction: column; }
  .auth-recovery-actions button { width: 100%; }
  .connection-heading, .connection-disconnect-row { align-items: flex-start; flex-direction: column; }
  .connect-code-row { display: grid; grid-template-columns: 1fr; padding-left: 0; }
  .connect-code-stack { min-width: 0; }
  #btnGenPair, #btnCopy { width: 100%; justify-content: center; }
  .onboard-inner { width: min(100%,calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px); padding: 20px 16px 24px !important; }
  .onboard-progress-step { min-width: 50px; font-size: 9px; }
  .onboard-progress-step span { max-width: 64px; line-height: 1.2; }
  #profileModal > .card { padding: 18px !important; }
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-field--wide { grid-column: auto; }
  .avatar-preset-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .profile-actions > * { flex: 1 1 100%; justify-content: center; }
  .reveal-reset-menu {
    position: fixed !important;
    top: calc(var(--tl-topbar) + 6px) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - var(--tl-topbar) - 18px) !important;
  }
  table { min-width: 640px; }
  #prospectsSection, #emailsSection { overflow-x: auto; }
}

@media (max-width: 390px) {
  .topbar { padding: 0 9px !important; }
  .topbar-actions { gap: 5px !important; }
  .topbar-actions button { padding: 0 8px !important; }
  #app { padding-right: 9px !important; padding-left: 9px !important; }
  .card, .brief-card, .team-section { padding: 14px !important; }
  h2 { font-size: 18px !important; }
  .auth-shell-only .container { padding: 16px !important; }
  #authCard { padding: 18px !important; }
  .auth-language-row { justify-content: space-between; }
  .auth-language-row select { min-width: 0; width: 190px; }
  .onboard-steps { grid-template-columns: max-content minmax(10px,1fr) max-content minmax(10px,1fr) max-content minmax(10px,1fr) max-content; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}