*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --line: rgba(68, 102, 164, 0.2);
  --line-strong: rgba(255, 171, 53, 0.38);
  --text: #23314d;
  --muted: #596a89;
  --gold: #ffab35;
  --mint: #21c7a8;
  --coral: #ff7f61;
  --berry: #d85ad2;
  --sky: #57b9ff;
  --sun: #ffd54f;
  --leaf: #67ce67;
  --cream: #fff6dc;
  --paper: #fff9ef;
  --shadow: 0 24px 60px rgba(67, 81, 147, 0.18);
  --nav-h: 52px;
}

html {
  font-size: 15px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 181, 73, 0.72) rgba(241, 233, 216, 0.95);
}
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(241, 233, 216, 0.95); }
::-webkit-scrollbar-thumb { background: rgba(245, 181, 73, 0.72); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 181, 73, 0.95); }

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, #9fe2ff 0%, #b9e8ff 28%, #ffe89d 29%, #ffe89d 57%, #9ee17c 58%, #89d66b 100%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.95;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200'%3E%3Crect width='1600' height='1200' fill='none'/%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='180' cy='150' r='70' stroke='%23ffb51f' stroke-width='12'/%3E%3Cpath d='M180 50 L180 8 M180 292 L180 240 M80 150 L22 150 M338 150 L280 150 M108 84 L62 40 M252 216 L298 260 M252 84 L298 40 M108 216 L62 260' stroke='%23ff9a1f' stroke-width='10'/%3E%3Cpath d='M1040 180 C1090 120 1145 120 1195 180' stroke='%23ff5f6d' stroke-width='12'/%3E%3Cpath d='M1026 182 C1084 105 1152 105 1210 182' stroke='%23ffa533' stroke-width='12'/%3E%3Cpath d='M1012 184 C1077 92 1159 92 1224 184' stroke='%23ffd84f' stroke-width='12'/%3E%3Cpath d='M998 186 C1072 80 1164 80 1238 186' stroke='%2346cf7c' stroke-width='12'/%3E%3Cpath d='M984 188 C1066 68 1170 68 1252 188' stroke='%2354b8ff' stroke-width='12'/%3E%3Cpath d='M970 190 C1060 56 1176 56 1266 190' stroke='%23d85ad2' stroke-width='12'/%3E%3Cg stroke='%23ff6b6b' stroke-width='8'%3E%3Cpath d='M128 880 C150 830 200 830 220 880'/%3E%3Cpath d='M174 880 L174 945'/%3E%3Cpath d='M145 900 C167 880 183 880 203 900'/%3E%3C/g%3E%3Cg stroke='%23ffb938' stroke-width='8'%3E%3Cpath d='M264 912 C286 862 336 862 356 912'/%3E%3Cpath d='M310 912 L310 972'/%3E%3Cpath d='M282 932 C304 912 320 912 340 932'/%3E%3C/g%3E%3Cg stroke='%2346cf7c' stroke-width='8'%3E%3Cpath d='M1320 890 C1342 840 1392 840 1412 890'/%3E%3Cpath d='M1366 890 L1366 952'/%3E%3Cpath d='M1338 910 C1360 890 1376 890 1396 910'/%3E%3C/g%3E%3Cg stroke='%2354b8ff' stroke-width='8'%3E%3Cpath d='M1180 930 C1202 880 1252 880 1272 930'/%3E%3Cpath d='M1226 930 L1226 990'/%3E%3Cpath d='M1198 950 C1220 930 1236 930 1256 950'/%3E%3C/g%3E%3Cg stroke='%23516aa8' stroke-width='10'%3E%3Cpath d='M520 890 q45 -60 90 0 q45 -60 90 0'/%3E%3Cpath d='M550 876 q20 -38 42 0'/%3E%3Cpath d='M630 876 q20 -38 42 0'/%3E%3Ccircle cx='575' cy='904' r='6' fill='%23516aa8' stroke='none'/%3E%3Ccircle cx='655' cy='904' r='6' fill='%23516aa8' stroke='none'/%3E%3C/g%3E%3Cg stroke='%238b5cf6' stroke-width='9'%3E%3Cpath d='M860 920 q48 -54 96 0 q48 -54 96 0'/%3E%3Ccircle cx='880' cy='880' r='18'/%3E%3Ccircle cx='1040' cy='880' r='18'/%3E%3C/g%3E%3Cpath d='M0 890 C160 820 250 910 380 858 C470 820 560 885 655 850 C770 805 860 880 980 842 C1110 800 1220 882 1325 846 C1435 810 1510 858 1600 830 L1600 1200 L0 1200 Z' fill='%2370cf5d' stroke='%234cb648' stroke-width='10'/%3E%3Cpath d='M0 950 C140 900 250 980 375 932 C510 880 640 970 770 924 C910 875 1035 965 1185 918 C1320 875 1440 935 1600 900 L1600 1200 L0 1200 Z' fill='%235cc14d' stroke='%2341a93b' stroke-width='10'/%3E%3Cpath d='M1460 780 q28 -42 56 0 q28 -42 56 0' stroke='%23f08b6f' stroke-width='10'/%3E%3Cpath d='M1462 828 q26 -32 54 0 q26 -32 54 0' stroke='%23f08b6f' stroke-width='10'/%3E%3Cg stroke='%23ffffff' stroke-width='10'%3E%3Cpath d='M340 190 q30 -36 60 0 q28 -34 56 0 q30 -30 58 4'/%3E%3Cpath d='M1280 120 q30 -36 60 0 q28 -34 56 0 q30 -30 58 4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center top;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.45), transparent 12%),
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.32), transparent 10%),
    repeating-linear-gradient(12deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-9deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 22px);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; }

input, select, textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(68, 102, 164, 0.16);
  background: rgba(255, 253, 247, 0.98);
  color: var(--text);
  padding: 0.65rem 0.75rem;
  outline: none;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(72, 191, 174, 0.6);
  box-shadow: 0 0 0 3px rgba(72, 191, 174, 0.16);
}

/* ── Navigation bar ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 252, 247, 0.92);
  backdrop-filter: blur(14px);
}
.nav-inner {
  width: min(1100px, calc(100vw - 32px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-brand { display: flex; flex-direction: column; line-height: 1; gap: 0.15rem; }
.nav-eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); }
.nav-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.03em; }
.nav-subtitle { font-size: 0.68rem; color: var(--muted); font-style: italic; letter-spacing: 0.01em; }
.nav-actions { display: flex; gap: 0.55rem; align-items: center; }

/* Nav profile button */
.nav-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(72, 191, 174, 0.22);
  background: rgba(72, 191, 174, 0.12);
  color: #1d6a61;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  font-size: inherit;
  transition: background 150ms ease, border-color 150ms ease;
}
.nav-profile-btn:hover { background: rgba(72, 191, 174, 0.22); border-color: rgba(72, 191, 174, 0.4); }
.nav-avatar-wrap {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(72, 191, 174, 0.5), rgba(87, 185, 255, 0.5));
  font-size: 0.7rem; font-weight: 800; color: #1d6a61;
}
.nav-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Page layout ── */
.page-layout {
  width: min(1100px, calc(100vw - 32px));
  margin: 20px auto 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.feed-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feed-toolbar {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.feed-toolbar input { flex: 1; min-width: 200px; }
.feed-toolbar input[type="text"] { flex: 0 0 auto; width: 180px; min-width: 0; }
.feed-toolbar select { width: 180px; }
.feed-kicker-row { padding: 0 0.25rem; }
#feed-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--nav-h) + 12px);
}
.sidebar-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.85rem; line-height: 1.5; }

/* ── Panels ── */
.panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(255, 245, 225, 0.9));
  box-shadow: var(--shadow), inset 0 0 0 4px rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
}
.sidebar-stats-panel { background: linear-gradient(180deg, rgba(229, 247, 255, 0.92), rgba(206, 238, 255, 0.9)); }
.sidebar-spotlight-panel { background: linear-gradient(180deg, rgba(255, 235, 246, 0.92), rgba(255, 217, 234, 0.9)); }

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.panel-head h2 { font-size: 1rem; }
.panel-kicker, .strip-label, .meta-line { color: var(--muted); font-size: 0.82rem; }
.eyebrow {
  margin-bottom: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--gold);
}

/* ── Buttons ── */
.primary-btn, .ghost-btn { border-radius: 12px; padding: 0.65rem 0.9rem; font-weight: 700; }
.primary-btn { background: linear-gradient(135deg, #ffab35, #ff7f61); color: #6b2f06; box-shadow: 0 12px 24px rgba(255, 127, 97, 0.2); }
.ghost-btn { border: 1px solid rgba(68, 102, 164, 0.18); background: rgba(255, 252, 245, 0.92); color: var(--text); }
.danger-btn { border-color: rgba(255, 127, 97, 0.38); color: #9c4135; }
.small-btn { padding: 0.5rem 0.72rem; font-size: 0.88rem; }
.inline-error { min-height: 0; margin-top: 0.3rem; color: #c44b63; font-size: 0.88rem; }
.inline-error:empty { display: none; }
.actions-row, .auth-actions, .toolbar { display: flex; gap: 0.8rem; }

/* ── Stats ── */
.stats-grid { display: grid; gap: 0.6rem; }
.stats-grid-three { grid-template-columns: 1fr; }
.stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(68, 102, 164, 0.12);
  background: rgba(255, 252, 246, 0.98);
}
.stat-card-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.stat-card strong { font-size: 1.6rem; font-weight: 800; line-height: 1; white-space: nowrap; flex-shrink: 0; }
.stat-card small { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.accent-orange { border-left: 3px solid rgba(255, 171, 53, 0.7); }
.accent-orange strong { color: #c47800; }
.accent-cyan { border-left: 3px solid rgba(87, 185, 255, 0.7); }
.accent-cyan strong { color: #1a6fa8; }
.accent-green { border-left: 3px solid rgba(103, 206, 103, 0.7); }
.accent-green strong { color: #2a7a3a; }
.accent-slate { border-left: 3px solid rgba(216, 90, 210, 0.5); }
.accent-slate strong { color: #7a2a80; }
.summary-strips { display: grid; gap: 0.85rem; margin-top: 0.85rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }

/* ── Chips & tags ── */
.viewer-chip, .status-pill, .data-chip, .tag-chip { border-radius: 999px; padding: 0.4rem 0.7rem; }
.viewer-chip { border: 1px solid rgba(72, 191, 174, 0.22); background: rgba(72, 191, 174, 0.12); color: #1d6a61; font-weight: 700; }
.data-chip, .tag-chip { border: 1px solid rgba(68, 102, 164, 0.14); background: rgba(255, 252, 246, 0.98); color: var(--text); font-size: 0.82rem; }
.tag-chip.favorite-chip { border-color: rgba(255, 171, 53, 0.34); background: rgba(255, 236, 182, 0.98); color: #8b5805; }
.tag-chip.public-chip { border-color: rgba(87, 185, 255, 0.34); background: rgba(200, 232, 255, 0.98); color: #1a5280; }
.tag-chip.mood-golden { border-color: rgba(255, 193, 7, 0.4); background: rgba(255, 248, 200, 0.98); color: #7a5800; }
.tag-chip.mood-chaotic { border-color: rgba(255, 80, 80, 0.3); background: rgba(255, 220, 220, 0.98); color: #8b1a1a; }
.tag-chip.mood-sweet { border-color: rgba(255, 150, 200, 0.3); background: rgba(255, 230, 245, 0.98); color: #8b3060; }
.tag-chip.mood-legendary { border-color: rgba(130, 90, 200, 0.3); background: rgba(220, 210, 255, 0.98); color: #4a2080; }
.tag-chip.mood-hilarious { border-color: rgba(255, 180, 0, 0.3); background: rgba(255, 245, 180, 0.98); color: #7a5000; }
.tag-chip.mood-heartwarming { border-color: rgba(255, 120, 160, 0.3); background: rgba(255, 225, 235, 0.98); color: #8b2040; }
.tag-chip.mood-facepalm { border-color: rgba(150, 150, 150, 0.3); background: rgba(230, 230, 230, 0.98); color: #444; }
.tag-chip.mood-proud { border-color: rgba(80, 160, 80, 0.3); background: rgba(210, 240, 210, 0.98); color: #1a5a1a; }
.tag-chip.mood-custom { border-color: rgba(100,100,100,0.2); background: rgba(230,230,230,0.98); color: #555; }
.badge { padding: 0.35rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; background: rgba(100,100,100,0.12); color: #555; }
.badge.said { background: rgba(33, 199, 168, 0.18); color: #157465; }
.badge.did { background: rgba(255, 127, 97, 0.18); color: #9a4539; }
.badge.mixed { background: rgba(216, 90, 210, 0.18); color: #8b3f83; }
.badge.milestone { background: rgba(255, 193, 7, 0.22); color: #7a5800; }
.badge.oops { background: rgba(255, 80, 80, 0.18); color: #8b1a1a; }
.badge.wisdom { background: rgba(80, 130, 230, 0.18); color: #1a3f8b; }
.badge.art { background: rgba(120, 200, 100, 0.20); color: #2a6a10; }
.badge.bedtime { background: rgba(130, 90, 200, 0.18); color: #4a2080; }
.badge.custom { background: rgba(100,100,100,0.12); color: #555; }

/* ── Feed entries ── */
.stack-list { display: grid; gap: 10px; }
.spotlight-card, .list-item, .empty-state { border-radius: 20px; border: 1px solid rgba(68, 102, 164, 0.12); background: rgba(255, 252, 246, 0.95); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2); }
.spotlight-card { padding: 1rem; min-height: 180px; }
.spotlight-quote { margin: 0.7rem 0 0.85rem; font-family: Georgia, 'Palatino Linotype', serif; font-size: 1.1rem; line-height: 1.7; color: #6a4a27; white-space: pre-wrap; }
.spotlight-story, .list-item-sub { font-family: Georgia, 'Palatino Linotype', serif; font-size: 0.95rem; line-height: 1.8; color: var(--muted); white-space: pre-wrap; }
.list-item { padding: 0.9rem 1rem; }
.list-item-head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: start; }
.list-item-title { font-weight: 700; line-height: 1.4; }
.list-item-sub { margin-top: 0.45rem; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; }
.entry-actions { margin-top: 0.8rem; display: flex; gap: 0.65rem; }
.secondary-link { background: rgba(68,102,164,0.08); color: #1a7f73; padding: 0.3rem 0.85rem; border-radius: 99px; font-size: 0.8rem; font-weight: 600; border: 1px solid rgba(68,102,164,0.15); }
.secondary-link:hover { background: rgba(68,102,164,0.15); }
.empty-state { padding: 1rem; color: var(--muted); line-height: 1.6; }

/* ── Auth card (used inside auth modal) ── */
.auth-card {
  width: min(460px, calc(100vw - 32px));
  border-radius: 28px;
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.96), rgba(255, 236, 205, 0.96));
  box-shadow: var(--shadow), inset 0 0 0 4px rgba(255,255,255,0.24);
}
.auth-card h1 { font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -0.03em; }
.auth-copy { margin-top: 0.65rem; color: var(--muted); line-height: 1.6; font-size: 0.9rem; }
.auth-form { display: grid; gap: 0.8rem; margin-top: 1rem; }

/* ── Editor form ── */
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.config-grid label { display: flex; flex-direction: column; gap: 0.42rem; }
.config-grid label span { font-size: 0.82rem; color: var(--muted); }
.config-grid .wide { grid-column: 1 / -1; }
.checkbox-row { flex-direction: row !important; align-items: center; }
.checkbox-card {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(68, 102, 164, 0.16);
  border-radius: 16px;
  background: rgba(255, 253, 245, 0.96);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.checkbox-card:hover { transform: translateY(-1px); border-color: rgba(245, 181, 73, 0.24); }
.checkbox-card input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.check-indicator {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(75, 112, 156, 0.2);
  background: rgba(255, 255, 255, 0.98);
  margin-top: 0.12rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.check-copy strong { display: block; font-size: 0.94rem; color: var(--text); }
.check-copy small { display: block; margin-top: 0.18rem; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.checkbox-card input:checked + .check-indicator {
  border-color: rgba(245, 181, 73, 0.4);
  background: linear-gradient(180deg, rgba(245, 181, 73, 0.96), rgba(239, 127, 109, 0.95));
  box-shadow: 0 0 0 4px rgba(245, 181, 73, 0.14);
}
.checkbox-card input:checked + .check-indicator::after {
  content: '';
  display: block;
  width: 6px;
  height: 11px;
  margin: 3px 0 0 7px;
  border-right: 2px solid #5d3512;
  border-bottom: 2px solid #5d3512;
  transform: rotate(40deg);
}
.checkbox-card input:focus-visible + .check-indicator {
  box-shadow: 0 0 0 4px rgba(72, 191, 174, 0.16);
  border-color: rgba(72, 191, 174, 0.5);
}

/* ── Auth modal overlay ── */
#auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2800;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(89, 109, 138, 0.28);
  backdrop-filter: blur(10px);
}

/* ── Confirm overlay ── */
#confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  background: rgba(89, 109, 138, 0.24);
  backdrop-filter: blur(10px);
}
#confirm-overlay.active { display: flex; }
#confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  border-radius: 24px;
  padding: 1.35rem;
  border: 1px solid rgba(68, 102, 164, 0.16);
  background: linear-gradient(180deg, rgba(255, 249, 237, 0.96), rgba(255, 228, 201, 0.96));
  box-shadow: 0 30px 70px rgba(58, 79, 112, 0.2), inset 0 0 0 4px rgba(255,255,255,0.24);
}
.confirm-eyebrow { margin-bottom: 0.55rem; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; color: var(--gold); }
#confirm-title { font-size: 1.25rem; line-height: 1.3; }
#confirm-message { margin-top: 0.7rem; color: var(--muted); line-height: 1.7; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
#confirm-cancel, #confirm-ok { border-radius: 12px; padding: 0.7rem 1rem; font-weight: 700; }
#confirm-cancel { border: 1px solid rgba(75, 112, 156, 0.16); background: rgba(255, 249, 241, 0.96); color: var(--text); }
#confirm-ok { background: linear-gradient(135deg, #ff7f61, #ffab35); color: #5d3512; }

/* ── Editor overlay ── */
#editor-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2900;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(89, 109, 138, 0.28);
  backdrop-filter: blur(10px);
}
#editor-overlay.active { display: flex; }
#editor-dialog {
  width: min(960px, calc(100vw - 32px));
  max-height: min(90vh, 1100px);
  overflow: auto;
}
.editor-actions { margin-top: 1rem; align-items: center; }

/* ── Profile modal ── */
#profile-modal {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(89, 109, 138, 0.28);
  backdrop-filter: blur(10px);
}
.profile-card {
  width: min(420px, calc(100vw - 32px));
  max-height: min(90vh, 720px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.75rem !important;
}
.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.65rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}
.avatar-upload-wrap {
  position: relative;
  width: 72px; height: 72px;
  cursor: pointer;
}
.avatar-large {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.avatar-initials-large {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(72, 191, 174, 0.28), rgba(87, 185, 255, 0.28));
  border: 2px solid rgba(72, 191, 174, 0.3);
  font-size: 1.7rem;
  font-weight: 800;
  color: #1d6a61;
  letter-spacing: -0.03em;
}
.avatar-upload-hint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  cursor: pointer;
  transition: opacity 160ms ease;
}
.avatar-upload-wrap:hover .avatar-upload-hint { opacity: 1; }
#avatar-file-input { display: none; }
.profile-section { display: grid; gap: 0.5rem; padding-bottom: 0.15rem; }
.profile-section .actions-row { margin-top: 0.1rem; }
.profile-section-head {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.profile-field { display: flex; flex-direction: column; gap: 0.25rem; }
.profile-field > span { font-size: 0.82rem; color: var(--muted); }
.profile-field input[readonly] { background: rgba(240, 235, 225, 0.7); color: var(--muted); cursor: default; }
.profile-divider { height: 1px; background: var(--line); margin: 0.55rem 0; }
.profile-success { color: #2a7a3a !important; }

/* ── Kids panel ── */
.kids-panel { background: linear-gradient(180deg, rgba(236, 255, 237, 0.92), rgba(210, 248, 213, 0.9)); }
.kid-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--line);
}
.kid-row:last-child { border-bottom: none; }
.kid-name { flex: 1; font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-dob { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.kid-delete-btn {
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.18rem 0.38rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 120ms, background 120ms;
}
.kid-delete-btn:hover { color: #c44b63; background: rgba(196, 75, 99, 0.09); }
.kid-panel-empty { color: var(--muted); font-size: 0.86rem; padding: 0.3rem 0 0.6rem; }
.kid-add-form { display: flex; gap: 0.4rem; margin-top: 0.75rem; flex-wrap: wrap; }
.kid-add-form input[type="text"] { flex: 1; min-width: 90px; }
.kid-add-form input[type="date"] { width: 145px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .page-layout { grid-template-columns: 1fr; }
  #feed-sidebar { position: static; }
}

@media (max-width: 600px) {
  html { font-size: 14px; }

  /* Nav */
  .nav-inner { width: calc(100vw - 20px); gap: 0.5rem; }
  .nav-eyebrow { display: none; }
  .nav-subtitle { display: none; }
  .nav-title { font-size: 1rem; }
  .nav-actions { gap: 0.3rem; }
  /* Hide the display-name text in profile chip, show avatar only */
  #nav-viewer-name { display: none; }
  .nav-profile-btn { padding: 0.2rem; border-radius: 50%; }

  /* Page */
  .page-layout { width: calc(100vw - 16px); margin-top: 10px; gap: 12px; }

  /* Feed toolbar */
  .feed-toolbar { flex-direction: column; gap: 0.5rem; }
  .feed-toolbar input, .feed-toolbar select { width: 100%; min-width: 0; }

  /* Entry cards */
  .list-item-head { flex-direction: column; gap: 0.4rem; }
  .entry-actions { flex-wrap: wrap; gap: 0.4rem; }

  /* Stat cards — tighten a touch */
  .stat-card { padding: 0.6rem 0.8rem; }
  .stat-card strong { font-size: 1.4rem; }

  /* Buttons */
  .actions-row, .auth-actions { flex-wrap: wrap; }
  .config-grid { grid-template-columns: 1fr; }

  /* Auth card */
  .auth-card { padding: 1rem; border-radius: 20px; }

  /* Editor — near full-screen sheet */
  #editor-overlay { padding: 0; align-items: flex-end; }
  #editor-dialog {
    width: 100vw;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
  }

  /* Profile modal — full-width bottom sheet */
  #profile-modal { padding: 0; align-items: flex-end; }
  .profile-card {
    width: 100vw !important;
    max-height: 88vh;
    border-radius: 24px 24px 0 0 !important;
  }

  /* Confirm dialog */
  #confirm-dialog { width: calc(100vw - 24px); }
}

@media (max-width: 400px) {
  .nav-title { font-size: 0.9rem; }
  .small-btn { padding: 0.42rem 0.55rem; font-size: 0.82rem; }
  /* Stack confirm actions vertically */
  .confirm-actions { flex-direction: column-reverse; }
  #confirm-cancel, #confirm-ok { width: 100%; text-align: center; }
}