: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)}
  
  
/* body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0; padding:16px; background:#f7f8fb;}
.hidden{ display:none;}
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
.card{ background:#fff; padding:16px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); cursor:pointer;}
.chat{ background:#fff; padding:12px; border-radius:12px; height:380px; overflow:auto;}
.msg{ padding:8px 10px; border-radius:10px; margin:6px 0; max-width:70%;}
.msg.user{ background:#e8f0ff; margin-left:auto;}
.msg.bot{ background:#f1f1f1; margin-right:auto;}
.layout{ display:grid; grid-template-columns: 1fr 260px; gap:12px;}
.side{ display:flex; flex-direction:column; gap:12px;}
#gaugeVal{ font-size:40px; text-align:center; background:#fff; border-radius:12px; padding:12px;}
.controls{ margin-top:10px; display:flex; gap:8px;}
button{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer;}
input{ padding:8px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; flex:1;} */