:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #f5f6f8; color: #1c2733; }
#app { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.3rem; }
.card { background: #fff; border-radius: 12px; padding: 14px 16px; margin: 12px 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h2 { font-size: 1.05rem; margin: 0; }
.fresh { font-size: .8rem; color: #6b7a8c; white-space: nowrap; }
address { font-style: normal; color: #52616f; font-size: .9rem; margin: 4px 0 8px; }
.fuels { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.fuel { background: #eef2f6; border-radius: 8px; padding: 6px 10px; font-size: .95rem; }
.card footer { display: flex; gap: 8px; margin-top: 10px; }
button { border: none; border-radius: 8px; padding: 8px 14px; font-size: .95rem; cursor: pointer; background: #2f6fed; color: #fff; }
button.delete { background: #e5484d; }
button.mute { background: #5b6b7c; }
.error { color: #c02929; }
.empty { color: #52616f; }
.start { text-align: center; padding-top: 20vh; }
@media (prefers-color-scheme: dark) {
  body { background: #14181d; color: #e6ebf0; }
  .card { background: #1d232b; }
  .fuel { background: #262e38; }
  .fresh, address { color: #93a1b0; }
}