/* =========================================================================
   DanTok UI — clean, authoritative design system (loaded LAST).
   Imposes the mockup design language across every page and wins over the
   accumulated override soup by virtue of source order + !important where needed.

   Language: black DanTok nav · soft-gray body · white panels · teal primary ·
   amber warn · coral destructive · 8px cards · thin dividers · restrained
   shadows · dense tables · mobile-first responsive · clean dark mode.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --ui-bg: #f2f4f5;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f8f9;
  --ui-surface-3: #eef1f3;
  --ui-ink: #16181a;
  --ui-ink-2: #3a4046;
  --ui-muted: #6b7280;
  --ui-muted-2: #9aa1aa;
  --ui-line: #e6e9eb;
  --ui-line-2: #eff2f3;
  --ui-accent: #00b8a9;
  --ui-accent-ink: #067d72;
  --ui-accent-soft: #e6f7f5;
  --ui-accent-line: #b6e8e2;
  --ui-danger: #fe2c55;
  --ui-danger-ink: #c41f3f;
  --ui-danger-soft: #ffe9ee;
  --ui-warn: #c98a00;
  --ui-warn-soft: #fff4d6;
  --ui-ok: #16a34a;
  --ui-ok-soft: #e7f6ec;
  --ui-info: #2a5da8;
  --ui-info-soft: #e9f1fc;
  --ui-purple: #7c5cf6;
  --ui-purple-soft: #efeaff;
  --ui-shadow-sm: 0 1px 2px rgba(16,20,22,.05);
  --ui-shadow: 0 1px 3px rgba(16,20,22,.06), 0 8px 24px rgba(16,20,22,.06);
  --ui-shadow-lg: 0 12px 28px rgba(16,20,22,.10), 0 30px 70px rgba(16,20,22,.12);
  --ui-radius: 10px;
  --ui-radius-sm: 7px;
  --ui-radius-lg: 14px;
  --ui-topbar-h: 56px;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-sidebar-w: clamp(208px, 14vw, 248px);
  --ui-drawer-w: clamp(360px, 24vw, 440px);
}

/* Final campaign drift guard: the dashboard must never preserve horizontal scroll. */
body.tt-app,
body.tt-app .app,
body.tt-app .app > .shell.no-subnav {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.tt-app .app > .shell.no-subnav {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  width: 100% !important;
}

body.tt-app .app > .shell.no-subnav > .sidebar,
body.tt-app .app > .shell.no-subnav > .content,
body.tt-app .app > .shell.no-subnav > .drawer {
  min-width: 0 !important;
}

/* v26 hard override: remove mobile card stacking from page-specific CSS */
@media (max-width: 760px) {
  .projects-page .ka-page .ka-shell,
  .lark-static-page .lark-static-shell,
  .inv-page .inv-shell,
  .creator-static-page .creator-static-shell,
  .tt-app .shell.no-subnav {
    background: #edf5ef !important;
  }

  .projects-page .ka-page .ka-browser,
  .projects-page .ka-page .ka-table-wrap,
  .projects-page .ka-page .ka-campaign-list,
  .lark-static-page .lark-static-panel,
  .lark-static-page .lark-ka-list,
  .inv-page .inv-panel,
  .creator-static-page .creator-static-panel {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .projects-page .ka-page .ka-metrics,
  .lark-static-page .lark-static-metrics,
  .inv-page .inv-metrics {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ui-line) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: transparent !important;
    gap: 0 !important;
  }

  .projects-page .ka-page .ka-metrics .metric,
  .lark-static-page .lark-static-metrics .metric,
  .inv-page .inv-metrics .metric {
    flex: 0 0 92px !important;
    min-height: 46px !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-line-2) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .projects-page .ka-page .ka-campaign-card,
  .lark-static-page .lark-ka-item,
  .inv-page .inv-table tbody tr,
  .creator-static-page .creator-static-card {
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ui-line-2) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .projects-page .ka-page .ka-campaign-card.active,
  .lark-static-page .lark-ka-item.active {
    border-bottom-color: var(--ui-line-2) !important;
    background: rgba(7,155,140,.07) !important;
    box-shadow: inset 2px 0 0 var(--ui-accent) !important;
  }

  .projects-page .ka-page .ka-status-strip,
  .inv-page .inv-status,
  .lark-static-page .lark-status {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: rgba(255,255,252,.42) !important;
    box-shadow: none !important;
  }
}

/* imagegen less-blocky mobile pass — v26 */
@media (max-width: 760px) {
  :root {
    --ui-bg: #edf5ef;
    --ui-surface: rgba(255,255,252,.74);
    --ui-surface-2: rgba(246,250,244,.72);
    --ui-line: rgba(19, 36, 31, .105);
    --ui-line-2: rgba(19, 36, 31, .065);
    --ui-radius: 8px;
    --ui-radius-sm: 7px;
    --ui-shadow-sm: none;
    --ui-shadow: none;
  }

  html,
  body {
    background: #edf5ef !important;
  }

  .home-shell,
  .tt-app .shell,
  .ka-shell,
  .lark-static-shell,
  .inv-shell,
  .creator-static-shell {
    padding: 8px 8px calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
  }

  .topbar,
  .tt-app .topbar,
  .ka-page .topbar,
  .lark-static-page .topbar,
  .inv-page .topbar,
  .creator-static-page .topbar {
    background: #07090a !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.14) !important;
  }

  .home-hero,
  .home-hero-panel,
  .home-tile,
  .toolbar,
  .ka-controls,
  .inv-controls,
  .lark-static-controls,
  .creator-static-controls,
  .ka-browser,
  .table-wrap,
  .ka-table-wrap,
  .inv-table-wrap,
  .lark-static-table-wrap,
  .creator-static-card,
  .lark-card,
  .panel {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background: rgba(255,255,252,.66) !important;
  }

  .home-hero,
  .toolbar,
  .ka-controls,
  .inv-controls,
  .lark-static-controls,
  .creator-static-controls {
    padding: 10px 2px !important;
    border-top: 1px solid var(--ui-line) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: transparent !important;
  }

  .home-hero h1 {
    font-size: 24px !important;
  }

  .home-grid,
  .ka-campaign-list,
  .campaign-list,
  .creator-list,
  .lark-list,
  tbody,
  .ka-table tbody,
  .inv-table tbody,
  .lark-static-table tbody {
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .home-tile,
  .campaign-card,
  .mobile-campaign-card,
  .ka-campaign-card,
  .creator-card,
  .lark-row-card,
  .inv-table tbody tr,
  .ka-table tbody tr,
  .lark-static-table tbody tr,
  tbody tr {
    margin: 0 !important;
    padding: 11px 8px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-line-2) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .home-tile:first-child,
  .campaign-card:first-child,
  .mobile-campaign-card:first-child,
  .ka-campaign-card:first-child,
  tbody tr:first-child {
    border-top: 1px solid var(--ui-line-2) !important;
  }

  .ka-campaign-card.active,
  .campaign-card.active,
  .mobile-campaign-card.active,
  .lark-static-page .lark-ka-item.active {
    background: rgba(7,155,140,.075) !important;
    box-shadow: inset 2px 0 0 var(--ui-accent) !important;
  }

  .metrics,
  .ka-metrics,
  .inv-metrics,
  .lark-metrics,
  .creator-static-metrics,
  .home-hero-panel {
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ui-line) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,252,.58) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .metric,
  .ka-metrics .metric,
  .inv-metrics .metric,
  .lark-metrics .metric,
  .creator-static-metrics .metric,
  .home-signal-card,
  .home-signal-grid > div {
    flex: 0 0 92px !important;
    min-height: 48px !important;
    padding: 7px 10px !important;
    border-right: 1px solid var(--ui-line-2) !important;
    background: transparent !important;
  }

  .metric span,
  .ka-metrics .metric span,
  .inv-metrics .metric span,
  .lark-metrics .metric span {
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  .metric strong,
  .ka-metrics .metric strong,
  .inv-metrics .metric strong,
  .lark-metrics .metric strong {
    font-size: 19px !important;
  }

  .input,
  .select,
  input,
  select {
    background: rgba(255,255,252,.74) !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
  }

  .button,
  button.button,
  a.button {
    border-radius: 8px !important;
  }

  .ka-universal-tabs,
  .tabs,
  .filters,
  .lark-filter-row {
    margin: 0 -2px !important;
    padding: 2px 2px !important;
  }

  .ka-universal-tabs button,
  .tabs button,
  .filter-chip,
  .pill {
    min-height: 27px !important;
    border-radius: 999px !important;
    background: rgba(255,255,252,.5) !important;
  }

  .tt-app .campaign-empty-state,
  .tt-app .empty .campaign-empty-state,
  .compact-empty,
  .empty {
    min-height: 0 !important;
    padding: 18px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .inv-page .inv-table-wrap,
  .creator-static-page .creator-static-section,
  .lark-static-page .lark-static-section {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .dantok-mobile-nav {
    left: 10px !important;
    right: 10px !important;
    height: 56px !important;
    padding: 4px !important;
    border-radius: 16px !important;
    background: rgba(7,9,10,.94) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
  }

  .dantok-mobile-nav a {
    height: 48px !important;
    border-radius: 12px !important;
  }
}

/* imagegen compact mobile pass — v24 */
@media (max-width: 760px) {
  :root {
    --ui-bg: #eef4ee;
    --ui-surface: #fbfcf8;
    --ui-surface-2: #f2f7f1;
    --ui-line: rgba(15, 35, 29, .11);
    --ui-line-2: rgba(15, 35, 29, .07);
    --ui-text: #111714;
    --ui-muted: #65726b;
    --ui-accent: #079b8c;
    --ui-accent-soft: rgba(7, 155, 140, .11);
    --ui-accent-line: rgba(7, 155, 140, .28);
    --ui-danger: #d85c4a;
    --ui-radius: 10px;
    --ui-radius-sm: 8px;
    --ui-shadow-sm: 0 8px 20px rgba(12, 29, 24, .06);
    --ui-shadow: 0 14px 34px rgba(12, 29, 24, .08);
    --ui-topbar-h: 54px;
  }

  html,
  body {
    background:
      linear-gradient(180deg, rgba(247,250,244,.94), rgba(232,241,232,.96)) !important;
  }

  body.home-page,
  body.tt-app,
  body.ka-page,
  body.projects-page,
  body.lark-static-page,
  body.inv-page,
  body.creator-static-page {
    padding-top: var(--ui-topbar-h) !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    color: var(--ui-text) !important;
  }

  .topbar,
  .tt-app .topbar,
  .ka-page .topbar,
  .lark-static-page .topbar,
  .inv-page .topbar,
  .creator-static-page .topbar {
    height: var(--ui-topbar-h) !important;
    min-height: var(--ui-topbar-h) !important;
    padding: 0 10px !important;
    background: rgba(7, 8, 8, .92) !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(18px) !important;
  }

  .tt-brand strong {
    font-size: 19px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
  }

  .tt-brand span {
    max-width: 88px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    color: rgba(255,255,255,.62) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tt-menu,
  .theme-toggle,
  .header-search-toggle,
  .compact-search-toggle,
  .header-creator-search.compact-global-search {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.9) !important;
    box-shadow: none !important;
  }

  .tt-main-nav,
  .tt-account,
  .tt-account-profile {
    display: none !important;
  }

  .button,
  button.button,
  a.button,
  .select,
  .input,
  input,
  select {
    min-height: 36px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    box-shadow: none !important;
  }

  .button,
  button.button,
  a.button {
    padding: 0 12px !important;
    font-weight: 780 !important;
  }

  .button.primary,
  .button.danger,
  button.primary,
  a.button.danger {
    background: #db644f !important;
    color: #fff !important;
    border-color: rgba(120, 37, 24, .22) !important;
  }

  .home-shell,
  .tt-app .shell,
  .ka-shell,
  .lark-static-shell,
  .inv-shell,
  .creator-static-shell {
    width: 100% !important;
    padding: 8px 8px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .home-hero {
    display: grid !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: rgba(251,252,248,.92) !important;
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-shadow-sm) !important;
  }

  .home-hero-copy {
    gap: 5px !important;
  }

  .home-hero .eyebrow {
    font-size: 10px !important;
    letter-spacing: .08em !important;
    color: var(--ui-accent) !important;
  }

  .home-hero h1 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 25px !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
  }

  .home-hero p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: var(--ui-muted) !important;
  }

  .home-quick-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .home-quick-actions .button {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9px !important;
  }

  .home-hero-panel,
  .metrics,
  .ka-metrics,
  .inv-metrics,
  .lark-metrics,
  .creator-static-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 11px !important;
    background: var(--ui-line) !important;
    box-shadow: none !important;
  }

  .home-signal-card,
  .home-signal-grid,
  .metric,
  .ka-metrics .metric,
  .inv-metrics .metric,
  .lark-metrics .metric,
  .creator-static-metrics .metric {
    min-height: 56px !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
  }

  .home-signal-grid {
    display: contents !important;
  }

  .home-signal-card small {
    display: none !important;
  }

  .metric span,
  .home-signal-card span,
  .home-signal-grid span {
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: .06em !important;
    color: var(--ui-muted) !important;
  }

  .metric strong,
  .home-signal-card strong,
  .home-signal-grid strong {
    margin-top: 4px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: var(--ui-text) !important;
  }

  .home-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .home-tile,
  .campaign-card,
  .ka-campaign-card,
  .lark-card,
  .creator-static-card,
  .inv-table tbody tr,
  tbody tr {
    border-radius: 11px !important;
    border: 1px solid var(--ui-line) !important;
    background: rgba(251,252,248,.96) !important;
    box-shadow: var(--ui-shadow-sm) !important;
  }

  .home-tile {
    padding: 10px 11px !important;
    display: grid !important;
    gap: 3px !important;
  }

  .home-tile span,
  .home-tile small {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .home-tile strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .toolbar,
  .ka-controls,
  .inv-controls,
  .lark-static-controls,
  .creator-static-controls {
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ui-line) !important;
    background: rgba(251,252,248,.9) !important;
    box-shadow: var(--ui-shadow-sm) !important;
  }

  .ka-universal-tabs,
  .tabs,
  .filters,
  .lark-filter-row {
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    padding: 0 0 2px !important;
    scrollbar-width: none !important;
  }

  .ka-universal-tabs button,
  .tabs button,
  .filter-chip,
  .pill {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--ui-line) !important;
    color: var(--ui-text) !important;
  }

  .ka-universal-tabs button.active,
  .tabs button.active,
  .filter-chip.active {
    background: var(--ui-accent-soft) !important;
    border-color: var(--ui-accent-line) !important;
    color: #045e55 !important;
  }

  .ka-browser,
  .table-wrap,
  .ka-table-wrap,
  .inv-table-wrap,
  .lark-static-table-wrap {
    border-radius: 12px !important;
    border: 1px solid var(--ui-line) !important;
    background: rgba(251,252,248,.88) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    overflow: hidden !important;
  }

  .ka-campaign-list,
  .campaign-list,
  .creator-list,
  .lark-list {
    gap: 7px !important;
    padding: 7px !important;
  }

  .ka-campaign-card,
  .campaign-card,
  .mobile-campaign-card,
  .creator-card,
  .lark-row-card {
    padding: 10px !important;
    gap: 7px !important;
  }

  .ka-campaign-title,
  .campaign-title,
  .card-title,
  td strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }

  .muted,
  small,
  td,
  .ka-status-strip {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }

  tbody,
  .ka-table tbody,
  .inv-table tbody,
  .lark-static-table tbody {
    display: grid !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  tbody tr,
  .ka-table tbody tr,
  .inv-table tbody tr,
  .lark-static-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
  }

  tbody td,
  .ka-table td,
  .inv-table td,
  .lark-static-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  tbody td[data-label]::before {
    margin-bottom: 2px !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }

  .dantok-mobile-nav {
    display: flex !important;
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 90 !important;
    height: 58px !important;
    padding: 5px !important;
    gap: 3px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(7, 8, 8, .9) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.26) !important;
    backdrop-filter: blur(18px) !important;
  }

  .dantok-mobile-nav a {
    min-width: 0 !important;
    height: 48px !important;
    border-radius: 13px !important;
    gap: 3px !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    text-decoration: none !important;
  }

  .dantok-mobile-nav a span {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .dantok-mobile-nav a.active {
    color: #fff !important;
    background: rgba(7,155,140,.34) !important;
    box-shadow: inset 0 -2px 0 rgba(99, 255, 235, .78) !important;
  }

  .projects-page .ka-metrics,
  .ka-page .ka-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border-radius: 10px !important;
  }

  .projects-page .ka-metrics .metric,
  .ka-page .ka-metrics .metric {
    min-height: 50px !important;
    padding: 6px 6px 6px 8px !important;
  }

  .projects-page .ka-metrics .metric::before,
  .ka-page .ka-metrics .metric::before,
  .metric::before {
    display: none !important;
  }

  .projects-page .ka-metrics .metric span,
  .ka-page .ka-metrics .metric span {
    display: block !important;
    max-width: 100% !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    letter-spacing: .04em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .projects-page .ka-metrics .metric strong,
  .ka-page .ka-metrics .metric strong {
    font-size: 20px !important;
  }

  .tt-app .table-wrap,
  .tt-app .panel,
  .tt-app .campaign-table-wrap {
    min-height: 0 !important;
  }

  .tt-app .campaign-empty-state,
  .tt-app .empty .campaign-empty-state {
    min-height: 0 !important;
    gap: 8px !important;
    padding: 22px 12px !important;
  }

  .tt-app td.empty,
  .tt-app .empty {
    min-height: 0 !important;
  }

  .tt-app .campaign-empty-state strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .tt-app .campaign-empty-state span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .tt-app .campaign-empty-state .button,
  .tt-app .campaign-empty-state button {
    width: min(224px, 100%) !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

html[data-theme="dark"] {
  --ui-bg: #0e1112;
  --ui-surface: #181c1e;
  --ui-surface-2: #20262a;
  --ui-surface-3: #272d31;
  --ui-ink: #eef2f4;
  --ui-ink-2: #c8d0d4;
  --ui-muted: #9aa3ab;
  --ui-muted-2: #6f787f;
  --ui-line: rgba(255,255,255,.10);
  --ui-line-2: rgba(255,255,255,.06);
  --ui-accent: #16d4c4;
  --ui-accent-ink: #5cf0e2;
  --ui-accent-soft: rgba(0,184,169,.16);
  --ui-accent-line: rgba(0,184,169,.40);
  --ui-danger: #fe5c7c;
  --ui-danger-ink: #ff8aa3;
  --ui-danger-soft: rgba(254,44,85,.16);
  --ui-warn: #eab33a;
  --ui-warn-soft: rgba(234,179,58,.16);
  --ui-ok: #34d46b;
  --ui-ok-soft: rgba(52,212,107,.16);
  --ui-info: #6ea3e6;
  --ui-info-soft: rgba(110,163,230,.16);
  --ui-purple: #a89bff;
  --ui-purple-soft: rgba(168,155,255,.16);
  --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --ui-shadow: 0 1px 3px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.34);
  --ui-shadow-lg: 0 12px 28px rgba(0,0,0,.40), 0 30px 70px rgba(0,0,0,.50);
}

/* ---------- Base ---------- */
html, body { background: var(--ui-bg) !important; color: var(--ui-ink) !important; font-family: var(--ui-font) !important; }
body { font-size: 14px !important; line-height: 1.45 !important; -webkit-font-smoothing: antialiased !important; }
* { box-sizing: border-box; }
.muted { color: var(--ui-muted) !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }

/* ---------- Top nav (black, every page, every theme) ---------- */
.tt-app .topbar,
.inv-page .topbar,
.ka-page .topbar,
.lark-ka-page .topbar,
body > .topbar {
  background: #0b0d0e !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
  height: var(--ui-topbar-h) !important;
  padding: 0 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  backdrop-filter: none !important;
}
.tt-nav-left, .tt-nav-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tt-menu {
  color: rgba(255,255,255,.85) !important;
  background: transparent !important; border: 0 !important;
  width: 34px; height: 34px; border-radius: 8px; font-size: 18px; cursor: pointer;
}
.tt-menu:hover { background: rgba(255,255,255,.10) !important; }
.tt-brand { display: inline-flex; align-items: baseline; gap: 8px; color: #fff !important; text-decoration: none !important; }
.tt-brand strong { font-size: 19px !important; font-weight: 850 !important; letter-spacing: -.01em; color: #fff !important; }
.tt-brand span { display: none !important; }
.tt-main-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tt-main-nav::-webkit-scrollbar { display: none; }
.tt-main-nav a {
  position: relative; color: rgba(255,255,255,.62) !important;
  font-size: 14px !important; font-weight: 650 !important;
  padding: 0 12px !important; height: var(--ui-topbar-h) !important;
  display: inline-flex !important; align-items: center; text-decoration: none !important;
  white-space: nowrap; transition: color .15s ease;
}
.tt-main-nav a:hover { color: #fff !important; }
.tt-main-nav a.active { color: #fff !important; }
.tt-main-nav a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--ui-accent) !important;
}

/* Header search — clean pill */
.header-creator-search.compact-global-search {
  width: 36px !important; min-width: 36px !important; max-width: 36px !important;
  height: 34px !important; flex: 0 0 36px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important; padding: 0 !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; transition: width .2s ease, max-width .2s ease, background .15s ease !important;
}
.header-creator-search.compact-global-search.expanded {
  width: min(280px, 42vw) !important; min-width: min(280px, 42vw) !important; max-width: min(280px, 42vw) !important;
  background: var(--ui-surface) !important; border-color: var(--ui-line) !important; padding: 2px 3px 2px 4px !important;
}
.header-creator-search:not(.expanded) .global-creator-input,
.header-creator-search:not(.expanded) .creator-search-button { display: none !important; }
.compact-search-toggle {
  width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
  background: transparent !important; color: #fff !important; border: 0 !important;
  font-size: 15px !important; cursor: pointer; border-radius: 999px !important;
}
.header-creator-search.expanded .compact-search-toggle { color: var(--ui-muted) !important; }
.header-creator-search.expanded .global-creator-input {
  flex: 1 1 auto; min-width: 0; height: 28px; border: 0 !important; outline: none !important;
  background: transparent !important; color: var(--ui-ink) !important; font-size: 13px !important;
}
.header-creator-search.expanded .creator-search-button {
  height: 28px !important; padding: 0 12px !important; font-size: 12px !important; font-weight: 700 !important;
  background: var(--ui-accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; cursor: pointer;
}

/* Theme toggle */
.theme-toggle {
  width: 34px !important; height: 34px !important; border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important; background: rgba(255,255,255,.08) !important;
  color: #fff !important; cursor: pointer; display: inline-grid; place-items: center; font-size: 14px;
  transition: background .15s ease, transform .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.18) !important; transform: scale(1.05); }

/* Leo account */
.tt-account.tt-account-profile {
  display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 1px !important; padding: 5px 12px !important; min-height: 38px !important;
  background: rgba(255,255,255,.10) !important; border-radius: 10px !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.tt-account.tt-account-profile strong { font-size: 13px !important; font-weight: 750 !important; color: #fff !important; max-width: none !important; }
.tt-account.tt-account-profile small { display: block !important; font-size: 10px !important; font-weight: 600 !important; color: rgba(255,255,255,.58) !important; line-height: 1.1 !important; }
@media (max-width: 720px) { .tt-account.tt-account-profile { display: none !important; } }

/* Final shared header controls: compact, CSS-drawn icons. */
.topbar .tt-menu {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  color: transparent !important;
  font-size: 0 !important;
}
.topbar .tt-menu::before {
  content: "" !important;
  width: 14px !important;
  height: 10px !important;
  border-top: 2px solid rgba(255,255,255,.88) !important;
  border-bottom: 2px solid rgba(255,255,255,.88) !important;
  box-shadow: 0 4px 0 rgba(255,255,255,.88) !important;
}
.topbar .header-creator-search.compact-global-search {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
}
.topbar .header-creator-search.compact-global-search.expanded {
  width: min(280px, calc(100vw - 24px)) !important;
  min-width: min(280px, calc(100vw - 24px)) !important;
  max-width: min(280px, calc(100vw - 24px)) !important;
}
.topbar .compact-search-toggle {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  color: transparent !important;
  font-size: 0 !important;
}
.topbar .compact-search-toggle::before {
  content: "" !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid currentColor !important;
  border-color: rgba(255,255,255,.9) !important;
  border-radius: 999px !important;
  transform: translate(-1px, -1px) !important;
}
.topbar .compact-search-toggle::after {
  content: "" !important;
  position: absolute !important;
  width: 7px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  transform: translate(7px, 7px) rotate(45deg) !important;
}
.topbar .header-creator-search.expanded .compact-search-toggle::before {
  border-color: var(--ui-muted) !important;
}
.topbar .header-creator-search.expanded .compact-search-toggle::after {
  background: var(--ui-muted) !important;
}
.topbar .theme-toggle {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  color: #fff !important;
  font-size: 0 !important;
}
.topbar .theme-toggle::before {
  content: none !important;
  display: none !important;
}
.topbar .theme-toggle .header-icon {
  width: 17px !important;
  height: 17px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

/* ---------- Layout shells ---------- */
.tt-app .shell, .ka-page .ka-shell, .inv-page .inv-shell, .lark-ka-page .lark-shell {
  max-width: none !important; margin: 0 !important;
}
.tt-app .shell.no-subnav {
  min-height: calc(100vh - var(--ui-topbar-h)) !important;
  padding: 6px !important; gap: 0 !important;
  grid-template-columns: var(--ui-sidebar-w) 2px minmax(0,1fr) 2px var(--ui-drawer-w) !important;
}
.tt-app .sidebar, .tt-app .content, .tt-app .drawer,
.ka-page .ka-campaign-list, .ka-page .ka-table-wrap,
.inv-page .inv-table-wrap, .lark-ka-page .lark-shell > section,
.creator-intel-card {
  background: var(--ui-surface) !important; color: var(--ui-ink) !important;
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.tt-app .sidebar { padding: 12px 10px !important; gap: 4px !important; display: flex; flex-direction: column; }
.tt-app .content { padding: 10px !important; gap: 8px !important; display: flex; flex-direction: column; min-width: 0; }
.tt-app .sidebar-resizer, .tt-app .drawer-resizer, .ka-sidebar-resizer {
  width: 2px !important; opacity: 0 !important; transition: opacity .12s ease; background: transparent; cursor: col-resize;
}
.tt-app .shell:hover .sidebar-resizer, .tt-app .shell:hover .drawer-resizer,
.tt-app .sidebar-resizer:hover, .tt-app .drawer-resizer:hover,
.ka-page .ka-browser:hover .ka-sidebar-resizer, .ka-page .ka-sidebar-resizer:hover { opacity: 1 !important; }
.tt-app .sidebar-resizer:hover::before, .tt-app .drawer-resizer:hover::before,
.ka-page .ka-sidebar-resizer:hover::before { background: var(--ui-accent) !important; opacity: 1 !important; }

/* ---------- Sidebar filters ---------- */
.sidebar-section-label {
  font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--ui-muted) !important;
  padding: 6px 8px 4px !important;
}
.tt-app .nav-item {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px; padding: 9px 12px !important; border: 0 !important; border-radius: 9px !important;
  background: transparent !important; color: var(--ui-ink-2) !important;
  font-size: 13.5px !important; font-weight: 650 !important; cursor: pointer; text-align: left !important;
  transition: background .12s ease;
}
.tt-app .nav-item:hover { background: var(--ui-surface-2) !important; }
.tt-app .nav-item.active { background: var(--ui-accent-soft) !important; color: var(--ui-accent-ink) !important; }
.tt-app .nav-item span {
  font-size: 11px !important; font-weight: 750 !important; color: var(--ui-muted) !important;
  background: var(--ui-surface-2) !important; padding: 1px 7px !important; border-radius: 999px !important; min-width: 22px; text-align: center;
}
.tt-app .nav-item.active span { background: #fff !important; color: var(--ui-accent-ink) !important; }
html[data-theme="dark"] .tt-app .nav-item.active span { background: var(--ui-surface-3) !important; }

/* ---------- Toolbar / inputs / buttons ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; }
.input, .select, .global-creator-input {
  background: var(--ui-surface) !important; color: var(--ui-ink) !important;
  border: 1px solid var(--ui-line) !important; border-radius: 9px !important;
  padding: 8px 11px !important; font-size: 13px !important; height: 36px; outline: none !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft) !important; }
.input::placeholder { color: var(--ui-muted-2) !important; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ui-ink-2); cursor: pointer; }
.check input { accent-color: var(--ui-accent); }
.fixed-limit { font-size: 12px; color: var(--ui-muted); }
.bridge-status, #health { display: none !important; }

.button, .btn, .tt-app .button, .ka-page .button, .inv-page .button, .lark-ka-page .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ui-line);
  background: var(--ui-surface); color: var(--ui-ink); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .08s ease; white-space: nowrap;
}
.button:hover, .tt-app .button:hover { background: var(--ui-surface-2) !important; }
.button:active { transform: scale(.98); }
.button.primary, .tt-app .button.primary, .button.creator-search-button, .tt-app .button.creator-search-button {
  background: var(--ui-accent) !important; color: #fff !important; border-color: transparent !important;
}
.button.primary:hover, .tt-app .button.primary:hover { background: var(--ui-accent-ink) !important; }
.button.danger, .tt-app .button.danger { background: var(--ui-danger) !important; color: #fff !important; border-color: transparent !important; }
.button.danger:hover, .tt-app .button.danger:hover { background: var(--ui-danger-ink) !important; }
.button:disabled, .tt-app .button:disabled { opacity: .5; cursor: not-allowed; }
.compact-button, .ghost-button { background: transparent !important; border: 1px solid var(--ui-line) !important; color: var(--ui-muted) !important; height: 30px; padding: 0 10px; font-size: 12px; }
.creator-search-button { height: 28px !important; padding: 0 12px !important; }

/* ---------- Metric cards ---------- */
.metrics, .ka-metrics, .lark-metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.metric, .metric-card, .ka-metrics .metric, .lark-metrics-row > div {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  padding: 12px 14px !important; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--ui-shadow-sm) !important;
}
.metric span, .metric-card span, .lark-metrics-row > div > span {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted) !important;
}
.metric strong, .metric-card strong, .lark-metrics-row > div > strong {
  font-size: 24px !important; font-weight: 850 !important; color: var(--ui-ink) !important; line-height: 1.1;
}

/* ---------- Tables (dense, clean, readable in both themes) ---------- */
.table-wrap, .ka-table-wrap, .inv-table-wrap {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important; overflow: auto; box-shadow: var(--ui-shadow-sm) !important;
}
table, .ka-table, .inv-table { width: 100%; border-collapse: collapse; font-size: 13px !important; }
thead th, .ka-table thead th, .inv-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ui-surface-2) !important; color: var(--ui-muted) !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase;
  text-align: left; padding: 10px 12px !important; border-bottom: 1px solid var(--ui-line) !important;
  white-space: nowrap;
}
tbody td, .ka-table tbody td, .inv-table tbody td {
  padding: 11px 12px !important; border-bottom: 1px solid var(--ui-line-2) !important;
  color: var(--ui-ink) !important; vertical-align: middle;
}
tbody tr, .ka-table tbody tr, .inv-table tbody tr { background: var(--ui-surface) !important; transition: background .1s ease; }
tbody tr:hover, .ka-table tbody tr:hover, .inv-table tbody tr:hover { background: var(--ui-surface-2) !important; }
tbody tr.selected, .ka-table tbody tr.selected, .inv-table tbody tr.selected { background: var(--ui-accent-soft) !important; box-shadow: inset 3px 0 0 var(--ui-accent); }
tbody tr:last-child td, .ka-table tbody tr:last-child td { border-bottom: 0 !important; }
.empty { color: var(--ui-muted) !important; text-align: center; padding: 28px 16px !important; }
.campaign-empty-state { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.empty-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Campaign row cells */
.project-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.thumb { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: 0 0 38px; background: var(--ui-surface-3); border: 1px solid var(--ui-line); }
.thumb.image { background: var(--ui-surface-3); }
.thumb:not(.image) { display: grid; place-items: center; color: transparent; font-size: 0; }
.thumb:not(.image)::after { content: none; }
.project-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.primary-text { font-weight: 750; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.secondary-text, .campaign-row-brand { font-size: 12px; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchable-ids { display: none !important; }
.remaining-action { background: transparent; border: 0; color: var(--ui-ink); font-weight: 750; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.remaining-action:hover { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }

/* Pay + status pills */
.pay-badge, .status, .status-pill, .pill {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 750; border: 1px solid transparent; white-space: nowrap; cursor: default;
}
.pay-badge { cursor: pointer; }
.pay-badge.base, .pay-badge.not-base { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.pay-badge.loading, .pay-badge.unknown { background: var(--ui-surface-2); color: var(--ui-muted); }
.status.open, .status-pill.accent { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.status.active { background: var(--ui-ok-soft); color: var(--ui-ok); }
.status.muted, .status-pill.muted { background: var(--ui-surface-2); color: var(--ui-muted); }
.status.warn, .status-pill.warn { background: var(--ui-warn-soft); color: var(--ui-warn); }
.status.danger { background: var(--ui-danger-soft); color: var(--ui-danger-ink); }
.cell-window .pill.warn, .invite-window .pill { font-size: 11px; }
.cell-window .pill.danger, .pill.danger { background: var(--ui-danger-soft); color: var(--ui-danger-ink); }

/* ---------- Right detail drawer ---------- */
.tt-app .drawer { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.drawer-grabber { display: none !important; }
.drawer-head, .drawer-head-v2 {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px 12px !important; border-bottom: 1px solid var(--ui-line) !important; background: var(--ui-surface) !important;
}
.drawer-head .eyebrow, .drawer-head-v2 .eyebrow { display: none !important; }
.drawer-head h2, .drawer-head-v2 h2 { margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.25; color: var(--ui-ink); }
.drawer-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.drawer-close, .drawer-icon-btn {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--ui-line);
  background: var(--ui-surface-2); color: var(--ui-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.drawer-close:hover, .drawer-icon-btn:hover { background: var(--ui-surface-3); color: var(--ui-ink); }
.drawer-body { padding: 12px 16px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }

/* Selected campaign summary card */
.campaign-summary, .drawer-campaign-card {
  display: flex; align-items: center; gap: 12px; padding: 12px !important;
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; background: var(--ui-surface-2) !important;
}
.detail-logo, .drawer-brand-logo {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 44px;
  background: var(--ui-surface); border: 1px solid var(--ui-line);
}
.detail-logo.fallback, .drawer-brand-logo.empty { display: block; }
.campaign-summary-text, .drawer-campaign-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.campaign-summary-text strong, .drawer-campaign-copy strong { font-size: 14px; font-weight: 800; color: var(--ui-ink); }
.campaign-summary-text span, .campaign-summary-text small, .drawer-campaign-copy span { font-size: 11.5px; color: var(--ui-muted); }
.meta-grid, .drawer-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.meta, .drawer-stat {
  padding: 9px 11px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.meta span, .drawer-stat span { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.meta strong, .drawer-stat strong { font-size: 12.5px; font-weight: 700; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-meta { grid-template-columns: 1fr; }
.campaign-details, .drawer-more-details { border: 0; background: transparent; }
.campaign-details summary, .drawer-more-details summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ui-accent-ink); padding: 0; }

/* Panels inside drawer */
.panel { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; box-shadow: none !important; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.panel-head h3 { margin: 0; font-size: 13px; font-weight: 800; color: var(--ui-ink); }
.panel-head .muted { font-size: 11.5px; }
.tabs { display: flex; gap: 4px; padding: 0 10px 8px; }
.tab {
  border: 0; background: transparent; padding: 7px 11px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--ui-muted);
}
.tab.icon-tab {
  width: 30px;
  min-width: 30px;
  padding: 7px 0;
  text-align: center;
}
.tab.active { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.creator-controls { display: flex; gap: 8px; padding: 0 12px 10px; }
.creator-controls .input { flex: 1 1 auto; min-width: 0; }
.creator-list, .invite-queue { padding: 0 12px 12px; max-height: 320px; overflow: auto; }
.compact-empty { font-size: 12.5px; color: var(--ui-muted); padding: 16px 8px; text-align: center; }
.button-row { display: flex; gap: 8px; padding: 0 12px 12px; }
.button-row .button { flex: 1; }
.invite-status-card { margin: 0 12px 12px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface-2); display: flex; flex-direction: column; gap: 3px; }
.invite-status-card strong { font-size: 13px; }
.invite-status-card span { font-size: 12px; color: var(--ui-muted); }
.invite-status-card.idle { border-style: dashed; }
.result, #inviteResult, #debugOutput, pre.result {
  margin: 0 12px 12px; padding: 12px; background: var(--ui-surface-3); border: 1px solid var(--ui-line); border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--ui-ink-2); white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto;
}
details.panel.debug { margin: 0; }
.debug-summary { display: flex; justify-content: space-between; padding: 12px 14px; cursor: pointer; font-size: 12.5px; font-weight: 700; }

/* ---------- Projects (ka) page ---------- */
.ka-page .ka-controls { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.ka-page .ka-browser { display: grid; grid-template-columns: clamp(240px,18vw,300px) 2px minmax(0,1fr); gap: 0; align-items: stretch; }
.ka-page .ka-campaign-list { display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow: auto; }
.ka-campaign-card {
  display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.ka-campaign-card:hover { background: var(--ui-surface-2); }
.ka-campaign-card.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 3px 0 0 var(--ui-accent); }
.ka-campaign-card .thumb { width: 40px; height: 40px; }
.ka-campaign-card strong { font-size: 13px; font-weight: 750; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-campaign-card .muted, .ka-campaign-card span { font-size: 11.5px; color: var(--ui-muted); }
.ka-selected-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.ka-selected-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ui-ink); }
.ka-universal-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 8px; }
.ka-universal-tabs button {
  border: 0; background: var(--ui-surface-2); color: var(--ui-muted); padding: 6px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.ka-universal-tabs button.active { background: var(--ui-accent); color: #fff; }
.ka-universal-tabs button.active strong { background: transparent; color: #fff; }
.ka-universal-tabs button strong { background: var(--ui-surface-3); color: var(--ui-ink-2); padding: 1px 6px; border-radius: 999px; font-size: 10.5px; }
.ka-back-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 0; border: 0; background: transparent;
  color: var(--ui-accent-ink); font-size: 13px; font-weight: 700; cursor: pointer;
}
.ka-back-link:hover { text-decoration: underline; }
.ka-summary-chip, .ka-ratio-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ui-line); background: var(--ui-surface);
  padding: 5px 10px; border-radius: 999px; font-size: 12px; color: var(--ui-ink-2); cursor: pointer;
}
.ka-summary-chip span, .ka-ratio-chip span { color: var(--ui-muted); }
.ka-summary-chip strong, .ka-ratio-chip strong { color: var(--ui-ink); font-weight: 750; }
.ka-summary-chip.active, .ka-ratio-chip.active { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent-ink); }

/* Projects polish — toolbar grid, status wrap, action buttons (no clip) */
.ka-page .ka-controls .toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "search refresh" "tabs tabs"; align-items: center; gap: 10px 12px; flex-wrap: nowrap !important; }
.ka-page .ka-controls .toolbar > .search-with-clear { grid-area: search; width: 100%; margin: 0; }
.ka-page .ka-controls .toolbar > .search-with-clear .input { width: 100%; }
.ka-page .ka-controls .toolbar > #scrapeBtn { grid-area: refresh; justify-self: end; margin: 0; }
.ka-page .ka-controls .toolbar > .ka-universal-tabs { grid-area: tabs; width: 100%; margin: 0; }
.ka-page .ka-universal-tabs { display: flex !important; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; }
.ka-page .ka-universal-tabs::-webkit-scrollbar { display: none; }
.ka-page .ka-universal-tabs button { flex: 0 0 auto; white-space: nowrap; }
.ka-page .ka-table .creator-status { white-space: normal !important; line-height: 1.25; padding: 3px 8px; }
.ka-page .project-row-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 6px; align-items: center; }
.ka-page .project-row-actions .project-action-note { font-size: 11px; color: var(--ui-muted); line-height: 1.3; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.ka-page .project-row-actions .project-withdraw-btn,
.ka-page .project-row-actions .project-reassign-btn { width: 100%; height: 27px; padding: 0 8px; font-size: 11px; border-radius: 7px; }
@media (min-width: 901px) {
  .ka-page .ka-table { table-layout: fixed !important; }
  .ka-page .ka-table th:nth-child(1), .ka-page .ka-table td:nth-child(1) { width: 24% !important; }
  .ka-page .ka-table th:nth-child(2), .ka-page .ka-table td:nth-child(2) { width: 16% !important; }
  .ka-page .ka-table th:nth-child(3), .ka-page .ka-table td:nth-child(3) { width: 15% !important; }
  .ka-page .ka-table th:nth-child(4), .ka-page .ka-table td:nth-child(4) { width: 9% !important; }
  .ka-page .ka-table th:nth-child(5), .ka-page .ka-table td:nth-child(5) { width: 13% !important; }
  .ka-page .ka-table th:nth-child(6), .ka-page .ka-table td:nth-child(6) { width: 23% !important; }
  .ka-page .ka-table thead th { white-space: normal !important; line-height: 1.25 !important; }
}

/* ---------- Lark page ---------- */
.lark-ka-page { background: var(--ui-bg) !important; color: var(--ui-ink) !important; }
.lark-ka-page .lark-shell { width: min(1500px, calc(100vw - 24px)); margin: 0 auto; padding: 12px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.lark-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px !important;
  background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; box-shadow: var(--ui-shadow-sm) !important;
}
.lark-kicker { color: var(--ui-accent-ink) !important; font-size: 10px !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.lark-hero h1 { margin: 4px 0 0; font-size: 22px !important; font-weight: 850 !important; color: var(--ui-ink) !important; }
.lark-hero h1 span { color: var(--ui-muted); font-weight: 700; }
.lark-hero h1::first-letter { color: inherit !important; }
.lark-hero p:not(.lark-kicker) { display: none !important; }
.lark-hero-actions { display: flex; gap: 8px; }
.lark-date-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.lark-date-strip button {
  border: 1px solid var(--ui-line); background: var(--ui-surface); border-radius: var(--ui-radius); padding: 8px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 92px;
}
.lark-date-strip button.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.lark-date-strip button strong { font-size: 13px; color: var(--ui-ink); }
.lark-date-strip button span { font-size: 11px; color: var(--ui-muted); }
.lark-connected-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.lark-check { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 800; }
.lark-connected-card strong { color: var(--ui-ink); }
.lark-connected-card span, .lark-connected-card #larkConnectedMeta { color: var(--ui-muted); font-size: 12px; }
.lark-metrics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lark-metrics-row > div { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.lark-metrics-row strong { font-size: 22px; font-weight: 850; color: var(--ui-ink); }
.lark-metrics-row span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-muted); }
.lark-workspace { display: grid; grid-template-columns: minmax(0,1fr) clamp(320px, 26vw, 400px); gap: 12px; }
.lark-responses-panel, .lark-automation-panel { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; padding: 14px 16px; box-shadow: var(--ui-shadow-sm) !important; }
.lark-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lark-section-head h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ui-ink); }
.lark-section-head p { margin: 0; font-size: 12px; color: var(--ui-muted); }
.lark-response-list { display: flex; flex-direction: column; gap: 8px; }
.lark-response-row { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.lark-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: 0 0 40px; background: var(--ui-surface-3); }
.lark-avatar.fallback { display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--ui-muted); }
.lark-response-main { flex: 1; min-width: 0; }
.lark-response-head { display: flex; align-items: baseline; gap: 8px; }
.lark-response-head strong { font-size: 13.5px; font-weight: 800; color: var(--ui-ink); }
.lark-response-head span { font-size: 11.5px; color: var(--ui-muted); }
.lark-priority-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lark-priority-chip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--ui-radius); border: 1px solid var(--ui-line); background: var(--ui-surface-2); min-width: 220px; }
.lark-priority-chip.first { background: var(--ui-danger-soft); border-color: transparent; }
.lark-priority-chip.second { background: var(--ui-accent-soft); border-color: transparent; }
.lark-priority-chip.unmatched { background: var(--ui-warn-soft); border-color: transparent; }
.lark-priority-chip::before { display: none !important; }
.lark-brand-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 34px; background: var(--ui-surface); border: 1px solid var(--ui-line); }
.lark-brand-thumb.empty { display: block; }
.lark-priority-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lark-priority-copy small { font-size: 10.5px; font-weight: 800; opacity: .85; }
.lark-priority-copy b { font-size: 12.5px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lark-priority-copy em { font-size: 11px; color: var(--ui-muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lark-chip-actions { display: flex; gap: 6px; margin-top: 4px; }
.lark-chip-actions button { height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.lark-chip-actions button:disabled { opacity: .5; }
.lark-row-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lark-row-counts span { font-size: 10px; text-transform: uppercase; color: var(--ui-muted); }
.lark-row-counts b { font-size: 18px; font-weight: 850; color: var(--ui-ok); }
.lark-queue-card { padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface-2); margin-bottom: 10px; }
.lark-queue-title { display: flex; justify-content: space-between; align-items: center; }
.lark-queue-title strong { font-size: 13px; font-weight: 800; }
.lark-queue-title b { font-size: 18px; font-weight: 850; color: var(--ui-accent-ink); }
.lark-queue-card p { margin: 6px 0 0; font-size: 12px; color: var(--ui-muted); }
.lark-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.lark-action-grid .button { height: 40px; }
.lark-sync-pill { background: var(--ui-accent-soft) !important; color: var(--ui-accent-ink) !important; border: 1px solid var(--ui-accent-line) !important; }
.lark-log-panel { margin-top: 10px; }
.lark-log-panel summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--ui-muted); }
.lark-log-panel pre { margin-top: 8px; padding: 10px; background: var(--ui-surface-3); border: 1px solid var(--ui-line); border-radius: 8px; font-size: 11px; overflow: auto; }

/* ---------- Invitations page ---------- */
.inv-campaign-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.inv-thumb, .inv-page .thumb { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: 0 0 38px; background: var(--ui-surface-3); border: 1px solid var(--ui-line); }
.inv-campaign-copy { min-width: 0; }
.inv-campaign-copy strong { display: block; font-weight: 750; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-campaign-copy small { display: block; font-size: 11px; color: var(--ui-muted); }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 12px 14px; box-shadow: var(--ui-shadow-lg); display: flex; flex-direction: column; gap: 3px; max-width: 340px; }
.toast strong { font-size: 13px; font-weight: 800; }
.toast span { font-size: 12px; color: var(--ui-muted); }
.toast.success { border-left: 3px solid var(--ui-ok); }
.toast.error { border-left: 3px solid var(--ui-danger); }
.toast.warn { border-left: 3px solid var(--ui-warn); }
.confirm-host[hidden] { display: none !important; }
.confirm-host {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 18px;
}
.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 13, 15, .48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.confirm-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-lg);
}
.confirm-card h2 {
  margin: 3px 0 0;
  font-size: 19px;
  line-height: 1.14;
  font-weight: 850;
  color: var(--ui-ink);
}
.confirm-card p {
  margin: 8px 0 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ---------- Creator intel panel ---------- */
.creator-intel-panel { position: relative; z-index: 5; }
.creator-intel-card { padding: 16px !important; }
.creator-intel-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.creator-intel-avatar { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; }
.creator-intel-avatar.fallback { display: grid; place-items: center; background: var(--ui-surface-3); font-weight: 800; color: var(--ui-muted); }
.creator-intel-name-row { display: flex; align-items: center; justify-content: space-between; }
.creator-intel-name-row h2 { margin: 0; font-size: 18px; font-weight: 850; }
.creator-intel-close { border: 1px solid var(--ui-line); background: var(--ui-surface-2); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.creator-intel-handle { color: var(--ui-muted); font-size: 13px; }
.creator-intel-idline { display: flex; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--ui-muted); }
.creator-intel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 14px; }
.creator-intel-stats > div { background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.creator-intel-stats span { font-size: 10px; text-transform: uppercase; color: var(--ui-muted); font-weight: 700; }
.creator-intel-stats strong { font-size: 16px; font-weight: 800; }
.creator-intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.creator-intel-section { background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 12px; }
.creator-intel-section h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .04em; }
.intel-chip { display: inline-flex; gap: 4px; align-items: center; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; margin: 0 4px 4px 0; }
.intel-chip b { color: var(--ui-muted); }
.country-bars, .agency-performance-list { display: flex; flex-direction: column; gap: 6px; }
.country-row { display: grid; grid-template-columns: 60px 1fr 44px; align-items: center; gap: 8px; font-size: 11.5px; }
.country-track { height: 6px; background: var(--ui-surface-3); border-radius: 999px; overflow: hidden; }
.country-track i { display: block; height: 100%; background: var(--ui-accent); }
.agency-performance-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 12px; }
.agency-performance-row small { grid-column: 2; color: var(--ui-muted); font-size: 10.5px; }

/* ---------- Progress bars ---------- */
progress, .progress { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; accent-color: var(--ui-accent); }

/* ---------- Responsive / mobile ---------- */
@media (max-width: 1100px) {
  .tt-app .shell.no-subnav { grid-template-columns: var(--ui-sidebar-w) 2px minmax(0,1fr) !important; }
  .tt-app .drawer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 86vh; z-index: 60; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .22s ease; box-shadow: var(--ui-shadow-lg); }
  .tt-app .shell.sheet-open .drawer { transform: translateY(0); }
  .tt-app .drawer-resizer { display: none !important; }
  .lark-workspace { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .tt-app .shell.no-subnav { grid-template-columns: minmax(0,1fr) !important; padding: 0 !important; gap: 0 !important; }
  .tt-app .sidebar, .tt-app .sidebar-resizer, .tt-app .drawer-resizer { display: none !important; }
  .tt-app .sidebar.sidebar-open, .tt-app .shell.sidebar-open .sidebar {
    display: flex !important; position: fixed; z-index: 55; top: calc(var(--ui-topbar-h) + 8px); left: 8px; bottom: 8px; width: min(86vw, 300px); box-shadow: var(--ui-shadow-lg);
  }
  .tt-app .content { border-radius: 0 !important; }
  .tt-app .toolbar { border-radius: 0 !important; }
  .tt-app .toolbar .input { width: 100%; }
  .tt-main-nav { -webkit-overflow-scrolling: touch; }
  .ka-page .ka-browser { grid-template-columns: 1fr !important; }
  .ka-page .ka-sidebar-resizer { display: none !important; }
  .ka-page .ka-campaign-list { position: fixed; z-index: 55; top: calc(var(--ui-topbar-h) + 8px); left: 8px; bottom: 8px; width: min(86vw, 320px); transform: translateX(calc(-100% - 16px)); transition: transform .18s ease; box-shadow: var(--ui-shadow-lg); }
  .ka-page .ka-browser.sidebar-open .ka-campaign-list { transform: translateX(0); }
  .lark-metrics-row { grid-template-columns: repeat(2, 1fr) !important; }
  .lark-action-grid { grid-template-columns: 1fr !important; }
  .inv-page .inv-shell { padding: 8px !important; }
}
@media (max-width: 640px) {
  .tt-brand strong { font-size: 17px !important; }
  .lark-metrics-row { grid-template-columns: 1fr 1fr !important; }
  .meta-grid, .drawer-stat-grid { grid-template-columns: 1fr !important; }
  thead { display: none; }
  tbody td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--ui-muted); margin-bottom: 3px; }
  tbody tr { display: block; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); margin-bottom: 8px; padding: 8px; }
  tbody td { display: block; border: 0 !important; padding: 4px 0 !important; }
}

/* ---------- Misc cleanup ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 54; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.shell.sheet-open .sheet-backdrop, .shell.sidebar-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
.resizing { cursor: col-resize; user-select: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hidden { display: none !important; }

/* Projects production loading state: visible, non-blocking cache/API status */
.ka-status-strip {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  margin-top: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: var(--ui-shadow-sm);
}
.ka-status-strip::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-soft);
}

/* Premium mobile bottom nav shared across production pages */
.dantok-mobile-nav {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 58px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(11,13,14,.94);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.dantok-mobile-nav a {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  color: rgba(255,255,255,.62) !important;
  text-decoration: none !important;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
}
.dantok-mobile-nav a span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: currentColor;
  font-size: 15px;
  line-height: 1;
}
.dantok-mobile-nav a.active {
  background: rgba(22,212,196,.15);
  color: #fff !important;
}
.dantok-mobile-nav a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--ui-accent);
  transform: translateX(-50%);
}
@media (max-width: 760px) {
  .dantok-mobile-nav { display: flex !important; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
}

/* =========================================================================
   Lark (lark-static-page) — sidebar item fix + premium polish
   The ka-item grid is injected by lark-ka.js; override so the campaign name
   gets real space instead of a ~62px sliver.
   ========================================================================= */
.lark-static-page .shell.lark-project-shell { grid-template-columns: clamp(268px, 21vw, 328px) 2px minmax(0,1fr) 2px var(--ui-drawer-w) !important; }
.lark-static-page .lark-ka-sidebar { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; }
.lark-static-page .lark-ka-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.lark-static-page .lark-ka-rail-head h2 { margin: 0; font-size: 13px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.lark-static-page .lark-ka-search .input { width: 100%; height: 32px; border-radius: 9px; }
.lark-static-page .lark-ka-list { display: flex; flex-direction: column; gap: 7px; overflow: auto; min-height: 0; padding: 2px; }
.lark-static-page .lark-ka-item {
  display: grid !important; grid-template-columns: 44px minmax(0,1fr) 28px !important;
  grid-template-rows: auto auto !important; gap: 5px 10px !important; align-items: center;
  padding: 10px 11px !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .12s ease;
  text-align: left; width: 100%;
}
.lark-static-page .lark-ka-item:hover { background: var(--ui-surface-2) !important; transform: translateY(-1px); box-shadow: var(--ui-shadow-sm); }
.lark-static-page .lark-ka-item.active { border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; box-shadow: inset 3px 0 0 var(--ui-accent); }
.lark-static-page .lark-ka-logo { width: 44px !important; height: 44px !important; border-radius: 10px !important; object-fit: cover; grid-row: 1 / span 2 !important; border: 1px solid var(--ui-line); background: var(--ui-surface-3); }
.lark-static-page .lark-ka-copy { grid-column: 2 !important; grid-row: 1 !important; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.lark-static-page .lark-ka-copy strong { font-size: 12.5px !important; font-weight: 800; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lark-static-page .lark-ka-copy span { font-size: 10.5px !important; color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lark-static-page .lark-ka-select { grid-column: 3 !important; grid-row: 1 !important; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--ui-surface-2); color: var(--ui-muted); font-size: 15px; font-weight: 800; border: 1px solid var(--ui-line); }
.lark-static-page .lark-ka-item.active .lark-ka-select { background: var(--ui-accent); color: #fff; border-color: transparent; }
.lark-static-page .lark-ka-counts { grid-column: 2 / span 2 !important; grid-row: 2 !important; display: flex; gap: 12px; }
.lark-static-page .lark-ka-counts > span { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.lark-static-page .lark-ka-counts b { font-size: 13px; font-weight: 850; color: var(--ui-ink); line-height: 1; }
.lark-static-page .lark-ka-counts small { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-muted-2); }

/* =========================================================================
   v2 gorgeous polish — breathing room, refined typography, clean cells.
   Visual-only: no display/grid/flex on layout containers -> no overlaps.
   ========================================================================= */
body { letter-spacing: -.005em; }
.tt-app .content { padding: 14px !important; gap: 12px !important; }
.tt-app .sidebar { padding: 14px 12px !important; gap: 6px !important; }
.toolbar { padding: 12px 14px !important; gap: 10px !important; }

/* Refined metric cards with accent bar + better hierarchy */
.metric, .metric-card, .ka-metrics .metric, .lark-metrics-row > div {
  position: relative; padding: 14px 16px !important; gap: 6px !important; border-radius: 12px !important;
}
.metric::before, .metric-card::before, .ka-metrics .metric::before, .lark-metrics-row > div::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-accent); opacity: .85;
}
.metric span, .metric-card span, .lark-metrics-row > div > span { font-size: 10.5px !important; letter-spacing: .06em; }
.metric strong, .metric-card strong, .lark-metrics-row > div > strong { font-size: 26px !important; letter-spacing: -.02em; }

/* Tables: a touch more breathing room, refined header */
thead th, .ka-table thead th, .inv-table thead th { padding: 11px 14px !important; font-size: 10.5px !important; letter-spacing: .06em; }
tbody td, .ka-table tbody td, .inv-table tbody td { padding: 12px 14px !important; }
tbody tr:hover, .ka-table tbody tr:hover, .inv-table tbody tr:hover { background: var(--ui-surface-2) !important; }

/* Campaigns invite-window cell: clean label/value rows, no truncation */
.cell-window { white-space: normal !important; line-height: 1.5; min-width: 150px; }
.cell-window > div { display: flex; gap: 7px; align-items: baseline; font-size: 12px; color: var(--ui-ink-2); }
.cell-window > div.secondary-text { color: var(--ui-muted); }
.cell-window .time-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ui-muted-2); flex: 0 0 54px;
}

/* Refined cards/panels: softer borders, gentle shadow, rounded */
.panel, .campaign-summary, .drawer-campaign-card, .creator-intel-card { border-radius: 12px !important; }
.campaign-summary, .drawer-campaign-card { padding: 14px !important; }

/* Nav link underline refinement */
.tt-main-nav a.active::after { height: 2px; left: 14px; right: 14px; bottom: 0; }

/* Buttons: slightly taller, refined radius */
.button, .btn, .tt-app .button { height: 38px; border-radius: 10px; font-weight: 700; }
.button.primary, .tt-app .button.primary { box-shadow: 0 2px 8px rgba(0,184,169,.18); }
.button.primary:hover, .tt-app .button.primary:hover { box-shadow: 0 4px 14px rgba(0,184,169,.28); }

/* Pills/badges refined */
.pay-badge, .status, .status-pill, .pill { height: 22px; padding: 0 10px; font-size: 11px; border-radius: 999px; }

/* Selected campaign card accent */
.ka-campaign-card.active, .lark-static-page .lark-ka-item.active { box-shadow: inset 3px 0 0 var(--ui-accent), var(--ui-shadow-sm); }

/* Creator cards in drawer: refined spacing */
.creator-card { border-radius: 10px; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ui-line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--ui-line); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ui-muted-2); background-clip: content-box; }

/* Mobile header — keep brand + scrollable nav + tidy right icons (no truncation) */
@media (max-width: 760px) {
  .topbar, .tt-app .topbar, .ka-page .topbar, .inv-page .topbar, .creator-static-page .topbar, body.lark-static-page .topbar {
    display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 10px !important;
  }
  .tt-nav-left { flex: 1 1 0 !important; min-width: 0 !important; gap: 8px !important; }
  .tt-nav-right { flex: 0 0 auto !important; gap: 6px !important; }
  .tt-brand span { display: none !important; }
  .tt-brand strong { font-size: 18px !important; }
  .tt-main-nav { flex: 1 1 0 !important; min-width: 0 !important; gap: 2px !important; overflow-x: auto !important; scrollbar-width: none !important; }
  .tt-main-nav::-webkit-scrollbar { display: none !important; }
  .tt-main-nav a { padding: 0 6px !important; font-size: 12.5px !important; white-space: nowrap !important; flex: 0 0 auto !important; }
  /* Edge-fade so the scrollable nav reads as intentional, not clipped */
  .tt-main-nav {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
  }
  .compact-search-toggle { width: 32px !important; height: 32px !important; font-size: 17px !important; }
  .theme-toggle { width: 32px !important; height: 32px !important; }
  .ka-metrics, .ka-page .metrics, .campaign-metrics, .lark-static-metrics { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =========================================================================
   v3 professional polish — shadcn-flavored refinements, no layout regressions.
   ========================================================================= */
/* Metric cards: allow meta line to wrap (fixes "228 sent today · 228 assi…") */
.metric-card, .metric, .ka-metrics .metric, .lark-metrics-row > div, .lark-static-metrics .metric-card { overflow: visible !important; }
.metric-card small, .metric small, .lark-static-metrics .metric-card small {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  line-height: 1.35 !important; font-size: 11px !important; color: var(--ui-muted) !important; font-weight: 600 !important;
}
@media (max-width: 760px) {
  .metric-card small, .lark-static-metrics .metric-card small { font-size: 10px !important; line-height: 1.3 !important; }
  .metric-card strong, .lark-static-metrics .metric-card strong { font-size: 20px !important; }
}

/* Lark creator-table invite button: never clip "Invite all (n)" */
.lark-row-invite, .ka-table .compact-button, .compact-button.lark-row-invite {
  white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
  padding: 0 12px !important; flex: 0 0 auto !important;
  width: auto !important; min-width: 0 !important;
}
.lark-creator-table td:last-child, .ka-table td:last-child { overflow: visible !important; }

/* shadcn-style focus ring on inputs (lighter, crisper) */
.input:focus, .select:focus, .global-creator-input:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft), inset 0 1px 0 rgba(255,255,255,.02) !important;
  outline: none !important;
}

/* Buttons: consistent shadcn-ish secondary + ghost + outline semantics */
.button.secondary, .btn.secondary { background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important; }
.button.secondary:hover { background: var(--ui-surface-3) !important; }
.button.ghost, .btn.ghost { background: transparent !important; border: 1px solid transparent !important; color: var(--ui-ink-2) !important; }
.button.ghost:hover { background: var(--ui-surface-2) !important; }
.button.outline, .btn.outline { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; color: var(--ui-ink) !important; }
.button.outline:hover { background: var(--ui-surface-2) !important; border-color: var(--ui-muted-2) !important; }

/* Card surfaces: crisper 1px border, gentle shadow (shadcn card look) */
.panel, .creator-intel-card, .lark-responses-panel, .lark-automation-panel, .lark-hero,
.table-wrap, .ka-table-wrap, .inv-table-wrap {
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

/* Table header: shadcn-style muted header row, no heavy bottom border */
thead th, .ka-table thead th, .inv-table thead th {
  font-weight: 700 !important; color: var(--ui-muted) !important;
  background: var(--ui-surface-2) !important; border-bottom: 1px solid var(--ui-line) !important;
}

/* Pills/badges: flatter, shadcn-like (no shadow, soft bg + matched fg) */
.pay-badge, .status, .status-pill, .pill { box-shadow: none !important; }

/* ===== Mobile bottom nav — professional fixed tab bar (replaces inline nav) ===== */
.dantok-mobile-nav { display: none; }
@media (max-width: 760px) {
  body.tt-app .tt-main-nav,
  body.ka-page .tt-main-nav,
  body.inv-page .tt-main-nav,
  body.creator-static-page .tt-main-nav,
  body.home-page .tt-main-nav,
  body.lark-static-page .tt-main-nav,
  /* ka.html / invitations.html use a wrapper div (body has no class) */
  .ka-page .tt-main-nav,
  .inv-page .tt-main-nav { display: none !important; }
  .dantok-mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ui-line);
    background: var(--ui-surface);
    backdrop-filter: blur(18px);
    box-shadow: 0 -6px 22px rgba(16, 20, 22, .07);
  }
  .dantok-mobile-nav a {
    display: grid; place-items: center; gap: 2px; min-height: 46px; border-radius: 10px;
    color: var(--ui-muted); font-size: 9.5px; font-weight: 800; text-decoration: none; letter-spacing: .02em;
    transition: background .12s ease, color .12s ease;
  }
  .dantok-mobile-nav a span { font-size: 16px; line-height: 1; }
  .dantok-mobile-nav a.active { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
  /* keep page content above the fixed bar */
  body.tt-app, body.ka-page, body.inv-page, body.creator-static-page { padding-bottom: 74px !important; }
  body.lark-static-page { padding-bottom: 74px !important; }
  /* Lark now uses the shared dantok-mobile-nav; suppress the legacy lark-mobile-nav
     if any markup still references it. */
  .lark-mobile-nav { display: none !important; }
}

/* ===== v6 — in-depth audit fixes (clipping, tiny headers, breakdown text) ===== */

/* Campaigns table: sort buttons inside th rendered at 9px — bump to a legible,
   professional 11px and inherit the muted uppercase header treatment. */
.tt-app thead button,
.tt-app thead .n,
.ka-table thead button,
.inv-table thead button {
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.tt-app thead button:hover,
.ka-table thead button:hover { color: var(--ui-ink) !important; }

/* Campaigns table: brand / secondary-text cells clipped mid-word without ellipsis.
   Force single-line ellipsis so names terminate cleanly with "…". */
.tt-app td .secondary-text,
.tt-app td .campaign-row-brand,
.tt-app td .cell-window,
.tt-app td .ids,
.tt-app td .ids span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.tt-app td .ids { display: block !important; }
/* Long unbreakable brand strings (e.g. store URLs) should break, not push layout. */
.tt-app td strong,
.tt-app td a {
  overflow-wrap: anywhere !important;
}

/* Lark KA-breakdown: campaign names + pay type clipped in the narrow right drawer.
   Brand → one-line ellipsis; campaign name+pay → 2-line clamp with word-break so
   long tokens (AmericanEmergencyFund…) wrap instead of overflowing. */
.lark-static-page .lark-breakdown article p strong,
.lark-static-page .lark-breakdown article p strong a {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 720 !important;
}
.lark-static-page .lark-breakdown article p span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.3 !important;
  color: var(--ui-muted) !important;
  font-size: 11.5px !important;
}
.lark-static-page .lark-breakdown article p { min-width: 0 !important; overflow: visible !important; }
.lark-static-page .lark-breakdown article em small {
  display: block !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Projects universal tabs: on mobile the status tabs overflow ~1200px. Keep them
   horizontally scrollable but tighten padding so more fit before scrolling. */
@media (max-width: 760px) {
  .ka-page .ka-universal-tabs,
  .ka-page .ka-row-summary { gap: 4px !important; padding: 8px 10px !important; }
  .ka-page .ka-universal-tabs button,
  .ka-page .ka-summary-chip { padding: 6px 9px !important; font-size: 11.5px !important; }
  .ka-page .ka-universal-tabs button strong,
  .ka-page .ka-summary-chip strong { padding: 2px 5px !important; font-size: 10.5px !important; }
}

/* Lark: creator detail meta line was clipping ("I can take on 5+ more ads! · 0/5 ass…"). */
.lark-static-page #detailMeta {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Lark creator table: the right-edge Invite buttons were clipped by the table
   container. Give the last column breathing room and keep buttons on one line. */
.lark-static-page .lark-static-table td:last-child,
.lark-static-page .lark-static-table th:last-child { padding-right: 16px !important; }
.lark-static-page .lark-static-table .button,
.lark-static-page .lark-static-table .compact-button,
.lark-static-page .lark-static-table button {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.lark-static-page .lark-table-scroll { overflow-x: auto !important; overflow-y: hidden !important; }

/* Lark table: null TikTok score used to render as an "unfinished" green box with a
   dash. Render it as a muted placeholder instead. */
.lark-static-page .lark-static-table td b.none {
  background: var(--ui-surface-2) !important;
  color: var(--ui-muted) !important;
  font-weight: 700 !important;
}

/* Lark KAS-list: the SECOND-priority count was a loud pink. Tone it to a muted
   slate so the metric row reads as data, not an alarm. */
.lark-static-page .lark-ka-counts span:nth-child(2) b { color: #667085 !important; }

/* Projects/ka-table: creator follower secondary-text lines clipped mid-word. */
.ka-table .secondary-text,
.ka-table .ids.small .secondary-text {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* Lark mobile: creator handles + priority labels were clipping / 8.5px. */
@media (max-width: 760px) {
  .lark-static-page .lark-static-table tbody td strong,
  .lark-static-page .lark-static-table tbody td .creator-line strong,
  .lark-static-page .lark-static-table tbody td a {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }
  .lark-static-page .lark-static-table tbody td small,
  .lark-static-page .lark-static-table tbody td .creator-line small,
  .lark-static-page .lark-priority-tabs small,
  .lark-static-page .lark-creator-card small { font-size: 10.5px !important; line-height: 1.3 !important; }
  .lark-static-page .lark-static-table tbody td small {
    max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important; display: block !important;
  }
}

/* =========================================================================
   v11 — real visual upgrade for Creators / Projects / Lark.
   Softer card surfaces, layered shadows, refined section heads, metric tiles
   with accent, polished tables, and fixing the giant empty min-heights that
   made the Creators page look like a sparse boilerplate.
   ========================================================================= */

/* ---------- Shared: refined section heads (kicker label + count badge) ---------- */
.creator-static-page .creator-section-head,
.ka-page .ka-selected-head .pill,
.lark-static-page .panel-head {
  gap: 10px !important;
}
.creator-static-page .creator-section-head span {
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.creator-static-page .creator-section-head strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 22px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-ink-2) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ---------- Creators page ---------- */
.creator-static-page { background: var(--ui-bg) !important; }
.creator-static-shell { padding: 24px 0 40px !important; }
.creator-picker-card,
.creator-static-hero,
.creator-static-grid > article {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  padding: 20px !important;
}
.creator-picker-card { padding: 18px 18px 16px !important; }
.creator-picker-card .input {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-surface) !important;
  height: 40px !important;
  font-size: 14px !important;
  margin: 12px 0 14px !important;
}
.creator-picker-card .input:focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft) !important;
}
.creator-priority-tabs {
  display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
}
.creator-priority-tabs button {
  border: 1px solid var(--ui-line) !important;
  border-radius: 999px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-muted) !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .12s ease, color .12s ease, border-color .12s ease !important;
}
.creator-priority-tabs button:hover { background: var(--ui-surface-2) !important; color: var(--ui-ink) !important; }
.creator-priority-tabs button.active {
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-accent-line) !important;
  color: var(--ui-accent-ink) !important;
}
.creator-directory { gap: 8px !important; }
.creator-directory button {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  padding: 9px 10px !important;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease !important;
}
.creator-directory button:hover {
  border-color: var(--ui-accent-line) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transform: translateY(-1px) !important;
}
.creator-directory button.selected {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
}
/* Fix the giant empty bottom columns — let them size to content with a sane floor. */
.creator-static-grid > article {
  min-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
}
.creator-static-grid > article .creator-ka-list { flex: 1 1 auto !important; }
/* Hero stats: replace the harsh 1px-gap grid with soft divided tiles. */
.creator-static-hero {
  min-height: 0 !important;
  align-items: center !important;
}
.creator-hero-stats {
  gap: 0 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-2) !important;
  overflow: hidden !important;
}
.creator-hero-stats div {
  background: var(--ui-surface) !important;
  border-left: 1px solid var(--ui-line-2) !important;
}
.creator-hero-stats div:first-child { border-left: 0 !important; }
.creator-hero-stats span { color: var(--ui-muted) !important; font-size: 10.5px !important; }
.creator-hero-stats strong { color: var(--ui-ink) !important; }
.creator-hero-main h1 { letter-spacing: -.02em !important; font-weight: 850 !important; }
.creator-hero-main span { color: var(--ui-muted) !important; }
/* Empty states: centered, calm, not a tiny left-aligned line. */
.creator-static-page .lark-empty,
.creator-static-page .creator-directory:empty::after,
#creatorDirectory:empty::after {
  color: var(--ui-muted) !important;
  text-align: center !important;
}
.creator-static-hero .lark-empty {
  display: grid !important; place-items: center !important; width: 100% !important;
  padding: 40px 20px !important; color: var(--ui-muted) !important; font-size: 14px !important;
}
.creator-ka-list:empty {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex: 1 1 auto !important; min-height: 80px !important;
  color: var(--ui-muted-2) !important; font-size: 12.5px !important;
  text-align: center !important;
}
.creator-ka-list:empty::before { content: "Nothing here yet"; opacity: .8; }
.creator-ka-card {
  border: 1px solid var(--ui-line-2) !important;
  border-radius: var(--ui-radius-sm) !important;
  padding: 9px !important;
  margin-bottom: 7px !important;
  background: var(--ui-surface) !important;
  transition: border-color .12s ease !important;
}
.creator-ka-card:hover { border-color: var(--ui-line) !important; }

/* ---------- Projects page ---------- */
.ka-page { background: var(--ui-bg) !important; }
.ka-page .ka-shell { padding: 18px 16px 24px !important; gap: 14px !important; }
.ka-page .ka-controls .metrics.ka-metrics,
.ka-page .ka-controls .toolbar {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.ka-metrics .metric {
  background: var(--ui-surface) !important;
  position: relative !important;
}
.ka-metrics .metric::before {
  content: "" !important; position: absolute !important; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--ui-accent) !important; opacity: .85;
}
.ka-metrics .metric span { color: var(--ui-muted) !important; letter-spacing: .05em !important; }
.ka-metrics .metric strong { color: var(--ui-ink) !important; font-weight: 800 !important; }
.ka-page #kaSearch {
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
}
.ka-page #kaSearch:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft) !important; }
.ka-universal-tabs { gap: 6px !important; }
.ka-universal-tabs button {
  border: 1px solid transparent !important; border-radius: 999px !important;
  padding: 7px 13px !important; font-weight: 700 !important;
  transition: background .12s ease, border-color .12s ease !important;
}
.ka-universal-tabs button:hover { background: var(--ui-surface-2) !important; }
.ka-universal-tabs button.active {
  border-color: var(--ui-accent-line) !important; background: var(--ui-accent-soft) !important;
}
.ka-page .ka-browser {
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important;
  box-shadow: var(--ui-shadow-sm) !important; overflow: hidden !important;
}
.ka-campaign-card {
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important; box-shadow: var(--ui-shadow-sm) !important;
  transition: border-color .12s ease, box-shadow .14s ease, transform .14s ease !important;
}
.ka-campaign-card:hover {
  border-color: var(--ui-accent-line) !important; transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(16,20,22,.08) !important;
}
.ka-campaign-card.active {
  border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent), var(--ui-shadow-sm) !important;
}
.ka-campaign-card small { color: var(--ui-muted) !important; }
.ka-selected-head {
  border-bottom: 1px solid var(--ui-line) !important; background: var(--ui-surface) !important;
}
.ka-row-summary { border-bottom: 1px solid var(--ui-line) !important; background: var(--ui-surface) !important; }
.ka-table thead th { color: var(--ui-muted) !important; background: var(--ui-surface-2) !important; border-bottom: 1px solid var(--ui-line) !important; }
.ka-table tbody tr:hover { background: var(--ui-surface-2) !important; }
.ka-table td { border-bottom: 1px solid var(--ui-line-2) !important; }

/* ---------- Lark page ---------- */
.lark-static-page { background: var(--ui-bg) !important; }
.lark-static-page .lark-static-table thead th {
  color: var(--ui-muted) !important; background: var(--ui-surface-2) !important;
  border-bottom: 1px solid var(--ui-line) !important; letter-spacing: .05em !important;
}
.lark-static-page .lark-static-table tbody tr:hover { background: var(--ui-surface-2) !important; }
.lark-static-page .lark-static-table td { border-bottom: 1px solid var(--ui-line-2) !important; }
.lark-static-page .panel { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; box-shadow: var(--ui-shadow-sm) !important; }
.lark-static-page .drawer-head { border-bottom: 1px solid var(--ui-line) !important; }
.lark-static-page .lark-breakdown article {
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm) !important; transition: border-color .12s ease !important;
}
.lark-static-page .lark-breakdown article:hover { border-color: var(--ui-accent-line) !important; }
.lark-static-page .lark-ka-item {
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}
.lark-static-page .lark-ka-counts b { color: var(--ui-ink) !important; }
.lark-static-page .lark-ka-counts small { color: var(--ui-muted) !important; }
.lark-static-page .lark-header-stats strong { color: var(--ui-ink) !important; }
.lark-static-page .lark-header-stats span,
.lark-static-page .lark-header-stats small { color: var(--ui-muted) !important; }

/* ---------- Shared: softer buttons/pills across these pages ---------- */
.ka-page .button:not(.primary):not(.danger),
.lark-static-page .button:not(.primary):not(.danger),
.creator-static-page .button:not(.primary):not(.danger) {
  border: 1px solid var(--ui-line) !important; background: var(--ui-surface) !important;
  color: var(--ui-ink-2) !important;
}
.ka-page .button:not(.primary):not(.danger):hover,
.lark-static-page .button:not(.primary):not(.danger):hover,
.creator-static-page .button:not(.primary):not(.danger):hover {
  background: var(--ui-surface-2) !important; border-color: var(--ui-muted-2) !important;
}

/* =========================================================================
   v12 — smaller professional headers + Linear-style sidebars + page polish.
   ========================================================================= */

/* ---------- Headers: restrained, professional scale ---------- */
.lark-static-page .lark-static-title h1 {
  font-size: 20px !important; line-height: 1.2 !important; font-weight: 850 !important;
  letter-spacing: -.01em !important; margin: 2px 0 0 !important;
}
.lark-static-page .lark-static-title p {
  font-size: 12.5px !important; color: var(--ui-muted) !important; max-width: 640px !important; margin: 4px 0 0 !important;
}
.lark-static-page .lark-static-title { padding: 2px 2px !important; }
.lark-static-page .section-kicker {
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .07em !important;
  text-transform: uppercase !important; color: var(--ui-muted) !important;
}
.lark-static-page .campaign-command { padding: 14px 18px !important; gap: 14px !important; align-items: center !important; }
.lark-static-page .lark-static-metrics .metric-card { padding: 12px 14px !important; }
.lark-static-page .lark-static-metrics .metric-card strong { font-size: 22px !important; }
.lark-static-page .lark-static-metrics .metric-card span { font-size: 10.5px !important; }

.creator-static-page .creator-hero-main h1 {
  font-size: 22px !important; line-height: 1.15 !important;
}
.creator-static-page .creator-hero-main span { font-size: 13px !important; }
.creator-static-page .creator-hero-stats strong { font-size: 20px !important; }
.creator-static-page .creator-hero-stats div { padding: 12px !important; }
.creator-static-page .creator-hero-stats { grid-template-columns: repeat(4, minmax(92px, 1fr)) !important; }

.ka-page .ka-selected-head h2 { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
.ka-page .ka-selected-head { padding: 12px 16px !important; }

/* Drawer / panel heads tighter */
.lark-static-page .drawer-head h2 { font-size: 14px !important; font-weight: 800 !important; }
.lark-static-page .panel-head h3 { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--ui-muted) !important; }

/* ---------- Lark KAS sidebar — Linear-style ---------- */
.lark-static-page .lark-static-left { background: var(--ui-surface) !important; border-right: 1px solid var(--ui-line) !important; }
.lark-static-page .lark-ka-sidebar { padding: 10px 8px 12px !important; }
.lark-static-page .lark-ka-rail-head { padding: 4px 6px 8px !important; align-items: center !important; }
.lark-static-page .lark-ka-rail-head h2 {
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--ui-muted) !important;
}
.lark-static-page .lark-ka-search { margin-bottom: 6px !important; }
.lark-static-page .lark-ka-search .input {
  border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-sm) !important;
  background: var(--ui-surface-2) !important; height: 34px !important; font-size: 13px !important;
}
.lark-static-page .lark-ka-search .input:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft) !important; }

.lark-static-page .lark-ka-list { padding: 2px 0 !important; gap: 2px !important; }
.lark-static-page .lark-ka-list button.lark-ka-item {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 10px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  margin: 1px 0 !important;
  background: transparent !important;
  transition: background .12s ease !important;
}
.lark-static-page .lark-ka-list button:hover { background: var(--ui-surface-2) !important; }
.lark-static-page .lark-ka-list button.active {
  background: var(--ui-accent-soft) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
  padding-left: 10px !important;
}
.lark-static-page .lark-ka-list button.queued { background: var(--ui-surface-2) !important; }
.lark-static-page .lark-ka-logo {
  flex: 0 0 32px !important; width: 32px !important; height: 32px !important; border-radius: 7px !important;
  border: 1px solid var(--ui-line) !important; background: var(--ui-surface-2) !important;
}
.lark-static-page .lark-ka-logo.fallback { color: var(--ui-accent-ink) !important; background: var(--ui-accent-soft) !important; font-size: 10px !important; }
.lark-static-page .lark-ka-copy { flex: 1 1 0 !important; min-width: 0 !important; }
.lark-static-page .lark-ka-select {
  flex: 0 0 22px !important; width: 22px !important; height: 22px !important; border-radius: 6px !important;
  border: 1px solid var(--ui-line) !important; background: var(--ui-surface) !important;
  color: var(--ui-muted) !important; font-size: 13px !important; line-height: 1 !important;
  display: grid !important; place-items: center !important;
}
.lark-static-page .lark-ka-item.queued .lark-ka-select { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; }
.lark-static-page .lark-ka-list strong { font-size: 13px !important; color: var(--ui-ink) !important; font-weight: 700 !important; }
.lark-static-page .lark-ka-copy > span { font-size: 11px !important; color: var(--ui-muted) !important; }
.lark-static-page .lark-ka-counts {
  flex: 1 1 100% !important; align-items: center !important; justify-content: flex-start !important;
  gap: 14px !important; padding-left: 42px !important; padding-top: 2px !important;
}
.lark-static-page .lark-ka-counts b { font-size: 11px !important; color: var(--ui-ink-2) !important; font-weight: 800 !important; }
.lark-static-page .lark-ka-counts small { font-size: 9px !important; color: var(--ui-muted-2) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }

/* ---------- Projects campaign list — sleeker to match ---------- */
.ka-page .ka-campaign-card { padding: 10px 12px !important; gap: 10px !important; }
.ka-page .ka-campaign-card .ka-logo,
.ka-page .ka-campaign-card img { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
.ka-page .ka-campaign-card strong { font-size: 13.5px !important; font-weight: 700 !important; }
.ka-page .ka-campaign-card small { font-size: 11px !important; }
.ka-page .ka-browser { padding: 6px !important; gap: 4px !important; }

/* ---------- Page shells: breathing room, calmer bg ---------- */
.ka-page .ka-shell { padding: 16px 14px 22px !important; }
.creator-static-shell { padding: 20px 0 36px !important; }

/* ---------- Global header scale (campaigns + home) ---------- */
.tt-app #selectedTitle { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.01em !important; }
.tt-app .command-head .section-kicker,
.tt-app .section-kicker {
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .07em !important;
  text-transform: uppercase !important; color: var(--ui-muted) !important;
}
.home-hero h1 { font-size: 30px !important; line-height: 1.1 !important; font-weight: 850 !important; letter-spacing: -.02em !important; }
.home-hero .eyebrow { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ui-accent-ink) !important; }
.home-hero p { color: var(--ui-muted) !important; }

/* ---------- Lark KAS rail: slots-only toggle ---------- */
.lark-static-page .lark-ka-rail-head { gap: 8px !important; }
.lark-static-page .lark-slots-toggle {
  margin-left: auto !important;
  height: 24px !important; padding: 0 10px !important;
  border: 1px solid var(--ui-accent-line) !important; border-radius: 999px !important;
  background: var(--ui-accent-soft) !important; color: var(--ui-accent-ink) !important;
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .03em !important;
  cursor: pointer !important; transition: background .12s ease, color .12s ease, border-color .12s ease !important;
}
.lark-static-page .lark-slots-toggle.off {
  background: var(--ui-surface) !important; border-color: var(--ui-line) !important; color: var(--ui-muted) !important;
}
.lark-static-page .lark-ka-rail-head .lark-form-toggle { margin-left: 0 !important; }

/* v19 — Campaigns out-of-frame fixes + modern polish */
/* Desktop: column widths summed to 107% → 6px table overflow. Rebalanced to 100%. */
@media (min-width: 1181px) {
  .tt-app table { table-layout: fixed !important; width: 100% !important; }
  .tt-app td:nth-child(1), .tt-app th:nth-child(1) { width: 26% !important; }
  .tt-app td:nth-child(2), .tt-app th:nth-child(2) { width: 13% !important; }
  .tt-app td:nth-child(3), .tt-app th:nth-child(3) { width: 8% !important; }
  .tt-app td:nth-child(4), .tt-app th:nth-child(4) { width: 8% !important; }
  .tt-app td:nth-child(5), .tt-app th:nth-child(5) { width: 12% !important; }
  .tt-app td:nth-child(6), .tt-app th:nth-child(6) { width: 7% !important; }
  .tt-app td:nth-child(7), .tt-app th:nth-child(7) { width: 7% !important; }
  .tt-app td:nth-child(8), .tt-app th:nth-child(8) { width: 6% !important; }
  .tt-app td:nth-child(9), .tt-app th:nth-child(9) { width: 13% !important; }
  /* Keep long unbroken campaign tokens from forcing the column wider than its % */
  .tt-app .project-cell, .tt-app .project-copy { min-width: 0 !important; overflow: hidden !important; }
  .tt-app .primary-text {
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    max-width: 100% !important; overflow-wrap: anywhere !important;
  }
  .tt-app td .campaign-row-brand { max-width: 100% !important; }
}

/* Mobile: long underscore campaign names (no spaces) overflowed the card by 300-414px. */
@media (max-width: 760px) {
  .tt-app tbody tr.data-row { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .tt-app .project-cell { min-width: 0 !important; }
  .tt-app .primary-text {
    overflow-wrap: anywhere !important; word-break: break-word !important;
    -webkit-line-clamp: 2 !important; line-clamp: 2 !important;
    max-width: 100% !important;
  }
  .tt-app .campaign-row-brand {
    display: block !important; max-width: 100% !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    overflow-wrap: anywhere !important;
  }
  /* Bump tiny 9px card labels to a readable, modern size */
  .tt-app td[data-label]::before { font-size: 10.5px !important; }
  .mobile-meta-item b { font-size: 10.5px !important; }
  .mobile-meta-item em { overflow-wrap: anywhere !important; }
  /* Tighter, modern card spacing */
  .tt-app tbody tr.data-row { border-radius: 14px !important; }
  .mobile-campaign-meta { gap: 8px !important; margin-top: 12px !important; }
  .mobile-meta-item { border-radius: 11px !important; }
}

/* v19b — modern polish for campaign cards (mobile) + desktop row lift */
@media (max-width: 760px) {
  /* Compact, modern campaign cards with clearer hierarchy */
  .tt-app tbody tr.data-row {
    padding:12px 13px !important; gap:10px !important;
    border-color: var(--ui-line) !important;
    box-shadow: 0 1px 2px rgba(16,20,22,.04) !important;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
  }
  .tt-app tbody tr.data-row:active {
    border-color: var(--ui-accent-line) !important;
    box-shadow: 0 2px 10px rgba(0,184,169,.10) !important;
  }
  .tt-app tbody tr.data-row.selected {
    border-color: var(--ui-accent-line) !important;
    box-shadow: inset 3px 0 0 var(--ui-accent), 0 2px 10px rgba(0,184,169,.10) !important;
  }
  .tt-app .project-cell { gap:10px !important; }
  .tt-app .thumb { width:42px !important; height:42px !important; border-radius:10px !important; }
  .tt-app .primary-text { font-size:14.5px !important; font-weight:800 !important; letter-spacing:-.01em !important; }
  .tt-app .campaign-row-brand { font-size:11.5px !important; font-weight:650 !important; color: var(--ui-muted) !important; }
  /* Meta grid: quieter, unified tiles instead of busy bordered boxes */
  .mobile-campaign-meta { gap:0 !important; margin-top:10px !important; border:1px solid var(--ui-line) !important; border-radius:12px !important; overflow:hidden !important; }
  .mobile-meta-item { border:0 !important; border-radius:0 !important; border-bottom:1px solid var(--ui-line-2) !important; border-right:1px solid var(--ui-line-2) !important; background:var(--ui-surface) !important; padding:8px 10px !important; }
  .mobile-meta-item:nth-child(2n) { border-right:0 !important; }
  .mobile-meta-item:nth-last-child(-n+2) { border-bottom:0 !important; }
  .mobile-meta-item b { font-size:9.5px !important; letter-spacing:.06em !important; opacity:.8 !important; }
  .mobile-meta-item em { font-size:13px !important; font-weight:750 !important; }
  .mobile-meta-remaining, .mobile-meta-closes { background:var(--ui-accent-soft) !important; border-color:var(--ui-accent-line) !important; }
  /* Card label kickers (PROJECT/BRAND/…) — quieter */
  .tt-app td[data-label]::before { font-size:9.5px !important; letter-spacing:.07em !important; opacity:.7 !important; }
}
@media (min-width: 1181px) {
  /* Desktop: subtle row hover lift + softer dividers for a more modern feel */
  .tt-app tbody tr.data-row { transition: background .12s ease, box-shadow .12s ease !important; }
  .tt-app tbody tr.data-row:hover { background: var(--ui-surface-2) !important; }
  .tt-app tbody tr.data-row.selected { background: var(--ui-accent-soft) !important; box-shadow: inset 3px 0 0 var(--ui-accent) !important; }
  .tt-app tbody td { border-bottom:1px solid var(--ui-line-2) !important; }
  .tt-app thead th { background: var(--ui-surface-2) !important; color: var(--ui-muted) !important; }
}

/* v20 — production header: bigger, complete, no hidden core controls */
:root { --ui-topbar-h: 64px; }
.topbar,
.tt-app .topbar,
.ka-page .topbar,
.inv-page .topbar,
.creator-static-page .topbar,
body.lark-static-page .topbar,
body.home-page .topbar {
  min-height: var(--ui-topbar-h) !important;
  height: var(--ui-topbar-h) !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.topbar .tt-nav-left,
.topbar .tt-nav-right {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
.topbar .tt-nav-left { flex: 1 1 auto !important; gap: 14px !important; }
.topbar .tt-nav-right { flex: 0 0 auto !important; gap: 10px !important; }
.topbar .tt-menu {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  font-size: 18px !important;
}
.topbar .tt-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: var(--ui-topbar-h) !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
}
.topbar .tt-brand strong {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 880 !important;
}
.topbar .tt-brand span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.66) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.topbar .tt-main-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.topbar .tt-main-nav::-webkit-scrollbar { display: none !important; }
.topbar .tt-main-nav a {
  height: var(--ui-topbar-h) !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}
.topbar .theme-toggle,
.topbar .header-creator-search.compact-global-search {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}
.topbar .header-creator-search.compact-global-search.expanded {
  width: min(340px, 44vw) !important;
  min-width: min(340px, 44vw) !important;
  max-width: min(340px, 44vw) !important;
  flex-basis: min(340px, 44vw) !important;
}
.topbar .tt-account.tt-account-profile {
  display: inline-flex !important;
  min-height: 40px !important;
  max-width: 188px !important;
}

@media (max-width: 760px) {
  :root { --ui-topbar-h: 68px; }
  .topbar,
  .tt-app .topbar,
  .ka-page .topbar,
  .inv-page .topbar,
  .creator-static-page .topbar,
  body.lark-static-page .topbar,
  body.home-page .topbar {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .topbar .tt-nav-left { flex: 1 1 auto !important; gap: 8px !important; }
  .topbar .tt-nav-right { display: flex !important; flex: 0 0 auto !important; gap: 7px !important; }
  .topbar .tt-menu {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
  .topbar .tt-brand {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  .topbar .tt-brand strong {
    font-size: 20px !important;
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .topbar .tt-brand span {
    display: inline-flex !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    max-width: 116px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    color: rgba(255,255,255,.58) !important;
  }
  .topbar .tt-main-nav {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 72px !important;
    max-width: 38vw !important;
    overflow-x: auto !important;
  }
  .topbar .tt-main-nav a {
    height: var(--ui-topbar-h) !important;
    padding: 0 7px !important;
    font-size: 12px !important;
  }
  .topbar .tt-account.tt-account-profile { display: none !important; }
  .topbar .theme-toggle,
  .topbar .header-creator-search.compact-global-search {
    display: inline-flex !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
  .topbar .header-creator-search.compact-global-search.expanded {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: 9px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    z-index: 90 !important;
    flex-basis: auto !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.25) !important;
  }
}

/* v22 — mobile command header. Bottom nav owns page switching. */
@media (max-width: 760px) {
  :root { --ui-topbar-h: 72px; }

  body {
    padding-top: var(--ui-topbar-h) !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body > .topbar,
  .topbar,
  .tt-app .topbar,
  .ka-page .topbar,
  .inv-page .topbar,
  .creator-static-page .topbar,
  body.lark-static-page .topbar,
  body.home-page .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    height: var(--ui-topbar-h) !important;
    min-height: var(--ui-topbar-h) !important;
    padding: 0 14px !important;
    background: #070a0d !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  }

  .topbar .tt-nav-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .topbar .tt-menu {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    font-size: 20px !important;
  }

  .topbar .tt-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--ui-topbar-h) !important;
    justify-content: center !important;
  }

  .topbar .tt-brand strong {
    max-width: 170px !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  .topbar .tt-brand span {
    display: none !important;
  }

  .topbar .tt-main-nav {
    display: none !important;
  }

  .topbar .tt-nav-right {
    flex: 0 0 auto !important;
    gap: 8px !important;
  }

  .topbar .header-creator-search.compact-global-search,
  .topbar .theme-toggle {
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.08) !important;
  }

  .topbar .theme-toggle::before {
    opacity: .9 !important;
  }

  .topbar .tt-account.tt-account-profile {
    display: none !important;
  }

  .app,
  .ka-page,
  .inv-page,
  .creator-static-page,
  body.home-page .home-page {
    min-height: calc(100vh - var(--ui-topbar-h)) !important;
  }

  .shell,
  .ka-shell,
  .inv-shell,
  .creator-shell,
  .home-shell {
    padding-top: 18px !important;
  }

  .dantok-mobile-nav {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1300 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    min-height: 64px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(7, 12, 14, .96) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(16px) !important;
  }

  .dantok-mobile-nav a {
    min-width: 0 !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,.64) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .dantok-mobile-nav a span {
    display: block !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .dantok-mobile-nav a.active {
    color: #fff !important;
    background: rgba(0,184,169,.28) !important;
    box-shadow: inset 0 -2px 0 #39f3df !important;
  }

  body.tt-app .app .shell.sheet-open > .drawer,
  body.tt-app .shell.sheet-open .drawer,
  body.tt-app .drawer {
    top: var(--ui-topbar-h) !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  body.tt-app .drawer-head {
    padding-top: calc(var(--ui-topbar-h) + 14px) !important;
  }
}

/* Projects final mobile override: list-first page, compact header, board after tap. */
@media (max-width: 760px) {
  body.projects-page {
    padding-top: 56px !important;
  }

  body.projects-page .ka-page {
    min-height: calc(100vh - 56px) !important;
  }

  body.projects-page .ka-page .topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 12px !important;
  }

  body.projects-page .ka-page .topbar .tt-menu,
  body.projects-page .ka-page .topbar .theme-toggle,
  body.projects-page .ka-page .topbar .header-creator-search.compact-global-search {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  body.projects-page .ka-page .topbar .tt-brand {
    justify-content: flex-start !important;
  }

  body.projects-page .ka-page .topbar .tt-brand strong {
    font-size: 22px !important;
  }

  body.projects-page .ka-page .ka-shell {
    padding: 8px 8px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  body.projects-page .ka-page .ka-controls {
    position: static !important;
    top: auto !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.projects-page .ka-page .ka-browser {
    position: static !important;
    top: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.projects-page:not(.project-mobile-sheet-open) .ka-page .ka-detail-panel {
    display: none !important;
  }
}

/* Invitations mobile compact pass. */
@media (max-width: 760px) {
  .inv-page .inv-shell {
    padding: 8px 8px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
  }

  .inv-page .inv-controls {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  .inv-page .inv-search-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .inv-page .inv-search-input {
    grid-column: 1 / -1 !important;
    height: 38px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  .inv-page .inv-search-row .button,
  .inv-page .inv-search-row a.button {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  .inv-page #createLogBtn,
  .inv-page #openDailyLarkBtn {
    grid-column: span 1 !important;
  }

  .inv-page .inv-meta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .inv-page .inv-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: hidden !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    background: var(--ui-line) !important;
  }

  .inv-page .inv-metrics .metric {
    min-height: 62px !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .inv-page .inv-metrics .metric::before {
    width: 3px !important;
  }

  .inv-page .inv-metrics .metric span {
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .inv-page .inv-metrics .metric strong {
    margin-top: 4px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .inv-page #metricLastSync {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .inv-page .inv-accepted-toggle {
    min-height: 32px !important;
    font-size: 13px !important;
  }

  .inv-page .inv-status {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .inv-page .inv-table-wrap {
    border-radius: 12px !important;
    overflow: visible !important;
  }

  .inv-page .inv-table tbody {
    display: grid !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .inv-page .inv-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
  }

  .inv-page .inv-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .inv-page .inv-campaign-cell {
    gap: 9px !important;
  }

  .inv-page .inv-thumb {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 8px !important;
  }

  .inv-page .inv-campaign-copy strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .inv-page .inv-campaign-copy small {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* v26 final mobile override: less stacked-card, more native list UI. Keep last. */
@media (max-width: 760px) {
  .projects-page .ka-page .ka-shell,
  .lark-static-page .lark-project-shell,
  .inv-page .inv-shell,
  .creator-static-page .creator-static-shell,
  .tt-app .shell.no-subnav {
    background: #edf5ef !important;
  }

  .projects-page .ka-page .ka-browser,
  .projects-page .ka-page .ka-table-wrap,
  .projects-page .ka-page .ka-campaign-list,
  .lark-static-page .lark-static-left,
  .lark-static-page .lark-static-center,
  .lark-static-page .lark-static-right,
  .lark-static-page .campaign-command,
  .lark-static-page .lark-center-head,
  .lark-static-page .lark-table-toolbar-static,
  .lark-static-page .lark-table-scroll,
  .lark-static-page .lark-selected-ka-summary,
  .inv-page .inv-controls,
  .inv-page .inv-table-wrap,
  .creator-static-page .creator-static-card {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .lark-static-page .campaign-command,
  .lark-static-page .lark-center-head,
  .lark-static-page .lark-table-toolbar-static,
  .inv-page .inv-controls {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-top: 1px solid var(--ui-line) !important;
    border-bottom: 1px solid var(--ui-line) !important;
  }

  .projects-page .ka-page .ka-metrics,
  .lark-static-page .lark-static-metrics,
  .inv-page .inv-metrics {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    border: 0 !important;
    border-top: 1px solid var(--ui-line) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    gap: 0 !important;
    box-shadow: none !important;
  }

  .projects-page .ka-page .ka-metrics .metric,
  .lark-static-page .lark-static-metrics .metric-card,
  .inv-page .inv-metrics .metric {
    flex: 0 0 92px !important;
    min-height: 46px !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-right: 1px solid var(--ui-line-2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .lark-static-page .lark-static-metrics .metric-card::before,
  .projects-page .ka-page .ka-metrics .metric::before,
  .inv-page .inv-metrics .metric::before {
    display: none !important;
  }

  .lark-static-page .lark-static-metrics .metric-card span,
  .lark-static-page .lark-static-metrics .metric-card small,
  .projects-page .ka-page .ka-metrics .metric span,
  .inv-page .inv-metrics .metric span {
    font-size: 8px !important;
    line-height: 1.1 !important;
    letter-spacing: .06em !important;
  }

  .lark-static-page .lark-static-metrics .metric-card strong,
  .projects-page .ka-page .ka-metrics .metric strong,
  .inv-page .inv-metrics .metric strong {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .projects-page .ka-page .ka-campaign-card,
  .lark-static-page .lark-static-table tbody tr,
  .lark-static-page .lark-ka-item,
  .inv-page .inv-table tbody tr,
  .creator-static-page .creator-static-card {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--ui-line-2) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .projects-page .ka-page .ka-campaign-card.active,
  .lark-static-page .lark-static-table tbody tr.selected,
  .lark-static-page .lark-ka-item.active {
    background: rgba(7,155,140,.07) !important;
    box-shadow: inset 2px 0 0 var(--ui-accent) !important;
  }

  .projects-page .ka-page .ka-status-strip,
  .inv-page .inv-status {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: rgba(255,255,252,.42) !important;
    box-shadow: none !important;
  }
}

/* v27 mobile cleanup: remove ugly empty blocks and bottom-nav collisions. */
@media (max-width: 760px) {
  body.tt-app,
  body.ka-page,
  body.projects-page,
  body.lark-static-page,
  body.inv-page,
  body.creator-static-page {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .lark-static-page .lark-project-shell,
  .creator-static-page .creator-static-shell,
  .tt-app .shell.no-subnav {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tt-app .content,
  .tt-app .toolbar,
  .tt-app .table-wrap {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .tt-app .toolbar {
    padding: 10px 8px !important;
    border-top: 1px solid var(--ui-line) !important;
    border-bottom: 1px solid var(--ui-line) !important;
  }

  .tt-app .toolbar .controls-row,
  .tt-app .toolbar {
    gap: 8px !important;
  }

  .tt-app .campaign-empty-state,
  .tt-app .empty .campaign-empty-state {
    align-items: flex-start !important;
    text-align: left !important;
    padding: 18px 8px !important;
    border-top: 1px solid var(--ui-line-2) !important;
    border-bottom: 1px solid var(--ui-line-2) !important;
  }

  .tt-app .campaign-empty-state .button,
  .tt-app .campaign-empty-state button {
    width: 100% !important;
    max-width: none !important;
  }

  .creator-static-page .creator-static-shell {
    gap: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    background: #edf5ef !important;
  }

  .creator-static-page .creator-picker-card,
  .creator-static-page .creator-static-hero,
  .creator-static-page .creator-static-grid,
  .creator-static-page .creator-static-grid article {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .creator-static-page .creator-picker-card {
    padding: 12px 8px 14px !important;
    border-top: 1px solid var(--ui-line) !important;
    border-bottom: 1px solid var(--ui-line) !important;
  }

  .creator-static-page .creator-static-hero:has(.lark-empty),
  .creator-static-page .creator-static-grid article:has(.creator-ka-list:empty),
  .creator-static-page .creator-static-grid article:has(.creator-ka-list .lark-empty),
  .creator-static-page .creator-static-grid article:has(.creator-ka-list .empty) {
    display: none !important;
  }

  .creator-static-page .creator-static-grid {
    display: block !important;
  }

  .creator-static-page .creator-directory {
    margin-top: 8px !important;
    border-top: 1px solid var(--ui-line-2) !important;
  }

  .creator-static-page .creator-directory:empty::before {
    content: "No creators match this search.";
    display: block;
    padding: 14px 0 0;
    color: var(--ui-muted);
    font-size: 13px;
  }

  body.tt-app .app .shell.no-subnav > .content,
  body.tt-app .app .shell.no-subnav .content,
  body.tt-app .app .shell.no-subnav .table-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tt-app .app .shell.no-subnav .table-wrap table,
  body.tt-app .app .shell.no-subnav .table-wrap tbody {
    display: block !important;
    background: transparent !important;
  }

  body.tt-app .app .shell.no-subnav .table-wrap tbody tr,
  body.tt-app .app .shell.no-subnav .table-wrap tbody td.empty {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.tt-app .app .shell.no-subnav .campaign-empty-state {
    padding: 20px 0 !important;
    border-top: 1px solid var(--ui-line-2) !important;
    border-bottom: 1px solid var(--ui-line-2) !important;
    background: transparent !important;
  }
}

/* Final campaign drift guard: the dashboard must never preserve horizontal scroll. */
body.tt-app,
body.tt-app .app,
body.tt-app .app > .shell.no-subnav {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body.tt-app .app > .shell.no-subnav {
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  width: 100% !important;
}

body.tt-app .app > .shell.no-subnav > .sidebar,
body.tt-app .app > .shell.no-subnav > .content,
body.tt-app .app > .shell.no-subnav > .drawer {
  min-width: 0 !important;
}