/* KOPILKA UI REDESIGN — parent blue / child green */
:root {
  color-scheme: light;
  --accent: #3478f6;
  --accent-strong: #245ed0;
  --accent-soft: #eaf2ff;
  --accent-glow: #3478f626;
  --bg: #f3f7fd;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --text: #17243b;
  --muted: #77839a;
  --border: #e4eaf3;
  --secondary: #edf2f9;
  --secondary-text: #34445f;
  --notice: #fff6df;
  --notice-text: #77561a;
  --done: #edf8f1;
  --danger: #df5263;
  --shadow: 0 12px 34px #243b6310;
  --shadow-strong: 0 18px 45px #1d3b681a;
}
:root[data-role="child"] {
  --accent: #22a36b;
  --accent-strong: #168454;
  --accent-soft: #e8f7ef;
  --accent-glow: #22a36b26;
  --notice: #eff9f1;
  --notice-text: #286344;
  --done: #e8f7ef;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101827;
  --surface: #192438;
  --surface-2: #202d43;
  --text: #eef4ff;
  --muted: #a8b5ca;
  --border: #34445e;
  --secondary: #2a3952;
  --secondary-text: #e8efff;
  --notice: #3c3828;
  --notice-text: #f2d995;
  --done: #203b32;
  --shadow: 0 12px 34px #0003;
  --shadow-strong: 0 18px 45px #0005;
}
:root[data-theme="dark"][data-role="child"] {
  --notice: #203c31;
  --notice-text: #b8ebce;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 8% 0%, var(--accent-glow), transparent 34rem),
    linear-gradient(180deg, var(--bg), var(--bg));
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button {
  min-height: 46px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 14px var(--accent-glow);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
button:hover { filter: brightness(1.04); box-shadow: 0 8px 20px var(--accent-glow); }
button:active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .55; cursor: wait; }
button.secondary {
  color: var(--secondary-text);
  background: var(--secondary);
  box-shadow: none;
}
button.danger {
  color: #fff;
  background: var(--danger);
  box-shadow: 0 5px 14px #df526326;
}
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.app {
  width: min(100% - 32px, 780px);
  margin: 0 auto;
  padding: 18px 0 36px;
}
.preferences {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin-bottom: 10px;
}
.preferences #liveStatus { font-size: 12px; font-weight: 650; }
.preferences #liveStatus.offline { color: #d34b5d; }
.preferences button { min-height: 38px; padding: 8px 13px; font-size: 12px; }

.card {
  margin: 14px 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
h1, h2, h3 { margin: 0 0 12px; letter-spacing: -.025em; }
h1 { font-size: clamp(27px, 5vw, 34px); }
h2 { font-size: clamp(21px, 4vw, 26px); }
h3 { font-size: 17px; }
p { line-height: 1.55; }
.muted { color: var(--muted); line-height: 1.5; }
.center { text-align: center; }
.logo {
  margin: 4px auto 12px;
  text-align: center;
  font-size: 62px;
  line-height: 1.15;
}
#auth {
  width: min(100%, 460px);
  margin: clamp(28px, 8vh, 76px) auto;
  padding: clamp(24px, 6vw, 38px);
  border-radius: 30px;
  box-shadow: var(--shadow-strong);
}
#auth .logo {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border-radius: 28px;
  background: var(--accent-soft);
  font-size: 56px;
}
#auth > p { max-width: 330px; margin: 18px auto 0; font-size: 13px; }

#main > .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 19px 22px;
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, var(--accent-strong), var(--accent));
  box-shadow: 0 12px 28px var(--accent-glow);
}
.toolbar b { display: block; font-size: 20px; letter-spacing: -.03em; }
.toolbar .muted { margin-top: 3px; color: #ffffffc9; font-size: 13px; }
.toolbar button.secondary {
  color: #fff;
  border: 1px solid #ffffff55;
  background: #ffffff20;
}

.stats {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}
.stat {
  min-width: 0;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
}
.stat span { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.stat b {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(19px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.stat:first-child {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(130deg, var(--accent-strong), var(--accent));
}
.stat:first-child span, .stat:first-child b { color: #fff; }

.tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.tabs button {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--secondary-text);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  white-space: nowrap;
}
.tabs button.active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 5px 14px var(--accent-glow);
}
.tab.card { padding: clamp(18px, 4vw, 26px); }

label {
  display: block;
  margin: 13px 0 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
input, select {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 6px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
  background: var(--surface-2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  outline: none;
}
input[type="file"] { padding: 9px; font-size: 13px; }
#loginForm button[type="submit"], #taskForm > button[type="submit"] { width: 100%; margin-top: 10px; }
#taskForm {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
}
.schedule-fields {
  margin: 14px 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.schedule-fields > p { margin: 6px 0 10px; font-size: 12px; }

.notice {
  margin: 14px 0;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--notice-text) 14%, transparent);
  border-radius: 16px;
  color: var(--notice-text);
  background: var(--notice);
  line-height: 1.55;
  font-size: 13px;
}
#summary { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

.task, .task-card {
  margin: 12px 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow-wrap: anywhere;
}
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.task p { margin: 6px 0 0; }
.task-card { box-shadow: 0 5px 18px #243b6308; }
.task-card h3 { margin-bottom: 8px; }
.task-card > .muted {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 700;
}
.task-card.done { border-color: #b8e3c9; background: var(--done); }
.task-edit-form {
  margin-top: 15px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actions button { flex: 1 1 auto; }
.photos { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0; }
.photo-button {
  width: 88px;
  height: 88px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--secondary);
  box-shadow: none;
}
.photo-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.late-notice { color: #c33d52; font-weight: 700; line-height: 1.5; }
:root[data-theme="dark"] .late-notice { color: #ff9eae; }
#parentPayForm {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}
#parentPayForm h3 { margin-bottom: 8px; }
time { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }

.toast {
  position: fixed;
  z-index: 30;
  right: 16px;
  bottom: 18px;
  left: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: auto;
  padding: 14px 18px;
  border-radius: 15px;
  color: #fff;
  background: #1b2940;
  box-shadow: var(--shadow-strong);
}
.toast.error { background: #b82f45; }
dialog {
  width: min(900px, 96vw);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}
dialog::backdrop { background: #081225b8; backdrop-filter: blur(5px); }
dialog img { display: block; max-width: 100%; max-height: 78vh; margin: 12px auto; border-radius: 12px; }

@media (min-width: 781px) {
  .tabs { position: sticky; top: 10px; z-index: 8; }
}
@media (max-width: 600px) {
  .app { width: min(100% - 22px, 780px); padding: 10px 0 100px; }
  .preferences { margin-bottom: 7px; }
  .card { padding: 17px; border-radius: 21px; }
  #main > .toolbar { padding: 16px 17px; border-radius: 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat { padding: 14px; border-radius: 17px; }
  .stat:first-child { grid-column: 1 / -1; }
  .stat b { font-size: 22px; }
  .tabs {
    position: fixed;
    z-index: 20;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-width: 760px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 10px 34px #101d3530;
    backdrop-filter: blur(16px);
  }
  .tabs button { min-height: 48px; padding: 8px 3px; font-size: 11px; white-space: normal; }
  .task { display: block; }
  .task > b { display: block; margin-top: 8px; }
  .actions button { flex: 1 1 44%; }
  #auth { margin: 5vh auto; }
  .logo { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* KOPILKA MOTION LAYER — subtle, responsive and accessible */
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
  opacity: .62;
  background:
    radial-gradient(ellipse at 18% 18%, var(--accent-glow), transparent 34%),
    radial-gradient(ellipse at 82% 70%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
    radial-gradient(ellipse at 55% 8%, #a9c9ff20, transparent 30%);
  filter: blur(28px);
  animation: kopilka-ambient 22s ease-in-out infinite alternate;
}
@keyframes kopilka-ambient {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.035); }
  100% { transform: translate3d(-.5%, 2%, 0) scale(1.015); }
}
@keyframes kopilka-app-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kopilka-panel-enter {
  from { opacity: 0; transform: translateY(9px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kopilka-card-enter {
  from { opacity: 0; transform: translateY(13px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kopilka-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-7px) rotate(1deg); }
}
@keyframes kopilka-soft-pulse {
  0%, 100% { box-shadow: 0 12px 28px var(--accent-glow); }
  50%      { box-shadow: 0 16px 36px var(--accent-glow); }
}
@keyframes kopilka-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.app { position: relative; z-index: 1; animation: kopilka-app-enter .48s cubic-bezier(.2,.75,.25,1) both; }
#main > .toolbar { animation: kopilka-panel-enter .52s cubic-bezier(.2,.75,.25,1) both; }
.stats .stat { animation: kopilka-card-enter .48s cubic-bezier(.2,.75,.25,1) both; }
.stats .stat:nth-child(2) { animation-delay: 65ms; }
.stats .stat:nth-child(3) { animation-delay: 120ms; }
.tab:not([hidden]) { animation: kopilka-panel-enter .32s ease-out both; }
.task-card.animate-in {
  animation: kopilka-card-enter .42s cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--enter-delay, 0ms);
}
#home .logo { animation: kopilka-float 4.8s ease-in-out infinite; }
#main > .toolbar { animation-name: kopilka-panel-enter, kopilka-soft-pulse; animation-duration: .52s, 5s; animation-delay: 0s, 1s; animation-iteration-count: 1, infinite; }
.toast { animation: kopilka-toast-in .24s ease-out both; }

@media (hover: hover) and (pointer: fine) {
  .stat, .task-card, .task, .card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .stat:hover, .task-card:hover, .task:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  }
  .photo-button { transition: transform .18s ease, box-shadow .18s ease; }
  .photo-button:hover { transform: translateY(-3px) scale(1.035); box-shadow: var(--shadow-strong); }
}
button { position: relative; overflow: hidden; }
button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, #ffffff55 0, transparent 68%);
  transform: scale(.65);
  transition: opacity .2s ease, transform .25s ease;
}
button:active::after { opacity: 1; transform: scale(1.5); }
#auth .logo { animation: kopilka-float 4.8s ease-in-out infinite; }

@media (max-width: 600px) {
  body::before { opacity: .42; filter: blur(36px); }
  .stats .stat:hover, .task-card:hover, .task:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* KOPILKA TOP MENU + BUTTON LEGIBILITY V1 */
.tabs {
  position: sticky !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  z-index: 40 !important;
  display: flex;
  align-items: stretch;
  gap: 9px;
  width: 100%;
  margin: 16px 0 20px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 28px #1327471c;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tabs button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--secondary-text);
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .005em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tabs button::first-letter {
  font-size: 25px;
  line-height: 1;
}
.tabs button svg,
.tabs button img,
.tabs button .icon,
.tabs button .tab-icon,
.tabs button [class*="icon"] {
  width: 25px;
  height: 25px;
  min-width: 25px;
  font-size: 25px;
  line-height: 1;
}
.tabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 6px 16px var(--accent-glow);
}
.tabs button:not(.active):hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}
button {
  min-height: 50px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
}
button.secondary,
button.danger { font-weight: 750; }

@media (max-width: 600px) {
  .tabs {
    position: sticky !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    right: auto;
    bottom: auto !important;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 12px 0 16px;
    padding: 7px;
    gap: 5px;
    border-radius: 18px;
  }
  .tabs button {
    min-height: 60px;
    padding: 9px 5px;
    gap: 5px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 800;
  }
  .tabs button::first-letter { font-size: 23px; }
  .tabs button svg,
  .tabs button img,
  .tabs button .icon,
  .tabs button .tab-icon,
  .tabs button [class*="icon"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 24px;
  }
}
@media (max-width: 360px) {
  .tabs { gap: 3px; padding: 5px; }
  .tabs button { padding-inline: 3px; font-size: 12px; }
}


/* KOPILKA DASHBOARD REDESIGN V2 */
:root {
  --accent: #6558e8;
  --accent-strong: #5144d0;
  --accent-soft: #eeeaff;
  --accent-glow: #7563e82b;
  --bg: #f5f1fb;
  --surface: #ffffff;
  --surface-2: #faf7ff;
  --text: #211d35;
  --muted: #817b95;
  --border: #ebe5f4;
  --shadow: 0 10px 30px #51416c12;
  --shadow-strong: 0 16px 40px #51416c1e;
}
:root[data-role="child"] {
  --accent: #7956db;
  --accent-strong: #6240c1;
  --accent-soft: #f0eaff;
  --accent-glow: #7956db2b;
}
.dashboard-shell {
  overflow: hidden;
  padding: clamp(18px,4vw,30px);
  border-radius: 28px;
}
.dashboard-welcome {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:22px;
}
.dashboard-welcome h2 {
  margin:7px 0;
  font-size:clamp(23px,5vw,30px);
}
.dashboard-welcome p {
  max-width:440px;
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.eyebrow {
  color:var(--accent-strong);
  font-size:10px;
  font-weight:850;
  letter-spacing:.13em;
}
.dashboard-avatar {
  display:grid;
  flex:0 0 68px;
  width:68px;
  height:68px;
  place-items:center;
  border-radius:24px;
  background:var(--accent-soft);
  font-size:37px;
  animation:kopilka-float 5s ease-in-out infinite;
}
.dashboard-hero,
.child-balance-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:145px;
  margin:18px 0;
  padding:23px;
  border-radius:25px;
  color:white;
  background:linear-gradient(125deg,#5144d0,#8172f7);
  box-shadow:0 13px 30px #6558e83a;
}
.dashboard-hero .hero-label,
.child-balance-card span {
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  opacity:.85;
}
.dashboard-hero strong,
.child-balance-card strong {
  display:block;
  margin:8px 0 3px;
  font-size:clamp(36px,8vw,49px);
  line-height:1.1;
  letter-spacing:-.045em;
}
.dashboard-hero small,
.child-balance-card small {
  font-size:13px;
  opacity:.85;
}
.hero-art,.balance-art {
  font-size:clamp(43px,10vw,65px);
  filter:drop-shadow(0 8px 10px #30208035);
  animation:kopilka-float 5s ease-in-out infinite;
}
.child-balance-card {
  background:linear-gradient(125deg,#7654d7,#a17aee);
}
.dashboard-section-title { margin:23px 0 12px; }
.dashboard-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:15px 0;
}
.dashboard-stat {
  min-width:0;
  padding:17px 13px;
  border:1px solid transparent;
  border-radius:19px;
  background:#f1edff;
}
.dashboard-stat span {
  display:block;
  color:#625b79;
  font-size:12px;
  font-weight:750;
}
.dashboard-stat strong {
  display:block;
  margin-top:8px;
  color:#302750;
  font-size:clamp(21px,4vw,29px);
  font-weight:850;
  overflow-wrap:anywhere;
}
.stat-new { background:#fff2df; }
.stat-waiting { background:#eaf3ff; }
.stat-done { background:#e8f8ed; }
.pocket-help { background:#e9f8f1; }
.pocket-safe { background:#f0eaff; }
.pocket-spend { background:#fff2df; }
.child-pockets .dashboard-stat { padding:15px 11px; }
.child-pockets .dashboard-stat strong { font-size:clamp(17px,3.7vw,23px); }
.dashboard-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:22px;
  padding:19px;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface-2);
}
.dashboard-action h3 { margin:0 0 6px; }
.dashboard-action p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.dashboard-action button { flex-shrink:0; }
.child-goal-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding:21px;
  border-radius:23px;
  background:linear-gradient(120deg,#efffcf,#e4f8bb);
  color:#253b29;
}
.child-goal-card h3 { margin:7px 0; }
.child-goal-card p {
  margin:0 0 13px;
  color:#52664a;
  font-size:13px;
}
.child-goal-card .eyebrow { color:#527b36; }
.child-goal-card button {
  color:white;
  background:#6a9b40;
  box-shadow:0 6px 15px #6a9b4030;
}
.goal-art { font-size:clamp(42px,10vw,65px); }
.dashboard-summary {
  margin:16px 0 0;
  padding:13px 15px;
  border-radius:15px;
  color:var(--muted);
  background:var(--surface-2);
  font-size:12px;
}
.tabs {
  position:fixed !important;
  top:auto !important;
  right:auto !important;
  bottom:max(12px,env(safe-area-inset-bottom)) !important;
  left:50% !important;
  z-index:100 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  width:min(780px,calc(100vw - 24px)) !important;
  max-width:780px !important;
  margin:0 !important;
  padding:9px !important;
  border:1px solid #e9e1f5;
  border-radius:25px !important;
  background:color-mix(in srgb,var(--surface) 92%,transparent) !important;
  box-shadow:0 12px 36px #30204c25 !important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transform:translateX(-50%);
}
.tabs button {
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:65px !important;
  padding:7px 3px !important;
  border:1px solid transparent;
  border-radius:18px !important;
  color:var(--muted);
  background:transparent;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:750;
  line-height:1.15;
  white-space:normal;
}
.tabs button .nav-icon {
  display:block;
  font-size:25px;
  line-height:1.1;
  transition:transform .2s ease;
}
.tabs button .nav-label { display:block; }
.tabs button.active {
  color:#fff !important;
  background:linear-gradient(135deg,var(--accent-strong),var(--accent)) !important;
  box-shadow:0 5px 15px var(--accent-glow) !important;
}
.tabs button.active .nav-icon { transform:translateY(-2px) scale(1.08); }
.app { padding-bottom:125px; }
.toast {
  bottom:calc(100px + env(safe-area-inset-bottom));
}
@media(max-width:600px) {
  .app { padding-bottom:145px; }
  .dashboard-shell { padding:18px; }
  .dashboard-welcome { gap:8px; }
  .dashboard-avatar { flex-basis:58px; width:58px; height:58px; font-size:31px; border-radius:20px; }
  .dashboard-hero,.child-balance-card { min-height:125px; padding:19px; }
  .dashboard-stats { gap:7px; }
  .dashboard-stat { padding:13px 9px; border-radius:16px; }
  .dashboard-stat span { font-size:10px; }
  .child-pockets .dashboard-stat { padding:12px 7px; }
  .dashboard-action { align-items:flex-start; flex-direction:column; }
  .dashboard-action button { width:100%; }
  .child-goal-card { padding:17px; }
  .tabs button { min-height:65px !important; }
}
@media(prefers-reduced-motion:reduce) {
  .dashboard-avatar,.hero-art,.balance-art { animation:none !important; }
}


/* KOPILKA FIXED BOTTOM NAV V3 */

/* Скрываем навигацию, пока пользователь не авторизован */
#main[hidden] + .tabs {
    display: none !important;
}

/* Меню закреплено непосредственно относительно окна браузера */
.tabs {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    width: min(780px, calc(100vw - 24px)) !important;
    max-width: 780px !important;

    margin: 0 !important;
    z-index: 9999 !important;

    box-sizing: border-box !important;
}

/* Оставляем пространство для меню внизу */
.app {
    padding-bottom: calc(125px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Учитываем небольшие экраны */
@media (max-width: 600px) {
    .tabs {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        width: calc(100vw - 20px) !important;
    }
}


/* KOPILKA SCROLL ARCHITECTURE V5 */

/* Запрещаем прокручивать всю страницу целиком */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
}

body {
    position: relative;
    overscroll-behavior: none;
}

/* Прокручивается только содержимое приложения */
body > main.app {
    position: relative;
    width: min(100% - 22px, 780px);
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    max-height: 100dvh;
    margin-left: auto;
    margin-right: auto;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;

    box-sizing: border-box;

    padding-bottom:
      calc(155px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Нижняя панель — независимый элемент окна */
body > nav.tabs {
    position: fixed !important;

    top: auto !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;

    transform: translate3d(-50%, 0, 0) !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    width: min(780px, calc(100vw - 20px)) !important;
    max-width: 780px !important;

    margin: 0 !important;
    z-index: 2147483000 !important;

    box-sizing: border-box !important;
    isolation: isolate;
}

/* Не показываем меню до входа */
body:has(#main[hidden]) > nav.tabs {
    display: none !important;
}

/* Последние элементы не уходят под меню */
body > main.app {
    scroll-padding-bottom: 150px;
}

@media (max-width: 600px) {
    body > main.app {
        width: calc(100% - 20px);
    }

    body > nav.tabs {
        width: calc(100vw - 20px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body > main.app {
        scroll-behavior: auto;
    }
}


/* KOPILKA TASK ASSIGNMENT UX V2 */
.task-target-group{
  margin:0 0 16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.task-target-group label{
  margin:0 0 8px;
  font-size:14px;
  line-height:1.35;
}
.task-target-group select{
  margin:0;
  min-height:52px;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  background:var(--surface-2);
}
.assignment-hint{
  margin:10px 2px 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

body > nav.tabs:has(#chatMenu:not([hidden])) {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
body > nav.tabs > #chatMenu[hidden] { display: none !important; }

.task-feedback{margin:14px 0;padding:14px;border:1px solid var(--border);border-left:4px solid #d18b20;border-radius:14px;background:var(--secondary)}
.task-feedback strong,.task-feedback small{display:block}.task-feedback small{color:var(--muted);margin-top:6px;font-size:12px}
.task-feedback p{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 0}
.task-return-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.task-return-form textarea{display:block;width:100%;max-width:100%;min-height:110px;resize:vertical;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface);color:var(--text);font:inherit}
@media(max-width:600px){.task-return-form .actions{display:grid;grid-template-columns:1fr}.task-return-form .actions button{width:100%}}

/* Keep the chat entry visible on narrow family dashboards. */
#main > .toolbar { flex-wrap: wrap; }