/* Zeynep, логопедический центр — детский мягкий стиль (clay). Шрифт Nunito, кириллица. */
:root{
  --bg:#F3F8FF;--card:#fff;--ink:#1B2559;--mute:#56628D;--line:#DCE6FA;
  --blue:#2563EB;--blue-d:#1B4BB8;--blue-s:#E6EEFF;--blue-i:#1E3FA8;
  --yellow:#FFC83D;--yellow-d:#E0A400;--yellow-s:#FFF3CC;--yellow-i:#7A5200;
  --pink-s:#FFE3EE;--pink-i:#B0114F;
  --green:#0F9F6E;--green-s:#DDF7EC;--green-i:#0A6B4A;
  --red:#D92D4A;--red-s:#FFE1E6;--red-i:#A3122F;
  --purple-s:#ECE6FF;--purple-i:#4B2FC9;
  --r:24px;--r-s:14px;
  --shadow:0 4px 0 rgba(37,99,235,.07),0 14px 28px rgba(27,37,89,.07);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 Nunito,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);
  background:var(--bg);
  background-image:radial-gradient(circle at 8% 4%,#FFF1C2 0,transparent 26%),radial-gradient(circle at 96% 12%,#FFD9EA 0,transparent 24%),radial-gradient(circle at 80% 100%,#D7E5FF 0,transparent 30%);
  background-attachment:fixed}
a{color:var(--blue);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--yellow-d);outline-offset:2px;border-radius:10px}
h1,h2{font-weight:900;letter-spacing:-.01em;line-height:1.2}
h1{font-size:28px;margin:0 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h1 .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
h2{font-size:19px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
p{margin:.4em 0}
.ic{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.ic.fill{fill:currentColor}

/* Верхняя панель */
.top{background:#fff;border-bottom:2px solid var(--line);border-radius:0 0 28px 28px;padding:10px 18px;display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:20;box-shadow:0 8px 24px rgba(27,37,89,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:var(--ink);margin-right:14px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand svg{width:46px;height:46px;transition:transform .3s var(--ease)}
.brand:hover svg{transform:rotate(-8deg) scale(1.06)}
.brand small{display:block;font-size:11px;font-weight:800;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;margin-top:-2px}
.wordmark{font-weight:900;font-size:24px;letter-spacing:.01em;line-height:1}
.wordmark i{font-style:normal;display:inline-block}
.wordmark .w1{color:#2563EB;transform:rotate(-6deg)}.wordmark .w2{color:#E5487F;transform:translateY(-2px)}
.wordmark .w3{color:#E07A00;transform:rotate(5deg)}.wordmark .w4{color:#0F9F6E;transform:translateY(-1px)}
.wordmark .w5{color:#7C5CFF;transform:translateY(-3px)}.wordmark .w6{color:#2563EB;transform:rotate(-4deg)}
.hero .wordmark{font-size:46px}
.links{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.links a{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;color:var(--mute);white-space:nowrap;min-height:44px;transition:background .2s var(--ease),color .2s}
.links a:hover{background:var(--blue-s);text-decoration:none;color:var(--blue-i)}
.links a.on{background:var(--blue);color:#fff;box-shadow:0 3px 0 var(--blue-d)}
.top form{margin:0}
.bottom{display:none}

main{max-width:1120px;margin:0 auto;padding:26px 18px 70px}

/* Карточки */
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid>.card{margin-bottom:0}.grid+.card,.card+.grid,.grid+.grid{margin-top:18px}
.stat{display:flex;align-items:center;gap:14px}
.stat .bub{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;flex:none}
.stat .bub .ic{width:28px;height:28px}
.stat b{display:block;font-size:28px;font-weight:900;line-height:1.1}
.stat span{color:var(--mute);font-size:14px;font-weight:700}
.t-blue{background:var(--blue-s);color:var(--blue-i)}.t-yellow{background:var(--yellow-s);color:var(--yellow-i)}
.t-green{background:var(--green-s);color:var(--green-i)}.t-pink{background:var(--pink-s);color:var(--pink-i)}
.t-purple{background:var(--purple-s);color:var(--purple-i)}.t-red{background:var(--red-s);color:var(--red-i)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 18px;border:0;border-radius:99px;background:var(--blue);color:#fff;font-family:inherit;font-size:15px;line-height:1.2;font-weight:800;letter-spacing:0;white-space:nowrap;cursor:pointer;box-shadow:0 4px 0 var(--blue-d);transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .2s;text-decoration:none!important}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.btn.sec{background:var(--blue-s);color:var(--blue-i);box-shadow:0 4px 0 #C5D6FA}
.btn.sec:active{box-shadow:0 1px 0 #C5D6FA}
.btn.sun{background:var(--yellow);color:#4A3200;box-shadow:0 4px 0 var(--yellow-d)}
.btn.red{background:var(--red-s);color:var(--red-i);box-shadow:0 4px 0 #F6BBC5}
.btn.ok{background:var(--green);color:#fff;box-shadow:0 4px 0 #0A7A54}
.btn.ok:active{box-shadow:0 1px 0 #0A7A54}
.btn .ic{width:18px;height:18px}
.btn.sm{min-height:36px;padding:5px 13px;font-size:14px}
.btn.sm .ic{width:16px;height:16px}
.btn.icon{padding:0;width:42px}.btn.sm.icon{width:36px}
h1 .sp .btn{min-height:38px;padding:6px 15px;font-size:14px}
h1 .sp .btn.icon{width:38px;padding:0}
.btn.wide{width:100%}
.inline{display:inline}.inline form,form.inline{display:inline;margin:0}

/* Формы */
label{display:block;font-size:14px;color:var(--mute);margin:12px 0 5px;font-weight:800}
input,select,textarea{width:100%;min-height:46px;padding:10px 14px;border:2px solid var(--line);border-radius:var(--r-s);font:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1;min-width:150px}.row>.btn{flex:0 0 auto}
.row label:first-child{margin-top:0}
.hint{font-size:13px;color:var(--mute);margin-top:4px}
details>summary{cursor:pointer;color:var(--blue);font-weight:800;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
details>summary::-webkit-details-marker{display:none}
details[open]>summary{margin-bottom:8px}

/* Таблицы */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:8px 10px;font-weight:800}
td{padding:12px 10px;border-top:2px solid var(--line);vertical-align:middle}
tbody tr:hover td,tr:hover>td{background:#F8FBFF}

/* Бейджи */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 12px;border-radius:99px;font-size:13px;font-weight:800;background:var(--blue-s);color:var(--blue-i);white-space:nowrap}
.b-attended,.b-active{background:var(--green-s);color:var(--green-i)}
.b-missed,.b-cancelled{background:var(--red-s);color:var(--red-i)}
.b-sick,.b-paused{background:var(--yellow-s);color:var(--yellow-i)}
.b-planned{background:var(--blue-s);color:var(--blue-i)}.b-finished{background:#EEF0F6;color:var(--mute)}
.bad{color:var(--red)}.ok{color:var(--green)}.mute{color:var(--mute)}

/* Аватар ребёнка */
.ava{width:44px;height:44px;border-radius:16px;display:inline-grid;place-items:center;font-weight:900;font-size:17px;flex:none}
.ava.big{width:64px;height:64px;border-radius:22px;font-size:26px}
.who{display:flex;align-items:center;gap:12px}
.a0{background:#FFD9EA;color:#B0114F}.a1{background:#D7E5FF;color:#1E3FA8}.a2{background:#FFF3CC;color:#7A5200}
.a3{background:#DDF7EC;color:#0A6B4A}.a4{background:#ECE6FF;color:#4B2FC9}.a5{background:#FFE5D2;color:#9A3F00}

/* Сообщения */
.flash,.err{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--r-s);margin-bottom:16px;font-weight:700}
.flash{background:var(--green-s);color:var(--green-i)}.err{background:var(--red-s);color:var(--red-i)}

/* Абонемент: звёздочки */
.stars{display:flex;flex-wrap:wrap;gap:3px;margin:6px 0}
.stars .ic{width:24px;height:24px;stroke-width:1.8;color:#C9D3EC}
.stars .ic.used{color:var(--yellow-d);fill:var(--yellow)}
.pk{padding:14px;border-radius:var(--r-s);background:#F8FBFF;border:2px dashed var(--line);margin-bottom:12px}
.bar{height:12px;background:var(--line);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#5B8CFF);border-radius:99px;transition:width .6s var(--ease)}

/* Расписание */
.day{border-radius:var(--r);padding:16px;background:#fff;border:2px solid var(--line)}
.day.today{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.slot{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-s);background:#F8FBFF;margin-bottom:8px}
.slot .tm{font-weight:900;color:var(--blue-i);min-width:46px}
.empty{text-align:center;padding:22px 10px;color:var(--mute)}
.empty .ic{width:40px;height:40px;color:#B8C6EA;display:block;margin:0 auto 6px}
.tile{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r);background:#fff;border:2px solid var(--line);box-shadow:var(--shadow);color:var(--ink);margin-bottom:14px}
.tile:hover{text-decoration:none;border-color:var(--blue)}

/* Вход / кабинет родителя */
.center{max-width:400px;margin:9vh auto;padding:0 16px}
.hero{text-align:center;margin-bottom:18px}.hero svg{width:112px;height:112px}
.hero h1{justify-content:center;margin:8px 0 4px}
.pcab{max-width:760px;margin:0 auto;padding:22px 16px 60px}
.pcab .head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.pcab .head h1{margin:0}

/* Цели: этапы звука */
.goal{padding:16px;border-radius:var(--r-s);background:#F8FBFF;border:2px solid var(--line);margin-bottom:14px}
.goal.done{background:var(--green-s);border-color:#B5EBD3}
.steps{list-style:none;display:flex;gap:4px;padding:0;margin:12px 0 8px}
.steps li{flex:1;height:14px;border-radius:99px;background:#DCE6FA;position:relative}
.steps li.on{background:linear-gradient(90deg,var(--yellow),#FFB020)}
.goal.done .steps li.on{background:var(--green)}
.steps li.cur{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--yellow-d)}
.steps li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hist{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.hist span{font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--mute)}

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

/* Телефон */
@media(max-width:800px){
  .links,.top>form{display:none}
  .top{justify-content:space-between;border-radius:0 0 22px 22px}
  main{padding:18px 14px 110px}
  h1{font-size:23px}
  .bottom{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:30;background:#fff;border:2px solid var(--line);border-radius:26px;padding:6px;box-shadow:0 10px 30px rgba(27,37,89,.18);justify-content:space-around}
  .bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:20px;color:var(--mute);font-size:11px;font-weight:800;min-height:52px;justify-content:center}
  .bottom a .ic{width:24px;height:24px}
  .bottom a.on{background:var(--blue);color:#fff}
  .bottom a:hover{text-decoration:none}
  /* таблицы -> карточки */
  .rt thead{display:none}
  .rt,.rt tbody,.rt tr,.rt td{display:block;width:100%}
  .rt tr{border:2px solid var(--line);border-radius:var(--r-s);padding:8px 12px;margin-bottom:10px;background:#fff}
  .rt td{border:0!important;padding:5px 0;display:flex;justify-content:space-between;gap:12px;background:none!important;text-align:right}
  .rt td::before{content:attr(data-label);color:var(--mute);font-weight:800;font-size:13px;text-align:left}
  .rt td[data-label=""]::before,.rt td:not([data-label])::before{display:none}
  .rt td.full{display:block;text-align:left}
  .rt tr{position:relative}
  /* кнопки действий — справа сверху в карточке строки */
  .rt td.act{position:absolute;top:8px;right:10px;width:auto;padding:0;display:flex;gap:6px;justify-content:flex-end}
  .rt td.act .inline,.rt td.act form{display:inline-flex}
  .rt td.act.below{position:static;justify-content:flex-start;padding-top:8px}
  /* короткие значения в строку, без подписей */
  .rt td.inl{display:inline-flex;width:auto;margin-right:8px;padding:2px 0}
  .rt td.inl::before{display:none}
  /* «Посещений 1 · Осталось 7 · Долг …» — чипами */
  .rt td.chip{display:inline-flex;width:auto;gap:5px;margin:6px 6px 0 0;padding:4px 10px;border-radius:99px;background:#F3F7FF!important;font-size:14px}
  .rt td.chip::before{font-size:12px}
  .hm{display:none!important}

  /* статистика — по две в ряд, компактнее */
  .g3{grid-template-columns:1fr 1fr;gap:10px}
  .card.stat{padding:12px;gap:10px;align-items:flex-start;flex-direction:column}
  .stat .bub{width:38px;height:38px;border-radius:13px}
  .stat .bub .ic{width:20px;height:20px}
  .stat b{font-size:20px}
  .stat span{font-size:12px}
  .g2{grid-template-columns:1fr;gap:14px}
  .grid+.card,.card+.grid,.grid+.grid{margin-top:14px}
  .card{padding:16px;border-radius:20px;margin-bottom:14px}

  /* заголовок с кнопками */
  h1{gap:8px}
  h1 .sp{margin-left:0;width:100%}
  h1 .ava.big{width:52px;height:52px;font-size:21px;border-radius:18px}

  /* формы: поля по два, длинные — во всю ширину */
  .row{gap:10px}
  .row>*{min-width:calc(50% - 5px)}
  .row>.wide,.row>div:has(input[type=datetime-local]),.row>div:has(textarea){flex-basis:100%}
  .row>.btn{width:100%}

  /* быстрые переходы по карточке ребёнка */
  .jump{position:sticky;top:76px;z-index:10;margin:0 -14px 14px;padding:6px 14px;background:rgba(243,248,255,.92);backdrop-filter:blur(6px)}
  .slot{flex-wrap:wrap}
}
/* быстрые переходы (видны и на компьютере) */
.jump{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
.jump a{flex:none;padding:7px 14px;border-radius:99px;background:#fff;border:2px solid var(--line);font-size:14px;color:var(--blue-i)}
.jump a:hover{text-decoration:none;border-color:var(--blue)}
html{scroll-padding-top:140px}
details.card>summary{font-size:19px;font-weight:900;color:var(--ink);margin:0}
details.card[open]>summary{margin-bottom:14px}
details.card>summary .ic{color:var(--blue)}
.grid+#goals{margin-top:18px;display:block}
@media(max-width:800px){
  .rt tr:has(> td.act:not(.below)){padding-right:96px}
  .grid+#goals{margin-top:14px}
  details.card>summary{font-size:17px;flex-wrap:wrap}
}