/* ============ Здоровье семьи — простая лента ============ */

:root{
  --bg:#FAF6F0;
  --card:#FFFFFF;
  --ink:#20232B;
  --muted:#6E7480;
  --line:#E7E1D7;
  --accent:#C4472F;
  --accent-dark:#A03521;
  --accent-soft:#FBEAE5;
  --ok:#1F7A4D;
  --ok-soft:#E6F4EC;
  --warn:#9A6A1B;
  --warn-soft:#FBF1DE;
  --bad:#C0392B;
  --bad-soft:#FBE9E6;
  --sans:'Golos Text',-apple-system,'Segoe UI',sans-serif;
  --disp:'Unbounded',sans-serif;
  --r:16px;
  --shadow:0 8px 28px -14px rgba(32,35,43,.25);
}

*{box-sizing:border-box; margin:0}
[hidden]{display:none!important}
html{scrollbar-gutter:stable}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  font-size:16px;
}
button,input,select{font:inherit; color:inherit}
::selection{background:var(--accent-soft)}

/* ---------- Вход ---------- */
.lock{min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:20px}
.lock-card{
  width:min(400px,100%); text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); padding:40px 32px 32px;
}
.lock-logo{
  width:72px; height:72px; margin:0 auto 18px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:34px; border-radius:22px;
}
.lock h1{font-family:var(--disp); font-weight:700; font-size:22px}
.lock-sub{color:var(--muted); margin:10px 0 22px; font-size:15px}
.lock input{
  width:100%; padding:15px 16px; margin-bottom:12px; font-size:17px;
  background:var(--bg); border:2px solid var(--line); border-radius:14px; text-align:center;
}
.lock input:focus{outline:none; border-color:var(--accent)}
.lock button{
  width:100%; padding:15px; cursor:pointer; font-size:17px; font-weight:600;
  background:var(--accent); color:#fff; border:none; border-radius:14px;
}
.lock button:hover{background:var(--accent-dark)}
.lock button:disabled{opacity:.5; cursor:wait}
.lock-err{color:var(--bad); margin-top:14px; font-size:14.5px}
.lock-foot{color:var(--muted); font-size:13px; text-align:center; max-width:340px}

/* ---------- Шапка ---------- */
#app{max-width:760px; margin:0 auto; padding:0 14px}
.top{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:18px 2px 4px;
}
.top-title{display:flex; align-items:center; gap:10px; font-size:17px}
.top-title b{font-family:var(--disp); font-weight:700; font-size:15px}
.logo{
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  background:var(--accent); color:#fff; font-size:18px; border-radius:12px;
}
.search{
  flex:1; min-width:230px; display:flex; align-items:center; gap:10px;
  background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:0 16px; height:52px; color:var(--muted);
  transition:border-color .15s;
}
.search:focus-within{border-color:var(--accent); color:var(--accent)}
.search input{flex:1; border:none; background:none; font-size:16px; color:var(--ink)}
.search input:focus{outline:none}

/* ---------- Семья ---------- */
.people{
  display:flex; gap:6px; overflow-x:auto; padding:14px 2px 10px;
  scrollbar-width:none;
}
.people::-webkit-scrollbar{display:none}
.person{
  flex:none; width:86px; padding:10px 6px 12px; cursor:pointer; text-align:center;
  background:none; border:2px solid transparent; border-radius:18px;
  transition:background .15s, border-color .15s;
}
.person:hover{background:var(--card)}
.person.active{background:var(--card); border-color:var(--accent); box-shadow:var(--shadow)}
.avatar{
  width:56px; height:56px; margin:0 auto 8px; display:grid; place-items:center;
  border-radius:50%; color:#fff; font-weight:800; font-size:22px;
  border:3px solid #fff; box-shadow:0 3px 10px -3px rgba(32,35,43,.35);
}
.person .p-name{font-weight:600; font-size:14px; line-height:1.2}
.person .p-role{color:var(--muted); font-size:11.5px; margin-top:2px}
.person.active .p-role{color:var(--accent); font-weight:600}

/* ---------- Кнопка нового анализа ---------- */
.actions{padding:4px 2px 6px}
.new-analysis{
  width:100%; display:flex; align-items:center; gap:16px; cursor:pointer; text-align:left;
  background:var(--accent); color:#fff; border:none; border-radius:var(--r);
  padding:16px 20px; box-shadow:var(--shadow);
  transition:background .15s, transform .1s;
}
.new-analysis:hover{background:var(--accent-dark)}
.new-analysis:active{transform:scale(.99)}
.na-plus{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.2); border-radius:12px; font-size:24px; font-weight:600;
}
.na-text{display:flex; flex-direction:column; gap:2px}
.na-text b{font-size:17px}
.na-text small{opacity:.85; font-size:13.5px}

/* ---------- Лента ---------- */
main{padding:8px 2px 40px; min-height:40vh}
.feed-label{
  color:var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  margin:20px 4px 10px;
}
.card{
  width:100%; text-align:left; cursor:pointer; display:block;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin-bottom:10px;
  transition:transform .1s, box-shadow .15s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.card-top{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.mini-avatar{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:50%; color:#fff; font-weight:800; font-size:13px;
}
.card-top .c-name{font-weight:600; font-size:14.5px}
.card-top .c-date{color:var(--muted); font-size:13.5px; margin-left:auto}
.card-title{font-size:16.5px; font-weight:600; line-height:1.35; margin-bottom:10px}
.card-cat{
  display:inline-block; font-size:11.5px; font-weight:600; color:var(--muted);
  background:var(--bg); border-radius:8px; padding:3px 9px; margin-left:8px; vertical-align:2px;
}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:600; border-radius:10px; padding:5px 11px;
}
.chip.bad{background:var(--bad-soft); color:var(--bad)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.more{background:var(--bg); color:var(--muted)}

/* строка показателя (поиск / история) */
.ind{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; margin-bottom:8px;
}
.ind:hover{box-shadow:var(--shadow)}
.ind .i-main{flex:1; min-width:0}
.ind .i-name{font-weight:600; font-size:15.5px}
.ind .i-name mark{background:var(--warn-soft); color:inherit; border-radius:3px; padding:0 2px}
.ind .i-sub{color:var(--muted); font-size:13px; margin-top:1px}
.ind .i-val{font-size:17px; font-weight:800; white-space:nowrap}
.ind .i-val small{font-weight:500; color:var(--muted); font-size:12.5px}
.ind .i-arrow{font-size:18px; width:26px; text-align:center; flex:none}
.t-bad{color:var(--bad)}
.t-warn{color:var(--warn)}
.t-ok{color:var(--ok)}
.t-na{color:var(--muted)}

.empty{padding:56px 16px; text-align:center; color:var(--muted)}
.empty b{display:block; font-size:17px; color:var(--ink); margin-bottom:6px}
.feed-more{
  display:block; width:100%; margin:18px 0 4px; padding:14px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  font-weight:600; font-size:15px; color:var(--accent);
}
.feed-more:hover{border-color:var(--accent)}

/* ---------- Сводка ---------- */
.view-tabs{
  display:flex; gap:4px; width:max-content; margin:8px 2px 2px;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px;
}
.vt{
  padding:8px 20px; cursor:pointer; background:none; border:none; border-radius:10px;
  font-weight:600; font-size:14.5px; color:var(--muted);
}
.vt.active{background:var(--accent); color:#fff}
.spark{width:70px; height:22px; flex:none; opacity:.85}
.empty-mini{
  padding:14px 18px; margin:4px 0; border-radius:12px;
  background:var(--ok-soft); color:var(--ok); font-weight:600; font-size:14.5px;
}
.sum-ok{color:var(--muted); font-size:13.5px; margin:10px 4px 0}
.dynamics-row{text-align:left}
.dynamics-values{font-size:20px; font-weight:700; margin:6px 0; overflow-wrap:anywhere}
.dynamics-row .i-sub{line-height:1.5; white-space:normal}
.dynamics-more{margin:24px 0}
.dynamics-more summary{cursor:pointer; font-weight:600; padding:12px 0}
.check{
  display:flex; align-items:center; gap:12px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; margin-bottom:8px; text-align:left;
}
.check-age{margin-left:auto; font-weight:600; font-size:13.5px; color:var(--muted); white-space:nowrap}
.check-age.t-warn{color:var(--warn)}
@media (max-width:480px){.spark{display:none}}



.foot{padding:20px 4px 36px; color:var(--muted); font-size:13px; text-align:center}

/* ---------- Полноэкранные листы ---------- */
.sheet{
  position:fixed; inset:0; z-index:50; overflow-y:auto;
  background:var(--bg);
}
.sheet-card{max-width:760px; margin:0 auto; padding:14px 16px 60px; animation:up .18s ease-out}
@keyframes up{from{opacity:0; transform:translateY(10px)} to{opacity:1}}
.sheet-head{
  display:flex; align-items:center; gap:14px; padding:8px 0 14px;
  position:sticky; top:0; background:var(--bg); z-index:2;
}
.back-btn{
  cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 16px; font-weight:600; font-size:15px;
}
.back-btn:hover{border-color:var(--accent); color:var(--accent)}
.sheet-who{color:var(--muted); font-size:14px}
.sheet-title{font-size:20px; line-height:1.35; margin:4px 2px 16px; font-weight:800}

.doc-body{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 22px 26px; font-size:15.5px;
}
.doc-body h1{display:none}
.doc-body h2{font-size:17px; margin:22px 0 8px}
.doc-body h3{font-size:15px; margin:18px 0 6px; color:var(--muted)}
.doc-body p{margin:9px 0}
.doc-body ul,.doc-body ol{margin:9px 0 9px 20px}
.doc-body li{margin:4px 0}
.doc-body blockquote{
  margin:12px 0; padding:10px 16px; border-left:4px solid var(--accent);
  background:var(--accent-soft); border-radius:0 10px 10px 0;
}
.doc-body code{background:var(--bg); padding:1px 6px; border-radius:6px; font-size:.88em}
.doc-body hr{border:none; border-top:1px dashed var(--line); margin:18px 0}
.doc-body a{color:var(--accent)}
.doc-body table{border-collapse:collapse; width:100%; margin:12px 0; font-size:13.5px; display:block; overflow-x:auto}
.doc-body th{
  text-align:left; padding:8px 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--bg); border-bottom:2px solid var(--ink); white-space:nowrap;
}
.doc-body td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.st-ok{color:var(--ok); font-weight:600}
.st-warn{color:var(--warn); font-weight:600}
.st-bad{color:var(--bad); font-weight:700}
.st-na{}

.doc-del{
  margin-top:16px; padding:12px 20px; cursor:pointer; width:100%;
  background:none; color:var(--bad); border:2px solid var(--bad-soft); border-radius:12px;
  font-weight:600; font-size:15px;
}
.doc-del:hover{background:var(--bad-soft)}
.doc-del:disabled{opacity:.5; cursor:wait}

/* ---------- История показателя ---------- */
.trend-chart{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; margin-bottom:14px;
}
.trend-chart svg{width:100%; height:120px; display:block}

/* ---------- Разбор анализа ---------- */
.ai-form{display:flex; flex-direction:column; gap:14px}
.ai-drop{
  display:grid; place-items:center; min-height:140px; cursor:pointer; text-align:center;
  border:2px dashed var(--line); border-radius:var(--r); color:var(--muted);
  padding:20px; font-size:16px; line-height:1.6; background:var(--bg);
  transition:border-color .15s, background .15s;
}
.ai-drop small{font-size:13.5px}
.ai-drop:hover,.ai-drop.drag{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.ai-drop.has-file{border-style:solid; border-color:var(--ok); background:var(--ok-soft); color:var(--ok); font-weight:600}
.ai-label{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14.5px}
.ai-form select,.ai-form input[type=text],.ai-form input[type=date]{
  padding:14px; background:var(--card); border:2px solid var(--line); border-radius:12px;
  font-size:16px; font-weight:400; width:100%;
}
.ai-form select:focus,.ai-form input:focus{outline:none; border-color:var(--accent)}
.ai-form button[type=submit]{
  padding:16px; cursor:pointer; background:var(--accent); color:#fff;
  border:none; border-radius:14px; font-size:17px; font-weight:600;
}
.ai-form button[type=submit]:hover{background:var(--accent-dark)}
.ai-form button[type=submit]:disabled{opacity:.5; cursor:wait}
.ai-note{color:var(--muted); font-size:13.5px; line-height:1.55}
.ai-status{
  margin-top:16px; padding:14px 18px; border-radius:12px;
  background:var(--warn-soft); color:var(--warn); font-weight:500;
}
.ai-status.err{background:var(--bad-soft); color:var(--bad)}
.ai-result{margin-top:18px}
.ai-result .ai-model{color:var(--muted); font-size:13px; margin-top:12px}
.ai-result .ai-raw{margin-top:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.ai-result .ai-raw summary{cursor:pointer; padding:10px 14px; font-size:13.5px; color:var(--ink-2)}
.ai-result .ai-raw summary:hover{color:var(--accent)}
.ai-result .ai-raw pre{margin:0; padding:0 14px 14px; font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:340px; overflow:auto; color:var(--ink-2)}
.ai-drop,.ai-status{overflow-wrap:anywhere}
.ai-save{
  margin-top:14px; padding:15px 22px; cursor:pointer; width:100%;
  background:var(--ok); color:#fff; border:none; border-radius:14px;
  font-size:16px; font-weight:600;
}
.ai-save:hover{filter:brightness(1.08)}
.ai-save:disabled{opacity:.6; cursor:default}

@media (max-width:560px){
  .top-title b{display:none}
  .na-text small{display:none}
}

/* ---------- Выход ---------- */
.top-logout{flex:none; margin-left:10px; font-size:13.5px; padding:9px 14px}