:root {
  color-scheme: light;
  font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #24212a;
  background: #f4f1eb;
  font-synthesis: none;
  --paper: #f4f1eb;
  --ink: #24212a;
  --muted: #716b75;
  --line: #d8d1c8;
  --accent: #6f55b5;
  --success: #3f8a68;
  --danger: #a94d47;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.login-view {
  min-height: 100vh;
  padding: 34px 46px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    linear-gradient(90deg, rgba(111, 85, 181, 0.07) 1px, transparent 1px) 0 0 / 10vw 100%,
    var(--paper);
}

.login-brand, .brand { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 800; letter-spacing: .11em; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--accent); font: italic 23px Georgia, serif; letter-spacing: 0; }
.brand-mark.small { width: 31px; height: 31px; border-radius: 9px; font-size: 17px; }

.login-form { width: min(440px, 100%); margin: auto; animation: enter .48s ease-out both; }
.kicker { margin: 0 0 10px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.login-form h1 { margin: 0; font: 500 clamp(38px, 6vw, 60px)/1.05 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.login-copy { margin: 18px 0 34px; color: var(--muted); line-height: 1.7; }
label span { display: block; margin-bottom: 8px; color: #5f5963; font-size: 12px; font-weight: 700; }
input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #cbc3ba; border-radius: 8px; outline: 0; color: var(--ink); background: rgba(255,255,255,.65); transition: border-color .16s, box-shadow .16s; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111,85,181,.12); }
.login-form button, .bcs-form button { width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 8px; color: white; background: var(--ink); font-weight: 720; }
.login-form button:hover, .bcs-form button:hover { background: var(--accent); }
button:disabled { opacity: .55; cursor: wait; }
.form-message { min-height: 20px; margin: 12px 0 0; color: var(--danger); font-size: 13px; line-height: 1.55; }
.login-footnote { margin: 0; color: #8a838c; font-size: 11px; }

.workspace { min-height: 100vh; display: grid; grid-template: 70px 1fr / 220px 1fr; animation: fade .3s ease-out both; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(244,241,235,.92); backdrop-filter: blur(12px); }
.topbar-context { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: #b29b75; box-shadow: 0 0 0 4px rgba(178,155,117,.12); }
.connection-dot.connected { background: var(--success); box-shadow: 0 0 0 4px rgba(63,138,104,.12); }
.connection-dot.failed { background: var(--danger); box-shadow: 0 0 0 4px rgba(169,77,71,.12); }
.quiet-button { margin-left: 16px; padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; color: #706a73; background: transparent; }

.sidebar { padding: 34px 22px 24px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.nav-item { width: 100%; padding: 13px 5px; display: flex; gap: 14px; border: 0; border-bottom: 1px solid transparent; color: #77717a; background: transparent; text-align: left; font-size: 13px; transition: color .15s, transform .15s; }
.nav-item span { width: 18px; color: #aaa2aa; font-size: 10px; }
.nav-item:hover { color: var(--ink); transform: translateX(2px); }
.nav-item.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 720; }
.nav-item.active span { color: var(--accent); }
.sidebar-note { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.sidebar-note span, .sidebar-note strong { display: block; }
.sidebar-note span { color: #918a93; font-size: 10px; letter-spacing: .08em; }
.sidebar-note strong { margin-top: 7px; font-size: 12px; }

.main-content { min-width: 0; padding: 42px clamp(28px, 5vw, 72px) 64px; }
.panel { display: none; animation: panel-in .26s ease-out both; }
.panel.active { display: block; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.page-heading h1 { margin: 0; font: 500 clamp(36px, 4.5vw, 54px)/1 Georgia, "Songti SC", serif; letter-spacing: -.035em; }
.freshness, .phase-label { margin: 0; color: #88818a; font-size: 11px; }
.phase-label { padding-bottom: 5px; }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.metric { padding: 30px 24px 28px 0; }
.metric + .metric { padding-left: 24px; border-left: 1px solid var(--line); }
.metric span, .metric small { display: block; color: #827b84; font-size: 11px; }
.metric strong { display: block; margin: 10px 0 7px; font: 500 clamp(27px, 3vw, 40px)/1 Georgia, serif; font-variant-numeric: tabular-nums; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); border-bottom: 1px solid var(--line); }
.trend-section { min-width: 0; padding: 34px 34px 34px 0; border-right: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.section-heading h2, .connection-section h2, .settings-copy h2, .empty-workspace h2 { margin: 0; font-size: 17px; }
.section-heading p, .connection-section > p:not(.kicker), .settings-copy > p, .empty-workspace p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.legend { display: flex; align-items: center; gap: 7px; color: #817a83; font-size: 11px; }
.legend i { width: 16px; height: 2px; background: var(--accent); }
.empty-chart { min-height: 250px; display: grid; place-content: center; text-align: center; color: #8f8891; }
.empty-chart span { color: #6d6670; font: 500 22px Georgia, serif; }
.empty-chart p { margin: 8px 0 0; font-size: 12px; }
.revenue-chart { width: 100%; height: 250px; margin-top: 18px; overflow: visible; }
.revenue-chart line { stroke: #d6cfc7; stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: draw 1s ease-out both; }
.chart-area { fill: rgba(111,85,181,.08); }
.connection-section { padding: 34px 0 34px 34px; }
.connection-section h2 { margin-top: 20px; font-size: 23px; font-family: Georgia, "Songti SC", serif; font-weight: 500; }
.secondary-button { margin-top: 22px; padding: 10px 15px; border: 1px solid #bdb5be; border-radius: 7px; color: var(--ink); background: transparent; font-weight: 680; }
.secondary-button:hover { border-color: var(--accent); color: var(--accent); }

.recent-section { padding-top: 34px; }
.text-link, .danger-link { padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--accent); background: transparent; font-size: 12px; }
.danger-link { color: var(--danger); }
.job-list { margin-top: 22px; border-top: 1px solid var(--line); }
.job-row { min-height: 54px; display: grid; grid-template-columns: 90px 1fr 130px 100px; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.job-row span { color: var(--muted); }
.job-row.empty { display: flex; justify-content: center; color: #8a838c; }

.empty-workspace { min-height: 470px; display: grid; grid-template-columns: 130px minmax(0, 520px); align-content: center; gap: 40px; }
.empty-index { color: rgba(111,85,181,.17); font: 500 96px/1 Georgia, serif; }
.empty-workspace h2 { font: 500 29px Georgia, "Songti SC", serif; }

.collect-box-section { padding-top: 34px; }
.collect-box-heading { align-items: center; }
.secondary-button.compact { margin: 0; white-space: nowrap; }
.status-strip { margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-width: 1px 0; }
.status-strip button { padding: 18px 16px 17px; border: 0; color: #817a83; background: transparent; text-align: left; font-size: 11px; transition: color .16s, background .16s, box-shadow .16s; }
.status-strip button:first-child { padding-left: 0; }
.status-strip button + button { border-left: 1px solid var(--line); }
.status-strip button:hover { color: var(--accent); background: rgba(111,85,181,.04); }
.status-strip button.active { color: var(--accent); background: rgba(111,85,181,.07); box-shadow: inset 0 -2px var(--accent); }
.status-strip strong { display: block; margin-bottom: 5px; color: var(--ink); font: 500 24px Georgia, serif; }
.collect-table { margin-top: 24px; border-top: 1px solid var(--line); }
.collect-row { min-height: 68px; display: grid; grid-template-columns: 90px minmax(240px, 1.55fr) minmax(120px, .7fr) minmax(100px, .6fr) 135px 90px 76px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.collect-head { min-height: 42px; color: #918a93; font-size: 10px; letter-spacing: .05em; }
.collect-body .collect-row > span { min-width: 0; overflow-wrap: anywhere; }
.status-pill { width: max-content; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 720; }
.status-pill.unlisted { color: #756b5d; }
.status-pill.processing { color: var(--accent); }
.status-pill.listed { color: var(--success); }
.status-pill.failed { color: var(--danger); }
.collect-product strong, .collect-product small { display: block; }
.collect-product strong { color: var(--ink); font-size: 13px; font-weight: 680; line-height: 1.45; }
.collect-product small { margin-top: 4px; color: #89828a; line-height: 1.4; }
.collect-empty { min-height: 180px; display: grid; place-items: center; border-bottom: 1px solid var(--line); color: #8a838c; font-size: 13px; }
.collect-message { color: var(--muted); }
.preflight-button { padding: 7px 10px; border: 1px solid #bdb5be; border-radius: 6px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 680; }
.preflight-button:hover { border-color: var(--accent); color: var(--accent); }
.preflight-panel { margin-top: 32px; padding: 28px 30px; border: 1px solid var(--line); background: rgba(255,255,255,.22); }
.preflight-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.preflight-heading h3 { margin: 0; font: 500 25px Georgia, "Songti SC", serif; }
.preflight-heading > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.preflight-heading .quiet-button { margin-left: 0; }
.preflight-overview { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #746d76; font-size: 11px; }
.preflight-checks { margin-top: 22px; border-top: 1px solid var(--line); }
.preflight-check { min-height: 62px; display: grid; grid-template-columns: 120px 92px 1fr; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.preflight-check strong { font-size: 12px; }
.preflight-check p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.preflight-state { width: max-content; padding: 4px 7px; border-radius: 999px; color: var(--success); background: rgba(63,138,104,.1); font-size: 10px; font-weight: 720; }
.preflight-state.needs-automation { color: var(--accent); background: rgba(111,85,181,.1); }
.automation-next { min-height: 210px; margin-top: 38px; display: grid; grid-template-columns: 90px minmax(0, 580px); align-content: center; gap: 28px; border-top: 1px solid var(--line); }
.automation-next .empty-index { font-size: 68px; }
.automation-next h2 { margin: 0; font: 500 24px Georgia, "Songti SC", serif; }
.automation-next p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.settings-layout { padding-top: 42px; display: grid; grid-template-columns: minmax(260px, .85fr) minmax(300px, 1.15fr); gap: clamp(38px, 8vw, 110px); }
.settings-copy ul { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.settings-copy li { padding: 13px 0; border-bottom: 1px solid var(--line); color: #67616a; font-size: 12px; }
.bcs-form label { display: block; margin-bottom: 17px; }
.saved-actions { grid-column: 2; display: flex; align-items: center; gap: 20px; }
.saved-actions .secondary-button { margin: 0; }
.connection-message { grid-column: 2; margin-top: -24px; }

@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dasharray: 900; stroke-dashoffset: 900; } to { stroke-dasharray: 900; stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .workspace { grid-template: 64px auto 1fr / 1fr; }
  .topbar { grid-column: 1; }
  .sidebar { padding: 0 20px; flex-direction: row; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-item { width: auto; min-width: max-content; padding: 16px 8px 13px; }
  .sidebar-note { display: none; }
  .main-content { padding-top: 32px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(3) { border-left: 0; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
  .overview-grid { grid-template-columns: 1fr; }
  .trend-section { padding-right: 0; border-right: 0; }
  .connection-section { padding-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .login-view { padding: 24px; }
  .topbar { padding: 0 18px; }
  .topbar-context #connection-label { display: none; }
  .main-content { padding: 28px 20px 48px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .metric strong { font-size: 28px; }
  .job-row { grid-template-columns: 72px 1fr; }
  .job-row > *:nth-child(n+3) { display: none; }
  .empty-workspace { grid-template-columns: 1fr; gap: 18px; }
  .empty-index { font-size: 60px; }
  .settings-layout { grid-template-columns: 1fr; }
  .saved-actions { grid-column: 1; }
  .connection-message { grid-column: 1; margin-top: -18px; }
  .status-strip { grid-template-columns: repeat(2, 1fr); }
  .status-strip button { border-bottom: 1px solid var(--line); }
  .collect-head { display: none; }
  .collect-row { padding: 14px 0; grid-template-columns: 82px 1fr auto; gap: 10px; }
  .collect-row > *:nth-child(n+3):not(:last-child) { display: none; }
  .preflight-panel { padding: 22px 18px; }
  .preflight-check { padding: 14px 0; grid-template-columns: 1fr auto; gap: 8px; }
  .preflight-check p { grid-column: 1 / -1; }
  .automation-next { grid-template-columns: 1fr; }
}

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