:root{
  --teal:#0e9aa1;
  --teal-d:#0a767c;
  --green:#2bb673;
  --lime:#7ed957;
  --coral:#ff7a59;
  --coral-d:#e85d3d;
  --gold:#ffc94d;
  --gold-d:#e0a92b;
  --bg:#eef9f8;
  --card:#ffffff;
  --ink:#1f3a3d;
  --muted:#6b8a8c;
  --line:#d8efee;
  --red:#e23b3b;
  --red-bg:#ffe9e6;
  --amber:#c98a12;
  --amber-bg:#fff4d6;
  --grad:linear-gradient(135deg,#0e9aa1 0%,#2bb673 60%,#7ed957 100%);
  --grad-sun:linear-gradient(135deg,#ff7a59 0%,#ffc94d 100%);
  --shadow:0 6px 20px rgba(14,154,161,.14);
  --shadow-sm:0 3px 10px rgba(14,154,161,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% -5%, rgba(126,217,87,.18), transparent 38%),
    radial-gradient(circle at 95% 0%, rgba(255,201,77,.20), transparent 40%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);line-height:1.5;font-size:16px;min-height:100vh;
}
a{color:var(--teal-d);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Верхняя панель ---- */
.topbar{
  background:var(--grad);color:#fff;padding:16px 18px;display:flex;
  align-items:center;justify-content:space-between;box-shadow:var(--shadow);
  position:sticky;top:0;z-index:50;
}
.topbar .logo{font-weight:800;font-size:19px;color:#fff;display:flex;gap:9px;align-items:center;letter-spacing:.2px}
.topbar .logo:hover{text-decoration:none}
.topbar a{color:#fff}
.topbar .right{display:flex;align-items:center;gap:14px}
.topbar .out{font-size:14px;opacity:.95}

/* колокольчик */
.bell{position:relative;font-size:22px;line-height:1;display:inline-flex}
.bell .badge{
  position:absolute;top:-8px;right:-10px;background:var(--coral);color:#fff;
  font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;
  display:none;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;
}

.wrap{max-width:880px;margin:0 auto;padding:16px 16px 60px}

/* ---- Навигация-чипы ---- */
.nav{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0}
.nav a{
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.nav a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.nav a.active{background:var(--grad);color:#fff;border-color:transparent}

/* ---- Карточки ---- */
.card{
  background:var(--card);border:1.5px solid var(--line);border-radius:20px;
  padding:18px;margin:14px 0;box-shadow:var(--shadow-sm);
}
.card.hero{
  background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.card.hero::after{
  content:"🦜";position:absolute;right:-10px;bottom:-18px;font-size:120px;opacity:.13;transform:rotate(-12deg);
}
.card.hero .muted{color:rgba(255,255,255,.85)}
.card.hero h1,.card.hero h2{color:#fff}

h1{font-size:24px;margin:.2em 0 .5em;font-weight:800}
h2{font-size:19px;margin:.6em 0 .4em;font-weight:700}
h3{font-size:16px;margin:.5em 0 .3em}
.muted{color:var(--muted);font-size:14px}

.row{display:flex;gap:14px;flex-wrap:wrap}
.col{flex:1 1 220px}

/* ---- Формы ---- */
label{display:block;font-size:13.5px;color:var(--muted);margin:12px 0 5px;font-weight:600}
input,select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;
  font-size:16px;background:#fbfffe;color:var(--ink);font-family:inherit;transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,154,161,.12)}
textarea{min-height:88px;resize:vertical}

/* ---- Кнопки ---- */
.btn{
  display:inline-block;background:var(--grad);color:#fff;border:none;
  padding:12px 22px;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 12px rgba(14,154,161,.28);transition:transform .12s ease, box-shadow .12s ease, filter .12s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 7px 18px rgba(14,154,161,.34)}
.btn:active{transform:translateY(0)}
.btn.sun{background:var(--grad-sun);box-shadow:0 4px 12px rgba(255,122,89,.32)}
.btn.ghost{background:#fff;color:var(--teal-d);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.btn.danger{background:#fff;color:var(--red);border:1.5px solid var(--line);padding:7px 13px;font-size:14px;box-shadow:none}
.btn.sm{padding:8px 15px;font-size:14px}
.btn.on{background:var(--green)}
.btn.block{display:block;width:100%;text-align:center}

/* ---- Бейджи ---- */
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700}
.pill.red{background:var(--red-bg);color:var(--red)}
.pill.amber{background:var(--amber-bg);color:var(--amber)}
.pill.green{background:#dcf6e7;color:#16895a}
.pill.gray{background:#e8f3f2;color:var(--muted)}
.pill.teal{background:#d4f1f1;color:var(--teal-d)}

/* ---- Процедуры ---- */
.proc{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;margin:10px 0;background:#fff;
  transition:transform .12s ease, box-shadow .12s ease;
}
.proc:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.proc .meta{font-size:13px;color:var(--muted);margin-top:2px}
.proc.overdue{border-left:6px solid var(--red);background:linear-gradient(90deg,var(--red-bg),#fff 60%)}
.proc.today{border-left:6px solid var(--green);background:linear-gradient(90deg,#e3f8ee,#fff 60%)}
.proc.soon{border-left:6px solid var(--gold);background:linear-gradient(90deg,var(--amber-bg),#fff 60%)}
.proc.done-row{opacity:.6}

/* кнопка «сделано» с приятным нажатием */
.done-btn{background:var(--grad);color:#fff;border:none;border-radius:12px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer}
.done-btn:active{transform:scale(.94)}

/* ---- Таблицы ---- */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}

.error{background:var(--red-bg);color:var(--red);padding:12px 16px;border-radius:14px;margin:10px 0;font-weight:600}
.ok{background:#dcf6e7;color:#16895a;padding:12px 16px;border-radius:14px;margin:10px 0;font-weight:600}

/* ---- Птица ---- */
.bird-head{display:flex;gap:18px;align-items:center}
.bird-head img{width:92px;height:92px;border-radius:22px;object-fit:cover;border:3px solid rgba(255,255,255,.6);box-shadow:var(--shadow-sm)}
.bird-head .avatar-empty{
  width:92px;height:92px;border-radius:22px;background:rgba(255,255,255,.25);display:flex;
  align-items:center;justify-content:center;font-size:42px;border:3px solid rgba(255,255,255,.5);
}

/* ---- Статистика ---- */
.stat{display:flex;gap:14px;flex-wrap:wrap}
.stat .box{flex:1 1 150px;border-radius:20px;padding:20px;text-align:center;color:#fff;box-shadow:var(--shadow-sm)}
.stat .box:nth-child(1){background:var(--grad)}
.stat .box:nth-child(2){background:var(--grad-sun)}
.stat .box:nth-child(3){background:linear-gradient(135deg,#2bb673,#0e9aa1)}
.stat .box .num{font-size:36px;font-weight:800;line-height:1}
.stat .box .lbl{font-size:13px;margin-top:6px;opacity:.95}

.invite-link{font-size:13px;color:var(--teal-d);word-break:break-all;background:#e8f6f5;padding:9px 12px;border-radius:12px;margin-top:8px;font-weight:600}

/* ---- Вход ---- */
.login-box{max-width:440px;margin:7vh auto;text-align:center;padding:0 16px}
.login-box .card{padding:30px}
.login-box .big{font-size:60px;filter:drop-shadow(0 6px 10px rgba(14,154,161,.25))}

/* push-подсказка */
.push-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* появление карточек */
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card,.proc{animation:pop .25s ease both}

/* конфетти-сообщение «всё сделано» */
.alldone{text-align:center;padding:24px 10px}
.alldone .em{font-size:54px}

/* новости магазина */
.news-item{display:flex;gap:14px;align-items:flex-start}
.news-item img{width:84px;height:84px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.news-item .news-emoji{width:84px;height:84px;border-radius:14px;background:var(--grad-sun);display:flex;align-items:center;justify-content:center;font-size:38px;flex:0 0 auto}

/* уведомления */
.notif{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1.5px solid var(--line);border-radius:16px;margin:9px 0;background:#fff}
.notif .ic{font-size:24px;flex:0 0 auto}
.notif .t{font-weight:700}
.notif .b{font-size:14px;color:var(--muted)}
.notif .when{font-size:12px;color:var(--muted);margin-top:3px}

/* график веса */
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.chart-big{font-size:26px;font-weight:800;color:var(--teal-d);margin-right:8px}
.weight-chart{width:100%;height:auto;display:block;background:#fbfffe;border:1.5px solid var(--line);border-radius:16px}

/* фотоальбом */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.gphoto{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.gphoto img{width:100%;height:140px;object-fit:cover;display:block}
.gphoto .gcap{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;font-size:13px}

/* полоски расходов */
.bars{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px}
.bar-label{font-size:14px;font-weight:600}
.bar-track{background:#e8f3f2;border-radius:999px;height:16px;overflow:hidden}
.bar-fill{height:100%;background:var(--grad);border-radius:999px;min-width:4px;transition:width .4s ease}
.bar-val{font-weight:700;font-size:14px;color:var(--teal-d)}