:root {
  color-scheme: light;
  --page: #f5f5f7;
  --surface: rgb(255 255 255 / 0.72);
  --surface-strong: rgb(255 255 255 / 0.9);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --soft: #86868b;
  --line: rgb(29 29 31 / 0.12);
  --blue: #0071e3;
  --blue-dark: #0057b8;
  --green: #007a3d;
  --green-bg: rgb(48 209 88 / 0.14);
  --warning: #8a5a00;
  --warning-bg: rgb(255 204 0 / 0.2);
  --danger: #b4232a;
  --danger-bg: rgb(255 69 58 / 0.14);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100vh;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgb(255 255 255 / 0.95), transparent 34%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 48%, #eef1f5 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.liquid-stage {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.liquid-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 18%, rgb(255 255 255 / 0.62) 33%, transparent 52% 100%),
    radial-gradient(circle at 18% 24%, rgb(0 113 227 / 0.08), transparent 28%),
    radial-gradient(circle at 78% 16%, rgb(52 199 89 / 0.08), transparent 30%);
}

.ambient {
  position: fixed;
  z-index: -2;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(14px);
  opacity: 0.7;
}

.ambient-a {
  width: 440px;
  height: 440px;
  left: -160px;
  top: 180px;
  background: rgb(0 113 227 / 0.08);
}

.ambient-b {
  width: 520px;
  height: 520px;
  right: -190px;
  top: 24px;
  background: rgb(255 149 0 / 0.08);
}

button,
a {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  text-decoration: none;
  font: inherit;
  font-weight: 650;
}

a:hover,
button:hover {
  background: var(--blue-dark);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 30px 38px;
}

.topbar h1,
.topbar p {
  margin: 0;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: 12px;
}

.brand-title img {
  width: clamp(40px, 4.2vw, 56px);
  height: clamp(40px, 4.2vw, 56px);
  border-radius: 14px;
  object-fit: cover;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.5) inset,
    0 10px 28px rgb(0 0 0 / 0.12);
}

.topbar h1 {
  max-width: 780px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar p:last-child {
  max-width: 680px;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.38;
  font-weight: 520;
}

.tool-switcher { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tool-entry { min-height: 28px; border: 1px solid rgb(29 29 31 / 0.12); border-radius: 999px; background: rgb(255 255 255 / 0.58); color: #515154; padding: 0 10px; font-size: 12px; font-weight: 650; }
.tool-entry:hover, .tool-entry.active { border-color: transparent; background: var(--blue); color: #fff; }

.eyebrow {
  color: var(--soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  justify-items: end;
  align-items: flex-end;
  gap: 14px;
  padding-bottom: 8px;
}

.hero-status {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(29 29 31 / 0.1);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  color: #424245;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.06);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.refresh-link {
  min-height: 30px;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-size: 14px;
  font-weight: 650;
}

.refresh-link:hover {
  background: transparent;
  color: var(--blue-dark);
}

.refresh-link:disabled {
  color: var(--soft);
  cursor: wait;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px 84px;
}

.overview,
.module-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.92) inset,
    0 24px 70px rgb(0 0 0 / 0.08);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 92px;
  padding: 22px 26px;
  border-radius: 24px;
}

.overview strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(17px, 1.75vw, 22px);
  line-height: 1.32;
  font-weight: 650;
  letter-spacing: 0;
}

.label,
.module-id {
  display: block;
  color: var(--soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.summary {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  font-weight: 760;
  min-width: 72px;
  text-align: right;
}

.summary::after {
  content: " 在线";
  display: block;
  margin-top: 6px;
  color: var(--soft);
  font-size: 12px;
  font-weight: 650;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.module-card {
  display: flex;
  flex-direction: column;
  min-height: 242px;
  padding: 26px;
  border-radius: 24px;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}

.tool-workspace { min-height: 200px; margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface-strong); box-shadow: 0 1px 0 rgb(255 255 255 / 0.92) inset, 0 24px 70px rgb(0 0 0 / 0.08); scroll-margin-top: 20px; }
.workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.workspace-head h2 { margin-top: 5px; font-size: 22px; }
.close-workspace { min-height: 32px; flex: 0 0 auto; border: 1px solid rgb(29 29 31 / 0.12); background: rgb(255 255 255 / 0.65); color: #515154; padding: 0 13px; font-size: 12px; }
.close-workspace:hover { background: rgb(29 29 31 / 0.08); color: var(--text); }
.tool-frame { display: block; width: 100%; height: min(78vh, 900px); min-height: 620px; border: 0; background: #fff; }
.workspace-empty { display: grid; min-height: 200px; place-content: center; gap: 8px; padding: 32px; text-align: center; }
.workspace-empty strong { max-width: 540px; color: var(--muted); font-size: 16px; font-weight: 560; line-height: 1.45; }

.sync-panel { max-width: 1180px; margin: 74px auto; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 24px 70px rgb(0 0 0 / 0.08); overflow: hidden; }
.sync-panel .panel-head > div:last-child { display: flex; align-items: center; gap: 12px; }
.sync-panel .panel-head p { margin: 7px 0 0; color: var(--muted); }
.sync-summary { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 8px 14px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.sync-summary strong { font-size: 27px; }.sync-summary span { color: var(--muted); font-size: 13px; font-weight: 650; }
.sync-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 14px; padding: 24px; }
.sync-card { min-height: 150px; border: 1px solid var(--line); border-radius: 18px; padding: 17px; background: rgb(255 255 255 / 0.64); }
.sync-card h3, .sync-card p { margin: 0; }.sync-card > p { margin-top: 5px; color: var(--soft); font-size: 13px; }
.sync-row { display: grid; gap: 3px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgb(29 29 31 / 0.08); }.sync-row strong { font-size: 14px; }.sync-row span, .sync-row small { color: var(--muted); font-size: 12px; }.sync-row small { color: var(--soft); }
.audit-list { margin: 0 24px 26px; padding: 20px; border-radius: 18px; background: rgb(0 113 227 / 0.06); }.audit-list h3 { margin: 0 0 12px; }.audit-list p { margin: 7px 0; color: var(--muted); font-size: 13px; }

.module-card:hover {
  transform: translateY(-12px);
  border-color: rgb(29 29 31 / 0.08);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.95) inset,
    0 34px 96px rgb(0 0 0 / 0.16);
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

h2,
p {
  margin: 0;
}

h2 {
  margin-top: 8px;
  font-size: clamp(28px, 2.5vw, 34px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}

.module-card p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--green-bg);
  color: var(--green);
  font-weight: 700;
  padding: 7px 11px;
  font-size: 12px;
}

.offline .status-pill {
  background: var(--warning-bg);
  color: var(--warning);
}

.error .status-pill {
  background: var(--danger-bg);
  color: var(--danger);
}

.actions {
  display: grid;
  gap: 0;
  margin-top: auto;
  padding-top: 28px;
}

.release-meta {
  color: #6e6e73;
  font-size: 13px;
  margin: 0 0 18px;
}

.login-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-card,
.account-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.1);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.login-card {
  width: min(100%, 480px);
  padding: 40px;
  border-radius: 28px;
}

.login-card h1 { font-size: clamp(30px, 4vw, 40px); }
.login-intro { margin: 20px 0 28px; color: var(--muted); line-height: 1.5; }

form { display: grid; gap: 16px; }
label { display: grid; gap: 8px; color: #424245; font-size: 14px; font-weight: 650; }
input, select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgb(29 29 31 / 0.16);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.88);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
}
input:focus, select:focus { outline: 3px solid rgb(0 113 227 / 0.2); border-color: var(--blue); }
.form-error, .panel-message { margin: 0; color: var(--danger); font-size: 14px; line-height: 1.45; }
.form-hint { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.issued-token { grid-column: 1 / -1; display: grid; gap: 10px; padding: 18px; border: 1px solid #f0bf56; border-radius: 16px; background: #fff8e5; color: #633c00; }
.issued-token code { overflow-wrap: anywhere; padding: 10px; border-radius: 10px; background: rgb(255 255 255 / 0.72); color: #3d2600; font-size: 13px; }

.user-chip { display: grid; gap: 2px; text-align: right; color: #424245; font-size: 13px; }
.user-chip span { color: var(--soft); font-size: 12px; }
.header-buttons { display: flex; justify-content: flex-end; gap: 12px; }

.account-panel { max-width: 1080px; margin: 64px auto; border-radius: 28px; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 26px 30px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin-top: 6px; }
.account-content { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 28px; padding: 30px; }
.user-form { align-content: start; padding: 22px; border-radius: 18px; background: rgb(255 255 255 / 0.54); border: 1px solid var(--line); }
.user-form h3, .user-list h3 { margin: 0 0 4px; font-size: 18px; }
.user-list { display: grid; align-content: start; gap: 12px; }
.user-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.user-row strong, .user-row span { display: block; }
.user-row span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.user-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.user-actions span.enabled { color: var(--green); }.user-actions span.disabled { color: var(--danger); }
button.subtle { min-height: 34px; padding: 0 12px; background: rgb(29 29 31 / 0.08); color: #424245; font-size: 12px; }
button.subtle:hover { background: rgb(29 29 31 / 0.16); }

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 44px 20px 28px;
  }

  .brand-title {
    gap: 12px;
  }

  .brand-title img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .topbar h1 {
    font-size: clamp(30px, 8vw, 42px);
  }

  .topbar p:last-child {
    margin-top: 14px;
    font-size: 17px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  main {
    padding: 0 16px 56px;
  }

  .overview {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }

  .summary {
    text-align: left;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .module-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .account-panel { margin: 24px 16px; }
  .account-content { grid-template-columns: 1fr; padding: 20px; }
  .panel-head { padding: 20px; }
  .user-row { align-items: flex-start; flex-direction: column; }
  .user-actions { justify-content: flex-start; }

}

@media (max-width: 430px) {
  .hero-actions {
    flex-direction: column;
  }
}

.api-profile { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; padding:13px; border-radius:11px; background:#f7faf8; }
.api-profile span { display:block; color:#8a919a; font-size:11px; }
.api-profile strong { display:block; margin-top:5px; color:#303840; font-size:12px; }
.api-profile .healthy { color:#147342; }
@media (max-width: 800px) { .api-profile { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.employee-cost-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:12px; }
.employee-cost-grid .cost-metric { display:block; min-height:0; padding:13px; border:1px solid transparent; border-radius:11px; background:#f7faf8; color:#303840; text-align:left; }
.employee-cost-grid .cost-metric:hover, .employee-cost-grid .cost-metric.active { border-color:#1677e8; background:#eff7ff; }
.employee-cost-grid span { display:block; color:#8a919a; font-size:11px; }
.employee-cost-grid strong { display:block; margin-top:5px; color:#303840; font-size:18px; }
@media (max-width: 800px) { .employee-cost-grid { grid-template-columns:1fr; } }

.employee-module { background: linear-gradient(145deg, rgb(232 248 240 / .92), rgb(255 255 255 / .78)); }
.employee-workspace { display:grid; grid-template-columns:250px minmax(0,1fr); max-width:1240px; min-height:660px; margin:44px auto; overflow:hidden; border:1px solid #dde2e8; border-radius:24px; background:rgb(249 251 253 / .94); box-shadow:0 24px 70px rgb(0 0 0 / .1); }
.employee-nav { display:grid; align-content:start; gap:17px; padding:26px 16px; border-right:1px solid #dde2e8; background:rgb(255 255 255 / .76); }.employee-nav h2 { margin:6px 0; font-size:23px; }.employee-nav p { margin:0; color:#737b85; font-size:12px; }.employee-nav .close-workspace { justify-self:start; min-height:34px; padding:0 13px; font-size:12px; }.employee-list { display:grid; gap:6px; margin-top:8px; }.employee-item { display:grid; min-height:0; justify-content:start; gap:5px; padding:12px; border-radius:12px; background:transparent; color:#4e5761; text-align:left; }.employee-item:hover { background:#edf5f0; color:#1d7045; }.employee-item.active { background:#e5f5eb; color:#11683d; }.employee-item strong { font-size:13px; }.employee-item span { font-size:11px; font-weight:500; }.employee-stage { min-width:0; padding:30px 34px 42px; }.employee-head, .section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.employee-head h1 { margin:6px 0; font-size:27px; letter-spacing:-.03em; }.employee-head p { margin:0; color:#737b85; font-size:12px; }.employee-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin:25px 0 17px; }.employee-metrics > div, .employee-card { border:1px solid #e0e4e9; border-radius:15px; background:rgb(255 255 255 / .9); }.employee-metrics > div { display:grid; gap:4px; padding:14px; }.employee-metrics strong { font-size:19px; }.employee-metrics span, .section-title span { color:#737b85; font-size:11px; }.employee-card { margin-top:14px; padding:18px; }.employee-card h2, .employee-card h3 { margin:6px 0 8px; font-size:15px; }.employee-mission { color:#505963; line-height:1.55; }.employee-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.employee-facts div { padding:11px 0; border-top:1px solid #edf0f3; }.employee-facts dt { color:#8a919a; font-size:11px; }.employee-facts dd { margin:5px 0 0; color:#303840; font-size:12px; font-weight:650; }.employee-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }.employee-columns > div { padding:13px; border-radius:11px; background:#f7faf8; }.employee-columns ul, .employee-columns ol { margin:0; padding-left:18px; color:#59616b; font-size:12px; line-height:1.7; }.employee-run { display:grid; grid-template-columns:1fr auto; gap:8px; padding:11px 0; border-top:1px solid #edf0f3; }.employee-run:first-of-type { border-top:0; }.employee-run strong { font-size:12px; }.employee-run span, .employee-run p, .employee-log, .empty { color:#737b85; font-size:11px; }.employee-run p { grid-column:1 / -1; margin:0; }.employee-log { margin:0; padding:8px 0; border-top:1px solid #edf0f3; }.employee-log.error { color:#b32932; }
@media (max-width:800px) { .employee-workspace { grid-template-columns:1fr; margin:18px; }.employee-nav { border-right:0; border-bottom:1px solid #dde2e8; }.employee-metrics, .employee-facts, .employee-columns { grid-template-columns:1fr; }.employee-stage { padding:22px; } }
.employee-roster { margin-top:14px; padding:14px; border:1px solid #dceee3; border-radius:11px; background:linear-gradient(135deg,#f4fbf6,#fbfdfc); }.employee-roster h3 { margin:4px 0; }.employee-roster p, .employee-roster small { color:#66716b; font-size:11px; }.employee-roster p { margin:0 0 9px; }.employee-roster ul { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 10px; padding:0; list-style:none; }.employee-roster li { padding:5px 9px; border-radius:999px; background:#e4f4e9; color:#17663e; font-size:12px; font-weight:650; }.employee-roster small { display:block; line-height:1.5; }
.cost-chart { margin-top:14px; padding:13px; border-radius:11px; background:#f7faf8; }.cost-chart h3 { margin:0; }.cost-chart svg { width:100%; height:170px; margin-top:12px; color:#1677e8; overflow:visible; }.cost-chart-labels { display:flex; justify-content:space-between; color:#8a919a; font-size:11px; }

/* Employee runtime facts: keep configuration, evidence and stale state distinct. */
.employee-runtime { margin:20px 0; }
.employee-sync { display:grid; gap:6px; padding:14px 16px; border-radius:12px; border:1px solid #cce6d5; background:#eff8f2; color:#215b3c; }
.employee-sync.warning { background:#fff8e9; color:#815715; border-color:#edd8aa; }
.employee-sync strong { font-size:14px; }
.employee-sync span, .employee-sync small, .employee-last-call small { font-size:12px; line-height:1.6; }
.employee-model-table { overflow-x:auto; margin:18px 0 0; }
.employee-model-table table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.employee-model-table caption { text-align:left; font-weight:650; padding:0 0 10px; color:#37483f; }
.employee-model-table th { color:#6d7780; font-weight:500; }
.employee-model-table td, .employee-model-table th { padding:10px 12px; border-bottom:1px solid #e7ece9; }
.employee-model-table td:first-child, .employee-model-table th:first-child { padding-left:0; }
.employee-model-table small { display:block; color:#707b85; margin-top:4px; }
.employee-last-call { display:grid; gap:6px; margin-top:14px; padding:14px; border-radius:10px; background:#f5f7fa; }
.employee-last-call strong { font-size:14px; overflow-wrap:anywhere; }
.employee-last-call small { color:#66717a; }
.employee-role-source { color:#6b747c; font-size:12px; line-height:1.6; margin:14px 0; }
.employee-facts { grid-template-columns:minmax(100px,.6fr) minmax(0,1.2fr) minmax(0,1.2fr); }
.employee-facts dd { overflow-wrap:anywhere; line-height:1.6; }
.employee-schedule summary { cursor:pointer; }
.employee-change { border-top:1px solid #edf0f3; padding:12px 0; font-size:12px; line-height:1.6; }
.employee-change summary { cursor:pointer; color:#46544d; overflow-wrap:anywhere; }
.employee-change small { display:block; color:#707980; margin:4px 0 0 15px; }
.employee-change p { white-space:pre-wrap; overflow-wrap:anywhere; color:#606b73; padding:10px; background:#f7f9f8; border-radius:8px; }
@media (max-width:800px) { .employee-facts { grid-template-columns:1fr; } .employee-model-table th, .employee-model-table td { padding:10px 7px; } .employee-sync { padding:12px; } }