:root {
  --ink: #18211e;
  --muted: #68726e;
  --canvas: #f3f5f4;
  --surface: #ffffff;
  --line: #dbe2df;
  --line-strong: #c5ceca;
  --green: #167957;
  --green-dark: #0e5d42;
  --green-soft: #e4f3eb;
  --coral: #c74632;
  --coral-soft: #fbe9e5;
  --amber: #96600e;
  --amber-soft: #fff2d8;
  --focus: #b8e6d3;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; letter-spacing: 0; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 320px; background: var(--canvas); }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; }
h1, h2, p { overflow-wrap: anywhere; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 17px;
  font-weight: 760;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--ink);
}

.brand-mark img { width: 18px; height: 18px; filter: invert(1); }

.login-view {
  min-height: 100vh;
  padding: 92px 20px 32px;
  display: grid;
  place-items: center;
  position: relative;
}

.login-brand { position: absolute; top: 28px; left: clamp(20px, 4vw, 64px); }

.login-panel {
  width: min(100%, 430px);
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 52px rgba(24, 33, 30, 0.09);
}

.panel-mark {
  width: 42px;
  height: 42px;
  margin-bottom: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--green-soft);
}

.panel-mark img, .privacy-state img {
  width: 21px;
  height: 21px;
  filter: invert(37%) sepia(64%) saturate(623%) hue-rotate(106deg) brightness(85%);
}

.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 760; }
.login-panel h1 { margin: 0 0 30px; font-size: 30px; line-height: 1.2; }

label {
  display: block;
  margin: 0 0 8px;
  color: #35403c;
  font-size: 13px;
  font-weight: 680;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input { height: 46px; padding: 0 13px; }
select { height: 44px; padding: 0 34px 0 12px; }
textarea { padding: 14px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: #94a29c; }
input:focus, textarea:focus, select:focus { border-color: var(--green); outline: 3px solid var(--focus); outline-offset: 1px; }
.login-panel label:not(:first-of-type) { margin-top: 18px; }

.primary-button, .secondary-button {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 6px;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.primary-button { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.primary-button:hover { border-color: var(--green-dark); background: var(--green-dark); }
.secondary-button { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.secondary-button:hover { border-color: var(--ink); }
.primary-button img, .secondary-button img { width: 17px; height: 17px; }
.primary-button img { filter: invert(1); }
.primary-button:disabled, .secondary-button:disabled { opacity: 0.55; cursor: wait; }
.primary-button.disabled { opacity: 0.42; pointer-events: none; }
.login-panel .primary-button { width: 100%; }

.form-message {
  min-height: 34px;
  margin: 7px 0 0;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
}

.form-message.error { color: var(--coral); }
.form-message.success { color: var(--green-dark); }

.site-header {
  height: 72px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

.header-link {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
}

.header-link:hover { text-decoration: underline; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.admin-name { color: var(--muted); font-size: 13px; }

.icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.icon-button.quiet { border-color: transparent; background: transparent; }
.icon-button:hover { border-color: var(--ink); }
.icon-button img { width: 17px; height: 17px; }

.main-shell {
  width: min(calc(100% - 40px), 1120px);
  min-height: calc(100vh - 130px);
  margin: 0 auto;
  padding: 52px 0 80px;
}

.title-row {
  margin-bottom: 30px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.title-row h1 { margin: 0; font-size: 42px; line-height: 1.15; }
.title-row h1 span { color: var(--green); }

.service-status {
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.service-status i, .input-state i {
  width: 7px;
  height: 7px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green);
}

.tool-panel, .result-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tool-header, .tool-header > div:first-child, .result-heading, .result-heading > div {
  display: flex;
  align-items: center;
}

.tool-header, .result-heading { justify-content: space-between; gap: 20px; }
.tool-header { margin-bottom: 26px; }
.tool-header > div:first-child, .result-heading > div { gap: 12px; }
.tool-header h2, .result-heading h2 { margin: 0; font-size: 18px; }
.step-number { color: var(--green); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; font-weight: 800; }

.segmented {
  padding: 4px;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #e9edeb;
}

.segment {
  min-width: 74px;
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
}

.segment.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(24, 33, 30, 0.12); }

.single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.token-field { grid-column: 1 / -1; }
.token-field textarea { min-height: 145px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.6; }

.batch-toolbar {
  min-height: 46px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.batch-toolbar > div { display: flex; align-items: center; gap: 8px; }
.input-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.input-state.idle i { background: #a5afaa; }
.input-state.error { color: var(--coral); }
.input-state.error i { background: var(--coral); }
.input-state.success { color: var(--green-dark); }

.text-button {
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}

.editor-wrap {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #f8faf9;
}

.editor-wrap:focus-within, .editor-wrap.dragging { border-color: var(--green); box-shadow: 0 0 0 3px var(--focus); }
.editor-wrap textarea { min-height: 310px; display: block; border: 0; outline: none; background: transparent; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.65; }

.submit-row {
  min-height: 64px;
  margin-top: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.submit-row .form-message { flex: 1; }
.run-button { min-width: 180px; }

.result-panel { margin-top: 22px; }
.result-heading { margin-bottom: 24px; }
.status-badge { padding: 5px 9px; border-radius: 4px; font-size: 11px; font-weight: 720; }
.status-badge.running { color: var(--amber); background: var(--amber-soft); }
.status-badge.success { color: var(--green-dark); background: var(--green-soft); }
.status-badge.partial { color: var(--coral); background: var(--coral-soft); }

progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #e6ebe8;
  appearance: none;
}

progress::-webkit-progress-bar { background: #e6ebe8; }
progress::-webkit-progress-value { background: var(--green); }
progress::-moz-progress-bar { background: var(--green); }

.metrics {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metrics > div { min-height: 88px; padding: 17px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.metrics > div:first-child { padding-left: 0; }
.metrics > div:last-child { border-right: 0; }
.metrics strong { font-size: 24px; line-height: 1.2; }
.metrics span { margin-top: 4px; color: var(--muted); font-size: 11px; }

.download-row { margin-top: 22px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.new-task { margin-left: auto; }

.site-footer {
  height: 58px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 11px;
}

.privacy-state { display: inline-flex; align-items: center; gap: 7px; }
.privacy-state img { width: 15px; height: 15px; }
.loading img { animation: pulse 900ms ease-in-out infinite alternate; }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@keyframes pulse { to { opacity: 0.3; } }

.converter-body {
  height: 100vh;
  overflow: hidden;
  background: #eef2f3;
}

.converter-app {
  width: min(100%, 1500px);
  height: 100vh;
  min-height: 0;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.converter-header {
  min-height: 94px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(24, 33, 30, 0.07);
}

.converter-title, .converter-actions {
  display: flex;
  align-items: center;
}

.converter-title { gap: 12px; }
.converter-title h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.converter-title .service-status { margin-left: 4px; }
.converter-actions { justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.converter-actions .header-link { margin-right: 8px; }
.converter-actions .primary-button, .converter-actions .secondary-button { min-height: 42px; }

.converter-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.converter-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.converter-pane-heading {
  min-height: 26px;
  padding: 0 4px;
  display: flex;
  align-items: center;
}

.converter-pane-heading h2 {
  margin: 0;
  color: #53615b;
  font-size: 13px;
  font-weight: 760;
}

.converter-pane textarea, .converter-pane pre {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.converter-pane textarea { resize: none; }
#result-output { cursor: text; }
.converter-pane pre:focus { border-color: var(--green); outline: 3px solid var(--focus); outline-offset: 1px; }
.converter-pane .result-placeholder { color: #8a9691; }

.converter-status {
  min-height: 52px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.converter-status strong { color: var(--ink); font-size: 12px; }
.converter-status.running strong { color: var(--amber); }
.converter-status.success strong { color: var(--green-dark); }
.converter-status.error strong, .converter-status.error span { color: var(--coral); }

.admin-shell { width: min(calc(100% - 40px), 1280px); }
.admin-title-row { margin-bottom: 24px; }
.admin-title-row h1 { font-size: 34px; }

.records-panel {
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.records-toolbar {
  min-height: 82px;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.records-toolbar > div { display: flex; align-items: baseline; gap: 10px; }
.records-toolbar h2 { margin: 0; font-size: 18px; }
.records-count { color: var(--muted); font-size: 12px; }
.search-form { display: flex; align-items: center; gap: 8px; }
.search-form input { width: 230px; height: 44px; }
.search-form .secondary-button { min-height: 44px; }
.search-form button { min-width: 64px; flex: 0 0 auto; }
.records-message { min-height: 0; margin: 0; padding: 0 22px; }
.records-message:not(:empty) { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { height: 44px; color: var(--muted); background: #f8faf9; font-size: 11px; font-weight: 720; }
th:first-child, td:first-child { padding-left: 22px; }
th:last-child, td:last-child { padding-right: 22px; text-align: right; }
tbody tr:hover { background: #f8faf9; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; }
.success-text { color: var(--green-dark); font-weight: 720; }
.failure-text { color: var(--coral); font-weight: 720; }
.empty-state { padding: 72px 20px; color: var(--muted); text-align: center; font-size: 13px; }
.pagination { min-height: 68px; padding: 12px 22px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pagination .secondary-button { min-height: 38px; padding: 0 13px; }
.pagination span { min-width: 90px; color: var(--muted); font-size: 12px; text-align: center; }

.detail-dialog {
  width: min(calc(100% - 32px), 900px);
  max-height: min(82vh, 860px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(24, 33, 30, 0.2);
}

.detail-dialog::backdrop { background: rgba(24, 33, 30, 0.48); }
.dialog-header { padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dialog-header h2 { max-width: 720px; margin: 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: 16px; overflow-wrap: anywhere; }
.dialog-close { font-size: 24px; line-height: 1; }
.detail-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.detail-summary > div { min-height: 74px; padding: 15px 20px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.detail-summary > div:last-child { border-right: 0; }
.detail-summary span { color: var(--muted); font-size: 11px; }
.detail-summary strong { margin-top: 4px; font-size: 15px; }
.detail-records { padding: 22px 24px 26px; }
.record-detail { padding: 18px 0; border-bottom: 1px solid var(--line); }
.record-detail:first-child { padding-top: 0; }
.record-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.record-detail h3 { margin: 0; font-size: 14px; }
.record-value { margin-top: 16px; }
.record-value-toolbar { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.record-value-toolbar span { color: var(--muted); font-size: 12px; font-weight: 720; }
.record-detail pre { max-height: 230px; margin: 5px 0 0; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.compact-button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.record-error { margin: 12px 0 0; color: var(--coral); font-size: 13px; }
.record-unavailable { margin: 14px 0 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; background: #f8faf9; color: var(--muted); font-size: 12px; }
.dialog-downloads { padding-top: 20px; display: flex; gap: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .site-header { height: 62px; padding: 0 16px; }
  .admin-name { display: none; }
  .main-shell { width: min(calc(100% - 28px), 1120px); padding: 34px 0 60px; }
  .title-row { align-items: flex-start; flex-direction: column; }
  .title-row h1 { font-size: 34px; }
  .service-status { align-self: flex-start; }
  .tool-panel, .result-panel { padding: 20px; }
  .tool-header { align-items: stretch; flex-direction: column; }
  .segmented, .segment { flex: 1; }
  .single-grid { grid-template-columns: 1fr; }
  .token-field { grid-column: auto; }
  .batch-toolbar { align-items: stretch; flex-direction: column; }
  .batch-toolbar > div { width: 100%; }
  .batch-toolbar .secondary-button { flex: 1; }
  .submit-row { align-items: stretch; flex-direction: column; }
  .run-button { width: 100%; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics > div:nth-child(2) { border-right: 0; }
  .metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metrics > div:first-child { padding-left: 17px; }
  .download-row .primary-button, .download-row .secondary-button { width: 100%; }
  .new-task { margin-left: 0; }
  .records-toolbar { align-items: stretch; flex-direction: column; }
  .search-form { align-items: stretch; flex-wrap: wrap; }
  .search-form input { width: 100%; }
  .search-form select, .search-form button { flex: 1; }
  .detail-summary { grid-template-columns: repeat(2, 1fr); }
  .detail-summary > div:nth-child(2) { border-right: 0; }
  .detail-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  th:nth-child(4), th:nth-child(5), th:nth-child(6),
  td:nth-child(4), td:nth-child(5), td:nth-child(6) { display: none; }
}

@media (max-width: 900px) {
  .converter-body { height: auto; min-height: 100vh; overflow: auto; }
  .converter-app { height: auto; min-height: 100vh; padding: 14px; }
  .converter-header { align-items: flex-start; flex-direction: column; }
  .converter-actions { width: 100%; justify-content: flex-start; }
  .converter-actions .header-link { margin-right: auto; }
  .converter-panes { grid-template-columns: 1fr; }
  .converter-pane textarea, .converter-pane pre { height: 330px; min-height: 330px; }
}

@media (max-width: 460px) {
  .login-view { padding: 88px 14px 24px; place-items: start center; }
  .login-brand { top: 22px; left: 16px; }
  .login-panel { padding: 28px 22px; }
  .title-row h1 { font-size: 30px; }
  .tool-panel, .result-panel { padding: 18px; }
  .site-footer { padding: 0 16px; }
  .header-actions { gap: 8px; }
  .detail-dialog { width: calc(100% - 20px); max-height: 90vh; }
  .dialog-header, .detail-records { padding-left: 17px; padding-right: 17px; }
  .dialog-downloads .primary-button { width: 100%; }
  th:first-child, td:first-child { display: none; }
  th:nth-child(2), td:nth-child(2) { padding-left: 22px; }
  .converter-title { width: 100%; flex-wrap: wrap; }
  .converter-title h1 { font-size: 22px; }
  .converter-title .service-status { margin-left: auto; }
  .converter-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .converter-actions .header-link { grid-column: 1 / -1; margin: 0 0 2px; }
  .converter-actions .primary-button, .converter-actions .secondary-button { width: 100%; }
  .converter-pane textarea, .converter-pane pre { height: 290px; min-height: 290px; }
}