:root {
  color-scheme: dark;
  --bg: #090402;
  --ink: #fff0d2;
  --cream: #f6dca7;
  --muted: #c99f67;
  --gold: #f0a72b;
  --green: #a7ee3c;
  --yellow: #ffbf39;
  --red: #ff533f;
  --brown-0: #100603;
  --brown-1: #1c0c05;
  --brown-2: #3c1a0a;
  --brown-3: #743511;
  --border: rgba(255, 181, 70, .44);
  --shadow: 0 24px 48px rgba(0, 0, 0, .66), inset 0 2px 0 rgba(255, 226, 153, .18);
  --panel-texture: url("/poop-atlas/panel-texture.jpg?v=20260717-poop-v1");
  --grain-texture: url("/poop-atlas/fine-grain-texture.jpg?v=20260717-poop-v1");
  --top-drip: url("/poop-atlas/top-drip-strip.png?v=20260717-poop-v1");
  --bottom-sludge: url("/poop-atlas/bottom-sludge-strip.png?v=20260717-poop-v1");
  --blob-panel: polygon(2% 12%, 6% 5%, 17% 2%, 36% 1%, 55% 2%, 70% 0, 87% 2%, 97% 8%, 100% 19%, 99% 76%, 96% 94%, 86% 99%, 15% 100%, 5% 95%, 0 82%, 1% 38%);
  --blob-small: polygon(4% 18%, 11% 6%, 33% 0, 62% 2%, 86% 4%, 98% 16%, 100% 73%, 93% 94%, 71% 100%, 18% 98%, 3% 86%, 0 38%);
  font-family: "Arial Narrow", "Roboto Condensed", Impact, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 186, 65, .16), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(115, 53, 17, .62), transparent 34%),
    linear-gradient(180deg, #130704 0%, #080301 58%, #050201 100%);
  color: var(--ink);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: -2;
  background:
    linear-gradient(rgba(8, 3, 1, .18), rgba(8, 3, 1, .56)),
    url("/poop-ui-concept.png?v=20260717-poop-v1") center top / min(980px, 148vw) auto no-repeat;
  filter: saturate(1.28) contrast(1.08) blur(1.4px);
  opacity: .36;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 208, 126, .13), transparent 44%),
    var(--grain-texture) center / 680px auto repeat;
  mix-blend-mode: screen;
  opacity: .16;
  pointer-events: none;
}
button, input { font: inherit; }
button { border: 0; cursor: pointer; letter-spacing: 0; }

.pixel-reference {
  display: none;
}

.app-shell {
  width: min(100%, 1760px);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px calc(128px + env(safe-area-inset-bottom));
}

.topbar {
  position: relative;
  min-height: 172px;
  margin-bottom: 14px;
  padding: 14px 15px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 34px 30px 42px 28px / 30px 24px 38px 34px;
  background:
    linear-gradient(180deg, rgba(255, 212, 128, .12), transparent 28%),
    var(--panel-texture) center / cover,
    linear-gradient(150deg, rgba(78, 35, 12, .96), rgba(16, 7, 3, .99));
  box-shadow: var(--shadow);
  clip-path: var(--blob-panel);
  overflow: hidden;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 58px;
  background: var(--top-drip) center top / 104% 100% no-repeat;
  filter: saturate(1.16) contrast(1.12);
  opacity: .96;
  pointer-events: none;
}
.topbar::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -18px;
  width: 150px;
  height: 150px;
  background: url("/poop-atlas/corner-sludge.png?v=20260717-poop-v1") center / contain no-repeat;
  filter: saturate(1.16) contrast(1.08);
  opacity: .52;
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.brand > div {
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding-top: 44px;
}
.brand > div::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -4px;
  top: 34px;
  height: 82px;
  background: url("/poop-atlas/header-wordmark.png?v=20260717-poop-v1") left center / contain no-repeat;
  filter: saturate(1.08) contrast(1.05) drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
  pointer-events: none;
}
.brand-mark {
  width: 126px;
  height: 126px;
  border: 2px solid rgba(255, 220, 148, .46);
  border-radius: 30px 24px 32px 24px / 26px 30px 28px 30px;
  object-fit: cover;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .64),
    inset 0 2px 0 rgba(255, 255, 255, .24),
    0 0 0 7px rgba(36, 15, 6, .52);
  clip-path: polygon(5% 10%, 14% 3%, 82% 1%, 96% 10%, 99% 78%, 87% 96%, 14% 98%, 2% 84%);
}
.brand h1 {
  margin: 0;
  max-width: 260px;
  color: var(--cream);
  font-size: 32px;
  font-weight: 950;
  line-height: .92;
  letter-spacing: 0;
  text-shadow: 0 3px 0 #2a1106, 0 0 17px rgba(255, 188, 66, .28);
  opacity: 0;
}
.brand p {
  margin: 9px 0 0;
  color: #dfad62;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 0;
}

.status-pill {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  min-width: 122px;
  max-width: 142px;
  padding: 12px 28px 12px 14px;
  border: 1px solid rgba(204, 255, 94, .46);
  border-radius: 999px;
  color: #cfff4b;
  background:
    radial-gradient(circle at 86% 48%, #b8ff3d 0 8px, transparent 9px),
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .38), transparent 16%),
    linear-gradient(180deg, #3b3013, #120904);
  box-shadow: inset 0 2px 8px rgba(255, 246, 176, .18), 0 0 26px rgba(151, 255, 54, .18), 0 8px 18px rgba(0, 0, 0, .42);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 10px rgba(167, 238, 60, .45);
  white-space: nowrap;
}

main {
  display: block;
  min-width: 0;
  container: dashboard-main / inline-size;
}
.view { display: none; }
.view.active { display: grid; gap: 14px; }
.view-heading {
  display: grid;
  gap: 4px;
  margin: 6px 2px 0;
  padding: 0 6px;
}
.view-heading h2 {
  margin: 0;
  color: var(--cream);
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 0 #2b1207;
}
.view-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
}

.hero-card,
.metric,
.source-card,
.clip-card,
.system-card,
.attention-card {
  position: relative;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 221, 145, .12), transparent 31%),
    var(--panel-texture) center / cover,
    linear-gradient(145deg, rgba(63, 27, 9, .98), rgba(16, 7, 3, .99));
  box-shadow: var(--shadow);
  clip-path: var(--blob-panel);
  overflow: hidden;
}
.hero-card::before,
.metric::before,
.source-card::before,
.clip-card::before,
.system-card::before,
.attention-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 13% 9%, rgba(255, 237, 178, .32), transparent 5%),
    radial-gradient(circle at 82% 12%, rgba(255, 212, 121, .18), transparent 9%),
    var(--grain-texture) center / 520px auto repeat;
  mix-blend-mode: screen;
  opacity: .32;
  pointer-events: none;
}
.hero-card::after,
.source-card::after,
.clip-card::after,
.system-card::after,
.attention-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 54px;
  background: var(--top-drip) center top / 104% 100% no-repeat;
  opacity: .96;
  pointer-events: none;
}

.hero-card {
  min-height: 224px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding: 39px 20px 22px 18px;
}
.hero-medallion,
.hero-pile,
.attention-icon,
.source-orb,
.nav-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.hero-medallion {
  z-index: 1;
  width: 104px;
  height: 112px;
  align-self: start;
  background-image: url("/poop-atlas/today-medallion.png?v=20260717-poop-v1");
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .54));
}
.hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.hero-label {
  margin: 0 0 9px;
  color: #e2a650;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #261006;
}
.hero-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--cream);
  text-shadow: 0 4px 0 #271107, 0 0 18px rgba(255, 200, 80, .24);
}
.hero-count strong {
  font-size: 68px;
  font-weight: 950;
  line-height: .8;
}
.hero-count span {
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
}
.hero-card h2 {
  margin: 12px 0 0;
  color: #e7bb69;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero-card p {
  margin: 9px 0 0;
  color: var(--cream);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.32;
}
.hero-progress {
  margin-top: 18px;
}
.hero-pile {
  position: absolute;
  z-index: 0;
  right: 8px;
  bottom: 30px;
  width: 122px;
  height: 132px;
  background-image: url("/poop-atlas/hero-poop-pile.png?v=20260717-poop-v1");
  opacity: .86;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .58));
  pointer-events: none;
}
.attention-card {
  padding: 38px 20px 20px;
}
.attention-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 188, 76, .26);
}
.attention-icon {
  width: 92px;
  height: 92px;
  background-image: url("/poop-atlas/alert-medallion.png?v=20260717-poop-v1");
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .54));
}
.attention-card h3 {
  margin: 0;
  color: var(--cream);
  font-size: 31px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 3px 0 #271107;
}
.attention-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.attention-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 14px 0 0;
}
.attention-stats .stat {
  display: block;
  min-height: 74px;
  padding: 8px 4px 7px;
  text-align: center;
}
.attention-stats .stat::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}
.attention-stats .stat:nth-child(1)::before { background-image: url("/poop-atlas/stat-cpu.png?v=20260717-poop-v1"); }
.attention-stats .stat:nth-child(2)::before { background-image: url("/poop-atlas/stat-gpu.png?v=20260717-poop-v1"); }
.attention-stats .stat:nth-child(3)::before { background-image: url("/poop-atlas/stat-ram.png?v=20260717-poop-v1"); }
.attention-stats .stat:nth-child(4)::before { background-image: url("/poop-atlas/stat-down.png?v=20260717-poop-v1"); }
.attention-stats .stat strong {
  font-size: 15px;
}
.attention-stats .stat span {
  margin-top: 2px;
  font-size: 9px;
}

.source-card,
.clip-card,
.system-card {
  display: grid;
  gap: 14px;
  padding: 40px 18px 20px;
}
.source-card.featured {
  grid-template-columns: 106px minmax(0, 1fr);
  align-items: start;
}
.source-orb {
  position: relative;
  z-index: 1;
  width: 106px;
  height: 106px;
  margin-top: 5px;
  background-image: url("/poop-atlas/source-orb.png?v=20260717-poop-v1");
  filter: drop-shadow(0 13px 18px rgba(0, 0, 0, .58));
}
.source-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 13px;
  min-width: 0;
}
.card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.card-title { min-width: 0; }
.card-title h3,
.system-card h3,
.clip-card h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--cream);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 2px 0 #281107;
}
.card-title p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}
.badge {
  flex: 0 0 auto;
  max-width: 112px;
  padding: 8px 10px;
  border: 1px solid rgba(230, 255, 104, .22);
  border-radius: 999px;
  color: #cfff4b;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .32), transparent 18%),
    linear-gradient(180deg, #4a3515, #150904);
  box-shadow: inset 0 2px 0 rgba(255, 234, 156, .12), 0 0 15px rgba(151, 255, 54, .13);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}
.badge.warn { color: #ffe59f; border-color: rgba(255, 191, 57, .34); background: linear-gradient(180deg, #7d4314, #261006); }
.badge.bad { color: #2b0704; border-color: rgba(255, 83, 63, .52); background: linear-gradient(180deg, #ff9262, var(--red)); }
.badge.neutral { color: var(--cream); border-color: rgba(255, 196, 91, .28); background: linear-gradient(180deg, #643112, #211006); }

.stat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.stat {
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid rgba(255, 201, 109, .23);
  border-radius: 18px 14px 20px 14px / 14px 18px 14px 20px;
  background:
    linear-gradient(180deg, rgba(80, 34, 10, .76), rgba(12, 5, 2, .62)),
    var(--grain-texture) center / 260px auto;
  box-shadow: inset 0 2px 0 rgba(255, 224, 154, .11), 0 8px 18px rgba(0, 0, 0, .18);
  clip-path: var(--blob-small);
}
.stat strong {
  display: block;
  overflow: hidden;
  color: var(--cream);
  font-size: 19px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.22;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.metric {
  min-height: 94px;
  padding: 20px 14px 15px;
  clip-path: var(--blob-small);
}
.metric strong {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--cream);
  font-size: 31px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 3px 0 #271107;
}
.metric span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.item-list,
.system-stack {
  display: grid;
  gap: 12px;
}
.quality-row {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
}
.quality-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.bar {
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 199, 102, .26);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(8, 3, 1, .98), rgba(30, 13, 5, .94));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .58), 0 2px 0 rgba(255, 228, 151, .12);
}
.bar span {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .34), transparent 16%),
    linear-gradient(90deg, #6b3512, #b27218 52%, var(--green));
  box-shadow: inset 0 2px 3px rgba(255, 243, 184, .24), 0 0 14px rgba(167, 238, 60, .24);
}

.clip-card.pass { border-color: rgba(167, 238, 60, .48); }
.clip-card.blocked { border-color: rgba(255, 93, 108, .46); }
.system-card p,
.fine-print {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.42;
}

.bottom-nav {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(calc(100% - 20px), 540px);
  min-height: 96px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 28px 24px 30px 24px / 22px 30px 24px 30px;
  background:
    var(--top-drip) center top / 120% 58px no-repeat,
    var(--panel-texture) center / cover,
    linear-gradient(180deg, rgba(71, 31, 10, .98), rgba(13, 5, 2, .98));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .62), inset 0 2px 0 rgba(255, 226, 153, .16);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
  clip-path: polygon(2% 16%, 9% 3%, 24% 1%, 43% 2%, 58% 0, 78% 2%, 96% 9%, 100% 25%, 99% 78%, 94% 96%, 76% 100%, 23% 98%, 6% 94%, 0 78%);
}
.nav-button {
  position: relative;
  display: grid;
  grid-template-rows: 42px auto;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 80px;
  padding: 7px 4px 8px;
  border-left: 1px solid rgba(255, 193, 89, .18);
  color: #d7ad72;
  background:
    linear-gradient(180deg, #55240c, #0f0603),
    var(--grain-texture) center / 260px auto;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 #110603;
}
.nav-button:first-child { border-left: 0; border-radius: 22px 12px 18px 22px / 20px 14px 18px 22px; }
.nav-button:last-child { border-radius: 12px 22px 22px 14px / 14px 22px 22px 18px; }
.nav-icon {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .56));
}
.nav-icon-today { background-image: url("/poop-atlas/nav-today.png?v=20260717-poop-v1"); }
.nav-icon-clips { background-image: url("/poop-atlas/nav-clips.png?v=20260717-poop-v1"); }
.nav-icon-sources { background-image: url("/poop-atlas/nav-sources.png?v=20260717-poop-v1"); }
.nav-icon-system { background-image: url("/poop-atlas/nav-system.png?v=20260717-poop-v1"); }
.nav-button.active {
  color: #fff0bd;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 232, 134, .38), transparent 26%),
    linear-gradient(180deg, #ad5d1b, #3f1c09),
    var(--grain-texture) center / 260px auto;
  box-shadow: inset 0 0 0 2px rgba(255, 174, 39, .68), inset 0 2px 0 rgba(255, 231, 164, .22), 0 0 22px rgba(255, 176, 47, .28);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 112px;
  z-index: 20;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 15px;
  border-radius: 20px;
  color: #180904;
  background: var(--cream);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
  transition: .2s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 760px) {
  .app-shell {
    display: grid;
    grid-template-columns: clamp(190px, 17vw, 240px) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 28px);
    padding: clamp(20px, 2.2vw, 32px);
  }
  .topbar {
    grid-column: 1 / -1;
    min-height: 190px;
    margin-bottom: 0;
  }
  .brand {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 22px;
  }
  .brand-mark { width: 148px; height: 148px; }
  .brand h1 { max-width: none; font-size: 48px; }
  .brand p { font-size: 15px; }
  main { min-width: 0; }
  .bottom-nav {
    position: sticky;
    top: 20px;
    left: auto;
    bottom: auto;
    width: auto;
    min-height: 0;
    align-self: start;
    grid-row: 2;
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 4px;
    transform: none;
  }
  .nav-button {
    grid-template-columns: 46px 1fr;
    grid-template-rows: 1fr;
    justify-items: start;
    min-height: 70px;
    padding: 10px 13px;
    border-left: 0;
    border-top: 1px solid rgba(255, 193, 89, .18);
    text-align: left;
  }
  .nav-button:first-child { border-top: 0; }
  .view.active { grid-column: 2; }
  .hero-card {
    grid-template-columns: 138px minmax(0, 1fr);
    min-height: 260px;
    padding: 50px 34px 30px;
  }
  .hero-medallion { width: 138px; height: 148px; }
  .hero-count strong { font-size: 86px; }
  .hero-count span { font-size: 48px; }
  .hero-pile { width: 170px; height: 184px; right: 38px; bottom: 26px; }
  .metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .attention-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .source-card.featured {
    grid-column: 1 / -1;
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .source-orb { width: 150px; height: 150px; }
}

@media (min-width: 980px) {
  .view.active {
    align-items: start;
    gap: clamp(14px, 1.35vw, 24px);
  }

  #view-today.active {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
    grid-template-areas:
      "hero attention"
      "source source"
      "metrics metrics";
  }

  #today-summary { grid-area: hero; }
  #attention-list { grid-area: attention; }
  #current-source { grid-area: source; }
  #today-metrics { grid-area: metrics; align-self: start; }

  #today-summary,
  #attention-list,
  #current-source,
  #today-metrics {
    display: grid;
    min-width: 0;
  }

  #today-summary > *,
  #attention-list > *,
  #current-source > * {
    height: 100%;
  }

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

  .item-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  }
}

@media (min-width: 1280px) {
  .app-shell {
    grid-template-columns: clamp(210px, 14vw, 270px) minmax(0, 1fr);
    gap: clamp(22px, 2vw, 36px);
    padding: clamp(24px, 2vw, 40px);
  }

  .topbar {
    min-height: clamp(178px, 11vw, 210px);
  }

  #view-today.active {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    grid-template-areas:
      "hero attention"
      "source metrics";
  }

  .hero-card,
  .attention-card,
  .source-card,
  .metric {
    min-width: 0;
  }

  .hero-card,
  .attention-card {
    min-height: clamp(248px, 18vw, 312px);
  }

  #current-source .source-card.featured {
    min-height: 100%;
  }
}

@media (min-width: 1600px) {
  .app-shell {
    width: min(100%, 1840px);
    grid-template-columns: clamp(230px, 13vw, 300px) minmax(0, 1fr);
  }

  #view-today.active {
    grid-template-columns:
      minmax(420px, 1.1fr)
      minmax(360px, .95fr)
      minmax(420px, 1fr);
    grid-template-areas:
      "hero attention source"
      "metrics metrics source";
  }

  .brand h1 {
    font-size: clamp(48px, 3vw, 58px);
  }
}

@media (min-width: 1800px) {
  .app-shell {
    width: min(calc(100% - clamp(48px, 3vw, 96px)), 2320px);
  }
}

@supports (container-type: inline-size) {
  @media (min-width: 760px) {
    #view-today.active {
      grid-template-columns: 1fr;
      grid-template-areas:
        "hero"
        "attention"
        "source"
        "metrics";
    }
  }

  @container dashboard-main (min-width: 720px) {
    #view-today.active {
      grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
      grid-template-areas:
        "hero attention"
        "source source"
        "metrics metrics";
    }
  }

  @container dashboard-main (min-width: 980px) {
    #view-today.active {
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
      grid-template-areas:
        "hero attention"
        "source metrics";
    }

    .system-stack {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    }
  }

  @container dashboard-main (min-width: 1320px) {
    #view-today.active {
      grid-template-columns:
        minmax(420px, 1.1fr)
        minmax(360px, .95fr)
        minmax(420px, 1fr);
      grid-template-areas:
        "hero attention source"
        "metrics metrics source";
    }
  }

  @container dashboard-main (min-width: 1700px) {
    #view-today.active {
      grid-template-columns:
        minmax(520px, 1.05fr)
        minmax(420px, .9fr)
        minmax(520px, 1fr);
    }

    #today-metrics.metric-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .item-list {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    }
  }
}

@media (max-width: 420px) {
  .app-shell { padding-inline: 10px; }
  .topbar {
    min-height: 160px;
    padding: 12px;
  }
  .brand {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
  }
  .brand > div { padding-top: 48px; }
  .brand > div::before {
    top: 42px;
    height: 74px;
  }
  .brand-mark { width: 112px; height: 112px; }
  .brand h1 { font-size: 28px; }
  .brand p { font-size: 11px; }
  .status-pill {
    top: 18px;
    right: 16px;
    min-width: 114px;
    max-width: 124px;
    padding: 10px 25px 10px 12px;
    font-size: 10px;
  }
  .hero-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    min-height: 218px;
    padding: 39px 15px 22px;
  }
  .hero-medallion { width: 88px; height: 96px; }
  .hero-count strong { font-size: 58px; }
  .hero-count span { font-size: 31px; }
  .hero-card h2 { font-size: 19px; }
  .hero-card p { font-size: 12px; }
  .hero-pile { width: 106px; height: 116px; right: 0; bottom: 22px; opacity: .76; }
  .attention-card { padding: 36px 15px 18px; }
  .attention-hero { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
  .attention-icon { width: 74px; height: 74px; }
  .attention-card h3 { font-size: 25px; }
  .source-card.featured { grid-template-columns: 84px minmax(0, 1fr); }
  .source-orb { width: 84px; height: 84px; }
  .card-title h3,
  .system-card h3,
  .clip-card h3 { font-size: 19px; }
}

@media (max-width: 360px) {
  .brand { grid-template-columns: 96px minmax(0, 1fr); }
  .brand-mark { width: 96px; height: 96px; }
  .brand h1 { font-size: 24px; }
  .hero-card {
    grid-template-columns: 1fr;
  }
  .hero-medallion { display: none; }
  .attention-stats,
  .stat-grid,
  .metric-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body[data-view="today"] {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    background: #050201;
  }

  body[data-view="today"]::before,
  body[data-view="today"]::after {
    display: none;
  }

  body[data-view="today"] .pixel-reference {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100svh;
    background: #050201 url("/poop-ui-concept.png?v=20260717-poop-v1") center top / 100% 100% no-repeat;
    pointer-events: none;
  }

  body[data-view="today"] .app-shell {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100vw;
    height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body[data-view="today"] .topbar,
  body[data-view="today"] main {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  body[data-view="today"] .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    min-height: 96px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    transform: none;
    opacity: 0;
    pointer-events: auto;
  }

  body[data-view="today"] .nav-button {
    min-height: 96px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    color: transparent;
  }

  body[data-view="today"] .nav-button * {
    opacity: 0;
  }
}