:root {
  --bg: #f7fbfa;
  --panel: #ffffff;
  --ink: #142321;
  --muted: #5d6b68;
  --line: #dce8e5;
  --brand: #157f7b;
  --brand-dark: #0c5d59;
  --danger: #b3261e;
  --shadow: 0 10px 30px rgba(8, 40, 36, 0.08);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 251, 250, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--brand);
  color: white;
  display: grid;
  place-items: center;
}

.brand-mark.small {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.nav {
  display: flex;
  gap: 8px;
}

.nav button,
.ghost-button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 9px 11px;
}

.page {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px calc(96px + var(--safe-bottom));
}

.hero {
  padding: 18px 0 8px;
}

.hero h1,
.page-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.15;
}

.muted {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 12px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.house-card {
  display: grid;
  gap: 14px;
}

.house-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.primary-button,
.danger-button {
  border: 0;
  border-radius: 8px;
  color: white;
  padding: 11px 14px;
  font-weight: 750;
}

.primary-button {
  background: var(--brand);
}

.danger-button {
  background: var(--danger);
}

.form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-weight: 700;
}

.field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: white;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f7fbfa;
}

.switch-row span,
.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row small {
  margin-top: 3px;
  color: var(--muted);
}

.switch-row input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.time-grid {
  display: grid;
  gap: 12px;
}

.settings-note {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #eef8f6;
}

.settings-note p {
  margin: 0;
}

.collection-list {
  display: grid;
  gap: 0;
}

.collection-row {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.collection-row:last-child {
  border-bottom: 0;
}

.ad-slot {
  border: 1px dashed #9ac9c3;
  background: #eef8f6;
  color: var(--brand-dark);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
}

.license-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfa;
}

.license-panel p {
  margin: 0;
}

.license-form {
  margin-top: 2px;
}

.install-card,
.pwa-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 12px;
}

.install-copy {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.install-copy h2,
.pwa-panel h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.install-copy p,
.pwa-panel p {
  margin: 0;
}

.pwa-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef8f6;
}

.status-pill {
  justify-self: start;
  border-radius: 999px;
  padding: 6px 10px;
  background: #dff4ed;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.pwa-panel .primary-button,
.install-card .primary-button {
  justify-self: start;
}

.next-collection {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.next-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bin-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--bin-colour) 13%, white);
  color: var(--bin-colour);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.bin-badge i {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.fa-leaf {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3C13.2 3.3 7.9 6.5 5.2 12.5c-1.1 2.4-1.2 4.6-.4 6.4L2.7 21 4 22.3l2.2-2.2c1.8.8 4 .6 6.4-.5C18.5 16.9 21.7 10.8 21 3Zm-3.1 3.1c-2.3 4.7-5.8 8.6-10.7 11.7-.2-1.1 0-2.4.7-3.9 1.8-4 5.1-6.5 10-7.8Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3C13.2 3.3 7.9 6.5 5.2 12.5c-1.1 2.4-1.2 4.6-.4 6.4L2.7 21 4 22.3l2.2-2.2c1.8.8 4 .6 6.4-.5C18.5 16.9 21.7 10.8 21 3Zm-3.1 3.1c-2.3 4.7-5.8 8.6-10.7 11.7-.2-1.1 0-2.4.7-3.9 1.8-4 5.1-6.5 10-7.8Z'/%3E%3C/svg%3E");
}

.fa-recycle {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.3 3.2 2.5 4.2-2.2 1.3L6.9 5.9 4.7 9.7l2.1 1.2H1.9V6l1.6.9 2.2-3.8c.6-1 2-1 2.6.1Zm7.4 1.1c.6.3 1 .8 1.3 1.3l2.2 3.8 1.7-1v4.9H16l2.1-1.2-2.3-4c-.3-.5-.9-.7-1.4-.4l-1.2.7-1.3-2.2 1.2-.7c.8-.5 1.8-.5 2.6-.2ZM4.8 14.5l2.2 1.3-.7 1.2c-.3.5-.1 1.1.4 1.4h4.5V16l4.2 2.5-4.2 2.5v-1.8H6.8c-1.6 0-2.6-1.7-1.8-3.1l.8-1.4Zm15.3 1.5c.8 1.4-.2 3.1-1.8 3.1h-4.4v-2.6h4.5c.5-.3.7-.9.4-1.4l-.7-1.2 2.2-1.3.8 1.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.3 3.2 2.5 4.2-2.2 1.3L6.9 5.9 4.7 9.7l2.1 1.2H1.9V6l1.6.9 2.2-3.8c.6-1 2-1 2.6.1Zm7.4 1.1c.6.3 1 .8 1.3 1.3l2.2 3.8 1.7-1v4.9H16l2.1-1.2-2.3-4c-.3-.5-.9-.7-1.4-.4l-1.2.7-1.3-2.2 1.2-.7c.8-.5 1.8-.5 2.6-.2ZM4.8 14.5l2.2 1.3-.7 1.2c-.3.5-.1 1.1.4 1.4h4.5V16l4.2 2.5-4.2 2.5v-1.8H6.8c-1.6 0-2.6-1.7-1.8-3.1l.8-1.4Zm15.3 1.5c.8 1.4-.2 3.1-1.8 3.1h-4.4v-2.6h4.5c.5-.3.7-.9.4-1.4l-.7-1.2 2.2-1.3.8 1.4Z'/%3E%3C/svg%3E");
}

.fa-newspaper {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h14c1.1 0 2 .9 2 2v10h1V8h2v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V7c0-1.1.9-2 2-2Zm1 3v10h12V8H5Zm2 2h4v4H7v-4Zm6 0h3v2h-3v-2Zm0 4h3v2h-3v-2Zm-6 2h4v2H7v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h14c1.1 0 2 .9 2 2v10h1V8h2v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V7c0-1.1.9-2 2-2Zm1 3v10h12V8H5Zm2 2h4v4H7v-4Zm6 0h3v2h-3v-2Zm0 4h3v2h-3v-2Zm-6 2h4v2H7v-2Z'/%3E%3C/svg%3E");
}

.fa-trash-can {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-.9 11c-.1 1.1-1 2-2.1 2H9c-1.1 0-2-.9-2.1-2L6 9Zm4 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-.9 11c-.1 1.1-1 2-2.1 2H9c-1.1 0-2-.9-2.1-2L6 9Zm4 2v8h2v-8h-2Zm4 0v8h2v-8h-2Z'/%3E%3C/svg%3E");
}

.fa-utensils {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h1v8H6V2Zm3 0h1v8H9V2ZM3 2h1v8H3V2Zm0 9h7c0 2-1.2 3.6-3 4.2V22H5v-6.8C3.2 14.6 2 13 2 11h1Zm14-9c2.2 0 4 2.8 4 6.2 0 2.5-1 4.7-2.5 5.7V22h-2v-8.1C15 12.9 14 10.7 14 8.2 14 4.8 15.8 2 18 2h-1Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 2h1v8H6V2Zm3 0h1v8H9V2ZM3 2h1v8H3V2Zm0 9h7c0 2-1.2 3.6-3 4.2V22H5v-6.8C3.2 14.6 2 13 2 11h1Zm14-9c2.2 0 4 2.8 4 6.2 0 2.5-1 4.7-2.5 5.7V22h-2v-8.1C15 12.9 14 10.7 14 8.2 14 4.8 15.8 2 18 2h-1Z'/%3E%3C/svg%3E");
}

.empty {
  padding: 28px 16px;
  text-align: center;
}

.status {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fff6e5;
  color: #5b3b00;
}

.status.error {
  background: #ffedea;
  color: var(--danger);
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  padding-bottom: var(--safe-bottom);
}

.bottom-nav-inner {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bottom-nav button {
  border: 0;
  background: transparent;
  padding: 13px 8px;
  color: var(--muted);
  font-weight: 700;
}

.bottom-nav button.active {
  color: var(--brand);
}

@media (max-width: 620px) {
  body {
    background: #eef7f5;
  }

  .topbar-inner {
    padding: 12px 14px;
  }

  .brand {
    font-size: 15px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .nav {
    display: none;
  }

  .page {
    padding: 18px 14px calc(96px + var(--safe-bottom));
  }

  .hero {
    padding-top: 10px;
  }

  .hero h1,
  .page-title {
    font-size: 26px;
  }

  .card {
    border-radius: 14px;
    padding: 15px;
    box-shadow: 0 8px 22px rgba(8, 40, 36, 0.07);
  }

  .house-card-header {
    display: block;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bottom-nav button {
    font-size: 13px;
  }

  .install-card .primary-button,
  .pwa-panel .primary-button {
    width: 100%;
  }

  .primary-button,
  .danger-button,
  .ghost-button {
    min-height: 44px;
  }

  .field input {
    min-height: 48px;
    font-size: 16px;
  }

  .bottom-nav button {
    min-height: 56px;
  }
}

@media (min-width: 720px) {
  .house-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .bottom-nav {
    display: none;
  }

  .page {
    padding-bottom: 40px;
  }

  .time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}