:root{
  --bg:#eef1f6;
  --card:#ffffff;
  --text:#222;
  --sub:#666;
  --accent:#4f7cff;
  --input:#f7f8fa;
}

body.dark{
  --bg:#0f1115;
  --card:#1c1f26;
  --text:#eee;
  --sub:#aaa;
  --accent:#7aa2ff;
  --input:#2a2e38;
}

*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,sans-serif;
}

.app{
  max-width:900px;
  margin:auto;
  padding:80px 20px 40px;
}

.card{
  background:var(--card);
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  margin-bottom:20px;
}

textarea{
  width:100%;
  height:90px;
  resize:none;
  background:var(--input);
  color:var(--text);
  border:none;
  border-radius:14px;
  padding:12px;
}

button{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:12px;
  font-size:16px;
  cursor:pointer;
  width:100%;
  margin-top:16px;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:16px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
}

.stat{
  background:var(--input);
  border-radius:14px;
  padding:16px;
  text-align:center;
  opacity:0;
  transform:translateY(10px);
  animation:fade .4s forwards;
}

.stat h3{
  margin:0;
  font-size:13px;
  color:var(--sub);
}

.stat p{
  margin:8px 0 0;
  font-size:20px;
  font-weight:bold;
}

@keyframes fade{
  to{ opacity:1; transform:none }
}

canvas{
  width:100%;
  max-height:260px;
}

/* ダークモードスイッチ */
.switch{
  position:fixed;
  top:16px;
  right:16px;
}

.switch input{ display:none }

.slider{
  width:64px;
  height:30px;
  background:#ccc;
  border-radius:20px;
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px;
  transition:.3s;
}

.slider::before{
  content:"";
  width:24px;
  height:24px;
  background:#fff;
  border-radius:50%;
  position:absolute;
  top:3px;
  left:3px;
  transition:.3s;
}

.icon{
  font-size:14px;
  z-index:1;
}

input:checked + .slider{
  background:var(--accent);
}

input:checked + .slider::before{
  transform:translateX(34px);
}