:root{
    --bg:#f6f8fb; --card:#fff; --ink:#0f172a; --muted:#6b7280; --border:#e5e7eb;
    --indigo:#4f46e5; --indigo-weak:#eef2ff; --orange:#f97316;
    --radius:20px; --shadow:0 10px 30px rgba(2,6,23,.08);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--ink);
    background:radial-gradient(1200px 600px at 50% -50%, #fff 0, var(--bg) 60%, var(--bg) 100%);
  }
  
  /* Topbar */
  .topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; background:#fff; box-shadow:var(--shadow);}
  .burger{border:0;background:transparent;font-size:22px;cursor:pointer}
  .brand{display:flex; gap:10px; align-items:center}
  .logo{height:28px}
  .brand-name{font-weight:700}
  .demo-badge{background:var(--indigo-weak); color:var(--indigo); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600}
  
  .container{max-width:1200px; margin:24px auto; padding:0 16px}
  .section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:8px 4px 18px}
  .section-head h2{margin:0; font-size:28px}
  .partners{color:var(--muted); font-weight:600}
  
  .hidden{display:none !important}
  .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
  .btn{border:1px solid var(--border); background:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600}
  .btn:hover{filter:brightness(.98)}
  .btn-primary{background:linear-gradient(135deg, var(--orange), #ff8c42); color:#fff; border:0}
  .btn-ghost{background:transparent; border:1px dashed var(--border); color:var(--muted)}
  .input{
    width:100%; border:1px solid var(--border); border-radius:12px; padding:12px 14px;
    background:#fff; color:var(--ink);
  }
  .field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
  .row{display:flex; align-items:center}.gap{gap:10px}
  
  /* Grid (выбор курсов) */
  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:24px}
  .course-card{display:flex; flex-direction:column; gap:14px; padding:18px; position:relative; overflow:hidden}
  .course-title{font-size:22px; font-weight:800; margin:0}
  /* .course-logo{height:120px; display:grid; place-items:center}
  .course-logo .logo-badge{width:96px; height:96px; border-radius:28px; background:var(--indigo-weak); display:grid; place-items:center; box-shadow:inset 0 0 0 8px #fff}
  .course-logo img{max-width:72px; height:auto} */
  .course-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0;
  }
  
  .course-logo img {
    width: 80px;
    height: auto;
    object-fit: contain;
    border-radius: 12px; /* можно убрать, если не нужно скругление */
    box-shadow: none;    /* убираем фон и “окошко” */
    background: none;
  }
  
  .meta{display:grid; grid-template-columns:1fr 1fr; gap:10px; color:var(--muted); font-size:14px}
  .badge{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px; padding:4px 8px; border-radius:999px; background:var(--indigo-weak); color:var(--indigo)}
  .badge.success{background:#ecfdf5; color:#10b981}
  .badge.purple{background:#f5f3ff; color:#8b5cf6}
  .cta{display:flex; justify-content:space-between; align-items:center; margin-top:8px}
  
  /* Dialog */
  .layout{display:grid; grid-template-columns: 1fr 300px; gap:20px}
  .chat{
    height:55vh; overflow:auto; padding:14px;
    background:#fff; border:1px solid var(--border); border-radius:16px;
  }
  .msg{padding:10px 12px; border-radius:12px; margin:6px 0; max-width:80%}
  .msg.user{background:#eff6ff; align-self:flex-end}
  .msg.bot{background:#f8fafc}
  .msg.system{background:#fef3c7}
  
  .side{display:flex; flex-direction:column; gap:12px}
  .side .panel{background:#fff; border:1px solid var(--border); border-radius:16px; padding:12px; position:sticky; top:12px}
  .timer-title{color:var(--muted); font-weight:600}
  .countdown{font-size:28px; font-weight:800; letter-spacing:.5px}
  
  .controls{
    display:grid; grid-template-columns: auto 1fr auto auto; gap:10px;
    margin-top:12px; align-items:center;
  }
  
  /* Report block */
  .report { margin: 10px 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
  .report h2, .report h3, .report h4 { margin: 12px 0 8px; }
  .report p { margin: 8px 0; line-height: 1.5; }
  .report ul, .report ol { margin: 8px 0 8px 22px; }
  .report .report-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom: 8px; }
  .report .dl-btn { border:1px solid var(--border); background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:600; font-size:14px; }
  .report table { width:100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
  .report th, .report td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
  .report thead th { background: var(--indigo-weak); color: var(--indigo); }
  .report tbody tr:nth-child(even) { background: #fafafa; }
  
  /* History */
  .history-list{list-style:none; padding:0; margin:0}
  .history-list li{padding:10px 0; border-bottom:1px dashed var(--border)}
  
  /* --- Stats screen --- */
.stats-layout{
    display:grid; grid-template-columns: 380px 1fr; gap:20px;
  }
  .stats-list{
    padding:0; overflow:auto;
  }
  .stats-item{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 14px; border-bottom:1px dashed var(--border); cursor:pointer;
  }
  .stats-item:hover{background:#fafafa}
  .stats-item .meta{display:flex; flex-direction:column; gap:4px}
  .stats-item .meta .title{font-weight:700}
  .stats-item .meta .sub{color:var(--muted); font-size:12px}
  .stats-view{padding:16px 18px; min-height:360px}
  .stats-view .muted{color:var(--muted)}
  
/* Блок с подсказкой */
.hint-box {
  padding: 14px 18px;          /* чуть больше внутренние отступы */
  border-radius: 12px;
  background: #f7f9ff;
  border-left: 4px solid #3a5ef0;
  min-height: 90px;            /* гарантированный «рост» */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-wrap: break-word;   /* чтобы длинные слова не вылезали */
}

/* Заголовок и текст */
.hint-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.hint-text {
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

/* Чтобы таймер и подсказка были визуально разделены */
.side {
  display: flex;
  flex-direction: column;
  gap: 14px;                   /* увеличен отступ между таймером и подсказкой */
}

.avatar-box {
  margin-top: 12px;
  text-align: center;
  background: #1f2937;
  padding: 6px;
}
.avatar-box video {
  width: 100%;
  height: auto;
  border-radius: 10px;
}


/* HUB cards */
.hub-card { padding:18px; display:flex; flex-direction:column; gap:8px; cursor:pointer }
.hub-card:hover { filter: brightness(.99); }
.hub-title { margin:0; font-size:22px; font-weight:800 }

/* Progress bar */
.progress { width:100%; height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; border:1px solid var(--border) }
.progress .bar { height:100%; background:linear-gradient(90deg, var(--indigo), #7c3aed); transition: width .4s ease; }

.hidden { display: none !important; }

/* ===== Agent scenario form ===== */

.agent-form {
  max-width: 760px;
  margin-top: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.agent-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-form-field label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #111);
}

.agent-form .input {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.agent-form .input::placeholder {
  color: #9ca3af;
}

.agent-form .input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.agent-form .textarea {
  resize: vertical;
  min-height: 120px;
}

.agent-form-hint {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.agent-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-form-actions .muted {
  font-size: 13px;
}