:root {
  color-scheme: light;
  --paper: #f2eee3;
  --paper-deep: #e8e2d4;
  --ink: #18241d;
  --ink-soft: #536159;
  --forest: #315845;
  --forest-light: #dce6dd;
  --signal: #ce6337;
  --signal-dark: #9d4425;
  --line: rgba(24, 36, 29, 0.18);
  --display: "Avenir Next Condensed", "DIN Condensed", "Noto Sans SC", sans-serif;
  --body: "Avenir Next", "Noto Sans SC", sans-serif;
  --serif: "Iowan Old Style", "Songti SC", serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 88% 6%, rgba(206, 99, 55, 0.13), transparent 30rem),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(24, 36, 29, 0.045) 25%),
    var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
}

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 20;
  background: var(--ink);
  color: white;
  padding: 10px 14px;
}

.skip-link:focus-visible { top: 16px; }

.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px 22px;
  background:
    radial-gradient(circle at 82% 15%, rgba(206, 99, 55, .22), transparent 28rem),
    linear-gradient(135deg, rgba(49, 88, 69, .08), transparent 55%),
    var(--paper);
}

.auth-panel {
  width: min(510px, 100%);
  padding: clamp(30px, 7vw, 68px);
  border: 1px solid var(--ink);
  background: rgba(242, 238, 227, .72);
  box-shadow: 18px 18px 0 rgba(49, 88, 69, .12);
}

.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 70px; }
.auth-brand .brand-mark { width: 44px; height: 44px; font-size: 19px; }
.auth-brand p { margin: 0 0 3px; color: var(--signal-dark); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.auth-brand strong { font: 680 20px/1.1 var(--display); }
.auth-panel h1 { margin: 9px 0 16px; font: 560 clamp(42px, 7vw, 64px)/.96 var(--serif); letter-spacing: -.055em; }
.auth-intro { margin: 0 0 34px; color: var(--ink-soft); font-size: 14px; }
.auth-form { display: grid; gap: 8px; }
.auth-form label { color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.auth-form input { width: 100%; min-height: 46px; margin-bottom: 13px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 3px; background: transparent; color: var(--ink); font: 600 15px/1.2 var(--body); }
.auth-form input:focus { outline: 0; border-bottom-color: var(--signal); }
.auth-form .primary-action { width: 100%; margin-top: 12px; }
.auth-status { min-height: 22px; margin: 17px 0 0; color: var(--signal-dark); font-size: 12px; }
.auth-status.is-success { color: var(--forest); }

.page-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
}

.brand-header {
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  animation: reveal-down 550ms ease-out both;
}

.brand-lockup { display: flex; align-items: center; gap: 18px; }

.brand-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 700 24px/1 var(--serif);
}

.brand-english, .eyebrow {
  margin: 0 0 6px;
  color: var(--signal-dark);
  font: 700 11px/1.2 var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-header h1 {
  margin: 0;
  font: 700 clamp(34px, 4.2vw, 64px)/0.95 var(--display);
  letter-spacing: -0.045em;
}

.mode-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
}

.mode-label > span:first-child {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 0 0 5px rgba(49, 88, 69, 0.12);
}

.mode-label .mode-text { width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none; }

.intro {
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
  align-items: end;
  gap: 56px;
  padding: 72px 0 64px;
}

.intro h2 {
  max-width: 900px;
  margin: 12px 0 0;
  font: 500 clamp(48px, 7vw, 104px)/0.94 var(--serif);
  letter-spacing: -0.055em;
}

.intro-copy {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 18px;
}

.site-band {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.6fr;
  gap: 64px;
  padding: 38px 0;
  border-block: 1px solid var(--ink);
}

.site-identity h2 {
  margin: 6px 0;
  font: 650 clamp(24px, 3vw, 40px)/1.1 var(--display);
  letter-spacing: -0.025em;
}

.site-identity > p:last-child { margin: 0; color: var(--ink-soft); }

.system-roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.system-roles div { padding: 0 24px; border-left: 1px solid var(--line); }
.system-roles dt { color: var(--ink-soft); font-size: 12px; letter-spacing: .12em; }
.system-roles dd { margin: 8px 0 0; font: 650 22px/1.2 var(--display); }

.section-heading {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, .7fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 34px;
}

.section-heading h2 {
  margin: 6px 0 0;
  font: 650 clamp(32px, 4.2vw, 58px)/1 var(--display);
  letter-spacing: -.04em;
}

.section-heading > p { margin: 0; color: var(--ink-soft); }

.onboarding { padding: 70px 0 88px; border-top: 1px solid var(--ink); }

.onboarding-layout {
  display: grid;
  grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
  min-height: 620px;
  background: var(--ink);
  color: #f8f4ea;
}

.onboarding-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 22px 16px;
  padding: clamp(30px, 4.5vw, 58px);
  border-right: 1px solid rgba(255,255,255,.17);
}

.field { display: grid; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label, .approval-form label, .credential-form label, .verification-form label, .confirmation-form > label:first-child, .risk-acceptance-form > label:not(.confirmation-check), .port-inspection-form label, .port-release-form > label:not(.confirmation-check), .coolify-preparation-form > label:not(.confirmation-check), .coolify-execution-form > label:not(.confirmation-check), .credential-choice legend { color: rgba(248,244,234,.78); font-size: 12px; font-weight: 700; }
.field small { color: rgba(248,244,234,.5); font-size: 11px; }

.field input, .field select, .field textarea, .approval-form input, .credential-form input, .credential-form textarea, .verification-form input, .confirmation-form > input, .risk-acceptance-form > input, .port-inspection-form > input, .port-release-form > input, .coolify-preparation-form > input, .coolify-execution-form > input {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(248,244,234,.32);
  border-radius: 0;
  padding: 0 2px;
  background: transparent;
  color: #fff;
  font: 600 16px/1 var(--body);
}

.field textarea, .credential-form textarea {
  min-height: 148px;
  padding: 12px 2px;
  resize: vertical;
  line-height: 1.45;
}

.field select { color-scheme: dark; }
.field input::placeholder { color: rgba(248,244,234,.34); }
.field input:focus, .field select:focus, .field textarea:focus, .approval-form input:focus, .credential-form input:focus, .credential-form textarea:focus, .verification-form input:focus, .confirmation-form > input:focus, .coolify-execution-form > input:focus { outline: 0; border-bottom-color: #eea17d; }
.form-action { grid-column: 1 / -1; margin-top: 8px; }

.credential-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0;
  border: 0;
  padding: 0;
}

.credential-choice legend { grid-column: 1 / -1; margin-bottom: 8px; }
.credential-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0; border-block: 1px solid rgba(248,244,234,.2); cursor: pointer; }
.credential-choice input { margin: 3px 0 0; accent-color: var(--signal); }
.credential-choice span { display: grid; gap: 5px; }
.credential-choice strong { color: #fff; font-size: 13px; }
.credential-choice small { color: rgba(248,244,234,.48); font-size: 11px; }

.onboarding-result { display: grid; min-width: 0; }
.onboarding-empty, .onboarding-plan { padding: clamp(34px, 5vw, 68px); animation: surface-in 400ms ease-out both; }
.onboarding-empty { display: grid; align-content: center; }
.onboarding-empty h3, .onboarding-plan h3 { margin: 12px 0 24px; font: 500 clamp(32px, 4.5vw, 58px)/1.03 var(--serif); letter-spacing: -.04em; }
.onboarding-empty ul { margin: 20px 0 0; padding-left: 20px; color: rgba(248,244,234,.68); }
.onboarding-empty li { margin: 12px 0; }
.onboarding .eyebrow { color: #eea17d; }
.plan-target { color: rgba(248,244,234,.65); }

.credential-status { display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 26px; font-size: 12px; font-weight: 700; }
.credential-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.credential-status.is-ready { color: #9dd4ae; }
.credential-status.is-missing { color: #f2ab8c; }

.plan-steps { margin: 0; padding: 0; list-style: none; counter-reset: plan; border-top: 1px solid rgba(255,255,255,.15); }
.plan-steps li { display: grid; grid-template-columns: minmax(160px, .8fr) 1.2fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.12); counter-increment: plan; }
.plan-steps strong { display: flex; gap: 10px; color: #fff; font-size: 13px; }
.plan-steps strong::before { content: counter(plan, decimal-leading-zero); color: #eea17d; font-family: var(--serif); }
.plan-steps span { color: rgba(248,244,234,.58); font-size: 12px; }
.plan-safety { margin: 24px 0; padding-left: 16px; border-left: 2px solid var(--signal); color: rgba(248,244,234,.72); font-size: 13px; }
.real-mode-notice { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--signal); color: #f3c779; font-size: 13px; font-weight: 700; }

.approval-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 8px 16px; align-items: end; margin-top: 26px; }
.approval-form label { grid-column: 1 / -1; }
.credential-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 8px 16px; align-items: end; margin: 24px 0; }
.credential-form label { grid-column: 1 / -1; }

.verification-form, .confirmation-form, .risk-acceptance-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px 16px; align-items: end; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.verification-form label, .verification-form p, .confirmation-form > label:first-child, .confirmation-check { grid-column: 1 / -1; }
.verification-form p { margin: 0 0 5px; color: rgba(248,244,234,.58); font-size: 12px; }
.risk-acceptance-form > strong, .risk-acceptance-form > p, .risk-acceptance-form .confirmation-check { grid-column: 1 / -1; }
.risk-acceptance-form > strong { color: #f3c779; font: 650 16px/1.3 var(--display); }
.risk-acceptance-form > p { margin: 0 0 5px; color: rgba(248,244,234,.62); font-size: 12px; }
.port-control { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.port-control > strong { color: #fff; font: 650 17px/1.3 var(--display); }
.port-control > p { margin: 10px 0 0; color: rgba(248,244,234,.62); font-size: 12px; }
.port-occupants { margin: 12px 0 0; padding: 0; list-style: none; }
.port-occupants li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.port-occupants strong { color: #fff; font-size: 13px; }
.port-occupants span { color: rgba(248,244,234,.55); font-size: 12px; }
.port-warning { color: #f3c779 !important; }
.port-success { color: #9dd4ae !important; }
.port-inspection-status { color: #f2ab8c !important; font-weight: 700; }
.port-inspection-form, .port-release-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px 16px; align-items: end; margin-top: 18px; }
.port-inspection-form > p, .port-release-form .confirmation-check { grid-column: 1 / -1; }
.danger-action { background: #b94a32; }
.danger-action:hover { background: #9f3825; }
.host-confirmation, .verification-report { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.host-confirmation h4, .verification-report h4 { margin: 0 0 8px; font: 650 22px/1.2 var(--display); }
.host-confirmation > p, .verification-report > p { margin: 0; color: rgba(248,244,234,.62); font-size: 13px; }
.host-key-list, .verification-checks { margin: 20px 0 0; padding: 0; list-style: none; }
.host-key-list li { display: grid; gap: 7px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.host-key-list strong { color: #fff; font-size: 12px; }
.host-key-list code { overflow-wrap: anywhere; color: #9dd4ae; font: 600 12px/1.5 ui-monospace, "SFMono-Regular", monospace; }
.confirmation-check { display: flex; gap: 10px; align-items: center; color: rgba(248,244,234,.76); font-size: 12px; }
.confirmation-check input { width: 18px; height: 18px; accent-color: var(--signal); }
.verification-checks li { display: grid; grid-template-columns: minmax(110px, .45fr) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.verification-checks strong { display: flex; gap: 8px; color: #fff; font-size: 12px; }
.verification-checks strong::before { content: "✓"; color: #9dd4ae; }
.verification-checks .is-warning strong::before { content: "!"; color: #f3c779; }
.verification-checks .is-failed strong::before { content: "×"; color: #f2ab8c; }
.verification-checks span { color: rgba(248,244,234,.62); font-size: 12px; }
.coolify-next-step { margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22); }
.next-step-label { display: block; margin-bottom: 8px; color: #eea17d; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.coolify-next-step h5 { margin: 0; color: #fff; font: 650 26px/1.15 var(--display); }
.coolify-next-step > p { margin: 10px 0 0; color: rgba(248,244,234,.68); font-size: 13px; }
.coolify-impact-list { margin: 18px 0 0; padding-left: 20px; color: rgba(248,244,234,.7); font-size: 12px; }
.coolify-impact-list li { margin: 8px 0; }
.coolify-preparation-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px 16px; align-items: end; margin-top: 22px; }
.coolify-preparation-form .confirmation-check { grid-column: 1 / -1; }
.coolify-next-step .deployment-pending { color: #f3c779; font-weight: 700; }
.coolify-execution-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px 16px; align-items: end; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.coolify-execution-form > p, .coolify-execution-form .confirmation-check { grid-column: 1 / -1; }
.deployment-warning { margin: 0 0 4px; color: #f3c779 !important; font-size: 12px; }
.coolify-execution-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.coolify-execution-result h6 { margin: 0 0 8px; color: #fff; font: 650 18px/1.2 var(--display); }
.coolify-execution-result > p { margin: 0; color: rgba(248,244,234,.68); font-size: 13px; }
.coolify-execution-result.is-failed > p { color: #f2ab8c; }
.coolify-dashboard-link { margin-top: 16px; }
.coolify-execution-steps { margin: 18px 0 0; padding: 0; list-style: none; }
.coolify-execution-steps li { display: grid; grid-template-columns: minmax(130px, .6fr) 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.coolify-execution-steps strong { color: #fff; font-size: 12px; }
.coolify-execution-steps span { color: rgba(248,244,234,.62); font-size: 12px; }
.coolify-execution-steps .is-simulated strong::before { content: "~"; margin-right: 8px; color: #eea17d; }
.coolify-execution-steps .is-passed strong::before { content: "✓"; margin-right: 8px; color: #9dd4ae; }
.coolify-install-log { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(248,244,234,.16); }
.coolify-install-log h6 { margin: 0 0 7px; color: #fff; font: 650 18px/1.2 var(--display); }
.coolify-install-log > p { margin: 0; color: #f3c779; font-size: 12px; font-weight: 700; }
.coolify-install-log-list { max-height: 270px; overflow-y: auto; margin: 16px 0 0; padding: 0; list-style: none; }
.coolify-install-log-list li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(248,244,234,.1); }
.coolify-install-log-list time { color: rgba(248,244,234,.45); font-size: 11px; font-variant-numeric: tabular-nums; }
.coolify-install-log-list span { color: rgba(248,244,234,.78); font-size: 12px; }
.coolify-install-log-list li[data-stage="completed"] span, .coolify-install-log-list li[data-stage="dashboard-ready"] span { color: #9dd4ae; }
.coolify-install-log-list li[data-stage="failed"] span { color: #f2ab8c; }
.coolify-install-log-empty { display: block !important; color: rgba(248,244,234,.48) !important; font-size: 12px; }

.workflow { padding: 76px 0 88px; }

.workflow-heading {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) 1.45fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 34px;
}

.workflow-heading h2, .history h2 {
  margin: 5px 0 0;
  font: 650 clamp(30px, 4vw, 54px)/1 var(--display);
  letter-spacing: -0.035em;
}

.stage-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.stage-line li {
  position: relative;
  padding: 14px 8px 17px 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.stage-line li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 3px;
  background: var(--signal);
  transition: width 450ms ease;
}

.stage-line li.is-active { color: var(--ink); font-weight: 700; }
.stage-line li.is-active::after { width: 100%; }
.stage-line span { display: block; margin-bottom: 5px; font-family: var(--serif); font-size: 17px; }

.work-surface {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr);
  background: var(--ink);
  color: #f8f4ea;
  overflow: hidden;
}

.work-primary { padding: clamp(32px, 5vw, 68px); animation: surface-in 400ms ease-out both; }

.work-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 48px);
  border-left: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.035);
}

.work-surface .eyebrow { color: #eea17d; }
.work-surface h3 { max-width: 760px; margin: 14px 0 24px; font: 500 clamp(34px, 5vw, 64px)/1.02 var(--serif); letter-spacing: -.04em; }
.work-surface p { color: rgba(248,244,234,.72); }
.impact { padding-left: 16px; border-left: 2px solid var(--signal); }

.content-preview { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.content-preview strong { display: block; margin-bottom: 8px; color: #fff; }

.primary-action, .secondary-action {
  min-height: 52px;
  border: 0;
  padding: 0 22px;
  font: 750 14px/1 var(--body);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.primary-action { background: var(--signal); color: white; }
.primary-action:hover { background: #df7143; transform: translateY(-2px); }
.primary-action:disabled { cursor: wait; opacity: .6; transform: none; }

.secondary-action { display: inline-grid; place-items: center; background: transparent; color: currentColor; border: 1px solid currentColor; text-decoration: none; }
.secondary-action:hover { background: rgba(255,255,255,.08); }

.safety-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 12px; }
.safety-note::before { content: "✓"; color: #95c7a8; font-weight: 900; }

.aside-label { margin: 0; color: rgba(248,244,234,.52); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.aside-value { margin: 9px 0 28px; color: white !important; font: 650 20px/1.3 var(--display); }

.loading-state, .empty-work {
  grid-column: 1 / -1;
  min-height: 430px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 40px;
  text-align: center;
}

.loading-state span { width: 48px; height: 2px; background: var(--signal); animation: scan 1s ease-in-out infinite alternate; }
.empty-work h3 { max-width: 740px; }
.empty-work p { max-width: 520px; margin: 0 auto 28px; }

.history {
  display: grid;
  grid-template-columns: minmax(240px, .6fr) 1.4fr;
  gap: 64px;
  padding: 68px 0 80px;
  border-top: 1px solid var(--ink);
}

.event-list { margin: 0; padding: 0; list-style: none; }
.event-list li { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.event-time { color: var(--ink-soft); font-size: 12px; }
.event-message { margin: 0; }
.empty-row { color: var(--ink-soft); }

footer { display: flex; justify-content: space-between; padding: 24px 0 36px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  max-width: min(380px, calc(100% - 48px));
  padding: 14px 18px;
  background: var(--signal-dark);
  color: white;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible { opacity: 1; transform: translateY(0); }

@keyframes reveal-down { from { opacity: 0; transform: translateY(-16px); } }
@keyframes surface-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes scan { to { width: 140px; } }

@media (max-width: 900px) {
  .page-shell { width: min(100% - 32px, 760px); }
  .intro { min-height: 360px; grid-template-columns: 1fr; gap: 28px; align-content: end; }
  .section-heading, .onboarding-layout, .site-band, .workflow-heading, .history { grid-template-columns: 1fr; gap: 30px; }
  .onboarding-layout { gap: 0; }
  .onboarding-form { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.17); }
  .system-roles div:first-child { border-left: 0; padding-left: 0; }
  .work-surface { grid-template-columns: 1fr; }
  .work-aside { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 580px) {
  .page-shell { width: calc(100% - 28px); }
  .brand-header { min-height: 112px; align-items: center; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-english { display: none; }
  .mode-label { font-size: 0; }
  .mode-label > span:first-child { margin-right: 2px; }
  .intro { min-height: 350px; padding: 54px 0 48px; }
  .intro h2 { font-size: clamp(44px, 14vw, 66px); }
  .intro-copy { font-size: 16px; }
  .site-band { padding: 30px 0; }
  .onboarding { padding: 54px 0 66px; }
  .section-heading { gap: 18px; }
  .onboarding-form { grid-template-columns: 1fr; padding: 30px 22px; }
  .field-wide, .form-action { grid-column: auto; }
  .credential-choice { grid-template-columns: 1fr; }
  .onboarding-empty, .onboarding-plan { padding: 34px 22px; }
  .onboarding-empty h3, .onboarding-plan h3 { font-size: 35px; }
  .plan-steps li { grid-template-columns: 1fr; gap: 5px; }
  .approval-form, .credential-form, .verification-form, .confirmation-form, .port-inspection-form, .port-release-form, .coolify-preparation-form, .coolify-execution-form { grid-template-columns: 1fr; }
  .approval-form label, .credential-form label, .verification-form label, .verification-form p, .confirmation-form > label:first-child, .confirmation-check, .port-inspection-form > p, .port-release-form .confirmation-check, .coolify-preparation-form .confirmation-check, .coolify-execution-form > p { grid-column: auto; }
  .verification-checks li { grid-template-columns: 1fr; gap: 5px; }
  .coolify-execution-steps li { grid-template-columns: 1fr; gap: 5px; }
  .coolify-install-log-list li { grid-template-columns: 1fr; gap: 3px; }
  .system-roles { grid-template-columns: 1fr; }
  .system-roles div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .system-roles dd { font-size: 18px; }
  .workflow { padding: 58px 0 66px; }
  .stage-line { grid-template-columns: repeat(4, minmax(58px, 1fr)); overflow-x: auto; }
  .stage-line li { font-size: 10px; }
  .work-primary, .work-aside { padding: 28px 22px; }
  .work-surface h3 { font-size: 35px; }
  .primary-action, .secondary-action { width: 100%; }
  .history { padding: 54px 0 64px; }
  .event-list li { grid-template-columns: 1fr; gap: 5px; }
  footer { display: block; }
}

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

/* Management workspace */
.management-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 15;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 22px;
  background:
    linear-gradient(155deg, rgba(206,99,55,.1), transparent 30%),
    #17231c;
  color: #f8f4ea;
  border-right: 1px solid rgba(255,255,255,.1);
}

.sidebar-brand { display: flex; align-items: center; gap: 13px; min-height: 62px; padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sidebar-brand .brand-mark { width: 43px; height: 43px; flex: 0 0 auto; border-color: rgba(248,244,234,.72); font-size: 18px; }
.sidebar-brand p { margin: 0 0 3px; color: #e9956f; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.sidebar-brand strong { font: 680 20px/1.1 var(--display); letter-spacing: -.02em; }

.workspace-nav { display: grid; gap: 3px; margin-top: 24px; }
.nav-group-label { margin: 20px 11px 7px; color: rgba(248,244,234,.38); font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.workspace-nav .nav-group-label:first-child { margin-top: 0; }
.workspace-nav button {
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  border: 0;
  padding: 0 11px;
  background: transparent;
  color: rgba(248,244,234,.7);
  font: 650 13px/1 var(--body);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.workspace-nav button span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(248,244,234,.2); border-radius: 50%; color: rgba(248,244,234,.64); font: 750 10px/1 var(--body); }
.workspace-nav button:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); }
.workspace-nav button[aria-current="page"] { background: #f2eee3; color: var(--ink); }
.workspace-nav button[aria-current="page"] span { border-color: var(--signal); color: var(--signal-dark); }

.sidebar-runtime { margin-top: auto; padding: 20px 10px 4px; border-top: 1px solid rgba(255,255,255,.14); }
.sidebar-runtime > p:first-child { margin: 0 0 10px; color: rgba(248,244,234,.42); font-size: 10px; letter-spacing: .12em; }
.sidebar-runtime .mode-label { color: #b9d8c2; font-size: 12px; }
.sidebar-runtime .mode-label > span:first-child { background: #7fc392; box-shadow: 0 0 0 4px rgba(127,195,146,.12); }
.sidebar-runtime small { display: block; margin-top: 10px; color: rgba(248,244,234,.44); font-size: 10px; }

.app-workspace { min-width: 0; }
.workspace-topbar {
  min-height: 88px;
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(24px, 4vw, 58px);
  border-bottom: 1px solid var(--line);
  background: rgba(242,238,227,.93);
  backdrop-filter: blur(16px);
}
.workspace-topbar p { margin: 0 0 3px; color: var(--signal-dark); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.workspace-topbar h1 { margin: 0; font: 680 26px/1.05 var(--display); letter-spacing: -.025em; }
.topbar-safety { display: flex; align-items: center; gap: 9px; color: var(--forest); font-size: 12px; font-weight: 750; }
.topbar-safety span { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 4px rgba(49,88,69,.1); }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.topbar-user { display: grid; gap: 1px; text-align: right; }
.topbar-user span { font-size: 12px; font-weight: 750; }
.topbar-user small { color: var(--ink-soft); font-size: 10px; }
.topbar-logout { min-height: 34px; padding-inline: 4px; }
.sidebar-toggle { display: none; min-height: 40px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 750; }

.workspace-canvas { min-height: calc(100vh - 88px); padding: clamp(30px, 4vw, 58px); }
.workspace-panel { width: min(1480px, 100%); margin: 0 auto; animation: workspace-enter 280ms ease-out both; }
.workspace-heading { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(320px, .65fr); gap: 64px; align-items: end; margin-bottom: 32px; padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.workspace-heading h2 { margin: 4px 0 0; font: 680 clamp(36px, 4vw, 58px)/.98 var(--display); letter-spacing: -.04em; }
.workspace-heading > p { max-width: 620px; margin: 0; color: var(--ink-soft); font-size: 14px; }

.overview-intro { min-height: 310px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .55fr); gap: 64px; align-items: end; padding: 30px 0 52px; border-bottom: 1px solid var(--ink); }
.overview-intro h2 { max-width: 900px; margin: 10px 0 0; font: 520 clamp(46px, 6.4vw, 92px)/.94 var(--serif); letter-spacing: -.055em; }
.overview-intro > p { margin: 0 0 8px; color: var(--ink-soft); font-size: 17px; }
.overview-status { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--ink); }
.overview-status > div { min-width: 0; padding: 26px 24px 28px; border-left: 1px solid var(--line); }
.overview-status > div:first-child { padding-left: 0; border-left: 0; }
.overview-status span, .overview-status small { display: block; color: var(--ink-soft); font-size: 10px; }
.overview-status span { margin-bottom: 12px; font-weight: 750; letter-spacing: .11em; }
.overview-status strong { display: block; overflow: hidden; margin-bottom: 7px; font: 680 22px/1.15 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.overview-actions { display: grid; grid-template-columns: minmax(220px,.55fr) 1.45fr; gap: 64px; padding-top: 44px; }
.overview-actions h3 { margin: 5px 0 0; font: 670 34px/1 var(--display); }
.action-rows { border-top: 1px solid var(--ink); }
.action-rows button { width: 100%; min-height: 84px; display: grid; grid-template-columns: minmax(140px,.55fr) 1fr 24px; gap: 22px; align-items: center; border: 0; border-bottom: 1px solid var(--line); padding: 0 8px 0 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.action-rows button:hover { background: rgba(49,88,69,.045); }
.action-rows span { font: 680 19px/1.1 var(--display); }
.action-rows small { color: var(--ink-soft); font-size: 12px; }
.action-rows b { color: var(--signal); font-size: 21px; transition: transform 160ms ease; }
.action-rows button:hover b { transform: translateX(4px); }

.deployment-panel .onboarding-layout { min-height: 680px; }
.form-heading { grid-column: 1 / -1; display: flex; gap: 13px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.15); }
.form-heading > span { color: #eea17d; font: 700 22px/1 var(--serif); }
.form-heading div { display: grid; gap: 3px; }
.form-heading strong { color: #fff; font: 680 17px/1.1 var(--display); }
.form-heading small { color: rgba(248,244,234,.47); font-size: 10px; }
.site-panel .site-band { margin-bottom: 36px; }
.site-identity h3 { margin: 6px 0; font: 650 clamp(24px,3vw,40px)/1.1 var(--display); }
.site-panel .workflow { padding: 28px 0 0; }
.site-panel .workflow-heading h3 { margin: 5px 0 0; font: 650 clamp(30px,4vw,50px)/1 var(--display); letter-spacing: -.035em; }

.agent-foundation { display: grid; grid-template-columns: minmax(300px,.8fr) 1.2fr; background: var(--ink); color: #f8f4ea; }
.agent-state { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 470px; padding: clamp(32px,5vw,68px); border-right: 1px solid rgba(255,255,255,.15); }
.agent-state > span { color: #eea17d; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.agent-state h3 { margin: 18px 0; font: 540 clamp(34px,4.2vw,56px)/1 var(--serif); letter-spacing: -.04em; }
.agent-state p { margin: 0 0 28px; color: rgba(248,244,234,.62); }
.agent-boundaries { margin: 0; padding: clamp(30px,5vw,64px); list-style: none; }
.agent-boundaries li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.agent-boundaries strong { color: #eea17d; font-size: 12px; }
.agent-boundaries span { color: rgba(248,244,234,.72); font-size: 13px; }

.activity-panel .event-list { max-width: 980px; border-top: 1px solid var(--ink); }
.activity-panel .event-list li { grid-template-columns: 130px 1fr; min-height: 64px; align-items: center; }
.connection-list { border-top: 1px solid var(--ink); }
.connection-list > div { display: grid; grid-template-columns: minmax(120px,.35fr) minmax(220px,.7fr) 1fr auto; gap: 24px; align-items: center; min-height: 92px; border-bottom: 1px solid var(--line); }
.connection-list span { color: var(--signal-dark); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.connection-list strong { font: 680 19px/1.2 var(--display); }
.connection-list p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.connection-list em { color: var(--ink-soft); font-size: 11px; font-style: normal; }

.coolify-install-log { padding: 22px; background: #101812; border: 1px solid rgba(248,244,234,.14); }
.coolify-install-log-list { max-height: 420px; }
.coolify-install-log-list li { grid-template-columns: 72px 12px 1fr; align-items: start; padding: 13px 0; }
.coolify-install-log-list li::before { content: ""; width: 8px; height: 8px; margin-top: 5px; border: 1px solid #9dd4ae; border-radius: 50%; }
.coolify-install-log-list li[data-log-level="error"]::before { border-color: #f2ab8c; background: #f2ab8c; }
.coolify-log-copy { display: grid; gap: 5px; }
.coolify-log-copy strong { color: #fff; font-size: 12px; }
.coolify-log-copy span { color: rgba(248,244,234,.65); line-height: 1.55; }
.coolify-log-suggestion { margin: 2px 0 0; padding-left: 12px; border-left: 2px solid #f3c779; color: #f3c779 !important; }
.coolify-recovery-note { margin: 14px 0 0 !important; padding: 11px 13px; border-left: 2px solid #9dd4ae; background: rgba(157,212,174,.08); color: #b7dfc0 !important; font-size: 12px; line-height: 1.6; }
.coolify-terminal-output { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(248,244,234,.16); }
.coolify-terminal-output h6 { margin: 0; }
.coolify-terminal-safety { margin: 7px 0 14px; color: rgba(248,244,234,.48); font-size: 10px; }
.coolify-terminal-lines { max-height: 360px; margin: 0; padding: 8px 14px; overflow: auto; background: #090e0b; list-style: none; }
.coolify-terminal-lines li { display: grid; grid-template-columns: 62px 34px minmax(0,1fr); gap: 9px; align-items: start; min-height: 31px; padding: 7px 0; border-bottom: 1px solid rgba(248,244,234,.07); }
.coolify-terminal-lines time { color: rgba(248,244,234,.38); font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.coolify-terminal-stream { color: #7fc392; font: 700 9px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.coolify-terminal-lines code { overflow-wrap: anywhere; color: rgba(248,244,234,.76); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.coolify-terminal-lines li[data-terminal-level="warning"] .coolify-terminal-stream,
.coolify-terminal-lines li[data-terminal-level="warning"] code { color: #f3c779; }
.coolify-terminal-lines li[data-terminal-level="error"] .coolify-terminal-stream,
.coolify-terminal-lines li[data-terminal-level="error"] code { color: #f2ab8c; }
.coolify-terminal-empty { display: block !important; color: rgba(248,244,234,.45); font-size: 11px; }
.legacy-log-notice { border-left: 3px solid #f3c779; }
.legacy-log-notice p { max-width: 760px; margin: 9px 0 0; color: rgba(248,244,234,.66); font-size: 12px; line-height: 1.65; }

.sidebar-scrim { position: fixed; inset: 0; z-index: 14; background: rgba(10,16,12,.56); backdrop-filter: blur(2px); }
@keyframes workspace-enter { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1120px) {
  .management-shell { grid-template-columns: 218px minmax(0,1fr); }
  .app-sidebar { padding-inline: 14px; }
  .workspace-canvas { padding-inline: 28px; }
  .onboarding-layout, .workspace-heading, .overview-intro, .overview-actions, .agent-foundation { grid-template-columns: 1fr; gap: 28px; }
  .onboarding-form { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.17); }
  .agent-state { min-height: 360px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
}

@media (max-width: 760px) {
  .management-shell { display: block; }
  .app-sidebar { position: fixed; left: 0; top: 0; width: 278px; transform: translateX(-102%); transition: transform 200ms ease; box-shadow: 20px 0 60px rgba(0,0,0,.18); }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-toggle { display: block; padding: 0 12px; }
  .workspace-topbar { min-height: 76px; padding: 12px 18px; }
  .workspace-topbar h1 { font-size: 22px; }
  .workspace-topbar p, .topbar-safety, .topbar-user { display: none; }
  .topbar-actions { gap: 0; }
  .workspace-canvas { min-height: calc(100vh - 76px); padding: 24px 16px 48px; }
  .workspace-heading { grid-template-columns: 1fr; gap: 15px; margin-bottom: 22px; padding-bottom: 20px; }
  .workspace-heading h2 { font-size: 38px; }
  .overview-intro { min-height: auto; grid-template-columns: 1fr; gap: 26px; padding: 18px 0 34px; }
  .overview-intro h2 { font-size: clamp(44px,13vw,65px); }
  .overview-status { grid-template-columns: 1fr 1fr; }
  .overview-status > div { padding: 20px 14px 22px; border-top: 1px solid var(--line); }
  .overview-status > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .overview-actions { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; }
  .action-rows button { grid-template-columns: 1fr 24px; gap: 8px; padding: 14px 4px 14px 0; }
  .action-rows small { grid-column: 1 / -1; grid-row: 2; }
  .action-rows b { grid-column: 2; grid-row: 1; }
  .onboarding-layout { min-height: 0; }
  .connection-list > div { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 18px 0; }
  .connection-list p { grid-column: 1 / -1; }
  .agent-boundaries li { grid-template-columns: 1fr; gap: 7px; }
  .activity-panel .event-list li { grid-template-columns: 1fr; gap: 4px; padding-block: 15px; }
  .coolify-terminal-lines li { grid-template-columns: 52px 28px minmax(0,1fr); gap: 6px; }
}

/* AI website deployment workflow */
.website-deployment-workflow {
  padding: 62px 0 82px;
  border-top: 1px solid var(--ink);
}

.website-deployment-heading {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, .7fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 28px;
}

.website-deployment-heading h3 {
  margin: 5px 0 0;
  font: 680 clamp(30px, 3.8vw, 52px)/1 var(--display);
  letter-spacing: -.04em;
}

.website-deployment-heading > p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.website-deployment-surface {
  min-height: 300px;
  padding: clamp(26px, 4vw, 52px);
  background: var(--ink);
  color: #f8f4ea;
  animation: surface-in 400ms ease-out both;
}

.website-deployment-surface > h4,
.website-deployment-surface > .website-workflow-kicker + h4 {
  margin: 8px 0 26px;
  font: 540 clamp(30px, 4vw, 56px)/1.02 var(--serif);
  letter-spacing: -.04em;
}

.website-workflow-kicker { margin: 0; color: #eea17d; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.website-deployment-surface .eyebrow { color: #eea17d; }
.website-request-form { max-width: 930px; margin-top: 32px; }
.website-request-heading h4 { margin: 5px 0 0; color: #fff; font: 650 24px/1.15 var(--display); }
.website-request-explanation, .website-form-note { color: rgba(248,244,234,.62); font-size: 12px; }
.website-request-explanation { max-width: 680px; margin: 14px 0 26px; }
.website-request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.website-field { display: grid; gap: 7px; }
.website-field-wide { grid-column: 1 / -1; }
.website-field label, .website-approval-form label, .website-preparation-form > label:not(.confirmation-check-light), .website-execution-form > label:not(.confirmation-check-light) { color: rgba(248,244,234,.78); font-size: 12px; font-weight: 700; }
.website-field input, .website-field select, .website-field textarea, .website-approval-form input, .website-preparation-form input, .website-execution-form input {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid rgba(248,244,234,.3);
  padding: 0 2px;
  background: transparent;
  color: #fff;
  font: 600 15px/1.35 var(--body);
}
.website-field textarea { min-height: 80px; padding: 10px 2px; resize: vertical; }
.website-field select { color-scheme: dark; }
.website-field input::placeholder, .website-field textarea::placeholder { color: rgba(248,244,234,.34); }
.website-field input:focus, .website-field select:focus, .website-field textarea:focus, .website-approval-form input:focus, .website-preparation-form input:focus, .website-execution-form input:focus { outline: 0; border-bottom-color: #eea17d; }
.website-form-actions { display: flex; align-items: center; gap: 18px; margin-top: 25px; }
.website-form-status { margin: 18px 0 0; color: #f3c779; font-size: 12px; }
.website-request-summary { padding-bottom: 25px; border-bottom: 1px solid rgba(248,244,234,.16); }
.website-request-summary h4, .website-plan-review h4 { margin: 5px 0 20px; color: #fff; font: 650 clamp(26px, 3.4vw, 44px)/1.05 var(--display); letter-spacing: -.03em; }
.website-details { display: grid; grid-template-columns: minmax(100px, .35fr) 1fr; margin: 0; border-top: 1px solid rgba(248,244,234,.13); }
.website-details dt, .website-details dd { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(248,244,234,.11); font-size: 12px; }
.website-details dt { color: rgba(248,244,234,.48); }
.website-details dd { color: rgba(248,244,234,.8); overflow-wrap: anywhere; }
.website-plan-review { max-width: 980px; padding-top: 30px; }
.website-plan-review h5 { margin: 28px 0 8px; color: #eea17d; font: 750 11px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.website-plan-copy { max-width: 760px; margin: 0; color: rgba(248,244,234,.68); font-size: 13px; }
.website-risk-list { margin: 0; padding-left: 20px; color: rgba(248,244,234,.68); font-size: 12px; }
.website-risk-list li { margin: 8px 0; }
.website-approval-form, .website-preparation-form, .website-execution-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px 16px; align-items: end; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(248,244,234,.17); }
.website-approval-form label, .website-preparation-form > label:not(.confirmation-check-light), .website-execution-form > label:not(.confirmation-check-light), .website-preparation-form > p, .website-execution-form > p, .website-preparation-form .confirmation-check-light, .website-execution-form .confirmation-check-light { grid-column: 1 / -1; }
.website-approval-form input, .website-preparation-form input, .website-execution-form input { grid-column: 1; }
.website-approval-form button { grid-column: 2; grid-row: 2; }
.website-preparation-form button, .website-execution-form button { justify-self: start; }
.confirmation-check-light { display: flex; gap: 10px; align-items: center; color: rgba(248,244,234,.76); font-size: 12px; }
.confirmation-check-light input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--signal); }
.website-form-note { margin: 0 0 3px; }
.website-form-note.is-warning, .website-deployment-warning { color: #f3c779; }
.website-deployment-panel { max-width: 980px; padding-top: 30px; }
.website-operation-id { margin: 0; color: rgba(248,244,234,.45); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.website-deployment-result { max-width: 760px; margin: 22px 0 0; color: #9dd4ae; font-size: 14px; }
.website-result-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.website-admin-note { margin: 16px 0 0; color: rgba(248,244,234,.58); font-size: 12px; }
.website-deployment-pending { color: #f3c779; font-size: 12px; font-weight: 700; }
.website-deployment-warning { margin-top: 22px; font-size: 12px; }
.website-deployment-log { margin-top: 28px; padding: 20px; border: 1px solid rgba(248,244,234,.15); background: #101812; }
.website-deployment-log h5 { margin: 0 0 7px; color: #fff; font: 650 18px/1.2 var(--display); }
.website-deployment-log > p { margin: 0; color: #f3c779; font-size: 12px; font-weight: 700; }
.website-log-list, .website-service-log-list { max-height: 300px; overflow: auto; margin: 16px 0 0; padding: 0; list-style: none; }
.website-log-list li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(248,244,234,.1); }
.website-log-list time, .website-service-log-list time { color: rgba(248,244,234,.4); font-size: 10px; font-variant-numeric: tabular-nums; }
.website-log-list strong { display: block; color: #fff; font-size: 12px; }
.website-log-list span { display: block; margin-top: 4px; color: rgba(248,244,234,.63); font-size: 12px; line-height: 1.5; }
.website-log-list li[data-log-level="error"] strong { color: #f2ab8c; }
.website-deployment-log h6 { margin: 21px 0 8px; color: #fff; font: 650 14px/1.2 var(--display); }
.website-service-log-list { max-height: 220px; margin-top: 0; padding: 8px 12px; background: #090e0b; }
.website-service-log-list li { display: grid; grid-template-columns: 62px 34px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(248,244,234,.07); }
.website-service-log-list b { color: #7fc392; font: 700 9px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.website-service-log-list code { overflow-wrap: anywhere; color: rgba(248,244,234,.73); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.website-service-log-list li[data-log-level="warning"] b, .website-service-log-list li[data-log-level="warning"] code { color: #f3c779; }
.website-service-log-list li[data-log-level="error"] b, .website-service-log-list li[data-log-level="error"] code { color: #f2ab8c; }
.website-log-empty { display: block !important; color: rgba(248,244,234,.45); font-size: 11px; }

.integration-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; margin-top: 36px; }
.connection-form { min-width: 0; padding: 26px 0 30px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.connection-form-heading { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.connection-form-heading .eyebrow { margin-bottom: 7px; }
.connection-form-heading h3 { margin: 0; font: 680 28px/1 var(--display); letter-spacing: -.03em; }
.connection-mode { color: var(--signal-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }
.connection-form-explanation { min-height: 42px; margin: 14px 0 23px; color: var(--ink-soft); font-size: 12px; }
.settings-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.settings-field { display: grid; gap: 7px; min-width: 0; }
.settings-field-wide { grid-column: 1 / -1; }
.settings-field label { color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.settings-field input, .settings-field select { width: 100%; min-height: 42px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 2px; background: transparent; color: var(--ink); font: 600 14px/1.2 var(--body); }
.settings-field select { color-scheme: light; }
.settings-field input:focus, .settings-field select:focus { outline: 0; border-bottom-color: var(--signal); }
.settings-field input::placeholder { color: rgba(83,97,89,.55); }
.connection-test-status { min-height: 22px; margin: 22px 0 13px; color: var(--ink-soft); font-size: 12px; }
.connection-test-status.is-passed { color: var(--forest); font-weight: 750; }
.connection-test-status.is-failed { color: var(--signal-dark); font-weight: 750; }
.connection-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.connection-form .primary-action, .connection-form .secondary-action { min-height: 42px; padding: 0 15px; font-size: 12px; }
.connection-form .secondary-action { color: var(--ink); }
.text-action { min-height: 42px; border: 0; padding: 0 7px; background: transparent; color: var(--signal-dark); font: 700 12px/1 var(--body); cursor: pointer; }
.text-action:hover { text-decoration: underline; }
.text-action:disabled { cursor: not-allowed; opacity: .4; }

@media (max-width: 900px) {
  .website-deployment-heading, .integration-settings { grid-template-columns: 1fr; gap: 26px; }
  .connection-form-explanation { min-height: 0; }
}

@media (max-width: 580px) {
  .website-deployment-workflow { padding: 54px 0 66px; }
  .website-deployment-surface { padding: 28px 22px; }
  .website-request-fields, .settings-fields { grid-template-columns: 1fr; }
  .website-field-wide, .settings-field-wide { grid-column: auto; }
  .website-approval-form, .website-preparation-form, .website-execution-form { grid-template-columns: 1fr; }
  .website-approval-form label, .website-preparation-form > p, .website-preparation-form .confirmation-check-light, .website-execution-form > p, .website-execution-form .confirmation-check-light { grid-column: auto; }
  .website-approval-form input, .website-preparation-form input, .website-execution-form input { grid-column: auto; }
  .website-approval-form button, .website-preparation-form button, .website-execution-form button { grid-column: auto; grid-row: auto; justify-self: stretch; }
  .website-form-actions, .connection-form-actions, .website-result-links { align-items: stretch; flex-direction: column; }
  .website-form-actions > *, .connection-form-actions > *, .website-result-links > * { width: 100%; }
  .website-log-list li { grid-template-columns: 1fr; gap: 3px; }
  .website-service-log-list li { grid-template-columns: 52px 28px minmax(0, 1fr); gap: 6px; }
  .connection-form-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* Client, project, and access management */
.scope-switcher { display: flex; align-items: center; gap: 14px; min-width: 280px; margin-left: auto; }
.scope-switcher label { display: grid; gap: 4px; color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.scope-switcher select { min-width: 128px; max-width: 190px; min-height: 34px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 2px; background: transparent; color: var(--ink); font: 650 12px/1.2 var(--body); }
.scope-switcher select:focus { outline: 0; border-bottom-color: var(--signal); }
.management-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 54px; align-items: start; }
.management-list, .project-management, .role-catalog, .member-management { min-width: 0; }
.management-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 18px; }
.management-section-heading h3 { margin: 5px 0 0; font: 680 28px/1 var(--display); letter-spacing: -.03em; }
.management-section-heading > p { max-width: 360px; margin: 0; color: var(--ink-soft); font-size: 12px; }
.management-row, .management-inline-form, .role-row { padding: 20px 0; border-top: 1px solid var(--line); }
.management-row:last-child, .management-inline-form:last-child, .role-row:last-child { border-bottom: 1px solid var(--line); }
.management-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.management-row h4, .role-row h4 { margin: 0; font: 680 19px/1.1 var(--display); letter-spacing: -.02em; }
.management-row-company, .management-row-meta { margin: 6px 0 0; color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }
.management-row-meta { color: var(--forest); font-weight: 700; }
.management-status, .role-scope { flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.management-status.is-active { color: var(--forest); }
.management-status.is-inactive, .management-status.is-disabled, .management-status.is-removed { color: var(--signal-dark); }
.management-status.is-incomplete, .management-status.is-pending_activation { color: #9a671d; }
.management-details { display: grid; grid-template-columns: 70px 1fr; margin: 15px 0 0; font-size: 12px; }
.management-details dt, .management-details dd { margin: 0; padding: 5px 0; border-bottom: 1px solid rgba(24,36,29,.08); }
.management-details dt { color: var(--ink-soft); }
.management-details dd { overflow-wrap: anywhere; }
.management-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 15px; }
.management-actions .primary-action, .management-actions .secondary-action { min-height: 38px; padding-inline: 13px; font-size: 11px; }
.management-actions .text-action { min-height: 32px; padding-inline: 0; }
.management-danger { color: var(--signal-dark); }
.management-form { display: grid; gap: 15px; padding: 24px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.22); }
.management-form label, .management-control { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.management-form input, .management-form select, .management-form textarea, .management-control input, .management-control select, .management-control textarea, .member-management select { width: 100%; min-height: 40px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 7px 2px; background: transparent; color: var(--ink); font: 600 14px/1.35 var(--body); }
.management-form textarea, .management-control textarea { min-height: 68px; resize: vertical; }
/* 勾选框不能吃上面那条给输入框写的 width:100% / min-height:40px——
   那会让每个勾选框铺满一行、点起来像在点一条横杠。 */
.management-checkbox { display: flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 600; color: var(--ink); cursor: pointer; }
.management-checkbox input[type="checkbox"] { width: 16px; min-height: 16px; height: 16px; margin: 0; flex: 0 0 auto; border-bottom: 0; padding: 0; accent-color: var(--signal); cursor: pointer; }
.management-form input:focus, .management-form select:focus, .management-form textarea:focus, .management-control input:focus, .management-control select:focus, .management-control textarea:focus, .member-management select:focus { outline: 0; border-bottom-color: var(--signal); }
.management-form .primary-action { width: 100%; min-height: 46px; margin-top: 3px; }
.management-form-status { min-height: 19px; margin: 0; color: var(--signal-dark); font-size: 11px; }
.management-form-status[data-status="success"] { color: var(--forest); }
.activation-secret { display: block; overflow-wrap: anywhere; color: var(--forest); font-weight: 750; line-height: 1.6; }
.project-management { margin-top: 58px; }
.project-form { max-width: 640px; margin-top: 28px; }
.management-inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.management-inline-form .management-control:nth-child(5), .management-inline-form .management-control:nth-child(6), .management-inline-form .management-actions { grid-column: 1 / -1; }
.management-inline-form .primary-action { min-height: 40px; padding-inline: 15px; }
.users-grid { margin-bottom: 58px; }
.role-catalog { padding-top: 8px; }
.role-row { display: grid; grid-template-columns: minmax(150px, .35fr) auto; gap: 9px 20px; align-items: baseline; }
.role-row .role-permissions { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.member-management { margin-top: 58px; padding-top: 32px; border-top: 1px solid var(--ink); }
.member-form { max-width: 640px; margin-top: 22px; }
.management-empty { margin: 0; padding: 24px 0; color: var(--ink-soft); font-size: 13px; }
.scope-empty { min-height: 300px; }

@media (max-width: 1120px) {
  .scope-switcher { min-width: 240px; gap: 8px; }
  .scope-switcher select { max-width: 145px; min-width: 105px; }
  .management-grid { grid-template-columns: 1fr; gap: 34px; }
  .project-management { margin-top: 40px; }
}

@media (max-width: 760px) {
  .workspace-topbar { flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .workspace-topbar > div:nth-of-type(1) { min-width: 0; }
  .scope-switcher { order: 3; width: 100%; min-width: 0; margin-left: 0; }
  .scope-switcher label { flex: 1; }
  .scope-switcher select { width: 100%; max-width: none; }
  .management-section-heading { display: block; }
  .management-section-heading > p { margin-top: 10px; }
  .management-inline-form { grid-template-columns: 1fr; }
  .management-inline-form .management-control, .management-inline-form .management-actions { grid-column: auto; }
  .management-form { padding: 22px 18px; }
  .role-row { grid-template-columns: 1fr; gap: 6px; }
  .role-row .role-permissions { grid-column: auto; }
}

/* Compact client and project workspace */
.scope-switcher label > span { display: block; }
.management-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink);
}
.management-page-head h2 { margin: 0 0 7px; font: 680 clamp(32px, 4vw, 50px)/.98 var(--display); letter-spacing: -.04em; }
.management-page-head p:not(.eyebrow) { max-width: 560px; margin: 0; color: var(--ink-soft); font-size: 13px; }
.management-page-head .primary-action { flex: 0 0 auto; min-height: 46px; }
.management-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--ink); }
.management-tabs button {
  min-height: 45px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 18px 10px;
  background: transparent;
  color: var(--ink-soft);
  font: 750 13px/1 var(--body);
  cursor: pointer;
}
.management-tabs button:hover { color: var(--ink); }
.management-tabs button[aria-selected="true"] { border-bottom-color: var(--signal); color: var(--ink); }
.management-pane { min-width: 0; }
.management-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(118px, .32fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.management-pane[data-management-pane="projects"] .management-toolbar {
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(112px, .28fr)) auto;
}
.management-toolbar label { display: grid; min-width: 0; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.management-toolbar label > span { letter-spacing: .06em; }
.management-toolbar input, .management-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--ink);
  font: 600 13px/1.2 var(--body);
}
.management-toolbar input:focus, .management-toolbar select:focus { outline: 0; border-bottom-color: var(--signal); }
.management-toolbar input::placeholder { color: rgba(83,97,89,.62); }
.management-toolbar .secondary-action { min-height: 42px; padding-inline: 13px; font-size: 11px; white-space: nowrap; }
.management-results-row { display: flex; align-items: center; min-height: 36px; }
.management-results-row p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.management-table-wrap { min-width: 0; overflow: visible; }
.management-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.management-table th, .management-table td { border-bottom: 1px solid var(--line); text-align: left; }
.management-table th { padding: 0 12px 10px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.management-table th:first-child, .management-table td:first-child { padding-left: 0; }
.management-table th:nth-child(1) { width: 22%; }
.management-table th:nth-child(2) { width: 20%; }
.management-table th:nth-child(3) { width: 11%; }
.management-table th:nth-child(4) { width: 15%; }
.management-table th:nth-child(5) { width: 11%; }
.management-table th:nth-child(6) { width: 21%; }
.management-table td { min-width: 0; padding: 15px 12px; vertical-align: middle; font-size: 12px; }
.management-table-row { transition: background 160ms ease; }
.management-table-row:hover { background: rgba(49,88,69,.045); }
.management-table-primary { display: block; overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.management-table-secondary { display: block; overflow: hidden; margin-top: 3px; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.management-table-detail, .management-table-contact { color: var(--ink-soft); overflow-wrap: anywhere; }
.management-table-truncate .management-table-primary { text-overflow: ellipsis; }
.management-table-count { color: var(--ink-soft); white-space: nowrap; }
.management-table-link { max-width: 100%; overflow: hidden; border: 0; padding: 0; background: transparent; color: var(--ink); font: 750 14px/1.2 var(--display); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.management-table-link:hover { color: var(--signal-dark); text-decoration: underline; text-underline-offset: 3px; }
.management-table .management-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.management-table .management-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border: 1px solid currentColor; border-radius: 50%; }
.management-table .management-status.is-active { color: var(--forest); }
.management-table .management-status.is-incomplete, .management-table .management-status.is-pending { color: #9a671d; }
.management-table .management-status.is-inactive { color: var(--signal-dark); }
.management-table-actions-cell { overflow: visible; }
.management-table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.management-table-action {
  min-height: 38px;
  border: 1px solid var(--line);
  padding: 0 10px;
  background: transparent;
  color: var(--ink);
  font: 700 11px/1 var(--body);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.management-table-action:hover { border-color: var(--ink); background: rgba(49,88,69,.06); transform: translateY(-1px); }
.management-table-action.is-primary { border-color: var(--signal); color: var(--signal-dark); }
.management-table-action.is-primary:hover { background: rgba(206,99,55,.1); }
.management-table-action.is-danger { color: var(--signal-dark); }
.management-table-action:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.management-menu { position: relative; }
.management-menu > summary { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--line); padding: 0 10px; color: var(--ink-soft); font: 700 11px/1 var(--body); cursor: pointer; list-style: none; }
.management-menu > summary::-webkit-details-marker { display: none; }
.management-menu > summary::after { content: "＋"; margin-left: 6px; font-size: 13px; }
.management-menu[open] > summary::after { content: "－"; }
.management-menu > summary:hover { border-color: var(--ink); color: var(--ink); }
.management-menu-list { position: absolute; top: calc(100% + 5px); right: 0; z-index: 5; min-width: 148px; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 rgba(49,88,69,.11); }
.management-menu-list button { min-height: 38px; border: 0; padding: 0 9px; background: transparent; color: var(--ink); font: 650 11px/1 var(--body); text-align: left; cursor: pointer; }
.management-menu-list button:hover { background: rgba(49,88,69,.08); }
.management-menu-list button.is-danger { color: var(--signal-dark); }
.management-menu-list button:disabled { cursor: wait; opacity: .5; }
.management-empty-row td { padding: 0; }
.management-empty-row { display: grid; justify-items: start; gap: 6px; padding: 34px 0 38px; }
.management-empty-row strong { font: 650 22px/1.1 var(--display); }
.management-empty-row p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.management-empty-row .management-table-action { margin-top: 7px; }
.management-pagination { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 16px; border-bottom: 1px solid var(--ink); }
.management-page-controls { display: flex; align-items: center; gap: 8px; }
.management-page-summary { min-width: 82px; color: var(--ink-soft); font-size: 11px; text-align: center; }
.management-page-size { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11px; }
.management-page-size select { min-height: 36px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 11px/1 var(--body); }
.management-page-size select:focus { outline: 0; border-bottom-color: var(--signal); }
.management-drawer-shell { position: fixed; inset: 0; z-index: 30; }
.management-drawer-scrim { position: absolute; inset: 0; background: rgba(10,16,12,.56); backdrop-filter: blur(2px); }
.management-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); display: flex; flex-direction: column; border-left: 1px solid var(--ink); background: var(--paper); box-shadow: -18px 0 55px rgba(10,16,12,.17); animation: drawer-enter 220ms ease-out both; }
.management-drawer-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 27px 29px 20px; border-bottom: 1px solid var(--ink); }
.management-drawer-header h2 { max-width: 370px; margin: 5px 0 0; font: 680 clamp(28px, 4vw, 42px)/.98 var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.drawer-close { min-height: 44px; flex: 0 0 auto; border: 1px solid var(--ink); padding: 0 12px; background: transparent; color: var(--ink); font: 700 11px/1 var(--body); cursor: pointer; }
.drawer-close:hover { background: var(--ink); color: var(--paper); }
.management-drawer-body { min-height: 0; flex: 1; overflow-y: auto; padding: 26px 29px 36px; }
.drawer-content, .drawer-form { display: grid; gap: 25px; }
.drawer-form { gap: 16px; }
.drawer-form-lead, .drawer-warning { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.drawer-warning { padding: 12px 14px; border-left: 2px solid var(--signal); background: rgba(206,99,55,.08); color: var(--ink); font-weight: 750; }
.drawer-form .management-control { gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.drawer-form .management-control input, .drawer-form .management-control select, .drawer-form .management-control textarea { width: 100%; min-height: 42px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 7px 2px; background: transparent; color: var(--ink); font: 600 14px/1.35 var(--body); }
.drawer-form .management-control textarea { min-height: 74px; resize: vertical; }
.drawer-form .management-control input:focus, .drawer-form .management-control select:focus, .drawer-form .management-control textarea:focus { outline: 0; border-bottom-color: var(--signal); }
.drawer-confirmation { display: flex; align-items: start; gap: 9px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; cursor: pointer; }
.drawer-confirmation input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--signal); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }
.drawer-actions .primary-action, .drawer-actions .secondary-action { min-height: 46px; padding-inline: 16px; font-size: 12px; }
.drawer-actions .management-table-action { min-height: 46px; }
.drawer-form-status { min-height: 20px; margin: 0; color: var(--signal-dark); font-size: 11px; }
.drawer-section { display: grid; gap: 12px; }
.drawer-section h3 { margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--line); font: 680 19px/1.1 var(--display); }
.drawer-code-block { margin: 0; padding: 12px; border-radius: 8px; background: rgba(24,36,29,.06); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.workspace-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.operations-draft-fields { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.drawer-details { display: grid; grid-template-columns: 100px minmax(0, 1fr); margin: 0; font-size: 12px; }
.drawer-details dt, .drawer-details dd { min-width: 0; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(24,36,29,.08); overflow-wrap: anywhere; }
.drawer-details dt { color: var(--ink-soft); }
.drawer-details dd { font-weight: 650; }
.drawer-project-list { display: grid; gap: 0; }
.drawer-project-item { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.drawer-project-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.drawer-project-item strong { font: 680 16px/1.15 var(--display); }
.drawer-project-item p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.drawer-project-item .management-table-action { justify-self: start; }
.drawer-empty, .drawer-member-summary p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.drawer-member-summary { display: grid; gap: 6px; }
.drawer-detail-actions { padding-top: 22px; }
body.management-drawer-open { overflow: hidden; }
@keyframes drawer-enter { from { opacity: 0; transform: translateX(20px); } }

@media (max-width: 760px) {
  .management-page-head { align-items: stretch; flex-direction: column; gap: 16px; margin-bottom: 16px; padding-bottom: 17px; }
  .management-page-head .primary-action { width: 100%; }
  .management-tabs { margin-inline: -2px; }
  .management-tabs button { flex: 1; min-height: 48px; padding-inline: 8px; }
  .management-toolbar, .management-pane[data-management-pane="projects"] .management-toolbar { grid-template-columns: 1fr; gap: 10px; }
  .management-toolbar .secondary-action { width: 100%; }
  .management-table-wrap { overflow: visible; }
  .management-table, .management-table tbody, .management-table tr, .management-table td { display: block; }
  .management-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .management-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 15px 0; }
  .management-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 0; padding: 0; border: 0; font-size: 12px; }
  .management-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 10px; font-weight: 800; }
  .management-table td.management-table-name { grid-column: 1; display: block; }
  .management-table td.management-table-name::before, .management-table td.management-table-status::before, .management-table td.management-table-actions-cell::before { display: none; }
  .management-table td.management-table-status { grid-column: 2; display: block; text-align: right; }
  .management-table td.management-table-detail, .management-table td.management-table-count, .management-table td.management-table-contact { grid-column: 1 / -1; }
  .management-table td.management-table-actions-cell { grid-column: 1 / -1; display: flex; padding-top: 8px; border-top: 1px solid rgba(24,36,29,.08); }
  .management-table-actions { width: 100%; justify-content: flex-start; }
  .management-table-action, .management-menu > summary { min-height: 44px; }
  .management-menu-list button { min-height: 44px; }
  .management-pagination { min-height: 66px; }
  .management-page-summary { min-width: 70px; }
  .management-drawer { width: 100vw; border-left: 0; }
  .management-drawer-header { padding: 20px 16px 16px; }
  .management-drawer-body { padding: 22px 16px 108px; }
  .drawer-actions { position: sticky; bottom: -1px; z-index: 2; margin: 0 -16px -108px; padding: 14px 16px; background: var(--paper); box-shadow: 0 -10px 22px rgba(24,36,29,.08); }
  .drawer-actions > * { flex: 1 1 150px; }
  .drawer-actions .primary-action, .drawer-actions .secondary-action { width: auto; }
}

@media (max-width: 420px) {
  .management-page-head h2 { font-size: 36px; }
  .management-table td { grid-template-columns: 5.8rem minmax(0, 1fr); }
  .management-table-actions { gap: 5px; }
  .management-table-action, .management-menu > summary { padding-inline: 8px; }
}

/* Unified operations workspaces */
.legacy-workflow-support { display: none !important; }
.workspace-v2-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.workspace-v2-head > div { min-width: 0; }
.workspace-v2-head h2 { margin: 4px 0 8px; font: 680 clamp(34px, 4vw, 54px)/.98 var(--display); letter-spacing: -.045em; }
.workspace-v2-head > div > p:not(.eyebrow) { max-width: 700px; margin: 0; color: var(--ink-soft); font-size: 13px; }
.workspace-v2-head > .primary-action, .workspace-v2-head > .secondary-action { flex: 0 0 auto; min-height: 44px; }
.overview-head { align-items: stretch; }
.overview-scope-summary { min-width: min(360px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 18px; align-content: center; padding-left: 22px; border-left: 1px solid var(--line); }
.overview-scope-summary span { color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.overview-scope-summary strong { overflow: hidden; font: 680 15px/1.15 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 40px; }
.overview-section { min-width: 0; padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.section-inline-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.section-inline-heading h3 { margin: 3px 0 0; font: 680 24px/1.05 var(--display); letter-spacing: -.03em; }
.count-label { min-width: 28px; color: var(--signal-dark); font: 750 12px/1 var(--body); text-align: right; }
.compact-list { margin: 0; padding: 0; list-style: none; }
.overview-pending-item { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1fr); gap: 18px; align-items: baseline; min-height: 48px; padding: 12px 0; border-top: 1px solid rgba(24,36,29,.1); }
.overview-pending-item:first-child { border-top-color: var(--ink); }
.overview-pending-item > span { overflow-wrap: anywhere; color: var(--ink-soft); font-size: 12px; }
.overview-pending-action, .overview-recent-action { border: 0; padding: 0; background: transparent; color: var(--ink); font: 750 13px/1.3 var(--body); text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; }
.overview-pending-action:hover, .overview-recent-action:hover { color: var(--signal-dark); text-decoration-color: currentColor; }
.asset-status-list { border-top: 1px solid var(--ink); }
.asset-status-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; border-bottom: 1px solid rgba(24,36,29,.1); }
.asset-status-row strong { font: 750 12px/1 var(--body); }
.asset-status-row > span:not(.workspace-status) { overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.overview-recent-section { margin-top: 2px; }
.overview-recent-list { border-top: 1px solid var(--ink); }
.overview-recent-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 50px; padding: 11px 0; border-bottom: 1px solid rgba(24,36,29,.1); }
.overview-recent-list li > span:not(.workspace-status) { overflow: hidden; color: var(--ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.overview-shortcuts { display: flex; align-items: start; justify-content: space-between; gap: 28px; padding-top: 24px; }
.overview-shortcuts h3 { margin: 3px 0 0; font: 680 24px/1.05 var(--display); }
.shortcut-actions { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shortcut-actions .secondary-action { min-height: 74px; display: grid; justify-items: start; align-content: center; gap: 4px; padding: 12px 14px; text-align: left; }
.shortcut-actions .secondary-action span { font-weight: 750; }
.shortcut-actions .secondary-action small { color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.workspace-tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--ink); }
.workspace-tabs button { min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 0 16px 10px; background: transparent; color: var(--ink-soft); font: 750 12px/1 var(--body); cursor: pointer; }
.workspace-tabs button:hover { color: var(--ink); }
.workspace-tabs button[aria-selected="true"] { border-bottom-color: var(--signal); color: var(--ink); }
.workspace-scope-line { display: flex; align-items: baseline; gap: 10px; min-height: 34px; color: var(--ink-soft); font-size: 11px; }
.workspace-scope-line strong { color: var(--ink); font-size: 13px; }
.muted-label { margin-left: auto; }
.infrastructure-content, .site-content, .ai-content { min-width: 0; }
.infrastructure-pane, .site-overview-content, .ai-content > section { min-width: 0; }
.workspace-record-list { border-top: 1px solid var(--ink); }
.workspace-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; min-height: 92px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.workspace-record-copy { min-width: 0; display: grid; gap: 5px; }
.workspace-record-copy > .eyebrow { margin-bottom: 0; font-size: 9px; }
.workspace-record-copy > strong { overflow: hidden; font: 680 18px/1.15 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.workspace-record-copy > p { margin: 0; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 12px; }
.workspace-record-copy > small { color: var(--ink-soft); font-size: 10px; }
.workspace-record-actions { display: flex; align-items: center; gap: 14px; }
.workspace-record-actions .management-table-action { min-height: 40px; }
.workspace-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.workspace-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border: 1px solid currentColor; border-radius: 50%; }
.workspace-status.is-success { color: var(--forest); }
.workspace-status.is-warning { color: #9a671d; }
.workspace-status.is-danger { color: var(--signal-dark); }
.workspace-status.is-neutral { color: var(--ink-soft); }
.workspace-empty { display: grid; justify-items: start; gap: 16px; min-height: 150px; place-content: center start; padding: 28px 0; color: var(--ink-soft); font-size: 13px; }
.workspace-empty p { margin: 0; }
.workspace-empty .primary-action, .workspace-empty .secondary-action { min-height: 44px; }
.workspace-check-list { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.workspace-check-list li { display: grid; grid-template-columns: auto minmax(110px, .3fr) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.workspace-check-list li > strong { font-size: 12px; }
.workspace-check-list li > span:last-child { color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }
.workspace-success-note, .workspace-warning-note { margin: 18px 0 0; padding: 12px 14px; border-left: 2px solid var(--forest); background: rgba(49,88,69,.06); color: var(--forest); font-size: 12px; }
.workspace-warning-note { border-left-color: var(--signal); background: rgba(206,99,55,.08); color: var(--signal-dark); }
.site-panel .site-band { margin-bottom: 24px; padding: 22px 0; }
.site-panel .site-identity h3 { font-size: clamp(25px, 3vw, 38px); }
.site-panel .site-content .drawer-section { margin-bottom: 24px; }
.site-overview-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 36px; }
.site-overview-content > .drawer-section { min-width: 0; }
.site-overview-content > .management-table-action { grid-column: 1 / -1; justify-self: start; }
.ai-status-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; min-height: 42px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.ai-status-line strong { color: var(--ink); font-size: 13px; }
.ai-status-line strong:nth-of-type(2) { margin-left: 18px; }
.ai-content { padding-top: 2px; }
.ai-tool-list { border-top: 1px solid var(--ink); }
.ai-rules-help { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ink); }
.ai-rules-help h3 { margin: 4px 0 0; font: 680 23px/1.05 var(--display); }
.ai-rules-help .agent-boundaries { padding: 8px 0 0; }
.ai-rules-help .agent-boundaries li { grid-template-columns: 110px minmax(0, 1fr); padding: 14px 0; border-color: var(--line); }
.ai-rules-help .agent-boundaries strong { color: var(--signal-dark); }
.settings-pane { min-width: 0; }
.connection-list { border-top: 1px solid var(--ink); }
.connection-list > .connection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 94px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.connection-row-copy { min-width: 0; display: grid; gap: 5px; }
.connection-row-copy > .eyebrow { margin: 0; font-size: 9px; }
.connection-row-copy strong { overflow: hidden; font: 680 18px/1.15 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.connection-row-copy p { margin: 0; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 11px; }
.connection-row-actions { display: flex; align-items: center; gap: 15px; }
.connection-row-actions > small { color: var(--ink-soft); font-size: 10px; white-space: nowrap; }
.connection-row-actions .secondary-action { min-height: 40px; padding-inline: 14px; font-size: 11px; }
.project-tools-summary { max-width: 850px; }
.project-tools-content { display: grid; gap: 20px; }
.activity-filter-bar { display: grid; grid-template-columns: minmax(190px, 1fr) repeat(4, minmax(110px, .35fr)) auto; align-items: end; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.activity-filter-bar label { display: grid; min-width: 0; gap: 5px; color: var(--ink-soft); font-size: 10px; font-weight: 800; }
.activity-filter-bar input, .activity-filter-bar select { width: 100%; min-height: 40px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 2px; background: transparent; color: var(--ink); font: 600 12px/1.2 var(--body); }
.activity-filter-bar input:focus, .activity-filter-bar select:focus { outline: 0; border-bottom-color: var(--signal); }
.activity-filter-bar .secondary-action { min-height: 40px; padding-inline: 12px; font-size: 11px; white-space: nowrap; }
.activity-results-row { min-height: 36px; display: flex; align-items: center; }
.activity-results-row p { margin: 0; color: var(--ink-soft); font-size: 11px; }
.activity-table-wrap { min-width: 0; overflow: visible; }
.activity-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.activity-table th, .activity-table td { border-bottom: 1px solid var(--line); text-align: left; }
.activity-table th { padding: 0 10px 9px; color: var(--ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.activity-table th:first-child, .activity-table td:first-child { padding-left: 0; }
.activity-table th:nth-child(1) { width: 14%; }
.activity-table th:nth-child(2) { width: 17%; }
.activity-table th:nth-child(3) { width: 17%; }
.activity-table th:nth-child(4) { width: 23%; }
.activity-table th:nth-child(5) { width: 17%; }
.activity-table th:nth-child(6) { width: 12%; }
.activity-table td { min-width: 0; padding: 14px 10px; color: var(--ink-soft); font-size: 11px; overflow-wrap: anywhere; }
.activity-row { cursor: pointer; transition: background 160ms ease; }
.activity-row:hover, .activity-row:focus-visible { outline: 0; background: rgba(49,88,69,.055); }
.activity-row:focus-visible { box-shadow: inset 0 3px 0 var(--signal), inset 0 -3px 0 var(--signal); }
.activity-row td:nth-child(2), .activity-row td:nth-child(3) { color: var(--ink); font-weight: 700; }
.activity-empty { display: block; padding: 32px 0; color: var(--ink-soft); }
.activity-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 62px; border-bottom: 1px solid var(--ink); }
.activity-pagination .secondary-action { min-height: 38px; padding-inline: 12px; font-size: 11px; }
.pagination-label { min-width: 82px; color: var(--ink-soft); font-size: 11px; text-align: center; }
.workspace-drawer-content { min-width: 0; display: grid; gap: 20px; }
.workspace-drawer-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--ink); }
.workspace-drawer-tab { min-height: 42px; border: 0; border-bottom: 2px solid transparent; padding: 0 10px 9px; background: transparent; color: var(--ink-soft); font: 750 11px/1 var(--body); cursor: pointer; }
.workspace-drawer-tab[aria-selected="true"] { border-bottom-color: var(--signal); color: var(--ink); }
.workspace-drawer-panel { min-width: 0; }
.workspace-drawer-panel[hidden] { display: none; }
.workspace-log-details { border-top: 1px solid var(--ink); }
.workspace-log-details > summary { min-height: 48px; display: flex; align-items: center; color: var(--ink); font-size: 12px; font-weight: 750; cursor: pointer; }
.workspace-log-details > summary::marker { color: var(--signal); }
.workspace-log-details .coolify-install-log { margin-top: 10px; }
.infrastructure-onboarding-content .onboarding-form { min-height: auto; }
.infrastructure-onboarding-content .onboarding-result { min-height: 0; }
.site-deployment-drawer-content .website-deployment-surface { min-height: 0; }
.activity-detail-content .drawer-section:last-child { padding-bottom: 4px; }

@media (max-width: 900px) {
  .overview-grid, .site-overview-content { grid-template-columns: 1fr; gap: 0; }
  .overview-shortcuts { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .shortcut-actions { width: 100%; }
  .activity-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-filter-bar .activity-search { grid-column: 1 / -1; }
  .activity-filter-bar .secondary-action { width: 100%; }
}

@media (max-width: 760px) {
  .workspace-v2-head { align-items: stretch; flex-direction: column; gap: 16px; margin-bottom: 18px; padding-bottom: 17px; }
  .workspace-v2-head > .primary-action, .workspace-v2-head > .secondary-action { width: 100%; }
  .overview-scope-summary { min-width: 0; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .workspace-tabs { overflow-x: auto; }
  .workspace-tabs button { flex: 0 0 auto; min-width: 92px; }
  .workspace-scope-line { flex-wrap: wrap; }
  .muted-label { width: 100%; margin-left: 0; }
  .workspace-record { grid-template-columns: 1fr; gap: 13px; align-items: start; }
  .workspace-record-actions { flex-wrap: wrap; justify-content: space-between; }
  .workspace-record-actions .management-table-action { flex: 1 1 150px; }
  .asset-status-row { grid-template-columns: 76px minmax(0, 1fr); gap: 7px 10px; padding: 11px 0; }
  .asset-status-row .workspace-status { grid-column: 2; }
  .overview-pending-item, .overview-recent-list li { grid-template-columns: 1fr; gap: 5px; align-items: start; }
  .overview-recent-list li { padding: 12px 0; }
  .overview-recent-list .workspace-status { justify-self: start; }
  .shortcut-actions { grid-template-columns: 1fr; }
  .shortcut-actions .secondary-action { width: 100%; }
  .ai-status-line strong:nth-of-type(2) { margin-left: 0; }
  .connection-list > .connection-row { grid-template-columns: 1fr; gap: 13px; align-items: start; }
  .connection-row-actions { flex-wrap: wrap; justify-content: space-between; }
  .connection-row-actions .secondary-action { flex: 1 1 130px; }
  .activity-filter-bar { grid-template-columns: 1fr; }
  .activity-filter-bar .activity-search { grid-column: auto; }
  .activity-table, .activity-table tbody, .activity-table tr, .activity-table td { display: block; }
  .activity-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .activity-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 14px 0; }
  .activity-table td { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 2px 0; border: 0; }
  .activity-table td::before { content: attr(data-label); color: var(--ink-soft); font-size: 10px; font-weight: 800; }
  .activity-table td:first-child { grid-column: 1 / -1; }
  .activity-table td:last-child { grid-column: 2; display: block; text-align: right; }
  .activity-table td:last-child::before { display: none; }
  .activity-table td:nth-child(2), .activity-table td:nth-child(3), .activity-table td:nth-child(4), .activity-table td:nth-child(5) { grid-column: 1 / -1; }
  .activity-pagination { justify-content: space-between; }
  .workspace-drawer-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .workspace-drawer-tab { flex: 0 0 auto; }
  .workspace-check-list li { grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .workspace-check-list li > span:last-child { grid-column: 2; }
}

@media (max-width: 420px) {
  .workspace-v2-head h2 { font-size: 38px; }
  .workspace-tabs button { min-width: 84px; padding-inline: 10px; }
  .overview-scope-summary { grid-template-columns: 5.2rem minmax(0, 1fr); }
  .workspace-record-copy > strong { white-space: normal; }
  .workspace-record-actions { align-items: stretch; }
  .workspace-record-actions .workspace-status { width: 100%; }
  .workspace-record-actions .management-table-action { width: 100%; }
  .activity-table td { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* 产品简报的实物图。缩略图要够大到能认出是不是拍错了那台机器——
   太小的话人会照着上传，等商品页上线才发现图不对。 */
.brief-thumb {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  max-width: 140px;
}

.brief-thumb img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--forest-light);
}

.brief-thumb figcaption {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
  word-break: break-all;
}

/* 一个项目可以有多个网站。少于两个时这个下拉框整体隐藏——
   永远只有一个选项的选择器只会让人多点一次。 */
.site-switcher {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.site-switcher select {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 600 13px/1.3 var(--body);
  padding: 2px 2px 4px;
}

/* 录入表单里的实物图选择器。选了什么要看得见并且能单张撤掉——
   只显示"已选 3 个文件"的话，选错一张就只能全部重来。 */
.brief-picker { gap: 10px; }

.brief-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.brief-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.brief-picker-row img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.brief-picker-row span { flex: 1 1 auto; word-break: break-all; }

/* 缩略图和「上传实物图」并排。不定 flex-start 的话，
   按钮会被 flex 默认的 stretch 拉成整列那么高。 */
.brief-strip { align-items: flex-start; }

.brief-picker-copy { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; }
.brief-picker-copy span { word-break: break-all; }
.brief-picker-copy input { min-height: 32px; font-size: 13px; }

/* Search Console 接入的几步全在 Google 那边做，做漏一步的表现都是「连不上」，
   所以直接把步骤列在表单里，而不是让人去翻文档。 */
.connection-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.connection-properties { display: grid; gap: 4px; }
.connection-properties code {
  font-size: 12px;
  word-break: break-all;
  color: var(--ink);
}

.settings-field textarea {
  min-height: 120px;
  resize: vertical;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}

/* ===== 接管表单搬进抽屉后的配色修正 =====
 *
 * `.onboarding-form` 和 `.onboarding-result` 原本长在 `.onboarding-layout` 里，
 * 深色背景在**外层那个容器**上，文字色因此是 rgba(248,244,234,…) 这一套近白色。
 * 改版后 `createInfrastructureOnboardingDrawer()` 只把**里面的表单和结果**搬进了
 * 管理抽屉，外层那层深色背景没有跟过来 —— 抽屉是 var(--paper) 浅底。
 * 实测对比度只剩 1.03~1.16（WCAG AA 要求 4.5）：标签、说明文字，
 * 连**输入框里自己敲进去的内容**都是白底白字，而这里敲的是 SSH 密码和私钥。
 *
 * 作用域刻意只到 `.infrastructure-onboarding-content`，不是整个抽屉。
 * 同样被搬进抽屉的 `.work-surface` / `.website-deployment-surface` **自带深色背景**
 * （background: var(--ink)），它们的近白色文字本来就是对的 ——
 * 一开始按整个抽屉改，正好把那两块改成了深底深字，对比度 1。
 */
.infrastructure-onboarding-content :is(.field, .credential-choice, .approval-form, .credential-form) label,
.infrastructure-onboarding-content .credential-choice legend {
  color: var(--ink-soft);
}
.infrastructure-onboarding-content .form-heading { border-bottom-color: var(--line); }
.infrastructure-onboarding-content .form-heading strong { color: var(--ink); }
.infrastructure-onboarding-content .form-heading > span { color: var(--signal-dark); }

/* 说明性小字 */
.infrastructure-onboarding-content :is(.field small, .credential-choice small, .form-heading small, .onboarding-empty ul, .plan-target, .plan-steps span, .plan-safety) {
  color: rgba(24, 36, 29, .72);
}

/* 输入控件：白底白字最要命 —— 在这里敲的是 SSH 密码和私钥 */
.infrastructure-onboarding-content :is(.field, .credential-form) :is(input, select, textarea) {
  border-bottom-color: var(--line);
  color: var(--ink);
}
.infrastructure-onboarding-content .field :is(input, textarea)::placeholder { color: rgba(24, 36, 29, .45); }
.infrastructure-onboarding-content .field select { color-scheme: light; }
.infrastructure-onboarding-content .credential-choice label { border-block-color: var(--line); }
.infrastructure-onboarding-content .credential-choice label :is(strong, span) { color: var(--ink); }
.infrastructure-onboarding-content .credential-choice label small { color: rgba(24, 36, 29, .72); }

/* 自带深底的块（方案里的安装日志）在抽屉里仍然是深底，文字保持近白色。
 * 放在最后，靠后来居上盖过上面几条。 */
.infrastructure-onboarding-content :is(.coolify-install-log, .coolify-terminal-output) :is(p, span, code, time, li, small) {
  color: rgba(248, 244, 234, .7);
}

/* `.management-danger` 原本是给文字按钮写的：透明底 + 深橙字。
 * 但它被叠加到了填充橙底的 `.primary-action` 上（如"停用网站"），
 * 而且规则在后面，于是 color 覆盖成深橙 —— 橙底橙字，实测对比度 1.66。
 * 一个**危险动作**的按钮看不清是最不该发生的：人要么按不下去，要么看不清按的是什么。
 * 填充态改成深橙底 + 白字（对比度 6.4），既读得清，也比普通主按钮更"重"。 */
.primary-action.management-danger {
  border-color: var(--signal-dark);
  background: var(--signal-dark);
  color: #fff;
}
.primary-action.management-danger:hover { background: #82361c; }

/* 停留式提示条：失败原因几十上百个字，原来固定 3.2 秒自动消失且没法关掉，
 * 人只知道"出错了"，不知道错在哪。出错的那条必须等人点掉。
 * pointer-events 要放开——原来是 none，有按钮也点不着。 */
.toast.is-sticky {
  display: grid;
  gap: 10px;
  max-width: min(460px, calc(100% - 48px));
  pointer-events: auto;
  line-height: 1.55;
}
.toast-close {
  justify-self: end;
  min-height: 32px;
  border: 1px solid rgba(248, 244, 234, .5);
  padding: 0 12px;
  background: transparent;
  color: #fff;
  font: 700 11px/1 var(--body);
  cursor: pointer;
}
.toast-close:hover { background: rgba(248, 244, 234, .14); }