/* =====================================================================
   Közös Szülői Napló – stíluslap
   Nyugodt, meleg semleges alap, két szülőszín (tompa kék / terrakotta),
   egy kiemelő szín (zsályazöld-petrol). Világos és sötét mód.
   ===================================================================== */

:root {
  color-scheme: light;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --bg: #f6f3ee;
  --bg-elev: #fbf9f6;
  --surface: #ffffff;
  --surface-2: #f3efe8;
  --surface-3: #ebe5db;
  --text: #2a2926;
  --text-2: #57534b;
  --text-3: #7d776d;
  --border: #e6e0d6;
  --border-strong: #d4ccbf;
  --overlay: rgba(32, 30, 27, 0.42);

  --apa: #3f70a6;
  --apa-strong: #335d8c;
  --apa-soft: #dde7f2;
  --apa-softer: #eef3f9;
  --apa-ink: #2d5480;
  --anya: #bf6545;
  --anya-strong: #9f4f33;
  --anya-soft: #f5e0d7;
  --anya-softer: #faefea;
  --anya-ink: #8f4429;

  --accent: #3c7a6d;
  --accent-hover: #336a5e;
  --accent-soft: #dcebe6;
  --accent-softer: #edf5f2;
  --accent-ink: #2b5f54;
  --on-accent: #ffffff;
  --badge-bg: #9f4f33;
  --badge-fg: #ffffff;

  --ok: #2e7d4f;
  --ok-soft: #e0f0e6;
  --warn: #9a6400;
  --warn-soft: #fbf0d9;
  --danger: #b03a32;
  --danger-soft: #f8e2df;
  --info: #3f70a6;
  --info-soft: #e3ecf6;

  --chart-1: #11876b;
  --chart-2: #c98500;
  --chart-3: #8e5fa8;
  --chart-grid: #ebe6de;
  --chart-axis: #cfc7ba;

  --shadow-sm: 0 1px 2px rgba(42, 41, 38, 0.05), 0 1px 3px rgba(42, 41, 38, 0.05);
  --shadow: 0 1px 2px rgba(42, 41, 38, 0.04), 0 6px 20px rgba(42, 41, 38, 0.06);
  --shadow-lg: 0 10px 40px rgba(42, 41, 38, 0.14);
  --ring: 0 0 0 3px rgba(60, 122, 109, 0.28);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --sidebar-w: 248px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --content-max: 1080px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #1b1a18;
  --bg-elev: #201f1c;
  --surface: #252421;
  --surface-2: #2d2b28;
  --surface-3: #36332f;
  --text: #ede8e0;
  --text-2: #c4bdb2;
  --text-3: #9b9488;
  --border: #38352f;
  --border-strong: #4a463f;
  --overlay: rgba(0, 0, 0, 0.6);

  --apa: #5f8fcb;
  --apa-strong: #7ea7da;
  --apa-soft: #273647;
  --apa-softer: #222c37;
  --apa-ink: #a9c6ea;
  --anya: #c9724f;
  --anya-strong: #dd8f6f;
  --anya-soft: #46302a;
  --anya-softer: #362824;
  --anya-ink: #f0b8a1;

  --accent: #6fb3a3;
  --accent-hover: #86c3b5;
  --accent-soft: #263d38;
  --accent-softer: #213330;
  --accent-ink: #9fd6c9;
  --on-accent: #10221e;
  --badge-bg: #e39a7c;
  --badge-fg: #2a1810;

  --ok: #6cc08f;
  --ok-soft: #22362a;
  --warn: #e3b25c;
  --warn-soft: #3b3122;
  --danger: #ec8a80;
  --danger-soft: #45292a;
  --info: #8db4e3;
  --info-soft: #253445;

  --chart-1: #1e9c7c;
  --chart-2: #b07a00;
  --chart-3: #a07bd0;
  --chart-grid: #34312c;
  --chart-axis: #4a463f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --ring: 0 0 0 3px rgba(111, 179, 163, 0.35);
}

/* ---------------------------------------------------------------------
   Alapok
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

::selection { background: var(--accent-soft); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.icon,
[data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
  flex-shrink: 0;
  vertical-align: middle;
}

svg.lucide { width: 18px; height: 18px; stroke-width: 1.9; flex-shrink: 0; }
.icon-sm svg.lucide, svg.lucide.icon-sm { width: 15px; height: 15px; }
.icon-lg svg.lucide, svg.lucide.icon-lg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------
   Betöltő képernyő
   --------------------------------------------------------------------- */
.splash {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  gap: 16px;
  color: var(--text-3);
}

.splash-inner { display: grid; justify-items: center; gap: 14px; }
.splash-logo { width: 56px; height: 56px; }

.spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   Elrendezés
   --------------------------------------------------------------------- */
.shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar { display: none; }

.main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.topbar.scrolled { border-bottom-color: var(--border); }

.topbar-title {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-back { margin-left: -8px; }
.topbar-actions { display: flex; align-items: center; gap: 4px; }

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

.brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  flex-shrink: 0;
}

.brand-mark svg { width: 18px; height: 18px; }

.view {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px 16px calc(var(--bottomnav-h) + 32px + env(safe-area-inset-bottom));
  animation: view-in 0.24s var(--ease);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  height: var(--bottomnav-h);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--border);
}
.bottom-nav a,
.bottom-nav .bn-more {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 550;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.15s;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .bn-more.active { color: var(--accent-ink); }
.bottom-nav .bn-more.active .nav-ico { background: var(--accent-soft); }

.me-btn-wrap {
  position: relative;
  display: grid;
  place-items: center;
  line-height: 0;
}
.me-btn-wrap .premium-head-badge {
  bottom: -8px;
  max-width: 52px;
  padding: 1px 4px;
  font-size: 0.55rem;
}
.me-btn-wrap .premium-head-badge svg { width: 8px; height: 8px; }
.me-btn { overflow: visible; }

.bottom-nav a .nav-ico,
.bottom-nav .bn-more .nav-ico {
  width: 46px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  transition: background 0.2s var(--ease);
}

.bottom-nav a.active { color: var(--accent-ink); }
.bottom-nav a.active .nav-ico { background: var(--accent-soft); }

.menu-tile { position: relative; }
.menu-tile .count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
}
.menu-tile .count.hidden { display: none; }

.nav-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 8px);
  min-width: 17px; height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

@media (min-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: 20px 14px;
    border-right: 1px solid var(--border);
    background: var(--bg-elev);
    overflow-y: auto;
  }

  .sidebar .brand-mini { padding: 4px 10px 22px; font-size: 1rem; }

  .side-nav { display: grid; gap: 2px; }
  .side-nav .nav-section {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    padding: 16px 12px 6px;
  }

  .side-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-weight: 550;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }

  .side-nav a:hover { background: var(--surface-2); color: var(--text); }
  .side-nav a.active { background: var(--accent-soft); color: var(--accent-ink); }

  .side-nav .count {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }

  .side-nav .nav-more { margin-top: 4px; }
  .side-nav .nav-more-sum {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-weight: 550;
    cursor: pointer;
    list-style: none;
  }
  .side-nav .nav-more-sum::-webkit-details-marker { display: none; }
  .side-nav .nav-more-sum:hover { background: var(--surface-2); color: var(--text-2); }
  .side-nav .nav-more-body { display: grid; gap: 2px; padding-left: 4px; }

  .sidebar-foot {
    margin-top: auto;
    padding-top: 16px;
    display: grid;
    gap: 8px;
  }

  .bottom-nav { display: none; }
  .mobile-only { display: none !important; }
  .view { padding: 12px 32px 48px; }
  .topbar { padding: 0 32px; }
}

@media (max-width: 899px) {
  .desktop-only { display: none !important; }
}

/* ---------------------------------------------------------------------
   Gombok
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.93rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.btn-soft:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--accent) 20%); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--surface); border-color: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
[data-theme='dark'] .btn-ok { color: #10221a; }
.btn-ok:hover { filter: brightness(1.05); }

.btn-sm { min-height: 34px; padding: 0 12px; font-size: 0.86rem; border-radius: 9px; }
.btn-xs { min-height: 28px; padding: 0 9px; font-size: 0.8rem; border-radius: 8px; gap: 5px; }
.btn-block { width: 100%; }

.icon-btn {
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .dot {
  position: absolute;
  top: 1px; right: -3px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  border: 2px solid var(--bg);
  box-sizing: content-box;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-row.end { justify-content: flex-end; }

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--bottomnav-h) + 18px + env(safe-area-inset-bottom));
  z-index: 35;
  width: 56px; height: 56px;
  border-radius: 18px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s;
}

.fab:hover { background: var(--accent-hover); }
.fab:active { transform: scale(0.95); }
.fab svg { width: 24px; height: 24px; }

@media (min-width: 900px) { .fab { display: none; } }

/* ---------------------------------------------------------------------
   Kártyák, szakaszok
   --------------------------------------------------------------------- */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 18px;
}

.page-head h1 { font-size: 1.6rem; }
.page-head .sub { color: var(--text-3); margin-top: 2px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.card + .card { margin-top: 14px; }
.card.flat { box-shadow: none; }
.card.pad-lg { padding: 22px; }
.card.tight { padding: 12px 14px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.card-head h2, .card-head h3 { display: flex; align-items: center; gap: 8px; }
.card-head .muted { font-size: 0.85rem; }

.section { margin-top: 26px; }
.section-title {
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 0 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid { display: grid; gap: 14px; }
.grid-2 { display: grid; gap: 14px; }
.grid-3 { display: grid; gap: 14px; }
.grid-4 { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stack { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.stack-lg { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }
.small { font-size: 0.85rem; }
.xsmall { font-size: 0.78rem; }
.strong { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }
.pre { white-space: pre-wrap; word-break: break-word; }
.center { text-align: center; }
.right { text-align: right; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 26px; }
.mb-2 { margin-bottom: 12px; }
.hidden { display: none !important; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.divider { height: 1px; background: var(--border); margin: 14px 0; border: 0; }

/* ---------------------------------------------------------------------
   Címkék, jelvények, avatárok
   --------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8rem;
  font-weight: 550;
  white-space: nowrap;
}

.chip .swatch { width: 8px; height: 8px; border-radius: 50%; }
.chip.apa { background: var(--apa-soft); color: var(--apa-ink); }
.chip.anya { background: var(--anya-soft); color: var(--anya-ink); }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip svg.lucide { width: 14px; height: 14px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
}

.badge svg.lucide { width: 13px; height: 13px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge.apa { background: var(--apa-soft); color: var(--apa-ink); }
.badge.anya { background: var(--anya-soft); color: var(--anya-ink); }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  background: var(--surface-3);
  color: var(--text-2);
}

.avatar.sm { width: 26px; height: 26px; font-size: 0.72rem; }
.avatar.lg { width: 48px; height: 48px; font-size: 1.05rem; }
.avatar.apa { background: var(--apa-soft); color: var(--apa-ink); }
.avatar.anya { background: var(--anya-soft); color: var(--anya-ink); }

.dot-role { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-role.apa { background: var(--apa); }
.dot-role.anya { background: var(--anya); }
.dot-role.shared { background: linear-gradient(135deg, var(--apa) 50%, var(--anya) 50%); }

.read-receipt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--text-3);
}

.read-receipt svg.lucide { width: 14px; height: 14px; }
.read-receipt.seen { color: var(--ok); }

/* ---------------------------------------------------------------------
   Űrlapok
   --------------------------------------------------------------------- */
.form { display: grid; gap: 14px; }
.form-row { display: grid; gap: 12px; }

@media (min-width: 360px) {
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 560px) {
  .form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
}

.field .req { color: var(--anya); margin-left: 2px; }
.field .help { font-size: 0.78rem; color: var(--text-3); }

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 16px; /* iOS: ne nagyítson rá */
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d776d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 0.8; }
.input[type='date'], .input[type='time'], .input[type='month'] { min-height: 44px; }
.input.sm, .select.sm { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.select.sm { padding-right: 32px; background-position: right 9px center; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.93rem;
  line-height: 1.4;
}

.check input {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.switch .track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s var(--ease);
}

.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

.form-error {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.88rem;
  font-weight: 550;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.form-note {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-softer);
  color: var(--text-2);
  font-size: 0.86rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.form-note svg.lucide { color: var(--accent-ink); margin-top: 1px; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.stepper button {
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-2);
  display: grid; place-items: center;
}

.stepper button:hover { background: var(--surface-2); }
.stepper output {
  min-width: 34px;
  text-align: center;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.range { width: 100%; accent-color: var(--accent); }

.choice-group { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  position: relative;
  display: inline-flex;
}

.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 550;
  transition: all 0.15s;
  cursor: pointer;
}

.choice input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.choice input:focus-visible + span { box-shadow: var(--ring); }
.choice.apa input:checked + span { background: var(--apa-soft); border-color: var(--apa); color: var(--apa-ink); }
.choice.anya input:checked + span { background: var(--anya-soft); border-color: var(--anya); color: var(--anya-ink); }

/* ---------------------------------------------------------------------
   Fülek, szegmentált vezérlő
   --------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.tabs::-webkit-scrollbar { display: none; }

.tabs a, .tabs button {
  flex-shrink: 0;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text-3);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tabs .active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabs .count {
  font-size: 0.72rem;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 18px;
}

.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
  gap: 2px;
}

.seg button {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------------
   Listák
   --------------------------------------------------------------------- */
.list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
  min-width: 0;
}

.list-item:last-child { border-bottom: none; }
a.list-item:hover, button.list-item:hover { background: var(--bg-elev); text-decoration: none; }
button.list-item { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.list-item .li-sub { color: var(--text-3); font-size: 0.84rem; margin-top: 1px; }
.list-item .li-end { text-align: right; flex-shrink: 0; }
.list-item.unread .li-title::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--anya);
  flex-shrink: 0;
}

.li-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-2);
  flex-shrink: 0;
}

.li-icon.accent { background: var(--accent-soft); color: var(--accent-ink); }
.li-icon.apa { background: var(--apa-soft); color: var(--apa-ink); }
.li-icon.anya { background: var(--anya-soft); color: var(--anya-ink); }
.li-icon.warn { background: var(--warn-soft); color: var(--warn); }
.li-icon.danger { background: var(--danger-soft); color: var(--danger); }
.li-icon.ok { background: var(--ok-soft); color: var(--ok); }
.li-icon.info { background: var(--info-soft); color: var(--info); }

.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 14px; font-size: 0.93rem; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; word-break: break-word; }

/* ---------------------------------------------------------------------
   Üres állapot, betöltés, hiba
   --------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-3);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.empty .empty-ico {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--accent-softer);
  color: var(--accent-ink);
  margin-bottom: 6px;
}

.empty .empty-ico svg { width: 26px; height: 26px; }
.empty h3 { color: var(--text); font-size: 1.02rem; }
.empty p { max-width: 380px; font-size: 0.92rem; }
.empty .btn { margin-top: 10px; }

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear;
}

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.sk-line { height: 14px; margin: 8px 0; }
.sk-card { height: 96px; border-radius: var(--radius); margin-bottom: 12px; }

.error-box {
  border-radius: var(--radius);
  padding: 22px;
  background: var(--danger-soft);
  color: var(--danger);
  display: grid;
  gap: 10px;
  justify-items: start;
}

.offline-banner {
  position: sticky;
  top: calc(var(--topbar-h) + env(safe-area-inset-top));
  z-index: 25;
  margin: 0 -16px 10px;
  padding: 8px 16px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------------------------------
   Toast értesítések
   --------------------------------------------------------------------- */
.toasts {
  position: fixed;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + 20px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  width: min(92vw, 420px);
  pointer-events: none;
}

@media (min-width: 900px) { .toasts { bottom: 28px; } }

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  font-weight: 550;
  animation: toast-in 0.28s var(--ease);
}

.toast.error { background: var(--danger); color: #fff; }
.toast.ok svg.lucide { color: var(--ok-soft); }
[data-theme='dark'] .toast.error { color: #2a1010; }
.toast.out { animation: toast-out 0.22s var(--ease) forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------------
   Párbeszédablak (mobilon alsó lap)
   --------------------------------------------------------------------- */
dialog.modal {
  border: none;
  padding: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--text);
}

dialog.modal::backdrop { background: transparent; }

.modal-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--overlay);
  animation: fade-in 0.2s var(--ease);
}

.modal-panel {
  width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  animation: sheet-in 0.3s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}

.modal-panel::before {
  content: '';
  width: 40px; height: 4px;
  border-radius: 4px;
  background: var(--border-strong);
  margin: 8px auto 0;
  flex-shrink: 0;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 6px 20px;
}

.modal-head h2 { flex: 1; font-size: 1.12rem; }
.modal-body { padding: 8px 20px 18px; overflow-y: auto; overscroll-behavior: contain; }
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.modal-foot .btn { flex: 1; }

@media (min-width: 640px) {
  .modal-wrap { align-items: center; padding: 24px; }
  .modal-panel { max-width: 560px; border-radius: var(--radius-lg); animation: pop-in 0.22s var(--ease); }
  .modal-panel.wide { max-width: 760px; }
  .modal-panel::before { display: none; }
  .modal-head { padding: 18px 16px 6px 22px; }
  .modal-body { padding: 8px 22px 20px; }
  .modal-foot { padding: 14px 22px 18px; }
  .modal-foot .btn { flex: 0 0 auto; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------------
   Menü (Több)
   --------------------------------------------------------------------- */
.menu-sheet { display: grid; gap: 12px; }
.menu-sec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.menu-cat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.menu-cat-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}
.menu-cat-sum::-webkit-details-marker { display: none; }
.menu-cat-title { flex: 1; text-align: left; }
.menu-cat-count {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.menu-cat-chev {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  transition: transform 0.2s var(--ease);
}
.menu-cat[open] .menu-cat-chev { transform: rotate(180deg); }
.menu-cat .menu-grid {
  padding: 0 10px 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.menu-grid-sm { gap: 8px; }
.menu-grid-sm .menu-tile { padding: 12px 6px; font-size: 0.8rem; }
.menu-profile { padding-top: 4px; border-top: 1px solid var(--border); }

.menu-tile {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.menu-tile:hover { background: var(--surface-3); text-decoration: none; }
.menu-tile .li-icon { background: var(--surface); }

/* ---------------------------------------------------------------------
   Belépés / beállítás képernyők
   --------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(1200px 500px at 0% 0%, var(--apa-softer), transparent 60%),
    radial-gradient(1000px 500px at 100% 100%, var(--anya-softer), transparent 60%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px 24px;
  animation: pop-in 0.3s var(--ease);
}

.auth-card .brand-mini { justify-content: center; margin-bottom: 18px; font-size: 1.05rem; }
.auth-card h1 { text-align: center; font-size: 1.35rem; }
.auth-card .lead { text-align: center; color: var(--text-3); margin: 6px 0 22px; font-size: 0.93rem; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 0.82rem; color: var(--text-3); }

.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-pick label { position: relative; }
.role-pick input { position: absolute; opacity: 0; }
.role-pick span {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border-strong);
  cursor: pointer;
  font-weight: 650;
  transition: all 0.15s;
}

.role-pick .apa input:checked + span { border-color: var(--apa); background: var(--apa-softer); color: var(--apa-ink); }
.role-pick .anya input:checked + span { border-color: var(--anya); background: var(--anya-softer); color: var(--anya-ink); }
.role-pick input:focus-visible + span { box-shadow: var(--ring); }

/* ---------------------------------------------------------------------
   Kezdőlap
   --------------------------------------------------------------------- */
.greeting { margin: 10px 0 18px; }
.greeting h1 { font-size: 1.55rem; }
.greeting p { color: var(--text-3); margin-top: 2px; }

.today-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.today-card.apa { background: linear-gradient(135deg, var(--apa-soft), var(--apa-softer) 70%); border-color: color-mix(in srgb, var(--apa) 25%, transparent); }
.today-card.anya { background: linear-gradient(135deg, var(--anya-soft), var(--anya-softer) 70%); border-color: color-mix(in srgb, var(--anya) 25%, transparent); }
.today-card.shared { background: linear-gradient(135deg, var(--apa-soft) 0 50%, var(--anya-soft) 50% 100%); }

.today-card .label { font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.today-card .who { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 10px; }
.today-card.apa .who { color: var(--apa-ink); }
.today-card.anya .who { color: var(--anya-ink); }
.today-card .kids { display: flex; flex-wrap: wrap; gap: 6px; }
.today-card .kids .chip { background: color-mix(in srgb, var(--surface) 75%, transparent); }
.today-card .deco {
  position: absolute;
  right: -20px; bottom: -28px;
  width: 140px; height: 140px;
  opacity: 0.12;
  color: var(--text);
}

.today-card .deco svg { width: 100%; height: 100%; }

.handover-card {
  display: flex;
  gap: 14px;
  align-items: center;
}

.handover-when { font-size: 1.15rem; font-weight: 700; }
.handover-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.stat-tile {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}

a.stat-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.stat-tile .st-top { display: flex; align-items: center; justify-content: space-between; color: var(--text-3); font-size: 0.8rem; font-weight: 600; }
.stat-tile .st-val { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-tile .st-sub { font-size: 0.78rem; color: var(--text-3); }
.stat-tile.alert .st-val { color: var(--anya-ink); }

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.week-day {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 2px;
  border-radius: 12px;
  font-size: 0.75rem;
  color: var(--text-2);
  background: var(--surface-2);
  position: relative;
}

.week-day b { font-size: 1rem; color: var(--text); }
.week-day.apa { background: var(--apa-soft); }
.week-day.anya { background: var(--anya-soft); }
.week-day.shared { background: repeating-linear-gradient(135deg, var(--apa-soft) 0 6px, var(--anya-soft) 6px 12px); }
.week-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.week-day .ho { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); }

.setup-steps { display: grid; gap: 8px; }
.setup-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: inherit; text-decoration: none; }
.setup-step:hover { text-decoration: none; background: var(--surface-3); }
.setup-step.done { opacity: 0.6; }
.setup-step .tick { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border-strong); flex-shrink: 0; }
.setup-step.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ---------------------------------------------------------------------
   Naptár
   --------------------------------------------------------------------- */
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cal-toolbar .cal-title { font-size: 1.2rem; font-weight: 700; min-width: 150px; }
.cal-nav { display: inline-flex; gap: 2px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--text-2); margin: 10px 2px 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.legend i.apa { background: var(--apa-soft); box-shadow: inset 0 0 0 1.5px var(--apa); }
.legend i.anya { background: var(--anya-soft); box-shadow: inset 0 0 0 1.5px var(--anya); }
.legend i.shared { background: repeating-linear-gradient(135deg, var(--apa-soft) 0 3px, var(--anya-soft) 3px 6px); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.legend i.handover { background: linear-gradient(135deg, var(--apa-soft) 50%, var(--anya-soft) 50%); box-shadow: inset 0 0 0 1.5px var(--border-strong); }

.cal-month {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.cal-weekdays, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekdays div {
  padding: 8px 4px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}

.cal-cell {
  position: relative;
  min-height: 62px;
  padding: 5px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  border-top: 0;
  border-left: 0;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  transition: filter 0.15s;
}

.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { filter: brightness(0.97); }
[data-theme='dark'] .cal-cell:hover { filter: brightness(1.12); }
.cal-cell.out { opacity: 0.45; }
.cal-cell.apa { background: var(--apa-softer); }
.cal-cell.anya { background: var(--anya-softer); }
.cal-cell.apa .cal-bar { background: var(--apa); }
.cal-cell.anya .cal-bar { background: var(--anya); }
.cal-cell.shared { background: repeating-linear-gradient(135deg, var(--apa-softer) 0 7px, var(--anya-softer) 7px 14px); }
.cal-cell.shared .cal-bar { background: linear-gradient(90deg, var(--apa) 50%, var(--anya) 50%); }
.cal-cell.handover.from-apa.to-anya, .cal-cell.handover.from-apa.to-shared { background: linear-gradient(135deg, var(--apa-softer) 0 50%, var(--anya-softer) 50% 100%); }
.cal-cell.handover.from-anya.to-apa, .cal-cell.handover.from-anya.to-shared { background: linear-gradient(135deg, var(--anya-softer) 0 50%, var(--apa-softer) 50% 100%); }

.cal-bar { height: 3px; border-radius: 3px; background: transparent; width: 100%; }
.cal-num {
  font-weight: 650;
  font-size: 0.85rem;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.cal-cell.today .cal-num { background: var(--accent); color: var(--on-accent); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.pending::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--surface);
}

.cal-marks { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cal-ev {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-2);
}

.cal-label {
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-head { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-width: 0; }
.cal-ho { color: var(--text-2); display: inline-flex; }
.cal-ho svg.lucide { width: 13px; height: 13px; }

@media (min-width: 720px) {
  .cal-cell { min-height: 104px; padding: 7px; }
  .cal-label { font-size: 0.72rem; }
  .cal-ev-full {
    display: block;
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 1px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid var(--ev-color, var(--text-3));
  }
  .cal-ev { display: none; }
}

@media (max-width: 719px) {
  .cal-ho svg.lucide { width: 11px; height: 11px; }
  .cal-num { width: 22px; height: 22px; font-size: 0.8rem; }
  .cal-cell { padding: 4px 3px; }
  .cal-ev-full { display: none; }
  .cal-label.hide-sm { display: none; }
}

.ev-orvos { --ev-color: #c0504d; }
.ev-ovoda { --ev-color: #3c7a6d; }
.ev-iskola { --ev-color: #2f6f9f; }
.ev-szuletesnap { --ev-color: #c98500; }
.ev-kulonora { --ev-color: #8e5fa8; }
.ev-sport { --ev-color: #2e7d4f; }
.ev-program { --ev-color: #b06a2c; }
.ev-egyeb { --ev-color: #7d776d; }
.cal-ev.ev-orvos, .cal-ev.ev-ovoda, .cal-ev.ev-iskola, .cal-ev.ev-szuletesnap, .cal-ev.ev-kulonora, .cal-ev.ev-sport, .cal-ev.ev-program, .cal-ev.ev-egyeb { background: var(--ev-color); }

.ev-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ev-color);
  background: color-mix(in srgb, var(--ev-color) 14%, var(--surface));
}

.cal-week { display: grid; gap: 10px; }
.week-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border-strong);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.week-row.apa { border-left-color: var(--apa); }
.week-row.anya { border-left-color: var(--anya); }
.week-row.shared { border-left-color: var(--accent); }
.week-row.today { box-shadow: var(--ring); }
.week-row .wr-date { display: grid; align-content: start; }
.week-row .wr-date b { font-size: 1.4rem; line-height: 1.1; }
.week-row .wr-date span { font-size: 0.78rem; color: var(--text-3); text-transform: capitalize; }
.week-row .wr-body { display: grid; gap: 6px; min-width: 0; }

.agenda-group { margin-bottom: 18px; }
.agenda-head { font-weight: 650; font-size: 0.86rem; color: var(--text-3); margin: 0 2px 8px; }
.run-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.run-pill.apa { background: var(--apa-soft); color: var(--apa-ink); }
.run-pill.anya { background: var(--anya-soft); color: var(--anya-ink); }
.run-pill.shared { background: repeating-linear-gradient(135deg, var(--apa-soft) 0 8px, var(--anya-soft) 8px 16px); }
.run-pill.none { background: var(--surface-2); color: var(--text-3); }

.seq-editor { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.seq-day {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 2px;
  font-size: 0.74rem;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
}

.seq-day.apa { background: var(--apa-soft); color: var(--apa-ink); border-color: var(--apa); }
.seq-day.anya { background: var(--anya-soft); color: var(--anya-ink); border-color: var(--anya); }
.seq-day.shared { background: repeating-linear-gradient(135deg, var(--apa-soft) 0 5px, var(--anya-soft) 5px 10px); color: var(--text); }

.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-cal div { height: 22px; border-radius: 5px; font-size: 0.66rem; display: grid; place-items: center; color: var(--text-2); background: var(--surface-2); }
.mini-cal div.apa { background: var(--apa-soft); color: var(--apa-ink); }
.mini-cal div.anya { background: var(--anya-soft); color: var(--anya-ink); }
.mini-cal div.shared { background: repeating-linear-gradient(135deg, var(--apa-soft) 0 4px, var(--anya-soft) 4px 8px); }
.mini-cal .wd { background: none; font-weight: 650; color: var(--text-3); }

.swap-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }

/* Gondozási arány sáv */
.share-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  gap: 2px;
  background: var(--surface);
}

.share-bar span { display: block; height: 100%; }
.share-bar span:first-child { border-radius: 7px 0 0 7px; }
.share-bar span:last-child { border-radius: 0 7px 7px 0; }
.share-bar .apa { background: var(--apa); }
.share-bar .anya { background: var(--anya); }
.share-bar .shared { background: repeating-linear-gradient(135deg, var(--apa) 0 4px, var(--anya) 4px 8px); }

/* ---------------------------------------------------------------------
   Napló
   --------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.filters .input, .filters .select { width: auto; flex: 1 1 140px; min-height: 40px; }
.search-input { position: relative; flex: 2 1 220px; }
.search-input svg.lucide { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-input .input { padding-left: 38px; width: 100%; }

.entry-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
  border-left: 4px solid var(--border-strong);
}

.entry-card + .entry-card { margin-top: 12px; }
.entry-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.entry-card.apa { border-left-color: var(--apa); }
.entry-card.anya { border-left-color: var(--anya); }
.entry-card .ec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-3); }
.entry-card .ec-title { font-weight: 650; font-size: 1.02rem; margin: 6px 0 4px; }
.entry-card .ec-body { color: var(--text-2); font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entry-card .ec-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 0.8rem; color: var(--text-3); }
.entry-card .ec-foot span { display: inline-flex; align-items: center; gap: 4px; }
.entry-card .ec-foot svg.lucide { width: 14px; height: 14px; }

.thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.thumbs img, .thumbs .file-thumb {
  width: 64px; height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.thumbs .file-thumb { display: grid; place-items: center; color: var(--text-3); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gallery a { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery .file-tile { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-size: 0.76rem; color: var(--text-2); gap: 4px; }

.child-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.child-section + .child-section { margin-top: 14px; }
.child-section > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  font-weight: 650;
}

.child-section .cs-body { padding: 14px 16px; display: grid; gap: 14px; }
.cs-group { display: grid; gap: 8px; }
.cs-group > .cs-title { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 0.9rem; color: var(--text-2); }
.cs-group > .cs-title svg.lucide { color: var(--accent-ink); }

.potty-steppers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.potty-steppers .ps { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.86rem; font-weight: 550; }

.mood-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.mood-pick label { position: relative; }
.mood-pick input { position: absolute; opacity: 0; }
.mood-pick span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.86rem; cursor: pointer; background: var(--surface); }
.mood-pick input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.mood-pick input:focus-visible + span { box-shadow: var(--ring); }

.med-row { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr auto; gap: 6px; align-items: center; }

.detail-block { display: grid; gap: 4px; }
.detail-block .db-label { font-size: 0.78rem; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; }
.detail-block .db-label svg.lucide { width: 14px; height: 14px; }

/* Hozzászólások */
.comments { display: grid; gap: 12px; }
.comment { display: flex; gap: 10px; }
.comment .c-body { flex: 1; min-width: 0; background: var(--surface-2); border-radius: 4px var(--radius) var(--radius) var(--radius); padding: 10px 12px; }
.comment .c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-3); margin-bottom: 3px; }
.comment .c-head strong { color: var(--text); font-size: 0.86rem; }
.comment .c-actions { display: flex; gap: 10px; margin-top: 6px; font-size: 0.8rem; }
.comment .c-actions button { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0; font: inherit; font-weight: 600; }
.comment .c-actions button:hover { color: var(--accent-ink); }
.comment.deleted .c-body { font-style: italic; color: var(--text-3); }
.replies { margin-left: 44px; display: grid; gap: 10px; margin-top: 10px; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; }
.comment-form .textarea { min-height: 44px; height: 44px; }

/* ---------------------------------------------------------------------
   Üzenőfal
   --------------------------------------------------------------------- */
.topic-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 14px; }
.topic-chips::-webkit-scrollbar { display: none; }
.topic-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
}

.topic-chip:hover { text-decoration: none; background: var(--surface-2); }
.topic-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.topic-chip .count { background: var(--badge-bg); color: var(--badge-fg); border-radius: 999px; font-size: 0.7rem; padding: 0 6px; line-height: 18px; }

.thread-item .li-sub { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.msg-list { display: grid; gap: 12px; }
.msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--border-strong);
}

.msg.apa { border-left-color: var(--apa); }
.msg.anya { border-left-color: var(--anya); }
.msg.mine { background: var(--bg-elev); }
.msg.pinned { box-shadow: 0 0 0 1.5px var(--warn), var(--shadow-sm); }
.msg.deleted { background: var(--surface-2); color: var(--text-3); font-style: italic; }
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 0.82rem; color: var(--text-3); }
.msg-head strong { color: var(--text); font-size: 0.9rem; }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-foot { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin-top: 10px; }
.msg-foot .link-btn { font-size: 0.8rem; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-3);
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.link-btn:hover { color: var(--accent-ink); }
.link-btn svg.lucide { width: 14px; height: 14px; }

.composer {
  position: sticky;
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 8px);
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  z-index: 5;
}

@media (min-width: 900px) { .composer { bottom: 16px; } }
.composer .textarea { border: none; box-shadow: none; min-height: 60px; padding: 6px 8px; }
.composer .textarea:focus { box-shadow: none; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.composer-foot .switch { font-size: 0.82rem; color: var(--text-2); }

.tone-flag { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 2px; font-weight: 600; }
.tone-list { display: grid; gap: 10px; }
.tone-item { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.9rem; }
.tone-item b { color: var(--warn); }
.tone-preview { padding: 12px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; }

/* Megállapodások */
.agreement {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.agreement + .agreement { margin-top: 12px; }
.agreement.pending { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: linear-gradient(0deg, var(--surface), var(--surface)) padding-box; }
.agreement.inactive { opacity: 0.72; }
.agreement h3 { font-size: 1.02rem; }
.agreement .ag-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-3); margin-top: 10px; }
.agreement .ag-meta span { display: inline-flex; align-items: center; gap: 5px; }
.agreement .ag-meta svg.lucide { width: 14px; height: 14px; }
.agreement .ag-body { margin-top: 8px; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }

/* ---------------------------------------------------------------------
   Költségek
   --------------------------------------------------------------------- */
.month-nav { display: inline-flex; align-items: center; gap: 4px; }
.month-nav .mn-title { min-width: 150px; text-align: center; font-weight: 700; }

.balance-card {
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
}

.balance-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.balance-amount { font-size: 2rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.balance-label { color: var(--text-2); font-weight: 550; }
.balance-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.balance-split div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.balance-split span { display: block; font-size: 0.76rem; color: var(--text-3); font-weight: 600; }
.balance-split b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.settled-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 650; }

.exp-item .li-title .amt { margin-left: auto; }
.amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.split-preview { display: flex; justify-content: space-between; font-size: 0.84rem; color: var(--text-2); }

/* Diagramok */
.chart { width: 100%; }
.hbar-list { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 0.86rem; position: relative; }
.hbar .hb-label { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .hb-track { height: 14px; display: flex; align-items: center; }
.hbar .hb-fill { height: 14px; border-radius: 0 4px 4px 0; background: var(--chart-1); min-width: 2px; transition: width 0.5s var(--ease); }
.hbar .hb-val { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.hbar:hover .hb-fill { filter: brightness(1.08); }

.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg text { fill: var(--text-3); font-size: 11px; font-family: var(--font); }
.chart-svg .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.chart-svg .axis-line { stroke: var(--chart-axis); stroke-width: 1; }
.chart-svg .bar { fill: var(--chart-1); }
.chart-svg .s1 { fill: var(--chart-1); }
.chart-svg .s2 { fill: var(--chart-2); }
.chart-svg .s3 { fill: var(--chart-3); }
.chart-svg .hit { fill: transparent; cursor: pointer; }
.chart-svg .hit:hover + .hover-band, .chart-svg .col:hover .hover-band { fill: var(--surface-2); }
.chart-svg .hover-band { fill: transparent; }
.chart-wrap { position: relative; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-2); margin-top: 8px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-legend .s1 { background: var(--chart-1); }
.chart-legend .s2 { background: var(--chart-2); }
.chart-legend .s3 { background: var(--chart-3); }
.chart-legend .apa { background: var(--apa); }
.chart-legend .anya { background: var(--anya); }

.chart-tip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.8rem;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0;
  transition: opacity 0.12s;
}

.chart-tip.show { opacity: 1; }
.chart-tip b { font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th { background: var(--surface-2); font-weight: 650; color: var(--text-2); font-size: 0.78rem; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: none; }

details.disclosure > summary { cursor: pointer; font-weight: 600; color: var(--text-2); font-size: 0.86rem; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure[open] > summary { margin-bottom: 10px; }

/* ---------------------------------------------------------------------
   Gyerekek
   --------------------------------------------------------------------- */
.child-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}

.child-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.child-avatar {
  width: 52px; height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 1.25rem;
  color: #fff;
  background: var(--child-color, var(--accent));
  flex-shrink: 0;
}

.child-avatar.lg { width: 68px; height: 68px; border-radius: 22px; font-size: 1.6rem; }

.size-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.size-tile { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.size-tile span { display: block; font-size: 0.76rem; color: var(--text-3); font-weight: 600; }
.size-tile b { font-size: 1.25rem; }
.size-tile small { display: block; color: var(--text-3); font-size: 0.74rem; margin-top: 2px; }

.potty-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.potty-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.1s, background 0.15s;
}

.potty-btn:hover { background: var(--surface-2); }
.potty-btn:active { transform: scale(0.97); }
.potty-btn b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.potty-btn span { font-size: 0.78rem; color: var(--text-2); font-weight: 600; text-align: center; }
.potty-btn .pb-dot { width: 10px; height: 10px; border-radius: 3px; }

/* ---------------------------------------------------------------------
   Teendők
   --------------------------------------------------------------------- */
.task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.task:last-child { border-bottom: none; }
.task-check {
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  color: transparent;
  transition: all 0.15s;
}

.task-check:hover { border-color: var(--accent); }
.task.done .task-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.task.done .task-title { text-decoration: line-through; color: var(--text-3); }
.task-check svg.lucide { width: 15px; height: 15px; stroke-width: 3; }
.task-title { font-weight: 600; }
.task-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.task-main { flex: 1; min-width: 0; cursor: pointer; }

/* ---------------------------------------------------------------------
   Előzmények (diff)
   --------------------------------------------------------------------- */
.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.tl-item::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.tl-dot svg.lucide { width: 12px; height: 12px; }
.tl-body .tl-head { font-size: 0.82rem; color: var(--text-3); }
.tl-body .tl-head strong { color: var(--text); }
.diff { margin-top: 8px; display: grid; gap: 6px; font-size: 0.86rem; }
.diff-row { display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.diff-row .dk { font-size: 0.74rem; font-weight: 650; color: var(--text-3); }
.diff-old { color: var(--danger); text-decoration: line-through; white-space: pre-wrap; word-break: break-word; }
.diff-new { color: var(--ok); white-space: pre-wrap; word-break: break-word; }
.hash { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.74rem; color: var(--text-3); word-break: break-all; }

/* ---------------------------------------------------------------------
   Statikus szöveges oldalak (adatvédelem)
   --------------------------------------------------------------------- */
.prose { max-width: 720px; }
.prose h2 { margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: 10px; }
.prose ul { padding-left: 20px; display: grid; gap: 6px; }

/* ---------------------------------------------------------------------
   Mozgáscsökkentés, nyomtatás
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .cal-cell.apa, .cal-cell.anya, .cal-cell.shared { border: 1px solid CanvasText; }
  .chart-svg .bar, .chart-svg .s1, .chart-svg .s2, .chart-svg .s3 { fill: CanvasText; }
}

@media print {
  .sidebar, .topbar, .bottom-nav, .fab, .composer, .toasts, .no-print { display: none !important; }
  .view { padding: 0; max-width: none; }
  body { background: #fff; }
  .card, .list, .entry-card, .msg { box-shadow: none; }
}

.s1-bg { background: var(--chart-1); }
.s2-bg { background: var(--chart-2); }
.s3-bg { background: var(--chart-3); }
.chart-svg .apa-fill { fill: var(--apa); }
.chart-svg .anya-fill { fill: var(--anya); }
.apa-fill-bg { background: var(--apa); }
.anya-fill-bg { background: var(--anya); }
.chart-legend .apa-fill { background: var(--apa); }
.chart-legend .anya-fill { background: var(--anya); }

/* =====================================================================
   2. verzió: vizuálisabb, átláthatóbb, mobilra optimalizált elemek
   ===================================================================== */

/* --- Avatarok --- */
.avatar.xs { width: 22px; height: 22px; font-size: 0.66rem; }
.avatar.xl { width: 64px; height: 64px; font-size: 1.5rem; }
a.avatar { text-decoration: none; }
.me-btn { width: 44px; height: 44px; }
.me-btn .avatar { box-shadow: 0 0 0 2px var(--surface); }

.kid-avatar {
  --kid: #5e8b6a;
  width: 40px; height: 40px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--kid) 22%, var(--surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kid) 45%, transparent);
  color: var(--text);
  font-weight: 750;
}
.kid-avatar.lg { width: 54px; height: 54px; border-radius: 18px; font-size: 1.8rem; }
.kid-avatar.xl { width: 72px; height: 72px; border-radius: 24px; font-size: 2.5rem; }
.kid-chip { background: color-mix(in srgb, var(--kid) 14%, var(--surface)); color: var(--text); }
.kid-emoji { font-size: 0.95rem; line-height: 1; }

/* --- Kezdőlap: hős kártya --- */
.greeting { margin: 6px 2px 14px; }
.greeting h1 { font-size: 1.45rem; }

.hero {
  position: relative;
  border-radius: 26px;
  padding: 20px;
  overflow: hidden;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
}
.hero.apa { background: linear-gradient(150deg, var(--apa-soft) 0%, var(--apa-softer) 55%, var(--surface) 100%); border-color: color-mix(in srgb, var(--apa) 28%, var(--border)); }
.hero.anya { background: linear-gradient(150deg, var(--anya-soft) 0%, var(--anya-softer) 55%, var(--surface) 100%); border-color: color-mix(in srgb, var(--anya) 28%, var(--border)); }
.hero.shared { background: linear-gradient(135deg, var(--apa-soft) 0 50%, var(--anya-soft) 50% 100%); }
.hero::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  right: -70px; top: -90px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  pointer-events: none;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-date { font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.hero-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.hero-main { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.hero-kids { display: flex; flex-shrink: 0; }
.hero-kids .kid-avatar + .kid-avatar { margin-left: -18px; }
.hero-kids .kid-avatar { border: 3px solid var(--surface); box-sizing: content-box; }
.hero-text h1 { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15; }
.hero.apa .hero-text h1 { color: var(--apa-ink); }
.hero.anya .hero-text h1 { color: var(--anya-ink); }
.hero-text p { margin-top: 6px; color: var(--text-2); font-size: 0.92rem; }

.hero-next {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.hero-next:hover { text-decoration: none; background: var(--surface); }
.hn-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex-shrink: 0; }
.hn-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.hn-label { font-size: 0.72rem; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.hn-when { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-loc { font-weight: 550; color: var(--text-2); }
.hn-flow { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-2); }
.hn-flow > span:last-child { margin-left: 4px; }
.hn-pill { flex-shrink: 0; font-size: 0.78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }

/* --- Hét-csík (új) --- */
.week-strip { gap: 6px; }
.week-day {
  text-decoration: none;
  color: var(--text-2);
  padding: 8px 0 10px;
  border-radius: 16px;
  gap: 2px;
  transition: transform 0.15s var(--ease);
}
.week-day:hover { text-decoration: none; transform: translateY(-1px); }
.week-day .wd-name { font-size: 0.7rem; font-weight: 650; text-transform: uppercase; }
.week-day b { font-size: 1.1rem; }
.week-day .wd-who {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 750;
  background: var(--surface);
  color: var(--text-2);
}
.week-day.apa .wd-who { background: var(--apa); color: #fff; }
.week-day.anya .wd-who { background: var(--anya); color: #fff; }
.week-day.ho-apa-anya, .week-day.ho-apa-shared { background: linear-gradient(135deg, var(--apa-soft) 0 50%, var(--anya-soft) 50%); }
.week-day.ho-anya-apa, .week-day.ho-anya-shared { background: linear-gradient(135deg, var(--anya-soft) 0 50%, var(--apa-soft) 50%); }
.week-day.ho-anya-apa .wd-who, .week-day.ho-shared-apa .wd-who { background: var(--apa); color: #fff; }
.week-day.ho-apa-anya .wd-who, .week-day.ho-shared-anya .wd-who { background: var(--anya); color: #fff; }
.week-day .wd-ho { position: absolute; top: 5px; right: 5px; color: var(--text-2); display: inline-flex; }
.week-day .wd-ho svg.lucide { width: 12px; height: 12px; }
.week-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.week-legend { display: flex; gap: 14px; margin: 10px 4px 0; font-size: 0.78rem; color: var(--text-3); flex-wrap: wrap; }
.week-legend span { display: inline-flex; align-items: center; gap: 6px; }
.week-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.week-legend i.apa { background: var(--apa); }
.week-legend i.anya { background: var(--anya); }

/* --- Gyors műveletek --- */
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .quick-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.quick-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.quick-scroll .quick {
  flex: 0 0 auto;
  width: 92px;
  scroll-snap-align: start;
}
.quick {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.quick:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.quick:active { transform: scale(0.97); }
.q-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; }
.q-ico svg.lucide { width: 24px; height: 24px; }
.q-label { font-size: 0.8rem; font-weight: 650; line-height: 1.2; }
.qa-accent .q-ico { background: var(--accent-soft); color: var(--accent-ink); }
.qa-warn .q-ico { background: var(--warn-soft); color: var(--warn); }
.qa-info .q-ico { background: var(--info-soft); color: var(--info); }
.qa-anya .q-ico { background: var(--anya-soft); color: var(--anya-ink); }
.qa-apa .q-ico { background: var(--apa-soft); color: var(--apa-ink); }
.qa-ok .q-ico { background: var(--ok-soft); color: var(--ok); }

/* --- Döntésre váró tételek --- */
.count-pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-fg); font-size: 0.72rem; letter-spacing: 0; }
.attention-list { display: grid; gap: 8px; }
.attention {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.attention:hover { text-decoration: none; background: var(--bg-elev); }
.attention.warn { border-left-color: var(--warn); }
.attention.anya { border-left-color: var(--anya); }
.attention.apa { border-left-color: var(--apa); }
.attention.ok { border-left-color: var(--ok); }
.attention.accent { border-left-color: var(--accent); }
.att-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.att-text b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-text small { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.unread-row { display: flex; gap: 8px; flex-wrap: wrap; }
.unread-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--anya-softer); color: var(--anya-ink); text-decoration: none; font-size: 0.88rem; border: 1px solid color-mix(in srgb, var(--anya) 25%, transparent); }
.unread-pill:hover { text-decoration: none; background: var(--anya-soft); }

.setup-cards { display: grid; gap: 8px; }
.setup-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--accent-softer); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); color: inherit; text-decoration: none; }
.setup-card:hover { text-decoration: none; background: var(--accent-soft); }
.sc-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--accent-ink); flex-shrink: 0; }
.sc-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.sc-text small { color: var(--text-3); font-size: 0.8rem; }

/* --- Gyerek-kártyák --- */
.kids-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kid-card {
  --kid: #5e8b6a;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--kid) 12%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--kid) 25%, var(--border));
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.kid-card:hover { text-decoration: none; box-shadow: var(--shadow); }
.kc-text { display: grid; gap: 2px; min-width: 0; }
.kc-text b { font-size: 1.05rem; }
.kc-text small { color: var(--text-3); font-size: 0.8rem; }
.kc-text .kc-ev { color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Közelgő események (idővonal) --- */
.dash-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: 1.4fr 1fr; } }
.timeline-list { display: grid; gap: 4px; }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 14px; color: inherit; text-decoration: none; }
.tl-row:hover { background: var(--bg-elev); text-decoration: none; }
.date-tile { width: 44px; flex-shrink: 0; display: grid; justify-items: center; padding: 4px 0; border-radius: 12px; background: var(--surface-2); line-height: 1.1; }
.date-tile b { font-size: 1.1rem; }
.date-tile small { font-size: 0.66rem; text-transform: uppercase; color: var(--text-3); font-weight: 650; }
.tl-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.tl-text b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-text small { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-kids { display: none; gap: 4px; }
@media (min-width: 560px) { .tl-kids { display: flex; } }
.soft-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); color: var(--text-3); font-size: 0.9rem; flex-wrap: wrap; }
.soft-empty a { margin-left: auto; font-weight: 650; }

/* --- Egyenleg mini kártya --- */
.balance-mini { color: inherit; text-decoration: none; display: block; }
.balance-mini:hover { text-decoration: none; box-shadow: var(--shadow); }
.flow { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 6px; }
.flow-arrow { display: grid; justify-items: center; gap: 2px; color: var(--text-3); }
.flow-arrow b { color: var(--text); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.flow.settled { color: var(--ok); gap: 8px; font-size: 1.1rem; }
.flow.settled svg.lucide { width: 28px; height: 28px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mini-stats span { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.mini-stats small { font-size: 0.72rem; color: var(--text-3); font-weight: 600; }
.mini-stats b { font-variant-numeric: tabular-nums; }

/* --- „Ki használja ezt az eszközt?” --- */
.picker {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 480px at 0% 0%, var(--apa-soft), transparent 60%),
    radial-gradient(900px 480px at 100% 100%, var(--anya-soft), transparent 60%),
    var(--bg);
}
.picker-inner { width: 100%; max-width: 440px; text-align: center; animation: pop-in 0.35s var(--ease); }
.picker-brand { display: grid; place-items: center; margin-bottom: 14px; }
.picker-brand .brand-mark { width: 56px; height: 56px; border-radius: 18px; }
.picker-brand .brand-mark svg { width: 30px; height: 30px; }
.picker h1 { font-size: 1.6rem; }
.picker .lead { color: var(--text-2); margin: 8px 0 22px; }
.picker .form { text-align: left; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.who-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 10px 18px;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.15s var(--ease), border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.who-card:hover { transform: translateY(-2px); }
.who-card:active { transform: scale(0.98); }
.who-card.apa:hover, .who-card.apa:focus-visible { border-color: var(--apa); }
.who-card.anya:hover, .who-card.anya:focus-visible { border-color: var(--anya); }
.who-avatar { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; font-weight: 750; color: #fff; margin-bottom: 8px; }
.who-card.apa .who-avatar { background: var(--apa); }
.who-card.anya .who-avatar { background: var(--anya); }
.who-name { font-size: 1.2rem; font-weight: 700; }
.who-full { font-size: 0.8rem; color: var(--text-3); }
.who-role { margin-top: 6px; font-size: 0.74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.who-card.apa .who-role { background: var(--apa-soft); color: var(--apa-ink); }
.who-card.anya .who-role { background: var(--anya-soft); color: var(--anya-ink); }
.picker-note { margin: 18px auto 0; max-width: 330px; color: var(--text-3); font-size: 0.82rem; display: flex; gap: 8px; align-items: flex-start; justify-content: center; text-align: left; }
.picker-note svg.lucide { margin-top: 2px; }

/* --- Naptár: kiválasztott nap panel --- */
.day-panel { margin-top: 14px; }
.day-panel .dp-head { display: flex; align-items: center; gap: 12px; }
.day-panel .dp-badge { width: 52px; flex-shrink: 0; display: grid; justify-items: center; padding: 6px 0; border-radius: 14px; background: var(--surface-2); line-height: 1.1; }
.day-panel .dp-badge b { font-size: 1.4rem; }
.day-panel .dp-badge small { font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; font-weight: 650; }
.day-panel.apa .dp-badge { background: var(--apa-soft); color: var(--apa-ink); }
.day-panel.anya .dp-badge { background: var(--anya-soft); color: var(--anya-ink); }
.dp-who { font-size: 1.15rem; font-weight: 700; }
.day-panel.apa .dp-who { color: var(--apa-ink); }
.day-panel.anya .dp-who { color: var(--anya-ink); }
.dp-rows { display: grid; gap: 8px; margin-top: 14px; }
.dp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 0.9rem; }
button.dp-row { border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.dp-row:hover { background: var(--surface-3); }
.cal-head-row { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cal-head-row .cal-title { flex: 1; text-align: center; min-width: 0; }

/* --- Mobil finomítások --- */
@media (max-width: 899px) {
  .page-head h1, .page-head .sub { display: none; }
  .page-head { margin: 4px 0 14px; }
  .page-head .btn-row { width: 100%; }
  .page-head .btn-row > .btn { flex: 1; }
  .page-head:not(:has(.btn-row)) { display: none; }
  .view { padding-top: 4px; }
  .filters > .search-input { flex-basis: 100%; }
  .filters > .select, .filters > .input { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .card { padding: 16px; border-radius: 18px; }
  .list { border-radius: 18px; }
  .tabs { margin-left: -16px; margin-right: -16px; padding: 0 12px; }
  .cal-toolbar { gap: 10px; }
  .cal-toolbar .seg { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); order: 2; }
  .cal-toolbar .cal-head-row { order: 1; width: 100%; flex-basis: 100%; }
  .cal-toolbar .cal-actions { display: none; }
  .modal-body { padding-left: 18px; padding-right: 18px; }
  .balance-amount { font-size: 1.7rem; }
  .hero-text h1 { font-size: 1.45rem; }
}
@media (min-width: 900px) {
  .cal-toolbar .cal-head-row { flex: 0 1 auto; }
  .cal-toolbar .cal-actions { margin-left: auto; }
}

@media (max-width: 380px) {
  .hero { padding: 16px; border-radius: 22px; }
  .kid-avatar.xl { width: 58px; height: 58px; font-size: 2rem; border-radius: 20px; }
  .hero-text h1 { font-size: 1.3rem; }
  .quick-grid { gap: 8px; }
  .q-ico { width: 42px; height: 42px; }
  .week-strip { gap: 4px; }
  .week-day b { font-size: 1rem; }
}

/* Érintőképernyőn nagyobb érintési felületek */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn-sm { min-height: 40px; padding: 0 14px; }
  .btn-xs { min-height: 36px; padding: 0 12px; }
  .icon-btn { width: 44px; height: 44px; }
  .link-btn { min-height: 34px; }
  .choice span { min-height: 42px; }
  .tabs a, .tabs button { padding: 12px 12px; }
  .seg button { padding: 9px 14px; }
}

/* --- Beállítások: eszköz-kártya, áttekinthető lista --- */
.device-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; background: var(--surface-2); }
.device-card.apa { background: linear-gradient(135deg, var(--apa-soft), var(--apa-softer)); }
.device-card.anya { background: linear-gradient(135deg, var(--anya-soft), var(--anya-softer)); }
.device-card .avatar.xl.apa { background: var(--apa); color: #fff; }
.device-card .avatar.xl.anya { background: var(--anya); color: #fff; }
.dc-name { font-size: 1.25rem; font-weight: 700; margin: 2px 0 6px; }
.settings-list { display: grid; gap: 6px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); color: inherit; text-decoration: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.set-row:hover { background: var(--surface-3); text-decoration: none; }
.sr-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.sr-text small { color: var(--text-3); font-size: 0.8rem; }

/* --- Gyerekprofil fejléc --- */
.child-hero { --kid: #5e8b6a; display: flex; align-items: center; gap: 16px; padding: 18px; margin-bottom: 14px; border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--kid) 16%, var(--surface)), var(--surface) 75%); border: 1px solid color-mix(in srgb, var(--kid) 25%, var(--border)); }
.child-hero h1 { font-size: 1.4rem; }
.child-hero p { margin-top: 2px; }

/* --- Egyenleg: ki tartozik kinek --- */
.flow-avatars { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); }
.flow-avatars .avatar.lg.apa, .flow .avatar.lg.apa { background: var(--apa); color: #fff; }
.flow-avatars .avatar.lg.anya, .flow .avatar.lg.anya { background: var(--anya); color: #fff; }
[data-theme='dark'] .flow-avatars .avatar.lg, [data-theme='dark'] .flow .avatar.lg, [data-theme='dark'] .device-card .avatar.xl { color: #15130f; }

/* Avatar a felső sávban (mobil menü) */
.me-btn .avatar.apa { background: var(--apa); color: #fff; }
.me-btn .avatar.anya { background: var(--anya); color: #fff; }
.sidebar-foot .avatar.apa { background: var(--apa); color: #fff; }
.sidebar-foot .avatar.anya { background: var(--anya); color: #fff; }

@media (max-width: 519px) {
  .hero-main { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.hero-cta { margin-top: 12px; }

.hn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hn-loc { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-weight: 600; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-flow { min-width: 0; }
.hero-next .hn-pill { font-size: 0.72rem; padding: 3px 9px; }
.hero-next .hn-when { font-size: 1.15rem; }
.week-legend i.ho { border-radius: 3px; background: linear-gradient(135deg, var(--apa) 50%, var(--anya) 50%); }
.hero-next .avatar.xs.apa { background: var(--apa); color: #fff; }
.hero-next .avatar.xs.anya { background: var(--anya); color: #fff; }

.balance-card .settle-btn { justify-self: start; }
.balance-split div { min-width: 0; }
.balance-split span { line-height: 1.25; }
@media (max-width: 899px) {
  .balance-card { padding: 16px; border-radius: 22px; gap: 12px; }
  .balance-card .settle-btn { justify-self: stretch; }
  .balance-split { gap: 6px; }
  .balance-split div { padding: 8px 10px; }
  .balance-split b { font-size: 0.92rem; }
  .month-nav { width: 100%; justify-content: space-between; }
}
.form-note.warn { background: var(--warn-soft); }
.form-note.warn svg.lucide { color: var(--warn); }

/* =====================================================================
   3. verzió: 3D figurák és ikonok, mozgás, új funkciók
   ===================================================================== */

/* --- 3D képek --- */
img.e3d { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.e3d-fallback { display: inline-grid; place-items: center; width: 100%; height: 100%; font-size: 1.4em; line-height: 1; }
.tiny3d { width: 18px !important; height: 18px !important; display: inline-block !important; vertical-align: -4px; }
span.tiny3d.e3d-fallback { font-size: 14px; }
.h3d { width: 26px !important; height: 26px !important; display: inline-block !important; flex-shrink: 0; }

/* Szülő 3D figura: puha színes körben, „kilóg” belőle a fej */
.avatar3d {
  --ring: var(--border-strong);
  --bgc: var(--surface-2);
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: end center;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 70%, var(--bgc)) 0%, var(--bgc) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ring) 55%, transparent), 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.avatar3d.apa { --ring: var(--apa); --bgc: var(--apa-soft); }
.avatar3d.anya { --ring: var(--anya); --bgc: var(--anya-soft); }
.avatar3d img.e3d, .avatar3d .e3d-fallback { width: 88%; height: 88%; margin-bottom: 2%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); }
.avatar3d.xs { width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ring) 60%, transparent); }
.avatar3d.sm { width: 30px; height: 30px; }
.avatar3d.md { width: 40px; height: 40px; }
.avatar3d.lg { width: 52px; height: 52px; }
.avatar3d.xl { width: 72px; height: 72px; }
.avatar3d.xxl { width: 104px; height: 104px; }
.avatar3d.xs .e3d-fallback { font-size: 12px; }
.avatar3d.xxl .e3d-fallback, .avatar3d.xl .e3d-fallback { font-size: 2.6rem; }

/* Gyerek 3D figura: lekerekített négyzet a gyerek színében */
.kid3d {
  --kid: #5e8b6a;
  width: 40px; height: 40px;
  border-radius: 30%;
  display: inline-grid;
  place-items: end center;
  flex-shrink: 0;
  overflow: hidden;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, #fff 65%, var(--kid)) 0%, color-mix(in srgb, var(--kid) 30%, var(--surface)) 75%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kid) 45%, transparent), 0 3px 8px rgba(0, 0, 0, 0.1);
}
.kid3d img.e3d, .kid3d .e3d-fallback { width: 86%; height: 86%; margin-bottom: 3%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); }
.kid3d.xs { width: 22px; height: 22px; border-radius: 8px; }
.kid3d.sm { width: 32px; height: 32px; border-radius: 11px; }
.kid3d.lg { width: 54px; height: 54px; border-radius: 18px; }
.kid3d.xl { width: 72px; height: 72px; border-radius: 24px; }
.kid3d.xxl { width: 104px; height: 104px; border-radius: 32px; }
.kid3d.xl .e3d-fallback, .kid3d.xxl .e3d-fallback { font-size: 2.6rem; }

/* Lebegés */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-a { animation: float-y 4.2s ease-in-out infinite; }
.float-b { animation: float-y 3.6s ease-in-out 0.4s infinite; }
.float-c { animation: float-y 4s ease-in-out 1.1s infinite; }

/* --- Kezdőlap: üdvözlés + otthon-jelenet --- */
.greeting { display: flex; align-items: center; gap: 10px; }
.scene {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-height: 112px;
  padding-left: 6px;
}
.scene-house { position: absolute; right: -6px; bottom: -6px; width: 120px; height: 120px; opacity: 0.95; pointer-events: none; }
.scene-house .house3d { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12)); }
.scene-parent { position: relative; z-index: 2; margin-right: -14px; }
.scene-parent .avatar3d { box-shadow: inset 0 0 0 3px var(--ring), 0 10px 24px rgba(0, 0, 0, 0.12); border: 3px solid var(--surface); }
.scene-kids { display: flex; align-items: flex-end; position: relative; z-index: 3; }
.scene-kids > div + div { margin-left: -12px; }
.scene-kids .kid3d { border: 3px solid var(--surface); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
.hero-text { position: relative; z-index: 1; }

/* Visszaszámláló gyűrű */
.hn-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.ring { transform: rotate(-90deg); display: block; }
.ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.8s var(--ease); }
.hero.apa .ring-fg { stroke: var(--apa); }
.hero.anya .ring-fg { stroke: var(--anya); }
.hn-ring-ico { position: absolute; inset: 14px; }
.ring3d { width: 100%; height: 100%; }
.hn-pill.soon { animation: pulse-soft 1.8s ease-in-out infinite; }
@keyframes pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* Gyorsjelzések */
.ping-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ping-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ping-btn:hover { background: var(--surface); transform: translateY(-1px); }
.ping-btn:active { transform: scale(0.96); }
.ping-btn img.e3d, .ping-btn .e3d-fallback { width: 34px; height: 34px; }
.ping-bubble { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 85%, transparent); font-size: 0.88rem; animation: view-in 0.4s var(--ease); }
.ping-bubble small { color: var(--text-3); margin-left: 4px; }
.minute-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* Hét-csík 3D arcokkal */
.week-day .avatar3d.xs { width: 26px; height: 26px; }

/* Gyors műveletek 3D ikonokkal */
.quick-grid.q3d .quick { animation: rise-in 0.45s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.q-ico3d { width: 52px; height: 52px; display: grid; place-items: center; transition: transform 0.25s var(--ease); }
.q-ico3d img.e3d, .q-ico3d .e3d-fallback { width: 46px; height: 46px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.14)); }
.quick:hover .q-ico3d { transform: translateY(-3px) rotate(-4deg) scale(1.06); }
.quick-grid.q3d .quick { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%); }

.att3d { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; }
.att3d img.e3d, .att3d .e3d-fallback { width: 34px; height: 34px; }
.sc-icon img.e3d, .sc-icon .e3d-fallback { width: 30px; height: 30px; }
.ev3d { width: 34px; height: 34px; flex-shrink: 0; }
.ev3d img.e3d { width: 100%; height: 100%; }

/* Csomaglista */
.pack-card.empty { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.pack-card.empty:hover { text-decoration: none; box-shadow: var(--shadow); }
.pack-card.empty span { display: grid; gap: 2px; flex: 1; }
.pack-card.empty small { color: var(--text-3); }
.pack3d { width: 56px !important; height: 56px !important; flex-shrink: 0; }
.pack-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pp-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pp-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--ok))); transition: width 0.5s var(--ease); }
.pack-list { display: grid; gap: 8px; }
.pack-list.big { gap: 10px; }
.pack-row { display: flex; align-items: center; gap: 6px; }
.pack-row .pack-item { flex: 1; }
.pack-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pack-item:active { transform: scale(0.98); }
.pi3d { width: 32px !important; height: 32px !important; flex-shrink: 0; }
.pi-title { flex: 1; min-width: 0; display: grid; font-weight: 600; }
.pi-title small { font-weight: 500; color: var(--text-3); font-size: 0.78rem; }
.pi-who { color: var(--ok) !important; }
.pi-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: all 0.2s var(--ease); }
.pack-item.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pack-item.done .pi-check { background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.05); }
.pack-item.done .pi-title > :first-child { text-decoration: none; }
.suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); font: inherit; font-size: 0.86rem; cursor: pointer; color: var(--text); }
.suggest:hover { background: var(--accent-softer); border-color: var(--accent); }
.suggest.add { border-style: solid; color: var(--accent-ink); }

/* Utaz� t�rgyak (N02) */
.travel-card { margin-bottom: 14px; }
.travel-cols { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .travel-cols { grid-template-columns: 1fr 1fr; } }
.travel-col h3, .travel-unknown h3 { font-size: 0.95rem; margin: 0 0 8px; color: var(--text-2); }
.travel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.travel-col .travel-row:first-of-type, .travel-unknown .travel-row:first-of-type { border-top: 0; }
.travel-meta { flex: 1; min-width: 140px; display: grid; gap: 2px; font-weight: 600; }
.travel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.travel-unknown { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); }
.travel-remind { display: grid; gap: 8px; margin-bottom: 10px; }
.travel-remind-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--warn-soft, var(--accent-softer)); font-size: 0.9rem; font-weight: 600; }
.travel-remind-card { margin-bottom: 14px; }
.pi-travel { color: var(--accent-ink) !important; }
.hn-travel { display: grid; gap: 4px; margin-top: 6px; }
.hn-travel-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--text); }

/* Gyógyszer */
.med-row-card { display: flex; gap: 12px; align-items: flex-start; }
.med-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 6px 0 3px; }
.med-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--warn), var(--ok)); border-radius: 99px; }
.ok-text { color: var(--ok); font-weight: 650; }
.med-timeline { display: grid; gap: 0; }
.med-item { display: grid; grid-template-columns: 74px 16px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.med-item::before { content: ''; position: absolute; left: 81px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.med-item:last-child::before { display: none; }
.med-time { font-size: 0.8rem; color: var(--text-2); text-align: right; padding-top: 2px; }
.med-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin-top: 4px; box-shadow: 0 0 0 3px var(--surface); position: relative; z-index: 1; }
.med-item.apa .med-dot { background: var(--apa); }
.med-item.anya .med-dot { background: var(--anya); }
.med-body { display: grid; gap: 3px; }

/* Oldal-fejléc 3D ikonnal (új oldalak) */
.feature-hero { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border-radius: 22px; background: linear-gradient(135deg, var(--accent-softer), var(--surface) 70%); border: 1px solid var(--border); }
.feature-hero h1 { font-size: 1.35rem; }
.feature-hero p { color: var(--text-2); font-size: 0.88rem; margin-top: 2px; }
.fh3d { width: 64px !important; height: 64px !important; flex-shrink: 0; animation: float-y 4s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.14)); }

/* Emlékek */
.memory-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.memory { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); animation: rise-in 0.45s var(--ease) both; animation-delay: var(--d, 0ms); display: flex; flex-direction: column; }
.memory-img { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.memory-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.memory:hover .memory-img img { transform: scale(1.04); }
.memory-art { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--accent-softer), var(--surface-2)); }
.mem3d { width: 96px !important; height: 96px !important; animation: float-y 4.5s ease-in-out infinite; }
.memory-body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.memory-body h3 { font-size: 1.02rem; }
.photo-wall { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.photo { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.photo:hover img { transform: scale(1.06); }
.photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 0.7rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Névjegyek */
.contact-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.contact { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; }
.contact .grow { display: grid; min-width: 0; }
.contact small { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct3d { width: 40px !important; height: 40px !important; flex-shrink: 0; }
.call { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; flex-shrink: 0; text-decoration: none; box-shadow: 0 4px 10px color-mix(in srgb, var(--ok) 35%, transparent); }
.call.ghost { background: var(--surface-2); color: var(--text-2); box-shadow: none; }
[data-theme='dark'] .call { color: #10221a; }

/* Figura-választó */
.fig-picker { display: grid; gap: 10px; }
.fig-preview { display: grid; place-items: center; height: 140px; border-radius: 22px; background: radial-gradient(circle at 50% 40%, var(--accent-softer), var(--surface-2)); }
.fig-preview img.e3d { width: 120px; height: 120px; animation: float-y 3.5s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18)); }
.tone-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tone-opt { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; transition: transform 0.15s; }
.tone-opt.sel { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.08); }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.fig-opt { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 16px; border: 2px solid transparent; background: var(--surface-2); cursor: pointer; font: inherit; font-size: 0.7rem; color: var(--text-2); text-align: center; transition: transform 0.15s, border-color 0.15s; }
.fig-opt img.e3d, .fig-opt .e3d-fallback { width: 56px; height: 56px; }
.fig-opt:hover { transform: translateY(-2px); }
.fig-opt.sel { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-ink); }

/* „Menü” csempék 3D ikonnal */
.menu-grid { grid-template-columns: repeat(3, 1fr); }
.menu-tile { animation: rise-in 0.35s var(--ease) both; animation-delay: var(--d, 0ms); padding: 14px 6px; }
.mt3d { width: 44px; height: 44px; display: grid; place-items: center; }
.mt3d img.e3d, .mt3d .e3d-fallback { width: 40px; height: 40px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)); }

/* Gyerekprofil fejléc nagy 3D figurával */
.child-hero .kid3d.xxl { width: 96px; height: 96px; }
.device-card .avatar3d.xxl { width: 88px; height: 88px; }

/* Havi gondozási idő */
.custody-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cd-person { display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 16px; background: var(--surface-2); }
.cd-person b { font-size: 1.5rem; line-height: 1.1; }
.cd-person small { color: var(--text-3); font-size: 0.78rem; }

/* Naptár lapozás animáció */
@keyframes slide-l { from { opacity: 0.2; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slide-r { from { opacity: 0.2; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
#cal-body.slide-l { animation: slide-l 0.28s var(--ease); }
#cal-body.slide-r { animation: slide-r 0.28s var(--ease); }

/* Gyerek kártya születésnap sor */
.kc-bd { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2) !important; }

/* Konfetti */
.confetti-canvas { position: fixed; inset: 0; z-index: 200; pointer-events: none; }

/* Szakaszok érkezése */
.view > section > .section, .view > section > .hero { animation: rise-in 0.4s var(--ease) both; }

@media (max-width: 519px) {
  .scene { min-height: 96px; }
  .scene-house { width: 92px; height: 92px; right: -4px; bottom: 0; }
  .scene-parent .avatar3d.xxl { width: 88px; height: 88px; }
  .hn-ring { width: 56px; height: 56px; }
  .hn-ring .ring { width: 56px; height: 56px; }
  .hn-ring-ico { inset: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .float-c, .fh3d, .mem3d, .fig-preview img.e3d { animation: none !important; }
}

.hn-label { white-space: nowrap; }
@media (max-width: 400px) { .hide-narrow { display: none; } }

/* =====================================================================
   v5 – ki írta (byline), napfoglalás és kérések, helyszín-kereső, térkép
   ===================================================================== */

/* --- Ki írta? --- */
.byline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 2px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-2);
  vertical-align: middle;
}
.byline.apa { background: var(--apa-softer); color: var(--apa-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--apa) 25%, transparent); }
.byline.anya { background: var(--anya-softer); color: var(--anya-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--anya) 25%, transparent); }
.byline small { font-weight: 500; opacity: 0.8; }
.byline .avatar3d.xs { width: 22px; height: 22px; }
.byline.compact { padding: 2px; background: transparent; box-shadow: none; }
.ec-head .byline { margin-left: auto; }
.li-title .byline.compact { margin-left: 2px; }

/* --- Kérés-kártya (napfoglalás / csere) --- */
.req-list { display: grid; gap: 10px; margin-bottom: 10px; }
.req-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
}
.req-card.apa { border-color: var(--apa); background: var(--apa-softer); }
.req-card.anya { border-color: var(--anya); background: var(--anya-softer); }
.req-card.mine { border-style: dotted; }
.req-top { display: flex; align-items: center; gap: 10px; }
.req-top b { display: block; font-size: 0.92rem; line-height: 1.25; }
.req-top small { display: block; color: var(--text-2); font-size: 0.78rem; margin-top: 2px; }
.req-msg { margin: 0; font-size: 0.86rem; color: var(--text-2); font-style: italic; }
.req-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.req-actions .btn { flex: 1 1 auto; }
.req-actions .small { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; }
.hero-req { margin-top: 12px; }
.hero-req .req-card { background: color-mix(in srgb, var(--surface) 82%, transparent); }

/* --- Hős: foglalás, ha ma nincs eldöntve --- */
.hero-book { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero-book .btn { flex: 1 1 140px; justify-content: center; }
.hero-book .avatar3d.xs { width: 22px; height: 22px; margin-right: 2px; }
.hero-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.82rem; color: var(--text-2); }

/* --- Ki legyen? választó (napfoglalás) --- */
.label-like { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.who-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.who-opt { position: relative; cursor: pointer; }
.who-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.who-opt-card {
  height: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease);
}
.who-opt-card b { font-weight: 650; line-height: 1.2; }
.who-duo { display: inline-flex; }
.who-duo .avatar3d + .avatar3d { margin-left: -10px; }
.who-opt input:checked + .who-opt-card { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-1px); }
.who-opt.apa input:checked + .who-opt-card { border-color: var(--apa); background: var(--apa-softer); }
.who-opt.anya input:checked + .who-opt-card { border-color: var(--anya); background: var(--anya-softer); }
.who-opt input:focus-visible + .who-opt-card { outline: 3px solid var(--ring); outline-offset: 2px; }
.book-summary { font-size: 0.84rem; color: var(--text-2); min-height: 1em; }
.book-summary.warn { color: var(--text); background: var(--warn-soft); padding: 8px 10px; border-radius: 10px; }

/* --- Naptár: szabad és függő napok --- */
.cal-cell.free:not(.out) { background: var(--surface); }
.cal-cell.free:not(.out) .cal-bar { background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px); }
.cal-cell.pend-apa { background: repeating-linear-gradient(135deg, var(--apa-softer) 0 6px, var(--surface) 6px 12px); }
.cal-cell.pend-anya { background: repeating-linear-gradient(135deg, var(--anya-softer) 0 6px, var(--surface) 6px 12px); }
.cal-cell.apa.pend-anya, .cal-cell.anya.pend-apa { background-blend-mode: multiply; }
.legend i.free { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); border-style: dashed; }
.legend i.pend { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 3px, var(--surface) 3px 6px); box-shadow: inset 0 0 0 1.5px var(--warn); }
.day-panel.free .dp-badge { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.book-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: var(--accent-softer);
  font-size: 0.86rem;
  color: var(--text-2);
}
.book-hint b { color: var(--text); }
.book-hint .hint3d { width: 34px; height: 34px; flex-shrink: 0; }

/* Esemény sor a napi panelen: részletek + térkép gomb */
.dp-row.ev-row { padding: 0; background: transparent; gap: 6px; }
.ev-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ev-main:hover { background: var(--surface-3); }
.ev-main:disabled { cursor: default; }
.ev-main .grow { min-width: 0; }
.ev-map-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); }

/* --- Heti sáv a kezdőlapon: szabad / függő --- */
.week-day.free { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); }
.week-day.free.today { box-shadow: inset 0 0 0 2px var(--accent); }
.week-day .wd-free { background: var(--accent-soft); color: var(--accent-ink); }
.week-day .wd-free svg.lucide { width: 14px; height: 14px; }
.week-day.pend-apa { background: repeating-linear-gradient(135deg, var(--apa-softer) 0 5px, var(--surface) 5px 10px); }
.week-day.pend-anya { background: repeating-linear-gradient(135deg, var(--anya-softer) 0 5px, var(--surface) 5px 10px); }
.week-day .wd-pend { background: transparent; }
.week-day .wd-pend .tiny3d { width: 20px; height: 20px; }
.week-legend i.free { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }

/* --- Helyszín-kereső (automatikus kiegészítés) --- */
.place-field { position: relative; }
.place-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 2px);
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.ps-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ps-item:hover, .ps-item.active { background: var(--accent-softer); }
.ps-ico .e3d { width: 26px; height: 26px; }
.ps-text { min-width: 0; display: grid; }
.ps-text b { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-text small { font-size: 0.76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-empty { padding: 10px; font-size: 0.85rem; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.ps-foot { padding: 6px 10px 2px; font-size: 0.68rem; color: var(--text-3); border-top: 1px solid var(--border); margin-top: 4px; }

/* --- Térkép --- */
.map-box {
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
  z-index: 0;
}
.map-box.sm { height: 150px; }
.map-box.lg { height: min(52vh, 420px); }
.map-box.map-loading { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
.map-fallback { height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: var(--text-2); font-size: 0.86rem; text-align: center; }
.map-pin { background: none; border: 0; }
.map-pin .e3d { width: 46px; height: 46px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); animation: pin-drop 0.5s var(--ease) both; }
@keyframes pin-drop { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px; }
[data-theme='dark'] .map-box .leaflet-tile-pane { filter: brightness(0.82) contrast(1.05) saturate(0.85); }
.place-preview { display: grid; gap: 6px; margin-top: -4px; }
.place-preview .pp-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ok); font-weight: 600; }
.place-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.place-head .place3d { width: 44px; height: 44px; flex-shrink: 0; }
.place-head b { display: block; }
.place-head small { display: block; color: var(--text-3); font-size: 0.8rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nav-links .btn { flex: 1 1 120px; justify-content: center; }

/* --- Esemény részletei --- */
.ev-detail { display: grid; gap: 14px; }
.ev-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--surface-2); }
.ev-hero3d .e3d { width: 56px; height: 56px; }
.ev-when { font-weight: 700; font-size: 1.05rem; margin-top: 4px; }
.ev-place { display: grid; gap: 10px; }
.ev-place .tiny3d { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .map-pin .e3d { animation: none; }
  .map-box.map-loading { animation: none; }
}
@media (max-width: 400px) {
  .who-opts { gap: 6px; }
  .who-opt-card { padding: 10px 4px 8px; font-size: 0.8rem; }
}

/* A dátum- és hónapválasztó ne lógjon ki keskeny képernyőn */
.input { min-width: 0; max-width: 100%; }
.input[type='date'], .input[type='time'], .input[type='month'], .input[type='datetime-local'] { width: 100%; }

/* =====================================================================
   v6 – fotók mindenhol, kérés-választó, szívességkérés, „mit kell vinni / hozni”
   ===================================================================== */

/* --- Fotóválasztó --- */
.file-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.file-pick:hover { border-color: var(--accent); background: var(--accent-softer); }
.file-pick:focus-within { outline: 3px solid var(--ring); outline-offset: 2px; }
.file-pick .fp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fp-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.fp-text { display: grid; min-width: 0; }
.fp-text b { font-weight: 650; font-size: 0.92rem; }
.fp-text small { color: var(--text-3); font-size: 0.78rem; }
.fp-previews { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fp-previews:empty { display: none; }
.fp-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--border); }
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-thumb.file { padding: 4px; text-align: center; }
.fp-thumb.file small { font-size: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px; }
.fp-count { font-size: 0.8rem; color: var(--text-2); }

/* Már csatolt fájlok (szerkesztéskor eltávolíthatók) */
.ef-box { display: grid; gap: 6px; }
.ef-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-item { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.ef-item img { width: 100%; height: 100%; object-fit: cover; }
.ef-file { display: grid; place-items: center; height: 100%; padding: 4px; text-align: center; font-size: 0.6rem; }
.ef-remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }
.ef-remove svg.lucide { width: 14px; height: 14px; }
.ef-item.removed img, .ef-item.removed .ef-file { opacity: 0.3; filter: grayscale(1); }
.ef-item.removed .ef-remove { background: var(--danger); }

/* --- Kérés-választó --- */
.req-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.req-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 16px 10px 14px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s, background 0.15s;
}
.req-tile:hover { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-2px); }
.req-tile .rt3d .e3d { width: 48px; height: 48px; }
.req-tile b { font-size: 0.95rem; line-height: 1.2; }
.req-tile small { color: var(--text-3); font-size: 0.76rem; line-height: 1.25; }
.req3d .e3d { width: 36px; height: 36px; }
.req-card.help { border-style: solid; }
.req-card .thumbs { margin: 0; }

/* --- „Mit kell vinni / hozni?” szerkesztő --- */
.evi-editor { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.evi-list { display: grid; gap: 6px; }
.evi-list:empty { display: none; }
.evi-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.evi-row .pi3d { width: 28px !important; height: 28px !important; }
.evi-pill { border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.evi-pill.vinni, .evi-tag.vinni { background: var(--info-soft); color: var(--info); }
.evi-pill.hozni, .evi-tag.hozni { background: var(--warn-soft); color: var(--text); }
.evi-add { display: flex; gap: 6px; align-items: center; }
.evi-add .input { flex: 1; min-width: 0; }
.evi-dir { display: inline-flex; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); padding: 2px; flex-shrink: 0; }
.evi-dir button { border: 0; background: transparent; font: inherit; font-size: 0.78rem; font-weight: 650; padding: 8px 8px; border-radius: 8px; cursor: pointer; color: var(--text-2); }
.evi-dir button.active { background: var(--accent); color: var(--on-accent); }
.evi-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.evi-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--text); }
.evi-chip:hover { border-color: var(--accent); background: var(--accent-softer); }
.evi-chip .chip3d { width: 20px; height: 20px; }

/* Kipipálható lista */
.evi-check { display: grid; gap: 8px; }
.evi-progress { display: flex; align-items: center; gap: 10px; }
.evi-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; vertical-align: 1px; }
.evi-sum { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; background: var(--surface-3); font-size: 0.72rem; font-weight: 700; color: var(--text-2); }
.evi-sum.all { background: var(--ok-soft); color: var(--ok); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ev-items { display: grid; gap: 8px; }
.bring-card .stack { gap: 16px; }
.bring-ev { display: grid; gap: 8px; }
.bring-title { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; flex-wrap: wrap; }
.bring-title small { color: var(--text-3); font-size: 0.8rem; }
.tl-kids { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Üzenetek: fotó csatolása */
.attach-btn { position: relative; cursor: pointer; }
.composer-files:empty { display: none; }
.composer-files { margin: 6px 0; }
.msg-files { margin-top: 8px; }
.msg-files .gallery { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

@media (max-width: 400px) {
  .req-menu { gap: 8px; }
  .req-tile { padding: 14px 8px 12px; }
  .evi-dir button { padding: 8px 6px; }
}

.pi-title .evi-tag { justify-self: start; width: fit-content; margin: 2px 0 0; }

/* =====================================================================
   v7 – napi rutin (alvás, étkezés) és a két otthon összevetése
   ===================================================================== */
.routine-quick { display: grid; gap: 12px; }
.rq-head { display: grid; }
.rq-head small { color: var(--text-3); font-size: 0.8rem; }

/* Hol vannak? – kategorizált helyszínek */
.routine-places { display: grid; gap: 10px; }
.rp-head { display: flex; align-items: flex-start; gap: 8px; }
.rp-head .rq-head { flex: 1; min-width: 0; }
.rp-cats { display: grid; gap: 6px; }
.rp-cat {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}
.rp-cat-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: 0.88rem;
  color: var(--text-2);
}
.rp-cat-sum::-webkit-details-marker { display: none; }
.rp-cat-n {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 8px;
}
.rp-cat-chev { width: 16px; height: 16px; opacity: 0.55; transition: transform 0.15s var(--ease); }
.rp-cat[open] .rp-cat-chev { transform: rotate(180deg); }
.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}
.rp-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s, background 0.15s;
}
.rp-btn:hover { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-1px); }
.rp-btn:active { transform: scale(0.97); }
.rp-btn .e3d { width: 40px; height: 40px; }
.rp-btn b { font-size: 0.78rem; font-weight: 650; text-align: center; line-height: 1.2; }
.rp-modal-ico { display: flex; justify-content: center; margin-bottom: 8px; }
.rp-modal-ico .e3d { width: 56px; height: 56px; }
.rt-item.hely { background: color-mix(in srgb, var(--accent-softer) 80%, var(--surface-2)); }

.rpc-cats { display: grid; gap: 8px; max-height: min(52vh, 420px); overflow: auto; padding-right: 2px; }
.rpc-list { display: grid; gap: 6px; padding: 0 10px 10px; }
.rpc-row { position: relative; cursor: pointer; }
.rpc-row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rpc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.rpc-row input:checked + .rpc-card { border-color: var(--accent); background: var(--accent-softer); }
.rpc-row input:not(:checked) + .rpc-card { opacity: 0.55; }
.rpc-card b { flex: 1; font-size: 0.9rem; }
.rpc-del {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.rpc-del:hover { color: var(--danger); background: var(--danger-soft, #fde8e8); }
.rpc-add { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.rpc-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.rpc-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
.rpc-ico.on { border-color: var(--accent); background: var(--accent-softer); }
.rpc-ico .e3d { width: 26px; height: 26px; }
.rpc-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rpc-add-row .input { flex: 1 1 140px; min-width: 0; }
.rpc-add-row select.input { flex: 0 1 150px; }
.rq-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rq-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 6px 12px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s, background 0.15s;
}
.rq-btn:hover { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-2px); }
.rq-btn:active { transform: scale(0.97); }
.rq-btn .e3d { width: 46px; height: 46px; }
.rq-btn b { font-size: 0.9rem; }
.rq-buttons.sm { margin-top: 12px; gap: 8px; }
.rq-buttons.sm .rq-btn { padding: 10px 4px 8px; border-radius: 14px; }
.rq-buttons.sm .rq-btn .e3d { width: 34px; height: 34px; }
.rq-buttons.sm .rq-btn b { font-size: 0.8rem; }

.day-nav { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; }
.dn-mid { flex: 1; display: grid; text-align: center; }
.dn-mid b { font-size: 1.1rem; }
.dn-mid small { color: var(--text-3); font-size: 0.8rem; }

.routine-kids { display: grid; gap: 12px; }
@media (min-width: 900px) { .routine-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rt-kid { border-top: 4px solid var(--kid, var(--accent)); }
.rt-kid-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rt-kid-head b { font-size: 1.05rem; }
.rt-list { display: grid; gap: 6px; position: relative; }
.rt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.rt-item:hover { background: var(--surface-3); }
.rt-item.elalvas { background: color-mix(in srgb, var(--info-soft) 70%, var(--surface-2)); }
.rt-item.ebredes { background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface-2)); }
.rt-item.estimated .rt-time { color: var(--text-2); font-style: italic; }
.rt-inst { border-radius: 14px; background: color-mix(in srgb, var(--accent-softer) 55%, var(--surface-2)); }
.rt-inst > summary { list-style: none; cursor: pointer; }
.rt-inst > summary::-webkit-details-marker { display: none; }
.rt-inst-body { display: grid; gap: 6px; padding: 0 8px 8px; }
.rt-absent { margin: 0 0 10px; font-size: 0.9rem; }
.usual-day-card { display: grid; gap: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.usual-kid { display: grid; gap: 6px; padding-top: 4px; }
.usual-line { margin: 0; font-size: 0.95rem; color: var(--text-2); }
.napirend-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.napirend-row .grow { display: grid; gap: 2px; min-width: 0; }
.napirend-row small { display: block; }
.closure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.closure-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.88rem; }
.meal-row { display: flex; align-items: center; gap: 8px; }
.meal-row .input-sm { width: 7.5rem; }
.fever-ask { margin-bottom: 10px; }
.rt-time { width: 46px; flex-shrink: 0; font-weight: 750; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.rt-ico .e3d { width: 30px; height: 30px; }
.rt-text { flex: 1; min-width: 0; display: grid; }
.rt-text b { font-weight: 650; font-size: 0.9rem; }
.rt-food { font-weight: 500; }
.rt-text small { color: var(--text-2); font-size: 0.78rem; }

/* Két otthon összevetése */
.cmp-kid { display: grid; gap: 6px; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: minmax(84px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.cmp-head { font-size: 0.72rem; color: var(--text-3); font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; }
.cmp-row { padding: 6px 0; border-top: 1px solid var(--border); }
.cmp-label { font-size: 0.85rem; color: var(--text-2); }
.cmp-val { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cmp-val b { font-size: 0.95rem; }
.cmp-val .avatar3d.xs { width: 22px; height: 22px; }
.cmp-diff { font-size: 0.75rem; color: var(--text-3); text-align: right; }
.cmp-diff.big { color: var(--text); font-weight: 650; }
.cmp-insight { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--info-soft); font-size: 0.86rem; }
.cmp-insight.ok { background: var(--ok-soft); }
.cmp-chart { margin-top: 8px; }
@media (max-width: 420px) {
  .cmp-head, .cmp-row { grid-template-columns: minmax(70px, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-head span:last-child, .cmp-diff { display: none; }
}

/* Pontdiagram */
.chart-svg .dot { stroke: var(--surface); stroke-width: 2; }
.chart-svg .dot.apa { fill: var(--apa); }
.chart-svg .dot.anya { fill: var(--anya); }
.chart-svg .dot.none { fill: var(--text-3); }
.chart-svg .avg-line { stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.chart-svg .avg-line.apa { stroke: var(--apa); }
.chart-svg .avg-line.anya { stroke: var(--anya); }
.chart-svg .avg-label { fill: var(--text-2); font-size: 11px; font-weight: 600; }
.chart-svg circle.hit { fill: transparent; cursor: pointer; }
.chart-legend .avg-key { width: 16px; height: 0; border-top: 2px dashed var(--text-3); border-radius: 0; }

/* Gyerekválasztó a gyors rögzítésben */
.kid-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.kid-opt { position: relative; cursor: pointer; }
.kid-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kid-opt-card { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.kid-opt input:checked + .kid-opt-card { border-color: var(--accent); background: var(--accent-softer); }
.kid-opt input:not(:checked) + .kid-opt-card { opacity: 0.55; }
.kid-opt input:focus-visible + .kid-opt-card { outline: 3px solid var(--ring); outline-offset: 2px; }
.food-sugg { margin-top: -6px; }
.food-sugg .suggest { padding: 6px 10px; font-size: 0.8rem; }

/* Kezdőlapi kártya */
.rm-kids { display: grid; gap: 8px; }
.rm-kid { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.rm-kid:hover { text-decoration: none; background: var(--surface-3); }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--surface); font-size: 0.78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rm-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; }
.rm-status.sleeping { color: var(--info); }
.rm-status.muted { color: var(--text-3); font-weight: 500; }

/* =====================================================================
   v8 – szabálysablonok, szobatisztaság gyorsgombok, láz, jutalomtábla,
   gyerek nézet, óvoda, ötletbank
   ===================================================================== */

/* Szabálysablonok */
.tpl-card { display: grid; gap: 10px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.tpl { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; border: 1.5px dashed var(--border-strong); background: var(--surface); font: inherit; color: inherit; cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease); }
.tpl:hover { border-color: var(--accent); background: var(--accent-softer); transform: translateY(-2px); }
.tpl .e3d { width: 36px; height: 36px; }
.tpl b { font-size: 0.86rem; line-height: 1.2; }
.tpl small { font-size: 0.72rem; color: var(--text-3); }

/* Átadási jegyzet: kitöltés a napi rutinból */
.prefill-btn { justify-self: start; flex-wrap: wrap; }
.prefill-btn small { font-weight: 500; color: var(--text-2); }

/* Szobatisztaság gyorsgombok */
.potty-block { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: 16px; background: var(--surface-2); }
.pb-title { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 650; color: var(--text-2); }
.pt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pt-tile { position: relative; }
.pt-add { width: 100%; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); font: inherit; color: inherit; cursor: pointer; }
.pt-add:active { transform: scale(0.96); }
.pt-add .e3d { width: 30px; height: 30px; }
.pt-add b { font-size: 0.7rem; line-height: 1.15; text-align: center; font-weight: 650; }
.pt-n { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pt-tile.pee_ok .pt-add, .pt-tile.poop_ok .pt-add { border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.pt-tile.pee_ok .pt-n, .pt-tile.poop_ok .pt-n { color: var(--ok); }
.pt-tile.wet .pt-n, .pt-tile.soiled .pt-n { color: var(--text-2); }
.pt-undo { position: absolute; top: -6px; right: -4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-weight: 800; line-height: 1; cursor: pointer; color: var(--text-2); }

/* Láz */
.temp-list { display: grid; gap: 6px; }
.temp-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.tr-time { width: 92px; flex-shrink: 0; }
.temp-val { font-size: 1rem; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 8px; }
.temp-val.hot, .temp-chip.hot { background: var(--danger-soft); color: var(--danger); }
.temp-val.warm, .temp-chip.warm { background: var(--warn-soft); color: var(--text); }
.temp-val.ok, .temp-chip.ok { background: var(--ok-soft); color: var(--ok); }
.temp-now { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.temp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; }
.temp-chip small { font-size: 0.72rem; opacity: 0.85; }

/* Emlék-típus szűrő */
.kind-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.kind-chips::-webkit-scrollbar { display: none; }
.kind-chip { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 6px 12px 6px 7px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 0.82rem; cursor: pointer; color: var(--text-2); }
.kind-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Jutalomtábla */
.kid-goals { display: grid; gap: 10px; }
.kg-head { display: flex; align-items: center; gap: 10px; }
.kg-head b { font-size: 1.1rem; }
.goal-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .goal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.goal-card { display: grid; gap: 10px; border-top: 4px solid var(--kid, var(--accent)); }
.gc-head { display: flex; align-items: center; gap: 10px; }
.gc-head small { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 0.8rem; }
.gc3d { width: 42px !important; height: 42px !important; }
.sticker-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sticker-board.dense { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sticker { position: relative; aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; }
.sticker.off { border: 2px dashed var(--border-strong); color: var(--text-3); font-size: 0.75rem; font-weight: 650; }
.sticker.on { border: 0; background: var(--warn-soft); cursor: pointer; padding: 0; animation: pop-in 0.35s var(--ease) both; }
.sticker.on .e3d { width: 72%; height: 72%; }
.st-by { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.st-by.apa { background: var(--apa); }
.st-by.anya { background: var(--anya); }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.goal-progress { display: flex; align-items: center; gap: 10px; }
.sticker-btn { font-size: 1rem; padding-top: 12px; padding-bottom: 12px; }
.done-goals { display: grid; gap: 6px; }
.done-goal { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--ok-soft); font-size: 0.86rem; }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-opt { position: relative; cursor: pointer; }
.ip-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ip-opt span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--border); background: var(--surface); }
.ip-opt .e3d { width: 30px; height: 30px; }
.ip-opt input:checked + span { border-color: var(--accent); background: var(--accent-softer); }
.ip-opt input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.kc-goal { display: flex; align-items: center; gap: 4px; }
.st-links { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.st-links a { display: inline-flex; align-items: center; gap: 4px; }

/* Gyerek nézet – nagy, képes, kevés szöveg */
/* Gyerek nézet: a sidebar display:none után a grid ne tartson üres bal oszlopot */
body.kid-mode .shell {
  display: block !important;
  min-height: 100dvh;
}
body.kid-mode .sidebar,
body.kid-mode .topbar,
body.kid-mode .bottom-nav,
body.kid-mode .fab,
body.kid-mode .test-banner { display: none !important; }
body.kid-mode .main-col { min-height: 100dvh; width: 100%; }
body.kid-mode .view { padding: 0; max-width: none; width: 100%; }
body.kid-mode {
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn-soft) 80%, var(--bg)) 0%, var(--bg) 60%);
}
.kid-view {
  display: grid;
  gap: 16px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .kid-view {
    width: min(100%, 640px);
    gap: 22px;
    padding: 36px 28px 48px;
  }
  .kid-view.pick h1 { font-size: 2.6rem; }
  .kv-kid { min-width: 180px; padding: 28px 32px; font-size: 1.55rem; }
  .kv-today h1 { font-size: clamp(2rem, 3vw, 2.6rem); }
  .kv-week { gap: 10px; }
  .kv-day { padding: 14px 6px; border-radius: 22px; font-size: 0.95rem; }
}
.kv-top { display: flex; align-items: center; gap: 10px; }
.kv-hello { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 800; }
.kv-exit { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); }
.kv-speak { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; }
.kv-speak .e3d { width: 36px; height: 36px; }
.kv-today { text-align: center; padding: 20px 16px 22px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.kv-today.apa { background: linear-gradient(180deg, var(--apa-soft), var(--surface)); }
.kv-today.anya { background: linear-gradient(180deg, var(--anya-soft), var(--surface)); }
.kv-label { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; color: var(--text-2); }
.kv-scene { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 10px 0 6px; }
.kv-scene .avatar3d.xxl { width: 132px; height: 132px; }
.kv-house { width: 92px !important; height: 92px !important; }
.kv-big3d { width: 120px !important; height: 120px !important; }
.kv-today h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; }
.kv-who { display: inline-block; padding: 0 10px; border-radius: 12px; }
.kv-today.apa .kv-who { background: var(--apa); color: #fff; }
.kv-today.anya .kv-who { background: var(--anya); color: #fff; }
.kv-sub { margin-top: 8px; font-size: 1.15rem; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.kv-count { display: grid; justify-items: center; gap: 8px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); text-align: center; font-size: 1.2rem; }
.kv-moons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kv-moon { width: 40px !important; height: 40px !important; }
.kv-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kv-day { display: grid; justify-items: center; gap: 6px; padding: 10px 2px; border-radius: 18px; background: var(--surface); font-weight: 800; font-size: 0.85rem; }
.kv-day.apa { background: var(--apa-soft); }
.kv-day.anya { background: var(--anya-soft); }
.kv-day.today { box-shadow: inset 0 0 0 3px var(--accent); }
.kv-q { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 1.2rem; color: var(--text-3); }
.kv-events { display: grid; gap: 10px; }
.kv-ev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 1.2rem; }
.kv-ev small { margin-left: auto; font-weight: 700; color: var(--text-2); }
.kv-ev3d { width: 52px !important; height: 52px !important; }
.kv-bring { padding: 12px 14px; border-radius: 20px; background: var(--warn-soft); font-size: 1.1rem; display: grid; gap: 8px; }
.kv-bring > div { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface); font-weight: 700; }
.kv-item small { font-weight: 500; color: var(--text-3); }
.kv-item3d { width: 32px !important; height: 32px !important; }
.kv-goals { display: grid; gap: 12px; }
.kv-goal { padding: 14px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); display: grid; gap: 10px; }
.kvg-head { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.kvg-reward { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-2); }
.sticker-board.big .sticker.off { font-size: 0.9rem; }
.kid-view.pick {
  position: relative;
  text-align: center;
  align-content: center;
  justify-items: center;
  min-height: min(92dvh, 920px);
}
.kid-view.pick .kv-exit {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 16px;
}
.kid-view.pick h1 { font-size: 2rem; margin: 0 0 8px; }
.kv-pick { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; width: 100%; }
.kv-kid { display: grid; justify-items: center; gap: 10px; padding: 22px 26px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; font-size: 1.4rem; border-top: 6px solid var(--kid); }
.kv-kid:hover { text-decoration: none; transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .sticker.on { animation: none; } }

/* Óvoda */
.school-quick { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-bottom: 4px; }
.school-quick .quick { font: inherit; cursor: pointer; }
.school-kids { display: grid; gap: 12px; }
@media (min-width: 720px) { .school-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.school-kid { border-top: 4px solid var(--kid, var(--accent)); display: grid; gap: 8px; }
.school-kid .rt-kid-head small { display: block; font-size: 0.8rem; }
button.tl-row { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* Élménybázis – eszköztár / feladatlap (nem blog) */
.idea-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .idea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elmeny-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.elmeny-title { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; margin: 0; letter-spacing: 0.01em; }
.mission {
  display: grid; gap: 12px; text-align: left;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #2a3328) 0%, var(--surface) 48%),
    var(--surface);
}
.mission.done { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.mission-head { display: flex; gap: 12px; align-items: flex-start; }
.mission-mod { position: relative; margin-left: auto; flex-shrink: 0; }
.mission-mod > summary { list-style: none; cursor: pointer; }
.mission-mod > summary::-webkit-details-marker { display: none; }
.mission-mod-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  display: grid;
  gap: 2px;
}
.mission-mod-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mission-mod-menu button:hover { background: var(--surface-2); }
.mission-kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 2px;
}
.mission-title { margin: 0; font-size: 1.05rem; line-height: 1.25; font-weight: 700; }
.mission-ico .e3d, .idea3d .e3d { width: 46px; height: 46px; }
.mission-params {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mission-params .mp {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 9px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.mission-params .mp b {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
}
.mission-params .mp.soft { opacity: 0.9; }
.mission-goal {
  margin: 0; font-size: 0.9rem; color: var(--text-2);
  padding: 8px 10px; border-radius: 10px; background: var(--surface-2);
}
.mission-steps {
  margin: 0; padding: 0 0 0 1.15rem; display: grid; gap: 6px;
  font-size: 0.9rem; color: var(--text); line-height: 1.35;
}
.mission-steps li::marker { font-weight: 700; color: var(--accent-ink); }
.mission-foot { display: grid; gap: 8px; }
.mission-done-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 650; color: var(--ok); font-size: 0.92rem;
}
.mission-complete { display: grid; gap: 8px; }
.idea-img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.idea-place { display: flex; align-items: center; gap: 4px; text-align: left; font-size: 0.84rem; margin-top: 2px; }
.ok-text { color: var(--ok); }

@media (max-width: 400px) {
  .pt-add b { font-size: 0.62rem; }
  .school-quick { gap: 6px; }
  .kv-day { padding: 8px 0; }
  .kv-day .avatar3d.md { width: 34px; height: 34px; }
}
@media (max-width: 420px) { .school-quick { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* =====================================================================
   v9 – fotónapló: napi fotók a naptárban, képnézegető, előnézeti képek
   ===================================================================== */

/* Galéria elemek gombként (koppintásra képnézegető) */
.gallery .g-img { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); cursor: zoom-in; }
.photo { border: 0; padding: 0; width: 100%; cursor: zoom-in; font: inherit; }
button.memory-img { position: relative; width: 100%; border: 0; padding: 0; cursor: zoom-in; }
.mi-count { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.75rem; font-weight: 700; }
.idea-imgbtn { border: 0; padding: 0; background: none; cursor: zoom-in; flex-shrink: 0; }

/* Napi fotók a naptárban */
.day-photos { display: grid; gap: 8px; margin-top: 12px; }
.dph-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dph-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.dph-head small { color: var(--text-3); font-size: 0.78rem; }
.dph-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: thin; }
.dph-add, .dph-thumb, .dph-skel { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 14px; scroll-snap-align: start; }
.dph-add { display: grid; place-content: center; justify-items: center; gap: 2px; border: 1.5px dashed var(--accent); background: var(--accent-softer); color: var(--accent-ink); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.dph-thumb { padding: 0; border: 0; overflow: hidden; background: var(--surface-2); cursor: zoom-in; box-shadow: var(--shadow-sm); }
.dph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dph-skel { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
.cal-ph { display: inline-flex; color: var(--accent); margin-left: 1px; }
.cal-ph svg.lucide { width: 12px; height: 12px; }

/* Képnézegető */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 8, 10, 0.96); color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.lb-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.lb-top { display: flex; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 10px 6px; }
.lb-count { font-size: 0.9rem; font-weight: 650; opacity: 0.85; padding-left: 6px; }
.lb-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.22); text-decoration: none; }
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; touch-action: pan-y pinch-zoom; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-select: none; animation: lb-in 0.18s ease both; }
@keyframes lb-in { from { opacity: 0.4; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.lb-nav.prev { left: 10px; }
.lb-nav.next { right: 10px; }
@media (hover: none) { .lb-nav { display: none; } }
.lb-cap { display: grid; gap: 2px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.lb-cap b { font-size: 1rem; }
.lb-cap small { opacity: 0.75; font-size: 0.82rem; }
.lb-cap a { display: inline-flex; align-items: center; gap: 6px; color: #9fd8c9; font-size: 0.86rem; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .lb-img { animation: none; } .dph-skel { animation: none; } }

/* Közelgő lista: a cím teljes szélességben (két sorig), alatta a gyerekek figurája és a jelölések */
.tl-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.tl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.tl-meta:empty { display: none; }
.kid-faces { display: inline-flex; }
.kid-faces .kid3d + .kid3d { margin-left: -6px; }
.kid-faces .kid3d { box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; }

/* Napi rutin: Pisi/kaki gyorsgomb (4 oszlop), választó, összesítő */
.rq-buttons.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rq-buttons.four .rq-btn b { font-size: 0.82rem; }
@media (max-width: 400px) { .rq-buttons.four { gap: 6px; } .rq-buttons.four .rq-btn { padding: 10px 2px 8px; } .rq-buttons.four .rq-btn .e3d { width: 38px; height: 38px; } }
.pq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pq-tile { display: grid; justify-items: center; gap: 6px; padding: 16px 8px; border-radius: 18px; border: 2px solid var(--border); background: var(--surface); font: inherit; color: inherit; cursor: pointer; transition: transform 0.12s var(--ease); }
.pq-tile:active { transform: scale(0.96); }
.pq-tile .e3d { width: 52px; height: 52px; }
.pq-tile b { font-size: 0.95rem; }
.pq-tile.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: var(--ok-soft); }
.pq-tile.acc { background: var(--surface-2); }
.pq-report { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.86rem; }
button.kid-opt-card { font: inherit; color: inherit; cursor: pointer; }
.kid-opt-card.sel { border-color: var(--accent); background: var(--accent-softer); }
.pb-link { margin-left: auto; font-weight: 600; font-size: 0.78rem; }

.report-card { display: grid; gap: 14px; }
.rp-head { display: flex; align-items: center; gap: 12px; }
.rp-head h1 { font-size: 1.3rem; }
.rp-head p { color: var(--text-2); font-size: 0.86rem; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.rp-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.rp-tile b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.rp-tile span { font-size: 0.8rem; color: var(--text-2); display: grid; }
.rp-tile small { font-size: 0.72rem; color: var(--text-3); }
.rp-tile.ok b { color: var(--ok); }
.rp-rule { padding: 12px 14px; border-radius: 14px; background: var(--info-soft); font-size: 0.88rem; }
.rp-table tr.no-data td { color: var(--text-3); }
.rp-foot { margin: 0; }
@media print {
  .report-card { border: 0; padding: 0; }
  .report-card details, .report-card .chart-tip { display: none !important; }
  .rp-tile { border: 1px solid #ccc; }
}
.report-tools .seg { flex: 1 1 100%; }
.report-tools .seg button { flex: 1; }
.report-tools .btn { flex: 1 1 140px; justify-content: center; }
.rp-chart details { display: none; }
.rp-table td, .rp-table th { padding-left: 8px; padding-right: 8px; }

/* Megfelelőség: paywall, engedély, PIN, GDPR, jogi oldalak */
.legal-box { margin-top: 16px; display: grid; gap: 10px; text-align: left; }
.lang-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-row.center { justify-content: center; }
.privacy-reg .reg-steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.privacy-reg .reg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.privacy-reg .reg-dot.on { background: var(--accent); }
.privacy-reg .reg-step-label { margin-bottom: 12px; }
.reg-card, .reg-notice {
  text-align: left; padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); margin: 14px 0;
}
.reg-bullets { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; font-size: 0.92rem; color: var(--text-2); }
.reg-consents { text-align: left; display: grid; gap: 10px; }
.reg-check { align-items: flex-start; }
.reg-check.optional { opacity: 0.95; }
.perm-sheet { display: grid; gap: 10px; justify-items: center; text-align: center; }
.perm-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-softer); color: var(--accent-ink); display: grid; place-items: center; }
.paywall { display: grid; gap: 12px; }
.paywall-hero {
  display: grid; gap: 8px; justify-items: start;
  padding: 14px 16px; border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.paywall-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.paywall-price.compact { margin-bottom: 4px; }
.paywall-amount { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-ink); }
.paywall-period { font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.paywall-family { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.92rem; font-weight: 650; }
.paywall-lead { margin: 0; }
.paywall-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paywall-list li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.paywall-one { margin-top: 2px; }

/* Új Prémium bemutató – érték-először, nem „rásózós” */
.pw { display: grid; gap: 14px; }
.pw-lead { margin: 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.45; }
.pw-promise {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ok, #2f6f5e) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok, #2f6f5e) 28%, var(--border));
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}
.pw-cols {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pw-cols { grid-template-columns: 1fr 1.15fr; align-items: start; }
}
.pw-col {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.pw-col-head {
  padding: 14px 14px 10px;
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.pw-col-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pw-col-head p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-3);
  line-height: 1.35;
}
.pw-pill {
  display: inline-flex;
  align-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pw-pill.free {
  background: color-mix(in srgb, var(--ok, #2f6f5e) 16%, transparent);
  color: color-mix(in srgb, var(--ok, #2f6f5e) 80%, var(--text));
}
.pw-pill.pro {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink);
}
.pw-items, .pw-benefits {
  list-style: none;
  margin: 0;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.pw-items li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 8px;
  font-size: 0.9rem;
  color: var(--text-2);
}
.pw-benefit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
}
.pw-benefit.focus {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  outline: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.pw-benefit strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.pw-benefit small {
  display: block;
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.35;
}
.pw-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--accent-ink);
  border: 1px solid var(--border);
}
.pw-ico svg { width: 18px; height: 18px; }
.pw-pro .pw-ico {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.pw-price-row {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
}
.pw-price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pw-amount {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pw-period { font-size: 0.9rem; color: var(--text-3); font-weight: 600; }
.pw-family { margin: 4px 0 0; font-size: 0.9rem; font-weight: 650; color: var(--text); }
.pw-one { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-3); line-height: 1.35; }
.pw-note { margin: 0; font-size: 0.75rem; color: var(--text-3); line-height: 1.4; }

/* U03 · új Prémium bemutató (pw2) */
dialog.modal.pw-modal .modal-head h2 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
dialog.modal.pw-modal .modal-panel {
  max-height: 100vh;
  max-height: 100dvh;
  height: 100%;
  border-radius: 0;
}
dialog.modal.pw-modal .modal-panel::before { display: none; }
dialog.modal.pw-modal .modal-body { padding-top: 0; flex: 1; }
dialog.modal.pw-modal .modal-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--surface);
  flex-direction: column-reverse;
  gap: 10px;
}
dialog.modal.pw-modal .modal-foot .btn {
  width: 100%;
  flex: 1 1 auto;
}
dialog.modal.pw-modal .modal-foot .btn-ghost {
  border: none;
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 640px) {
  dialog.modal.pw-modal .modal-panel {
    max-width: 520px;
    height: auto;
    max-height: min(92vh, 920px);
    border-radius: var(--radius-lg);
  }
  dialog.modal.pw-modal .modal-foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  dialog.modal.pw-modal .modal-foot .btn { width: auto; }
  dialog.modal.pw-modal .modal-foot .btn-primary { min-width: 220px; }
}

/* U03b · fotós, letisztult Prémium bemutató */
.pw2 { display: grid; gap: 16px; }
.pw2-hero {
  position: relative;
  margin: 0 -20px;
  height: 300px;
  overflow: hidden;
  background: #6b5a4a;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (min-width: 640px) {
  .pw2-hero {
    margin: 0 -22px;
    height: 240px;
  }
}
.pw2-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pw2-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 24, 22, 0.78), rgba(20, 24, 22, 0.15));
  pointer-events: none;
}
[data-theme='dark'] .pw2-hero-shade {
  background: linear-gradient(to top, rgba(10, 12, 11, 0.88), rgba(10, 12, 11, 0.28));
}
.pw2-beta-badge {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  color: #fff;
}
.pw2-hero-copy {
  position: relative;
  z-index: 1;
  padding: 24px 20px 16px;
  text-align: left;
}
@media (min-width: 640px) {
  .pw2-hero-copy { padding: 24px 22px 16px; }
}
.pw2-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
}
.pw2-sub {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  max-width: 36em;
}

.pw2-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pw2-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pw2-row:last-child { border-bottom: none; }
.pw2-row.focus {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.pw2-row-ico {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink);
}
.pw2-row-ico svg { width: 20px; height: 20px; }
.pw2-row-text { min-width: 0; flex: 1; }
.pw2-row-text h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.pw2-row-text p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.4;
}

.pw2-free {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-2);
}
.pw2-free-check {
  flex: 0 0 auto;
  color: var(--accent);
  margin-top: 2px;
}
.pw2-free-check svg { width: 16px; height: 16px; }

.pw2-price {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.pw2-price-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pw2-amount {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}
.pw2-period { font-size: 0.95rem; font-weight: 650; color: var(--text-2); }
.pw2-price-note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.4;
}

.pw2-thanks, .pw2-thanks-inline {
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-ink);
  font-weight: 700;
  text-align: center;
}
.pw2-thanks-inline {
  flex: 1;
  display: grid;
  place-items: center;
}

.pw2-trust {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.01em;
}

.sidebar-me {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
}
.sidebar-me .avatar3d.md { flex-shrink: 0; }
.sidebar-me-text { min-width: 0; overflow: hidden; }
.sidebar-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
}
.sidebar-avatar-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.premium-head-badge {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 72px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1.5px solid #c9a227;
  background: linear-gradient(180deg, #fff8dc, #f0d78c);
  color: #6b4e00;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.premium-head-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.premium-head-badge.trial {
  border-color: color-mix(in srgb, var(--info) 55%, #fff);
  background: linear-gradient(180deg, #e8f4ff, #cfe7ff);
  color: var(--info);
}
.premium-head-badge.off {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, #fff), color-mix(in srgb, var(--accent) 28%, #fff));
  color: var(--accent-ink);
}
.premium-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1.5px solid #c9a227;
  background: linear-gradient(180deg, #fff8dc, #f0d78c);
  color: #6b4e00;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.35;
  cursor: pointer;
  font-family: inherit;
}
.premium-inline.trial {
  border-color: color-mix(in srgb, var(--info) 55%, #fff);
  background: linear-gradient(180deg, #e8f4ff, #cfe7ff);
  color: var(--info);
}
.premium-inline.off {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, #fff), color-mix(in srgb, var(--accent) 24%, #fff));
  color: var(--accent-ink);
}
.sidebar-me-name {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.sidebar-me-name .ellipsis {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-foot { overflow: hidden; }
.invite-card .gi-top b { line-height: 1.25; }
.invite-card .btn-soft { justify-self: start; }

.lang-flags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  justify-items: stretch;
  margin: 8px 0 4px;
}
.lang-flags .lang-label {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
}
.lang-flag {
  display: grid; justify-items: center; gap: 6px;
  min-width: 0; padding: 10px 6px;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: inherit; font: inherit; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.lang-flag:hover { transform: translateY(-2px); }
.lang-flag.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.lang-flag-tile {
  width: 100%;
  max-width: 56px;
  aspect-ratio: 3 / 2;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}
.lang-flag-tile .flag-svg { width: 100%; height: 100%; display: block; }
.lang-emoji { font-size: 1.65rem; line-height: 1; }
.lang-name { font-size: 0.72rem; font-weight: 700; color: var(--text-2); }
.reg-nav { display: grid; gap: 8px; margin-top: 16px; }
.reg-cookie-note { margin: 4px 0 8px; }
.danger-zone { display: grid; gap: 10px; }
.pin-lock { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: grid; place-items: center; padding: 24px; }
.pin-card { width: min(360px, 100%); display: grid; gap: 12px; background: var(--surface); padding: 24px; border-radius: 20px; border: 1px solid var(--border); }
.sensitive-screen, .sensitive-input { -webkit-user-select: none; user-select: none; }
.sensitive-input { -webkit-text-security: disc; }
.legal-page { background: var(--bg); color: var(--text); }
.legal-doc { max-width: 720px; margin: 0 auto; padding: 28px 18px 80px; display: grid; gap: 12px; }
.legal-doc h1 { font-size: 1.6rem; }
.legal-doc h2 { font-size: 1.1rem; margin-top: 12px; }
.billing-card { display: grid; gap: 10px; }

/* Fejlesztési Iránytű + kérdőív + tesztlabor */
.roadmap { display: grid; gap: 18px; }
.roadmap-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.roadmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.roadmap-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
}
.roadmap-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.roadmap-title { font-weight: 650; }
.vote-btn {
  flex: 0 0 auto; min-width: 64px; flex-direction: column; gap: 2px;
  border-radius: 14px; padding: 8px 10px;
}
.vote-btn.voted { background: var(--accent-softer); color: var(--accent-ink); border-color: transparent; }
.roadmap-ideas { margin-top: 8px; }
.survey-invite, .survey-step { display: grid; gap: 10px; }
.testlab { display: grid; gap: 10px; }
.billing-chip {
  padding: 8px 12px; border-radius: 12px;
  background: var(--surface-2); font-size: 0.92rem;
}
.test-banner {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.test-banner strong { letter-spacing: 0.04em; }
.test-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.test-banner a, .test-banner .linkish {
  color: var(--accent-ink); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline;
}
.viewer-banner {
  background: color-mix(in srgb, #2a6f6a 16%, var(--surface));
}
.demo-banner {
  background: color-mix(in srgb, #6b7c5e 14%, var(--surface));
}
.badge.soft { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.viewer-toggles { display: grid; gap: 8px; margin-top: 8px; }
.viewers-panel .linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent-ink);
  cursor: pointer; text-decoration: underline;
}
.invite-accept .invite-perms {
  list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 8px;
}
.invite-accept .invite-perms li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 0.92rem;
}
.invite-accept .invite-perms li.ok { border-left: 3px solid var(--ok, #2a8f5a); }
.invite-accept .invite-perms li.off { opacity: 0.72; border-left: 3px solid var(--muted); }
.idea-photo-policy { margin-bottom: 8px; }

/* ---- Insights (eduk�ci�s tippek) ---- */
.insights-section { margin: 4px 0 14px; }
.insights-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-softer) 55%, var(--surface));
  overflow: hidden;
}
.insights-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.insights-sum::-webkit-details-marker { display: none; }
.is-ico .e3d { width: 28px; height: 28px; }
.is-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.is-text b { font-size: 0.95rem; font-weight: 700; }
.is-text small { color: var(--text-3); font-size: 0.78rem; }
.is-count {
  font-size: 0.72rem;
  font-weight: 750;
  background: var(--surface);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-2);
}
.is-chev { width: 16px; height: 16px; opacity: 0.5; transition: transform 0.15s var(--ease); }
.insights-panel[open] .is-chev { transform: rotate(180deg); }
.insights-disc { margin: 0 14px 8px; }
.insights-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 12px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.insights-track > [role=listitem] { flex: 0 0 min(92%, 340px); scroll-snap-align: start; }
.insights-inline { display: grid; gap: 10px; margin: 0 0 12px; }
.insight-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: opacity 0.2s, transform 0.2s;
}
.insight-card.attention {
  border-color: color-mix(in srgb, var(--warn, #c98500) 35%, var(--border));
  background: color-mix(in srgb, var(--warn-soft, #fff3d6) 50%, var(--surface));
}
.insight-card.ic-out { opacity: 0; transform: translateY(-6px); }
.ic-top { display: flex; align-items: flex-start; gap: 10px; }
.ic-ico .e3d { width: 36px; height: 36px; }
.ic-head { display: grid; gap: 2px; min-width: 0; }
.ic-head b { font-size: 0.95rem; font-weight: 700; line-height: 1.25; }
.ic-who { color: var(--text-3); font-size: 0.78rem; }
.ic-body { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--text-2); }
.ic-cite { margin: 0; font-size: 0.72rem; color: var(--text-3); line-height: 1.35; }
.ic-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }

/* ---- Growth cards (megh�v�, �tad�s, pr�mium doc, bolt) ---- */
.growth-stack { display: grid; gap: 10px; margin: 4px 0 12px; }
.growth-card { position: relative; display: grid; gap: 10px; }
.growth-card.embedded { padding: 0; border: 0; background: transparent; }
.gi-x { position: absolute; top: 8px; right: 8px; }
.gi-top { display: flex; align-items: flex-start; gap: 12px; padding-right: 28px; }
.growth-card.embedded .gi-top { padding-right: 0; }
.gi-top > div { display: grid; gap: 2px; min-width: 0; }
.gi-top b { font-size: 1.02rem; }
.gi-top small { color: var(--text-3); font-size: 0.82rem; line-height: 1.35; }
.gi-teaser {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-softer); font-size: 0.86rem; color: var(--text-2);
}
.gi-teaser.ok { background: var(--ok-soft); }
.gi-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gi-url {
  flex: 1 1 160px; min-width: 0; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gi-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-kids { display: grid; gap: 10px; }
.brief-kid { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.brief-kid b { font-size: 0.92rem; }
.brief-kid ul { margin: 6px 0 0; padding-left: 1.1rem; color: var(--text-2); font-size: 0.84rem; }
.brief-kid li { margin: 2px 0; }
.premium-doc-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); background: color-mix(in srgb, var(--accent-softer) 40%, var(--surface)); }
.store-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.store-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
}
.store-list li.ok { border-color: color-mix(in srgb, var(--ok, #2a8f5a) 35%, var(--border)); }
.store-list li span { display: grid; gap: 2px; }
.store-list li b { font-size: 0.9rem; }
.store-list li small { color: var(--text-3); font-size: 0.78rem; }

/* ---- Igazs�gos sorsol� + 3D kocka ---- */
.fs-desc { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.45; color: var(--text-2); }
.fs-desc.tight { margin-bottom: 8px; }
.fs-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fs-mode { width: 100%; }
.fs-mode button { flex: 1; font-size: 0.8rem; }
.fs-shake-box {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  margin-top: 14px; padding: 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent-softer) 55%, var(--surface-2));
  border: 1px solid var(--border);
}
.fs-shake-box.compact { margin-top: 8px; padding: 10px; }
.fs-stage { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 8px 0; }
.fs-lead { margin: 0; font-weight: 650; }
.fs-winner { display: flex; align-items: center; gap: 14px; text-align: left; }
.fs-winner b { font-size: 1.25rem; display: block; }
.fs-winner small { color: var(--text-2); }
.fs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 650;
  background: var(--ok-soft); color: var(--text);
}
.fs-badge.soft { background: var(--surface-2); }
.fs-scores {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
  text-align: left;
}
.fs-score {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2);
}
.fs-score.done { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent-softer) 70%, var(--surface)); }
.fs-score b { display: block; font-size: 0.92rem; }
.fs-score span { display: block; font-size: 0.78rem; color: var(--text-2); }
.fs-dual-dice { display: flex; gap: 28px; align-items: flex-end; justify-content: center; }
.fs-die-col { display: grid; gap: 6px; justify-items: center; }
.fs-my-roll { display: grid; gap: 4px; justify-items: center; }

/* 3D dob�kocka */
.dice3d-scene {
  width: 88px; height: 88px; perspective: 640px;
  display: grid; place-items: center;
  margin: 6px auto;
}
.dice3d {
  width: 64px; height: 64px; position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dice3d.is-spinning {
  animation: dice3d-tumble 0.55s linear infinite;
}
@keyframes dice3d-tumble {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(300deg) rotateZ(180deg); }
}
.dice3d[data-face="1"] { transform: rotateX(0deg) rotateY(0deg); }
.dice3d[data-face="2"] { transform: rotateY(-90deg); }
.dice3d[data-face="3"] { transform: rotateX(90deg); }
.dice3d[data-face="4"] { transform: rotateX(-90deg); }
.dice3d[data-face="5"] { transform: rotateY(90deg); }
.dice3d[data-face="6"] { transform: rotateX(180deg); }
.dice3d-face {
  position: absolute; inset: 0;
  display: grid; padding: 10px; box-sizing: border-box;
  background: linear-gradient(145deg, #fffdf8 0%, #f3ebe0 55%, #e8ddd0 100%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, #c4b59a);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 8px 18px rgba(40, 32, 24, 0.12);
  backface-visibility: hidden;
}
.dice3d-face .pip {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5046, #2c2924 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  align-self: center; justify-self: center;
}
.dice3d-face.f1 { transform: translateZ(32px); grid-template: 1fr / 1fr; }
.dice3d-face.f2 { transform: rotateY(90deg) translateZ(32px); grid-template: 1fr 1fr / 1fr; }
.dice3d-face.f2 .pip:nth-child(1) { justify-self: start; align-self: start; }
.dice3d-face.f2 .pip:nth-child(2) { justify-self: end; align-self: end; }
.dice3d-face.f3 { transform: rotateX(-90deg) translateZ(32px); grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; }
.dice3d-face.f3 .pip:nth-child(1) { grid-area: 1 / 1; }
.dice3d-face.f3 .pip:nth-child(2) { grid-area: 2 / 2; }
.dice3d-face.f3 .pip:nth-child(3) { grid-area: 3 / 3; }
.dice3d-face.f4 { transform: rotateX(90deg) translateZ(32px); grid-template: 1fr 1fr / 1fr 1fr; }
.dice3d-face.f4 .pip:nth-child(1) { justify-self: start; align-self: start; }
.dice3d-face.f4 .pip:nth-child(2) { justify-self: end; align-self: start; }
.dice3d-face.f4 .pip:nth-child(3) { justify-self: start; align-self: end; }
.dice3d-face.f4 .pip:nth-child(4) { justify-self: end; align-self: end; }
.dice3d-face.f5 { transform: rotateY(-90deg) translateZ(32px); grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; }
.dice3d-face.f5 .pip:nth-child(1) { grid-area: 1 / 1; }
.dice3d-face.f5 .pip:nth-child(2) { grid-area: 1 / 3; }
.dice3d-face.f5 .pip:nth-child(3) { grid-area: 2 / 2; }
.dice3d-face.f5 .pip:nth-child(4) { grid-area: 3 / 1; }
.dice3d-face.f5 .pip:nth-child(5) { grid-area: 3 / 3; }
.dice3d-face.f6 { transform: rotateX(180deg) translateZ(32px); grid-template: 1fr 1fr 1fr / 1fr 1fr; }
.dice3d-face.f6 .pip:nth-child(1) { grid-area: 1 / 1; justify-self: start; }
.dice3d-face.f6 .pip:nth-child(2) { grid-area: 1 / 2; justify-self: end; }
.dice3d-face.f6 .pip:nth-child(3) { grid-area: 2 / 1; justify-self: start; }
.dice3d-face.f6 .pip:nth-child(4) { grid-area: 2 / 2; justify-self: end; }
.dice3d-face.f6 .pip:nth-child(5) { grid-area: 3 / 1; justify-self: start; }
.dice3d-face.f6 .pip:nth-child(6) { grid-area: 3 / 2; justify-self: end; }
@media (prefers-reduced-motion: reduce) {
  .dice3d.is-spinning { animation: none; }
  .dice3d { transition: none; }
}

/* ---- Barátságos regisztráció: nagy zászló-lapozó + funkció-bemutató ---- */
.friendly-reg .picker-brand .brand-mark.warm {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(145deg, #fff8f0, #efe6d8);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
}
.friendly-reg .brand3d { width: 40px; height: 40px; }
.friendly-reg .brand-mark.soft {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}
.friendly-reg .picker-inner { max-width: 420px; text-align: center; }
.friendly-reg h1 { font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 0; text-align: center; }
.friendly-reg .lead { font-size: 0.95rem; line-height: 1.45; margin: 8px 0 18px; text-align: center; }
.friendly-reg .reg-mini { text-align: center; }
.friendly-reg .form,
.friendly-reg .reg-notice,
.friendly-reg .reg-consents,
.friendly-reg .who-grid { text-align: left; }
.friendly-notice { text-align: left; border-radius: 18px; }
.reg-mini { margin: 10px 0 16px; font-size: 0.8rem; line-height: 1.4; }

.lang-carousel {
  margin: 0 auto 16px;
  max-width: 320px;
  text-align: center;
}
.lang-label {
  margin: 0 0 10px;
  font-size: 0.88rem; font-weight: 650; color: var(--text-2);
  text-align: center;
}
.lang-slide {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  justify-items: center;
  gap: 4px;
}
.lang-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--text);
}
.lang-arrow:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lang-arrow svg { width: 22px; height: 22px; }
.lang-hero {
  display: grid; justify-items: center; gap: 8px;
  padding: 4px 0;
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
  width: 100%;
}
.lang-flag-xl {
  width: min(168px, 52vw);
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  border: 0;
  background: none;
}
.lang-flag-xl .flag-svg { width: 100%; height: 100%; display: block; }
.lang-hero-name { font-size: 1.2rem; font-weight: 750; text-align: center; }
.lang-hero-hint { font-size: 0.75rem; color: var(--text-3); font-weight: 600; text-align: center; }
.lang-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.lang-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.lang-dots span.on { background: var(--accent); width: 18px; border-radius: 999px; }

.demo-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 4px; padding: 8px 4px;
  border: 0; background: none; color: var(--accent);
  font: inherit; font-weight: 650; font-size: 0.9rem; cursor: pointer;
  width: 100%;
}
.demo-link:hover { text-decoration: underline; }

.ft-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28, 24, 20, 0.5);
  display: grid; place-items: center;
  padding: 16px;
}
.ft-panel {
  position: relative; width: min(440px, 100%);
  background: var(--surface, #fffaf4);
  border-radius: 24px; border: 1px solid var(--border, #e8e0d4);
  padding: 20px 14px 16px; display: grid; gap: 12px;
  box-shadow: 0 20px 50px rgba(20,16,12,0.25);
}
.ft-x { position: absolute; top: 10px; right: 10px; }
.ft-kicker {
  margin: 0; font-size: 0.8rem; font-weight: 650; color: var(--text-3);
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.ft-stage {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: 4px;
}
.ft-nav {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2, #f3ebe0);
  display: grid; place-items: center; cursor: pointer; color: var(--text);
}
.ft-nav:disabled { opacity: 0.35; cursor: default; }
.ft-nav svg { width: 20px; height: 20px; }
.ft-card { text-align: center; display: grid; gap: 10px; min-width: 0; }
.ft-card h2 { margin: 0; font-size: 1.15rem; }
.ft-card > p { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--text-2); }
.ft-dots { display: flex; gap: 6px; justify-content: center; }
.ft-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.ft-dots span.on { background: var(--accent); width: 16px; border-radius: 999px; }
.ft-actions { display: flex; gap: 8px; }
.ft-actions .btn { flex: 1; }

.ft-visual {
  border-radius: 16px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-softer, #efe6d8) 40%, var(--surface));
  padding: 14px; text-align: left; min-height: 140px;
}
.ft-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--border); margin-bottom: 10px;
}
.ft-hero.apa { border-color: color-mix(in srgb, var(--apa) 40%, var(--border)); }
.ft-hero b { display: block; font-size: 0.95rem; }
.ft-hero small { color: var(--text-2); font-size: 0.78rem; }
.ft-ico { width: 40px; height: 40px; }
.ft-mini { width: 28px; height: 28px; flex-shrink: 0; }
.ft-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ft-week span {
  text-align: center; font-size: 0.7rem; font-weight: 700;
  padding: 8px 0; border-radius: 8px;
}
.ft-week .apa, .ft-cal-grid .apa { background: var(--apa-soft); color: var(--apa-ink); }
.ft-week .anya, .ft-cal-grid .anya { background: var(--anya-soft); color: var(--anya-ink); }
.ft-week .ho, .ft-cal-grid .ho { background: var(--accent); color: #fff; }
.ft-cal-title { font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; }
.ft-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ft-cal-grid span {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 10px; font-size: 0.8rem; font-weight: 700;
}
.ft-legend { margin-top: 8px; font-size: 0.72rem; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; }
.ft-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.ft-legend i.apa { background: var(--apa); }
.ft-legend i.anya { background: var(--anya); }
.ft-legend i.ho { background: var(--accent); }
.ft-log { display: grid; gap: 8px; }
.ft-log-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
}
.ft-log-row b { display: block; font-size: 0.85rem; }
.ft-log-row small { color: var(--text-2); font-size: 0.75rem; }
.ft-msg { display: grid; gap: 8px; }
.ft-bubble { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 0.85rem; line-height: 1.35; }
.ft-bubble.them { background: var(--surface-2, #efe6d8); justify-self: start; border-bottom-left-radius: 4px; }
.ft-bubble.me { background: color-mix(in srgb, var(--accent) 20%, #fff); justify-self: end; border-bottom-right-radius: 4px; }
.ft-ok { font-size: 0.78rem; font-weight: 650; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; justify-self: center; }
.ft-fair { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 8px; }
.ft-dice-row { font-size: 2.2rem; display: flex; gap: 16px; }
.ft-fair b { font-size: 0.95rem; }
.ft-fair small { color: var(--text-2); font-size: 0.8rem; }

.tour-video-panel { width: min(400px, 100%); padding: 18px 12px 14px; margin: 0 auto; }
.tour-video-frame {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border, #e8e0d4);
  background: #1a1714;
  width: min(100%, 280px);
  aspect-ratio: 390 / 844;
  max-height: min(62vh, 560px);
}
.tour-video {
  display: block;
  width: 100%; height: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  background: #1a1714;
}
.tour-video-cap { margin: 0; text-align: center; line-height: 1.35; }

/* Kezdőlap teendő-sor: üres négyzet = nyitott, rákoppintva kész */
.task-row { display: flex; align-items: center; gap: 12px; }
.task-row .task-check { flex-shrink: 0; cursor: pointer; }
.task-row .li-main { color: inherit; text-decoration: none; }

/* Prémium bemutató: a kép középső illesztési vonalának elmosása + erősebb elmosás */
.pw2-hero-img { filter: blur(2px); transform: scale(1.04); }
.pw2-hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 36px); width: 72px; z-index: 1;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  pointer-events: none;
}
.pw2-hero-shade, .pw2-hero-copy { z-index: 2; }
/* A bezáró gomb a képen ül, nem egy üres fehér sávban */
.modal-panel:has(.pw2-hero) { position: relative; }
.modal-panel:has(.pw2-hero) .modal-head {
  position: absolute; top: 10px; right: 10px; z-index: 5; padding: 0; margin: 0; border: 0; background: none; min-height: 0;
}
.modal-panel:has(.pw2-hero) .modal-head h2 { display: none; }
.modal-panel:has(.pw2-hero) .modal-head .icon-btn {
  background: rgba(20, 24, 22, 0.45); color: #fff; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal-panel:has(.pw2-hero) .modal-body { padding-top: 0; }

/* Prémium bemutató: lágy, lekerekített forma és kiemelt gombok */
dialog.modal.pw-modal .modal-panel {
  overflow: hidden;
  margin-top: auto;
  height: calc(100% - 14px);
  height: calc(100dvh - 14px);
  border-radius: 28px 28px 0 0;
}
@media (min-width: 640px) {
  dialog.modal.pw-modal .modal-panel { height: auto; margin-top: 0; border-radius: 28px; }
}
.pw2-hero { border-radius: 0 0 24px 24px; }
.pw2-list { border-radius: 22px; }
.pw2-row-ico { border-radius: 14px; }
dialog.modal.pw-modal .modal-foot { border-top: 0; padding: 14px 20px 20px; box-shadow: 0 -10px 24px -18px rgba(20, 24, 22, 0.35); }
dialog.modal.pw-modal .modal-foot .btn-primary {
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-accent, #fff);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #7fd8bd) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 88%, #0b2a22) 100%);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
dialog.modal.pw-modal .modal-foot .btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: pw2-shine 3.6s ease-in-out 1.2s infinite;
}
@keyframes pw2-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
dialog.modal.pw-modal .modal-foot .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--accent) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
dialog.modal.pw-modal .modal-foot .btn-primary:active { transform: scale(0.98); }
dialog.modal.pw-modal .modal-foot .btn-ghost {
  min-height: 48px; border-radius: 999px; text-decoration: none; font-size: 0.98rem;
}
dialog.modal.pw-modal .modal-foot .btn-ghost:hover { background: var(--surface-2, rgba(0, 0, 0, 0.04)); }
@media (prefers-reduced-motion: reduce) {
  dialog.modal.pw-modal .modal-foot .btn-primary::after { animation: none; }
}

/* Prémium bemutató: görgetősáv rejtve (görgetni lehet, ha kisebb a képernyő), középre igazított szövegek */
dialog.modal.pw-modal .modal-body { scrollbar-width: none; -ms-overflow-style: none; }
dialog.modal.pw-modal .modal-body::-webkit-scrollbar { display: none; }
.pw2-hero-copy { text-align: center; }
.pw2-hero-copy > * { margin-left: auto; margin-right: auto; }
.pw2-free { justify-content: center; text-align: center; align-items: center; }
dialog.modal.pw-modal .modal-foot { align-items: center; text-align: center; }
@media (min-width: 640px) {
  dialog.modal.pw-modal .modal-foot { flex-direction: column-reverse; justify-content: center; }
  dialog.modal.pw-modal .modal-foot .btn-primary { min-width: 320px; }
}
.pw2-free { display: block; }
.pw2-free-check { display: inline-flex; vertical-align: -3px; margin-right: 6px; }

/* ===== G01c nagysz�l? a sz�l?i h�jban ===== */
html.viewer-lg { font-size: 115%; }
body.viewer .fab,
body.viewer [data-add],
body.viewer [data-new],
body.viewer [data-new-event],
body.viewer [data-new-request],
body.viewer [data-new-pattern],
body.viewer [data-new-rule],
body.viewer [data-new-rec],
body.viewer [data-new-version],
body.viewer [data-cal-plus],
body.viewer [data-add-photo],
body.viewer .dph-add,
body.viewer [data-edit],
body.viewer [data-delete],
body.viewer [data-del],
body.viewer [data-rlog],
body.viewer .rq-btn,
body.viewer [data-potty],
body.viewer [data-potty-undo],
body.viewer .pt-add,
body.viewer .pt-undo,
body.viewer [data-ping],
body.viewer .ping-row,
body.viewer .quick-scroll,
body.viewer [data-task-done],
body.viewer .task-check,
body.viewer [data-pack],
body.viewer [data-book],
body.viewer [data-req-menu],
body.viewer [data-req-accept],
body.viewer [data-req-reject],
body.viewer [data-req-cancel],
body.viewer [data-add-vacc],
body.viewer [data-add-size],
body.viewer [data-add-sleep],
body.viewer [data-add-doc],
body.viewer [data-add-med],
body.viewer [data-add-sticker],
body.viewer [data-edit-sleep],
body.viewer [data-edit-meal],
body.viewer [data-edit-place],
body.viewer [data-archive],
body.viewer .hero-book,
body.viewer .hero-link { display: none !important; }

.viewer-banner {
  padding: 10px 16px;
  font-size: 0.95rem;
  line-height: 1.35;
  background: color-mix(in srgb, var(--accent, #5E8B6A) 12%, var(--surface));
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.viewer-potty-line { margin: 8px 0 0; font-size: 0.95rem; }
.viewer-settings .card { margin-bottom: 12px; }
.feed-card { background: var(--surface); border-radius: 16px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.feed-photo { display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: pointer; position: relative; }
.feed-photo img { display: block; width: 100%; max-height: 70vh; object-fit: cover; }
.feed-photo-empty { min-height: 160px; display: grid; place-items: center; background: var(--surface-2); }
.feed-photo-count { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; padding: 4px 8px; border-radius: 999px; }
.feed-photos { position: relative; }
.feed-body { padding: 12px 14px 14px; }
.feed-caption { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; }
.feed-text { margin: 0 0 6px; white-space: pre-wrap; }
.feed-meta { margin: 0 0 10px; }
.feed-actions { display: flex; align-items: center; gap: 10px; }
.feed-heart { min-width: 48px; min-height: 48px; border: 0; background: var(--surface-2); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 1.1rem; cursor: pointer; padding: 0 14px; }
.feed-heart.on { background: color-mix(in srgb, #e85d75 18%, var(--surface-2)); }
.feed-comment-btn { min-height: 48px; }
.feed-comments { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.feed-comment { margin-bottom: 10px; }
.feed-comment p { margin: 4px 0 0; }
.feed-comment-form { display: grid; gap: 8px; }
.feed-comment-form .btn { min-height: 48px; }
.invite-welcome .btn-primary { min-height: 52px; font-size: 1.05rem; }
.radio-row { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.memory-comments { margin-top: 10px; }
.avatar3d.viewer { background: var(--surface-2); display: inline-grid; place-items: center; }

/* Meghívó-kártya: a hosszú családi link nem tolhatja ki a kártyát a képernyőből */
.growth-card, .growth-card.embedded, .gi-top, .gi-top > div, .gi-link { min-width: 0; max-width: 100%; }
.gi-top > div small { overflow-wrap: anywhere; }

/* D08: Dokumentumok */
.doc-hero-card { display: grid; gap: 12px; margin-bottom: 18px; }
.doc-hero-top { display: flex; gap: 14px; align-items: flex-start; }
.doc-hero-top h2 { font-size: 1.15rem; margin: 0 0 6px; }
.doc-hero-top p { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.45; }
.doc-hero-3d { width: 56px !important; height: 56px !important; flex-shrink: 0; }
.doc-actions .set-row { width: 100%; text-align: left; }
.doc-child-block { margin-bottom: 12px; }
.doc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.doc-tile {
  display: grid; gap: 8px; padding: 0; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.doc-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.doc-tile > span { display: grid; gap: 2px; padding: 0 10px 10px; }
.doc-tile b { font-size: 0.88rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tile small { color: var(--text-3); font-size: 0.75rem; line-height: 1.3; }
.doc-tile.file { padding: 12px; grid-template-columns: 28px 1fr; align-items: center; text-decoration: none; }
.doc-home-link {
  display: block; text-align: center; padding: 12px; color: var(--text-2); font-size: 0.92rem;
  text-decoration: none; border-radius: 14px;
}
.doc-home-link:hover { background: var(--surface-2); color: var(--text); }