/* EVOS_STAT 공통 UI 테마 (map_service.html 골든 소스) - Pretendard + slate 라이트 */
:root {
  color-scheme: light;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --rose-50: #fff1f2;
  --rose-200: #fecdd3;
  --rose-700: #be123c;
  /* 기존 페이지 변수 별칭 (테마 통일 시 기존 class 호환) */
  --muted: var(--slate-500);
  --accent: var(--slate-700);
  --border: var(--slate-200);
  --text: var(--slate-900);
}
html, body { height: 100%; margin: 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  font-family: Pretendard, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: var(--slate-50);
  color: var(--slate-900);
  font-size: 14px;
  line-height: 1.5;
}
.bg-slate-50 { background: var(--slate-50); }
.text-slate-900 { color: var(--slate-900); }
/* 기존 페이지 .panel, .card, .shell 라이트 테마 덮어쓰기 */
body.bg-slate-50 .panel,
body.bg-slate-50 .card,
body.bg-slate-50 .searchPanel,
body.bg-slate-50 .statBox,
body.bg-slate-50 .tariff { background: #fff !important; border-color: var(--slate-200) !important; color: var(--slate-900) !important; }
body.bg-slate-50 .card .label,
body.bg-slate-50 .card .val,
body.bg-slate-50 .statBox .label,
body.bg-slate-50 .statBox .value,
body.bg-slate-50 .filterHint,
body.bg-slate-50 .sub,
body.bg-slate-50 .msg,
body.bg-slate-50 .listMeta,
body.bg-slate-50 .pageDesc,
body.bg-slate-50 .tariff { color: var(--slate-600) !important; }
body.bg-slate-50 .card .val,
body.bg-slate-50 .statBox .value { color: var(--slate-900) !important; }
body.bg-slate-50 .cardTitle,
body.bg-slate-50 h1 { color: var(--slate-900) !important; }
body.bg-slate-50 .topNav { background: transparent !important; border: none !important; }
body.bg-slate-50 .tableWrap,
body.bg-slate-50 .detailTableWrap { background: #fff !important; border-color: var(--slate-200) !important; }
body.bg-slate-50 .summaryTable th,
body.bg-slate-50 .detailTable th { background: var(--slate-100) !important; color: var(--slate-900) !important; }
body.bg-slate-50 .summaryTable td,
body.bg-slate-50 .detailTable td { border-color: var(--slate-200) !important; }
body.bg-slate-50 .list,
body.bg-slate-50 .stationCard { background: #fff !important; border-color: var(--slate-200) !important; }
body.bg-slate-50 .stationName { color: var(--slate-900) !important; border-color: var(--slate-200) !important; }
body.bg-slate-50 .countBox { background: var(--slate-100) !important; border-color: var(--slate-200) !important; color: var(--slate-900) !important; }

/* Sticky header (공통 네비) */
.evos-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--slate-200);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
}
.evos-header .evos-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0.75rem 1rem;
}
.evos-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.evos-nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--slate-600);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.evos-nav a:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
.evos-nav a.active {
  background: var(--slate-900);
  color: #fff;
}

/* Layout */
.evos-container { max-width: 1600px; margin-left: auto; margin-right: auto; padding: 0 1rem; }
.evos-main { padding-top: 1rem; padding-bottom: 1rem; }
.evos-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.evos-col-3 { grid-column: span 3; }
.evos-col-6 { grid-column: span 6; }
@media (max-width: 1023px) {
  .evos-col-3, .evos-col-6 { grid-column: span 12; }
}

/* Card */
.evos-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  padding: 1rem;
  margin-bottom: 1rem;
}
.evos-card .evos-card-title { font-size: 1rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--slate-900); }
.evos-card .evos-card-label { font-size: 0.75rem; color: var(--slate-500); margin-bottom: 0.25rem; }
.evos-card .evos-card-val { font-size: 1.125rem; font-weight: 700; color: var(--slate-900); }

/* Form */
.evos-input,
.evos-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-900);
  font-size: 0.875rem;
  outline: none;
}
.evos-input:focus, .evos-select:focus {
  outline: 2px solid var(--slate-900);
  outline-offset: 2px;
}
.evos-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-900);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}
.evos-btn:hover { background: var(--slate-100); }
.evos-btn.primary {
  background: var(--slate-900);
  color: #fff;
  border-color: var(--slate-900);
}
.evos-btn.primary:hover { opacity: 0.9; }
.evos-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Table (sticky header, zebra, num align) */
.evos-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 60vh;
  border: 1px solid var(--slate-200);
  border-radius: 0.75rem;
  background: #fff;
}
.evos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.evos-table th,
.evos-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--slate-200);
}
.evos-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--slate-100);
  color: var(--slate-900);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
}
.evos-table tbody tr:nth-child(even) { background: var(--slate-50); }
.evos-table tbody tr:hover { background: var(--slate-100); }
.evos-table td.num, .evos-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Message (로딩/에러/빈 결과) */
.evos-msg {
  padding: 1.5rem;
  text-align: center;
  color: var(--slate-500);
  font-size: 0.875rem;
}
.evos-msg.err { color: var(--rose-700); background: var(--rose-50); border-radius: 0.75rem; }
.evos-msg.loading { color: var(--slate-600); }
.msg { padding: 1rem; text-align: center; color: var(--slate-500); font-size: 0.875rem; }
.evos-table .rowLabel, .evos-table td.rowLabel { text-align: left; font-weight: 600; }
.evos-table .tdLeft, .evos-table td.tdLeft { text-align: left; white-space: normal; }

/* Utility */
.evos-text-muted { color: var(--slate-500); font-size: 0.75rem; }
.evos-page-desc {
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: var(--slate-100);
  border-left: 4px solid var(--slate-900);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--slate-600);
  margin-bottom: 1rem;
}
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.w-full { width: 100%; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.border { border: 1px solid var(--slate-200); }
.bg-white { background: #fff; }
.p-4 { padding: 1rem; }
.min-h-40 { min-height: 10rem; }
.overflow-auto { overflow: auto; }
@media (min-width: 1024px) {
  .evos-col-left { grid-column: span 3; }
  .evos-col-center { grid-column: span 6; }
  .evos-col-right { grid-column: span 3; }
}
@media (max-width: 1023px) {
  .evos-col-left, .evos-col-center, .evos-col-right { grid-column: span 12; }
}

/* Dashboard page patterns (layout grid, KPI tiles, rankings, badges, typography) */
.dashboard-page .page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 16px 16px;
}
.dashboard-page .refresh-meta {
  font-size: 11px;
  color: var(--muted, #64748b);
  margin-bottom: 8px;
}
.dashboard-page .status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted, #64748b);
  padding: 8px 12px;
  background: var(--surface-2, #f8fafc);
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid var(--border, #e2e8f0);
}
.dashboard-page .status-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dashboard-page .status-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.dashboard-page .status-ok .status-dot { background: #22c55e; }
.dashboard-page .status-warn .status-dot { background: #f59e0b; }
.dashboard-page .status-error .status-dot { background: #ef4444; }
.dashboard-page .status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-page .status-meta { font-size: 11px; color: var(--muted, #64748b); }

.dashboard-page .kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.dashboard-page .kpi-card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dashboard-page .kpi-card:hover {
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.03), 0 8px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.dashboard-page .kpi-card:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05); }
.dashboard-page .kpi-card .label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.dashboard-page .kpi-card .value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.dashboard-page .kpi-card .delta { margin-top: 6px; font-size: 11px; font-weight: 600; min-height: 16px; }
.dashboard-page .kpi-card .delta.up { color: #15803d; }
.dashboard-page .kpi-card .delta.down { color: #b91c1c; }
.dashboard-page .kpi-card .delta.flat { color: var(--muted, #64748b); }

.dashboard-page .rank-section { margin-top: 24px; }
.dashboard-page .rank-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--slate-800, #1e293b); }
.dashboard-page .rank-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.dashboard-page .rank-box {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 10px;
  overflow: hidden;
  min-width: 0;
}
.dashboard-page .rank-box .title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.dashboard-page .rank-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.dashboard-page .rank-list tr { cursor: pointer; }
.dashboard-page .rank-list tbody tr:nth-child(odd) { background: #fff; }
.dashboard-page .rank-list tbody tr:nth-child(even) { background: #f8fafc; }
.dashboard-page .rank-list tr:hover { background: #eef2ff !important; }
.dashboard-page .rank-list td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; }
.dashboard-page .rank-list .v { text-align: right; font-weight: 600; }
.dashboard-page .rank-val-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dashboard-page .rank-bar { width: 44px; height: 6px; border-radius: 9999px; background: #e2e8f0; overflow: hidden; }
.dashboard-page .rank-bar-fill { height: 100%; border-radius: 9999px; background: #3b82f6; width: 0%; }

.dashboard-page .trend-section {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 12px;
}
.dashboard-page .trend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dashboard-page .trend-title { font-size: 14px; font-weight: 700; color: var(--slate-800, #1e293b); }
.dashboard-page .trend-sub { font-size: 11px; color: var(--muted, #64748b); }
.dashboard-page .trend-empty { font-size: 12px; color: var(--muted, #64748b); padding: 12px 8px; display: none; }

.dashboard-page .evos-footer {
  margin-top: 48px;
  padding: 28px 24px;
  border-top: 1px solid var(--border, #e2e8f0);
  background: var(--surface-2, #f8fafc);
  border-radius: 0 0 14px 14px;
}
.dashboard-page .evos-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.dashboard-page .evos-footer-logos { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.dashboard-page .evos-footer-logos img { display: block; object-fit: contain; height: 56px; width: auto; }
.dashboard-page .evos-footer-logos .footer-ci { height: 52px; }
.dashboard-page .evos-footer-logos .footer-venture { height: 56px; }
.dashboard-page .evos-footer-company { text-align: center; }
.dashboard-page .evos-footer-company .company-name { font-size: 15px; font-weight: 700; color: var(--text, #0f172a); margin-bottom: 4px; }
.dashboard-page .evos-footer-company .company-desc { font-size: 13px; color: var(--muted, #64748b); }

@media (max-width: 1200px) { .dashboard-page .rank-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .dashboard-page .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .dashboard-page .rank-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .dashboard-page .evos-footer-inner { flex-direction: column; gap: 20px; }
  .dashboard-page .evos-footer-logos { flex-direction: column; }
}
@media (max-width: 480px) {
  .dashboard-page .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-page .rank-grid { grid-template-columns: 1fr; }
}

/* App shell tokens + shared components */
:root {
  --app-radius-sm: 8px;
  --app-radius-md: 12px;
  --app-radius-lg: 16px;
  --app-gap-sm: 8px;
  --app-gap-md: 12px;
  --app-gap-lg: 16px;
  --app-shadow-1: 0 1px 2px rgba(2, 6, 23, 0.08);
  --app-shadow-2: 0 8px 24px rgba(2, 6, 23, 0.08);
}

.app-shell-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--app-gap-md);
  margin-bottom: 10px;
}
.app-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--slate-900);
}
.app-shell-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--slate-900);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: var(--app-shadow-1);
}
.app-shell-brandtext {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
.app-shell-brandtext strong { font-size: 1rem; letter-spacing: -0.01em; }
.app-shell-brandtext small { font-size: 11px; color: var(--slate-500); }
.app-shell-status {
  font-size: 11px;
  color: var(--slate-600);
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 4px 10px;
}
.app-shell-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.app-shell-nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  text-decoration: none;
  color: var(--slate-700);
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.app-shell-nav a:hover { background: var(--slate-100); color: var(--slate-900); }
.app-shell-nav a.active { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }

.app-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-1);
}
.kpi-tile {
  background: linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
  border: 1px solid var(--slate-200);
  border-radius: var(--app-radius-md);
  padding: 14px;
}
.kpi-tile .kpi-label { font-size: 12px; color: var(--slate-500); margin-bottom: 4px; }
.kpi-tile .kpi-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }

.app-table-wrap {
  overflow: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--app-radius-md);
  background: #fff;
}
.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app-table th, .app-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--slate-200);
  text-align: left;
}
.app-table th {
  background: var(--slate-100);
  color: var(--slate-700);
  font-weight: 700;
}
.app-table tbody tr:nth-child(even) { background: var(--slate-50); }
.app-table tbody tr:hover { background: #eef2ff; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}
.badge.ok { background: #dcfce7; color: #166534; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.error { background: #fee2e2; color: #991b1b; }

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-900);
  font-weight: 700;
  font-size: 13px;
  height: 34px;
  padding: 0 12px;
  cursor: pointer;
}
.app-btn:hover { background: var(--slate-100); }
.app-btn.primary {
  background: var(--slate-900);
  color: #fff;
  border-color: var(--slate-900);
}
.app-btn.primary:hover { opacity: .92; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--app-radius-md);
  background: #fff;
  box-shadow: var(--app-shadow-1);
}

@media (max-width: 900px) {
  .app-shell-topbar { flex-direction: column; align-items: flex-start; }
}

/* IA v2: Korean top nav + 2nd-level tabs, no sidebar */
.app-shell-page .evos-container { max-width: 1680px; }
.app-shell-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.app-shell-admin-link {
  font-size: 12px;
  color: var(--slate-600);
  text-decoration: none;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 4px 10px;
  background: #fff;
}
.app-shell-admin-link:hover { background: var(--slate-100); }
.app-shell-nav.topnav {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.app-shell-nav.topnav a {
  min-width: 96px;
  justify-content: center;
}
.app-shell-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.app-shell-subtab {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-700);
  background: #fff;
}
.app-shell-subtab:hover { background: var(--slate-100); color: var(--slate-900); }
.app-shell-subtab.active { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }
.app-shell-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.app-shell-updated {
  font-size: 12px;
  color: var(--slate-600);
}

/* Reusable UI pieces */
.filter-bar { row-gap: 8px; }
.app-btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-table-wrap, .evos-table-wrap {
  border-radius: 12px;
  box-shadow: var(--app-shadow-1);
}
.kpi-tile, .kpi-card {
  border-radius: 12px;
}

@media (max-width: 900px) {
  .app-shell-meta { align-items: flex-start; flex-direction: column; }
}

/* Global website-like shell with sticky topnav + sticky subtabs + sticky left filter */
.app-shell-page .evos-header {
  top: 0;
  z-index: 60;
}
.app-shell-page .app-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 62;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
.app-shell-page .app-shell-nav.topnav {
  position: sticky;
  top: 44px;
  z-index: 61;
  padding: 4px 0;
  background: rgba(255,255,255,.92);
}
.app-shell-page .app-shell-subnav {
  position: sticky;
  top: 84px;
  z-index: 60;
  padding: 4px 0 6px;
  background: rgba(255,255,255,.92);
}
.app-shell-page .app-shell-meta {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--slate-200);
}

.app-shell-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 12px;
}
.app-filter-panel {
  position: sticky;
  top: 132px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--app-shadow-1);
  padding: 12px;
}
.app-filter-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--slate-900);
}
.app-filter-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.app-filter-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--slate-600);
}
.app-filter-body input,
.app-filter-body select {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
  color: var(--slate-900);
}
.app-filter-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.app-filter-status > label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.app-main-content {
  min-width: 0;
}

@media (max-width: 1100px) {
  .app-shell-page .app-shell-nav.topnav { top: 70px; }
  .app-shell-page .app-shell-subnav { top: 108px; }
  .app-shell-grid {
    grid-template-columns: 1fr;
  }
  .app-filter-panel {
    position: static;
  }
}


/* --- 2026-02-27 UI polish: prevent wraps, stabilize left filter, remove ratio bars --- */
.kpi-card .label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-val{ display:inline-block; font-variant-numeric: tabular-nums; }
.rank-val-wrap{ display:block; }
.rank-bar, .rank-bar-fill{ display:none !important; } /* legacy */

.app-filter-panel{ min-width: 260px; }
.app-filter-body input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
}
.app-filter-status > label{
  justify-content: flex-start;
  align-items: center;
}
.app-filter-status{
  padding-top: 4px;
}