:root {
  --ink: #16221f;
  --muted: #6f7b77;
  --bg: #f4f6f5;
  --panel: #ffffff;
  --line: #e7ece9;
  --green: #145c46;
  --green-2: #0f4034;
  --green-soft: #e8f4ef;
  --gold: #b9893c;
  --orange: #f27a25;
  --blue: #4267e8;
  --purple: #7a4be8;
  --red: #b23d38;
  --shadow: 0 12px 32px rgba(17, 31, 27, .08);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; transition: .18s ease; }
button:hover { transform: translateY(-1px); }
a { color: inherit; text-decoration: none; }

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #0d3028, #176049 58%, #a8732d); }
.auth-screen[hidden], #appView[hidden] { display: none !important; }
.auth-card { width: min(440px, 100%); padding: 42px; border-radius: 28px; background: var(--panel); box-shadow: 0 32px 90px rgba(0,0,0,.24); }
.auth-card h1 { margin: 0; font-size: 34px; }
.auth-copy { color: var(--muted); line-height: 1.7; }
.auth-card label, .dialog-card label { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; font-weight: 800; }
.auth-card input, .dialog-card input, .dialog-card select, input[type=date], select, .search-input {
  width: 100%; height: 42px; margin-top: 7px; padding: 0 13px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 12px; outline: none;
}
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(20, 92, 70, .1); }
.wide-button { width: 100%; margin-top: 18px; }
.form-error { min-height: 20px; color: var(--red); font-size: 12px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: #fff; border-right: 1px solid var(--line); box-shadow: 4px 0 24px rgba(17, 31, 27, .04); }
.side-brand { height: 74px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: white; background: linear-gradient(135deg, var(--green-2), var(--green)); }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.15); font-weight: 900; }
.side-brand strong, .side-brand span { display: block; }
.side-brand span { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 12px; }
.side-nav { padding: 18px 14px 28px; }
.side-nav p { margin: 18px 8px 8px; color: var(--muted); font-size: 12px; font-weight: 900; }
.side-nav a, .nav-item, .side-button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; color: #34423e; background: transparent; font-weight: 800; text-align: left; }
.side-nav a.active, .nav-item.active, .side-nav a:hover, .nav-item:hover, .side-button:hover { color: var(--green); background: var(--green-soft); }
.side-button.danger { color: var(--red); }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 26px; background: rgba(255,255,255,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.search-box { width: min(560px, 48vw); height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.search-box input { border: 0; outline: 0; width: 100%; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.user-card { padding: 9px 14px; border-radius: 14px; background: #f8faf9; border: 1px solid var(--line); text-align: right; }
.user-card strong, .user-card span { display: block; }
.user-card span { margin-top: 2px; color: var(--muted); font-size: 11px; }

main { padding: 24px 28px 60px; }
.page { display: none; }
.page.active { display: block; }
.hero { min-height: 160px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; color: white; border-radius: 28px; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.24), transparent 28%), linear-gradient(135deg, #113d33, #176049 56%, #9a6d2f); box-shadow: var(--shadow); }
.hero h1 { margin: 0; font-size: 34px; letter-spacing: -.03em; }
.hero p { margin: 10px 0 0; max-width: 760px; color: rgba(255,255,255,.78); }
.hero-badge { min-width: 210px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.hero-badge span, .hero-badge strong { display: block; }
.hero-badge span { color: rgba(255,255,255,.72); font-size: 12px; }
.hero-badge strong { margin-top: 8px; font-size: 20px; }

.filter-panel, .panel, .status-bar, .kpi-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.filter-panel { margin-top: 18px; padding: 18px; border-radius: 22px; display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)) auto auto; gap: 14px; align-items: end; }
label { color: var(--muted); font-size: 12px; font-weight: 800; }
.primary-button, .secondary-button { height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 900; white-space: nowrap; }
.primary-button { color: white; background: linear-gradient(135deg, var(--green), #217b5e); }
.secondary-button { color: var(--green); background: var(--green-soft); border: 1px solid rgba(20,92,70,.14); }
.status-bar { margin-top: 14px; padding: 13px 18px; border-radius: 16px; color: var(--muted); font-size: 13px; }
.status-bar.warning { color: var(--red); background: #fff5f2; border-color: #f0c9c5; }

.kpi-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-card { min-height: 128px; padding: 20px; border-radius: 22px; display: flex; justify-content: space-between; gap: 14px; overflow: hidden; position: relative; }
.kpi-label { color: var(--muted); font-size: 12px; font-weight: 900; }
.kpi-value { margin-top: 10px; font-size: 29px; font-weight: 900; letter-spacing: -.03em; }
.kpi-note { margin-top: 8px; color: var(--muted); font-size: 12px; }
.kpi-icon { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: white; font-size: 22px; box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.kpi-card.green .kpi-icon { background: linear-gradient(135deg, #13a66b, var(--green)); }
.kpi-card.blue .kpi-icon { background: linear-gradient(135deg, #3f7cff, var(--blue)); }
.kpi-card.purple .kpi-icon { background: linear-gradient(135deg, #b044ff, var(--purple)); }
.kpi-card.gold .kpi-icon { background: linear-gradient(135deg, #f2c65f, var(--gold)); }
.kpi-card.orange .kpi-icon { background: linear-gradient(135deg, #ff9a38, var(--orange)); }
.kpi-card.red .kpi-icon { background: linear-gradient(135deg, #e85b4d, var(--red)); }

.dashboard-grid { margin-top: 18px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.panel { padding: 22px; border-radius: 22px; }
.panel.wide { grid-row: span 2; }
.section-heading { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
h3 { margin: 8px 0; font-size: 16px; }
.hint { color: var(--muted); font-size: 12px; }

.trend-chart { min-height: 275px; display: flex; gap: 7px; align-items: end; overflow-x: auto; padding: 22px 4px 10px; border-bottom: 1px solid var(--line); }
.trend-column { min-width: 30px; flex: 1; text-align: center; }
.trend-bar { min-height: 4px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #25a671, var(--green)); }
.trend-label { margin-top: 8px; color: var(--muted); font-size: 10px; transform: rotate(-42deg); transform-origin: top center; white-space: nowrap; }
.bar-chart { display: grid; gap: 13px; }
.bar-row { display: grid; grid-template-columns: 36px 78px 1fr 100px; gap: 10px; align-items: center; font-size: 13px; }
.rank { color: var(--gold); font-weight: 900; }
.bar-name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 20px; overflow: hidden; background: #eef2f0; border-radius: 999px; }
.bar-fill { height: 100%; min-width: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--green), #65b48f); }
.bar-value { text-align: right; font-weight: 900; }

.ai-panel { background: linear-gradient(135deg, #fff 0%, #f8fbf9 100%); }
.ai-persona { margin: -4px 0 16px; padding: 14px 16px; border-radius: 16px; color: #315148; background: var(--green-soft); line-height: 1.7; font-size: 13px; font-weight: 700; }
.ai-layout { display: grid; grid-template-columns: 1fr 430px; gap: 18px; }
.ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ai-card { padding: 17px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.ai-card span { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 900; }
.ai-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 13px; }
.chat-card { min-height: 420px; display: flex; flex-direction: column; padding: 14px; border-radius: 20px; background: #f7faf8; border: 1px solid var(--line); }
.chat-messages { flex: 1; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 4px; }
.chat-message { max-width: 88%; padding: 11px 13px; border-radius: 15px; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.chat-message.ai { background: white; border: 1px solid var(--line); }
.chat-message.user { justify-self: end; color: white; background: var(--green); }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.chat-form input { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; outline: 0; }
.quick-questions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.quick-questions button { height: 30px; padding: 0 10px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 12px; font-weight: 800; }

.tab-buttons { display: flex; gap: 8px; padding: 5px; border-radius: 14px; background: #f2f5f3; }
.tab-buttons button { height: 34px; padding: 0 14px; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 900; }
.tab-buttons button.active { color: white; background: var(--green); }
.compare-toolbar { display: grid; grid-template-columns: 150px 150px 150px 1fr auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.combo-toolbar { grid-template-columns: 140px 140px minmax(160px, .8fr) minmax(160px, .8fr) minmax(260px, 1.4fr) 140px 130px auto; }
.product-toolbar { grid-template-columns: minmax(170px, .8fr) minmax(280px, 1.4fr) minmax(190px, .9fr) 130px auto; }
.picker-field label { display: block; margin-bottom: 7px; }
.multi-dropdown { position: relative; }
.multi-dropdown summary {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
  list-style: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}
.multi-dropdown summary::-webkit-details-marker { display: none; }
.multi-dropdown summary::after { content: "⌄"; color: var(--muted); font-size: 14px; }
.multi-dropdown[open] summary { border-color: var(--green); box-shadow: 0 0 0 4px rgba(20, 92, 70, .1); }
.picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 46px rgba(17, 31, 27, .14);
}
.wide-picker .picker-menu { min-width: 420px; }
.picker-search {
  width: 100%;
  height: 36px;
  margin: 0 0 10px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.picker-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.picker-actions button {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 12px;
  font-weight: 900;
}
.picker-options { max-height: 240px; overflow-y: auto; display: grid; gap: 6px; }
.picker-options label {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 10px;
  color: #34423e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.picker-options label:hover { background: #f4f7f5; }
.picker-options input { width: auto; height: auto; margin: 0; accent-color: var(--green); }
.compare-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.compare-card { padding: 16px; border-radius: 18px; background: #f8faf9; border: 1px solid var(--line); }
.compare-card span, .compare-card small { display: block; color: var(--muted); font-size: 12px; }
.compare-card strong { display: block; margin: 8px 0 5px; font-size: 21px; }
.compare-chart { min-height: 250px; margin: 14px 0 16px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fbfdfc; overflow-x: auto; }
.metric-panels { display: grid; gap: 16px; }
.metric-panel { min-width: 0; }
.chart-title { margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 900; }
.compare-bars { min-height: 210px; display: flex; gap: 13px; align-items: end; }
.compare-bar-item { min-width: 72px; flex: 1; display: grid; grid-template-rows: 34px 1fr 28px; justify-items: center; align-items: end; text-align: center; }
.compare-bar-item span { max-width: 140px; color: var(--muted); font-size: 11px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.compare-bar-track { width: 42px; height: 185px; display: flex; align-items: end; justify-content: center; border-radius: 999px 999px 0 0; background: #edf3f0; }
.compare-bar-fill { width: 100%; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, #31ad78, var(--green)); }
.compare-bar-item strong { font-size: 12px; white-space: nowrap; }
.trend-chart.compact { min-height: 220px; padding-top: 4px; }

.search-input { max-width: 340px; margin: 0; }
.table-wrap { overflow: auto; border-radius: 16px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 12px; background: white; }
th { position: sticky; top: 0; z-index: 1; padding: 13px 11px; color: var(--muted); background: #f6f8f7; text-align: left; white-space: nowrap; }
td { max-width: 380px; padding: 13px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: #fbfdfc; }
td.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-name { font-weight: 900; line-height: 1.45; }
.product-id { margin-top: 5px; color: var(--muted); font-size: 10px; }
.risk { color: var(--red); font-weight: 900; }
.tag { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.tag.good { color: #126145; background: #dff1e8; }
.tag.warn { color: #9a6530; background: #f7e8cf; }
.tag.neutral { color: var(--muted); background: #ecefeb; }

.dialog-card { width: min(520px, 92vw); padding: 28px; color: var(--ink); border: 0; border-radius: 22px; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.dialog-card::backdrop { background: rgba(12,25,21,.72); }
.dialog-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 10px; }
.manage-dialog { width: min(1080px, 95vw); }
.account-form { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: end; gap: 12px; padding: 16px; border-radius: 18px; background: #f6f8f7; }
.account-form label { margin: 0; }
.account-notice { min-height: 24px; color: var(--green); font-weight: 800; }
.table-button { height: 30px; margin: 2px 5px 2px 0; padding: 0 10px; color: var(--green); background: var(--green-soft); border-radius: 9px; font-size: 11px; font-weight: 900; }

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .ai-layout { grid-template-columns: 1fr; }
  .panel.wide { grid-row: auto; }
}
@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .side-nav { display: none; }
  .topbar { position: static; }
  .filter-panel, .compare-toolbar { grid-template-columns: 1fr 1fr; }
  .ai-grid, .compare-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  main { padding: 16px; }
  .hero, .topbar { flex-direction: column; align-items: stretch; }
  .search-box { width: 100%; }
  .kpi-grid, .filter-panel, .compare-toolbar { grid-template-columns: 1fr; }
}