:root {
  --ink: #17252d;
  --muted: #61747f;
  --line: #d7e4e9;
  --surface: #ffffff;
  --canvas: #f4f8fa;
  --primary: #138aa4;
  --primary-dark: #0d6679;
  --primary-soft: #e7f7fa;
  --success: #21643a;
  --success-soft: #e7f5eb;
  --danger: #8c3029;
  --danger-soft: #fae9e7;
  --uat: #7a5c08;
  --uat-soft: #fff4cf;
  --prod: #8a2e26;
  --prod-soft: #fae6e4;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.45 Arial, Helvetica, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.admin-app { min-height: 100vh; }
.topbar { min-height: 68px; padding: 11px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); }
.topbar small { display: block; margin-top: 2px; color: var(--muted); font-size: .68rem; }
.brand-mark { font-size: 1rem; font-weight: 950; letter-spacing: .06em; }
.brand-mark span { color: var(--primary); }
.account { display: flex; align-items: center; gap: 12px; font-size: .73rem; font-weight: 800; }
.account form { margin: 0; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--primary-dark); font-size: .72rem; font-weight: 900; text-decoration: underline; }
.admin-nav { display: flex; align-items: center; gap: 4px; }
.admin-nav a { padding: 8px 11px; border-radius: 999px; color: var(--muted); font-size: .69rem; font-weight: 900; text-decoration: none; }
.admin-nav a:hover, .admin-nav a.is-active { background: var(--primary-soft); color: var(--primary-dark); }

.workspace { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 44px; }
.page-heading { margin-bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.eyebrow { margin: 0 0 4px; color: var(--primary); font-size: .66rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.page-heading h1 { margin-bottom: 3px; font-size: 1.65rem; letter-spacing: -.03em; }
.page-heading p { margin-bottom: 0; color: var(--muted); font-size: .79rem; }

.safety-banner { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #b9dfe7; border-radius: 12px; background: var(--primary-soft); color: #3c626c; font-size: .74rem; }
.safety-banner strong { color: var(--primary-dark); }
.safety-banner.warning { border-color: #eadca9; background: #fff8df; color: #716024; }
.safety-banner.warning strong { color: #765f05; }
.notice { margin-bottom: 13px; padding: 11px 13px; border-radius: 11px; font-size: .75rem; font-weight: 800; }
.notice.success { border: 1px solid #b9ddc4; background: var(--success-soft); color: var(--success); }
.notice.error { border: 1px solid #efc0bc; background: var(--danger-soft); color: var(--danger); }

.stats { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.stats > div { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stats span { color: var(--muted); font-size: .67rem; font-weight: 800; }
.stats strong { font-size: 1.2rem; }

.panel { margin-top: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 10px 28px rgba(28,52,64,.055); overflow: hidden; }
.panel-head { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #edf2f4; }
.panel-head h2 { margin-bottom: 2px; font-size: 1rem; }
.panel-head p { margin-bottom: 0; color: var(--muted); font-size: .69rem; }

.button { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 900; text-decoration: none; }
.button.primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button:focus-visible, .text-button:focus-visible, a:focus-visible { outline: 3px solid rgba(19,138,164,.34); outline-offset: 2px; }
.button.danger { border-color: #e0b6b2; color: var(--danger); }
.button.small { min-height: 34px; padding: 0 11px; font-size: .66rem; }
.button.full { width: 100%; }

.site-form { padding: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.site-form label, .form-stack label { display: grid; gap: 6px; color: var(--ink); font-size: .7rem; font-weight: 900; }
.site-form input, .form-stack input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #c9d9df; border-radius: 9px; background: #fff; color: var(--ink); outline: 0; }
.site-form input:focus, .form-stack input:focus { border-color: #64bfd0; box-shadow: 0 0 0 3px rgba(19,138,164,.11); }
.environment-field { margin: 15px 0 0; padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border: 1px solid var(--line); border-radius: 12px; }
.environment-field legend { padding: 0 5px; font-size: .7rem; font-weight: 900; }
.environment-choice { position: relative; display: block !important; }
.environment-choice input { position: absolute; opacity: 0; pointer-events: none; }
.environment-choice span { min-height: 58px; padding: 10px 12px; display: grid; align-content: center; gap: 1px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.environment-choice strong { font-size: .8rem; }
.environment-choice small { color: var(--muted); font-size: .63rem; font-weight: 600; }
.environment-choice input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(19,138,164,.11); }
.environment-choice.uat input:checked + span { border-color: #d5b952; background: var(--uat-soft); }
.environment-choice.prod input:checked + span { border-color: #da9994; background: var(--prod-soft); }
.form-actions { margin-top: 14px; display: flex; gap: 8px; }

.site-grid { padding: 13px; display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 11px; }
.site-card { padding: 14px; border: 1px solid #dde8ec; border-radius: 13px; background: #fff; }
.site-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.site-card h3 { margin-bottom: 3px; font-size: .92rem; }
.site-card code { color: var(--muted); font-size: .66rem; }
.environment-badge { padding: 5px 8px; border-radius: 999px; font-size: .61rem; font-weight: 950; }
.environment-badge.uat { background: var(--uat-soft); color: var(--uat); }
.environment-badge.prod { background: var(--prod-soft); color: var(--prod); }
.site-card dl { margin: 13px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.site-card dl div { padding: 8px 9px; border-radius: 9px; background: #f4f8f9; }
.site-card dt { color: var(--muted); font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.site-card dd { margin: 2px 0 0; font-size: .73rem; font-weight: 850; }
.site-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-actions form { margin: 0; }
.environment-action { color: var(--primary-dark); }
.updated { display: block; margin-top: 10px; color: #87959c; font-size: .58rem; }
.empty-state { padding: 34px 16px; display: grid; gap: 4px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); }
.empty-state span { font-size: .72rem; }

.auth-shell { min-height: 100vh; padding: 22px; display: grid; place-items: center; background: radial-gradient(circle at 75% 8%, #dbf3f7, transparent 34%), var(--canvas); }
.auth-card { width: min(100%,460px); padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(30,54,65,.14); }
.auth-card .brand-mark { margin-bottom: 22px; }
.auth-card h1 { margin-bottom: 7px; font-size: 1.45rem; }
.auth-card > p:not(.eyebrow) { color: var(--muted); font-size: .76rem; }
.form-stack { margin-top: 18px; display: grid; gap: 12px; }
.field-note, .small-copy { margin: -5px 0 0; color: var(--muted); font-size: .64rem; }

.selector-panel { padding: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; overflow: visible; }
.config-selector { flex: 1; display: grid; grid-template-columns: minmax(240px,1fr) minmax(170px,.45fr) auto; align-items: end; gap: 10px; }
.config-selector label, .config-form label { display: grid; gap: 6px; color: var(--ink); font-size: .7rem; font-weight: 900; }
.config-selector select, .config-form select, .config-form input { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #c9d9df; border-radius: 9px; background: #fff; color: var(--ink); outline: 0; }
.config-selector select:focus, .config-form select:focus, .config-form input:focus { border-color: #64bfd0; box-shadow: 0 0 0 3px rgba(19,138,164,.11); }
.config-state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: .64rem; font-weight: 800; }
.connection-panel { overflow: visible; }
.test-safety { padding: 5px 8px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .57rem; font-weight: 950; letter-spacing: .04em; }
.connection-actions { padding: 14px 15px 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.connection-note { margin: 0; padding: 0 15px 14px; color: var(--muted); font-size: .66rem; }
.connection-summary { margin: 0 15px 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 11px; background: #f7fafb; }
.connection-summary > div { display: grid; gap: 2px; }
.connection-summary strong { font-size: .72rem; }
.connection-summary span { color: var(--muted); font-size: .61rem; }
.connection-summary.pass { border-color: #b9ddc4; background: var(--success-soft); }
.connection-summary.warning { border-color: #eadca9; background: #fff8df; }
.connection-summary.fail, .connection-summary.not_ready { border-color: #efc0bc; background: var(--danger-soft); }
.connection-results { padding: 0 15px 15px; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 10px; }
.connection-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.connection-card.pass { border-color: #b9ddc4; }
.connection-card.warning { border-color: #eadca9; }
.connection-card.fail, .connection-card.not_ready { border-color: #efc0bc; }
.connection-card > header { padding: 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f7fafb; }
.connection-card > header > div { display: grid; gap: 1px; }
.connection-card > header strong { font-size: .72rem; }
.connection-card > header span { color: var(--muted); font-size: .58rem; }
.test-badge { padding: 4px 7px; border-radius: 999px; font-size: .55rem !important; font-weight: 950; }
.test-badge.pass { background: var(--success-soft); color: var(--success); }
.test-badge.warning { background: var(--uat-soft); color: var(--uat); }
.test-badge.fail, .test-badge.not_ready { background: var(--danger-soft); color: var(--danger); }
.stage-list { display: grid; }
.stage-row { min-width: 0; padding: 10px 11px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: start; gap: 9px; border-top: 1px solid #edf2f4; }
.stage-row:first-child { border-top: 0; }
.stage-row > div { min-width: 0; display: grid; gap: 2px; }
.stage-row strong { font-size: .66rem; }
.stage-row span { color: var(--muted); font-size: .61rem; overflow-wrap: anywhere; }
.stage-row small { color: #87959c; font-size: .55rem; white-space: nowrap; }
.stage-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--danger); }
.stage-dot.pass { background: var(--success); }
.stage-dot.warning { background: #b68a12; }
.stage-dot.not_ready { background: #9a6b64; }
.quick-panel { overflow: visible; }
.status-pairs { padding: 13px 15px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.status-pairs > div { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; background: #f7fafb; }
.status-pairs span { color: var(--muted); font-size: .7rem; font-weight: 850; }
.success-text { color: var(--success); }
.danger-text { color: var(--danger); }
.warning-text { color: var(--uat); }
.neutral-text { color: var(--muted); }
.quick-note { margin: 0; padding: 0 15px 13px; color: var(--muted); font-size: .66rem; }
.operator-steps { margin: 0; padding: 14px 18px 15px 38px; color: var(--muted); font-size: .72rem; }
.operator-steps li + li { margin-top: 6px; }
.config-form { display: grid; gap: 0; }
.config-section { overflow: visible; }
.config-grid { padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.config-grid .wide { grid-column: 1 / -1; }
.secret-field { align-content: start; }
.secret-state { justify-self: start; padding: 2px 7px; border-radius: 999px; font-size: .56rem; font-weight: 900; }
.secret-state.configured { background: var(--success-soft); color: var(--success); }
.secret-state.inherited { background: #eef3f5; color: var(--muted); }
.clear-secret { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .6rem; font-weight: 700; }
.clear-secret input { width: 14px; min-height: 14px; height: 14px; margin: 0; padding: 0; }
.field-help { color: var(--muted); font-size: .61rem; font-weight: 650; }
.sticky-actions { position: sticky; bottom: 10px; z-index: 5; margin-top: 14px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #acd7df; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 13px 34px rgba(25,61,73,.16); backdrop-filter: blur(8px); }
.sticky-actions > div { display: grid; gap: 2px; }
.sticky-actions strong { font-size: .74rem; }
.sticky-actions span { color: var(--muted); font-size: .62rem; }
.reset-panel { margin-top: 24px; box-shadow: none; }

@media (max-width: 760px) {
  .workspace { width: min(100% - 18px, 1180px); padding-top: 16px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field-grid { grid-template-columns: 1fr; }
  .site-grid { grid-template-columns: 1fr; padding: 9px; }
  .selector-panel { align-items: stretch; flex-direction: column; }
  .config-selector { width: 100%; grid-template-columns: 1fr 1fr auto; }
  .config-state { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .topbar { padding-inline: 13px; }
  .account > span { display: none; }
  .topbar { flex-wrap: wrap; }
  .admin-nav { order: 3; width: 100%; border-top: 1px solid var(--line); padding-top: 8px; }
  .admin-nav a { flex: 1; text-align: center; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 1.38rem; }
  .environment-field { grid-template-columns: 1fr; }
  .site-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .site-actions form, .site-actions .button { width: 100%; }
  .config-selector { grid-template-columns: 1fr; }
  .connection-panel .panel-head { align-items: flex-start; flex-direction: column; }
  .connection-actions { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }
  .connection-actions .button { width: 100%; }
  .connection-summary { margin-inline: 12px; align-items: flex-start; flex-direction: column; }
  .connection-results { grid-template-columns: 1fr; padding-inline: 12px; }
  .stage-row { grid-template-columns: 8px minmax(0,1fr); }
  .stage-row small { grid-column: 2; }
  .config-grid { grid-template-columns: 1fr; padding: 12px; }
  .config-grid .wide { grid-column: auto; }
  .status-pairs { grid-template-columns: 1fr; }
  .sticky-actions { bottom: 5px; align-items: stretch; flex-direction: column; }
  .sticky-actions .button { width: 100%; }
}