/* =====================================================================
   100Б · Система подбора кураторов
   Дизайн-система повторяет личный кабинет куратора 100Б:
   белые карточки со скруглением, фиолетовый акцент, сайдбар-меню слева.
   ===================================================================== */

:root{
  /* ---- палитра ---- */
  --violet:        #6D3BEB;
  --violet-strong: #5B2BD4;
  --violet-soft:   #F2EDFE;
  --violet-line:   #E0D5FB;
  --teal:          #12B3A6;
  --teal-soft:     #E2F7F5;
  --amber:         #F59E0B;
  --amber-soft:    #FEF3DC;
  --rose:          #E5484D;
  --rose-soft:     #FDECEC;
  --blue:          #3B82F6;
  --blue-soft:     #E7F0FE;

  /* ---- нейтральные ---- */
  --bg:            #F7F7F9;
  --card:          #FFFFFF;
  --ink:           #16161D;
  --ink-2:         #3D3D4A;
  --muted:         #8A8A99;
  --muted-2:       #AFAFBC;
  --line:          #ECECF1;
  --line-2:        #E3E3EA;
  /* приглушённый розово-серый для второстепенных подписей — как «Группа mg-1» */
  --dim-rose:      #BFA3A8;

  /* ---- форма ---- */
  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(22,22,29,.04), 0 2px 8px rgba(22,22,29,.03);
  --shadow:    0 2px 4px rgba(22,22,29,.03), 0 8px 24px rgba(22,22,29,.05);
  --shadow-lg: 0 8px 20px rgba(22,22,29,.06), 0 24px 56px rgba(22,22,29,.09);

  --header-h: 68px;
  --dur: .18s;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html{ scrollbar-gutter: stable; }

body{
  font-family: 'Onest', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }

.skeleton{
  position:relative; overflow:hidden; color:transparent!important;
  background: linear-gradient(90deg, var(--line) 25%, var(--line-2) 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
  pointer-events:none;
}
.skeleton *{ visibility:hidden; }

h1,h2,h3,h4 { margin:0; font-weight:700; letter-spacing:-.01em; }
p { margin:0; }
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }

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

/* ---------------------------------------------------------------------
   ВЕРХНЯЯ ПОЛОСА
   --------------------------------------------------------------------- */
.topline{
  position: fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background: linear-gradient(90deg, var(--violet), #8B5CF6, var(--blue));
  transform-origin: left; transform: scaleX(0); opacity:0;
  pointer-events:none;
}
/* переход на другую страницу: полоса ползёт, пока сервер отвечает */
.topline.run{
  opacity:1; transform: scaleX(.6);   /* виден даже при отключённых анимациях в Windows */
  animation: toplineRun 8s cubic-bezier(.08,.8,.2,1) forwards;
}
@keyframes toplineRun{ 0%{ transform:scaleX(0); } 20%{ transform:scaleX(.45); } 100%{ transform:scaleX(.92); } }

.topbar{
  position: sticky; top:0; z-index:100;
  height: var(--header-h);
  display:flex; align-items:center; gap:14px;
  padding: 0 28px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.brand{
  display:flex; align-items:baseline; gap:1px;
  font-weight:400; font-size:21px; letter-spacing:-.02em;
  color: var(--ink);
}
.brand img{ display:block; height:30px; width:auto; }
.brand:hover{ text-decoration:none; }
.brand b{ font-weight:800; }

.role-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  background: #F1F1F5; color: var(--muted);
  border:0; border-radius: 999px;
  font-size:13px; font-weight:600;
}
.role-pill svg{ width:14px; height:14px; opacity:.6; }

/* переключатель роли: главный админ смотрит кабинет чужими глазами */
.role-switch{ position:relative; }
.role-pill.as-button{
  cursor:pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.role-pill.as-button{ border:1px solid transparent; }
.role-pill.as-button:hover,
.role-pill.as-button[aria-expanded="true"]{
  background: var(--violet-soft); color: var(--violet); border-color: var(--violet-line);
}
.role-pill.as-button[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.role-switch .menu-pop{ transform-origin: top left; padding:10px; }
.role-switch .menu-pop button{ justify-content:space-between; color: var(--muted); }
.role-switch .menu-pop button.current{ color: var(--ink); font-weight:600; }
.role-switch .menu-pop .tick{
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--teal); opacity:.85;
}
.role-switch .menu-pop .tick svg{ width:12px; height:12px; color:#fff; }
.role-pill.as-button .chev{ width:14px; height:14px; margin-left:2px; }
.role-pill.as-button.previewing{
  background: var(--amber-soft); color:#9A6200;
}
.role-pill.as-button.previewing svg{ opacity:.9; }
.role-switch .menu-pop{ top: calc(100% + 8px); left:0; right:auto; min-width:262px; }
.role-switch .menu-pop form{ margin:0; }

.topbar-spacer{ flex:1; }

.topbar-user-wrap{ position:relative; }
.topbar-user{
  display:flex; align-items:center; gap:8px;
  background:none; border:0; padding:4px; border-radius:12px;
  transition: background var(--dur) var(--ease);
}
.topbar-user:hover{ background:#F6F5FA; }
.avatar{
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em;
  flex-shrink:0; object-fit:cover;
}
.avatar.ring{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--violet); }
.avatar.lg{ width:56px; height:56px; border-radius:14px; font-size:19px; }
.avatar.sm{ width:28px; height:28px; border-radius:8px; font-size:11px; }
.chev{ width:16px; height:16px; color: var(--muted-2); transition: transform .22s var(--ease); }
.topbar-user[aria-expanded="true"]{ background: var(--violet-soft); }
.topbar-user[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* выпадающее меню пользователя — спозиционировано от кнопки-триггера,
   а не от хедера, чтобы не отрываться от аватара при любой ширине role-pill */
.menu-pop{
  position:absolute; top: calc(100% + 8px); right:0;
  min-width: 250px; padding:12px;
  background: var(--card); border:1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-lg);
  z-index:150;
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .18s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.menu-pop.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition: opacity .18s var(--ease), transform .24s cubic-bezier(.2,.9,.3,1.15), visibility 0s;
}
/* карточка владельца — как в меню профиля кабинета 100Б */
.menu-pop .who{
  display:flex; align-items:center; gap:12px;
  padding:12px; margin-bottom:10px; border-radius:16px;
  background: var(--violet-soft);
}
.menu-pop .who .avatar{ width:44px; height:44px; border-radius:13px; font-size:15px; }
.menu-pop .who b{ display:block; font-size:14.5px; font-weight:700; line-height:1.25; }
.menu-pop .who span:not(.avatar){ display:block; font-size:12px; color:var(--muted); }
.menu-pop .who.plain{
  display:block; background:none; padding:6px 10px 10px; margin-bottom:6px;
  border-bottom:1px solid var(--line); border-radius:0;
}
.menu-pop a, .menu-pop button{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 12px; border:0; background:none; border-radius:11px;
  font-size:13.5px; font-weight:500; color: var(--ink-2); text-align:left;
  transition: background var(--dur) var(--ease);
}
.menu-pop a svg, .menu-pop button svg{ color: var(--violet); flex-shrink:0; }
.menu-pop a:hover, .menu-pop button:hover{ background:#F6F5FA; text-decoration:none; }
.menu-pop .sep-line{ height:1px; background: var(--line); margin:6px 4px; }
.menu-pop .danger{ color: var(--ink-2); }

/* ---------------------------------------------------------------------
   КАРКАС СТРАНИЦЫ
   --------------------------------------------------------------------- */
.shell{
  display:grid;
  grid-template-columns: 216px minmax(0,1fr);
  gap: 28px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px 28px 80px;
}
/* Раньше «широкие» страницы были шире остальных и центрировались по-другому —
   меню слева прыгало при переходах. Теперь ширина у всех одна. */
.shell.wide{ max-width: 1600px; }

/* ---- боковое меню ---- */
.side{ position: sticky; top: calc(var(--header-h) + 28px); align-self:start; }
.side-card{
  display:flex; flex-direction:column; gap:6px;
  background: var(--card);
  border-radius: var(--r-xl);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
}
.side-card + .side-card{ margin-top:14px; }
/* подписи групп — как «ШАГ 1: ЗАДАЧА» в кабинете 100Б */
.side-group-title{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color: var(--muted); padding: 0 4px 2px;
}
.side-card .side-group-title:not(:first-child){ margin-top:10px; }
/* пункты — светлые «пилюли», активный подсвечен фиолетовым */
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  min-height:38px; padding:0 12px; border-radius:11px;
  background:#F5F5F8;
  font-size:13.5px; font-weight:500; color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .12s var(--ease);
}
.nav-item:hover{ background:#EEEEF3; text-decoration:none; }
.nav-item:active{ transform: scale(.985); }
.nav-item.active{ background: var(--violet-soft); color: var(--violet); font-weight:600; }
/* иконки — тонкие фиолетовые линии, как в меню профиля кабинета */
.nav-item .ico{
  width:18px; height:18px; flex-shrink:0;
  color: var(--violet); opacity:.55;
  transition: opacity var(--dur) var(--ease);
}
.nav-item:hover .ico{ opacity:.8; }
.nav-item.active .ico{ opacity:1; }
.nav-item .badge-count{
  margin-left:auto; min-width:22px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--violet); color:#fff; border-radius:999px;
  font-size:11px; font-weight:700;
}

/* ---- основная колонка ---- */
.main{ min-width:0; }

/* ---------------------------------------------------------------------
   ЗАГОЛОВКИ
   --------------------------------------------------------------------- */
.page-head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:28px; }
.page-title{ font-size:30px; font-weight:800; letter-spacing:-.025em; line-height:1.15; }
.page-title .accent{ color: var(--violet); }
.page-sub{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:6px; font-size:13px; color: var(--muted);
}
.page-sub .sep{ width:1px; height:12px; background: var(--line-2); }

.section-head{
  display:flex; align-items:center; gap:16px; margin: 0 0 18px;
}
.section-title{ font-size:21px; font-weight:800; letter-spacing:-.02em; }
.section-head .grow{ flex:1; }

/* ---------------------------------------------------------------------
   КАРТОЧКИ
   --------------------------------------------------------------------- */
.card{
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
}
.card.pad-sm{ padding:18px 20px; }
.card.pad-0{ padding:0; }
.card + .card{ margin-top:16px; }
.card-head{
  display:flex; align-items:center; gap:14px;
  margin: -4px 0 18px;
}
.card-head h3{ font-size:16px; font-weight:700; }
.card-head .grow{ flex:1; }

.stack{ display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; align-items:center; gap:12px; }
.row.wrap{ flex-wrap:wrap; }
.grow{ flex:1; }

/* карточка курса / отдела — как «Мои курсы» в ЛК */
.course-card{
  display:flex; align-items:center; gap:20px;
  background: var(--card); border-radius: var(--r-lg);
  padding: 22px 26px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.course-card:hover{ box-shadow: var(--shadow); transform: translateY(-1px); text-decoration:none; }
.course-card .cc-id{ font-size:13px; color: var(--muted-2); font-weight:500; }
.course-card .cc-title{ font-size:16px; font-weight:700; color: var(--ink); margin:4px 0 8px; }
.course-card .cc-meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color: var(--muted);
}
.course-card .cc-meta .sep{ width:1px; height:11px; background: var(--line-2); }
.cc-go{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--violet-line); color: var(--violet);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:#fff; transition: all var(--dur) var(--ease);
}
.course-card:hover .cc-go{ background: var(--violet); color:#fff; border-color: var(--violet); }
.cc-dot{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:12px;
}

/* ---------------------------------------------------------------------
   ЛЕНТА СОБЕСЕДОВАНИЙ (архив)
   --------------------------------------------------------------------- */
.feed{ display:flex; flex-direction:column; gap:14px; }

.iv-card{
  background: var(--card); border-radius: var(--r-lg);
  padding: 20px 24px; box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease);
}
.iv-card:hover{ box-shadow: var(--shadow); }
.iv-top{ display:flex; align-items:flex-start; gap:14px; }
.iv-who{ min-width:0; }
.iv-name{ font-size:15px; font-weight:700; }
.iv-sub{ font-size:12.5px; color: var(--dim-rose); margin-top:1px; }
.iv-sub a{ color: inherit; }
.iv-top-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.iv-score{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color: var(--ink-2);
}
.iv-score svg{ width:17px; height:17px; color: var(--muted-2); }

.iv-body{ display:flex; gap:22px; margin-top:16px; }
.iv-time{ width:64px; flex-shrink:0; text-align:center; padding-top:2px; }
.iv-time b{ display:block; font-size:17px; font-weight:700; letter-spacing:-.02em; }
.iv-time i{
  display:block; width:18px; height:1.5px; background: var(--line-2);
  margin:6px auto; font-style:normal;
}
.iv-time span{ font-size:12px; color: var(--muted); }
.iv-detail{ flex:1; min-width:0; border-left:1px solid var(--line); padding-left:22px; }

.subject-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:30px; padding:0 14px 0 10px;
  background:#F7F7FA; border-radius:999px;
  font-size:13px; font-weight:600; color: var(--ink-2);
  margin-bottom:14px;
}
.subject-chip .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

.kv-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 24px;
}
.kv{ min-width:0; }
.kv .k{ display:block; font-size:11.5px; color: var(--muted-2); margin-bottom:2px; }
.kv .v{ font-size:13px; font-weight:500; color: var(--ink-2); word-break:break-word; }

/* ---------------------------------------------------------------------
   ЛЕНТА ДАТ
   --------------------------------------------------------------------- */
.datestrip{ margin-bottom:26px; }
.datestrip-months{
  display:flex; gap:0; font-size:13px; font-weight:600; color: var(--muted);
  margin-bottom:6px; padding-left:4px;
}
.datestrip-months .cur{ color: var(--ink); }
.datestrip-scroll{
  display:flex; gap:6px; overflow-x:auto; padding: 6px 2px 12px;
  scroll-behavior: smooth;
}
.datestrip-scroll::-webkit-scrollbar{ height:6px; }
.datestrip-scroll::-webkit-scrollbar-track{ background:#F0EEF7; border-radius:999px; }
.datestrip-scroll::-webkit-scrollbar-thumb{ background: var(--violet-line); border-radius:999px; }
.datestrip-scroll{ scrollbar-color: var(--violet-line) #F0EEF7; scrollbar-width: thin; }

.daycell{
  flex-shrink:0; width:46px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-bottom:6px; border-bottom:2px solid transparent;
}
.daycell .num{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color: var(--muted);
  background: #F4F2FA;
  transition: all var(--dur) var(--ease);
}
.daycell .wd{ font-size:12px; color: var(--muted); }
.daycell:hover .num{ background: var(--violet-soft); color: var(--violet); text-decoration:none; }
.daycell:hover{ text-decoration:none; }
.daycell.has .num{ box-shadow: inset 0 0 0 1.5px var(--violet-line); }
.daycell.today .num{ color: var(--violet); font-weight:700; }
.daycell.active .num{ background: var(--violet); color:#fff; font-weight:700; }
.daycell.active{ border-bottom-color: var(--violet); }
.daycell.active .wd{ color: var(--ink); font-weight:600; }

/* ---------------------------------------------------------------------
   БЕЙДЖИ, ЧИПЫ
   --------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 14px; border-radius: var(--r-sm);
  font-size:13px; font-weight:600; white-space:nowrap;
}
.badge.sm{ height:24px; padding:0 10px; font-size:12px; border-radius:8px; }
.badge-teal   { background: var(--teal);   color:#fff; }
.badge-violet { background: var(--violet); color:#fff; }
.badge-rose   { background: var(--rose);   color:#fff; }
.badge-amber  { background: var(--amber);  color:#fff; }
.badge-grey   { background:#F1F1F5; color: var(--muted); }
.badge-ghost  { background:#fff; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.badge-teal-soft   { background: var(--teal-soft);   color:#0B7F75; }
.badge-violet-soft { background: var(--violet-soft); color: var(--violet-strong); }
.badge-rose-soft   { background: var(--rose-soft);   color:#B4292D; }
.badge-amber-soft  { background: var(--amber-soft);  color:#9A6200; }

.tag{
  display:inline-flex; align-items:center; height:22px; padding:0 8px;
  border-radius:6px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  background: var(--violet-soft); color: var(--violet-strong);
}
.tag.level{ background:#F1F1F5; color: var(--muted); font-weight:600; }

/* ---------------------------------------------------------------------
   КНОПКИ
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 20px; border:0; border-radius: var(--r-md);
  background:#F1F1F5; color: var(--ink-2);
  font-size:14px; font-weight:600; white-space:nowrap;
  transition: all var(--dur) var(--ease);
}
.btn:hover{ background:#E8E8EE; text-decoration:none; }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn svg{ width:18px; height:18px; }

.btn-primary{ background: var(--violet); color:#fff; box-shadow: 0 4px 14px rgba(109,59,235,.22); }
.btn-primary:hover{ background: var(--violet-strong); }
.btn-outline{ background:#fff; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-outline:hover{ background:#FAFAFC; box-shadow: inset 0 0 0 1.5px var(--violet-line); color: var(--violet); }
.btn-danger{ background: var(--rose-soft); color: var(--rose); }
.btn-danger:hover{ background:#FBDCDC; }
.btn-ghost{ background:transparent; }
.btn-ghost:hover{ background:#F4F3F8; }
.btn-sm{ height:34px; padding:0 14px; font-size:13px; border-radius:10px; }
.btn-sm svg{ width:15px; height:15px; }
.btn-lg{ height:50px; padding:0 26px; font-size:15px; border-radius:16px; }
.btn-icon{ width:38px; padding:0; }
.btn-block{ width:100%; }

/* ---------------------------------------------------------------------
   ФОРМЫ
   --------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field > label, .field-label{
  font-size:12.5px; font-weight:600; color: var(--muted);
}
.field .hint{ font-size:12px; color: var(--muted-2); }
.field .err{ font-size:12px; color: var(--rose); font-weight:500; }

.input, .select, .textarea{
  width:100%; min-height:44px; padding:11px 14px;
  background:#fff; border:1.5px solid var(--line-2); border-radius: var(--r-md);
  font-size:14px; color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder{ color: var(--muted-2); }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color: var(--violet);
  box-shadow: 0 0 0 3.5px rgba(109,59,235,.12);
}
.input:disabled, .select:disabled, .textarea:disabled{ background:#F7F7FA; color: var(--muted); }
.textarea{ min-height:96px; resize:vertical; line-height:1.55; }
.select{
  appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 13px center;
}
.input.sm, .select.sm{ min-height:36px; padding:6px 12px; font-size:13px; border-radius:10px; }
.input.num{ max-width:110px; text-align:center; }

.search{ position:relative; }
.search .input{ padding-left:44px; height:48px; }
.search svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color: var(--muted-2); pointer-events:none;
}

/* выбор произвольной даты в архиве */
.date-jump{ position:relative; display:block; flex-shrink:0; }
.date-jump .input{ padding-left:42px; height:48px; width:186px; }
.date-jump svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color: var(--muted-2); pointer-events:none;
}

.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:18px; }
.form-grid .full{ grid-column: 1 / -1; }

.check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:13.5px; color: var(--ink-2); line-height:1.45;
}
.check input{
  appearance:none; flex-shrink:0;
  width:19px; height:19px; margin:1px 0 0; border-radius:6px;
  border:1.5px solid var(--line-2); background:#fff;
  transition: all var(--dur) var(--ease);
}
.check input:checked{
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--violet);
}
.check input:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.check .sub{ display:block; font-size:12px; color: var(--muted); margin-top:1px; }

.switchline{
  display:flex; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.switchline:last-child{ border-bottom:0; }
.switchline .t{ flex:1; min-width:0; }
.switchline .t b{ display:block; font-size:13.5px; font-weight:600; }
.switchline .t span{ font-size:12px; color: var(--muted); }

/* ---------------------------------------------------------------------
   ТАБЛИЦЫ
   --------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border-radius: var(--r-lg); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th{
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color: var(--muted-2);
  padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover{ background:#FBFAFD; }
table.tbl td.num{ text-align:center; font-variant-numeric: tabular-nums; }
table.tbl td.actions{ text-align:right; white-space:nowrap; }

/* ---------------------------------------------------------------------
   ПОКАЗАТЕЛИ
   --------------------------------------------------------------------- */
.metrics{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:14px; }
.metric{
  background: var(--card); border-radius: var(--r-lg);
  padding:20px 22px; box-shadow: var(--shadow-sm);
}
.metric .m-k{ font-size:12.5px; color: var(--muted); margin-bottom:8px; }
.metric .m-v{ font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.metric .m-d{ font-size:12px; color: var(--muted-2); margin-top:8px; }
.metric.accent .m-v{ color: var(--violet); }
.metric.teal .m-v{ color: var(--teal); }
.metric.rose .m-v{ color: var(--rose); }

.bar{ height:8px; background:#F1F0F6; border-radius:999px; overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:999px; background: var(--violet); }
.bar.teal > i{ background: var(--teal); }
.bar.rose > i{ background: var(--rose); }
.bar.amber > i{ background: var(--amber); }

/* ---------------------------------------------------------------------
   СОСТОЯНИЯ
   --------------------------------------------------------------------- */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:64px 24px; text-align:center;
}
.empty .ill{ width:96px; height:96px; opacity:.9; }
.empty b{ font-size:15px; font-weight:700; }
.empty p{ font-size:13.5px; color: var(--muted); max-width:380px; }

.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 18px; border-radius: var(--r-md);
  font-size:13.5px; line-height:1.5;
}
.alert svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.alert-info   { background: var(--blue-soft);   color:#1D4ED8; }
.alert-success{ background: var(--teal-soft);   color:#0B7F75; }
.alert-warn   { background: var(--amber-soft);  color:#9A6200; }
.alert-error  { background: var(--rose-soft);   color:#B4292D; }
.alert b{ font-weight:700; }

/* всплывающие уведомления */
.toasts{
  position:fixed; right:24px; bottom:24px; z-index:300;
  display:flex; flex-direction:column; gap:10px; max-width:380px;
}
.toast{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 18px; border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow-lg);
  font-size:13.5px; animation: toastIn .2s var(--ease);
}
@keyframes toastIn{ from{opacity:0; transform:translateX(16px);} to{opacity:1;transform:none;} }
.toast.out{ animation: toastOut .2s var(--ease) forwards; }
@keyframes toastOut{ to{opacity:0; transform:translateX(16px);} }
.toast .mark{ width:6px; align-self:stretch; border-radius:3px; flex-shrink:0; }
.toast.success .mark{ background: var(--teal); }
.toast.error   .mark{ background: var(--rose); }
.toast.info    .mark{ background: var(--blue); }
.toast.warn    .mark{ background: var(--amber); }

/* ---------------------------------------------------------------------
   ВХОД
   Светлый фон с узором, огромная фиолетовая плашка под наклоном и форма,
   которая на неё наезжает. Фигуры намеренно не совпадают друг с другом.
   --------------------------------------------------------------------- */
.auth-wrap{
  position:relative; min-height:100vh; overflow:hidden;
  display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items:center; gap:0;
  padding: 6vh 7vw 6vh 6vw;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%236D3BEB' stroke-opacity='.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 60 104 30l6 13-64 30z'/%3E%3Ccircle cx='44' cy='70' r='4'/%3E%3Cpath d='M210 40h56v44h-56z'/%3E%3Cpath d='M238 40v44'/%3E%3Cpath d='M210 40q28-9 56 0'/%3E%3Cpath d='M60 200h50v40H60z'/%3E%3Cpath d='M85 200v40'/%3E%3Ccircle cx='270' cy='210' r='22'/%3E%3Cpath d='m255 225 30-30'/%3E%3Cpath d='M150 300 214 270l6 13-64 30z'/%3E%3Cpath d='M300 300h36M318 282v36'/%3E%3Cpath d='M150 120l14 24h-28z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
}

/* ---- геометрия ---- */
.auth-shape{ position:absolute; pointer-events:none; }
.auth-slab{
  left:-3vw; top:7vh; width:66vw; height:84vh; z-index:0;
  background: var(--violet); border-radius:48px;
  transform: rotate(-3deg);
  box-shadow: 0 40px 90px rgba(109,59,235,.28);
}
.auth-shape-outline{
  left:3vw; top:4vh; width:60vw; height:86vh; z-index:0;
  border:2px solid var(--violet); border-radius:48px; opacity:.35;
  transform: rotate(2.5deg);
}
.auth-hundred{
  position:absolute; right:-2vw; bottom:-9vh; z-index:0;
  font-size: clamp(220px, 30vw, 460px); font-weight:800; line-height:1; letter-spacing:-.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(109,59,235,.16);
  user-select:none; pointer-events:none;
}

/* ---- левая часть: логотип и заголовок ---- */
.auth-hero{ position:relative; z-index:2; color:#fff; padding: 2vh 4vw 2vh 3vw; }
.auth-logo{ display:block; height:40px; width:auto; margin-bottom: 7vh; }
.auth-title{
  margin:0 0 32px;
  font-size: clamp(52px, 6.1vw, 116px); font-weight:800; line-height:.88;
  letter-spacing:-.035em; text-transform:uppercase;
}
.auth-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset: pt; }
.auth-points li{
  position:relative; padding-left:44px; counter-increment: pt;
  font-size:17px; font-weight:500; line-height:1.35; color: rgba(255,255,255,.92);
}
.auth-points li::before{
  content: counter(pt, decimal-leading-zero); position:absolute; left:0; top:0;
  font-size:14px; font-weight:800; letter-spacing:.04em; color: rgba(255,255,255,.55);
}

/* ---- форма: наезжает на плашку ---- */
.auth-card{
  position:relative; z-index:4; justify-self:start;
  width:100%; max-width:440px; min-width:0;
  margin-left:-4vw;
  background: var(--card); border-radius:30px;
  padding:44px 40px 36px;
  box-shadow: 0 30px 80px rgba(22,10,60,.22), 0 2px 0 rgba(22,10,60,.04);
}
.auth-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--violet); margin-bottom:8px;
}
.auth-card h1{
  font-size:44px; font-weight:800; line-height:1; letter-spacing:-.03em;
  text-transform:uppercase; margin:0 0 28px;
}
.auth-fields{ display:flex; flex-direction:column; gap:16px; }
.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field > span{ font-size:14px; font-weight:600; color: var(--ink); }
.auth-field .input{ height:54px; font-size:16px; border-radius:14px; }
.auth-remember{ margin-top:2px; }
.auth-remember span{ font-size:14px; color: var(--ink-2); }
.auth-submit{
  height:56px; margin-top:6px; border-radius:14px;
  font-size:16px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.auth-forgot{ margin-top:18px; font-size:13px; color: var(--muted); text-align:center; }

/* ---- планшет ---- */
@media (max-width: 1100px){
  .auth-wrap{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 6vh 5vw; }
  .auth-card{ margin-left:-2vw; padding:36px 30px 30px; }
  .auth-title{ font-size: clamp(46px, 6.4vw, 90px); }
  .auth-slab{ width:72vw; }
}

/* ---- телефон: плашка сверху, форма наезжает на её низ ---- */
@media (max-width: 760px){
  .auth-wrap{ display:block; padding: 0 16px 32px; }
  .auth-slab{ left:-6vw; top:-4vh; width:112vw; height:470px; border-radius:0 0 44px 44px; transform: rotate(-4deg); }
  .auth-shape-outline, .auth-hundred{ display:none; }
  .auth-hero{ padding: 28px 8px 0; }
  .auth-logo{ height:32px; margin-bottom:34px; }
  .auth-title{ font-size: clamp(44px, 13vw, 64px); margin-bottom:20px; }
  .auth-points li{ font-size:15px; }
  .auth-card{ margin: 34px 0 0; max-width:none; padding:30px 22px 24px; border-radius:26px; }
  .auth-card h1{ font-size:34px; margin-bottom:22px; }
}

/* ---------------------------------------------------------------------
   ПРОЦЕСС СОБЕСЕДОВАНИЯ
   --------------------------------------------------------------------- */
.iv-shell{
  display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:22px;
  max-width:1420px; margin:0 auto; padding:24px 28px 100px;
}
.iv-aside{ position:sticky; top: calc(var(--header-h) + 84px); align-self:start; display:flex; flex-direction:column; gap:14px; }

/* панель управления собеседованием */
.iv-bar{
  position:sticky; top: var(--header-h); z-index:80;
  display:flex; align-items:center; gap:14px;
  padding:12px 28px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.timer{
  display:inline-flex; align-items:center; gap:10px;
  height:42px; padding:0 18px; border-radius: var(--r-md);
  background: var(--violet-soft); color: var(--violet-strong);
  font-size:19px; font-weight:800; letter-spacing:.02em;
  font-variant-numeric: tabular-nums; border:0;
  transition: all var(--dur) var(--ease);
}
.timer svg{ width:16px; height:16px; }
.timer.running{ background: var(--violet); color:#fff; }
.timer.warn{ background: var(--amber-soft); color:#9A6200; }
.timer.warn.running{ background: var(--amber); color:#fff; }
.timer.danger{ background: var(--rose); color:#fff; animation: pulseRing 1.6s infinite; }
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(229,72,77,.35); }
  70%{ box-shadow:0 0 0 12px rgba(229,72,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,72,77,0); }
}

.phase{
  background: var(--card); border-radius: var(--r-xl);
  padding:26px 28px; box-shadow: var(--shadow-sm);
  position:relative; transition: opacity var(--dur) var(--ease);
}
.phase + .phase{ margin-top:18px; }
.phase-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.phase-num{
  width:34px; height:34px; border-radius:11px; flex-shrink:0;
  background: var(--violet-soft); color: var(--violet);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800;
}
.phase-title{ font-size:17px; font-weight:700; }
.phase-time{ font-size:12px; color: var(--muted-2); margin-top:1px; }

.phase.locked{ opacity:.45; pointer-events:none; user-select:none; }
.phase.locked::after{
  content: attr(data-lock); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.72);
  font-size:14px; font-weight:600; color: var(--rose);
  pointer-events:auto;
}
.phase.locked.soft::after{ color: var(--muted); font-weight:500; }

.course-auto{
  display:inline-flex; align-items:center; height:44px; padding:0 18px;
  border-radius: var(--r-md); font-size:14px; font-weight:700;
  background: var(--teal-soft); color:#0B7F75;
}
.course-auto.blank{ background:#F4F4F7; color: var(--muted-2); font-weight:500; }
.course-auto.no{ background: var(--rose-soft); color: var(--rose); }

/* блок вопросов */
.qblock{ border-radius: var(--r-lg); background:#FBFAFD; padding:16px; }
.qblock + .qblock{ margin-top:14px; }
.qblock-head{
  display:flex; align-items:center; gap:9px; margin-bottom:12px;
  font-size:13.5px; font-weight:700;
}
.qblock-head .dot{ width:9px; height:9px; border-radius:50%; }
.qblock-head .cnt{
  margin-left:auto; font-size:11.5px; font-weight:600; color: var(--muted-2);
}
.qcard{
  background:#fff; border-radius: var(--r-md); padding:16px 18px;
  box-shadow: var(--shadow-sm);
}
.qcard + .qcard{ margin-top:10px; }
.qcard .q-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.qcard .q-text{ font-size:14px; line-height:1.55; white-space:pre-wrap; }
.qcard .q-ans{
  margin-top:11px; padding:11px 14px; border-radius:10px;
  background: var(--teal-soft); color:#0A6E66;
  font-size:13px; line-height:1.55; white-space:pre-wrap;
}
.qcard .q-ans b{ display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; opacity:.8; }

/* оценка баллом */
.scoreline{ display:flex; align-items:center; gap:10px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.scoreline .lbl{ font-size:12px; font-weight:600; color: var(--muted); }
.scoreline .grow{ flex:1; }
.dots{ display:flex; gap:4px; }
.dots button{
  width:26px; height:26px; border:0; border-radius:8px;
  background:#F1F0F6; color: var(--muted);
  font-size:12px; font-weight:700;
  transition: all .12s var(--ease);
}
.dots button:hover{ background: var(--violet-soft); color: var(--violet); }
.dots button.on{ background: var(--violet); color:#fff; }
.dots button.clear{ background:transparent; color: var(--muted-2); width:22px; }

/* карточка навыка */
.skill-card{
  background:#FBFAFD; border-radius: var(--r-lg); padding:18px 20px;
}
.skill-card + .skill-card{ margin-top:12px; }
.skill-card.optional{ border:1.5px dashed var(--line-2); background:#fff; }
.skill-top{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.skill-name{ font-size:14.5px; font-weight:700; }
.skill-case{ font-size:14px; line-height:1.6; white-space:pre-wrap; }
.skill-note{
  margin-top:11px; padding:11px 14px; border-radius:10px;
  font-size:12.5px; line-height:1.55; white-space:pre-wrap;
}
.skill-note b{ display:block; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; opacity:.75; }
.skill-note.markers{ background: var(--teal-soft); color:#0A6E66; }
.skill-note.flags{ background: var(--rose-soft); color:#9E2528; }
details.crit{ margin-top:11px; }
details.crit summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color: var(--violet);
  list-style:none; display:inline-flex; align-items:center; gap:6px;
  transition: color var(--dur) var(--ease);
}
details.crit summary::-webkit-details-marker{ display:none; }
details.crit summary:hover{ color: var(--violet-strong); }
.crit-chev{
  width:14px; height:14px; flex-shrink:0;
  transition: transform var(--dur) var(--ease);
}
details.crit[open] .crit-chev{ transform: rotate(90deg); }
details.crit .body{ animation: fadeUp .18s var(--ease) both; }
details.crit .body{
  margin-top:9px; padding:12px 14px; border-radius:10px; background:#F4F3F8;
  font-size:12.5px; line-height:1.6; white-space:pre-wrap; color: var(--ink-2);
}

/* сводка справа */
.sum-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.sum-row:last-child{ border-bottom:0; }
.sum-row .k{ color: var(--muted); }
.sum-row .v{ margin-left:auto; font-weight:600; text-align:right; }
.sum-row .v.dim{ color: var(--muted-2); font-weight:500; }
.sum-pill{
  min-width:34px; height:24px; padding:0 8px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#F1F1F5; color: var(--muted-2); font-size:12.5px; font-weight:700;
}
.sum-pill.has{ background: var(--violet-soft); color: var(--violet); }

.verdict-badge{
  text-align:center; padding:16px; border-radius: var(--r-lg);
  font-size:15px; font-weight:700;
  background:#F1F1F5; color: var(--muted);
}
.verdict-badge.yes  { background: var(--teal-soft);  color:#0B7F75; }
.verdict-badge.no   { background: var(--rose-soft);  color: var(--rose); }
.verdict-badge.think{ background: var(--amber-soft); color:#9A6200; }

.crm-note{
  display:flex; align-items:center; gap:11px;
  padding:15px 20px; border-radius: var(--r-lg);
  background: var(--amber-soft); color:#8A5800;
  font-size:13.5px; font-weight:600; margin-top:18px;
}
.crm-note svg{ width:19px; height:19px; flex-shrink:0; }

/* ---------------------------------------------------------------------
   МАСТЕР ИМПОРТА
   --------------------------------------------------------------------- */
.steps{ display:flex; align-items:center; gap:8px; margin-bottom:26px; flex-wrap:wrap; }
.step{
  display:flex; align-items:center; gap:9px;
  padding:8px 16px 8px 8px; border-radius:999px; background:#F3F2F7;
  font-size:13px; font-weight:600; color: var(--muted);
}
.step .n{
  width:24px; height:24px; border-radius:50%; background:#fff; color: var(--muted-2);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.step.active{ background: var(--violet-soft); color: var(--violet-strong); }
.step.active .n{ background: var(--violet); color:#fff; }
.step.done{ background: var(--teal-soft); color:#0B7F75; }
.step.done .n{ background: var(--teal); color:#fff; }
.step-arrow{ color: var(--muted-2); }

.dropzone{
  border:2px dashed var(--line-2); border-radius: var(--r-lg);
  padding:40px 24px; text-align:center;
  transition: all var(--dur) var(--ease); cursor:pointer;
}
.dropzone:hover, .dropzone.over{ border-color: var(--violet); background: var(--violet-soft); }
.dropzone svg{ width:38px; height:38px; color: var(--muted-2); margin:0 auto 12px; }
.dropzone.over svg{ color: var(--violet); }
.dropzone b{ display:block; font-size:14.5px; margin-bottom:4px; }
.dropzone span{ font-size:12.5px; color: var(--muted); }

/* предпросмотр распознанной таблицы */
.preview-wrap{ overflow:auto; max-height:460px; border:1px solid var(--line); border-radius: var(--r-md); }
table.preview{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.preview th, table.preview td{
  padding:8px 11px; border:1px solid var(--line); text-align:left;
  max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
table.preview thead th{ position:sticky; top:0; background:#F7F6FB; z-index:2; }
table.preview tbody tr:nth-child(even){ background:#FCFCFD; }
table.preview td.skip{ color: var(--muted-2); background:#FAFAFB; }
.col-role{
  display:block; margin-top:5px; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:5px; text-align:center;
}
.col-role.mapped{ background: var(--violet-soft); color: var(--violet-strong); }
.col-role.ignored{ background:#F1F1F5; color: var(--muted-2); }
.confidence{ font-size:11px; font-weight:600; color: var(--muted-2); }
.confidence.high{ color:#0B7F75; }
.confidence.low{ color: var(--amber); }

/* ---------------------------------------------------------------------
   УТИЛИТЫ
   --------------------------------------------------------------------- */
.muted{ color: var(--muted); }
.dim{ color: var(--muted-2); }
.small{ font-size:12.5px; }
.tiny{ font-size:11.5px; }
.strong{ font-weight:700; }
.center{ text-align:center; }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.mt-0{ margin-top:0; } .mt-8{ margin-top:8px; } .mt-14{ margin-top:14px; }
.mt-20{ margin-top:20px; } .mt-28{ margin-top:28px; }
.mb-8{ margin-bottom:8px; } .mb-14{ margin-bottom:14px; } .mb-20{ margin-bottom:20px; }
.hidden{ display:none !important; }
.divider{ height:1px; background: var(--line); margin:20px 0; }
.mono{ font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size:12.5px; }
.spin{ animation: spin 1s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   АДАПТИВ
   --------------------------------------------------------------------- */
@media (max-width: 1180px){
  .iv-shell{ grid-template-columns: minmax(0,1fr); }
  .iv-aside{ position:static; }
}
@media (max-width: 900px){
  .shell{ grid-template-columns: minmax(0,1fr); gap:18px; padding:18px 16px 70px; }
  .side{ position:static; }
  .side-card{ display:flex; gap:6px; overflow-x:auto; padding:8px; }
  .side-group-title{ display:none; }
  .nav-item{ white-space:nowrap; height:40px; font-size:13.5px; }
  .topbar{ padding:0 16px; }
  .page-title{ font-size:24px; }
  .card{ padding:20px 18px; }
  .iv-shell{ padding:16px 16px 80px; }
  .iv-bar{ padding:10px 16px; overflow-x:auto; }
  .iv-body{ flex-direction:column; gap:14px; }
  .iv-detail{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:14px; }
  .iv-time{ width:auto; text-align:left; display:flex; align-items:center; gap:8px; }
  .iv-time i{ margin:0; width:10px; }
}

@media print{
  .topbar, .side, .iv-bar, .btn, .toasts{ display:none !important; }
  body{ background:#fff; }
  .card, .phase, .iv-card{ box-shadow:none; border:1px solid #DDD; break-inside: avoid; }
}

/* =====================================================================
   КОМПОНЕНТЫ ИЗ ЛК: степпер оценки, радио-критерии, плашки, пейджер
   ===================================================================== */

/* ---------- степпер с баллами (экран «Оценка») ---------- */
.stepper{ margin-bottom:22px; }
.stepper-scroll{
  display:flex; align-items:center; gap:0;
  overflow-x:auto; padding:4px 2px 12px;
}
.stepper-scroll::-webkit-scrollbar{ height:6px; }
.stepper-scroll::-webkit-scrollbar-track{ background:#F0EEF7; border-radius:999px; }
.stepper-scroll::-webkit-scrollbar-thumb{ background:#A78BFA; border-radius:999px; }
.stepper-scroll{ scrollbar-color:#A78BFA #F0EEF7; scrollbar-width:thin; }

.step-node{
  display:flex; align-items:center; gap:14px; flex-shrink:0;
  background:none; border:0; padding:0 4px;
}
.step-node .n{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#F1F1F5; color: var(--muted);
  font-size:13px; font-weight:600;
  transition: all var(--dur) var(--ease);
}
.step-node .val{
  font-size:16px; font-weight:600; color: var(--ink);
  min-width:14px; text-align:center;
}
.step-node .val.none{ color: var(--muted-2); font-weight:500; }
.step-node:hover .n{ background: var(--violet-soft); color: var(--violet); }
.step-node.done .n{ background: var(--violet-soft); color: var(--violet-strong); }
.step-node.active .n{ background: var(--violet); color:#fff; }
.step-link{ width:44px; height:1.5px; background: var(--line-2); flex-shrink:0; }

/* ---------- карточка с вариантами балла ---------- */
.rate-card{
  border:1px solid var(--line-2); border-radius: var(--r-lg);
  padding:26px 28px;
}
.rate-max{ font-size:15px; font-weight:700; margin-bottom:10px; }
.rate-current{ font-size:22px; font-weight:600; margin-bottom:16px; }
.rate-help{ color: var(--muted); font-size:14px; line-height:1.65; }
.rate-help p + p{ margin-top:12px; }

.choice{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 4px; cursor:pointer;
}
.choice + .choice{ border-top:1px solid var(--line); }
.choice input{
  appearance:none; flex-shrink:0; margin:2px 0 0;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line-2); background:#fff;
  transition: all var(--dur) var(--ease);
}
.choice input:checked{
  border:6.5px solid var(--violet);
}
.choice input:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }
.choice .txt b{ display:block; font-size:14.5px; font-weight:700; margin-bottom:3px; }
.choice .txt span{ font-size:14px; color: var(--ink-2); line-height:1.55; }
.choice:hover .txt b{ color: var(--violet); }

.rate-foot{
  display:flex; align-items:center; gap:14px;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
}
.rate-foot .grow{ flex:1; }

/* ---------- чекбокс-плашка (Бронза / Серебро / Золото) ---------- */
.chip-check{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius: var(--r-md);
  border:1.5px solid var(--line-2); background:#fff;
  font-size:13.5px; font-weight:500; cursor:pointer;
  transition: all var(--dur) var(--ease); min-width:150px;
}
.chip-check:hover{ border-color: var(--violet-line); }
.chip-check input{
  appearance:none; flex-shrink:0;
  width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--line-2); background:#fff;
}
.chip-check input:checked{
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--violet);
}
.chip-check:has(input:checked){ border-color: var(--violet); }
.chip-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- пейджер 8/20 ---------- */
.pager{ display:inline-flex; align-items:center; gap:12px; }
.pager .pg-btn{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--violet-line); background:#fff; color: var(--violet);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--dur) var(--ease);
}
.pager .pg-btn:hover{ background: var(--violet); color:#fff; border-color: var(--violet); }
.pager .pg-btn:disabled{ opacity:.35; cursor:not-allowed; background:#fff; color: var(--violet); border-color: var(--line-2); }
.pager .pg-pos{ font-size:14px; font-weight:600; color: var(--ink-2); min-width:48px; text-align:center; }

/* ---------- «← Назад» ссылкой ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color: var(--violet);
}
.back-link svg{ width:17px; height:17px; }
.back-link:hover{ text-decoration:none; opacity:.8; }

/* ---------- шапка формы редактирования ---------- */
.edit-head{
  display:flex; align-items:flex-start; gap:24px;
  padding:24px 28px; background:#fff;
  border:1px solid var(--line); border-radius: var(--r-lg);
  margin:0 0 20px;
}
.edit-head .t{ flex:1; min-width:0; }
.edit-head h1{ font-size:22px; font-weight:700; line-height:1.3; }
.edit-head .sub{ font-size:13.5px; color: var(--muted); margin-top:6px; line-height:1.5; }
.edit-head .acts{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.edit-head .acts .row{ gap:10px; }

.btn-muted{ background:#B9A8EE; color:#fff; }
.btn-muted:hover{ background: var(--violet); }
.btn-pink{ background:#FDE6E8; color:#E04A52; }
.btn-pink:hover{ background:#FBD5D8; }
.btn-violet-outline{
  background:#fff; color: var(--violet);
  box-shadow: inset 0 0 0 1.5px var(--violet);
}
.btn-violet-outline:hover{ background: var(--violet-soft); }

/* ---------- иконка-кнопка в углу карточки ---------- */
.icon-btn{
  width:34px; height:34px; border-radius:9px; border:0;
  background:transparent; color: var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition: all var(--dur) var(--ease);
}
.icon-btn:hover{ background:#F4F3F8; color: var(--ink-2); }
.icon-btn.danger:hover{ background: var(--rose-soft); color: var(--rose); }
.icon-btn svg{ width:18px; height:18px; }

/* ---------- секция формы ---------- */
.form-card{
  background:#fff; border-radius: var(--r-lg);
  border:1px solid var(--line); padding:26px 28px;
}
.form-card + .form-card{ margin-top:18px; }
.form-card > h3{ font-size:17px; font-weight:700; margin-bottom:22px; }
.req::after{ content:'*'; color: var(--violet); margin-left:2px; }

/* ---------------------------------------------------------------------
   ID СОБЕСЕДОВАНИЯ И ПОИСК ПО НЕМУ
   --------------------------------------------------------------------- */
.iv-id{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 8px 0 10px; border:0; border-radius:8px;
  background: var(--violet-soft); color: var(--violet);
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  transition: background var(--dur) var(--ease), transform .12s var(--ease);
}
.iv-id:hover{ background: var(--violet-line); }
.iv-id:active{ transform: scale(.97); }
.iv-id svg{ width:13px; height:13px; opacity:.7; }

.id-search{ position:relative; margin-left:6px; }
.id-search input{
  width:210px; height:36px; padding:0 12px 0 34px;
  border:1px solid var(--line-2); border-radius:999px; background:#F7F7FA;
  font-size:13px; letter-spacing:.03em; outline:none;
  transition: width .25s var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.id-search input::placeholder{ letter-spacing:0; color: var(--muted-2); }
.id-search input:focus{ width:260px; background:#fff; border-color: var(--violet-line); box-shadow:0 0 0 3px var(--violet-soft); }
.id-search svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color: var(--muted-2); pointer-events:none;
}
@media (max-width: 900px){ .id-search{ display:none; } }

/* ---------------------------------------------------------------------
   СВОДКА ПО РЕКРУТЕРАМ
   --------------------------------------------------------------------- */
.mt-4{ margin-top:4px; }

/* переключатель периода — сегментами */
.seg{ display:inline-flex; padding:4px; gap:2px; background:#F1F1F5; border-radius:12px; }
.seg a{
  height:34px; padding:0 14px; display:inline-flex; align-items:center;
  border-radius:9px; font-size:13px; font-weight:600; color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.seg a:hover{ color: var(--ink-2); text-decoration:none; }
.seg a.on{ background:#fff; color: var(--violet); box-shadow: var(--shadow-sm); }

.t-yes{ color:#0B7F75; }
.t-no{ color:#B4292D; }

/* полоса решений: принято / подумать / отказано */
.vbar{
  display:flex; height:8px; border-radius:999px; overflow:hidden;
  background: var(--line); min-width:80px;
}
.vbar.is-none{ opacity:.6; }
.vbar i{ display:block; height:100%; transition: width .5s var(--ease); }
.vbar i.yes{ background: var(--teal); }
.vbar i.maybe{ background: var(--amber); }
.vbar i.no{ background: var(--rose); }

.dept-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.dept-card{
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:18px 20px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-sm);
  border:1.5px solid transparent; color: inherit;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dept-card:hover{ box-shadow: var(--shadow); transform: translateY(-2px); text-decoration:none; }
.dept-card.on{ border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.dept-top{ display:flex; align-items:center; gap:8px; font-size:14px; }
.dept-top .dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dept-num{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.dept-num span{ font-size:12.5px; font-weight:500; color: var(--muted); margin-left:4px; letter-spacing:0; }
.dept-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color: var(--muted); }
.dept-rate{
  position:absolute; top:16px; right:18px; text-align:right;
  font-size:15px; font-weight:800; color:#0B7F75; line-height:1.1;
}
.dept-rate span{ display:block; font-size:10.5px; font-weight:600; color: var(--muted-2); }

.chips{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.mini-chip{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px;
  border-radius:999px; background:#F4F4F7; font-size:11.5px; font-weight:600; color: var(--ink-2);
  white-space:nowrap;
}
.mini-chip .dot{ width:7px; height:7px; border-radius:50%; }

.tbl tr.row-link{ cursor:pointer; transition: background var(--dur) var(--ease); }
.tbl tr.row-link:hover td{ background:#FAF9FD; }

/* ---------------------------------------------------------------------
   ПЛАВНОСТЬ
   --------------------------------------------------------------------- */
/* Скелетон страницы: если сервер отвечает дольше мгновения, вместо застывшего
   экрана показываем каркас следующей страницы. Сам контент не удаляется —
   только прячется, чтобы при отмене перехода всё вернулось как было. */
.main.is-skeleton > :not(.page-skel){ display:none; }
.page-skel{ display:flex; flex-direction:column; gap:16px; animation: skelIn .18s var(--ease) both; }
@keyframes skelIn{ from{ opacity:0; } }
.page-skel .row4{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:14px; }
.page-skel .blk{ background: var(--card); border-radius: var(--r-lg); padding:20px 22px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:10px; }

/* Кнопка, отправившая форму, показывает, что работа идёт. */
.btn.is-loading{ position:relative; color:transparent!important; pointer-events:none; }
.btn.is-loading svg{ opacity:0; }
.btn.is-loading::after{
  content:''; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; border:2px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) rgba(255,255,255,.25) rgba(255,255,255,.25);
  animation: spin .7s linear infinite;
}
.btn-outline.is-loading::after, .btn-ghost.is-loading::after, .btn:not(.btn-primary).is-loading::after{
  border-color: var(--violet) var(--violet) var(--violet-line) var(--violet-line);
}

/* Скелетон карточки архива — показывается сразу по клику на другой день. */
.iv-skel{
  background: var(--card); border-radius: var(--r-lg); padding:20px 24px; box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:14px;
}
.iv-skel .r{ display:flex; gap:14px; align-items:center; }
.iv-skel .skeleton{ border-radius:10px; }

/* Полосы в сводках вырастают при загрузке. */
.vbar i, .bar i{ transform-origin:left; animation: growX .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes growX{ from{ transform: scaleX(0); } }

/* Раскрывающиеся блоки (<details>) открываются по высоте плавно, где браузер умеет. */
:root{ interpolate-size: allow-keywords; }
details::details-content{
  block-size:0; overflow:hidden;
  transition: block-size .28s var(--ease), content-visibility .28s allow-discrete;
}
details[open]::details-content{ block-size:auto; }

/* Карточки отделов и рекрутеров отзываются на наведение. */
.metric{ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.metric:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

/* матрица прав: подписи столбцов целиком, без обрезки */
.grants-tbl th.num{ white-space:normal; min-width:84px; line-height:1.3; vertical-align:bottom; }
.grants-hidden{ display:none; }
.range-form{ gap:8px; }
.range-form .input{ height:40px; width:160px; }

/* ---------------------------------------------------------------------
   МОИ ВОПРОСЫ — личные наборы
   --------------------------------------------------------------------- */
.info-note{
  display:flex; align-items:flex-start; gap:11px;
  padding:14px 18px; border-radius: var(--r-lg);
  background: var(--violet-soft); color: var(--violet-strong);
  font-size:13.5px; line-height:1.5;
}
.info-note svg{ width:19px; height:19px; flex-shrink:0; margin-top:1px; }
a.subject-chip{ transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
a.subject-chip:hover{ text-decoration:none; background:#EFEEF5; }
a.subject-chip.on{ background: var(--violet-soft); color: var(--violet-strong); }
.new-set > summary{ list-style:none; cursor:pointer; }
.new-set > summary::-webkit-details-marker{ display:none; }
.icon-btn[disabled]{ opacity:.35; pointer-events:none; }

/* «Мои вопросы» на странице собеседования: меню выбора набора.
   Позиция считается скриптом — полоса кнопок на телефоне прокручивается и обрезала бы меню. */
.my-sets{ position:relative; flex-shrink:0; }
.my-sets .menu-pop{ position:fixed; top:auto; right:auto; min-width:260px; transform-origin: top right; }
.my-sets .menu-pop button .grow{ flex:1; }
#mySetsBtn[aria-expanded="true"] .chev{ transform: rotate(180deg); }