:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --muted: #5b6470;
  --text: #0f172a;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
.container { 
    max-width: 1100px; 
    min-height: 100vh; 
    margin: 0 auto; 
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card { 
    background: var(--card); 
    border-radius: 18px; 
    box-shadow: var(--shadow); 
    overflow: hidden;
    width: 100%;
}
.card-header { 
    text-align: center;
    padding: 24px 18px;
}
.title { 
    font-size: 24px; 
    font-weight: 700; 
    letter-spacing: .2px; 
    margin-bottom: 12px;
}
.subtitle { 
    color: var(--muted); 
    font-size: 1rem; 
    margin-bottom: 12px;
}
.datetime { 
    color: var(--text); 
    font-size: 1rem; 
    font-weight: 500;
    margin-bottom: 8px;
}
.total-count {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
}
.content { padding: 18px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.row { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
canvas { width: 100% !important; height: 420px !important; }