/* Nestalbum theme: warm berry and amber, plus the family album screen in the phone mockup. */

:root {
  --bg: #fbf5f1;
  --surface: #ffffff;
  --surface-2: #f3e7e0;
  --ink: #23171a;
  --muted: #6a5a5e;
  --line: #eddcd4;
  --line-strong: #dcc5ba;
  --header-bg: rgba(251, 245, 241, .88);
  --primary: #7a2e45;
  --primary-2: #913a55;
  --primary-dark: #5a1f32;
  --primary-rgb: 122, 46, 69;
  --accent: #f0a93b;
  --accent-ink: #9a5d07;
  --accent-light: #f8cd7e;
  --accent-rgb: 240, 169, 59;
}

.screen { background: #fffaf7; }

/* Phone mockup: family album */
.child { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.child small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.1; }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 14px; overflow: hidden; }
.tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; color: rgba(255, 255, 255, .92); }
.tile .i { width: 20px; height: 20px; }
.tile .dur { position: absolute; right: 5px; bottom: 4px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .35); color: #fff; font-size: 9px; font-weight: 700; }
.t1 { background: linear-gradient(135deg, #f7c59f, #e9897e); }
.t2 { background: linear-gradient(135deg, #b9d8c2, #6fa58b); }
.t3 { background: linear-gradient(135deg, #f9e09a, #f0a93b); }
.t4 { background: linear-gradient(135deg, #c7c3ea, #8a84c9); }
.t5 { background: linear-gradient(135deg, #f4b8c6, #c9637f); }
.t6 { background: linear-gradient(135deg, #a9d3e6, #5f9fbf); }
.comment { display: flex; align-items: flex-start; gap: 8px; }
.comment p { margin: 0; }
.comment strong { display: block; font-size: 12px; color: var(--ink); }
.family { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.faces { display: flex; padding-left: 6px; }
.faces .avatar { margin-left: -6px; border: 2px solid #fff; width: 26px; height: 26px; font-size: 11px; }
.faces .avatar:nth-child(2) { background: #c9637f; color: #fff; }
.faces .avatar:nth-child(3) { background: #6fa58b; color: #fff; }
.faces .avatar:nth-child(4) { background: #8a84c9; color: #fff; }
.family span { font-size: 11.5px; font-weight: 700; color: var(--muted); }