/* Личный кабинет клиента «Креатифф».
   Цвета и типографика берутся из переменных темы; запасные значения на случай,
   если стиль темы не успел загрузиться. Свёрстано от телефона. */

.kr-wrap{
  --kr-violet:var(--violet,#6C4CF1);
  --kr-ink:var(--ink,#141019);
  --kr-muted:var(--muted,#6b6580);
  --kr-line:var(--line,#e7e4f0);
  --kr-soft:var(--soft,#f7f6fb);
  --kr-violet-soft:var(--violet-soft,#f2eeff);
  --kr-ok:#166534; --kr-ok-bg:#e8f8ee;
  --kr-err:#a01919; --kr-err-bg:#fdecec;
  --kr-warn:#8a6100; --kr-warn-bg:#fff7e0;
  max-width:var(--maxw,1180px);
  margin:0 auto;
  padding:26px 18px 70px;
  color:var(--kr-ink);
}
.kr-wrap.kr-uzko{max-width:560px}
.kr-wrap *{box-sizing:border-box}

/* ---------- шапка ---------- */
.kr-top{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start;
  padding-bottom:18px;border-bottom:1px solid var(--kr-line)}
.kr-nadpis{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--kr-muted);
  font-weight:700;display:block;margin-bottom:3px}
.kr-imya{font-size:clamp(25px,5vw,38px);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1}
.kr-vedet{text-align:right;min-width:150px}
.kr-vedet-imya{font-weight:700}
.kr-vedet-svyaz{font-size:14px;color:var(--kr-muted);word-break:break-word}
.kr-vyhod{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;color:var(--kr-muted);
  border-bottom:1px solid currentColor;text-decoration:none}
.kr-vyhod:hover{color:var(--kr-violet)}

/* ---------- меню разделов ---------- */
.kr-menyu{display:flex;gap:6px;overflow-x:auto;margin:18px -18px 0;padding:0 18px 10px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.kr-menyu-punkt{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--kr-soft);
  color:var(--kr-ink);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  border:1px solid transparent}
.kr-menyu-punkt:hover{border-color:var(--kr-line)}
.kr-menyu-punkt.est{background:var(--kr-violet);color:#fff}

/* ---------- общие мелочи ---------- */
.kr-h2{font-size:clamp(20px,3.4vw,26px);font-weight:800;letter-spacing:-.02em;margin:34px 0 14px}
.kr-h3{font-size:18px;font-weight:800;margin:26px 0 10px}
.kr-vvod{color:var(--kr-muted);max-width:70ch;margin:0 0 18px}
.kr-melko{font-size:14px;color:var(--kr-muted);margin:8px 0}
.kr-melko a{color:var(--kr-violet);font-weight:700}
.kr-nazad{margin:14px 0 0}
.kr-nazad a{color:var(--kr-muted);font-weight:700;text-decoration:none}
.kr-nazad a:hover{color:var(--kr-violet)}
.kr-ssylka{color:var(--kr-violet);font-weight:700;text-decoration:none;font-size:15px;white-space:nowrap}
.kr-ssylka:hover{text-decoration:underline}
.kr-tikhaya{color:var(--kr-muted);font-size:14px;text-decoration:none;border-bottom:1px dotted currentColor}
.kr-skrytaya{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kr-knopka{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:16px;
  padding:14px 26px;border-radius:999px;border:2px solid var(--kr-violet);background:var(--kr-violet);
  color:#fff;cursor:pointer;text-decoration:none;font-family:inherit}
.kr-knopka:hover{background:#5638d6;border-color:#5638d6;color:#fff}
.kr-spisok-ssylok{list-style:none;padding:0;margin:14px 0}
.kr-spisok-ssylok li{border-bottom:1px solid var(--kr-line)}
.kr-spisok-ssylok a{display:block;padding:13px 0;font-weight:700;color:var(--kr-ink);text-decoration:none}
.kr-spisok-ssylok a:hover{color:var(--kr-violet)}

/* ---------- вести ---------- */
.kr-vest{padding:13px 16px;border-radius:12px;margin:16px 0;font-size:15px;line-height:1.5}
.kr-vest--ok{background:var(--kr-ok-bg);color:var(--kr-ok)}
.kr-vest--err{background:var(--kr-err-bg);color:var(--kr-err)}
.kr-vest--note{background:var(--kr-violet-soft);color:var(--kr-ink)}

/* ---------- метки ---------- */
.kr-metka{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:800;
  line-height:1.3;white-space:nowrap}
.kr-metka--seryy{background:var(--kr-soft);color:var(--kr-muted)}
.kr-metka--violet{background:var(--kr-violet-soft);color:#4b2fd0}
.kr-metka--zheltyy{background:var(--kr-warn-bg);color:var(--kr-warn)}
.kr-metka--zelenyy{background:var(--kr-ok-bg);color:var(--kr-ok)}
.kr-metka--krasnyy{background:var(--kr-err-bg);color:var(--kr-err)}

/* ---------- плитки на главной ---------- */
.kr-plitki{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:22px 0}
.kr-plitka{display:block;padding:18px;border:1px solid var(--kr-line);border-radius:16px;
  background:#fff;text-decoration:none;color:var(--kr-ink)}
.kr-plitka:hover{border-color:var(--kr-violet)}
.kr-plitka-imya{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--kr-muted);font-weight:700}
.kr-plitka-chislo{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;margin:6px 0 2px;line-height:1.1}
.kr-plitka-podpis{display:block;font-size:13px;color:var(--kr-muted)}

/* ---------- карточки ---------- */
.kr-karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.kr-karta{background:#fff;border:1px solid var(--kr-line);border-radius:16px;padding:20px;margin:0 0 14px}
.kr-karta--ssylka{display:block;text-decoration:none;color:var(--kr-ink);margin:0}
.kr-karta--ssylka:hover{border-color:var(--kr-violet)}
.kr-karta-verh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.kr-karta-usluga{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--kr-muted);font-weight:700}
.kr-karta-imya{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px;line-height:1.2}
.kr-karta-chto{color:var(--kr-muted);margin:0 0 10px;font-size:15px}
.kr-shag{background:var(--kr-soft);border-radius:10px;padding:10px 13px;font-size:14px}

.kr-svodka{margin:14px 0;padding:0}
.kr-svodka div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--kr-line);flex-wrap:wrap}
.kr-svodka dt{color:var(--kr-muted);min-width:150px;margin:0;font-size:15px}
.kr-svodka dd{margin:0;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.kr-tekst{max-width:70ch}

/* ---------- лента работ ---------- */
.kr-lenta{border-top:1px solid var(--kr-line)}
.kr-rabota{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid var(--kr-line)}
.kr-rabota-data{flex:0 0 130px;color:var(--kr-muted);font-size:14px;font-weight:700;padding-top:2px}
.kr-rabota-telo{flex:1 1 auto;min-width:0}
.kr-rabota-imya{font-weight:700;font-size:17px;line-height:1.35}
.kr-rabota-opis{color:var(--kr-muted);margin:5px 0 0;font-size:15px}
.kr-rabota-nizhe{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

/* ---------- числа ---------- */
.kr-chisla{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.kr-chislo{background:#fff;border:1px solid var(--kr-line);border-radius:16px;padding:18px}
.kr-chislo-imya{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--kr-muted);font-weight:700}
.kr-chislo-znach{font-size:32px;font-weight:800;letter-spacing:-.03em;margin:6px 0 2px;line-height:1.1;overflow-wrap:anywhere}
.kr-chislo-ed{font-size:17px;font-weight:700;color:var(--kr-muted)}
.kr-chislo-izm{font-size:14px;font-weight:700}
.kr-chislo-izm--zelenyy{color:var(--kr-ok)}
.kr-chislo-izm--krasnyy{color:var(--kr-err)}
.kr-chislo-izm--seryy{color:var(--kr-muted)}
.kr-chislo-comm{font-size:14px;color:var(--kr-muted);margin:8px 0 0}
.kr-chislo-otkuda{font-size:12.5px;color:var(--kr-muted);margin:8px 0 0;line-height:1.4;
  padding-top:8px;border-top:1px solid var(--kr-line)}
.kr-chisla--sbor{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.kr-podzag{font-size:15px;font-weight:800;color:var(--kr-muted);margin:20px 0 8px;
  text-transform:uppercase;letter-spacing:.05em}

/* переключатель периода */
.kr-periody{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.kr-period{padding:9px 16px;border-radius:999px;background:var(--kr-soft);color:var(--kr-ink);
  font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent}
.kr-period span{color:var(--kr-muted);font-weight:700;font-size:13px}
.kr-period:hover{border-color:var(--kr-line)}
.kr-period.est{background:var(--kr-violet);color:#fff}
.kr-period.est span{color:rgba(255,255,255,.75)}

/* откуда берутся числа */
.kr-istochniki{background:var(--kr-soft);border:1px solid var(--kr-line);border-radius:16px;
  padding:16px 20px;margin:20px 0}
.kr-istochniki ul{margin:6px 0 0;padding:0 0 0 18px}
.kr-istochniki li{color:var(--kr-muted);font-size:14.5px;margin:4px 0}
.kr-istochniki li.kr-ist-idet{color:var(--kr-ok)}
.kr-istochniki li.kr-ist-zhdem{color:var(--kr-warn)}

/* график ряда */
.kr-grafik{margin:14px 0 0}
.kr-grafik svg{display:block;width:100%;height:auto}
.kr-g-os{stroke:var(--kr-line);stroke-width:1}
.kr-g-set{stroke:var(--kr-line);stroke-width:1;stroke-dasharray:3 4}
.kr-g-pod{font-size:11px;fill:var(--kr-muted);font-weight:700}
.kr-g-liniya{fill:none;stroke:var(--kr-violet);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.kr-g-cel{fill:transparent}
.kr-g-vid{fill:var(--kr-violet);opacity:.45}
.kr-g-tochka:hover .kr-g-vid{opacity:1;r:4}
.kr-g-konets{fill:var(--kr-violet)}
.kr-g-konets-pod{font-size:12px;font-weight:800;fill:var(--kr-ink)}
.kr-g-stolb rect{fill:var(--kr-violet);opacity:.85}
.kr-g-stolb:hover rect{opacity:1}
.kr-grafik-pod{font-size:12.5px;color:var(--kr-muted);margin:6px 0 0}
.kr-grafik-net{font-size:13.5px;color:var(--kr-muted);margin:12px 0 0;padding:10px 12px;
  background:var(--kr-soft);border-radius:10px}

/* те же числа таблицей */
.kr-tabl-chisla{overflow-x:auto;border:1px solid var(--kr-line);border-radius:16px;background:#fff}
.kr-tabl-chisla table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.kr-tabl-chisla th,.kr-tabl-chisla td{text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--kr-line);vertical-align:top}
.kr-tabl-chisla thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--kr-muted);font-weight:700;white-space:nowrap}
.kr-tabl-chisla tbody th{font-weight:700}
.kr-tabl-chisla tbody tr:last-child th,.kr-tabl-chisla tbody tr:last-child td{border-bottom:0}
.kr-tabl-chisla .kr-izm--zelenyy{color:var(--kr-ok);font-weight:700}
.kr-tabl-chisla .kr-izm--krasnyy{color:var(--kr-err);font-weight:700}
.kr-tabl-chisla .kr-izm--seryy{color:var(--kr-muted);font-size:13.5px}

/* ---------- таблица-список (документы, обращения, материалы) ---------- */
.kr-tablitsa{border-top:1px solid var(--kr-line)}
.kr-dok{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--kr-line);
  flex-wrap:wrap;text-decoration:none;color:var(--kr-ink)}
.kr-dok--ssylka:hover .kr-dok-imya{color:var(--kr-violet)}
.kr-dok-glav{flex:1 1 260px;min-width:0}
.kr-dok-imya{font-weight:700;font-size:17px;line-height:1.35}
.kr-dok-za{color:var(--kr-muted);font-size:14px;margin-top:3px}
.kr-dok-summa{flex:0 0 auto;font-weight:800;font-size:19px;white-space:nowrap}
.kr-dok-status{flex:0 0 auto}
.kr-dok-deystviya{flex:0 0 auto;display:flex;gap:14px}

.kr-dolg{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--kr-violet-soft);border-radius:16px;padding:20px 24px;margin:0 0 18px}
.kr-dolg-summa{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.kr-dolg-srok{font-weight:700;color:#4b2fd0}
.kr-oplata{background:var(--kr-soft);border-style:dashed}

/* ---------- переписка ---------- */
.kr-perepiska{margin:18px 0}
.kr-soobshchenie{background:var(--kr-soft);border-radius:16px;padding:15px 18px;margin:0 0 12px;max-width:min(680px,100%)}
.kr-soobshchenie--nash{background:var(--kr-violet-soft);margin-left:auto}
.kr-soobshchenie-kto{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--kr-muted);
  font-weight:700;margin-bottom:6px}
.kr-soobshchenie-telo{white-space:normal;overflow-wrap:anywhere}

/* ---------- формы ---------- */
.kr-forma label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.kr-forma input[type=text],.kr-forma input[type=url],.kr-forma input[type=email],
.kr-forma input[type=password],.kr-forma textarea,.kr-forma select,
.kr-vhod input[type=text],.kr-vhod input[type=password]{
  width:100%;padding:13px 15px;border:1px solid var(--kr-line);border-radius:12px;
  font:inherit;font-size:16px;background:#fff;color:var(--kr-ink)}
.kr-forma textarea{resize:vertical;min-height:90px}
.kr-forma input:focus,.kr-forma textarea:focus,.kr-forma select:focus{outline:3px solid var(--kr-violet);outline-offset:1px}
.kr-forma input[type=file]{width:100%;font-size:15px}
.kr-forma p{margin:0 0 16px}
.kr-pole--oshibka input,.kr-pole--oshibka textarea{border-color:#e0a0a0;background:#fffafa}
.kr-oshibka{display:block;color:var(--kr-err);font-size:14px;margin-top:5px;font-weight:600}
.kr-pole .kr-melko{display:block;margin:5px 0 0}
.kr-vhod .login-username,.kr-vhod .login-password{margin-bottom:14px}
.kr-vhod label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.kr-vhod .login-remember label{font-weight:400;font-size:15px;display:flex;align-items:center;gap:8px}
.kr-vhod .login-remember input{width:auto}
.kr-vhod .login-submit input{display:inline-flex;align-items:center;justify-content:center;font-weight:800;
  font-size:16px;padding:14px 28px;border-radius:999px;border:2px solid var(--kr-violet);
  background:var(--kr-violet);color:#fff;cursor:pointer;font-family:inherit;width:100%}
.kr-vhod .login-submit input:hover{background:#5638d6}

/* ---------- пустые разделы ---------- */
.kr-pusto{background:var(--kr-soft);border:1px dashed var(--kr-line);border-radius:16px;
  padding:26px;margin:0 0 18px}
.kr-pusto h3{margin:0 0 8px;font-size:18px;font-weight:800}
.kr-pusto p{margin:0 0 12px;color:var(--kr-muted);max-width:62ch}

/* ---------- телефон ---------- */
@media (max-width:720px){
  .kr-wrap{padding:20px 15px 60px}
  .kr-top{flex-direction:column;gap:12px}
  .kr-vedet{text-align:left}
  .kr-rabota{flex-direction:column;gap:4px}
  .kr-rabota-data{flex:none}
  .kr-dok{gap:8px}
  .kr-dok-glav{flex:1 1 100%}
  .kr-dok-summa{font-size:17px}
  .kr-dok-deystviya{margin-left:auto}
  .kr-soobshchenie--nash{margin-left:14px}
  .kr-karta{padding:17px}
  .kr-plitka{padding:15px}
}