/* Variant: Inbox — an email client full of good news from projects. Light. */
:root {
  --bg: #f3f6fc; --surface: #ffffff; --muted: #e9eef8; --ink: #121a2e; --ink-2: #546078; --line: #dde4f0;
  --accent: #2f5cff; --accent-ink: #ffffff; --accent-soft: #e2e9ff; --green-soft: #ffe4ea; --amber-soft: #fff0d2;
  --night: #121a2e; --night-2: #1d2843;
  color-scheme: light;
}
.ib { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #ffffff; box-shadow: 0 40px 70px -40px rgba(18, 26, 46, 0.4); }
.ib-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; background: #f6f8fd; border-right: 1px solid var(--line); }
.ib-compose { width: 2.2rem; height: 2.2rem; margin-bottom: 6px; border-radius: 10px; background: var(--accent); }
.ib-side i { width: 1.4rem; height: 1.1rem; border-radius: 4px; background: #d5dcea; }
.ib-side i.is-on { background: #9db0ff; }
.ib-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ib-top span { padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--muted); font-size: 0.75rem; color: var(--ink-2); }
.ib ul { margin: 0; padding: 0; list-style: none; }
.ib li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.ib li.is-open { background: #eef2ff; box-shadow: inset 3px 0 0 var(--accent); }
.ib-av { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(135deg, #2f5cff, #8a5cff); color: #ffffff; font-weight: 700; }
.ib-m { display: grid; min-width: 0; line-height: 1.35; }
.ib-m b { font-size: 0.75rem; color: var(--ink-2); font-weight: 600; }
.ib-m strong { font-weight: 650; }
.ib-m small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib li em { font-style: normal; font-size: 0.6875rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .ib li { animation: ib-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .ib li:nth-child(2) { animation-delay: 0.15s; } .ib li:nth-child(3) { animation-delay: 0.3s; } .ib li:nth-child(4) { animation-delay: 0.45s; } @keyframes ib-in { from { opacity: 0; transform: translateY(-10px); } } }
.tile--dark .focus strong { color: #9db0ff; }
.product__visual--water { background: #e2e9ff; } .product__visual--jobs { background: #ffe4ea; } .product__visual--food { background: #fff0d2; }