:root {
  color-scheme: light;
  --public-bg: #f4f6f9;
  --public-panel: #ffffff;
  --public-result: #eef1f6;
  --public-text: #20242c;
  --public-muted: #737b89;
  --public-line: #dfe3ea;
  --public-input: #ffffff;
  --public-primary: #5861d8;
  --public-primary-hover: #4650c6;
  --public-success: #16875e;
  --public-danger: #c54452;
  --public-shadow: 0 18px 44px rgba(35, 42, 57, .09);
}
:root[data-public-theme="dark"] {
  color-scheme: dark;
  --public-bg: #15181f;
  --public-panel: #20242c;
  --public-result: #191d24;
  --public-text: #edf0f5;
  --public-muted: #a3abb8;
  --public-line: #363c47;
  --public-input: #292e37;
  --public-primary: #8f96ff;
  --public-primary-hover: #a6abff;
  --public-success: #55c89b;
  --public-danger: #ff8c98;
  --public-shadow: 0 18px 52px rgba(0, 0, 0, .25);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--public-bg); }
body { min-height: 100vh; margin: 0; color: var(--public-text); background: var(--public-bg); font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { letter-spacing: 0; }
.public-app { width: min(1180px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.public-topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--public-line); }
.public-brand { min-width: 0; display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.public-brand img { width: 38px; height: 38px; }
.public-brand strong, .public-brand small { display: block; letter-spacing: 0; }
.public-brand strong { font-size: 14px; font-weight: 700; }
.public-brand small { margin-top: 2px; color: var(--public-muted); font-size: 10px; text-transform: uppercase; }
.public-top-actions { display: flex; align-items: center; gap: 12px; }
.public-service-state { display: inline-flex; align-items: center; gap: 7px; color: var(--public-muted); font-size: 11px; }
.public-service-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--public-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--public-success) 12%, transparent); }
.public-icon-button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: 6px; background: var(--public-panel); cursor: pointer; }
.public-icon-button:hover { color: var(--public-text); border-color: var(--public-primary); }
.public-workspace { flex: 1; min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); margin: 46px 0 24px; overflow: hidden; border: 1px solid var(--public-line); border-radius: 8px; background: var(--public-panel); box-shadow: var(--public-shadow); }
.public-query-pane, .public-result-pane { min-width: 0; padding: clamp(34px, 5vw, 66px); }
.public-query-pane { display: flex; flex-direction: column; }
.public-result-pane { display: flex; flex-direction: column; border-left: 1px solid var(--public-line); background: var(--public-result); }
.public-section-index { color: var(--public-primary); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.public-query-pane h1 { max-width: 520px; margin: 20px 0 10px; font-size: 40px; line-height: 1.14; font-weight: 720; letter-spacing: 0; }
.public-section-copy { max-width: 520px; margin: 0; color: var(--public-muted); font-size: 13px; line-height: 1.7; }
.public-form { max-width: 540px; margin-top: 36px; display: grid; gap: 18px; }
.public-field { min-width: 0; display: grid; gap: 8px; }
.public-field-label { display: flex; align-items: center; gap: 7px; color: var(--public-text); font-size: 12px; font-weight: 600; }
.public-help-button { width: 17px; height: 17px; padding: 0; display: inline-grid; place-items: center; color: var(--public-muted); border: 1px solid var(--public-line); border-radius: 50%; background: transparent; font-size: 10px; cursor: pointer; }
.public-input-wrap { position: relative; display: block; }
.public-input-wrap input { width: 100%; height: 48px; padding: 0 15px; color: var(--public-text); border: 1px solid var(--public-line); border-radius: 6px; outline: 0; background: var(--public-input); font-size: 13px; transition: border-color .18s, box-shadow .18s; }
.public-input-wrap input:focus { border-color: var(--public-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--public-primary) 13%, transparent); }
.public-input-wrap input:disabled { opacity: .68; }
.public-input-wrap:has(.public-input-action) input { padding-right: 64px; }
.public-input-action { position: absolute; top: 6px; right: 7px; height: 36px; padding: 0 10px; color: var(--public-muted); border: 0; background: transparent; font-size: 11px; cursor: pointer; }
.public-input-action:hover { color: var(--public-primary); }
.public-key-help { margin: -8px 0 0; padding: 9px 11px; color: var(--public-muted); border-left: 2px solid var(--public-primary); background: color-mix(in srgb, var(--public-primary) 6%, transparent); font-size: 11px; line-height: 1.55; }
.public-submit { height: 48px; margin-top: 4px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; border: 0; border-radius: 6px; background: var(--public-primary); font-size: 13px; font-weight: 650; cursor: pointer; }
.public-submit:hover { background: var(--public-primary-hover); }
.public-submit:disabled { cursor: wait; opacity: .7; }
.public-submit b { font-size: 18px; font-weight: 500; }
.public-privacy-note { max-width: 540px; margin-top: auto; padding-top: 30px; display: flex; align-items: flex-start; gap: 10px; }
.public-privacy-note > span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; color: var(--public-success); border: 1px solid color-mix(in srgb, var(--public-success) 35%, var(--public-line)); border-radius: 50%; font-size: 10px; }
.public-privacy-note p, .public-privacy-note strong, .public-privacy-note small { display: block; margin: 0; }
.public-privacy-note strong { font-size: 11px; font-weight: 650; }
.public-privacy-note small { margin-top: 3px; color: var(--public-muted); font-size: 10px; line-height: 1.5; }
.public-result-pane > .public-section-index { color: var(--public-muted); }
.public-result-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 0; text-align: center; }
.public-result-symbol { width: 58px; height: 58px; display: grid; place-items: center; color: var(--public-primary); border: 1px solid var(--public-line); border-radius: 8px; background: var(--public-panel); font-size: 23px; font-weight: 700; }
.public-result-empty h2 { margin: 20px 0 7px; font-size: 17px; letter-spacing: 0; }
.public-result-empty p { max-width: 300px; margin: 0; color: var(--public-muted); font-size: 11px; line-height: 1.65; }
.public-result-pane.is-loading .public-result-symbol { opacity: .72; }
.public-spinner { width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--public-primary) 24%, transparent); border-top-color: var(--public-primary); border-radius: 50%; animation: public-spin .8s linear infinite; }
.public-result-pane.is-error .public-result-symbol { color: var(--public-danger); border-color: color-mix(in srgb, var(--public-danger) 35%, var(--public-line)); }
.public-result-success { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 36px 0; }
.public-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.public-result-badge { color: var(--public-success); font-size: 11px; font-weight: 700; }
.public-result-time { color: var(--public-muted); font-size: 10px; }
.public-code-value { width: 100%; min-height: 102px; margin: 16px 0 10px; padding: 20px; color: var(--public-text); border: 1px solid var(--public-line); border-radius: 7px; background: var(--public-panel); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 40px; font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; cursor: pointer; }
.public-code-value:hover { border-color: var(--public-primary); }
.public-copy { align-self: flex-end; padding: 7px 0; color: var(--public-primary); border: 0; background: transparent; font-size: 11px; font-weight: 650; cursor: pointer; }
.public-result-meta { margin: 28px 0 0; display: grid; gap: 13px; }
.public-result-meta div { min-width: 0; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.public-result-meta dt { color: var(--public-muted); font-size: 10px; }
.public-result-meta dd { min-width: 0; margin: 0; color: var(--public-text); font-size: 11px; overflow-wrap: anywhere; }
.public-result-footer { padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; color: var(--public-muted); border-top: 1px solid var(--public-line); font-size: 9px; }
.public-footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--public-muted); font-size: 10px; }
.public-loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--public-muted); font-size: 12px; }
.public-loading img { width: 42px; height: 42px; }
.public-loading.is-error strong { color: var(--public-danger); }
@keyframes public-spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .public-app { width: min(100% - 24px, 620px); }
  .public-topbar { min-height: 66px; }
  .public-service-state { display: none; }
  .public-workspace { min-height: 0; grid-template-columns: 1fr; margin-top: 18px; }
  .public-query-pane, .public-result-pane { padding: 30px 24px; }
  .public-query-pane { min-height: 570px; }
  .public-result-pane { min-height: 410px; border-top: 1px solid var(--public-line); border-left: 0; }
  .public-query-pane h1 { font-size: 32px; }
  .public-code-value { font-size: 30px; }
  .public-footer { padding: 8px 0 14px; }
}
@media (max-width: 440px) {
  .public-app { width: 100%; padding: 0 12px; }
  .public-brand small { display: none; }
  .public-workspace { border-radius: 6px; }
  .public-query-pane, .public-result-pane { padding: 26px 18px; }
  .public-query-pane { min-height: 540px; }
  .public-result-meta div { grid-template-columns: 1fr; gap: 4px; }
  .public-result-footer, .public-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}