:root {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-muted: #f8fafb;
  --ink: #17212b;
  --muted: #667381;
  --line: #dce2e7;
  --line-strong: #c7d0d8;
  --orange: #d85c0d;
  --orange-dark: #b94b06;
  --orange-soft: #fff0e5;
  --green: #137a55;
  --green-soft: #e7f6ef;
  --blue: #246a9c;
  --blue-soft: #e9f3fa;
  --red: #b9372d;
  --red-soft: #fbecea;
  --yellow: #8a6400;
  --yellow-soft: #fff6d9;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, select, input[type="checkbox"] { cursor: pointer; }
button:disabled, select:disabled, input:disabled { cursor: not-allowed; opacity: .52; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(36, 106, 156, .55); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .92em; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-header {
  position: sticky; top: 0; z-index: 20; height: 66px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #1c2934; }
.brand-mark svg { width: 22px; height: 22px; }
.brand > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.brand strong { font-size: 15px; line-height: 1.25; }
.brand small { color: var(--muted); font-size: 11px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.connection-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.connection-state i { width: 7px; height: 7px; border-radius: 50%; background: #98a3ad; box-shadow: 0 0 0 3px #edf1f3; }
.connection-state.connected { color: var(--green); }
.connection-state.connected i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.button, .icon-button {
  border: 1px solid transparent; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.button { min-height: 40px; padding: 8px 15px; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px); }
.button.primary { color: #fff; background: var(--orange); border-color: var(--orange); }
.button.primary:hover:not(:disabled) { background: var(--orange-dark); border-color: var(--orange-dark); }
.button.secondary { color: #364554; background: #fff; border-color: var(--line-strong); }
.button.secondary:hover:not(:disabled) { background: #f7f9fa; border-color: #aeb9c2; }
.icon-button { width: 36px; height: 36px; padding: 0; color: var(--muted); background: transparent; }
.icon-button:hover:not(:disabled) { color: var(--ink); background: #edf1f4; }
.icon-button.bordered { background: #fff; border-color: var(--line-strong); }

.app-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - 66px); }
.target-panel {
  position: sticky; top: 66px; height: calc(100vh - 66px); padding: 20px 17px;
  display: flex; flex-direction: column; gap: 19px; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
.panel-heading, .workspace-heading, .band-heading, .action-bar, .results-heading, .modal-header, .modal-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.eyebrow { color: var(--orange); font-size: 10px; line-height: 1.2; font-weight: 800; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.panel-heading h2 { margin: 2px 0 0; font-size: 19px; }
.workspace-heading h1 { margin: 3px 0 0; font-size: 26px; line-height: 1.2; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #3f4d5b; font-size: 12px; font-weight: 700; }
.label-with-icon { display: inline-flex; align-items: center; gap: 7px; }
.label-with-icon svg { width: 15px; color: var(--blue); }
input[type="email"], input[type="password"], select, textarea {
  width: 100%; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 9px 11px;
  background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: #acb7c0; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,106,156,.11); }
select { overflow: hidden; text-overflow: ellipsis; }
.resource-field { display: grid; gap: 5px; }
.resource-field > small { color: var(--muted); font-size: 10px; }
.scope-summary { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.scope-summary strong { color: var(--blue); font-size: 24px; line-height: 1; }
.limit-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px; color: #6d5614; background: var(--yellow-soft); border: 1px solid #eadb9e; border-radius: 6px; }
.limit-note svg { flex: none; width: 16px; margin-top: 1px; }
.limit-note p { margin: 0; font-size: 10px; }

.workspace { min-width: 0; padding: 27px clamp(20px, 3vw, 46px) 52px; }
.workspace > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.workspace-heading { margin-bottom: 19px; }
.batch-count { padding: 7px 10px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.batch-count strong { color: var(--orange); font-size: 17px; }
.workspace-band { background: var(--surface); border: 1px solid var(--line); }
.domain-band { border-radius: 7px; padding: 19px 20px 20px; }
.options-band { padding: 18px 20px 20px; border-top: 0; border-radius: 0 0 7px 7px; }
.band-heading { align-items: flex-start; margin-bottom: 13px; }
.band-heading h2, .results-heading h2 { margin-bottom: 2px; font-size: 15px; }
.band-heading p, .results-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.band-actions { display: flex; gap: 7px; }
textarea { min-height: 144px; resize: vertical; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.55; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-row { min-height: 67px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.option-row:hover { background: #fff; border-color: var(--line-strong); }
.option-row > span:nth-child(2) { min-width: 0; }
.option-row strong, .option-row small { display: block; }
.option-row strong { font-size: 12px; }
.option-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.option-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.option-icon svg { width: 17px; }
.option-icon.route { color: var(--orange); background: var(--orange-soft); }
.option-icon.domain { color: var(--green); background: var(--green-soft); }
.option-icon.dns { color: var(--blue); background: var(--blue-soft); }
input[role="switch"] { appearance: none; width: 38px; height: 22px; padding: 2px; margin: 0; border-radius: 11px; background: #a7b1ba; transition: background .15s; }
input[role="switch"]::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
input[role="switch"]:checked { background: var(--green); }
input[role="switch"]:checked::before { transform: translateX(16px); }
.inline-alert { margin-top: 10px; min-height: 38px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--red); background: var(--red-soft); border: 1px solid #efc6c2; border-radius: 5px; font-size: 11px; }
.inline-alert svg { flex: none; width: 15px; }

.action-bar { min-height: 74px; padding: 14px 2px; }
.action-bar p { margin: 0; color: var(--muted); font-size: 11px; }
.action-bar > div { display: flex; gap: 8px; }
.results-section { padding-top: 16px; border-top: 1px solid var(--line); }
.results-heading { align-items: flex-start; margin-bottom: 12px; }
.summary-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.summary { padding: 5px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.summary b { margin-left: 3px; font-size: 12px; }
.summary.create { color: var(--green); background: var(--green-soft); }
.summary.skip { color: var(--blue); background: var(--blue-soft); }
.summary.conflict { color: var(--red); background: var(--red-soft); }
.warning-list { margin-bottom: 10px; display: grid; gap: 6px; }
.warning-item { padding: 8px 10px; display: flex; align-items: flex-start; gap: 8px; color: var(--yellow); background: var(--yellow-soft); border: 1px solid #ebdda3; border-radius: 5px; font-size: 11px; }
.warning-item svg { flex: none; width: 15px; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
table { width: 100%; min-width: 850px; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { color: #5b6875; background: #f7f9fa; font-size: 10px; text-transform: uppercase; }
td { color: #334252; font-size: 11px; }
th:nth-child(1) { width: 18%; } th:nth-child(2) { width: 16%; } th:nth-child(3) { width: 18%; } th:nth-child(4) { width: 30%; } th:nth-child(5) { width: 18%; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover:not(.empty-row) td { background: #fbfcfc; }
td strong, td small { display: block; }
td small { margin-top: 2px; color: var(--muted); }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 4px; font-weight: 700; }
.status-badge svg { width: 12px; height: 12px; }
.status-badge.create { color: var(--green); background: var(--green-soft); }
.status-badge.skip { color: var(--blue); background: var(--blue-soft); }
.status-badge.conflict, .status-badge.failed { color: var(--red); background: var(--red-soft); }
.status-badge.created { color: var(--green); background: var(--green-soft); }
.empty-row td { height: 180px; text-align: center; vertical-align: middle; color: var(--muted); }
.empty-row td > svg, .empty-row td > span { display: block; margin: 0 auto; }
.empty-row td > svg { width: 25px; height: 25px; margin-bottom: 8px; color: #9aa5ae; }

.modal { width: min(92vw, 470px); padding: 0; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 18px 60px rgba(17,29,40,.22); }
.modal::backdrop { background: rgba(19,29,38,.48); backdrop-filter: blur(2px); }
.modal form { padding: 22px; display: grid; gap: 17px; }
.modal-header { justify-content: flex-start; }
.modal-header h2 { margin-bottom: 2px; font-size: 19px; }
.modal-header p { margin: 0; color: var(--muted); font-size: 11px; }
.modal-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--orange); background: var(--orange-soft); border-radius: 7px; }
.modal-icon.warning { color: var(--yellow); background: var(--yellow-soft); }
.secret-input { position: relative; display: block; }
.secret-input input { padding-right: 43px; }
.secret-input .icon-button { position: absolute; top: 2px; right: 2px; }
.modal-warning { padding: 10px; display: flex; gap: 8px; color: #6d5614; background: var(--yellow-soft); border: 1px solid #eadb9e; border-radius: 5px; font-size: 10px; }
.modal-warning svg { flex: none; width: 15px; }
.form-error { margin: -3px 0 0; padding: 9px 10px; color: var(--red); background: var(--red-soft); border-radius: 5px; font-size: 11px; }
.modal-submit { width: 100%; }
.confirm-summary { padding: 12px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 6px; font-size: 12px; }
.confirm-summary div { display: flex; justify-content: space-between; gap: 12px; }
.modal-actions { justify-content: flex-end; padding-top: 4px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: min(420px, calc(100vw - 40px)); padding: 11px 14px; color: #fff; background: #24323e; border-radius: 6px; box-shadow: 0 10px 30px rgba(18,29,38,.22); font-size: 12px; }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .target-panel { position: static; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-right: 0; border-bottom: 1px solid var(--line); }
  .panel-heading, .scope-summary, .limit-note { grid-column: 1 / -1; }
  .scope-summary { margin-top: 0; }
  .workspace { padding-top: 22px; }
}

@media (max-width: 650px) {
  .app-header { padding: 0 12px; }
  .connection-state span { display: none; }
  .target-panel { grid-template-columns: 1fr; padding: 17px 14px; }
  .panel-heading, .scope-summary, .limit-note { grid-column: auto; }
  .workspace { padding: 19px 12px 38px; }
  .workspace-heading { align-items: flex-start; }
  .workspace-heading h1 { font-size: 23px; }
  .domain-band, .options-band { padding: 16px 14px; }
  .option-grid { grid-template-columns: 1fr; }
  .action-bar { align-items: stretch; flex-direction: column; }
  .action-bar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .action-bar .button { padding-left: 9px; padding-right: 9px; }
  .results-heading { flex-direction: column; }
  .summary-chips { justify-content: flex-start; }
  .modal { width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin-left: auto; margin-right: auto; }
  .modal form { min-width: 0; padding: 18px; }
  .modal .field, .modal input, .modal .secret-input { min-width: 0; }
}