/* ================= Psy-Trainer — каталог симуляций ================= */

:root{
  --ink:      #11181c;
  --ink-2:    #374151;
  --muted:    #6b7280;
  --muted-2:  #9ca3af;
  --line:     #f3f4f6;   /* тонкая рамка карточки */
  --line-2:   #e5e7eb;   /* рамка на ховере */
  --accent:   #4318ff;
  --chip:     #f4f4f5;
  --bg:       #ffffff;
  --pad-x:    32px;
  --card-w:   260px;
  --r-card:   16px;
  --r-pill:   999px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
img{ display:block; }
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:#dcdfe4; border-radius:999px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------------- каркас ---------------- */
.shell{ display:flex; height:100vh; overflow:hidden; }
.main{ flex:1; overflow-y:auto; overflow-x:hidden; }

/* верхняя навигация */
.topbar{
  height:56px; display:flex; align-items:center; gap:8px;
  padding:0 var(--pad-x); position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
}
.brand{ display:grid; place-items:center; margin-right:12px; }
.tabs-pill{ display:flex; align-items:center; gap:2px; }
.tabs-pill a{
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:13px; color:var(--muted); transition:background .12s,color .12s;
}
.tabs-pill a:hover{ background:var(--line); color:var(--ink); }
.tabs-pill a.is-active{ background:#f1f1f3; color:var(--ink); font-weight:500; }
.topbar .spacer{ flex:1; }
.topbar .hint{ font-size:13px; color:var(--muted); }
.btn-support{
  display:flex; align-items:center; gap:6px;
  font-size:13px; padding:6px 12px; border-radius:8px;
  border:1px solid var(--line-2);
}
.btn-support:hover{ background:var(--line); }
.btn-support .star{ color:var(--accent); }

/* ---------------- шапка страницы ---------------- */
.page{ padding:8px var(--pad-x) 80px; }
h1{ font-size:30px; font-weight:600; letter-spacing:-.02em; margin:8px 0 18px; }

.seg{ display:flex; gap:22px; border-bottom:1px solid var(--line-2); margin-bottom:28px; }
.seg button{
  padding:0 0 10px; font-size:14px; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:6px;
}
.seg button.is-active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:500; }
.seg .lock{ width:12px; height:12px; opacity:.5; }

/* ---------------- секция с рядом ---------------- */
.sec{ margin-bottom:38px; }
.sec-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sec-head h2{ font-size:22px; font-weight:600; letter-spacing:-.015em; margin:0; }
.viewall{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:2px; }
.viewall:hover{ color:var(--ink); }
.sec-head .spacer{ flex:1; }
.arrows{ display:flex; gap:6px; }
.arrow{
  width:26px; height:26px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--muted-2);
  transition:background .12s, color .12s, opacity .12s;
}
.arrow:hover{ background:var(--line); color:var(--ink); }
.arrow[disabled]{ opacity:.25; cursor:default; }
.arrow svg{ width:15px; height:15px; }

/* горизонтальный скроллер */
.row{
  display:flex; gap:20px; overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth; scrollbar-width:none; padding-bottom:4px;
}
.row::-webkit-scrollbar{ display:none; }

/* ---------------- карточка клиента ---------------- */
.cell{ flex:0 0 var(--card-w); width:var(--card-w); display:flex; flex-direction:column; gap:8px; }
.card{
  position:relative; width:100%; aspect-ratio:3/4;
  border-radius:var(--r-card); overflow:hidden;
  border:2px solid var(--line);
  transition:border-width .15s ease, border-color .15s ease;
  cursor:pointer; background:#eef0f3;
}
.card:hover{ border-width:10px; border-color:var(--line-2); }
.card img, .card .ph{ position:absolute; inset:0; width:100%; height:100%; }
.card img{ object-fit:cover; }
.card .ph{
  display:grid; place-items:center;
  font-size:44px; font-weight:600; color:rgba(255,255,255,.6); letter-spacing:.02em;
}
.card .shade{
  position:absolute; inset:auto 0 0 0; height:50%; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.3) 45%, transparent);
  pointer-events:none;
}
.card .name{
  position:absolute; inset:auto 0 8% 0; z-index:3;
  padding:0 6%; text-align:center;
  color:#fff; font-size:20px; line-height:1.15; font-weight:400;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:break-word;
}

/* заглушка каталога: ч/б, некликабельная, без ховера */
.card.is-locked{ cursor:default; }
.card.is-locked:hover{ border-width:2px; border-color:var(--line); }
.card.is-locked img, .card.is-locked .ph{ filter:grayscale(1) contrast(.95); }

.badge{
  position:absolute; left:8px; top:8px; z-index:4;
  display:flex; align-items:center; gap:4px;
  font-size:10px; padding:3px 8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.9); color:var(--ink-2);
  backdrop-filter:blur(4px);
}
.badge svg{ width:9px; height:9px; }
.badge.live{ background:rgba(67,24,255,.94); color:#fff; }
.badge.live .dot{
  width:5px; height:5px; border-radius:50%; background:#7dffb0;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.chips{ display:flex; flex-wrap:wrap; gap:5px; }
.chip{
  font-size:10.5px; line-height:1; padding:5px 8px;
  border-radius:6px; background:var(--chip); color:var(--ink-2);
  white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis;
}

/* ---------------- полоса категорий ---------------- */
.catbar{
  display:flex; gap:26px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line-2); margin-bottom:18px;
}
.catbar::-webkit-scrollbar{ display:none; }
.catbar button{
  padding:0 0 10px; font-size:13px; white-space:nowrap;
  color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.catbar button.is-active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:500; }

/* ---------------- баннер ---------------- */
.banner{
  border-radius:var(--r-card); overflow:hidden; position:relative;
  padding:52px 24px; text-align:center; color:#fff;
  background:linear-gradient(135deg,#2b2440 0%,#4a3b5c 42%,#8a6b6b 100%);
}
.banner::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 120%, rgba(255,255,255,.16), transparent 60%);
  pointer-events:none;
}
.banner h3{ font-size:30px; font-weight:600; margin:0 0 12px; letter-spacing:-.02em; }
.banner p{ margin:0 auto 20px; max-width:560px; font-size:13px; line-height:1.5; opacity:.92; }
.banner .cta{
  display:inline-block; background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  font-size:13px; font-weight:500; padding:8px 20px; border-radius:var(--r-pill);
  position:relative; z-index:2; cursor:default;
}

.empty{ padding:28px 0; color:var(--muted); font-size:13px; }

/* ================= модалка запуска сессии ================= */
.ovl{
  position:fixed; inset:0; z-index:150;
  background:rgba(0,0,0,.5); backdrop-filter:blur(12px) saturate(1.5);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:ovlIn .16s ease;
}
.ovl[hidden]{ display:none; }
@keyframes ovlIn{ from{ opacity:0 } to{ opacity:1 } }

.dlg{
  width:100%; max-width:1024px; height:min(722px, calc(100vh - 96px));
  background:#fff; border-radius:14px; overflow:hidden;
  display:grid; grid-template-columns:1fr 380px;
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  animation:dlgIn .18s cubic-bezier(.2,.7,.3,1);
}
@keyframes dlgIn{ from{ opacity:0; transform:translateY(10px) scale(.99) } to{ opacity:1; transform:none } }

/* ---- левая колонка ---- */
.dlg-l{ display:flex; flex-direction:column; min-width:0; }
.dlg-tabs{
  display:flex; gap:20px; padding:18px 24px 0;
  border-bottom:1px solid var(--line-2);
}
.dlg-tabs button{
  padding:0 0 9px; font-size:13px; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.dlg-tabs button.is-active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:500; }
.dlg-tabs .lock{ width:11px; height:11px; opacity:.5; }

.dlg-body{ flex:1; overflow-y:auto; padding:14px 24px; }
.dlg-foot{ padding:12px 24px 20px; display:flex; flex-direction:column; gap:10px; }
.dlg-foot .alt{
  height:34px; border-radius:8px; font-size:13px; color:var(--muted);
  border:1px solid var(--line-2);
}
.dlg-foot .alt:hover{ background:var(--line); color:var(--ink); }
.dlg-foot .start{
  height:38px; border-radius:8px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:500; transition:background .12s, opacity .12s;
}
.dlg-foot .start:hover{ background:#3512cc; }
.dlg-foot .start[disabled]{ opacity:.4; cursor:default; background:var(--accent); }

/* ---- список сценариев ---- */
.scen{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 4px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .1s;
}
.scen:hover{ background:#fafafb; }
.scen:last-child{ border-bottom:0; }
.scen .txt{ flex:1; min-width:0; }
.scen .t{ font-size:13px; line-height:1.35; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.scen .t .i{ color:var(--muted-2); flex:0 0 auto; cursor:help; }
.scen .t .i svg{ width:12px; height:12px; display:block; }
.scen .tags{ display:flex; gap:5px; flex-wrap:wrap; }
.tg{ font-size:10px; line-height:1; padding:4px 7px; border-radius:5px; font-weight:500; }
.tg.lvl-n{ background:#e7f6ec; color:#1b7a3e; }
.tg.lvl-s{ background:#fdf1dd; color:#9a6412; }
.tg.lvl-p{ background:#fdeaea; color:#a92c2c; }
.tg.skill{ background:#efeaff; color:#4318ff; }
.tg.time{ background:var(--chip); color:var(--muted); }
.tg.soon{ background:var(--chip); color:var(--muted-2); display:inline-flex; align-items:center; gap:4px; }
.tg.soon svg{ display:block; }

.scen.is-off{ cursor:default; }
.scen.is-off:hover{ background:none; }
.scen.is-off .t, .scen.is-off .tg:not(.soon){ opacity:.45; }
.scen.is-off .rad{ opacity:.35; }
.rad{
  width:16px; height:16px; border-radius:50%; flex:0 0 16px; margin-top:2px;
  border:1.5px solid #cdd1d7; transition:border-color .12s, box-shadow .12s;
}
.scen.is-sel{ background:#f7f5ff; }
.scen.is-sel .rad{ border-color:var(--accent); border-width:5px; }

/* ---- полная сессия (заблокировано) ---- */
.fld{ display:block; font-size:12px; margin:6px 0 6px; }
.fld span{ color:var(--muted-2); }
.sel{
  display:flex; align-items:center; gap:8px;
  height:36px; padding:0 12px; margin-bottom:14px;
  border:1px solid var(--line-2); border-radius:8px; font-size:13px;
}
.sel svg{ width:14px; height:14px; margin-left:auto; color:var(--muted-2); }
.sel em{
  font-style:normal; font-size:10px; padding:3px 7px; border-radius:5px;
  background:#efeaff; color:var(--accent);
}
.sel.is-disabled{ background:#fafafb; color:var(--muted-2); cursor:default; }
.pane-note{
  display:flex; align-items:center; gap:7px; margin-top:6px;
  font-size:12px; color:var(--muted); line-height:1.45;
}
.pane-note svg{ flex:0 0 auto; }

/* ---- история ---- */
.hist-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px; border-bottom:1px solid var(--line);
}
.hist-row:last-child{ border-bottom:0; }
.hist-row .t{ font-size:13px; }
.hist-row .d{ font-size:11px; color:var(--muted-2); margin-top:2px; }
.hist-row .sp{ flex:1; }
.hist-row button{
  font-size:12px; padding:6px 12px; border-radius:7px;
  background:#efeaff; color:var(--accent);
}

/* ---- правая колонка ---- */
.dlg-r{
  border-left:1px solid var(--line-2); background:#fff;
  padding:16px 20px; overflow-y:auto; display:flex; flex-direction:column;
}
.dlg-r-head{
  display:flex; align-items:center; margin-bottom:14px;
  font-size:12px; color:var(--muted);
}
.dlg-r-act{ margin-left:auto; display:flex; gap:2px; }
.dlg-r-act button{
  width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--muted-2);
}
.dlg-r-act button:hover{ background:var(--line); color:var(--ink); }
.dlg-r-act svg{ width:13px; height:13px; }

.cli{ display:flex; gap:12px; margin-bottom:18px; }
.cli img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex:0 0 52px; background:#eef0f3; }
.cli-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px; }
.cli-meta{ display:flex; gap:5px; margin-bottom:6px; }
.cli-meta span{
  font-size:10px; padding:4px 7px; border-radius:5px;
  background:#efeaff; color:#5b46c4;
}
.cli-issue{ font-size:11px; color:var(--accent); }
.cli-issue:hover{ text-decoration:underline; }

.ov-t{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.ov-box{
  border:1px solid var(--line-2); border-radius:10px;
  padding:12px 14px; max-height:230px; overflow-y:auto;
  position:relative;
}
.ov-box::before{
  content:''; position:absolute; right:0; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:var(--accent); opacity:.5;
}
.ov-box p{ margin:0; font-size:12px; line-height:1.6; color:var(--ink-2); }

@media (max-width:900px){
  .dlg{ grid-template-columns:1fr; height:calc(100vh - 48px); }
  .dlg-r{ border-left:0; border-top:1px solid var(--line-2); }
}

/* тост */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  background:var(--ink); color:#fff; font-size:13px;
  padding:10px 16px; border-radius:10px; opacity:0;
  transition:opacity .18s, transform .18s; pointer-events:none; z-index:200;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:900px){
  :root{ --pad-x:16px; --card-w:150px; }
  .card .name{ font-size:14px; }
}