@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #0a0b0d;
  --surface: #111317;
  --surface-2: #17191e;
  --line: #282b32;
  --line-soft: #1d2026;
  --text: #f3f4f6;
  --muted: #8d929e;
  --subtle: #5e6470;
  --lime: #8ea8ff;
  --blue: #85a7ff;
  --red: #ff786e;
  --amber: #f6bd60;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select { font: inherit; }
body.auth-pending > .masthead, body.auth-pending > main { display: none; }
.auth-gate { min-height: 100dvh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 35%, #161a20 0, var(--bg) 45%); }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(100%, 440px); padding: 30px; border: 1px solid var(--line); border-radius: 8px; text-align: center; background: rgba(17,19,23,.96); box-shadow: 0 30px 80px #0008; }
.auth-card > span { color: var(--lime); font: 8px DM Mono, monospace; letter-spacing: .16em; }
.auth-card h1 { margin: 12px 0 0; font-size: 28px; }
.auth-card p { margin: 12px auto 22px; max-width: 340px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-card > button { height: 40px; border: 1px solid #3a3e47; border-radius: 5px; padding: 0 18px; color: var(--text); background: var(--surface-2); cursor: pointer; }
#auth-widget { display: flex; width: 100%; min-height: 10px; justify-content: center; }
.auth-gate[data-state="sign-in"] .auth-card { width: min(100%, 440px); padding: 0; border: 0; background: transparent; box-shadow: none; }
.auth-gate[data-state="sign-in"] .auth-card > span { display: block; margin-bottom: 20px; }
.auth-gate[data-state="sign-in"] .auth-card > h1,
.auth-gate[data-state="sign-in"] .auth-card > p { display: none; }

.masthead {
  min-height: 98px;
  padding: 22px clamp(20px, 3.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 11, 13, .94);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.identity { display: flex; align-items: center; gap: 16px; }
h1 { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1; letter-spacing: -.045em; font-weight: 500; }
.view-tabs { display: flex; align-self: stretch; gap: 24px; margin-left: auto; margin-right: 34px; }
.view-tab { position: relative; border: 0; padding: 0 2px; color: var(--subtle); background: transparent; font: 10px DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.view-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: transparent; }
.view-tab:hover, .view-tab.active { color: var(--text); }
.view-tab.active::after { background: var(--lime); box-shadow: 0 0 10px rgba(142,168,255,.35); }

.sync-state { display: flex; align-items: center; gap: 10px; text-align: right; }
.sync-state small { display: block; margin-top: 4px; font: 10px DM Mono, monospace; color: var(--muted); }
.sync-state #auth-user { max-width: 220px; overflow: hidden; color: var(--subtle); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sync-state button { border: 0; padding: 4px 0 4px 8px; color: var(--subtle); background: transparent; font: 8px DM Mono, monospace; cursor: pointer; }
.sync-state button:hover { color: var(--text); }

main { padding: 0 clamp(20px, 3.5vw, 56px) 56px; max-width: 1920px; margin: 0 auto; }
.overview { min-height: 128px; display: flex; align-items: center; gap: clamp(28px, 5vw, 80px); border-bottom: 1px solid var(--line); }
.overview > div { display: flex; flex-direction: column; }
.overview strong { font-size: clamp(30px, 4vw, 48px); line-height: 1; letter-spacing: -.05em; font-weight: 500; }
.overview span { margin-top: 8px; color: var(--muted); font: 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .12em; }
.overview p { max-width: 420px; margin-left: auto; color: var(--muted); font-size: 13px; line-height: 1.6; }

.filter-studio { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.filter-header { display: grid; grid-template-columns: minmax(260px, 520px) 1fr auto; align-items: end; gap: 18px; margin-bottom: 14px; }
.filter-studio.collapsed .filter-header { margin-bottom: 0; }
.filter-header p { align-self: center; margin: 14px 0 0; color: var(--subtle); font: 9px DM Mono, monospace; text-align: center; }
.filter-header p strong { color: #c4c9d2; font-weight: 500; }
.filter-search span { display: block; margin-bottom: 7px; color: var(--subtle); font: 9px DM Mono, monospace; text-transform: uppercase; letter-spacing: .12em; }
.filter-search input, .filter-search select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 5px; padding: 0 12px; color: var(--text); background: var(--surface); outline: none; font-size: 12px; }
.filter-search input:focus, .filter-search select:focus { border-color: #536a9d; box-shadow: 0 0 0 2px rgba(142,168,255,.1); }
.filter-search input::placeholder { color: var(--subtle); }
.filter-actions { display: flex; gap: 8px; }
.filter-actions button { height: 40px; border: 1px solid var(--line); border-radius: 5px; padding: 0 15px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 11px; white-space: nowrap; }
.filter-actions button:hover { color: var(--text); border-color: #3a3e47; }
#filter-toggle, #user-filter-toggle, #target-filter-toggle { min-width: 112px; color: #d4d8df; }
#filter-toggle.has-filters, #user-filter-toggle.has-filters, #target-filter-toggle.has-filters { border-color: #536a9d; color: var(--lime); background: #131722; }
#filter-panels[hidden], .dashboard-filter-panels[hidden] { display: none; }

.time-facet, .facet-card { min-width: 0; border: 1px solid var(--line); background: #0f1115; }
.time-facet { padding: 13px 14px 10px; }
.facet-heading { display: flex; min-height: 34px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.facet-heading span, .facet-heading strong { display: block; }
.facet-heading span { margin-bottom: 5px; color: var(--subtle); font: 8px DM Mono, monospace; letter-spacing: .13em; text-transform: uppercase; }
.facet-heading strong { max-width: 100%; overflow: hidden; color: #d6d9df; font: 10px DM Mono, monospace; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.facet-heading small { color: var(--subtle); font: 8px DM Mono, monospace; }
.time-chart { display: grid; grid-template-columns: repeat(var(--days, 1), minmax(2px, 1fr)); align-items: end; gap: 2px; height: 78px; padding-top: 4px; touch-action: none; user-select: none; }
.time-bar { position: relative; min-width: 0; height: max(3px, var(--height)); border: 0; border-radius: 1px 1px 0 0; padding: 0; background: #39404b; cursor: crosshair; }
.time-bar:hover, .time-bar.preview { background: var(--blue); }
.time-bar.selected { background: var(--lime); box-shadow: 0 0 10px rgba(142,168,255,.2); }
.time-bar::after { content: ''; position: absolute; inset: -5px -1px 0; }
.time-axis { display: flex; justify-content: space-between; margin-top: 7px; color: var(--subtle); font: 8px DM Mono, monospace; }

.facet-grid { display: grid; grid-template-columns: .8fr 1.35fr 1.15fr .85fr .75fr; gap: 10px; margin-top: 10px; }
.facet-card { padding: 12px; }
.facet-bars { display: flex; max-height: 188px; flex-direction: column; gap: 4px; overflow: auto; scrollbar-width: thin; scrollbar-color: #343942 transparent; }
.facet-option { position: relative; display: grid; width: 100%; min-height: 29px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; overflow: hidden; border: 1px solid transparent; border-radius: 3px; padding: 0 7px; color: #aeb4bf; background: linear-gradient(90deg, #1a1e24 var(--share), #12151a var(--share)); cursor: pointer; text-align: left; }
.facet-option span { position: relative; overflow: hidden; font: 9px DM Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.facet-option em { position: relative; color: #707783; font: normal 8px DM Mono, monospace; }
.facet-option:hover { border-color: #3a414c; color: var(--text); }
.facet-option.selected { border-color: #536a9d; color: var(--text); background: linear-gradient(90deg, rgba(142,168,255,.22) var(--share), #141822 var(--share)); }
.facet-option.selected em { color: var(--lime); }
.facet-empty { min-height: 62px; display: grid; place-items: center; color: var(--subtle); font: 9px DM Mono, monospace; }
.dashboard-filter-studio { padding-top: 18px; }
.dashboard-filter-studio.collapsed .filter-header { margin-bottom: 0; }
.dashboard-filter-panels { min-width: 0; }
.user-filter-grid { grid-template-columns: .8fr 1.8fr 1.15fr; }
.target-filter-grid { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); }
.filter-control-card { display: flex; min-height: 125px; flex-direction: column; }
.filter-control-card > label, .filter-control-row { margin-top: auto; }
.filter-control-card label { min-width: 0; }
.filter-control-card label > span { display: block; margin-bottom: 6px; color: var(--subtle); font: 8px DM Mono, monospace; letter-spacing: .11em; text-transform: uppercase; }
.filter-control-card input, .filter-control-card select, .filter-control-card button { width: 100%; height: 36px; border: 1px solid #30343c; border-radius: 4px; padding: 0 9px; color: #d8dbe1; background: #171a1f; outline: none; font-size: 10px; }
.filter-control-card input:focus, .filter-control-card select:focus { border-color: #536a9d; box-shadow: 0 0 0 2px rgba(142,168,255,.1); }
.filter-control-card button { color: var(--muted); cursor: pointer; }
.filter-control-card button:hover { color: var(--text); border-color: #3a3e47; }
.filter-control-row { display: grid; gap: 8px; }
.signup-controls { grid-template-columns: minmax(140px, 1.2fr) repeat(2, minmax(120px, 1fr)); }
.sort-controls, .date-controls { grid-template-columns: minmax(140px, 1fr) minmax(112px, .65fr); }
.target-filter-header .filter-search select { appearance: auto; }
.user-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(5, minmax(130px, 170px)) auto auto; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.user-toolbar label > span { display: block; margin-bottom: 7px; color: var(--subtle); font: 9px DM Mono, monospace; text-transform: uppercase; letter-spacing: .12em; }
.user-toolbar input, .user-toolbar select, .user-toolbar button { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--surface); outline: none; padding: 0 11px; font-size: 12px; }
.user-toolbar input:focus, .user-toolbar select:focus { border-color: #536a9d; box-shadow: 0 0 0 2px rgba(142,168,255,.1); }
.user-toolbar button { width: auto; align-self: end; padding: 0 18px; color: var(--muted); cursor: pointer; }
.user-toolbar .order-button { min-width: 118px; color: #c8cdd6; }

.table-shell { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); }
.table-meta { height: 50px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.table-meta p { margin: 0; color: var(--muted); font: 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .08em; }
.table-meta strong { color: var(--text); }
.table-scroll { overflow: auto; max-height: calc(100vh - 310px); }
table { width: 100%; min-width: 1280px; border-collapse: collapse; table-layout: fixed; }
.col-time { width: 100px; }.col-person { width: 190px; }.col-prompt { width: 34%; }.col-pattern { width: 14%; }.col-country { width: 70px; }
.col-apps { width: 14%; }.col-input { width: 110px; }.col-outcome { width: 100px; }
thead { position: sticky; top: 0; z-index: 3; }
th { height: 38px; padding: 0 14px; text-align: left; color: var(--subtle); background: #0e1013; border-bottom: 1px solid var(--line); font: 9px DM Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }
.table-sort { border: 0; padding: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.table-sort:hover, .table-sort.active { color: var(--text); }
.table-sort span { color: var(--lime); }
td { padding: 17px 14px; vertical-align: top; border-bottom: 1px solid var(--line-soft); color: #cfd2d8; font-size: 12px; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #14171b; }
tbody tr.arrived { animation: arrive 2.2s ease-out; }
@keyframes arrive { 0% { background: rgba(142,168,255,.18); } 100% { background: transparent; } }

.time-cell strong, .time-cell span { display: block; }
.time-cell strong { color: var(--text); font: 11px DM Mono, monospace; }
.time-cell span { margin-top: 6px; color: var(--subtle); font: 9px/1.5 DM Mono, monospace; }
.person-cell { color: #bfc5d0; font: 10px/1.5 DM Mono, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-link, .user-email { max-width: 100%; border: 0; padding: 0; color: var(--blue); background: transparent; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.person-link:hover, .user-email:hover { color: #b3c5ff; text-decoration: underline; }
.prompt-cell p { margin: 0; max-width: 760px; color: var(--text); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt-trace-link { color: inherit; text-decoration: none; }
.mcp-badge { display: inline-flex; align-items: center; margin: 0 8px 2px 0; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent); border-radius: 999px; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); font: 700 9px/1.2 DM Mono, monospace; letter-spacing: .08em; vertical-align: middle; }
.prompt-trace-link span { display: inline-block; margin-left: 7px; color: var(--subtle); font: 9px DM Mono, monospace; opacity: 0; transform: translate(-2px, 1px); transition: opacity .15s ease, color .15s ease, transform .15s ease; }
.prompt-trace-link:hover { color: #fff; text-decoration: underline; text-decoration-color: #56678d; text-underline-offset: 3px; }
.prompt-trace-link:hover span, .prompt-trace-link:focus-visible span { color: var(--blue); opacity: 1; transform: translate(0, 1px); }
.prompt-trace-link:focus-visible { border-radius: 2px; outline: 1px solid var(--blue); outline-offset: 3px; }
.original-toggle { margin: 9px 0 0; padding: 0; border: 0; background: transparent; color: var(--blue); font: 9px DM Mono, monospace; cursor: pointer; }
.original-toggle:hover { color: #acc0ff; text-decoration: underline; }
.original-text { margin-top: 10px !important; padding: 10px 12px; border-left: 2px solid #3d4a68; color: #aeb7c9 !important; background: #12151b; font-size: 11px !important; }
.pattern-label { color: #c8d4ec; line-height: 1.5; }
.country-code { display: inline-grid; min-width: 32px; height: 25px; place-items: center; border: 1px solid #30343c; border-radius: 4px; color: #c8cad0; font: 10px DM Mono, monospace; }
.apps { display: flex; flex-wrap: wrap; gap: 5px; }
.app-chip, .app-more { display: inline-flex; max-width: 130px; height: 24px; align-items: center; padding: 0 7px; border: 1px solid #30343c; border-radius: 4px; color: #aeb3bd; background: #16191d; font: 9px DM Mono, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-more { color: var(--blue); cursor: help; }
.muted { color: var(--subtle); font-size: 10px; }
.mode { color: #bbc0c9; font: 10px DM Mono, monospace; }
.mode-live-voice { color: #c4a9ff; }.mode-transcribe { color: var(--blue); }.mode-typed { color: #cfd2d8; }
.outcome { display: inline-flex; align-items: center; gap: 7px; font: 10px DM Mono, monospace; }
.outcome i { width: 6px; height: 6px; border-radius: 50%; background: var(--subtle); }
.outcome-success { color: var(--lime); }.outcome-success i { background: var(--lime); }
.outcome-failure { color: var(--red); }.outcome-failure i { background: var(--red); }
.outcome-blocked { color: var(--amber); }.outcome-blocked i { background: var(--amber); }
.outcome-unknown { color: var(--muted); }
.loading, .empty { height: 220px; text-align: center; vertical-align: middle; color: var(--muted); font: 11px DM Mono, monospace; }
.load-footer { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
.load-footer span { color: var(--muted); font: 10px DM Mono, monospace; }
.load-footer button { height: 36px; border: 1px solid #3a3e47; border-radius: 5px; padding: 0 15px; color: var(--text); background: var(--surface-2); cursor: pointer; font-size: 11px; }
.new-prompt-notice { position: fixed; right: 28px; bottom: 28px; z-index: 30; padding: 12px 16px; border: 1px solid #42577f; border-radius: 6px; color: var(--lime); background: #111722; box-shadow: 0 12px 36px #0009; font: 11px DM Mono, monospace; }

.user-table-scroll { max-height: calc(100vh - 310px); }
.users-table { min-width: 1200px; }
.col-user { width: 230px; }.col-last-active { width: 120px; }.col-user-metric { width: 100px; }
.col-user-pattern { width: 180px; }.col-user-input { width: 130px; }.col-expand { width: 54px; }
.col-detail-prompt { width: 48%; }
.user-summary-row { cursor: pointer; }
.user-summary-row.expanded { background: #15181c; }
.user-summary-row td { vertical-align: middle; }
.user-email { display: block; color: var(--text); font: 11px/1.5 DM Mono, monospace; }
.user-subline { display: block; margin-top: 5px; color: var(--subtle); font: 9px/1.45 DM Mono, monospace; }
.metric-value { display: block; color: var(--text); font: 15px/1 DM Mono, monospace; font-weight: 500; }
.expand-user { width: 28px; height: 28px; border: 1px solid #343943; border-radius: 50%; color: var(--muted); background: #171a1f; cursor: pointer; }
.expanded .expand-user { color: var(--lime); border-color: #536a9d; }
.user-detail-row > td { padding: 0; background: #0d0f12; }
.user-detail { padding: 18px 20px 22px; border-bottom: 1px solid #343943; }
.inline-user-detail { padding: 16px 18px 18px; }
.inline-user-detail-loading { min-height: 110px; display: grid; place-items: center; color: var(--muted); font: 10px DM Mono, monospace; }
.inline-user-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.inline-user-detail-header span, .inline-user-detail-header strong, .inline-user-detail-header small { display: block; }
.inline-user-detail-header span { margin-bottom: 5px; color: var(--lime); font: 8px DM Mono, monospace; letter-spacing: .14em; text-transform: uppercase; }
.inline-user-detail-header strong { color: var(--text); font: 12px DM Mono, monospace; font-weight: 500; }
.inline-user-detail-header small { margin-top: 5px; color: var(--subtle); font: 8px DM Mono, monospace; }
.inline-user-detail-header button { height: 34px; border: 1px solid #343943; border-radius: 4px; padding: 0 12px; color: var(--blue); background: #15181d; font: 9px DM Mono, monospace; cursor: pointer; }
.inline-user-detail-header button:hover { color: #b3c5ff; border-color: #4b5669; }
.inline-user-detail .nested-table-scroll { max-height: min(520px, 62vh); }
.user-page { padding: 22px 0 60px; }
.back-to-users { height: 38px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 5px; padding: 0 14px; color: #c9ced7; background: var(--surface); font: 10px DM Mono, monospace; cursor: pointer; }
.back-to-users:hover { color: var(--lime); border-color: #536a9d; }
.user-page-loading { min-height: 420px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); background: var(--surface); font: 10px DM Mono, monospace; }
.user-detail-page { padding: 0; border: 0; }
.user-page-header { min-height: 136px; margin-bottom: 18px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); background: linear-gradient(130deg, #12151a, #0f1115); }
.user-page-header span, .user-page-header h2, .user-page-header p { display: block; margin: 0; }
.user-page-header > div:first-child > span { margin-bottom: 9px; color: var(--lime); font: 8px DM Mono, monospace; letter-spacing: .15em; text-transform: uppercase; }
.user-page-header h2 { max-width: min(70vw, 920px); overflow: hidden; color: var(--text); font: 24px/1.2 DM Mono, monospace; font-weight: 500; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.user-page-header p { margin-top: 9px; color: var(--muted); font: 10px DM Mono, monospace; }
.user-page-primary { min-width: 160px; text-align: right; }
.user-page-primary strong, .user-page-primary span { display: block; }
.user-page-primary strong { color: var(--text); font-size: 38px; font-weight: 500; letter-spacing: -.05em; }
.user-page-primary span { margin-top: 6px; color: var(--subtle); font: 8px DM Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }
.user-detail-page .nested-table-scroll { max-height: none; }
.user-detail-page .user-prompts-table { min-width: 1050px; }
.user-detail-loading { padding: 28px; color: var(--muted); font: 10px DM Mono, monospace; }
.user-detail-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.user-detail-head > div { padding: 13px 14px; border: 1px solid var(--line); background: #121419; }
.user-detail-head span, .user-detail-head strong { display: block; }
.user-detail-head span { margin-bottom: 7px; color: var(--subtle); font: 8px DM Mono, monospace; text-transform: uppercase; letter-spacing: .12em; }
.user-detail-head strong { color: #d6d9df; font: 10px/1.5 DM Mono, monospace; font-weight: 400; }
.profile-panel { margin-bottom: 16px; padding: 16px; border: 1px solid #303641; background: linear-gradient(135deg, #12161b, #101216); }
.profile-loading { color: var(--muted); font: 10px DM Mono, monospace; }
.profile-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.profile-title span, .profile-title strong { display: block; }
.profile-title span { margin-bottom: 5px; color: var(--lime); font: 8px DM Mono, monospace; letter-spacing: .15em; text-transform: uppercase; }
.profile-title strong { color: var(--text); font: 13px DM Mono, monospace; font-weight: 500; }
.profile-title small { color: var(--subtle); font: 8px DM Mono, monospace; }
.profile-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.profile-hero > div { min-width: 0; min-height: 82px; padding: 13px 14px; border-right: 1px solid var(--line); background: #0f1216; }
.profile-hero > div:last-child { border-right: 0; }
.profile-hero span, .profile-hero strong, .profile-hero small { display: block; }
.profile-hero span, .profile-facts > div > span { margin-bottom: 8px; color: var(--subtle); font: 8px DM Mono, monospace; letter-spacing: .11em; text-transform: uppercase; }
.profile-hero strong { overflow: hidden; color: #e1e4e9; font: 11px/1.45 DM Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero small { margin-top: 6px; overflow: hidden; color: var(--muted); font: 9px DM Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1px; background: var(--line); }
.profile-facts > div { min-width: 0; min-height: 74px; padding: 13px 14px; background: #111419; }
.profile-facts .profile-wide { grid-column: span 3; min-height: auto; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.profile-chips span { display: inline-flex; max-width: 220px; min-height: 22px; align-items: center; padding: 4px 7px; border: 1px solid #303640; border-radius: 3px; color: #b9c0cb; background: #171a1f; font: 8px/1.35 DM Mono, monospace; overflow-wrap: anywhere; }
.profile-empty { color: var(--subtle); font: 9px DM Mono, monospace; }
.first-five-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); background: #0f1216; }
.first-five-panel ol { margin: 0; padding: 0; list-style: none; }
.first-five-panel li { display: grid; grid-template-columns: 155px minmax(0, 1fr) 90px; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.first-five-panel li > span:first-child { color: var(--subtle); font: 8px/1.5 DM Mono, monospace; }
.first-five-panel li p { margin: 0; color: #d9dce2; font-size: 11px; line-height: 1.5; }
.history-controls { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto; gap: 9px; margin: 16px 0 10px; padding: 12px; border: 1px solid var(--line); background: #101317; }
.history-controls label > span { display: block; margin-bottom: 6px; color: var(--subtle); font: 8px DM Mono, monospace; text-transform: uppercase; letter-spacing: .11em; }
.history-controls input, .history-controls select, .history-controls button { width: 100%; height: 35px; border: 1px solid #30343c; border-radius: 4px; padding: 0 9px; color: #d8dbe1; background: #171a1f; font-size: 10px; }
.history-controls button { align-self: end; color: var(--muted); cursor: pointer; }
.user-hover-preview { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px); padding: 15px; border: 1px solid #414854; border-radius: 6px; color: var(--text); background: #11151af5; box-shadow: 0 18px 50px #000b; pointer-events: none; }
.user-hover-preview > strong { display: block; overflow: hidden; margin-bottom: 11px; color: var(--blue); font: 11px DM Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.user-hover-preview dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 0; }
.user-hover-preview dl div { min-width: 0; }
.user-hover-preview dt { color: var(--subtle); font: 7px DM Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }
.user-hover-preview dd { overflow: hidden; margin: 4px 0 0; color: #cdd2da; font: 9px/1.4 DM Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.target-trend-card { margin: 0; background: #0f1115; }
.target-trend { display: flex; height: 90px; align-items: end; gap: 2px; }
.target-trend i { flex: 1; min-width: 2px; max-width: 18px; height: var(--height); border-radius: 1px 1px 0 0; background: #52647e; }
.target-trend i:hover { background: var(--lime); }
.target-table { min-width: 1050px; }
.target-table th:nth-child(1) { width: 28%; }.target-table th:not(:first-child) { width: 10%; }
.target-app-name { color: var(--text); font: 12px DM Mono, monospace; font-weight: 500; }
.target-drilldown { margin-top: 18px; padding: 20px; border: 1px solid #3c4652; background: linear-gradient(135deg, #12171d, #0f1216); }
.target-drilldown header { display: flex; align-items: start; justify-content: space-between; }
.target-drilldown header span { color: var(--lime); font: 8px DM Mono, monospace; text-transform: uppercase; letter-spacing: .14em; }
.target-drilldown h2 { margin: 5px 0; font: 22px DM Mono, monospace; font-weight: 500; }
.target-drilldown small { color: var(--subtle); font: 9px DM Mono, monospace; }
.target-drilldown header button { border: 1px solid var(--line); padding: 8px 12px; color: var(--muted); background: var(--surface-2); cursor: pointer; }
.target-drill-metrics { display: grid; grid-template-columns: repeat(5, 1fr); margin: 18px 0; border: 1px solid var(--line); }
.target-drill-metrics div { padding: 14px; border-right: 1px solid var(--line); }
.target-drill-metrics strong, .target-drill-metrics span { display: block; }.target-drill-metrics strong { font-size: 24px; }.target-drill-metrics span { margin-top: 5px; color: var(--subtle); font: 8px DM Mono, monospace; text-transform: uppercase; }
.target-drilldown h3 { margin: 18px 0 10px; color: var(--subtle); font: 9px DM Mono, monospace; text-transform: uppercase; letter-spacing: .12em; }
.co-used-apps { display: flex; flex-wrap: wrap; gap: 7px; }.co-used-apps > span { padding: 9px 11px; border: 1px solid var(--line); color: var(--muted); background: #15181d; font: 9px DM Mono, monospace; }.co-used-apps strong { display: block; margin-bottom: 4px; color: #dce0e6; }
.nested-table-scroll { overflow: auto; border: 1px solid var(--line); }
.user-prompts-table { min-width: 920px; }
.user-prompts-table th { background: #111419; }
.user-prompts-table td { padding-top: 13px; padding-bottom: 13px; }
.user-detail-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; color: var(--muted); font: 9px DM Mono, monospace; }
.user-detail-footer button { height: 32px; border: 1px solid #3a3e47; border-radius: 4px; padding: 0 12px; color: var(--text); background: var(--surface-2); cursor: pointer; font-size: 10px; }
.compact-empty { height: 90px; }
.admin-access-panel { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.4fr); gap: 30px; margin: 22px 0; padding: 22px; border: 1px solid var(--line); background: var(--surface); }
.admin-access-panel > div > span { color: var(--lime); font: 8px DM Mono, monospace; letter-spacing: .14em; text-transform: uppercase; }
.admin-access-panel > div > strong { display: block; margin-top: 7px; font-size: 18px; font-weight: 500; }
.admin-access-panel > div > p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
#admin-access-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: end; gap: 12px; }
#admin-access-form label > span { display: block; margin-bottom: 6px; color: var(--subtle); font: 8px DM Mono, monospace; text-transform: uppercase; }
#admin-access-email { width: 100%; height: 38px; border: 1px solid #363b46; border-radius: 4px; padding: 0 11px; color: var(--text); background: var(--surface-2); outline: 0; }
#admin-access-email:focus { border-color: #536a9d; box-shadow: 0 0 0 2px rgba(142,168,255,.08); }
.admin-invite-option { display: flex; height: 38px; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; }
#admin-access-form button, #admin-access-refresh, .admin-revoke { height: 38px; border: 1px solid #465875; border-radius: 4px; padding: 0 14px; color: var(--text); background: #182033; cursor: pointer; }
#admin-access-refresh { height: 30px; color: var(--muted); background: var(--surface-2); font-size: 9px; }
.admin-revoke { height: 30px; border-color: #5f3737; color: #ffaaa3; background: #211415; font-size: 9px; }
.admin-access-message { grid-column: 2; min-height: 18px; margin: -18px 0 0; color: var(--muted); font: 9px/1.5 DM Mono, monospace; }
.admin-access-table, .admin-invite-table { margin-top: 18px; }
.admin-access-table table, .admin-invite-table table { min-width: 760px; }
.admin-access-table th:first-child, .admin-invite-table th:first-child { width: 46%; }
.admin-access-table td:last-child, .admin-invite-table td:last-child { text-align: right; }

@media (max-width: 1250px) {
  .facet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facet-pattern { grid-column: span 2; }
  .signup-filter-card { grid-column: span 2; }
  .target-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-scroll { max-height: 68vh; }
  .view-tabs { margin-right: 20px; }
}

@media (max-width: 760px) {
  .masthead { min-height: 80px; padding: 17px 16px; }
  .sync-state small { display: none; }
  .masthead { flex-wrap: wrap; gap: 14px; }
  .view-tabs { order: 3; width: 100%; height: 34px; margin: 0; gap: 22px; }
  main { padding: 0 12px 32px; }
  .overview { min-height: 110px; gap: 26px; }
  .overview p { display: none; }
  .overview strong { font-size: 30px; }
  .filter-header { grid-template-columns: 1fr auto; }
  .filter-header p { display: none; }
  .filter-actions { align-self: end; }
  .filter-actions button { padding: 0 11px; }
  .facet-grid { grid-template-columns: 1fr; }
  .facet-pattern { grid-column: auto; }
  .facet-bars { max-height: 155px; }
  .time-chart { gap: 1px; }
  .signup-filter-card { grid-column: auto; }
  .signup-controls, .sort-controls, .date-controls { grid-template-columns: 1fr; }
  .user-detail-head { grid-template-columns: 1fr; }
  .history-controls { grid-template-columns: 1fr 1fr; }
  .first-five-panel li { grid-template-columns: 1fr; }
  .target-drill-metrics { grid-template-columns: 1fr 1fr; }
  .admin-access-panel { grid-template-columns: 1fr; }
  #admin-access-form { grid-template-columns: 1fr; }
  .admin-access-message { grid-column: 1; margin-top: 0; }
  .user-page-header { align-items: flex-start; gap: 18px; }
  .user-page-header h2 { max-width: 65vw; font-size: 17px; }
  .user-page-primary { min-width: 90px; }
  .user-page-primary strong { font-size: 28px; }
  .profile-hero { grid-template-columns: 1fr 1fr; }
  .profile-hero > div:nth-child(2) { border-right: 0; }
  .profile-hero > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .profile-facts { grid-template-columns: 1fr; }
  .profile-facts .profile-wide { grid-column: auto; }
  .search-field { grid-column: 1 / -1; }
  .table-meta #refresh-note { display: none; }
  .table-scroll { max-height: calc(100vh - 410px); }
  .new-prompt-notice { left: 16px; right: 16px; bottom: 16px; text-align: center; }
}