:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #17212b;
  background: #f6f7f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: #f6f7f8;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

.capture-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  min-height: 68px;
  padding: 10px clamp(16px, 3vw, 40px);
  border-bottom: 1px solid #dfe3e7;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.back-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #344250;
  border: 1px solid #d8dde2;
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  font-size: 20px;
}

.capture-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.capture-brand h1,
.capture-brand p,
.section-title h2,
.section-title p { margin: 0; }

.capture-brand h1 {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
}

.capture-brand p {
  margin-top: 2px;
  color: #7c8791;
  font-size: 10px;
  line-height: 1.2;
}

.brand-symbol {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  align-items: end;
  gap: 3px;
  width: 19px;
  height: 22px;
}

.brand-symbol i { display: block; background: #1976d2; border-radius: 2px; }
.brand-symbol i:nth-child(1) { height: 9px; }
.brand-symbol i:nth-child(2) { height: 20px; background: #16a085; }
.brand-symbol i:nth-child(3) { height: 14px; background: #f0a227; }

.live-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  justify-content: flex-end;
  color: #66727d;
  font-size: 13px;
  font-weight: 600;
}

.live-state i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a9b1b8;
}

.live-state[data-state="recording"] { color: #137a50; }
.live-state[data-state="recording"] i { background: #19a66f; box-shadow: 0 0 0 4px #e3f6ee; }
.live-state[data-state="starting"],
.live-state[data-state="stopping"] { color: #9a6500; }
.live-state[data-state="starting"] i,
.live-state[data-state="stopping"] i { background: #e7a41d; }
.live-state[data-state="failed"] { color: #bb3030; }
.live-state[data-state="failed"] i { background: #d84a4a; }

main {
  width: min(1180px, 100%);
  margin: 0 auto;
  background: #fff;
  min-height: calc(100vh - 68px);
  border-inline: 1px solid #e4e7ea;
}

.control-band,
.history-band { padding: 28px clamp(18px, 4vw, 48px); }

.control-band { border-bottom: 1px solid #e6e9ec; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.section-title h2 { font-size: 18px; line-height: 1.3; }
.section-title p { margin-top: 4px; color: #7a858f; font-size: 12px; }

.inline-message {
  max-width: min(520px, 50vw);
  color: #257158 !important;
  text-align: right;
  overflow-wrap: anywhere;
}

.inline-message.error { color: #bc3737 !important; }

.capture-form label,
.current-location span {
  display: block;
  margin-bottom: 8px;
  color: #596570;
  font-size: 12px;
  font-weight: 700;
}

.url-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}

.url-controls input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #cfd6dc;
  border-radius: 6px;
  outline: none;
  color: #1f2b35;
  background: #fff;
}

.url-controls input:focus { border-color: #1976d2; box-shadow: 0 0 0 3px #e4f0fb; }

.primary-button,
.stop-button,
.refresh-button {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}

.primary-button { border: 1px solid #1976d2; color: #fff; background: #1976d2; }
.primary-button:hover:not(:disabled) { background: #1268bd; }
.stop-button { border: 1px solid #d7a1a1; color: #a62f2f; background: #fff; }
.stop-button:hover:not(:disabled) { background: #fff4f4; }
.refresh-button { min-height: 34px; padding-inline: 13px; border: 1px solid #d6dce1; color: #40505e; background: #fff; }
button:disabled { cursor: not-allowed; opacity: 0.52; }

.current-location {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #edf0f2;
}

.current-location span { margin: 0; }
.current-location a { color: #286ba4; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.metric-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #e6e9ec;
  background: #fbfcfc;
}

.metric-band div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 88px;
  padding: 22px clamp(18px, 3vw, 34px);
  border-right: 1px solid #e6e9ec;
}

.metric-band div:last-child { border-right: 0; }
.metric-band span { color: #69757f; font-size: 12px; font-weight: 700; }
.metric-band strong { font-size: 25px; font-variant-numeric: tabular-nums; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 13px 12px; border-bottom: 1px solid #e7eaed; text-align: left; vertical-align: middle; }
th { color: #77828c; background: #fafbfb; font-size: 11px; font-weight: 700; }
td { color: #33414d; font-size: 12px; }
th:nth-child(1) { width: 31%; }
th:nth-child(2) { width: 13%; }
th:nth-child(3), th:nth-child(4) { width: 11%; }
th:nth-child(5) { width: 21%; }
th:nth-child(6) { width: 13%; }

.capture-id { display: block; color: #1b2731; font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capture-target { display: block; margin-top: 4px; color: #84909a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; color: #53616c; background: #edf0f2; font-weight: 700; }
.status-badge.completed { color: #14734d; background: #e7f5ee; }
.status-badge.recording, .status-badge.starting { color: #966200; background: #fff4d8; }
.status-badge.failed, .status-badge.interrupted { color: #a83232; background: #fdeaea; }
.download-link { color: #1769aa; font-weight: 700; text-decoration: none; }
.download-link:hover { text-decoration: underline; }

.empty-state { padding: 36px 12px; color: #8a949d; text-align: center; font-size: 13px; }
.empty-state[hidden] { display: none; }

@media (max-width: 760px) {
  .capture-topbar { grid-template-columns: 36px 1fr; }
  .live-state { grid-column: 2; justify-self: start; margin-top: 4px; }
  main { border-inline: 0; }
  .url-controls { grid-template-columns: 1fr 1fr; }
  .url-controls input { grid-column: 1 / -1; }
  .metric-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-band div:nth-child(2) { border-right: 0; }
  .metric-band div:nth-child(-n + 2) { border-bottom: 1px solid #e6e9ec; }
  .section-title { align-items: flex-start; }
  .inline-message { max-width: 48%; }
  table { min-width: 760px; }
}

@media (max-width: 460px) {
  .url-controls { grid-template-columns: 1fr; }
  .url-controls input { grid-column: 1; }
  .current-location { grid-template-columns: 1fr; }
  .metric-band strong { font-size: 21px; }
  .inline-message { display: none; }
}