/* Студия: редактор плашки */
.studio { position:fixed; inset:0; z-index:40; background:#eef0f5; display:flex; flex-direction:column; font-size:14px }
body.in-studio { overflow:hidden }
.st-top { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-bottom:1px solid #e5e7eb }
.st-top input#s-title { flex:1; min-width:120px; font-size:16px; font-weight:600; border:1px solid transparent; padding:6px 8px; width:auto }
.st-top input#s-title:hover { border-color:#e5e7eb }
.st-top .tabs { margin:0; flex:none }
.st-state { color:#6b7280; font-size:13px; white-space:nowrap; min-width:80px; text-align:right } .st-state.bad { color:#d23c3c }
.st-b { display:inline-block; padding:6px 10px; border:1px solid #d5dbe6; background:#fff; border-radius:8px; font:inherit; color:#1b1f2a; cursor:pointer; text-decoration:none; white-space:nowrap }
.st-b:hover { background:#f3f5fa } .st-b:disabled { opacity:.45; cursor:default } .st-b.main { background:#2f6df6; border-color:#2f6df6; color:#fff } .st-b.bad { color:#d23c3c }
.st-tools { display:flex; gap:2px; padding:4px 12px; background:#fff; border-bottom:1px solid #e5e7eb; flex-wrap:wrap }
.st-tools button { padding:6px 12px; border:0; background:none; border-radius:8px; font:inherit; color:#1b1f2a; cursor:pointer } .st-tools button:hover { background:#eef2ff; color:#2f6df6 }
.st-main { flex:1; display:flex; min-height:0 }
.st-film { width:150px; flex:none; overflow-y:auto; padding:10px; background:#f8f9fb; border-right:1px solid #e5e7eb; display:flex; flex-direction:column; gap:8px }
.fm { position:relative; display:flex; gap:6px; cursor:pointer; flex:none }
.fm-n { width:18px; font-size:12px; color:#6b7280; text-align:right; flex:none }
.fm-v { flex:1; min-width:0; max-height:220px; overflow:hidden; border-radius:4px; outline:1px solid #d5dbe6 }
.fm.on .fm-v { outline:2px solid #2f6df6 } .fm.over .fm-v { outline:2px dashed #2f6df6 }
.fm-b { position:absolute; right:3px; top:3px; display:none; gap:2px } .fm:hover .fm-b { display:flex }
.fm-b button { width:22px; height:22px; padding:0; border:0; border-radius:5px; background:rgba(27,31,42,.7); color:#fff; font-size:12px; cursor:pointer }
.fm-add button { width:100%; padding:8px; border:1px dashed #b7bfcd; background:none; border-radius:8px; font:inherit; color:#2f6df6; cursor:pointer }
.st-area { flex:1; min-width:0; overflow:auto; display:flex; padding:10px } .st-area.drop { outline:3px dashed #2f6df6; outline-offset:-8px }
.st-wrap { position:relative; margin:auto; flex:none; user-select:none; touch-action:none; box-shadow:0 2px 14px rgba(27,31,42,.14) }
#s-stage .b { cursor:move }
#s-stage .b input, #s-stage .b button { pointer-events:none }
.st-over { position:absolute; inset:0; pointer-events:none; overflow:visible }
.st-over .sel { position:absolute; outline:2px solid #2f6df6 }
.st-over .h { position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; background:#fff; border:2px solid #2f6df6; border-radius:3px; pointer-events:auto; box-sizing:border-box }
.h.crop { background:#2f6df6; border-color:#fff } .h-nw, .h-se { cursor:nwse-resize } .h-ne, .h-sw { cursor:nesw-resize } .h-n, .h-s { cursor:ns-resize } .h-e, .h-w { cursor:ew-resize }
.st-over .gd { position:absolute; background:#d23c3c; left:0; right:0; height:1px } .st-over .gd.v { top:0; bottom:0; width:1px; height:auto; right:auto }
.st-over .band { position:absolute; border:1px solid #2f6df6; background:rgba(47,109,246,.1) }
.cr-ghost { position:absolute; opacity:.35; pointer-events:none } .cr-ghost img { width:100%; height:100%; display:block }
.st-props { width:252px; flex:none; overflow-y:auto; padding:12px; background:#fff; border-left:1px solid #e5e7eb }
.st-props h3 { margin:0 0 8px; font-size:15px } .st-props label { margin:10px 0 4px; font-size:13px }
.st-props input, .st-props select, .st-props textarea { width:100%; padding:7px 8px; border:1px solid #d5dbe6; border-radius:8px; font:inherit; box-sizing:border-box; background:#fff }
.st-props textarea { resize:vertical; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; line-height:1.4 }
.st-props .st-b { margin-top:6px } .st-props .hint { font-size:12px; margin-top:12px }
.st-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px } .st-row.small .st-b { margin-top:0; padding:5px 8px; font-size:13px }
.st-row .g { flex:1 1 40px; margin:0; font-size:11px } .st-row select { flex:1; min-width:90px; width:auto }
.pal { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px } .pal button { padding:3px 6px; font-size:12px; border:1px solid #e5e7eb; background:#f8f9fb; border-radius:6px; cursor:pointer; color:#1b1f2a } .pal button:hover { background:#eef2ff }
.sw { display:flex; gap:5px; flex-wrap:wrap } .sw button { width:24px; height:24px; border-radius:6px; border:1px solid #d5dbe6; cursor:pointer; padding:0; background:#fff; font-size:12px } .sw button.on { outline:2px solid #2f6df6; outline-offset:1px }
.ch { display:flex; gap:4px; align-items:center; margin-bottom:4px } .ch input[type=radio] { width:auto; flex:none } .ch .st-b { margin:0; padding:4px 7px }
.st-menu { position:fixed; z-index:70; width:220px; background:#fff; border:1px solid #d5dbe6; border-radius:10px; padding:4px; box-shadow:0 6px 24px rgba(27,31,42,.2); display:flex; flex-direction:column }
.st-menu button { text-align:left; padding:8px 10px; border:0; background:none; border-radius:7px; font:inherit; cursor:pointer; color:#1b1f2a } .st-menu button:hover { background:#eef2ff }
.st-modal { position:fixed; inset:0; z-index:60; background:rgba(13,18,32,.55); display:flex; align-items:center; justify-content:center; padding:20px }
.st-dlg { background:#fff; border-radius:14px; width:100%; max-width:520px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden } .st-dlg.wide { max-width:1040px }
.st-dlg-h { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #e5e7eb } .m-x { border:0; background:none; font-size:16px; cursor:pointer }
.st-dlg-b { padding:14px 16px; overflow:auto } .st-dlg-b input { width:auto; flex:1; min-width:160px; padding:8px 10px } .st-dlg-b .tabs { margin:0 }
.g-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px; margin-top:12px }
.g-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border:1px solid #e5e7eb; background:#fff; border-radius:10px; font:inherit; font-size:13px; cursor:pointer; color:#1b1f2a } .g-card:hover { border-color:#2f6df6 } .g-card .g-ic { font-size:26px }
.pdf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; max-height:56vh; overflow:auto; padding:2px }
.pdf-p { position:relative; padding:0; border:2px solid #e5e7eb; border-radius:6px; background:#fff; cursor:pointer; opacity:.45 } .pdf-p.on { border-color:#2f6df6; opacity:1 } .pdf-p img { width:100%; display:block } .pdf-p span { position:absolute; right:4px; bottom:4px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:0 5px; border-radius:4px }
.tex-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; height:56vh } .tex-grid textarea { width:100%; height:100%; resize:none; font:13px/1.45 ui-monospace, Menlo, Consolas, monospace; padding:10px; border:1px solid #d5dbe6; border-radius:8px; box-sizing:border-box }
.tex-out { overflow:auto; border:1px solid #e5e7eb; border-radius:8px; padding:10px; background:#f8f9fb } .tex-out img { max-width:100%; display:block; margin:0 auto 8px; background:#fff }
.pk-lessons { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; max-height:92px; overflow:auto } .pk-lessons .taken { outline:2px solid #1f9d55 }
.ot-list { display:flex; flex-direction:column; gap:4px; max-height:30vh; overflow:auto } .ot { display:flex; justify-content:space-between; padding:8px 10px; border:1px solid #e5e7eb; background:#fff; border-radius:8px; font:inherit; cursor:pointer; color:#1b1f2a } .ot:hover { border-color:#2f6df6 }
.ot-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px } .ot-s { padding:0; border:2px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; overflow:hidden } .ot-s:hover { border-color:#2f6df6 } .ot-s.taken { border-color:#1f9d55 }
.st-show { position:fixed; inset:0; z-index:80; background:#0d1220; display:flex; flex-direction:column; align-items:center; justify-content:center; outline:0 }
.sh-in { flex:none } .sh-bar { display:flex; gap:10px; align-items:center; color:#cfd5e2; height:44px; font-size:14px } .sh-bar button { background:none; border:1px solid #4b5468; color:#cfd5e2; border-radius:8px; padding:4px 10px; cursor:pointer; font:inherit }
.st-narrow { display:none }
@media (max-width:820px) { .st-main, .st-tools { display:none } .st-narrow { display:block; padding:24px; text-align:center; color:#6b7280 } }

/* Страницы платформы и выбор */
.st-tools.st-page { display:none }
.st-start { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; background:#eef0f5; padding:24px }
.st-start[hidden] { display:none }
.st-area { position:relative }
.sg { width:100%; max-width:760px } .sg h2 { font-size:24px; margin:0 0 16px; text-align:center }
.sg-list { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.sg-c { display:flex; flex-direction:column; gap:6px; text-align:left; padding:18px; border:1px solid #d5dbe6; background:#fff; border-radius:14px; font:inherit; cursor:pointer; color:#1b1f2a } .sg-c:hover { border-color:#2f6df6; box-shadow:0 4px 18px rgba(47,109,246,.14) } .sg-c b { font-size:17px } .sg-c span { color:#6b7280; font-size:14px } .sg-c.main { border-color:#2f6df6; background:#f4f7ff }
.pg-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px } .th-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px }
.pg-card, .th-card { display:flex; flex-direction:column; gap:4px; padding:8px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; font:inherit; font-size:13px; text-align:left; cursor:pointer; color:#1b1f2a } .pg-card:hover, .th-card:hover, .th-card.on { border-color:#2f6df6 } .pg-card span:last-child { color:#6b7280 }
.pg-mini { display:block; height:118px; overflow:hidden; border-radius:8px; outline:1px solid #e5e7eb; pointer-events:none } .pg-h { margin:18px 0 2px; font-size:15px }
.fm-v { position:relative } .fm-l { position:absolute; left:0; right:0; bottom:0; padding:2px 6px; font-size:11px; font-style:normal; background:rgba(255,255,255,.92); color:#1b1f2a; border-top:1px solid #e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pf textarea { font-family:inherit; font-size:14px } .pf input { margin-top:4px } .pf-x { float:right; margin-left:8px; color:#2f6df6; cursor:pointer; font-size:12px } .pf-own { margin-top:14px; width:100% }
.as { display:flex; flex-direction:column; gap:6px } .as-o { display:flex; gap:8px; align-items:flex-start; margin:0; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; cursor:pointer } .as-o input { width:auto; margin-top:3px } .as-o b { display:block; color:#1b1f2a; font-weight:600 } .as-o i { font-style:normal; font-size:12px; color:#6b7280 }
.tabs.mini { margin:0 } .tps { max-height:240px; overflow:auto; border:1px solid #e5e7eb; border-radius:10px; padding:4px 8px } .tp summary { cursor:pointer; padding:6px 0; color:#1b1f2a; font-weight:600 } .tp .chk { display:flex; gap:6px; align-items:center; margin:4px 0; font-size:13px; color:#1b1f2a } .tp .chk input { width:auto }
.own { margin-bottom:6px }
.ocr { display:grid; grid-template-columns:1.2fr 1fr; gap:12px } .ocr-pic { position:relative; min-height:220px; max-height:50vh; overflow:auto; display:flex; align-items:center; justify-content:center; border:1px dashed #b7bfcd; border-radius:10px; background:#f8f9fb; cursor:crosshair; touch-action:none } .ocr-pic img { max-width:100%; display:block; user-select:none }
.ocr-box { position:absolute; border:2px solid #2f6df6; background:rgba(47,109,246,.12); pointer-events:none } .ocr-res textarea { width:100%; font:13px/1.4 ui-monospace, Menlo, Consolas, monospace; padding:8px; border:1px solid #d5dbe6; border-radius:8px; box-sizing:border-box } .ocr-show { margin-top:10px; min-height:60px; font-size:18px; overflow:auto }
.pal-ocr { margin-top:6px; width:100% }
/* Шире: панели убраны, слайд на всё окно */
.studio.wide .st-film, .studio.wide .st-props { display:none }
.pg-bank { width:100%; margin-bottom:12px }
/* Игра в редакторе: первый клик выбирает блок, потом играем */
#s-stage .b-game.live { cursor:pointer }
#s-stage .b-game.live iframe { pointer-events:none }
#s-stage .b-game.live.on iframe { pointer-events:auto }
#s-stage .b-game.live.on .g-cap { display:none }
.g-cap { position:absolute; left:50%; top:.4em; transform:translateX(-50%); max-width:90%; padding:.25em .8em; border-radius:1em; background:rgba(36,24,17,.82); color:#fff4dc; font-size:.7em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.g-cap::after { content:" · нажмите, чтобы играть" }
.rl-h { margin:14px 0 4px } .rl-ex { font-size:13px; background:#f8f9fb; border-radius:8px; padding:4px 8px }
.rl-ex div { display:flex; justify-content:space-between; gap:8px; padding:3px 0 } .rl-ex b { color:#1f9d55 }