@font-face{font-family:'TT Firs Neue';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/Regular.woff2') format('woff2');}
@font-face{font-family:'TT Firs Neue';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/Medium.woff2') format('woff2');}
@font-face{font-family:'TT Firs Neue';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/DemiBold.woff2') format('woff2');}
@font-face{font-family:'TT Firs Neue';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/Bold.woff2') format('woff2');}
:root{
  --bg:#FFFDF7;          /* тёплый белый фон */
  --card:#FFFFFF;
  --ink:#241A33;         /* глубокий сливовый для текста */
  --muted:#8B8398;
  --coral:#FF5A3C;       /* сердце Никиты */
  --coral-soft:#FFE3DC;
  --green:#23B26D;       /* сердце Вики */
  --green-soft:#DDF5E8;
  --yellow:#FFD43B;
  --pink:#FFD9E4;
  --lilac:#EFE9FF;
  --red:#E23A2E;
  --red-soft:#FDE3E0;
  --line:#F0EBE3;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --display:'TT Firs Neue',system-ui,sans-serif;
  --body:'TT Firs Neue',system-ui,sans-serif;
  --shadow:0 10px 30px rgba(36,26,51,.08);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:#EFEAFF url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="30" cy="30" r="1.4" fill="%23ddd2ff"/></svg>');
  font-family:var(--body); color:var(--ink);
  display:flex; justify-content:center;
}
#app{
  width:100%; max-width:430px; min-height:100vh; min-height:100dvh;
  background:var(--bg); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 60px rgba(36,26,51,.15);
}
/* ── демо-панель (для теста прототипа) ── */
#demoBar{
  background:var(--ink); color:#fff; font-size:12px;
  padding:8px 14px; display:none; align-items:center; gap:8px; flex-wrap:wrap;
}
#demoBar.on{display:flex;}
#demoBar .chip{
  border:1px solid rgba(255,255,255,.3); border-radius:99px;
  padding:4px 12px; cursor:pointer; font-family:var(--body); font-size:12px;
  background:transparent; color:#fff;
}
#demoBar .chip.active{background:#fff; color:var(--ink); font-weight:700;}
#demoBar .grow{flex:1;}
#demoBar .day{opacity:.7;}

#screen{flex:1; overflow-y:auto; padding-bottom:96px; scroll-behavior:smooth;}
#screen.no-nav{padding-bottom:24px;}

/* ── типографика ── */
h1.display{
  font-family:var(--display); font-weight:700; font-size:30px; line-height:1.12;
  letter-spacing:-.01em;
}
h2.display{font-family:var(--display); font-weight:700; font-size:20px; line-height:1.2;}
.eyebrow{
  font-size:13px; font-weight:600;
  color:var(--muted);
}
.sub{color:var(--muted); font-size:15px; line-height:1.5;}

/* ── кнопки ── */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px 20px; border:none; border-radius:99px;
  font-family:var(--display); font-weight:700; font-size:15px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--ink); color:#fff; box-shadow:0 8px 20px rgba(36,26,51,.25);}
.btn.coral{background:var(--coral); color:#fff; box-shadow:0 8px 20px rgba(255,90,60,.35);}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--ink);}
.btn.soft{background:var(--lilac); color:var(--ink);}
.btn.small{width:auto; padding:10px 18px; font-size:13px;}
.btn[disabled]{opacity:.4; pointer-events:none;}

/* ── онбординг ── */
.onboard{padding:28px 24px 40px; display:flex; flex-direction:column; min-height:100%;}
.onboard .art{
  border-radius:var(--r-lg); padding:34px 24px 0; overflow:hidden; position:relative;
  text-align:center; margin-bottom:26px;
}
.quote{
  font-family:var(--display); font-weight:700; font-size:22px; line-height:1.3;
  margin:18px 0 6px;
}
.quote-author{font-size:14px; color:var(--muted); margin-bottom:8px;}
.onboard .push{flex:1;}
.stack{display:flex; flex-direction:column; gap:12px;}

.keybox{
  background:var(--yellow); border-radius:var(--r-md); padding:20px;
  text-align:center; margin:18px 0;
}
.keybox .key{
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.06em;
  margin-top:6px; user-select:all;
}
.hintcard{
  background:var(--lilac); border-radius:var(--r-md); padding:14px 16px;
  font-size:14px; line-height:1.5; display:flex; gap:10px; align-items:flex-start;
}
input.field, textarea.field{
  width:100%; padding:15px 18px; border:2px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--body); font-size:15px; background:#fff; color:var(--ink); outline:none;
}
input.field:focus, textarea.field:focus{border-color:var(--ink);}
label.flabel{font-size:13px; font-weight:600; color:var(--muted); display:block; margin:14px 0 6px;}

/* ── настройка плана ── */
.daytabs{display:flex; gap:6px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none;}
.daytabs::-webkit-scrollbar{display:none;}
.daytab{
  flex:0 0 auto; padding:9px 14px; border-radius:99px; border:2px solid var(--line);
  background:#fff; font-family:var(--display); font-weight:700; font-size:13px; cursor:pointer;
  color:var(--ink);
}
.daytab.active{background:var(--ink); border-color:var(--ink); color:#fff;}
.plan-col{border-radius:var(--r-md); padding:14px; margin-bottom:12px;}
.plan-col.a{background:var(--coral-soft);}
.plan-col.b{background:var(--green-soft);}
.plan-col h4{font-family:var(--display); font-size:14px; margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.dot{width:10px; height:10px; border-radius:50%;}
.dot.a{background:var(--coral);} .dot.b{background:var(--green);}
.plan-task{
  background:#fff; border-radius:12px; padding:10px 12px; margin-bottom:8px;
  display:flex; align-items:center; gap:8px; font-size:14px;
}
.plan-task span{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.plan-task button{border:none; background:none; color:var(--muted); font-size:16px; cursor:pointer;}
.addrow{display:flex; gap:8px;}
.addrow input{flex:1; padding:10px 12px; border-radius:12px; border:2px dashed rgba(36,26,51,.2); background:transparent; font-family:var(--body); font-size:14px; outline:none;}
.addrow button{
  width:38px; height:38px; border-radius:12px; border:none; background:var(--ink); color:#fff;
  font-size:18px; cursor:pointer; flex:0 0 auto;
}
.ai-verdict{
  border-radius:var(--r-md); padding:16px; font-size:14px; line-height:1.55; margin-top:14px;
  display:none; white-space:pre-wrap;
}
.ai-verdict.ok{display:block; background:var(--green-soft); border:2px solid var(--green);}
.ai-verdict.bad{display:block; background:var(--red-soft); border:2px solid var(--red);}
.ai-verdict.wait{display:block; background:var(--lilac);}

/* ── главная ── */
.home{padding:22px 20px 10px;}
.home-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.member-card{
  border-radius:var(--r-lg); padding:20px 18px 16px; margin-bottom:16px; position:relative;
  overflow:hidden;
}
.member-card.a{background:var(--pink);}
.member-card.b{background:#FFF6D6;}
.member-top{display:flex; align-items:center; gap:16px;}
.heart-wrap{flex:0 0 108px; height:104px; position:relative;}
.heart-wrap svg{width:100%; height:100%; overflow:visible;}
.member-info{flex:1;}
.member-name{font-family:var(--display); font-weight:700; font-size:19px;}
.member-pct{font-family:var(--display); font-weight:700; font-size:32px; line-height:1; margin:4px 0 2px;}
.member-status{font-size:13px; color:var(--muted); font-weight:600;}
.hbar{
  height:14px; border-radius:99px; background:var(--red-soft); overflow:hidden;
  margin:14px 0 12px; position:relative;
}
.hbar .fill{
  height:100%; border-radius:99px; background:var(--green);
  transition:width .6s cubic-bezier(.5,1.6,.4,1);
}
.hbar .lost{position:absolute; inset:0; background:repeating-linear-gradient(-45deg, transparent 0 6px, rgba(226,58,46,.12) 6px 12px);}
.rd-row{display:flex; gap:10px;}
.rd-block{
  flex:1; background:#fff; border-radius:var(--r-sm); padding:12px; cursor:pointer;
  transition:transform .12s ease;
}
.rd-block:active{transform:scale(.96);}
.rd-block .num{font-family:var(--display); font-weight:700; font-size:22px;}
.rd-block .lbl{font-size:12px; font-weight:700; margin-top:2px; display:flex; align-items:center; gap:5px;}
.rd-block.resp .num{color:var(--green);}
.rd-block.disr .num{color:var(--red);}

.rules-card{
  background:var(--lilac); border-radius:var(--r-lg); padding:20px 18px; cursor:pointer;
  display:flex; align-items:center; gap:14px; transition:transform .12s ease; margin-bottom:14px;
}
.rules-card:active{transform:scale(.97);}
.rules-card .emoji{font-size:30px;}
.rules-card b{font-family:var(--display); font-size:16px; display:block;}
.rules-card small{color:var(--muted); font-size:13px;}
.rules-card .arr{margin-left:auto; font-size:20px;}

/* ── страница задач ── */
.tasks-page{padding:22px 20px;}
.today-label{margin:4px 0 18px;}
.task-item{
  background:#fff; border:2px solid var(--line); border-radius:var(--r-md);
  padding:14px 14px; margin-bottom:10px; display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.task-item .t-title{
  flex:1; font-size:15px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.task-item .t-check{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(35,178,109,.35); transition:transform .12s ease;
}
.task-item .t-check:active{transform:scale(.9);}
.task-item.done{background:var(--green); border-color:var(--green);}
.task-item.done .t-title{color:#fff; text-decoration:line-through; text-decoration-thickness:2px;}
.task-item.done .t-check{background:#fff; color:var(--green); box-shadow:none;}
.task-item.weekly{border-style:dashed; border-color:var(--yellow); background:#FFFBEC;}
.task-item.weekly.done{background:var(--green); border-color:var(--green);}
.badge-weekly{
  font-size:11px; font-weight:700; background:var(--yellow);
  border-radius:6px; padding:3px 7px; flex:0 0 auto;
}
.empty-state{
  text-align:center; padding:50px 30px; color:var(--muted); font-size:15px; line-height:1.6;
}
.empty-state .big{font-size:44px; margin-bottom:12px;}

/* ── попапы ── */
#overlay{
  position:fixed; inset:0; background:rgba(36,26,51,.45); backdrop-filter:blur(3px);
  display:none; align-items:flex-end; justify-content:center; z-index:50;
}
#overlay.on{display:flex;}
#sheet{
  width:100%; max-width:430px; background:var(--bg);
  border-radius:28px 28px 0 0; padding:22px 22px 34px;
  max-height:82vh; overflow-y:auto; animation:up .28s cubic-bezier(.3,1.3,.5,1);
}
@keyframes up{from{transform:translateY(60px); opacity:0;} to{transform:none; opacity:1;}}
.sheet-grab{width:44px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 16px;}
.sheet-title{font-family:var(--display); font-weight:700; font-size:19px; margin-bottom:6px;}
.log-item{
  border-radius:var(--r-sm); padding:13px 14px; margin-bottom:9px; font-size:14px; line-height:1.45;
}
.log-item.resp{background:var(--green-soft);}
.log-item.disr{background:var(--red-soft);}
.log-item b{display:block;}
.log-item small{color:var(--muted);}
.rule-line{
  background:#fff; border:2px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; margin-bottom:8px; font-size:14px; display:flex; gap:10px; align-items:center;
}
.rule-line span{flex:1;}
.rule-line button{border:none; background:none; color:var(--muted); cursor:pointer; font-size:15px;}
.wound-btn{
  background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(226,58,46,.35);
}
.seg{display:flex; background:var(--lilac); border-radius:99px; padding:4px; margin:10px 0 4px;}
.seg button{
  flex:1; border:none; border-radius:99px; padding:9px; font-family:var(--display);
  font-weight:700; font-size:13px; background:transparent; cursor:pointer; color:var(--ink);
}
.seg button.active{background:#fff; box-shadow:var(--shadow);}
.agree-row{
  display:flex; gap:10px; align-items:flex-start; background:#fff; border:2px solid var(--line);
  border-radius:var(--r-sm); padding:13px; margin-top:12px; font-size:14px; line-height:1.45; cursor:pointer;
}
.agree-row input{width:20px; height:20px; accent-color:var(--red); margin-top:1px;}

/* ── нижняя навигация ── */
#nav{
  position:absolute; bottom:0; left:0; right:0; background:#fff;
  border-top:1px solid var(--line); display:none; padding:10px 30px calc(12px + env(safe-area-inset-bottom));
  justify-content:space-around; z-index:20;
}
#nav.on{display:flex;}
.nav-btn{
  border:none; background:none; cursor:pointer; font-family:var(--display); font-weight:700;
  font-size:12px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 18px; border-radius:16px;
}
.nav-btn .ico{font-size:22px; line-height:1;}
.nav-btn.active{color:var(--ink); background:var(--lilac);}

/* тосты */
#toast{
  position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-80px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:99px;
  font-size:14px; font-weight:600; z-index:99; transition:transform .35s cubic-bezier(.3,1.3,.5,1);
  max-width:88vw; text-align:center;
}
#toast.on{transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}


/* ═══════ Анимации сердца: у каждой стадии свой характер ═══════ */
.heart .h-float, .heart .h-pulse, .heart .h-eyes, .heart .h-blink,
.heart .h-tear, .heart .h-spark, .heart .h-sigh-puff, .heart .h-mouth-sob{
  transform-box: fill-box; transform-origin: center;
}

/* — общее парение (у грустного медленнее и с наклоном, у разбитого еле-еле) — */
.heart .h-float{ animation: hFloat 4.5s ease-in-out infinite; }
@keyframes hFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%    { transform: translateY(-7px) rotate(1.6deg); }
}
.heart-sad .h-float{ animation: hFloatSad 6.5s ease-in-out infinite; }
@keyframes hFloatSad{
  0%,100%{ transform: translateY(0) rotate(-1deg); }
  50%    { transform: translateY(-4px) rotate(-3deg); }
}
.heart-broken .h-float{ animation: hFloatBroken 7s ease-in-out infinite; }
@keyframes hFloatBroken{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%    { transform: translateY(-2px) rotate(-2.6deg); }
}

/* — счастливое: двойной удар сердца, как настоящее «тук-тук» — */
.heart-happy .h-pulse{ animation: hBeat 3.4s ease-in-out infinite; }
@keyframes hBeat{
  0%, 52%, 100% { transform: scale(1); }
  58%  { transform: scale(1.07); }
  63%  { transform: scale(0.99); }
  68%  { transform: scale(1.10); }
  76%  { transform: scale(1); }
}
/* искорки вокруг счастливого */
.h-spark{ opacity: 0; }
.h-spark1{ animation: hSpark 3.4s ease-in-out infinite .5s; }
.h-spark2{ animation: hSpark 3.4s ease-in-out infinite 1.6s; }
.h-spark3{ animation: hSpark 3.4s ease-in-out infinite 2.4s; }
@keyframes hSpark{
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  15%      { opacity: 1; transform: scale(1.1) rotate(20deg); }
  30%      { opacity: 0; transform: scale(.4) rotate(45deg) translateY(-8px); }
}

/* — грустное: тяжёлый вздох (сжимается и оседает) + облачко выдоха — */
.heart-sad .h-pulse{ animation: hSigh 6.5s ease-in-out infinite; }
@keyframes hSigh{
  0%, 30%, 100% { transform: scale(1,1) translateY(0); }
  42% { transform: scale(1.03,0.95) translateY(3px); }
  55% { transform: scale(0.99,1.01) translateY(0); }
  62% { transform: scale(1,1) translateY(0); }
}
.h-sigh-puff{ opacity: 0; animation: hPuff 6.5s ease-out infinite; }
@keyframes hPuff{
  0%, 40% { opacity: 0; transform: translateX(0); }
  46%     { opacity: .9; }
  70%     { opacity: 0; transform: translateX(16px) translateY(-6px); }
  100%    { opacity: 0; }
}

/* — разбитое: всхлипы-дрожь приступами + слёзы в три ручья — */
.heart-broken .h-pulse{ animation: hShiver 4.2s linear infinite; }
@keyframes hShiver{
  0%, 24% { transform: translateX(0); }
  26% { transform: translateX(-2px) rotate(-.6deg); }
  28% { transform: translateX(2px)  rotate(.6deg); }
  30% { transform: translateX(-1.5px); }
  32% { transform: translateX(1.5px); }
  34% { transform: translateX(0); }
  60%, 62% { transform: translateX(0); }
  64% { transform: translateX(-1.5px); }
  66% { transform: translateX(1.5px); }
  68% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.h-mouth-sob{ animation: hSob 4.2s ease-in-out infinite; }
@keyframes hSob{
  0%, 22%, 40%, 100% { transform: translateY(0); }
  28% { transform: translateY(2px) scaleX(.96); }
  34% { transform: translateY(0); }
}
.h-tear { animation: hTear 2.6s ease-in infinite; }
.h-tear2{ animation-delay: 1.2s; }
.h-tear3{ animation-duration: 3.1s; animation-delay: .6s; }
@keyframes hTear{
  0%   { transform: translateY(0) scale(.6);  opacity: 0; }
  15%  { transform: translateY(3px) scale(1); opacity: 1; }
  100% { transform: translateY(20px) scale(1);opacity: 0; }
}

/* — глаза: смотрят по сторонам (~каждые 3 сек) и моргают — */
.h-eyes{ animation: hLook 6s ease-in-out infinite; }
@keyframes hLook{
  0%, 16%  { transform: translateX(0); }
  24%, 42% { transform: translateX(-8px); }
  50%, 66% { transform: translateX(0); }
  74%, 92% { transform: translateX(8px); }
  100%     { transform: translateX(0); }
}
.heart-sad .h-eyes{ animation-duration: 8s; }
.h-blink{ animation: hBlink 4.7s infinite; }
@keyframes hBlink{
  0%, 91%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.08); }
  97%           { transform: scaleY(1); }
}