:root {
  --bg: #f6f7f2;
  --card: #ffffff;
  --ink: #152018;
  --muted: #657064;
  --line: #dfe5db;
  --accent: #247a46;
  --accent-dark: #14552e;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(32, 50, 36, .10);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(36, 122, 70, .13), transparent 28rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.topbar {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { font-weight: 800; letter-spacing: -.02em; font-size: 1.1rem; }
.topbar nav { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.user-pill { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.user-pill img, .person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.container { max-width: 1120px; margin: 0 auto; padding: 12px 20px 60px; }
.hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 42px; min-height: 68vh; }
.eyebrow { color: var(--accent); text-transform: uppercase; font-weight: 800; font-size: .78rem; letter-spacing: .12em; margin: 0 0 8px; }
h1 { font-size: clamp(2rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.06em; margin: 0; }
h2 { margin: 0 0 16px; letter-spacing: -.03em; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 600px; line-height: 1.55; }
.google-button, .primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; font-weight: 750;
}
.google-button { background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.google-button span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2f5ef; font-weight: 900; }
.primary { background: var(--accent); color: white; }
.primary:hover { background: var(--accent-dark); }
.secondary { background: white; border: 1px solid var(--line); color: var(--muted); }

.hero-card, .card, .list-card {
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.hero-card { padding: 28px; transform: rotate(1.5deg); }
.preview-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.preview-list li { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f7faf5; border-radius: 18px; }
.preview-list span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); }
.preview-list small { margin-left: auto; color: var(--muted); }
.preview-list .done { text-decoration: line-through; color: var(--muted); }
.preview-list .done span { background: var(--accent); }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 28px; }
.page-head h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.subtle { color: var(--muted); margin: 10px 0 0; }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: 1fr 1fr; }
.list-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.card { padding: 24px; }
.muted-card { background: rgba(255, 255, 255, .56); }
.stack-form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; font-weight: 700; color: var(--muted); }
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: #fbfcfa; color: var(--ink); outline: none;
}
textarea { min-height: 72px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(36, 122, 70, .65); box-shadow: 0 0 0 4px rgba(36, 122, 70, .12); }

.list-cards { display: grid; gap: 14px; margin-top: 22px; }
.dashboard-list-section { margin-top: 0; margin-bottom: 24px; }
.create-list-section { max-width: 620px; }
.list-card { padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: transform .15s ease, box-shadow .15s ease; }
.list-card:hover { transform: translateY(-2px); }
.list-card-row { gap: 14px; }
.list-card-link { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.remove-list-form { margin: 0; flex-shrink: 0; }
.list-card h2 { margin: 0 0 5px; }
.list-card p { margin: 0; color: var(--muted); }
.role { padding: 6px 10px; border-radius: 999px; font-size: .8rem; background: #ecf4eb; color: var(--accent-dark); font-weight: 800; }
.role.viewer { background: #eef2f6; color: #465568; }
.role.owner { background: #fff4d8; color: #7d5700; }

.add-form { display: grid; grid-template-columns: 1fr 110px auto; gap: 10px; margin-bottom: 18px; }
.add-form textarea { grid-column: 1 / -1; min-height: 58px; }
.items { display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: #fbfcfa; }
.item.completed { opacity: .64; }
.item.completed .item-body strong { text-decoration: line-through; }
.check { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); background: white; color: var(--accent); cursor: pointer; font-weight: 900; }
.check:disabled { opacity: .4; cursor: not-allowed; }
.item-body { min-width: 0; }
.item-body strong { display: inline-block; margin-right: 6px; }
.item-body p { color: var(--muted); margin: 8px 0; }
.item-body small { color: var(--muted); }
.qty { display: inline-flex; background: #edf5eb; color: var(--accent-dark); border-radius: 999px; padding: 3px 8px; font-size: .82rem; font-weight: 800; }
.inline-form { margin: 0; }
.icon { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 8px 10px; border-radius: 999px; }
.icon.danger { color: var(--danger); }
.icon.danger:hover { background: #fff0ee; }

.side-stack { display: grid; gap: 18px; }
.people { display: grid; gap: 12px; }
.person { display: flex; align-items: center; gap: 10px; }
.person small { display: block; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #eef4ec; display: grid; place-items: center; font-weight: 900; color: var(--accent); }
.pending { padding: 12px; border-radius: 16px; background: #fbfcfa; border: 1px dashed var(--line); }
.notice, .empty, .flash { border-radius: 18px; padding: 14px 16px; }
.empty { background: rgba(255, 255, 255, .7); border: 1px dashed var(--line); color: var(--muted); }
.notice { background: #fff7df; color: #755000; }
.flash { margin-bottom: 16px; }
.flash.success { background: #eaf7ed; color: #18552e; border: 1px solid #bfe5c8; }
.flash.error { background: #fff0ee; color: #8a1f17; border: 1px solid #f4c4bd; }
.footer { color: var(--muted); text-align: center; padding: 28px; }

@media (max-width: 820px) {
  .hero, .grid.two, .list-layout { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding: 34px 0; }
  .add-form { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .list-card-row, .list-card-link { align-items: flex-start; }
  .list-card-row { flex-direction: column; }
  .list-card-link { width: 100%; }
}

.install-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.install-button[hidden] { display: none; }


.activity-card { margin-bottom: 22px; }
.activity-list { display: grid; gap: 10px; }
.activity-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcfa;
}
.activity-row:hover { border-color: rgba(36, 122, 70, .45); }
.activity-row small { color: var(--muted); white-space: nowrap; }

.live-panel {
  display: grid;
  gap: 10px;
  margin: -10px 0 20px;
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .88rem;
}
.live-status.problem { color: #8a5a00; background: #fff8e5; }
.live-status small { font-weight: 600; color: var(--muted); }
.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(36, 122, 70, .11);
}
.live-status.problem .live-dot { background: #d18b00; box-shadow: 0 0 0 5px rgba(209, 139, 0, .12); }
.live-notifications {
  display: grid;
  gap: 8px;
  max-width: 720px;
}
.live-note {
  border: 1px solid #bfe5c8;
  background: #eaf7ed;
  color: #18552e;
  border-radius: 16px;
  padding: 10px 12px;
  font-weight: 750;
}
.live-note.new { animation: popIn .25s ease-out; }
@keyframes popIn {
  from { transform: translateY(-5px); opacity: .3; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 820px) {
  .activity-row { align-items: flex-start; flex-direction: column; }
  .activity-row small { white-space: normal; }
  .live-status { width: 100%; justify-content: flex-start; }
}

.install-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(21, 32, 24, .42);
}
.install-modal {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
}
.install-modal h2 { margin-right: 34px; }
.install-modal p { color: var(--muted); }
.install-modal ol { padding-left: 22px; color: var(--ink); }
.install-modal li { margin: 8px 0; }
.install-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f5ef;
  color: var(--muted);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.install-status {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.install-status-row {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fbfcfa;
}
.install-status-row.ok { border-color: #bfe5c8; background: #eaf7ed; color: #18552e; }
.install-status-row.bad { border-color: #f4c4bd; background: #fff0ee; color: #8a1f17; }

.notify-button {
  border: 1px solid rgba(36, 122, 70, .25);
  background: #eaf7ed;
  color: #18552e;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.notify-button.is-on {
  background: #18552e;
  color: #fff;
  border-color: #18552e;
}
.notify-button:disabled {
  cursor: not-allowed;
  opacity: .65;
}
@media (max-width: 720px) {
  .notify-button { width: 100%; }
}