/* Окно занятия: занимает весь экран, сайт под ним не виден. Рамка тёмная, светлое только то, над чем работают. */
.room { --r-bg:#0f131c; --r-panel:#181d29; --r-panel2:#242b39; --r-line:#2f3748; --r-text:#e8ecf4; --r-mute:#9aa4b8; --r-accent:#3b7bff; --r-danger:#e5484d; --r-ok:#34c07f;
  position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; background:var(--r-bg); color:var(--r-text) }
.room .card { color:var(--ink) }
.r-top { display:flex; align-items:center; gap:10px; padding:8px 12px; min-height:56px }
.r-top .ltabs { flex:1; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
.r-top .ltab { background:var(--r-panel); border-color:transparent; color:var(--r-text); padding:7px 12px; border-radius:10px; white-space:nowrap }
.r-top .ltab:hover { background:var(--r-panel2) }
.r-top .ltab.on { background:var(--r-accent); border-color:var(--r-accent); box-shadow:none }
.r-top .ltab.hand { background:#b58309; border-color:#b58309 }
.r-top .ltab .muted { color:#c6cce0 }
.r-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.r-top #r-note { color:var(--r-mute); font-size:14px; margin-left:10px }
.r-sync { flex:none; padding:4px 10px; border-radius:99px; background:#3a3016; color:#ffd976; font-size:13px; white-space:nowrap } .r-sync.bad { background:rgba(229,72,77,.2); color:#ff8e91 } .r-sync[hidden] { display:none }
.r-clock { flex:none; font-size:14px; font-variant-numeric:tabular-nums; color:var(--r-mute) }
.r-clock[hidden] { display:none }
.r-top button, .r-exit { padding:8px 13px; border:0; border-radius:10px; background:var(--r-panel); color:var(--r-text); font:inherit; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap }
.r-top button:hover, .r-exit:hover { background:var(--r-panel2) }
.r-lay { display:inline-flex; flex:none; gap:2px; padding:3px; border-radius:11px; background:var(--r-panel) }
.r-lay[hidden] { display:none }
.r-top .r-lay button { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px; background:none; color:var(--r-mute) }
.r-top .r-lay button:hover { color:var(--r-text) }
.r-top .r-lay button.on { background:var(--r-panel2); color:#fff }
.r-body { flex:1; min-height:0; display:flex }
.r-panes { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column }
.empty-room { margin:auto; color:var(--r-mute) }
.room .pane { flex:1; min-height:0; display:flex; gap:8px; padding:0 10px 4px }
.room .pane[hidden] { display:none }
.r-col { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:8px }
.r-strip { flex:none; width:210px; display:flex; flex-direction:column; gap:8px }
.room.student .r-strip { width:190px }
.r-strip .tile { flex:none; border-radius:12px; cursor:zoom-in; background:#1c2230 }
.r-strip .tile video { aspect-ratio:4/3; max-height:none; object-fit:cover }
.r-strip .tile.big { position:fixed; inset:56px 0 0 0; z-index:35; border-radius:0; cursor:zoom-out }
.r-strip .tile.big video { width:100%; height:100%; aspect-ratio:auto; object-fit:contain }
.r-strip .tag { left:8px; bottom:8px; display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 16px); padding:3px 9px; background:rgba(10,14,22,.72); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.r-strip .tag::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#e3a008 }
.r-strip .tag.ok::before { background:var(--r-ok) }
.r-strip .selfbox { position:relative; width:100% }
.r-strip .selfbox video { border-radius:12px; background:#1c2230 }
.r-strip .selfbox::after { content:"Вы"; position:absolute; left:8px; bottom:8px; padding:3px 9px; border-radius:99px; background:rgba(10,14,22,.72); color:#fff; font-size:12px }
.r-bar { flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:7px 12px 9px }
.r-ctls, .r-bar-end { display:flex; align-items:center; gap:8px }
.r-bar-end { justify-content:flex-end }
.r-bar-start { display:flex; align-items:center; gap:8px }
.r-ctl.rec i { width:11px; height:11px; border-radius:50%; background:#ff8e91 }
.r-ctl.rec.live { background:rgba(229,72,77,.16); color:#ff8e91 } .r-ctl.rec.live i { background:var(--r-danger); animation:r-pulse 1.4s infinite }
@keyframes r-pulse { 50% { opacity:.35 } }
.r-flag { margin-left:8px; padding:3px 9px; border-radius:99px; background:var(--r-panel2); color:var(--r-mute); font-size:12px; white-space:nowrap }
.r-flag.rec { color:#ff8e91 }
.r-mirror { flex:1; min-height:0; display:flex; flex-direction:column; gap:6px }
.r-mirror-top { flex:none; display:flex; align-items:center; gap:10px; font-size:14px }
.r-mirror-note { flex:1; color:var(--r-mute) }
.r-mirror-top button { padding:6px 11px; border:0; border-radius:9px; background:var(--r-panel2); color:var(--r-text); font:inherit; font-size:13px; cursor:pointer }
.r-mirror iframe { flex:1; min-height:0; width:100%; border:0; border-radius:12px; background:#0f131c }
.r-ctl { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 15px; border:0; border-radius:12px; background:var(--r-panel); color:var(--r-text); font:inherit; font-size:14px; cursor:pointer; white-space:nowrap }
.r-ctl:hover { background:var(--r-panel2) }
.r-ctl[hidden] { display:none }
.r-ctl.off { background:var(--r-danger); color:#fff }
.r-ctl.on { background:var(--r-accent); color:#fff }
.r-ctl.end { background:rgba(229,72,77,.16); color:#ff8e91 }
.r-ctl.end:hover { background:var(--r-danger); color:#fff }
.r-ctl.hand { background:#3a3016; color:#ffd976 }
.r-ctl.hand:hover { background:#4a3d1b }
.r-ctl:disabled { opacity:.6; cursor:default }
.r-away { padding:8px 12px; border-radius:10px; background:#fff4d6; border:1px solid #e7bf5c; color:#5a4300; font-size:14px }
.r-away[hidden] { display:none }
.pane-ctl { display:none; padding:10px 12px; background:var(--r-panel); border-radius:12px }
.pane-ctl .seg button { background:var(--r-panel2); border-color:var(--r-line); color:var(--r-text) }
.pane-ctl .seg button.on { background:var(--r-accent); border-color:var(--r-accent); color:#fff }
.pane-ctl .small { background:none; border:0; color:#ff8e91 }
.r-side { flex:none; width:290px; padding:0 10px 4px 0; overflow:auto }
.r-side[hidden] { display:none }
.r-side .card { background:var(--r-panel); border:0; border-radius:12px; color:var(--r-text) }
.r-side h2 { color:var(--r-text) }
.r-side label { color:var(--r-mute) }
.r-side select { background:var(--r-panel2); border-color:var(--r-line); color:var(--r-text) }
.r-side .start { flex-direction:column; align-items:stretch; gap:6px } .r-side .start > div { flex:none; min-width:0 } .r-side .start .btn { width:100%; margin-top:6px }
/* Сцена и режимы */
/* Панели всегда на месте, режим только меняет ширину колонок. Так смена плавная, а содержимое не растягивается. */
.r-stage { flex:1; min-height:0; display:grid; gap:0; grid-template-columns:1fr 0fr; grid-template-rows:auto minmax(0,1fr) }
.r-stage[data-ready] { transition:grid-template-columns .42s cubic-bezier(.22,1,.36,1) }
.r-stage.lay-plaque { grid-template-columns:0fr 1fr }
.r-stage.lay-split { grid-template-columns:1fr 1fr }
.s-pin, .s-board, .s-plaque { min-height:0; min-width:0; background:#fff; color:var(--ink); border-radius:12px }
.s-board { grid-column:1; grid-row:2; display:flex; overflow:hidden; flex-direction:column; padding:8px; background:var(--r-panel); color:var(--r-text) }
.r-stage.lay-plaque .s-board { padding:0; visibility:hidden }
.s-pin { grid-column:1 / -1; grid-row:1; display:flex; gap:10px; max-height:0; overflow:hidden; opacity:0; padding:0 10px; transition:max-height .36s cubic-bezier(.22,1,.36,1), opacity .3s, margin .36s, padding .36s }
.r-stage.lay-task .s-pin { max-height:32vh; overflow:auto; opacity:1; padding:10px; margin-bottom:8px }
.s-plaque { grid-column:2; grid-row:2 }
.r-stage.lay-board .s-plaque, .r-stage.lay-task .s-plaque { padding:0; visibility:hidden; overflow:hidden }
.r-stage.lay-split .s-plaque { margin-left:8px }
.s-plaque { overflow:auto; padding:10px }
.s-plaque .card { border:0; padding:4px 6px; margin:0 } .s-plaque .card + .card { margin-top:0 }
.s-plaque .card h1 { flex:none; max-width:32%; margin:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.s-plaque .card:first-child:has(> .ribbon) { display:flex; align-items:center; gap:10px }
.s-plaque .ribbon { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:4px; min-width:0 }
.s-plaque .ribbon button { flex:none; width:28px; height:28px; border-radius:7px; font-size:13px; padding:0 }
.s-plaque .b-sheet, .s-plaque #ink-host { position:relative }
.s-plaque .ink-tools { display:none; position:absolute; top:6px; right:46px; z-index:5; margin:0; padding:5px; flex-wrap:wrap; background:#fff; border-radius:11px; box-shadow:0 6px 20px rgba(15,20,35,.22) }
.s-plaque .ink-tools.open { display:flex; animation:r-in .16s ease-out }
.s-plaque .ink-tools button { height:28px } .s-plaque .ink-tools .ink-c { width:28px } .s-plaque .ink-tools .ink-w { width:30px }
.ink-open { position:absolute; top:6px; right:6px; z-index:5; width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:rgba(24,29,41,.82); color:#fff; cursor:pointer }
.ink-open:hover, .ink-open.on { background:var(--r-accent) }
.s-pin-nav { flex:none; display:flex; flex-direction:column; gap:4px; align-items:center; font-size:13px; color:var(--muted) }
.s-pin-nav:empty { display:none }
.s-pin-nav button, .s-bnav button { width:30px; height:28px; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer }
.s-pin-nav button:disabled, .s-bnav button:disabled { opacity:.35; cursor:default }
.s-bnav button { border:0; background:var(--r-panel2); color:var(--r-text) }
.s-pin-body { flex:1; min-width:0 } .s-pin-body .sld { max-width:min(100%,52vh * 1.78) } .s-pin-body .sheet-img { max-height:24vh; margin:0 }
.s-bnav { flex:none; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--r-mute); margin-bottom:4px; min-height:28px }
.s-ink { position:relative; flex:1; min-height:0 }
@media (max-width:760px) {
  .room .pane { flex-direction:column } .r-strip, .room.student .r-strip { width:100%; flex-direction:row; order:-1 } .r-strip .tile, .r-strip .selfbox { width:50%; max-height:22vh }
  .r-stage, .r-stage.lay-plaque, .r-stage.lay-split { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) 0fr }
  .s-plaque { grid-column:1; grid-row:3 }
  .r-stage.lay-plaque { grid-template-rows:auto 0fr 1fr } .r-stage.lay-split { grid-template-rows:auto 1fr 1fr } .r-stage.lay-split .s-plaque { margin:8px 0 0 }
  .r-side { position:absolute; inset:56px 0 0 0; width:auto; background:var(--r-bg); padding:10px; z-index:36 }
  .r-top .r-lay button { padding:6px }
  .r-top .r-lay button span, .r-ctl span { display:none }
  .r-bar { grid-template-columns:auto 1fr; } .r-bar-start { order:3 }
}

/* Курсор собеседника и подсказка */
.room .r-stage { position:relative }
.room .r-cursor { position:absolute; left:0; top:0; z-index:6; pointer-events:none; display:flex; align-items:flex-start; transition:transform 70ms linear }
.room .r-cursor[hidden] { display:none }
.room .r-cursor svg { flex:none; display:block }
.room .r-cursor span { margin:14px 0 0 -3px; padding:1px 7px; border-radius:7px; background:#e8590c; color:#fff; font-size:12px; line-height:18px; white-space:nowrap }
.room .r-help { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(13,18,32,.55) }
.room .r-help .card { width:100%; max-width:520px; max-height:90vh; overflow:auto }
.room .r-help p { margin:8px 0; line-height:1.4 }

/* Режим «Доска»: лист на весь экран, видео поверх в углу. */
@media (min-width:761px) {
  .room .pane:has(.lay-board) { position:relative }
  .room.student .pane:has(.lay-board) .r-strip { position:absolute; top:10px; right:10px; z-index:4; width:150px; gap:6px }
  .room.student .pane:has(.lay-board) .r-strip .tile { box-shadow:0 3px 10px rgba(20,30,50,.25) }
  .room.student.wb-novid .pane:has(.lay-board) .r-strip { visibility:hidden }
  .r-stage.lay-board .s-board { position:relative; padding:0; border:0; border-radius:0; background:none }
  .r-stage.lay-board .s-bnav { position:absolute; left:0; bottom:0; z-index:3; width:92px; height:60px; margin:0; flex-wrap:wrap; justify-content:center; align-content:center; gap:2px 6px; background:var(--r-panel); border-radius:10px }
  .r-stage.lay-board .s-bnav span { order:-1; width:100%; text-align:center }
  .r-stage.lay-board .s-bnav:empty, .r-stage.lay-board .s-bnav:not(:has(button)) { height:30px }
  .r-stage.lay-board .s-ink { position:absolute; inset:0 }
  .r-stage.lay-board .wb-bar { margin-bottom:66px }
}

.r-side .s-store { position:absolute; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none }
.r-side .s-pick-btn { width:100%; height:38px; padding:0 10px; border:1px solid var(--r-line); border-radius:9px; background:var(--r-panel2); color:var(--r-text); font:inherit; font-size:14px; text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Полоса над плашкой: одна строка */
.s-plaque .board { position:relative }
.b-top { display:flex; align-items:center; gap:8px; margin-bottom:6px }
.b-head { flex:1; min-width:0; display:flex; align-items:center; gap:8px }
.s-plaque { container-type:inline-size }
.b-name { flex:0 1 auto; min-width:60px; max-width:24%; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.b-rib { flex:0 1 auto; min-width:64px }
.b-step { flex:none; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:#eef1f7; color:var(--ink); font:inherit; font-size:18px; line-height:1; cursor:pointer } .b-step:hover { background:#e1e7f2 } .b-step:disabled { opacity:.35; cursor:default }
.b-count { flex:none; font-size:13px; font-variant-numeric:tabular-nums; color:var(--muted) }
.b-head .b-at { margin-left:auto } .b-head .b-act:first-of-type { margin-left:0 }
.b-at { flex:0 1 auto; min-width:0; max-width:34%; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.b-act { flex:none; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 9px; border:0; border-radius:8px; background:#eef1f7; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap }
.b-act:hover { background:#e1e7f2 }
.b-more { flex:none; position:relative; font-size:13px }
.b-more summary { height:30px; padding:0 9px; display:flex; align-items:center; border-radius:8px; background:#eef1f7; cursor:pointer; list-style:none; white-space:nowrap }
.b-more summary::-webkit-details-marker { display:none }
.b-more[open] summary { background:var(--r-accent); color:#fff }
.b-more .b-info { position:absolute; top:36px; right:0; z-index:8; width:min(420px, 60vw); max-height:50vh; overflow:auto; padding:10px 12px; background:#fff; border-radius:11px; box-shadow:0 8px 26px rgba(15,20,35,.24) }
.b-more .b-info p { margin:0 0 6px }
@container (max-width:760px) { .b-at, .b-act span { display:none } }
@container (max-width:520px) { .b-name, .b-count { display:none } }

/* Пульт параллельных занятий */
.r-conf { flex:none; width:252px; padding:0 10px 4px 0; overflow:hidden; display:flex; flex-direction:column; gap:6px; transition:width .42s cubic-bezier(.22,1,.36,1), padding .42s cubic-bezier(.22,1,.36,1) }
.room.wb-novid .r-conf { width:0; padding:0; overflow:hidden }
/* Видео учеников показывает блок справа, скрытые элементы только играют звук. */
.room.conf-on .pane .r-strip { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none }
.cf-add { flex:none; height:30px; border:1px dashed var(--r-line); border-radius:10px; background:none; color:var(--r-text); font:inherit; font-size:13px; cursor:pointer }
.cf-add:hover, .cf-add.on { border-color:var(--r-accent); color:#fff }
.r-conf .r-side { flex:none; width:auto; padding:0; overflow:visible }
.r-conf .r-side .card { padding:10px; margin:0 } .r-conf .r-side h2 { display:none }
.cf-main.big { position:fixed; inset:56px 0 0 0; z-index:35; border-radius:0; cursor:zoom-out } .cf-main.big .cf-vid { width:100%; height:100%; aspect-ratio:auto; object-fit:contain }
#l-conf-rows { flex:0 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; display:flex; flex-direction:column; gap:6px; padding:2px }
.cf-vid { transition:aspect-ratio .3s } .cf-row { display:grid; grid-template-columns:78px minmax(0,1fr); gap:3px 6px; align-items:center; padding:5px; background:var(--r-panel); border-radius:12px; outline:2px solid transparent; transition:outline-color .18s }
/* Плотно: трое учеников влезают без прокрутки и на ноутбуке. */
.cf-row .cf-main { grid-row:span 2 }
.cf-row .cf-vol { grid-column:1 / -1 }
.cf-row.on { grid-template-columns:minmax(0,1fr) }
.cf-row.on .cf-main { grid-row:auto }
.cf-row.on { outline-color:var(--r-accent) }
.cf-row.hand { outline-color:#e3a008 }
.cf-main { position:relative; display:block; width:100%; padding:0; border:0; border-radius:9px; overflow:hidden; background:#10141d; color:#fff; font:inherit; cursor:pointer }
.cf-vid { display:block; width:100%; aspect-ratio:3/2; object-fit:cover }
.cf-row.on .cf-vid { aspect-ratio:16/9 }
@media (max-height:760px) { .cf-row.on .cf-vid { aspect-ratio:5/2 } }
.cf-name { position:absolute; left:4px; bottom:4px; max-width:calc(100% - 8px); padding:1px 7px; border-radius:99px; background:rgba(10,14,22,.72); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cf-main kbd { position:absolute; right:4px; top:4px; min-width:18px; padding:1px 4px; border-radius:5px; background:rgba(10,14,22,.72); font:inherit; font-size:11px; text-align:center }
.cf-wave, #l-conf-wave { display:block; width:100%; height:18px }
.cf-line { min-width:0; display:flex; align-items:center; gap:4px; font-size:12px; color:var(--r-mute); white-space:nowrap; overflow:hidden }
.cf-state { font-style:normal; overflow:hidden; text-overflow:ellipsis }
.cf-s { flex:none; display:inline-flex; width:24px; height:24px; padding:0; align-items:center; justify-content:center; border:0; border-radius:7px; background:var(--r-panel2); color:var(--r-text); cursor:pointer } .cf-s svg { width:15px; height:15px } .cf-s:hover { filter:brightness(1.25) }
.cf-s.off { background:var(--r-danger); color:#fff }
.cf-vol { margin:0; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--r-mute) } .cf-vol input { flex:1; min-width:0; accent-color:var(--r-accent) } .cf-vol b { width:32px; font-weight:500; text-align:right; color:var(--r-text) }
.cf-seg { flex:1; min-width:0; display:flex; border-color:var(--r-line) } .cf-seg button { flex:1 1 auto; min-width:0; padding:3px 1px; background:var(--r-panel2); color:var(--r-text); font-size:10.5px; letter-spacing:-.1px }
.cf-row:not(.on) .cf-seg [data-cm="together"] { flex:1.6 1 auto } .cf-seg button.on { background:var(--r-accent); color:#fff }
.r-ask { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; background:var(--r-panel2); font-size:14px } .r-ask[hidden] { display:none } .r-ask span { flex:1 }
.r-ask button { padding:6px 11px; border:0; border-radius:8px; background:var(--r-accent); color:#fff; font:inherit; font-size:13px; cursor:pointer } .r-ask [data-no] { background:none; color:var(--r-mute) }
.cf-me { flex:none; display:grid; grid-template-columns:84px minmax(0,1fr); gap:3px 6px; align-items:center; padding:5px; background:var(--r-panel); border-radius:12px; font-size:12px; color:var(--r-mute) }
.cf-me .cf-main { grid-row:span 2; cursor:default } .cf-me video { aspect-ratio:3/2; transform:scaleX(-1) }
#l-conf-me { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Плавная смена режимов и занятий */
@keyframes r-in { from { opacity:0; transform:translateY(5px) } }
.room .pane:not([hidden]) { animation:r-in .34s cubic-bezier(.22,1,.36,1) }
@media (prefers-reduced-motion:reduce) { .room .pane:not([hidden]), .s-plaque .ink-tools.open { animation:none } .r-conf { transition:none } }
.r-side { animation:r-side .34s cubic-bezier(.22,1,.36,1) }
@keyframes r-side { from { opacity:0; transform:translateX(12px) } }
.pk-list h4 { margin:6px 0 2px; font-size:13px; color:var(--muted) }

/* Условие из базы задач */
.s-pin-title { font-weight:600; margin-bottom:4px }
.s-pin-nav .s-pick { width:auto; height:auto; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap }
.pk { position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(15,20,35,.45) }
.pk-win { width:min(720px, 94%); max-height:88%; display:flex; flex-direction:column; gap:8px; padding:12px; background:#fff; color:var(--ink); border-radius:12px }
.pk-win.wide { width:min(1120px, 96%); height:88%; max-height:none }
.pk-nav { flex:none; display:flex; gap:4px; border-bottom:1px solid var(--line) }
.pk-nav button { padding:8px 13px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); font:inherit; font-size:14px; cursor:pointer }
.pk-nav button.on { border-bottom-color:var(--r-accent); color:var(--ink); font-weight:600 }
.pk-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:8px }
.pk-grid { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; align-content:start }
.pk-grid h4 { grid-column:1 / -1 }
.pk-card { display:flex; flex-direction:column; gap:4px; padding:7px; border-radius:11px }
.pk-card .pk-t { font-weight:600; line-height:1.25 }
.pk-th { aspect-ratio:16/9; overflow:hidden; border-radius:7px; background:#f3f5fa; pointer-events:none }
.pk-th img { display:block; width:100%; height:100%; margin:0; border:0; border-radius:0; object-fit:cover } .pk-card.on { border-color:var(--r-accent); box-shadow:0 0 0 2px #cdddff }
.pk-th-none { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:20px }
.pk-back { padding:6px 10px; border:0; border-radius:8px; background:#eef1f7; font:inherit; font-size:13px; cursor:pointer }
.pk-bank { flex:1; min-height:0; display:flex; gap:10px }
.pk-tree { flex:none; width:240px; overflow:auto; display:flex; flex-direction:column; gap:1px }
.pk-tree button { display:flex; justify-content:space-between; gap:8px; padding:5px 8px; border:0; border-radius:7px; background:none; font:inherit; font-size:13px; text-align:left; cursor:pointer }
.pk-tree button:hover { background:#eef1f7 } .pk-tree button.on { background:#e3ebff; color:#2559cc }
.pk-tree .pk-sub { padding-left:18px } .pk-tree i { font-style:normal; color:var(--muted) }
.pk-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px }
.pk-f b { align-self:center }
.pk-win header { display:flex; justify-content:space-between; align-items:center }
.pk-win header button { border:0; background:none; font-size:16px; cursor:pointer }
.pk-f { display:flex; gap:8px }
.pk-f input, .pk-f select, .pk-own textarea { min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:14px }
.pk-f input { flex:1 } .pk-f select { width:220px }
.pk-list { flex:1; min-height:120px; overflow:auto; display:flex; flex-direction:column; gap:6px }
.pk-c { display:block; width:100%; padding:8px 10px; text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-size:14px; cursor:pointer }
.pk-c:hover { border-color:#2f6df6 }
.pk-t { display:block } .pk-m { display:block; margin-top:3px; color:var(--muted); font-size:12px }
.pk-own { display:flex; gap:8px; align-items:flex-end } .pk-own textarea { flex:1; resize:vertical }
.pk-go { padding:8px 12px; border:0; border-radius:8px; background:#2f6df6; color:#fff; font:inherit; font-size:14px; cursor:pointer; white-space:nowrap }

@media (max-width:760px) {
  .r-body { flex-direction:column } .r-conf { width:auto; max-height:38vh; padding:0 10px 4px }
}