:root {
  color: #17232d;
  background: #eef1f3;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  background: #eef1f3;
}

button, textarea { font: inherit; }

.shell {
  width: min(100%, 620px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.eyebrow {
  margin: 0 0 4px;
  color: #5d6a73;
  font-size: 12px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 21px; line-height: 1.3; letter-spacing: 0; }
h2 { margin-bottom: 14px; font-size: 15px; letter-spacing: 0; }

.icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid #cbd2d7;
  border-radius: 6px;
  background: #fff;
  color: #26343e;
  font-size: 23px;
  cursor: pointer;
}

.notice {
  min-height: 42px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border-left: 3px solid #78868f;
  background: #fff;
  color: #46545e;
  font-size: 13px;
  line-height: 1.55;
}

.notice.success { border-color: #1d8f58; color: #14663f; }
.notice.error { border-color: #d14b45; color: #a32925; }

.panel {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #d6dce0;
  border-radius: 7px;
  background: #fff;
}

.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; min-height: 49px; border-top: 1px solid #edf0f2; }
.steps li:first-child { border-top: 0; }
.steps strong, .steps small { display: block; }
.steps strong { font-size: 13px; font-weight: 600; }
.steps small { margin-top: 3px; color: #74818a; font-size: 11px; overflow-wrap: anywhere; }
.marker { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #c8d0d5; border-radius: 50%; color: #687680; font-size: 11px; }
.steps li.ok .marker { border-color: #1d8f58; background: #1d8f58; color: #fff; }
.steps li.error .marker { border-color: #d14b45; background: #d14b45; color: #fff; }
.steps li.running .marker { border-color: #2878d0; color: #2878d0; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge { max-width: 48%; padding: 4px 7px; border-radius: 4px; background: #edf2f6; color: #51616d; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label { display: block; margin-bottom: 7px; color: #4c5a64; font-size: 12px; }
textarea { width: 100%; resize: vertical; min-height: 116px; padding: 11px; border: 1px solid #cbd3d8; border-radius: 5px; color: #17232d; line-height: 1.55; outline: none; }
textarea:focus { border-color: #2878d0; box-shadow: 0 0 0 2px rgba(40, 120, 208, .12); }
.counter { margin: 5px 0 12px; color: #7a858d; font-size: 11px; text-align: right; }

.primary {
  width: 100%;
  min-height: 43px;
  border: 0;
  border-radius: 5px;
  background: #1d7f56;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.primary:hover:not(:disabled) { background: #166b48; }
.primary:disabled { background: #b9c1c6; cursor: not-allowed; }
.hint { margin: 10px 0 0; color: #75818a; font-size: 11px; line-height: 1.55; }

details summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.diagnostics dl { margin: 15px 0; }
.diagnostics dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 6px 0; border-top: 1px solid #edf0f2; font-size: 11px; }
.diagnostics dt { color: #7a858d; }
.diagnostics dd { margin: 0; overflow-wrap: anywhere; font-family: Consolas, monospace; }
pre { max-height: 220px; margin: 0; padding: 10px; overflow: auto; border-radius: 4px; background: #182128; color: #dce5ea; font: 10px/1.55 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 380px) {
  .shell { padding: 14px 10px 30px; }
  .panel { padding: 14px 12px; }
  h1 { font-size: 18px; }
}