/* ══════════════════════════════════════════════════════════════════════
   css/course-insights.css — the live course's four coach screens: C1 the
   control centre, A1 Analytics, A2 one student, A3 tutor conversations (and
   lesson talk). js/course-control-centre.js, course-analytics-tab.js,
   course-student.js, course-tutor-chats.js, course-insights-kit.js.

   Drawn from the boards (artefact v39, approved G25) rule for rule: cards
   #fff on the page, 1px #ece7dd, radius 22 (C1) / 20 (A1–A3), purple
   #5b46e8, Bricolage for the big numbers. Colours sit on the funnel/course
   home's tokens where they exist so the screens sit in the course home
   unchanged. Everything is scoped under `.cin`.
   ══════════════════════════════════════════════════════════════════════ */

.cin {
  --cin-ink: var(--fh-text, #1e1b2e);
  --cin-ink-2: #3d3746;
  --cin-mute: #5d5566;
  --cin-faint: #8a8291;
  --cin-line: #ece7dd;
  --cin-line-2: #f1ede5;
  --cin-card: var(--fh-surface, #fff);
  --cin-acc: #5b46e8;
  --cin-acc-deep: #3f2aa8;
  --cin-acc-soft: #efecfd;
  --cin-bar: #d9d3f7;
  --cin-chip: #f3f0ff;
  --cin-good: #1f8a5b;
  --cin-good-soft: #e7f4ec;
  --cin-warn: #b45309;
  --cin-hot: #e0704a;
  --cin-hot-t: #c4552b;
  --cin-hot-soft: #fdf1ec;
  --cin-note: #fdf6ea;
  --cin-well: #f8f6f1;
  --cin-bub: #f3f0f8;
  --cin-display: var(--fh-display, "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif);
  font-family: var(--fh-body, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--cin-ink);
  display: flex; flex-direction: column; gap: 22px; min-width: 0;
}
.cin *, .cin *::before, .cin *::after { box-sizing: border-box; }
.cin h2 { margin: 0; }
.cin-sheet-body > .cin { gap: 18px; }

/* shared pieces */
.cin .cin-card { background: var(--cin-card); border: 1px solid var(--cin-line); border-radius: 22px; min-width: 0; }
.cin .cin-pad { padding: 20px 24px; }
.cin .cin-loading { margin: 0; padding: 16px 0; color: var(--cin-mute); font-size: 14.5px; }
.cin .cin-muted { margin: 0; color: var(--cin-mute); font-size: 14px; line-height: 1.5; }
.cin .cin-muted.sm { font-size: 12.5px; }
.cin .cin-good-t { color: var(--cin-good); }
.cin .cin-warn-t { color: var(--cin-warn); font-size: 12px; font-weight: 600; margin-left: 6px; }
.cin .cin-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cin .cin-fill { flex: 1; }
.cin .cin-av { border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #1e1b2e; font-weight: 700; opacity: .95; }
.cin .cin-h { margin: 0; font-family: var(--cin-display); font-size: 24px; font-weight: 700; }
.cin .cin-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--cin-faint); }
.cin .cin-k2 { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--cin-faint); margin-bottom: 10px; }

.cin .cin-btn { font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--cin-acc); border: 1px solid var(--cin-acc); border-radius: 999px;
  padding: 10px 18px; min-height: 44px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cin .cin-btn:hover { background: var(--cin-acc-deep); border-color: var(--cin-acc-deep); }
.cin .cin-btn:disabled { opacity: .6; cursor: default; }
.cin .cin-btn.ghost { background: #fff; color: var(--cin-ink); border-color: #e2ddd2; }
.cin .cin-btn.ghost:hover { border-color: var(--cin-faint); }
.cin .cin-btn.sm { font-size: 13.5px; padding: 8px 14px; border-radius: 10px; }
.cin .cin-btn.sq { border-radius: 10px; padding: 10px 16px; }
.cin .cin-btn:focus-visible, .cin .cin-link:focus-visible, .cin .cin-chip:focus-visible, .cin .cin-row:focus-visible,
.cin .cin-tab:focus-visible, .cin .cin-filter:focus-visible, .cin .cin-inline:focus-visible, .cin .cin-crumb-b:focus-visible { outline: 2px solid var(--cin-acc); outline-offset: 2px; }
.cin .cin-link { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--cin-acc); background: none; border: 0; padding: 0; min-height: 44px;
  display: inline-flex; align-items: center; cursor: pointer; text-align: left; align-self: flex-start; }
.cin .cin-link:hover { color: var(--cin-acc-deep); text-decoration: underline; }
.cin .cin-link.sm { font-size: 13px; }
.cin .cin-inline { font: inherit; color: var(--cin-acc); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.cin .cin-row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cin .cin-counting { margin: 0; font-size: 13px; color: var(--cin-faint); background: var(--cin-well); border-radius: 10px; padding: 8px 12px; }
.cin .cin-banner { margin: 0; font-size: 14px; color: var(--cin-ink-2); background: var(--cin-well); border-radius: 14px; padding: 12px 16px; }

/* the crumb over a page */
.cin .cin-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cin-faint); margin-bottom: -10px; }
.cin .cin-crumb-b { font: inherit; color: var(--cin-acc); background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; }
.cin .cin-crumb-b:hover { text-decoration: underline; }

/* ── C1 the control centre ─────────────────────────────────────────── */
.cin .cin-lede { margin: 4px 0 0; font-family: var(--cin-display); font-size: 24px; font-weight: 700; line-height: 1.3; max-width: 900px; }
.cin .cin-needs { padding: 8px 24px 10px; max-width: 1000px; }
.cin .cin-needs-h { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; }
.cin .cin-needs-h h2 { font-size: 18px; flex: 1; }
.cin .cin-needs-none { margin: 0; padding: 8px 0 14px; color: var(--cin-mute); font-size: 15px; }
.cin .cin-need { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.cin .cin-need + .cin-need { border-top: 1px solid var(--cin-line-2); }
.cin .cin-need-a { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.cin .cin-need-m { flex: 1; min-width: 0; }
.cin .cin-need-t { font-size: 16px; font-weight: 600; }
.cin .cin-need-s { font-size: 14px; color: var(--cin-mute); margin-top: 2px; overflow-wrap: anywhere; }
.cin .cin-needs-rest { margin-bottom: 4px; }
.cin .cin-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cin .cin-q3 { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.cin .cin-big { font-family: var(--cin-display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.cin .cin-p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--cin-ink-2); }
.cin .cin-quote { display: flex; gap: 10px; align-items: center; background: var(--cin-well); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; }
.cin .cin-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.cin .cin-bar { flex: 1; min-width: 2px; border-radius: 4px 4px 0 0; background: var(--cin-bar); }
.cin .cin-bar.hot { background: var(--cin-hot); }
.cin .cin-spark { display: block; }
.cin .cin-spark .a { fill: var(--cin-acc-soft); }
.cin .cin-spark .l { fill: none; stroke: var(--cin-acc); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.cin .cin-spark-good .a { fill: var(--cin-good-soft); }
.cin .cin-spark-good .l { stroke: var(--cin-good); }
.cin .cin-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cin .cin-chip { font-family: inherit; display: inline-flex; align-items: center; gap: 8px; color: var(--cin-ink); background: #fff; border: 1px solid var(--cin-line);
  border-radius: 999px; padding: 10px 16px; min-height: 44px; font-size: 14px; cursor: pointer; }
.cin .cin-chip:hover { border-color: var(--cin-faint); }

/* G34: the course's own rows in Needs you today (a dot where a student row
   has a face), and money taken + Maya's questions under the three cards. */
.cin .cin-need-ic { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.cin .cin-tone { width: 10px; height: 10px; border-radius: 50%; background: var(--cin-warn); }
.cin .cin-tone.bad { background: #c0392b; }
.cin .cin-need-c .cin-btn { white-space: nowrap; }
.cin .cin-bits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.cin .cin-bit { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cin .cin-bit .cin-link { min-height: 32px; text-decoration: none; }
.cin .cin-bit .cin-chip { text-align: left; }

/* ── A1 analytics ──────────────────────────────────────────────────── */
.cin.cin-an { gap: 18px; }
.cin .cin-an-head, .cin .cin-tc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cin .cin-an-lede { font-size: 15px; color: var(--cin-mute); flex: 1; min-width: 200px; }
.cin .cin-tc-head .cin-h { flex: 1; }
.cin .cin-an-ctl { display: flex; gap: 8px; align-items: center; }
.cin .cin-select { font-family: inherit; font-size: 13.5px; color: var(--cin-ink); background: #fff; border: 1px solid #e2ddd2; border-radius: 10px; padding: 8px 12px; min-height: 44px; }
.cin .cin-dates { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: flex-end; font-size: 13px; color: var(--cin-mute); }
.cin .cin-dates label { display: flex; flex-direction: column; gap: 4px; }
.cin .cin-dates input { font: inherit; color: var(--cin-ink); border: 1px solid #e2ddd2; border-radius: 10px; padding: 8px 10px; min-height: 44px; background: #fff; }
.cin .cin-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cin .cin-panel { border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cin .cin-panel-h { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.cin .cin-panel-h h2 { font-size: 17px; flex: 1; }
.cin .cin-panel-h .cin-link { min-height: 32px; }
.cin .cin-stats { display: flex; gap: 16px; }
.cin .cin-stat { flex: 1; min-width: 0; }
.cin .cin-stat-v { font-size: 24px; font-weight: 700; color: var(--cin-ink); overflow-wrap: anywhere; }
.cin .cin-stat-v.hot { color: var(--cin-hot-t); }
.cin .cin-stat-wait { display: inline-block; font-size: 13px; font-weight: 600; color: var(--cin-faint); line-height: 1.3; }
.cin .cin-stat-l { font-size: 13px; color: var(--cin-mute); }
.cin .cin-stat-d { font-size: 12px; margin-top: 2px; }
.cin .cin-stat-d.up { color: var(--cin-good); }
.cin .cin-stat-d.down { color: var(--cin-hot-t); }
.cin .cin-stat-c { font-size: 12px; color: var(--cin-faint); margin-top: 2px; }
.cin .cin-cap { margin: -6px 0 0; font-size: 12px; color: var(--cin-faint); }
.cin .cin-pills { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.cin .cin-pill { background: var(--cin-chip); border-radius: 999px; padding: 6px 12px; }
.cin .cin-offers { display: flex; flex-direction: column; border-top: 1px solid var(--cin-line-2); }
.cin .cin-offer { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cin-line-2); font-size: 14px; }
.cin .cin-offer small { display: block; font-size: 12px; color: var(--cin-mute); }
.cin .cin-offer-v { text-align: right; font-weight: 600; }
.cin .cin-lrows { display: flex; flex-direction: column; gap: 8px; }
.cin .cin-lrow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cin .cin-lrow-t { width: 260px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cin .cin-lrow-v { width: 40px; text-align: right; color: var(--cin-mute); flex-shrink: 0; }
.cin .cin-track { flex: 1; height: 10px; background: var(--cin-line); border-radius: 4px; overflow: hidden; display: block; }
.cin .cin-track i { display: block; height: 100%; background: var(--cin-acc); }
.cin .cin-track i.hot { background: var(--cin-hot); }
.cin .cin-hotnote { font-size: 13px; background: var(--cin-hot-soft); border-radius: 10px; padding: 9px 12px; }
.cin .cin-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cin .cin-tool { border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cin .cin-tool-h { font-size: 15px; font-weight: 700; }
.cin .cin-tool-l { font-size: 13px; color: var(--cin-ink-2); }

/* ── A2 one student ────────────────────────────────────────────────── */
.cin.cin-stu { gap: 18px; }
.cin .cin-who { display: flex; align-items: center; gap: 14px; }
.cin .cin-who-m { flex: 1; min-width: 0; }
.cin .cin-who-n { font-family: var(--cin-display); font-size: 24px; font-weight: 700; }
.cin .cin-who-s { font-size: 13.5px; color: var(--cin-mute); overflow-wrap: anywhere; }
.cin .cin-strip { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 12px 16px; flex-wrap: wrap; }
.cin .cin-strip .cin-track { height: 8px; min-width: 120px; }
.cin .cin-strip-t { font-size: 14px; font-weight: 600; }
.cin .cin-flag { font-size: 13px; color: var(--cin-warn); }
.cin .cin-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.cin .cin-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cin .cin-mod { font-size: 12.5px; font-weight: 700; color: var(--cin-faint); margin-top: 6px; }
.cin .cin-les { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 5px 0; }
.cin .cin-les-t { flex: 1; min-width: 0; }
.cin .cin-les-s { color: var(--cin-mute); font-size: 12.5px; text-align: right; }
.cin .cin-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #d6d0c4; flex-shrink: 0; }
.cin .cin-dot.done { background: var(--cin-good); border-color: var(--cin-good); }
.cin .cin-dot.now { border: 2px solid var(--cin-acc); }
.cin .cin-else { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--cin-line-2); }
.cin .cin-else-i { font-size: 18px; width: 24px; flex-shrink: 0; }
.cin .cin-else-t { font-size: 13.5px; font-weight: 600; }
.cin .cin-else-s { font-size: 12.5px; color: var(--cin-mute); overflow-wrap: anywhere; }

/* G34: the "⋯" beside Message */
.cin .cin-who-acts { display: flex; gap: 8px; align-items: center; }
.cin .cin-more-w { position: relative; display: inline-flex; }
.cin .cin-more-b { min-width: 48px; font-size: 18px; line-height: 1; padding: 9px 14px; }
.cin .cin-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; min-width: 240px; padding: 4px;
  background: #fff; border: 1px solid var(--cin-line); border-radius: 12px; box-shadow: 0 14px 34px -18px rgba(30, 27, 46, .45); }
.cin .cin-menu[hidden] { display: none; }
.cin .cin-menu button { font: inherit; font-size: 14px; text-align: left; color: var(--cin-ink); background: none; border: 0; border-radius: 8px; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.cin .cin-menu button:hover, .cin .cin-menu button:focus-visible { background: var(--cin-acc-soft); outline: none; }
.cin .cin-menu button.bad { color: #c0392b; }

/* a conversation */
.cin .cin-chat { display: flex; flex-direction: column; gap: 14px; }
.cin .cin-turn-t { display: flex; flex-direction: column; gap: 8px; }
.cin .cin-meta { font-size: 12px; color: var(--cin-faint); }
.cin .cin-bub { border-radius: 12px; padding: 8px 11px; font-size: 13px; line-height: 1.45; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; }
.cin .cin-bub-q { align-self: flex-end; background: var(--cin-acc); color: #fff; border-radius: 12px 12px 2px 12px; max-width: 80%; }
.cin .cin-bub-a { background: var(--cin-bub); border-radius: 12px 12px 12px 2px; }
.cin .cin-bub-me { background: var(--cin-good-soft); border-radius: 12px 12px 12px 2px; }
.cin .cin-bub-who { display: block; font-size: 11.5px; font-weight: 600; color: var(--cin-good); margin-bottom: 2px; }
.cin .cin-reply { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1.5px solid var(--cin-acc); border-radius: 12px; padding: 6px 8px 6px 10px; }
.cin .cin-reply textarea { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: 0; outline: 0; resize: vertical; min-height: 44px; padding: 10px 0; background: transparent; color: var(--cin-ink); }
.cin .cin-reply .cin-btn { font-size: 13px; padding: 8px 16px; }
.cin .cin-reply-msg { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--cin-hot-t); }
.cin .cin-reply-msg:empty { display: none; }

/* the note and message sheets */
.cin .cin-write { display: flex; flex-direction: column; gap: 6px; }
.cin .cin-lbl { font-size: 12.5px; font-weight: 600; color: var(--cin-mute); margin-top: 6px; }
.cin .cin-in { font: inherit; font-size: 14px; color: var(--cin-ink); border: 1px solid #e2ddd2; border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%; background: #fff; }
.cin .cin-ta { line-height: 1.55; resize: vertical; }
.cin .cin-write-msg { margin: 0; font-size: 13px; color: var(--cin-hot-t); }
.cin .cin-write-msg:empty { display: none; }

/* ── A3 tutor conversations, and lesson talk ───────────────────────── */
.cin.cin-tc-page, .cin.cin-talk-page { gap: 18px; }
.cin .cin-tc { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; align-items: start; }
.cin .cin-tc-list { border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.cin .cin-tc-detail { border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.cin .cin-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 6px 10px; }
.cin .cin-tab { font-family: inherit; font-size: 13px; color: var(--cin-ink); background: #fff; border: 1px solid #e2ddd2; border-radius: 999px; padding: 6px 12px; min-height: 44px; cursor: pointer; }
.cin .cin-tab.on { font-weight: 600; background: var(--cin-ink); border-color: var(--cin-ink); color: #fff; }
.cin .cin-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 8px; }
.cin .cin-filter { font-family: inherit; font-size: 12.5px; color: var(--cin-acc-deep); background: var(--cin-chip); border: 0; border-radius: 999px; padding: 6px 12px; min-height: 36px; cursor: pointer; }
.cin .cin-row { font-family: inherit; text-align: left; width: 100%; display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; color: var(--cin-ink); cursor: pointer; min-height: 44px; }
.cin .cin-row:hover { background: var(--cin-well); }
.cin .cin-row.on { background: var(--cin-chip); }
.cin .cin-row-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cin .cin-row-top { display: flex; gap: 8px; }
.cin .cin-row-t { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }
.cin .cin-row-t small { font-weight: 400; color: var(--cin-faint); }
.cin .cin-row-w { font-size: 11.5px; color: var(--cin-faint); white-space: nowrap; }
.cin .cin-row-q { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cin .cin-row-s { font-size: 12px; color: var(--cin-mute); }
.cin .cin-row-s.warn { color: var(--cin-warn); }
.cin .cin-row-s.good { color: var(--cin-good); }
.cin .cin-more { margin: 4px 14px; }
.cin .cin-tc-who { display: flex; align-items: center; gap: 10px; }
.cin .cin-tc-n { font-size: 16px; font-weight: 700; }
.cin .cin-tc-s { font-size: 12.5px; color: var(--cin-mute); }
.cin .cin-tc-back { display: none; }
.cin .cin-repeat { margin-top: auto; background: var(--cin-note); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.cin .cin-talk { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--cin-line-2); }
.cin .cin-talk-b { margin: 4px 0 8px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cin .cin-talk .cin-btn.sm { align-self: flex-start; }

/* ── laptop and phone ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cin .cin-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cin .cin-three, .cin .cin-grid2, .cin .cin-split { grid-template-columns: minmax(0, 1fr); }
  .cin .cin-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cin .cin-tc { grid-template-columns: minmax(0, 1fr); }
  .cin .cin-tc .cin-tc-detail { display: none; }
  .cin .cin-tc.is-detail .cin-tc-list { display: none; }
  .cin .cin-tc.is-detail .cin-tc-detail { display: flex; }
  .cin .cin-tc-back { display: inline-flex; }
}
@media (max-width: 640px) {
  .cin { gap: 16px; }
  .cin .cin-lede { font-size: 21px; }
  .cin .cin-needs { padding: 6px 16px 8px; border-radius: 20px; }
  .cin .cin-need { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
  .cin .cin-need-a { gap: 10px; }
  .cin .cin-need-a .cin-av { width: 32px !important; height: 32px !important; }
  .cin .cin-need-t { font-size: 15px; }
  .cin .cin-need-s { font-size: 13px; }
  .cin .cin-need .cin-btn { align-self: flex-start; }
  .cin .cin-q3 { padding: 20px; border-radius: 20px; }
  .cin .cin-big { font-size: 27px; }
  .cin .cin-stats { flex-wrap: wrap; gap: 14px 16px; }
  .cin .cin-stat { flex: 1 1 40%; }
  .cin .cin-lrow-t { width: 42%; }
  .cin .cin-tools { grid-template-columns: minmax(0, 1fr); }
  .cin .cin-who { flex-wrap: wrap; }
  .cin .cin-who .cin-btn { width: 100%; }
  .cin .cin-who-acts { width: 100%; }
  .cin .cin-who-acts [data-cin-msg] { flex: 1; width: auto; }
  .cin .cin-who .cin-more-b { width: auto; }
  .cin .cin-bit { padding: 18px 20px; border-radius: 20px; }
  .cin .cin-need-c .cin-btn { white-space: normal; }
  .cin .cin-an-ctl { width: 100%; }
  .cin .cin-an-ctl .cin-select { flex: 1; }
  .cin .cin-panel { padding: 16px; }
}