* { box-sizing: border-box; }
#app { padding:28px; height:100vh; display:flex; flex-direction:column; gap:20px; background: radial-gradient(ellipse at top left, rgba(12,34,64,0.65), rgba(6,18,36,0.85)), linear-gradient(180deg,#071428,#071c2b); color:#fff; font-family: "PingFang SC","Helvetica Neue", Arial, sans-serif; }
html,body{height:100%;margin:0;overflow:hidden;}
.title-bar { margin-bottom:12px; }
.title { font-size:28px; font-weight:700; color:#e6f7ff; }
.subtitle { font-size:13px; color:rgba(230,247,255,0.7); margin-top:4px; }
.kpi-row { display:block; }
.kpi-wrap { display:flex; gap:14px; align-items:stretch; }
.kpi-card { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.04); border-radius:12px; padding:18px 22px; flex:1; min-width:160px; text-align:left; box-shadow: 0 10px 30px rgba(3,12,30,0.5) inset, 0 8px 30px rgba(4,12,20,0.3); backdrop-filter: blur(6px); }
.kpi-label { font-size:13px; color:rgba(230,247,255,0.65); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.06em; }
.kpi-value { font-size:30px; font-weight:800; color:#fff; }
.kpi-value.small { font-size:20px; }
.layout { display:grid; grid-template-columns: 360px 1.6fr 360px; grid-template-rows: 1fr; gap:20px; flex:1; align-items:stretch; overflow:hidden; min-height:0; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:16px; box-shadow: 0 12px 36px rgba(2,8,20,0.5); overflow:hidden; border:1px solid rgba(255,255,255,0.03); }
.chart-note { /* chart fixed; side lists scroll inside cards */ display:none; }
.chart-card { height:360px; min-height:240px; margin-bottom:12px; flex:0 0 auto; }
.list-card { padding:8px; overflow:auto; min-height:0; }
.events-card { padding:8px; overflow:auto; min-height:0; }
#chart-trend { width:100%; height:100%; }
#chart-map { width:100%; height:100%; border-radius:10px; }
.map-card { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.map-card #leaflet-map { width:100%; height:100%; border-radius:10px; flex:1 1 auto; min-height:0; }
.map-card .legend { position:absolute; right:24px; top:120px; background:rgba(0,0,0,0.4); padding:8px 10px; border-radius:8px; color:#fff; font-size:13px; pointer-events:none; }
.side { display:flex; flex-direction:column; gap:12px; min-height:0; }
.left { padding-top:6px; display:flex; flex-direction:column; height:100%; min-height:0; }
.right { padding-top:6px; display:flex; flex-direction:column; height:100%; min-height:0; }
.small-card { margin-top:12px; padding:12px; flex:0 0 auto; }

/* Left column layout: fixed chart card + flexible list */
.left .chart-card { flex: 0 0 360px; }
.left .list-card { flex: 1 1 auto; overflow:auto; min-height:0; }

/* Right column layout: events flexible, small-card fixed */
.right .events-card { flex: 1 1 auto; overflow:auto; min-height:0; }
.right .small-card { flex: 0 0 120px; }

/* Ensure cards themselves don't cause page scroll - occupy available column height */
.layout { height:100%; min-height:0; }
.map-card { height:100%; min-height:0; display:flex; flex-direction:column; }
.card { min-height:0; }
#map-card { min-height:640px; display:flex; }
.kpi-mini { background: rgba(255,255,255,0.03); padding:8px 10px; border-radius:8px; color:#e6f7ff; text-align:center; min-width:90px; }
.mini-stats { overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling: touch; }
.mini-stats { overflow-x:visible; overflow-y:visible; padding:12px 10px; -webkit-overflow-scrolling: touch; min-height:84px; }
.mini-stats > div { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mini-stats .kpi-mini { flex:0 0 auto; min-width:88px; height:56px; padding:6px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; white-space:normal; box-shadow: inset 0 -6px 12px rgba(0,0,0,0.03); border-radius:6px; font-size:12px; }
.mini-stats h3 { margin:0 0 8px 0; padding-bottom:4px; }
.mini-stats .title-strong { font-size:13px; line-height:1; }

/* KPI typography tweaks: smaller heading, two-line KPI with responsive value */
.mini-stats h3 { font-size:14px; font-weight:700; margin-bottom:6px; }
.mini-stats .kpi-mini { font-size:11px; line-height:1.1; }
.mini-stats .kpi-mini br { display:block; content:""; height:6px; }
.mini-stats .kpi-mini .title-strong {
  display:block;
  font-size: clamp(12px, 2.2vw, 16px);
  font-weight:800;
  color: #e6f7ff;
  margin-top:3px;
}

/* card header */
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.card-title { font-weight:700; color:#e6f7ff; font-size:16px; }
.card-sub { color:rgba(200,220,235,0.7); font-size:12px; }
.chart-area { height:220px; }

/* nice list with progress */
.nice-list { list-style:none; margin:0; padding:0; }
.nice-list li { display:flex; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px dashed rgba(255,255,255,0.03); }
.nice-list .meta { color:var(--muted); font-size:12px; }
.progress { height:8px; background:rgba(255,255,255,0.03); border-radius:6px; overflow:hidden; width:140px; margin-left:12px; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d1ff 0%, #2b6df2 100%);
  width: 50%;
  transition: width 0.6s ease;
}

/* timeline */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { display:flex; gap:10px; padding:8px 6px; border-left:2px solid rgba(255,255,255,0.03); margin-left:6px; position:relative; }
.timeline li { display:flex; gap:12px; padding:10px 10px; border-left:2px solid rgba(255,255,255,0.03); margin-left:6px; position:relative; align-items:flex-start; }
.timeline li:before { content:''; width:8px; height:8px; border-radius:50%; background:#ffd54f; position:absolute; left:-12px; top:18px; box-shadow:0 0 8px rgba(255,213,79,0.35); }
.time-badge {
  color: #ffd54f;
  font-size: 11px;
  min-width:74px;
  text-align:center;
  padding:6px 8px;
  background: linear-gradient(180deg, rgba(255,235,59,0.06), rgba(255,235,59,0.02));
  border-radius:6px;
  box-shadow: 0 4px 10px rgba(2,8,20,0.45) inset;
  font-family: "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.time-badge small { display:block; color: rgba(230,247,255,0.65); font-size:10px; margin-top:3px; }
.timeline li:hover .time-badge { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 14px rgba(0,0,0,0.5) inset; }
.event-content { color:#e6f7ff; font-size:13px; line-height:1.45; }

/* stat grid */
.stat-grid { display:flex; gap:10px; margin-top:8px; }
.stat-item { flex:1; background: rgba(255,255,255,0.02); padding:12px; border-radius:8px; text-align:center; }
.stat-val { font-size:18px; font-weight:800; color:#fff; }
.stat-label { font-size:12px; color:var(--muted); margin-top:4px; }

/* responsive tweaks */
@media (max-width: 1200px) {
  .layout { grid-template-columns: 300px 1fr 300px; }
  .map-card { min-height:540px; }
}
#top-list { list-style:none; margin:0; padding:0; }
#top-list li { padding:8px 6px; border-bottom:1px dashed #eef3fa; display:flex; justify-content:space-between; }
#top-list { max-height: 320px; overflow:auto; }
/* event list */
#event-list { list-style:none; margin:0; padding:0; height:100%; overflow:auto; color:rgba(255,255,255,0.9); }
.list-card::-webkit-scrollbar,
.events-card::-webkit-scrollbar,
.mini-stats::-webkit-scrollbar,
#top-list::-webkit-scrollbar,
#event-list::-webkit-scrollbar {
  width:8px;
  height:8px;
}
.list-card::-webkit-scrollbar-thumb,
.events-card::-webkit-scrollbar-thumb,
.mini-stats::-webkit-scrollbar-thumb,
#top-list::-webkit-scrollbar-thumb,
#event-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius:6px;
}
.list-card::-webkit-scrollbar-track,
.events-card::-webkit-scrollbar-track,
.mini-stats::-webkit-scrollbar-track,
#top-list::-webkit-scrollbar-track,
#event-list::-webkit-scrollbar-track {
  background: transparent;
}
.list-card, .events-card, .mini-stats, #top-list, #event-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.muted { color:rgba(230,247,255,0.6); font-size:13px; }
.small { font-size:12px; color:rgba(200,220,235,0.7); }

/* visual polish */
.kpi-card .kpi-value { transition: transform 0.6s cubic-bezier(.2,.9,.2,1); transform-origin:left center; }
.kpi-card:hover .kpi-value { transform: translateY(-6px) scale(1.02); }
.card h3 { margin:0 0 8px 0; color:#dff6ff; font-weight:700; }
.top-list-item { display:flex; justify-content:space-between; padding:10px 6px; border-radius:6px; }
.top-list-item:nth-child(odd){ background: linear-gradient(90deg, rgba(255,255,255,0.01), transparent); }
.title-strong { color:#bfeaff; font-weight:700; }

/* controls */
.controls { position:absolute; right:28px; top:18px; display:flex; gap:10px; }
.control-btn { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); color:#e6f7ff; padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13px; transition: background 0.25s, transform 0.18s; }
.control-btn:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }

/* light theme */
html.theme-light {
  --bg-gradient-1: linear-gradient(180deg,#f3f6fb,#ffffff);
  --kpi-bg: linear-gradient(180deg,#fff,#fbfdff);
  --text-main: #0d2538;
  --muted: #6b7a90;
}

/* dark theme */
html.theme-dark {
  --bg-gradient-1: radial-gradient(ellipse at top left, rgba(12,34,64,0.65), rgba(6,18,36,0.85)), linear-gradient(180deg,#071428,#071c2b);
  --kpi-bg: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  --text-main: #e6f7ff;
  --muted: rgba(230,247,255,0.6);
}

/* responsive */
@media (max-width: 1000px) {
  .grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .kpi-wrap { flex-direction: column; gap:12px; }
  .kpi-card { min-width: unset; width:100%; padding:14px; }
  .kpi-value { font-size:22px; }
  .chart-card { min-height:220px; }
}