:root {
  --bg: #ebece7;
  --surface: #f8f8f5;
  --surface-strong: #fff;
  --dark: #172019;
  --text: #19201b;
  --muted: #707970;
  --line: #d8dcd5;
  --green: #227449;
  --green-soft: #dff1e5;
  --amber: #a85d22;
  --amber-soft: #f8e9dc;
  --red: #ad493b;
  --red-soft: #f8e3df;
  --blue: #315e8a;
  --blue-soft: #e2ecf6;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  min-height: 100svh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }

.eyebrow {
  color: var(--green);
  font-size: 9px;
  letter-spacing: .14em;
}

.auth-shell {
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  background: #f2f3ee;
}

.auth-visual {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  padding: 42px 48px;
  color: #fff;
  background:
    linear-gradient(rgba(123, 220, 169, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 220, 169, .07) 1px, transparent 1px),
    #0d1613;
  background-size: 54px 54px;
}

.auth-brand, .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  color: var(--dark);
  background: #8bd49f;
  font-weight: 800;
  place-items: center;
}

.auth-brand strong, .sidebar-brand strong { display: block; font-size: 12px; }
.auth-brand small, .sidebar-brand small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .38);
  font-size: 8px;
  letter-spacing: .11em;
}

.auth-message { margin: auto 0; }
.auth-message > span { color: #83dcaa; font-size: 9px; letter-spacing: .16em; }
.auth-message h1 {
  margin: 22px 0 0;
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}
.auth-signal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
}
.auth-signal i, .local-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #79db9f;
}

.auth-panel {
  display: grid;
  min-height: 100svh;
  padding: 48px;
  place-items: center;
}
.auth-form { width: min(390px, 100%); }
.auth-form h2 { margin: 12px 0 28px; font-size: 34px; font-weight: 500; }
.auth-form label { display: grid; gap: 8px; margin-top: 16px; }
.auth-form label > span, .form-stack label > span, .inline-input > span {
  color: #4e584f;
  font-size: 10px;
}
input, select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  color: var(--text);
  background: #fff;
  font-size: 12px;
}
textarea { min-height: 84px; padding: 11px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: #6eb58b;
  box-shadow: 0 0 0 3px rgba(88, 168, 124, .1);
}
.auth-error, .inline-message.error { color: var(--red); font-size: 10px; }
.auth-form .primary-button { width: 100%; margin-top: 22px; }

.primary-button, .secondary-button, .danger-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 11px;
}
.primary-button { border: 0; color: #fff; background: var(--dark); }
.primary-button:hover { background: var(--green); }
.primary-button.compact, .secondary-button.compact { min-height: 36px; }
.primary-button svg, .secondary-button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.secondary-button { border: 1px solid var(--line); color: var(--text); background: #fff; }
.secondary-button:hover { border-color: #8eb99e; color: var(--green); }
.danger-button { border: 1px solid #e2b9b2; color: var(--red); background: var(--red-soft); }

.app-shell { min-height: 100svh; }
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  display: flex;
  width: 244px;
  flex-direction: column;
  padding: 24px 18px 18px;
  color: rgba(255, 255, 255, .7);
  background: var(--dark);
}
.sidebar-brand { padding: 0 6px; }
.sidebar-brand strong { color: #fff; }
.nav-list { display: grid; gap: 5px; margin-top: 48px; }
.nav-list button {
  display: grid;
  min-height: 46px;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, .58);
  background: transparent;
  font-size: 12px;
  text-align: left;
}
.nav-list button:hover, .nav-list button.is-active { color: #fff; background: rgba(255, 255, 255, .09); }
.nav-list button.is-active { box-shadow: inset 3px 0 #8bd49f; }
.nav-list svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-footer { display: grid; gap: 14px; margin-top: auto; }
.local-status {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.local-status strong, .local-status small { display: block; }
.local-status strong { color: #fff; font-size: 10px; font-weight: 500; }
.local-status small { margin-top: 3px; color: rgba(255, 255, 255, .35); font-size: 8px; }
.logout-button {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 0;
  color: rgba(255, 255, 255, .5);
  background: transparent;
  font-size: 10px;
}
.logout-button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.logout-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.workspace { min-height: 100svh; margin-left: 244px; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 248, 245, .94);
  backdrop-filter: blur(14px);
}
.topbar strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; }
.topbar-status { display: flex; align-items: center; gap: 10px; }
.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #fff;
  place-items: center;
}
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 14px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 9px;
}
.status-pill.offline { color: var(--amber); background: var(--amber-soft); }
.status-pill.neutral { color: var(--muted); background: #e8ebe6; }

.main-content { width: min(1500px, 100%); margin: 0 auto; padding: 34px; }
.view { animation: view-enter .22s ease both; }
@keyframes view-enter { from { opacity: 0; transform: translateY(4px); } }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.section-head h1 { margin: 8px 0 0; font-size: clamp(27px, 3vw, 40px); font-weight: 500; line-height: 1.12; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-grid article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.metric-grid span, .metric-grid small { color: var(--muted); font-size: 9px; }
.metric-grid strong { display: block; margin: 13px 0 6px; font-size: 31px; font-weight: 500; }
.panel {
  min-width: 0;
  margin-top: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.panel-head h2 { margin: 5px 0 0; font-size: 18px; font-weight: 500; }
.text-button { padding: 0; border: 0; color: var(--green); background: transparent; font-size: 10px; }
.table-wrap { min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 12px; border-top: 1px solid #e1e4df; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 9px; font-weight: 500; white-space: nowrap; }
td { font-size: 10px; }
td strong { font-weight: 500; }
.record-link { padding: 0; border: 0; color: var(--green); background: transparent; font-size: 10px; }

.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.two-column .panel { margin-top: 0; }
.form-stack { display: grid; gap: 15px; }
.form-stack label, .form-subgrid label { display: grid; gap: 8px; }
.drop-zone {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border: 1px dashed #b9c5bb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.drop-zone.is-dragging, .drop-zone:hover { border-color: #69b187; background: #f4faf6; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone svg { width: 28px; fill: none; stroke: var(--green); stroke-width: 1.5; }
.drop-zone strong, .drop-zone small { display: block; }
.drop-zone small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.data-readiness { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.data-readiness div { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.data-readiness span { display: block; color: var(--muted); font-size: 9px; }
.data-readiness strong { display: block; margin-top: 10px; font-size: 26px; font-weight: 500; }
.data-readiness + .secondary-button { margin-top: 12px; }
.inline-message {
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #c9e0d1;
  border-radius: 6px;
  color: var(--green);
  background: #f2faf5;
  font-size: 10px;
}
.mapping-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mapping-grid label { display: grid; gap: 7px; }
.mapping-grid label > span { color: var(--muted); font-size: 9px; }
.form-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}
.inline-input { width: min(360px, 100%); display: grid; gap: 7px; }
.preview-table { margin-top: 18px; }
.ready-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ready-callout h2 { margin: 7px 0; font-size: 21px; font-weight: 500; }
.ready-callout p { margin: 0; color: var(--muted); font-size: 10px; }

.workflow-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; }
.workflow-layout .panel { margin-top: 0; }
.stack-list { display: grid; gap: 7px; }
.workflow-item {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: #fff;
  text-align: left;
}
.workflow-item:hover, .workflow-item.is-active { border-color: #8fbaa0; background: #f4faf6; }
.workflow-item strong, .workflow-item small { display: block; }
.workflow-item strong { font-size: 11px; font-weight: 500; }
.workflow-item small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.workflow-item footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.empty-detail { display: grid; min-height: 360px; align-content: center; justify-items: center; color: var(--muted); font-size: 10px; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.detail-head h2 { margin: 7px 0 0; font-size: 23px; font-weight: 500; }
.detail-head p { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 16px; }
.summary-strip div { padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.summary-strip span, .summary-strip strong { display: block; }
.summary-strip span { color: var(--muted); font-size: 8px; }
.summary-strip strong { margin-top: 8px; font-size: 18px; font-weight: 500; }
.narrative { margin-top: 14px; padding: 14px; border-left: 3px solid var(--green); background: #fff; color: #4c564e; font-size: 10px; line-height: 1.8; }
.review-box { margin-top: 14px; padding: 15px; border: 1px solid #ead6bd; border-radius: 7px; background: #fff8ed; }
.review-box h3 { margin: 0 0 10px; font-size: 12px; font-weight: 500; }
.review-box ul { margin: 0; padding-left: 18px; color: #6f5a41; font-size: 9px; line-height: 1.8; }
.approval-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 16px; }
.approval-form textarea { min-height: 70px; }
.detail-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.settings-grid { margin-bottom: 0; }
.settings-list { margin: 0; }
.settings-list div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid #e2e5e0; }
.settings-list div:first-child { border-top: 0; }
.settings-list dt { color: var(--muted); font-size: 9px; }
.settings-list dd { margin: 0; font-size: 10px; text-align: right; }
.file-input input { padding: 9px 10px; }
.form-subgrid { margin-top: 16px; }
.pricing-row input { min-height: 36px; padding: 0 8px; font-size: 10px; }
.user-create-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}
.user-create-form label { display: grid; gap: 7px; }
.user-create-form label > span { color: var(--muted); font-size: 9px; }
.user-create-form button { min-height: 42px; white-space: nowrap; }
.user-table-wrap { margin-top: 18px; }
.user-row-actions { display: flex; gap: 12px; white-space: nowrap; }
.record-link.is-danger { color: var(--red); }

.selection-grid { align-items: start; }
.selection-grid + .selection-grid { margin-top: 14px; }
.selection-summary { margin: 0 0 16px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.selection-risks {
  margin: 0 0 16px;
  padding: 12px 16px 12px 28px;
  border: 1px solid #ead6bd;
  border-radius: 6px;
  color: #6f5a41;
  background: #fff8ed;
  font-size: 9px;
  line-height: 1.8;
}
.selection-candidates { display: grid; gap: 12px; }
.candidate-item { padding: 16px; border: 1px solid #e2e5e0; border-radius: 7px; background: #fbfcfa; }
.candidate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.candidate-head strong, .candidate-head span { display: block; }
.candidate-head strong { font-size: 13px; font-weight: 500; }
.candidate-head span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.candidate-score {
  margin: 0 !important;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--green) !important;
  background: var(--green-soft);
  white-space: nowrap;
}
.candidate-meta { margin-top: 12px; color: #4e5b52; font-size: 9px; }
.candidate-parameters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.candidate-parameters div { padding: 9px 10px; border-radius: 5px; background: #f0f3ef; }
.candidate-parameters dt { color: var(--muted); font-size: 8px; }
.candidate-parameters dd { margin: 4px 0 0; font-size: 9px; }
.candidate-reasons { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.candidate-reasons li { color: #4e5b52; font-size: 9px; }
.candidate-reasons li::before { margin-right: 5px; color: var(--green); content: "•"; }
.candidate-evidence { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2e5e0; }
.candidate-evidence strong { color: var(--muted); font-size: 8px; font-weight: 500; text-transform: uppercase; }
.candidate-evidence p { margin: 6px 0 0; color: #5e685f; font-size: 9px; line-height: 1.7; }
.selection-history-demand { max-width: 260px; }
.icon-danger {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e2b9b2;
  border-radius: 6px;
  color: var(--red);
  background: var(--red-soft);
  place-items: center;
}
.icon-danger svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.toast {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  max-width: 420px;
  padding: 13px 16px;
  border-radius: 7px;
  color: #fff;
  background: var(--dark);
  box-shadow: 0 18px 45px rgba(17, 27, 21, .24);
  font-size: 10px;
}
.toast.error { background: #8f3e33; }
.loading { opacity: .65; pointer-events: none; }

@media (max-width: 1100px) {
  .sidebar { width: 210px; }
  .workspace { margin-left: 210px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .mapping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-layout { grid-template-columns: 270px minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100svh; padding: 28px 20px; }
  .sidebar {
    position: static;
    width: auto;
    padding: 16px;
  }
  .sidebar-brand, .sidebar-footer { display: none; }
  .nav-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 0;
  }
  .nav-list button {
    display: flex;
    min-width: 0;
    justify-content: center;
    padding: 0 8px;
    font-size: 9px;
  }
  .nav-list button.is-active { box-shadow: inset 0 -3px #8bd49f; }
  .nav-list svg { display: none; }
  .workspace { margin-left: 0; }
  .topbar { height: 64px; padding: 0 16px; }
  .main-content { padding: 22px 14px 40px; }
  .two-column, .settings-grid { grid-template-columns: 1fr; }
  .workflow-layout { grid-template-columns: 1fr; }
  .workflow-list { max-height: none; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head .primary-button { width: 100%; }
  .mapping-grid { grid-template-columns: 1fr; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .ready-callout { align-items: flex-start; flex-direction: column; }
  .ready-callout .primary-button { width: 100%; }
  .form-actions, .approval-form { align-items: stretch; flex-direction: column; grid-template-columns: 1fr; }
  .user-create-form { grid-template-columns: 1fr; }
  .candidate-parameters { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .metric-grid { grid-template-columns: 1fr; }
  .nav-list button { font-size: 0; }
  .nav-list button::after {
    content: attr(data-mobile-label);
    font-size: 9px;
  }
  .topbar .eyebrow, .status-pill { display: none; }
  .panel { padding: 16px; }
  .detail-head { flex-direction: column; }
  .summary-strip { grid-template-columns: 1fr; }
}