/* ============================================================
   Khan SAT-1600 · Студия записи разборов (v147)
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов
   Фирменные цвета: лесной зелёный #1B5E20 и золото #C9A227.
   Рабочая область — белый лист; интерфейс вокруг — тёмно-зелёный,
   чтобы в записи взгляд оставался на задании и доске.
   ============================================================ */

.st, .st-modal-bg, .st-rec, .st-cam {
  --st-g: #1B5E20;
  --st-g2: #0E3D14;
  --st-g3: #2E7D32;
  --st-gold: #C9A227;
  --st-red: #E53935;
  --st-ink: #1a1a1a;
  --st-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --st-serif: Georgia, "Noto Serif", "Times New Roman", serif;
}
html.st-on, html.st-on body { overflow: hidden !important; }
html.st-on #ksat-bottomnav, html.st-on #eduSide, html.st-on #eduBurger,
html.st-on #eduVeil, html.st-on #ext-sheet-bg, html.st-on #nx-po { display: none !important; }
html.bb-on .lightbox, html.st-on .lightbox { z-index: 1300 !important; }
/* атрибут hidden сильнее собственных display:flex/grid — иначе скрытые панели остаются видны и попадают в запись */
.st [hidden], .st-rec [hidden], .st-cam[hidden], .st-modal [hidden], .bb [hidden], .bb-center [hidden] { display: none !important; }

.st {
  position: fixed; inset: 0; z-index: 800; display: grid; grid-template-rows: auto 1fr;
  background: #dfe5de; color: var(--st-ink); font-family: var(--st-sans); font-size: 14px;
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st button, .st input, .st select, .st textarea { font-family: var(--st-sans); }

/* ---------- верхняя панель: ввод задания ---------- */
.st-top {
  position: relative; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; min-height: 56px; background: var(--st-g2); color: #fff;
  box-shadow: 0 2px 0 var(--st-gold);
}
.st-back {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center;
}
.st-back svg { width: 20px; height: 20px; }
.st-back:hover { background: rgba(255,255,255,.2); }
.st-brand { line-height: 1.15; margin-right: 4px; }
.st-brand b { display: block; font-size: 15px; color: var(--st-gold); }
.st-brand span { font-size: 11.5px; color: #cfe3d1; }
.st-find { display: flex; align-items: center; gap: 6px; flex: 1 1 560px; min-width: 0; flex-wrap: wrap; }
.st-search { flex: 1 1 250px; min-width: 190px; }
.st-search input {
  width: 100%; height: 36px; border: 0; border-radius: 10px; padding: 0 12px;
  font-size: 14px; background: #fff; color: var(--st-ink); outline: none;
}
.st-search input:focus { box-shadow: 0 0 0 3px rgba(201,162,39,.55); }
.st-top select {
  height: 36px; border: 0; border-radius: 10px; padding: 0 8px; font-size: 13px;
  background: #fff; color: var(--st-ink); max-width: 200px;
}
.st-btn {
  height: 36px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.28); cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; padding: 0 12px; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.st-btn:hover { background: rgba(255,255,255,.18); }
.st-btn.on { background: var(--st-gold); border-color: var(--st-gold); color: #1a1a1a; }
.st-btn:disabled { opacity: .6; cursor: default; }
.st-ic { min-width: 36px; padding: 0 9px; font-size: 16px; }
.st-top-r { display: flex; gap: 6px; margin-left: auto; }
.st-results {
  position: absolute; left: 12px; right: 12px; top: 100%; z-index: 40; max-height: 62vh; overflow: auto;
  background: #fff; color: var(--st-ink); border-radius: 0 0 14px 14px; padding: 6px;
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
}
.st-res {
  display: grid; grid-template-columns: 86px 1fr; gap: 2px 12px; width: 100%; text-align: left;
  border: 0; background: none; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--st-ink);
}
.st-res:hover { background: #eef5ee; }
.st-res b { color: var(--st-g); grid-row: span 2; font-size: 14px; }
.st-res-meta { font-size: 12px; color: #6b6b6b; }
.st-res-txt { font-size: 13.5px; line-height: 1.45; color: #2a2a2a; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-res mark { background: #fff0a8; color: inherit; }
.st-res-empty { padding: 14px; color: #6b6b6b; }

/* ---------- лист ---------- */
.st-stage { position: relative; overflow: hidden; min-height: 0; }
.st-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.st-sizer { position: relative; }
.st-sheet {
  position: absolute; left: 0; top: 0; width: 1200px; transform-origin: 0 0;
  background-color: #fff; box-shadow: 0 0 0 1px #cfd8cf;
}
.st-sheet.bg-grid { background-image: linear-gradient(#e3eaf1 1px, transparent 1px), linear-gradient(90deg, #e3eaf1 1px, transparent 1px); background-size: 40px 40px; }
.st-sheet.bg-dots { background-image: radial-gradient(#c3ceda 1.4px, transparent 1.7px); background-size: 30px 30px; }
.st-sheet.bg-lines { background-image: linear-gradient(#dde6ef 1px, transparent 1px); background-size: 100% 44px; }
.st-sheet.bg-plain { background-image: none; }
.st-sheet.bg-dark {
  background-color: #1f3326;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.st-ink { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; }
.st-live { z-index: 5; touch-action: none; }
.st-task { position: absolute; left: 84px; top: 30px; width: 1086px; font-size: var(--st-fs, 24px); }
.st-card {
  background: #fff; color: var(--st-ink); border: 1.5px solid #d5dfd5; border-radius: 18px;
  padding: 20px 28px 24px; box-shadow: 0 3px 0 #e2eae2;
}
.bg-dark .st-card { box-shadow: none; border-color: #fff; }
.st-meta {
  display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
  font-family: var(--st-sans); font-size: 14px; color: #5f6f61;
}
.st-meta b { color: var(--st-g); font-size: 15px; }
.st-meta span { background: #f1f5f1; border-radius: 10px; padding: 2px 9px; }
.st-lv.lv-E { background: #e7f5e8 !important; color: #2E7D32; }
.st-lv.lv-M { background: #fff5d9 !important; color: #8a6d00; }
.st-lv.lv-H { background: #fde8e8 !important; color: #b3261e; }
.st-cols { display: grid; grid-template-columns: 1.08fr 1fr; gap: 32px; }
.st-passage { border-right: 2px dashed #d5dfd5; padding-right: 28px; }
.st-passage, .st-question, .st-one, .st-stem { font-family: var(--st-serif); line-height: 1.55; }
.st-passage p, .st-question p, .st-stem p { margin: 0 0 .6em; }
.st-choices { display: flex; flex-direction: column; gap: .42em; margin-top: .5em; }
.st-choices--grid { display: grid; grid-template-columns: 1fr 1fr; gap: .42em .9em; }
.st-ch { display: flex; gap: .6em; align-items: flex-start; padding: .32em .55em; border: 1.5px solid #cfd8cf; border-radius: 12px; background: #fff; }
.st-ch b {
  flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid #1a1a1a;
  display: grid; place-items: center; font-family: var(--st-sans); font-size: .76em; margin-top: .06em;
}
.st-ch.is-key { border-color: var(--st-g3); box-shadow: 0 0 0 2px var(--st-g3); background: #f1f8f1; }
.st-ch.is-key b { background: var(--st-g3); border-color: var(--st-g3); color: #fff; }
.st-spr { margin-top: .6em; font-family: var(--st-sans); font-size: .72em; color: #5f6f61; display: flex; align-items: center; gap: .6em; }
.st-spr-box { display: inline-block; width: 7em; height: 1.9em; border: 1.5px solid #9fb09f; border-radius: 10px; background: #fff; }
.st-fig { margin: .6em 0; text-align: center; }
.st-fig img, .st-fig svg { max-width: 100%; height: auto; }
.st-fig--snap img { border-radius: 10px; border: 1px solid #e3e9e3; }
.st-ans {
  margin-top: .7em; padding: .55em .8em; border-radius: 12px; background: #f1f8f1;
  border: 1.5px solid #a5d6a7; font-family: var(--st-sans); font-size: .7em;
}
.st-ans b { color: var(--st-g); }
.st-ans-ex { margin-top: .4em; white-space: pre-wrap; line-height: 1.5; color: #2b3b2d; }
.st-empty h2 { margin: 0 0 .4em; font-family: var(--st-sans); color: var(--st-g); font-size: 1.1em; }
.st-empty p { font-size: .72em; color: #3d4a3f; line-height: 1.6; font-family: var(--st-sans); }
.st-muted { color: #6b7b6d; }
.st-extend {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1;
  border: 1.5px dashed #9fb09f; background: rgba(255,255,255,.9); color: #3f5541;
  border-radius: 12px; padding: 10px 18px; font-size: 16px; cursor: pointer;
}
.st-textin {
  position: absolute; z-index: 8; min-width: 180px; min-height: 1.5em; padding: 0 2px;
  border: 1.5px dashed #1565C0; background: rgba(255,255,255,.85); outline: none; resize: none;
  font-family: var(--st-serif); line-height: 1.25; overflow: hidden; border-radius: 4px;
}

/* ---------- инструменты ---------- */
.st-tools {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 12;
  display: flex; flex-direction: column; gap: 3px; padding: 6px; background: #fff; border-radius: 16px;
  box-shadow: 0 8px 26px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
}
.st-tool {
  width: 42px; height: 42px; border: 0; border-radius: 11px; background: none; color: #37473a;
  display: grid; place-items: center; cursor: pointer; position: relative;
}
.st-tool svg { width: 22px; height: 22px; }
.st-tool:hover { background: #eef5ee; }
.st-tool.on { background: var(--st-g); color: #fff; }
.st-sep { height: 1px; background: #e3e9e3; margin: 2px 4px; }
.st-swatch i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #9aa89b; display: block; transition: transform .15s; }
.st-fly {
  position: absolute; left: calc(100% + 10px); z-index: 13; min-width: 230px; padding: 10px;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
}
.st-fly h4 { margin: 2px 6px 8px; font-size: 12px; color: #6b7b6d; font-weight: 700; }
.st-fly-grid { display: grid; grid-template-columns: repeat(4, 36px); gap: 9px; padding: 0 4px; }
.st-fly-c { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #c4cec5; cursor: pointer; }
.st-fly-c.on { box-shadow: 0 0 0 3px var(--st-g); }
.st-fly-w { display: flex; gap: 8px; padding: 0 4px; }
.st-fly-w button { flex: 1; height: 36px; border-radius: 10px; border: 1.5px solid #d6ded6; background: #fff; cursor: pointer; display: grid; place-items: center; }
.st-fly-w button.on { border-color: var(--st-g); background: #eef5ee; }
.st-fly-w i { display: block; width: 26px; background: #1a1a1a; border-radius: 4px; }
.st-fly-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left;
  padding: 9px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; color: var(--st-ink);
}
.st-fly-list button:hover { background: #eef5ee; }
.st-fly-list button.on { background: #e4f1e4; font-weight: 700; }
.st-fly-list svg { width: 20px; height: 20px; flex: none; }
.st-pages {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 12;
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 13.5px;
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.16);
}
.st-pages button { border: 0; background: #f0f4f0; border-radius: 9px; height: 30px; min-width: 30px; padding: 0 10px; cursor: pointer; font-weight: 600; color: var(--st-ink); }
.st-pages button:disabled { opacity: .4; cursor: default; }
.st-count { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(10,26,14,.35); pointer-events: none; }
.st-count b { font-size: 170px; font-weight: 800; color: #fff; text-shadow: 0 8px 34px rgba(0,0,0,.45); animation: stcount .8s ease-out; }
@keyframes stcount { from { transform: scale(1.5); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: .9; } }

/* ---------- запись — левый нижний угол ---------- */
.st-rec {
  position: fixed; left: 16px; bottom: 16px; z-index: 850; width: 310px; padding: 10px;
  background: #111a13; color: #fff; border-radius: 18px; font-family: var(--st-sans); font-size: 13px;
  box-shadow: 0 12px 38px rgba(0,0,0,.38), 0 0 0 1px rgba(201,162,39,.35);
}
.st-rec *, .st-rec *::before, .st-rec *::after { box-sizing: border-box; }
.st-rec-go {
  width: 100%; height: 46px; border: 0; border-radius: 12px; background: var(--st-red); color: #fff; cursor: pointer;
  font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit;
}
.st-rec-go i { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.st-rec-go:hover { background: #d32f2f; }
.st-rec-go:disabled { opacity: .75; cursor: progress; }
.st-rec-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.st-rec-row select { flex: 1; min-width: 0; height: 36px; border: 0 !important; border-radius: 10px; background: #223026 !important; color: #fff !important; padding: 0 8px; font-size: 13px; font-family: inherit; box-shadow: none !important; }
.st-rec-row select option, .st-set select option { background: #223026; color: #fff; }
.st-tg {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: #223026; color: #8fa593;
  display: grid; place-items: center; cursor: pointer; font-size: 16px; font-weight: 700; font-family: inherit;
}
.st-tg svg { width: 18px; height: 18px; }
.st-tg.on { background: #2f5d35; color: #fff; }
.st-tg.off { color: #ef9a9a; }
.st-tg:hover { filter: brightness(1.2); }
.st-rec-live { display: flex; align-items: center; gap: 6px; }
.st-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--st-red); animation: stpulse 1.2s infinite; }
.st-rec.paused .st-dot { animation: none; background: #f5b400; }
@keyframes stpulse { 50% { opacity: .3; } }
#st-rec-time { font-variant-numeric: tabular-nums; font-size: 16px; min-width: 52px; }
.st-meter { flex: 1; min-width: 26px; height: 6px; border-radius: 3px; background: #223026; overflow: hidden; }
.st-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #66bb6a, #ffca28 70%, #ef5350); transition: width .12s; }
.st-stop { background: var(--st-red) !important; color: #fff !important; }
.st-rec.is-mini { width: auto; padding: 6px 8px; }
.st-rec.is-mini .st-meter, .st-rec.is-mini #st-rec-mic, .st-rec.is-mini #st-rec-cam { display: none; }
.st-set { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2a3a2e; display: flex; flex-direction: column; gap: 8px; color: #cfe3d1; font-size: 12.5px; }
.st-set label { display: flex; flex-direction: column; gap: 4px; }
.st-set select { height: 32px; border: 0 !important; border-radius: 8px; background: #223026 !important; color: #fff !important; padding: 0 8px; font-family: inherit; }
.st-set .st-chk { flex-direction: row; align-items: center; gap: 8px; }
.st-set-hint { color: #8fa593; font-size: 12px; line-height: 1.45; }

/* ---------- камера — правый нижний угол ---------- */
.st-cam {
  position: fixed; right: 24px; bottom: 24px; z-index: 860; overflow: hidden; cursor: grab; background: #0b0f0c;
  border: 4px solid #fff; box-shadow: 0 12px 36px rgba(0,0,0,.42), 0 0 0 2px var(--st-gold); touch-action: none;
}
.st-cam:active { cursor: grabbing; }
.st-cam.sh-circle { border-radius: 50%; }
.st-cam.sh-rect { border-radius: 20px; }
.st-cam.s-s { width: 150px; height: 150px; }
.st-cam.s-m { width: 220px; height: 220px; }
.st-cam.s-l { width: 320px; height: 320px; }
.st-cam.sh-rect.s-s { width: 200px; height: 150px; }
.st-cam.sh-rect.s-m { width: 294px; height: 220px; }
.st-cam.sh-rect.s-l { width: 426px; height: 320px; }
.st-cam video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.st-cam.mirror video { transform: scaleX(-1); }
.st-cam-ui { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.st-cam:hover .st-cam-ui { opacity: 1; }
.st-cam-ui button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--st-sans); }

/* ---------- окна: готовая запись, библиотека, своё задание ---------- */
.st-modal-bg { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: rgba(6,20,9,.55); font-family: var(--st-sans); }
.st-modal {
  width: min(740px, 100%); max-height: 92vh; overflow: auto; background: #fff; color: var(--st-ink);
  border-radius: 18px; padding: 18px 22px 20px; box-shadow: 0 24px 70px rgba(0,0,0,.4);
}
.st-modal *, .st-modal *::before, .st-modal *::after { box-sizing: border-box; }
.st-modal-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.st-modal-h b { font-size: 18px; color: var(--st-g); }
.st-modal-h .st-x { margin-left: auto; }
.st-x { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f0f4f0; cursor: pointer; font-size: 15px; color: var(--st-ink); }
.st-modal video { width: 100%; max-height: 52vh; border-radius: 12px; background: #000; margin: 6px 0 12px; display: block; }
.st-field { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; font-size: 13px; font-weight: 600; color: #3d4a3f; }
.st-field input, .st-field select, .st-field textarea {
  border: 1.5px solid #cfd8cf; border-radius: 10px; padding: 9px 11px; font-size: 14px; font-weight: 400;
  font-family: var(--st-sans); color: var(--st-ink); background: #fff; width: 100%;
}
.st-field textarea { resize: vertical; line-height: 1.5; }
.st-own-ch { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.st-chk2 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0; cursor: pointer; }
.st-chk2 input { width: 17px; height: 17px; accent-color: var(--st-g); }
.st-modal-f { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.st-sp { flex: 1; }
.st-modal .st-btn { background: #f0f4f0; color: var(--st-ink); border-color: #d6ded6; }
.st-modal .st-btn:hover { background: #e4ece4; }
.st-modal .st-btn-p { background: var(--st-g); color: #fff; border-color: var(--st-g); }
.st-modal .st-btn-p:hover { background: var(--st-g2); }
.st-modal .st-danger { color: #b3261e; }
.st-prog { position: relative; height: 26px; border-radius: 13px; background: #eef2ee; overflow: hidden; margin-top: 8px; }
.st-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--st-g3), #66bb6a); transition: width .2s; }
.st-prog span { position: relative; display: block; text-align: center; line-height: 26px; font-size: 12.5px; font-weight: 700; color: #1a1a1a; }
.st-lib { width: min(860px, 100%); }
.st-lib-row { padding: 12px 0; border-top: 1px solid #edf1ed; }
.st-lib-row:first-child { border-top: 0; }
.st-lib-main b { display: block; font-size: 15px; }
.st-lib-main span { font-size: 12.5px; color: #6b7b6d; }
.st-lib-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.st-lib-act .st-btn { height: 32px; font-size: 13px; }
.st-lib-video video { width: 100%; border-radius: 10px; margin-top: 10px; background: #000; }

/* кнопка «В студию» в тренажёре — только у владельца */
.st-to {
  margin-left: auto; border: 1.5px solid #1B5E20; background: #fff; color: #1B5E20; border-radius: 10px;
  padding: 3px 10px; font-weight: 700; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}
.st-to:hover { background: #eef5ee; }

/* видеотека: записи студии играются встроенным плеером */
.ext-video-frame video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }

@media (min-width: 1280px) {
  .st-find { flex-wrap: nowrap; }
  .st-find select { flex: 0 1 170px; min-width: 0; }
  .st-find .st-btn { flex: none; }
}
@media (max-width: 760px) {
  .st-brand { display: none; }
  .st-top select { max-width: 130px; }
  .st-rec { width: calc(100% - 32px); }
  .st-tools { top: auto; bottom: 80px; transform: none; }
}

/* ---------- вход в студию: кнопка в шапке и карточка на главной (v147.1) ---------- */
.st-topbtn {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 34px; margin: 0 8px;
  padding: 0 14px 0 12px; border-radius: 18px; background: #E53935; color: #fff !important;
  font: 700 13.5px "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none !important; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(229,57,53,.4), 0 0 0 1.5px rgba(255,255,255,.35);
}
.st-topbtn i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); animation: stpulse 1.6s infinite; }
.st-topbtn:hover { background: #d32f2f; }
.st-topbtn.on { background: #C9A227; color: #1a1a1a !important; }
.st-topbtn.on i { background: #E53935; }
@media (max-width: 1180px) { .st-topbtn span { display: none; } .st-topbtn { padding: 0 11px; margin: 0 4px; } }
.st-home {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin: 0 0 18px;
  padding: 18px 22px; border-radius: 18px; color: #fff; font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(135deg, #0E3D14 0%, #1B5E20 70%, #24702b 100%);
  border: 1.5px solid rgba(201,162,39,.65); box-shadow: 0 12px 30px rgba(14,61,20,.25);
}
.st-home-ic { width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.st-home-ic i { width: 18px; height: 18px; border-radius: 50%; background: #E53935; box-shadow: 0 0 0 7px rgba(229,57,53,.25); animation: stpulse 1.6s infinite; }
.st-home-t b { display: block; font-size: 19px; color: #C9A227; }
.st-home-t p { margin: 5px 0 4px; color: #dcebdd; font-size: 14px; line-height: 1.55; max-width: 720px; }
.st-home-t small { color: #9fc3a3; font-size: 12px; }
.st-home-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.st-home-act input { width: 130px; height: 42px; border: 0; border-radius: 11px; padding: 0 12px; font-size: 15px; color: #1a1a1a; background: #fff; }
.st-home-act .go { height: 42px; border: 0; border-radius: 11px; padding: 0 18px; background: #E53935; color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.st-home-act .go:hover { background: #d32f2f; }
.st-home-act .ghost { height: 42px; border-radius: 11px; padding: 0 14px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.38); font-weight: 600; cursor: pointer; }
.st-home-act .ghost:hover { background: rgba(255,255,255,.1); }
@media (max-width: 820px) { .st-home { grid-template-columns: 1fr; } .st-home-ic { display: none; } .st-home-act { justify-content: flex-start; } }

/* ---------- док владельца: вход в студию с любой страницы (v148) ---------- */
#ksat-owner-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 700;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
#ksat-owner-dock[hidden] { display: none; }
.st-dock-main {
  display: inline-flex; align-items: center; gap: 9px; border: 0; cursor: pointer;
  background: #E53935; color: #fff; border-radius: 26px; padding: 12px 20px 12px 16px;
  font-weight: 700; font-size: 14.5px; box-shadow: 0 8px 26px rgba(229,57,53,.42), 0 0 0 2px rgba(255,255,255,.5);
}
.st-dock-main:hover { background: #d32f2f; }
.st-dock-main i { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.3); animation: stpulse 1.6s infinite; }
.st-dock-menu {
  display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 14px; padding: 6px; min-width: 230px;
  box-shadow: 0 14px 38px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.06); order: -1;
}
.st-dock-menu[hidden] { display: none; }
.st-dock-menu button {
  border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 9px;
  font: 600 14px "Segoe UI", Roboto, Arial, sans-serif; color: #1a1a1a; cursor: pointer;
}
.st-dock-menu button:hover { background: #eef5ee; }
@media (max-width: 760px) {
  #ksat-owner-dock { right: 12px; bottom: 76px; }
  .st-dock-main span { display: none; }
  .st-dock-main { padding: 13px; border-radius: 50%; }
}

/* инструменты на листе студии: доска и редактор кода */
.st-tool .st-meta { margin-bottom: 10px; }
.st-tool-hint { background: #fff4d6 !important; color: #7a5c00; }
.st-tool-host { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; }
.st-tool-host .kc-board { max-width: 560px; }
.st-empty-act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.st-empty-act .st-btn { height: 40px; font-size: 14px; }
.st-tool-host .kc-studio { grid-template-columns: minmax(420px, 1.7fr) minmax(230px, 1fr); }
.st-tool-host .kc-board { max-width: 620px; }
.st-tool-host .cl-studio { grid-template-columns: 1.15fr 1fr; }
.st-tool-host .cl-codewrap { height: 300px; }
.st-tool-host .sci-studio { grid-template-columns: minmax(360px, 1.5fr) minmax(220px, 1fr); }
.st-tool-host .sci-cv { height: 320px; }