:root {
  --ink: #16231d;
  --ink-soft: #536159;
  --paper: #f3f5f1;
  --surface: #ffffff;
  --line: #dce2dc;
  --line-strong: #cbd4cc;
  --green-950: #10271d;
  --green-900: #173427;
  --green-700: #2d6f50;
  --green-600: #3f8563;
  --green-100: #e5f0e9;
  --green-50: #f0f7f3;
  --amber: #a96716;
  --amber-bg: #fff7e8;
  --red: #a33b32;
  --red-dark: #882f28;
  --red-bg: #fff2f0;
  --shadow: 0 1px 2px rgb(16 39 29 / 4%), 0 12px 36px rgb(16 39 29 / 5%);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; }
.is-hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 18px 22px; display: flex; flex-direction: column; color: #e8f0eb; background: var(--green-950); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; color: inherit; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; position: relative; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 15%); border-radius: 11px; background: rgb(255 255 255 / 6%); }
.brand-mark span { position: absolute; width: 15px; height: 19px; border: 1.5px solid #9ed0b4; border-radius: 2px; }
.brand-mark span:first-child { transform: translate(-3px, -2px); opacity: .55; }
.brand-mark span:last-child { transform: translate(3px, 2px); background: var(--green-950); }
.brand strong { display: block; font-size: 15px; letter-spacing: .04em; }
.nav { margin-top: 46px; display: grid; gap: 7px; }
.nav-item { position: relative; width: 100%; min-height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 10px; color: #9fb4a8; background: transparent; cursor: pointer; text-align: left; transition: color 160ms ease, background-color 160ms ease, transform 140ms var(--ease-out); }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.is-active { color: #f7fbf8; background: rgb(255 255 255 / 9%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%); }
.nav-item:active { transform: scale(.98); }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 20px; color: #b9ccbf; background: rgb(255 255 255 / 8%); font-size: 11px; text-align: center; }
.sidebar-status { margin-top: auto; padding: 16px 12px 4px; border-top: 1px solid rgb(255 255 255 / 9%); }
.sidebar-status-title { margin-bottom: 12px; color: #708e7c; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.connection-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; min-height: 29px; font-size: 12px; }
.connection-row em { color: #789382; font-size: 11px; font-style: normal; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6e7c73; box-shadow: 0 0 0 3px rgb(110 124 115 / 12%); }
.status-dot.is-online { background: #67c18a; box-shadow: 0 0 0 3px rgb(103 193 138 / 13%); }
.status-dot.is-offline { background: #df776f; box-shadow: 0 0 0 3px rgb(223 119 111 / 13%); }
.status-dot.is-checking { animation: breathe 1.5s ease-in-out infinite; }

.main { min-width: 0; padding: 0 46px 72px; }
.topbar { min-height: 94px; max-width: 1260px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.flow-guide { margin-top: 9px; display: flex; align-items: center; gap: 8px; color: #748077; font-size: 10px; }
.flow-guide span { display: inline-flex; align-items: center; gap: 5px; }
.flow-guide b { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--green-100); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.flow-guide i { color: #a3aca6; font-style: normal; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.execute-state { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; }
.execute-state span { width: 7px; height: 7px; border-radius: 50%; background: #89928c; }
.execute-state.is-on span { background: var(--green-600); }
.execute-state.is-off span { background: var(--amber); }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; box-shadow: 0 1px 2px rgb(16 39 29 / 3%); transition: border-color 160ms ease, transform 140ms var(--ease-out); }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:active { transform: scale(.96); }

.view { display: none; max-width: 1260px; margin: 0 auto; }
.view.is-active { display: block; }

.section-card { margin: 20px 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }
.section-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.section-heading p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mode-card { position: relative; min-height: 64px; padding: 0 48px 0 20px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; cursor: pointer; transition: border-color 170ms ease, background-color 170ms ease, transform 140ms var(--ease-out), box-shadow 170ms ease; }
.mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card.is-selected { border-color: #76a58a; background: var(--green-50); box-shadow: inset 0 0 0 1px rgb(63 133 99 / 12%); }
.mode-card:active { transform: scale(.992); }
.mode-route { display: flex; align-items: center; gap: 9px; color: var(--green-700); font-size: 13px; line-height: 1; }
.mode-route i { color: #91a098; font-style: normal; }
.mode-check { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: transparent; background: #fff; font-size: 11px; transform: translateY(-50%); }
.mode-card.is-selected .mode-check { border-color: var(--green-700); color: #fff; background: var(--green-700); }

.transfer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: stretch; }
.endpoint-panel { min-height: 338px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfb; }
.target-panel { background: #fafcfb; }
.endpoint-title { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; padding-bottom: 17px; border-bottom: 1px solid #e5e9e5; }
.endpoint-title strong { display: block; }
.endpoint-title strong { font-size: 13px; }
.endpoint-badge { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--green-700); background: var(--green-100); font-size: 12px; font-weight: 700; }
.field-label { display: block; margin: 15px 0 7px; color: #435047; font-size: 11px; font-weight: 650; }
.text-input, .select-input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; color: var(--ink); background: #fff; font-size: 13px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.text-input:focus, .select-input:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px rgb(63 133 99 / 10%); }
.text-input::placeholder { color: #9ba49e; }
.select-input:disabled, .text-input:disabled { color: #8d9790; background: #f4f6f4; cursor: not-allowed; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.primary-button, .secondary-button, .danger-button { min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 650; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 140ms var(--ease-out); }
.primary-button { border: 1px solid var(--green-700); color: #fff; background: var(--green-700); }
.primary-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.secondary-button { border: 1px solid var(--line-strong); color: #34433a; background: #fff; }
.danger-button { border: 1px solid var(--red); color: #fff; background: var(--red); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { opacity: .45; cursor: not-allowed; }
.primary-button:not(:disabled):active, .secondary-button:not(:disabled):active, .danger-button:not(:disabled):active { transform: scale(.97); }
.entity-empty { height: 132px; margin-top: 15px; display: grid; place-items: center; border: 1px dashed #d3dad4; border-radius: 10px; color: #8c978f; font-size: 11px; }
.entity-card { margin-top: 15px; padding: 15px; display: grid; grid-template-columns: 38px 1fr; gap: 11px; border: 1px solid #d7e2d9; border-radius: 11px; background: var(--green-50); }
.entity-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--green-700); font-size: 13px; font-weight: 700; }
.entity-main { min-width: 0; padding-top: 2px; }
.entity-main strong, .entity-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-main strong { font-size: 13px; }
.entity-main span { margin-top: 4px; color: var(--ink-soft); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.entity-facts { grid-column: 1 / -1; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 16px; }
.entity-facts div { min-width: 0; padding-top: 9px; border-top: 1px solid #dbe7de; }
.entity-facts dt { margin-bottom: 4px; color: #7d8b82; font-size: 9px; }
.entity-facts dd { margin: 0; overflow: hidden; color: #34443a; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.transfer-arrow { display: flex; align-items: center; justify-content: center; color: #8a978f; }
.transfer-arrow span { width: 36px; height: 1px; position: relative; background: #aab6ae; }
.transfer-arrow span::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #aab6ae; border-right: 1px solid #aab6ae; transform: rotate(45deg); }
.locked-field { height: 42px; padding: 0 11px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; border: 1px solid #d3dbd5; border-radius: 9px; background: #f4f6f4; }
.locked-field > span { color: var(--green-700); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.locked-field strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.combobox-wrap { position: relative; }
.combo-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 220px; overflow-y: auto; padding: 5px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: 0 14px 38px rgb(16 39 29 / 14%); transform-origin: top; animation: pop-in 160ms var(--ease-out); }
.combo-option { width: 100%; padding: 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; }
.combo-option strong { font-size: 11px; }
.combo-option span { margin-left: auto; color: #7d8981; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.selected-org { margin-top: 8px; padding: 8px 10px; border: 1px solid #d7e3da; border-radius: 8px; color: #365342; background: var(--green-50); font-size: 10px; }
.form-footer { margin-top: 20px; padding-top: 18px; display: flex; justify-content: flex-end; border-top: 1px solid #e6e9e6; }

.plan-heading { align-items: center; }
.plan-heading > div { flex: 1; }
.plan-status { padding: 6px 9px; border-radius: 7px; color: var(--green-700); background: var(--green-100); font-size: 10px; font-weight: 700; }
.plan-status.is-blocked { color: var(--red); background: var(--red-bg); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.metric { min-width: 0; padding: 16px 17px; background: #fbfcfb; }
.metric > span, .metric strong, .metric small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric > span { color: #7c8880; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.metric strong { margin-top: 9px; font-size: 17px; letter-spacing: -.025em; }
.metric small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }
.message-box { margin: 10px 0; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid; border-radius: 10px; font-size: 11px; line-height: 1.55; }
.message-box::before { content: "i"; flex: 0 0 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 10px/1 Georgia, serif; }
.message-box.warning { border-color: #ead6b6; color: #7d531b; background: var(--amber-bg); }
.message-box.blocker { border-color: #e9c8c4; color: #803a33; background: var(--red-bg); }
.message-box.blocker::before { content: "!"; }
.table-toolbar { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.segmented { padding: 3px; display: inline-flex; border: 1px solid var(--line); border-radius: 9px; background: #f5f7f5; }
.segmented button { min-width: 58px; height: 29px; border: 0; border-radius: 6px; color: #6c776f; background: transparent; cursor: pointer; font-size: 10px; }
.segmented button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 3px rgb(16 39 29 / 9%); }
.search-field { width: 220px; height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.search-field svg { width: 15px; fill: none; stroke: #829087; stroke-width: 1.7; stroke-linecap: round; }
.search-field input { min-width: 0; width: 100%; border: 0; outline: none; font-size: 11px; }
.data-table-wrap { max-height: 420px; margin-top: 11px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th { position: sticky; top: 0; z-index: 1; height: 38px; padding: 0 13px; color: #718078; background: #f5f7f5; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.data-table td { height: 43px; padding: 0 13px; border-top: 1px solid #edf0ed; }
.data-table .table-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; }
.align-right { text-align: right !important; }
.db-chip, .schema-chip { display: inline-flex; padding: 4px 6px; border-radius: 5px; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.db-chip.main { color: #56539a; background: #eeedfb; }
.db-chip.item { color: var(--green-700); background: var(--green-100); }
.schema-chip.ok { color: var(--green-700); background: var(--green-100); }
.schema-chip.bad { color: var(--red); background: var(--red-bg); }
.table-empty { padding: 30px; color: #879188; text-align: center; font-size: 11px; }
.execute-panel { margin-top: 22px; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .7fr); gap: 26px; align-items: center; border: 1px solid #e2ccc9; border-radius: 12px; background: #fffafa; }
.execute-panel.is-blocked { opacity: .64; }
.execute-copy { display: flex; align-items: flex-start; gap: 12px; }
.danger-icon { flex: 0 0 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--red); font-weight: 800; }
.execute-copy strong { font-size: 13px; }
.execute-copy p { margin: 5px 0 8px; color: #765b57; font-size: 10px; line-height: 1.5; }
.execute-copy code { padding: 4px 6px; border: 1px solid #ecd8d5; border-radius: 5px; color: #7d342e; background: #fff; font-size: 10px; }
.execute-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

.job-section { padding: 0; overflow: hidden; }
.job-hero { padding: 27px 30px 23px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 16px; background: #fafcfb; }
.job-state-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #c8dbce; border-radius: 14px; background: var(--green-100); }
.job-state-icon span { width: 20px; height: 20px; border: 2px solid #8bb29a; border-top-color: var(--green-700); border-radius: 50%; animation: spin .8s linear infinite; }
.job-state-icon.is-done span { width: 18px; height: 10px; border: 0; border-left: 2px solid var(--green-700); border-bottom: 2px solid var(--green-700); border-radius: 0; animation: none; transform: rotate(-45deg) translate(1px, -2px); }
.job-state-icon.is-failed { border-color: #e5c2bd; background: var(--red-bg); }
.job-state-icon.is-failed span { width: auto; height: auto; border: 0; animation: none; }
.job-state-icon.is-failed span::before { content: "!"; color: var(--red); font-weight: 800; }
.job-hero-copy > span { color: var(--green-700); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.job-hero-copy h3 { margin: 5px 0 5px; font-size: 17px; }
.job-hero-copy p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.job-target { min-width: 150px; padding-left: 22px; border-left: 1px solid var(--line); text-align: right; }
.job-target span, .job-target strong { display: block; }
.job-target span { color: #7c8880; font-size: 9px; }
.job-target strong { margin-top: 7px; font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.progress-track { height: 4px; background: #e7ece8; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--green-600); transition: width 220ms var(--ease-out); }
.job-meta { padding: 10px 30px; display: flex; justify-content: space-between; color: #718078; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; border-bottom: 1px solid var(--line); }
.job-columns { padding: 25px 30px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.subheading { min-height: 28px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.subheading h4 { margin: 0; font-size: 12px; }
.subheading span { color: #859087; font-size: 9px; }
.timeline { max-height: 330px; margin: 15px 0 0; padding: 0 0 0 8px; overflow-y: auto; list-style: none; }
.timeline li { position: relative; padding: 0 0 17px 22px; color: #69756d; font-size: 10px; line-height: 1.55; }
.timeline li::before { content: ""; position: absolute; top: 4px; left: 1px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #8eaa98; box-shadow: 0 0 0 1px #a9bbae; }
.timeline li::after { content: ""; position: absolute; top: 13px; bottom: -2px; left: 5px; width: 1px; background: #dce3dd; }
.timeline li:last-child::after { display: none; }
.timeline li strong { display: block; margin-bottom: 2px; color: #34443a; font-size: 10px; }
.timeline li time { margin-left: 6px; color: #9aa39d; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.validation-list { max-height: 330px; margin-top: 10px; overflow-y: auto; }
.validation-row { min-height: 39px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf0ed; font-size: 10px; }
.validation-row strong { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.validation-row span { color: #77837b; }
.validation-row i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--green-700); background: var(--green-100); font-size: 10px; font-style: normal; }
.validation-empty { padding: 55px 20px; color: #8b958e; text-align: center; font-size: 10px; }
.job-footer { padding: 16px 30px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); background: #fafbfa; }

.history-header { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.history-header h2 { margin: 0; font-size: 20px; }
.history-list { display: grid; gap: 11px; }
.history-card { padding: 18px 20px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgb(16 39 29 / 3%); cursor: pointer; transition: border-color 160ms ease, transform 140ms var(--ease-out); }
.history-card:active { transform: scale(.995); }
.history-state { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--green-700); background: var(--green-100); font-size: 13px; font-weight: 800; }
.history-state.failed, .history-state.interrupted { color: var(--red); background: var(--red-bg); }
.history-state.running, .history-state.queued { color: var(--amber); background: var(--amber-bg); }
.history-main { min-width: 0; }
.history-main strong, .history-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-main strong { font-size: 12px; }
.history-main span { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }
.history-route { color: #66736b; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.history-time { min-width: 112px; color: #8b958e; font-size: 10px; text-align: right; }
.history-empty { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); border-radius: 15px; color: #89948c; }
.history-empty strong { color: #536159; font-size: 13px; }

.token-dialog { width: min(410px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; color: var(--ink); box-shadow: 0 30px 90px rgb(9 25 17 / 28%); }
.token-dialog::backdrop { background: rgb(11 27 19 / 52%); backdrop-filter: blur(3px); }
.token-dialog form { padding: 30px; }
.token-dialog h2 { margin: 20px 0 8px; font-size: 20px; }
.token-dialog p { margin: 0 0 21px; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.dialog-mark { width: 43px; height: 43px; position: relative; display: grid; place-items: center; border-radius: 12px; background: var(--green-100); }
.dialog-mark span { position: absolute; width: 15px; height: 20px; border: 1.5px solid var(--green-700); border-radius: 2px; }
.dialog-mark span:first-child { transform: translate(-3px, -2px); opacity: .45; }
.dialog-mark span:last-child { transform: translate(3px, 2px); background: var(--green-100); }
.dialog-actions { margin-top: 17px; display: flex; justify-content: flex-end; }
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 260px; max-width: 390px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #cad9cf; border-radius: 10px; color: #2c4737; background: #f7fbf8; box-shadow: 0 14px 38px rgb(16 39 29 / 16%); font-size: 11px; line-height: 1.5; opacity: 1; transform: translateY(0); transition: opacity 160ms ease, transform 180ms var(--ease-out); }
.toast.error { border-color: #e6c4c0; color: #793a34; background: #fff7f6; }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }

.loading { position: relative; pointer-events: none; }
.loading > span { opacity: 0; }
.loading::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / 42%); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.secondary-button.loading::after { border-color: rgb(45 111 80 / 20%); border-top-color: var(--green-700); }

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { color: #e3eee7; background: rgb(255 255 255 / 6%); }
  .icon-button:hover, .secondary-button:hover { border-color: #9eb1a4; }
  .primary-button:not(:disabled):hover { background: #245f44; }
  .danger-button:not(:disabled):hover { background: var(--red-dark); }
  .mode-card:hover { border-color: #9bb6a5; }
  .combo-option:hover { background: var(--green-50); }
  .history-card:hover { border-color: #adc0b3; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .35; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(-3px); } }

@media (max-width: 1040px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .sidebar { padding-inline: 13px; }
  .brand { justify-content: center; padding: 0; }
  .brand > span:last-child, .nav-item:not(.is-active)::after, .nav-item { font-size: 0; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item svg { width: 20px; }
  .nav-count { position: absolute; top: 5px; right: 4px; min-width: 17px; padding: 2px 4px; font-size: 8px; }
  .sidebar-status { padding-inline: 0; }
  .sidebar-status-title, .connection-row span, .connection-row em { display: none; }
  .connection-row { display: inline-grid; margin: 0 5px; }
  .main { padding-inline: 28px; }
  .execute-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 50; top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 64px; padding: 8px 16px; flex-direction: row; align-items: center; box-shadow: 0 -8px 28px rgb(10 28 18 / 16%); }
  .brand, .sidebar-status { display: none; }
  .nav { width: 100%; margin: 0; grid-template-columns: repeat(2, 1fr); }
  .nav-item { min-height: 47px; gap: 7px; font-size: 11px; }
  .nav-count { position: static; font-size: 8px; }
  .main { padding: 0 16px 94px; }
  .topbar { height: 78px; }
  .topbar h1 { font-size: 17px; }
  .execute-state { display: none; }
  .flow-guide { gap: 5px; }
  .flow-guide span { gap: 4px; }
  .section-card { padding: 22px 18px; border-radius: 15px; }
  .mode-grid, .metric-grid, .job-columns { grid-template-columns: 1fr; }
  .transfer-grid { grid-template-columns: 1fr; gap: 12px; }
  .transfer-arrow { height: 44px; transform: rotate(90deg); }
  .endpoint-panel { min-height: 0; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .form-footer .primary-button { width: 100%; }
  .metric-grid { gap: 1px; }
  .table-toolbar { align-items: stretch; flex-direction: column; gap: 9px; }
  .search-field { width: 100%; }
  .execute-action { grid-template-columns: 1fr; }
  .job-hero { grid-template-columns: 43px 1fr; padding-inline: 20px; }
  .job-target { grid-column: 1 / -1; padding: 13px 0 0; border-top: 1px solid var(--line); border-left: 0; text-align: left; }
  .job-meta, .job-columns, .job-footer { padding-inline: 20px; }
  .history-card { grid-template-columns: 34px 1fr auto; }
  .history-route { grid-column: 2 / -1; text-align: left; }
  .history-time { grid-column: 3; grid-row: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}