:root { --red:#e51c3b; --red-soft:#fff0f2; --blue:#4777b5; --ink:#24262d; --muted:#737985; --line:#e5e7ed; --canvas:#f5f6f8; --green:#22714b; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; color:var(--ink); font-size:14px; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); }
button,input,select { font:inherit; }
button,select,summary { cursor:pointer; }
button { border:0; background:none; color:inherit; }
button,input,select { border-radius:7px; }
a { color:inherit; text-decoration:none; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,svg:focus-visible { outline:3px solid #e78b9b; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin:0; }
h1 { font-size:28px; font-weight:720; line-height:1.4; letter-spacing:-.6px; }
h2 { font-size:16px; font-weight:650; }
h3 { font-size:13px; font-weight:650; }
input,select { border:1px solid #d9dde5; padding:9px 10px; background:#fff; color:var(--ink); min-height:38px; min-width:0; }
input[type="checkbox"] { min-height:auto; accent-color:var(--red); }
.startup { padding:80px 24px; text-align:center; color:var(--muted); }
.sidebar { position:fixed; inset:0 auto 0 0; width:206px; padding:29px 17px; background:#141419; color:#b4b4bf; display:flex; flex-direction:column; z-index:5; }
.brand { display:flex; gap:12px; align-items:center; padding:0 9px; color:#fff; }
.brand-mark { display:grid; grid-template-columns:repeat(2,12px); gap:2px; flex-shrink:0; }
.brand-mark i { height:12px; background:#ed183b; }
.brand-mark i:nth-child(2),.brand-mark i:nth-child(3) { background:#a51c33; }
.brand strong { font-size:16px; }
.brand small { display:block; font-size:8px; letter-spacing:2px; margin-top:5px; color:#898995; }
.side-label { margin:48px 13px 15px; font-size:10px; letter-spacing:1.4px; color:#717180; }
.nav-item { display:flex; align-items:center; gap:12px; padding:13px; margin:5px 0; font-size:13px; border-radius:6px; }
.nav-item>span { font-size:17px; width:18px; text-align:center; }
.nav-item.active { background:#302029; color:#ffb6c2; box-shadow:inset 2px 0 var(--red); }
.nav-item:hover { background:#24242d; }
.sidebar-bottom { margin-top:auto; border-top:1px solid #292931; padding:17px 9px 0; font-size:11px; line-height:1.8; }
.sidebar-bottom button { display:block; padding:9px 0 0 12px; font-size:11px; color:#8b8c98; }
.status-dot { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#63a889; }
main { margin-left:206px; max-width:1900px; padding:28px 32px 20px; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; }
.breadcrumb { color:#8c8e96; font-size:10px; margin-bottom:9px; }
.breadcrumb span { margin:0 8px; color:#b5b7c0; }
.page-header>div>p:last-child { font-size:12px; color:var(--muted); margin-top:7px; line-height:1.7; }
.readonly-badge { padding:8px 11px; border:1px solid var(--line); background:#fff; border-radius:6px; color:#737783; white-space:nowrap; font-size:11px; }
.panel,.metric-card { background:#fff; border:1px solid var(--line); border-radius:11px; min-width:0; }
.query-panel { padding:19px 21px; margin-bottom:17px; }
.query-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.query-heading strong { font-size:12px; }
.query-heading small { color:#9296a0; font-size:10px; margin-left:9px; }
.presets { display:flex; flex-wrap:wrap; gap:3px; }
.presets button { padding:5px 8px; font-size:11px; color:#707581; }
.presets button:hover { background:var(--red-soft); color:#c72b45; }
.date-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:11px; }
.date-controls label,.field-label { display:flex; flex-direction:column; gap:6px; color:#747a86; font-size:11px; }
.date-controls input { width:164px; font-size:12px; }
.date-controls select { font-size:12px; }
.date-controls .compare-field { margin-left:auto; }
.primary-button { min-height:38px; padding:9px 20px; background:var(--red); color:#fff; font-size:12px; font-weight:600; }
.primary-button:hover { background:#c91935; }
.secondary-button { min-height:36px; padding:8px 13px; border:1px solid var(--line); background:#fff; font-size:11px; }
.secondary-button:hover { border-color:#d795a2; color:#b32c45; }
.text-button { padding:4px 0; color:#be3d54; font-size:11px; }
.range-description { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 20px; margin-top:13px; color:#8a909b; font-size:10px; line-height:1.7; }
.form-error { margin-top:10px; font-size:12px; }
.error-message { color:#b02f43; }
.notice { padding:11px 14px; border:1px solid #dbe4ed; background:#eef4fa; border-radius:7px; color:#526f89; font-size:11px; line-height:1.7; margin-bottom:16px; }
.demo-notice { background:#fff8e5; border-color:#ead9a7; color:#8a6b2e; }
.notice.error-message { color:#b02f43; background:#fff1f3; border-color:#efc5ce; }
.loading,.empty-state { padding:37px 20px; text-align:center; color:#8b929e; font-size:12px; line-height:1.8; }
.error-state { padding:24px; border:1px solid #efc5ce; border-radius:9px; background:#fff8f9; color:#b02f43; font-size:12px; }
.error-state button { margin-top:12px; }
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; margin-bottom:17px; }
.metric-card { padding:21px 23px; }
.metric-label { display:flex; align-items:center; gap:8px; color:#69717e; font-size:11px; }
.metric-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; font-size:17px; }
.metric-icon.red { color:var(--red); background:var(--red-soft); }
.metric-icon.blue { color:var(--blue); background:#edf3fa; }
.metric-value { font-size:38px; font-weight:650; line-height:1.3; margin-top:10px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.metric-value.missing { font-size:23px; color:#8b909b; letter-spacing:0; padding-block:7px; }
.metric-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.metric-comparison { font-size:12px; text-align:right; line-height:1.7; }
.metric-comparison small { display:block; color:#9197a2; font-size:10px; }
.metric-card>p { margin-top:10px; color:#959aa5; font-size:10px; line-height:1.7; }
.up { color:var(--green); }
.down { color:#ad554f; }
.neutral { color:#8a909b; }
.trend-panel { padding:19px 21px 15px; margin-bottom:18px; }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.panel-title p { margin-top:5px; color:#9197a2; font-size:10px; }
.legend { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:15px; color:#87909c; font-size:10px; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:17px; border-top:2px solid; }
.legend .dashed { border-top-style:dashed; }
.chart { margin-top:8px; min-width:0; }
.chart svg { display:block; width:100%; min-height:160px; max-height:300px; }
.chart-readout { min-height:36px; margin-top:3px; font-size:10px; line-height:1.8; color:#85909d; }
.chart-empty { min-height:175px; display:grid; place-items:center; text-align:center; color:#929aa6; font-size:12px; }
.section-heading { margin:29px 0 16px; display:flex; justify-content:space-between; align-items:center; }
.section-heading p { margin-top:7px; font-size:11px; color:#8a919d; }
.analysis-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; }
.analysis-card { padding:20px; min-width:0; }
.analysis-card.expanded { grid-column:1 / -1; }
.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.card-heading h2 { line-height:1.5; }
.card-actions { display:flex; gap:13px; white-space:nowrap; }
.card-query { margin-bottom:16px; }
.object-row { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:0 0 13px; padding:0; border:0; }
.object-row legend { margin-bottom:8px; color:#7b8290; font-size:10px; }
.picker { position:relative; min-width:0; }
.picker>summary { display:flex; align-items:center; justify-content:space-between; gap:6px; border:1px solid #dce0e7; padding:9px 10px; border-radius:7px; background:#fff; font-size:11px; color:#626a78; min-height:38px; list-style:none; }
.picker>summary::-webkit-details-marker { display:none; }
.picker>summary::after { content:"⌄"; color:#969eaa; }
.picker>summary span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-options { position:absolute; z-index:8; top:calc(100% + 5px); left:0; width:max(100%,220px); max-width:min(330px,calc(100vw - 55px)); max-height:265px; overflow:auto; border:1px solid #dde1e8; box-shadow:0 9px 25px #2222; border-radius:8px; padding:8px; background:#fff; }
.picker[data-picker="targets"] .picker-options { width:max(100%,280px); max-width:min(480px,calc(100vw - 55px)); }
.picker-options label { display:flex; align-items:flex-start; gap:7px; padding:7px 5px; font-size:11px; line-height:1.55; color:#646e7b; }
.picker-options label span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.picker-options input { margin-top:2px; flex-shrink:0; }
.picker-options button { font-size:10px; color:#b63750; padding:4px 5px 8px; }
.picker-options .picker-done { position:sticky; bottom:-8px; display:block; width:100%; margin-top:5px; padding:9px 5px; background:#fff; border-top:1px solid #eef0f4; border-radius:0; text-align:right; }
.picker-empty { display:block; color:#969da8; padding:8px 5px; font-size:11px; }
.analysis-card .date-controls { gap:9px; }
.analysis-card .date-controls input { width:145px; }
.analysis-card .date-controls .compare-field { margin-left:0; }
.card-date-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:13px 0 10px; }
.card-date-heading span { font-size:10px; color:#8b919d; }
.card-date-heading .presets button { padding:4px 6px; font-size:10px; }
.card-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0 14px; border-top:1px solid #eff0f4; }
.card-summary>div:first-child>span { font-size:10px; color:#8b929d; }
.card-summary .metric-value { font-size:31px; margin-top:4px; }
.card-summary .metric-value.missing { font-size:21px; }
.analysis-card .legend { margin-top:0; }
.analysis-card .chart svg { min-height:140px; }
.ranking { margin-top:15px; border-top:1px solid #eef0f4; padding-top:15px; }
.ranking-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:10px; }
.ranking-heading span { font-size:10px; color:#949ba6; }
.rank-item { display:block; width:100%; text-align:left; padding:10px 0; border-bottom:1px solid #f2f3f6; }
.rank-item:last-child { border-bottom:0; }
.rank-line { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:11px; }
.rank-name { flex:1; min-width:0; color:#626c7a; overflow-wrap:anywhere; line-height:1.7; }
.rank-name b { color:#b3bac4; font-size:10px; margin-right:8px; font-weight:500; }
.rank-item:hover .rank-name { color:#c9314d; }
.rank-count { flex-shrink:0; color:#414a58; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rank-prior { display:flex; justify-content:space-between; margin:5px 0 0 20px; font-size:10px; color:#959daa; }
.back-link { display:inline-block; color:#a63b50; font-size:11px; margin:0 0 15px; }
.detail-filters { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(220px,1.3fr) minmax(170px,1fr); gap:11px; margin-bottom:15px; align-items:end; }
.detail-filters .object-row { display:contents; }
.detail-filters .object-row legend { display:none; }
.detail-options { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; padding-top:15px; margin-top:15px; border-top:1px solid #eff0f4; }
.checkbox-label { display:flex; gap:6px; align-items:center; font-size:11px; color:#777f8d; min-height:36px; }
.detail-options .field-label input { width:93px; }
.detail-options .field-label select { min-width:105px; font-size:11px; }
.detail-summary { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; padding:16px 20px; margin-bottom:17px; font-size:11px; color:#8a929e; }
.detail-summary strong { color:#444f5f; font-size:23px; font-weight:650; margin-right:6px; font-variant-numeric:tabular-nums; }
.detail-summary small { margin-left:auto; color:#969daa; }
.table-panel { overflow:hidden; }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:11px; min-width:780px; }
th { padding:11px 17px; background:#fafbfc; color:#8e98a5; font-size:10px; font-weight:500; border-bottom:1px solid #eceff3; white-space:nowrap; }
th button { font-size:10px; padding:0; }
td { padding:13px 17px; color:#7b8797; border-bottom:1px solid #eff1f5; vertical-align:middle; line-height:1.6; }
td strong { font-weight:500; color:#4f5c6e; }
td.content-title { min-width:230px; width:38%; }
td.content-title strong { display:block; max-width:480px; white-space:normal; overflow-wrap:anywhere; line-height:1.75; }
td small { display:block; font-size:9px; color:#9ca4b0; }
td.numeric,th.numeric { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:hover { background:#fcfcfe; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 18px; font-size:10px; color:#929ba7; }
.pagination>div { display:flex; align-items:center; gap:10px; }
.pagination button { border:1px solid var(--line); padding:6px 10px; font-size:10px; }
.page-footer { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-top:25px; color:#a1a7b2; font-size:9px; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:28px; }
.login-card { width:min(100%,390px); padding:34px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 15px 50px #1c263509; }
.light-brand { color:#2c3038; padding:0; margin-bottom:35px; }
.login-card h1 { font-size:23px; }
.login-description { font-size:12px; color:#8b929e; margin-top:10px; }
.login-card form { margin-top:27px; }
.login-card label { display:flex; flex-direction:column; gap:9px; font-size:12px; color:#687282; }
.login-card label+label { margin-top:15px; }
.login-card input[readonly] { background:#f6f7f9; color:#858d99; }
.form-dirty { margin-top:10px; font-size:10px; line-height:1.6; }
.login-card input { width:100%; }
.login-card .primary-button { width:100%; margin-top:17px; }
.login-card .error-message { margin-top:15px; font-size:12px; line-height:1.7; }
@media(min-width:1550px) { .analysis-card .date-controls .compare-field { margin-left:auto; } }
@media(max-width:1150px) {
  main { padding:25px 22px; margin-left:185px; }
  .sidebar { width:185px; padding-inline:13px; }
  .query-heading { align-items:flex-start; flex-direction:column; }
  .date-controls .compare-field { margin-left:0; }
  .analysis-card { padding:17px; }
  .card-date-heading { align-items:flex-start; flex-direction:column; }
  .detail-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-filters>.field-label { grid-column:1 / -1; }
  .detail-filters .picker[data-picker="targets"] .picker-options { left:auto; right:0; }
  .metric-row { align-items:flex-start; gap:7px; flex-direction:column; }
  .metric-comparison { text-align:left; }
}
@media(max-width:850px) {
  .sidebar { position:static; width:auto; padding:17px 20px 9px; display:block; }
  .brand { padding:0; }
  .side-label,.sidebar-bottom .status-dot { display:none; }
  .sidebar nav { display:flex; gap:8px; margin-top:18px; }
  .nav-item { width:auto; min-width:110px; padding:9px 13px; margin:0; }
  .sidebar-bottom { position:absolute; top:18px; right:20px; border:0; padding:0; font-size:0; }
  .sidebar-bottom button { font-size:11px; margin:0; padding:7px; }
  main { margin-left:0; padding:22px 20px; }
  .analysis-grid { gap:16px; }
}
@media(max-width:660px) {
  main { padding:20px 14px; }
  h1 { font-size:24px; }
  .page-header { align-items:flex-start; }
  .readonly-badge { font-size:10px; padding:6px 8px; }
  .query-panel { padding:16px; }
  .query-heading small { display:block; margin:6px 0 0; }
  .date-controls { gap:10px; }
  .date-controls label { flex:1 1 125px; }
  .date-controls input,.analysis-card .date-controls input { width:100%; }
  .date-controls .primary-button { flex:1 1 100%; }
  .date-controls .compare-field { margin-left:0; }
  .kpi-grid { gap:11px; }
  .metric-card { padding:16px 14px; }
  .metric-value { font-size:30px; }
  .metric-value.missing { font-size:19px; }
  .metric-label { align-items:flex-start; line-height:1.6; font-size:10px; }
  .metric-icon { flex-shrink:0; width:21px; height:21px; font-size:14px; }
  .metric-comparison { font-size:11px; }
  .metric-card>p { font-size:9px; }
  .trend-panel { padding:17px 13px 12px; }
  .analysis-grid { grid-template-columns:minmax(0,1fr); }
  .analysis-card { padding:17px; }
  .object-row { gap:7px; }
  .picker>summary { padding:8px; font-size:10px; }
  .card-date-heading { flex-direction:row; align-items:center; }
  .card-date-heading .presets { gap:0; }
  .card-date-heading .presets button { padding:4px 5px; }
  .detail-filters { gap:9px; }
  .detail-options { gap:11px; }
  .detail-summary { gap:12px 20px; padding:15px; }
  .detail-summary small { flex-basis:100%; margin:0; }
  .pagination { align-items:flex-start; flex-direction:column; }
  .legend { gap:9px 13px; font-size:9px; }
  .chart svg { min-height:145px; }
  .page-footer { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }