:root {
  --bg: #0e1422;
  --card: #172033;
  --card-2: #1e2a42;
  --ink: #f4f6fb;
  --muted: #93a0b8;
  --tint: #ff7a33;
  --hairline: #26324a;
  --good: #3ecf8e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* win over .topbar/.center display rules */
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; background: rgba(14, 20, 34, 0.85); backdrop-filter: blur(8px);
}
.brand { font-weight: 700; letter-spacing: -0.02em; }
.brand .plus { color: var(--tint); }
.ghost { background: none; border: 1px solid var(--hairline); color: var(--muted);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.ghost:hover { color: var(--ink); border-color: var(--muted); }

main { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }

.center { min-height: 82vh; display: grid; place-items: center; }
.hero { text-align: center; max-width: 420px; }
.wordmark { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tint); margin-bottom: 18px; }
.hero h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; }
.lead { color: var(--muted); margin: 0 0 26px; }
.gbtn { display: flex; justify-content: center; min-height: 44px; }

h2 { font-size: 22px; letter-spacing: -0.01em; margin: 4px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: #ff6b6b; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px; }
.pet-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pet-breed { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

.tasks { display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; align-items: center; gap: 10px; background: var(--card-2);
  border-radius: 10px; padding: 9px 12px; }
.task > span:first-child { font-weight: 600; flex: 1; }
.task .due { color: var(--muted); font-size: 12px; }
.task .done { margin-left: auto; background: none; border: 1px solid var(--hairline);
  color: var(--tint); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.task .done:hover { border-color: var(--tint); }