@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&display=swap");

:root {
  --ink: #171b1d;
  --muted: #697176;
  --paper: #f4f2ec;
  --surface: #fffef9;
  --line: #d7d5ce;
  --green: #0f766e;
  --green-soft: #d8ebe6;
  --amber: #b45309;
  --amber-soft: #f5e6c8;
  --red: #b42318;
  --accent: #ef5b2a;
  --mono: "IBM Plex Mono", monospace;
  --sans: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: linear-gradient(rgba(23, 27, 29, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 27, 29, .035) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: var(--sans);
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar {
  height: 68px;
  padding: 0 clamp(18px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  color: #f8f6ef;
  background: var(--ink);
  border-bottom: 3px solid var(--accent);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; width: fit-content; }
.brand strong, .brand small { display: block; letter-spacing: 0; }
.brand strong { font-size: 17px; line-height: 1; }
.brand small { margin-top: 4px; color: #aeb6b9; font-family: var(--mono); font-size: 9px; }
.brand-mark { display: flex; height: 30px; align-items: center; gap: 3px; }
.brand-mark i { display: block; width: 3px; background: var(--accent); }
.brand-mark i:nth-child(1), .brand-mark i:nth-child(5) { height: 9px; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { height: 20px; }
.brand-mark i:nth-child(3) { height: 30px; }
.tabs { height: 100%; display: flex; align-items: stretch; }
.tab { padding: 0 22px; border: 0; color: #aeb6b9; background: transparent; font-weight: 600; }
.tab.is-active { color: #fff; box-shadow: inset 0 -3px #fff; }
.session-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.connection { color: #b9c1c3; font-family: var(--mono); font-size: 11px; }
.connection i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4ade80; }
main { width: min(1540px, 100%); margin: 0 auto; padding: 34px clamp(18px, 3vw, 44px) 50px; }
.view { display: none; }
.view.is-active { display: block; animation: reveal .32s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 6px; color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 500; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 54px); line-height: .95; letter-spacing: 0; }
h2, h3, p { letter-spacing: 0; }
.button { min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-weight: 600; }
.button-dark { color: #fff; background: var(--ink); }
.button-accent { color: #fff; background: var(--accent); }
.button-quiet { min-height: 32px; padding: 0 10px; color: #dce0e1; border-color: #4a5052; background: transparent; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--surface); }
.metrics article { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--line); }
.metrics article:last-child { border-right: 0; }
.metrics span, .metrics small { display: block; color: var(--muted); }
.metrics span { font-size: 13px; font-weight: 600; }
.metrics strong { display: block; margin: 6px 0 1px; font-family: var(--mono); font-size: 30px; font-weight: 500; }
.metrics small { font-size: 11px; }
.workspace { display: grid; grid-template-columns: minmax(650px, 1.45fr) minmax(360px, .75fr); min-height: 590px; margin-top: 18px; border: 1px solid var(--line); background: var(--surface); }
.cluster-list { min-width: 0; border-right: 1px solid var(--line); }
.toolbar { min-height: 76px; padding: 14px 18px; display: grid; grid-template-columns: 1fr 180px; gap: 12px; border-bottom: 1px solid var(--line); background: #eeece5; }
label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
input, select, textarea { width: 100%; border: 1px solid #c4c4bd; border-radius: 3px; color: var(--ink); background: var(--surface); outline: none; }
input, select { height: 38px; padding: 0 11px; }
textarea { resize: vertical; padding: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(15, 118, 110, .13); }
.table-wrap { min-height: 454px; overflow: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { padding: 11px 14px; color: var(--muted); background: #faf9f4; border-bottom: 1px solid var(--line); font-size: 10px; text-align: left; text-transform: uppercase; }
td { padding: 13px 14px; border-bottom: 1px solid #e8e6df; font-size: 13px; }
tbody tr { transition: background .14s ease; }
tbody tr:hover, tbody tr.is-selected { background: #e8f1ee; }
tbody tr { cursor: pointer; }
th:first-child { width: 42%; } th:nth-child(2) { width: 18%; } th:nth-child(3), th:nth-child(4) { width: 10%; } th:last-child { width: 20%; }
.uuid { font-family: var(--mono); font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-stable { color: var(--green); background: var(--green-soft); }
.status-provisional { color: var(--amber); background: var(--amber-soft); }
.status-merged { color: #60686c; background: #e3e5e5; }
.empty-state { padding: 80px 20px; color: var(--muted); text-align: center; }
.pagination { min-height: 58px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; }
.pager { width: 34px; height: 34px; margin-left: 4px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.pager:disabled { opacity: .35; cursor: default; }
.detail-panel { min-width: 0; overflow: hidden; background: #fbfaf5; }
.detail-placeholder { min-height: 590px; display: grid; place-content: center; padding: 30px; color: var(--muted); text-align: center; }
.detail-placeholder strong { color: var(--ink); font-size: 18px; }
.detail-placeholder p { max-width: 260px; margin: 5px auto; font-size: 13px; }
.crosshair { width: 48px; height: 48px; margin: 0 auto 16px; border: 1px solid var(--line); border-radius: 50%; background: linear-gradient(90deg, transparent 48%, var(--line) 49%, var(--line) 51%, transparent 52%), linear-gradient(transparent 48%, var(--line) 49%, var(--line) 51%, transparent 52%); }
.detail-content { animation: reveal .24s ease both; }
.detail-head { padding: 22px; color: #fff; background: var(--ink); }
.detail-head h2 { margin: 8px 0 14px; font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.detail-facts span { color: #9ba3a6; font-size: 10px; text-transform: uppercase; }
.detail-facts strong { display: block; margin-top: 3px; font-family: var(--mono); font-size: 16px; }
.detail-section { padding: 19px 22px; border-bottom: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 12px; font-size: 14px; }
.merge-row { display: flex; gap: 8px; }
.merge-row input { font-family: var(--mono); font-size: 11px; }
.merge-row button { flex: 0 0 auto; }
.event { padding: 10px 0; border-top: 1px solid #e3e1da; }
.event:first-of-type { border-top: 0; }
.event-top { display: flex; justify-content: space-between; gap: 10px; }
.event strong { font-size: 12px; }
.event time, .event small { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.event p { margin: 5px 0 0; color: #4e5659; font-size: 12px; }
.test-layout { display: grid; grid-template-columns: minmax(420px, .8fr) minmax(500px, 1.2fr); border: 1px solid var(--line); background: var(--surface); }
.test-form { padding: 24px; border-right: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 180px; gap: 12px; }
.test-form > label, .test-form > .file-drop { display: block; margin-top: 18px; }
.file-drop { padding: 28px; border: 1px dashed #9ca4a3; background: #f4f6f2; text-align: center; cursor: pointer; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop strong, .file-drop span { display: block; margin: 0; text-transform: none; }
.file-drop strong { color: var(--ink); font-size: 16px; }
.file-drop span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.test-form .button { width: 100%; margin-top: 18px; }
.result-panel { min-height: 610px; padding: 24px; background-color: #202527; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size: 100% 28px; color: #e9edeb; }
.result-empty { height: 100%; min-height: 550px; display: grid; place-content: center; text-align: center; }
.result-empty span { color: var(--accent); font-family: var(--mono); font-size: 12px; }
.result-empty strong { margin-top: 8px; font-size: 18px; }
.result-head { display: flex; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #454c4f; }
.result-head h2 { margin: 0; font-size: 20px; }
.transcript-result { padding: 18px 0; border-bottom: 1px solid #454c4f; }
.transcript-result p { margin: 8px 0 0; color: #d7ddda; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.speaker-result { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 18px 0; border-bottom: 1px solid #3d4446; }
.speaker-result h3 { margin: 0; font-size: 16px; }
.speaker-result p { grid-column: 1 / -1; margin: 0; color: #aeb7b8; font-family: var(--mono); font-size: 11px; }
.score { font-family: var(--mono); color: #7dd3c7; }
.model-pill { padding: 7px 10px; border: 1px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: 10px; }
dialog { width: min(420px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(14, 18, 19, .78); backdrop-filter: blur(3px); }
#auth-form { padding: 32px; }
.auth-brand { width: 54px; height: 54px; margin-bottom: 30px; display: grid; place-items: center; color: #fff; background: var(--ink); font-family: var(--mono); }
#auth-form h2 { margin: 0 0 24px; font-size: 28px; }
#auth-form .button { width: 100%; margin-top: 18px; }
.form-error { color: var(--red); font-size: 12px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 380px; padding: 12px 16px; border-left: 4px solid var(--green); color: #fff; background: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,.2); font-size: 13px; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto; }
  .tabs { order: 3; grid-column: 1 / -1; height: 42px; }
  .topbar { height: auto; padding-top: 12px; }
  .connection { display: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics article:nth-child(2) { border-right: 0; }
  .metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .workspace, .test-layout { grid-template-columns: 1fr; }
  .cluster-list, .test-form { border-right: 0; }
  .detail-panel { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  main { padding-top: 24px; }
  .brand small, .session-actions .button { display: none; }
  .tab { padding: 0 14px; }
  .page-heading { align-items: start; }
  h1 { font-size: 38px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics article { padding: 14px; }
  .toolbar, .form-grid { grid-template-columns: 1fr; }
  .workspace { margin-left: -18px; margin-right: -18px; border-left: 0; border-right: 0; }
  th:nth-child(4), td:nth-child(4), th:last-child, td:last-child { display: none; }
  th:first-child { width: 58%; } th:nth-child(2) { width: 28%; } th:nth-child(3) { width: 14%; }
  .test-layout { margin-left: -18px; margin-right: -18px; }
}