/* PonPon classroom: shared tokens for the lobby, preparation and lesson. */
.ppso-online-shell {
  --oc-ink:#173346; --oc-muted:#566c7c; --oc-border:#d9e3e8;
  --oc-brand:#087e78; --oc-brand-dark:#055e59; --oc-tint:#e9f6f2;
  --oc-bg:#f3f6f8; --oc-danger:#b8313d; --oc-radius:12px;
  --oc-chat-size:18px; --oc-height:100dvh;
  box-sizing:border-box; width:100%; max-width:1160px; margin:28px auto; padding:32px;
  background:#fff; color:var(--oc-ink); border:1px solid var(--oc-border); border-radius:var(--oc-radius);
  font:400 16px/1.6 "Noto Sans SC","Noto Sans Thai","Microsoft YaHei","Segoe UI",sans-serif;
  text-align:left; overflow-wrap:anywhere;
}
.ppso-online-shell *, .ppso-online-shell *::before, .ppso-online-shell *::after {box-sizing:border-box}
.ppso-online-shell[lang="en"] {font-family:"Segoe UI",Arial,sans-serif}
.ppso-online-shell[lang="ja"] {font-family:"Yu Gothic UI",Meiryo,sans-serif}
.ppso-online-shell[lang="th"] {font-family:"Noto Sans Thai",Tahoma,sans-serif}
.ppso-online-shell [hidden] {display:none!important}
.ppso-online-shell h1,.ppso-online-shell h2,.ppso-online-shell h3,.ppso-online-shell p {padding:0; margin:0}
.ppso-online-shell h1 {font-size:32px;line-height:1.3;letter-spacing:-.025em;color:var(--oc-ink);font-weight:750}
.ppso-online-shell h2 {font-size:22px;line-height:1.4;font-weight:700;color:var(--oc-ink)}
.ppso-online-shell h3 {font-size:20px;line-height:1.4;font-weight:650}
.ppso-online-shell a {color:var(--oc-brand);text-decoration:none}
.ppso-online-shell button,.ppso-online-shell input {font-family:inherit;letter-spacing:normal;text-transform:none}
.ppso-online-shell button::after,.ppso-online-shell a.ppso-online-button::after {content:none!important}
.ppso-online-shell :focus-visible {outline:3px solid #e8a128;outline-offset:3px}
.ppso-online-shell input[type="text"] {min-width:0;width:100%;min-height:48px;padding:11px 13px;border:1px solid #96aebc;border-radius:8px;background:white;color:var(--oc-ink);font-size:16px}
.ppso-online-shell input[type="checkbox"] {appearance:auto!important;flex:0 0 22px;width:22px;height:22px;margin:3px 0 0;accent-color:var(--oc-brand)}
.ppso-online-shell.is-large-text {--oc-chat-size:22px}
.ppso-online-icon {display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;color:inherit}
.ppso-online-icon svg {width:100%;height:100%;display:block}
.ppso-online-button {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;max-width:100%;padding:12px 20px;
  border:1px solid var(--oc-brand);border-radius:8px;background:var(--oc-brand);color:white!important;font-size:16px;line-height:1.35;font-weight:650;cursor:pointer;text-align:center;box-shadow:none;transition:background .15s,border-color .15s;
}
.ppso-online-button:hover {background:var(--oc-brand-dark);border-color:var(--oc-brand-dark)}
.ppso-online-button:disabled {opacity:1;color:#7b8891!important;background:#e8edef;border-color:#d5dfe4;cursor:not-allowed}
.ppso-online-button-secondary {min-height:48px;background:white;border-color:#b6c9d0;color:var(--oc-ink)!important}
.ppso-online-button-secondary:hover {background:#ecf5f3;border-color:var(--oc-brand)}
.ppso-online-button-danger {background:var(--oc-danger);border-color:var(--oc-danger);color:white!important}
.ppso-online-button-danger:hover {background:#922330;border-color:#922330}
.ppso-online-button-quiet {min-height:48px;color:var(--oc-brand)!important;background:transparent;border-color:transparent;padding:10px 12px;text-decoration:underline;text-underline-offset:3px}
.ppso-online-button-quiet:hover {background:var(--oc-tint);border-color:transparent}
.ppso-online-button-icon {min-height:48px;min-width:48px;width:48px;height:48px;padding:12px;border-color:var(--oc-border);background:white;color:var(--oc-muted)!important;font-size:0}
.ppso-online-button-icon:hover {background:var(--oc-bg);border-color:#9bb2be}
.ppso-online-small-copy {font-size:14px;line-height:1.6;color:var(--oc-muted)}
.ppso-online-shell .ppso-online-kicker {font-size:15px;font-weight:750;color:var(--oc-brand);letter-spacing:.04em;margin-bottom:5px}
.ppso-online-header {display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:26px;border-bottom:1px solid var(--oc-border)}
.ppso-online-copy {margin-top:10px!important;max-width:640px;color:var(--oc-muted)}
.ppso-online-header-actions {display:flex;gap:8px;flex-shrink:0}
.ppso-online-lobby-intro {display:flex;justify-content:space-between;align-items:center;gap:30px;padding:24px 0;border-bottom:1px solid var(--oc-border);margin-bottom:28px}
.ppso-online-lobby-intro>p {max-width:285px}
.ppso-online-steps {display:flex;list-style:none!important;gap:22px;margin:0!important;padding:0!important;align-items:center}
.ppso-online-steps li {display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.4;color:var(--oc-muted);font-weight:600;flex:1}
.ppso-online-step-number {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border:1px solid #bacdd4;background:white;border-radius:50%;font-size:15px;font-weight:750;color:var(--oc-muted)}
.ppso-online-steps .is-current {color:var(--oc-brand-dark)}
.ppso-online-steps .is-current .ppso-online-step-number {background:var(--oc-brand);color:white;border-color:var(--oc-brand)}
.ppso-online-steps .is-complete .ppso-online-step-number {color:var(--oc-brand);border-color:#a4d9cd;background:var(--oc-tint)}
.ppso-online-list {display:grid;gap:16px}
.ppso-online-shell .ppso-online-lesson-heading {font-size:22px;margin-bottom:-10px}
.ppso-online-card {display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:24px;padding:26px;border:1px solid var(--oc-border);border-radius:var(--oc-radius);background:white}
.ppso-online-card-featured {border-color:#78bcb1;box-shadow:0 5px 18px #193e4510}
.ppso-online-card.is-test {border-left:4px solid #d69c3d}
.ppso-online-date-block {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;align-self:stretch;border-radius:9px;min-height:100px;background:var(--oc-tint);color:var(--oc-brand)}
.ppso-online-date-block strong {font-size:32px;line-height:1.1}
.ppso-online-card-content {min-width:0}
.ppso-online-card h2 {font-size:21px;margin:5px 0 9px}
.ppso-online-badge {display:inline-flex;align-items:center;background:var(--oc-tint);color:var(--oc-brand-dark);font-size:14px;font-weight:750;padding:3px 9px;border-radius:5px;letter-spacing:.035em}
.ppso-online-time {font-size:17px;font-weight:650;color:var(--oc-ink)}
.ppso-online-card-note {color:var(--oc-brand-dark);font-size:15px;margin-top:6px!important}
.ppso-online-lesson-meta {font-size:14px;color:var(--oc-muted);margin-top:8px!important}
.ppso-online-card-actions {display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.ppso-online-empty {min-height:290px;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.ppso-online-empty>.ppso-online-icon {width:56px;height:56px;flex-basis:56px;color:var(--oc-brand)}
.ppso-online-empty p {max-width:520px;color:var(--oc-muted)}
.ppso-online-notice {padding:14px 18px;margin:16px 0;border:1px solid #bcdcd4;border-radius:9px;background:var(--oc-tint);font-size:16px;color:var(--oc-ink)}
.ppso-online-notice.is-warning {background:#fff7e7;border-color:#e9cd93;color:#72500e}
.ppso-online-notice.is-error {background:#fff0f1;border-color:#e5a9ae;color:#8e2430}
.ppso-online-media-help {padding:20px;margin:14px 0;background:#fff7e7;color:#624919;border:1px solid #e9cd93;border-radius:var(--oc-radius)}
.ppso-online-media-help h2 {color:#715012;font-size:22px;margin-bottom:8px}
.ppso-online-media-help ol {padding-left:26px;margin:14px 0;line-height:1.65}
.ppso-online-media-help-actions {display:flex;gap:10px;flex-wrap:wrap}
.ppso-online-media-tip {padding:12px 16px;background:var(--oc-tint);margin:12px 0!important;border-radius:8px;color:var(--oc-muted)}
.ppso-online-entry-card {background:white;border:1px solid var(--oc-border);border-radius:16px;padding:32px;box-shadow:0 12px 48px #1a354310}
.ppso-online-entry-card>h1 {margin:28px 0 24px}
.ppso-online-entry-card>.ppso-online-steps {padding-bottom:24px!important;border-bottom:1px solid var(--oc-border)}
.ppso-online-entry-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px}
.ppso-online-entry-main {display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:18px 8px 18px 0}
.ppso-online-entry-main>.ppso-online-icon {width:74px;height:74px;flex-basis:74px;padding:18px;background:var(--oc-tint);color:var(--oc-brand);border-radius:16px;margin-bottom:4px}
.ppso-online-entry-main>.ppso-online-button {margin-top:12px;min-width:230px}
.ppso-online-entry-aside {padding-left:32px;border-left:1px solid var(--oc-border)}
.ppso-online-entry-aside>p {color:var(--oc-muted);margin-top:10px}
.ppso-online-device-summary {font-size:16px;color:var(--oc-muted)}
.ppso-online-device-summary.is-ready {color:var(--oc-brand-dark);font-weight:600}
.ppso-online-safety {padding:20px;margin:20px 0;background:#f5f8f9;border:1px solid var(--oc-border);border-radius:10px}
.ppso-online-safety h2 {font-size:18px;margin-bottom:10px}
.ppso-online-safety p {font-size:16px;line-height:1.7;color:#405a69}
.ppso-online-safety-consent {display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:16px;font-weight:650;cursor:pointer}
.ppso-online-entry-actions {margin-top:16px;flex-direction:column}
.ppso-online-ready-note {font-size:15px!important;color:var(--oc-brand-dark)!important}
.ppso-online-back-link {justify-self:center;margin-top:4px}
.ppso-online-guest-entry {width:100%;border-top:1px solid var(--oc-border);margin-top:8px;padding-top:20px}
.ppso-online-guest-entry h2 {font-size:20px;margin-bottom:10px}
.ppso-online-guest-entry p {font-size:16px;color:var(--oc-muted);margin-bottom:14px}
.ppso-online-guest-entry label {display:block;font-size:16px;font-weight:650;margin-bottom:8px}

/* Keep the site's blog furniture out of lesson pages. */
body.ppso-online-classroom-page #sidebar {display:none!important}
body.ppso-online-classroom-page.et_right_sidebar #left-area {width:100%!important;float:none!important;padding-right:0!important}
body.ppso-online-classroom-page.et_right_sidebar #main-content .container:before {display:none!important}
body.ppso-online-classroom-page #main-content .container {width:100%!important;max-width:1240px!important}
body.ppso-online-room-page {background:#f3f6f8!important}
body.ppso-online-room-page #top-header,body.ppso-online-room-page #main-header,body.ppso-online-room-page #main-footer,body.ppso-online-room-page #sidebar,body.ppso-online-room-page .widget-area {display:none!important}
body.ppso-online-room-page #page-container,body.ppso-online-room-page #et-main-area,body.ppso-online-room-page #main-content,body.ppso-online-room-page #main-content .container,body.ppso-online-room-page #left-area,body.ppso-online-room-page article:not([class*="ppso-online-"]),body.ppso-online-room-page .entry-content {width:100%!important;max-width:none!important;float:none!important;margin:0!important;padding:0!important;background:#f3f6f8!important}
body.ppso-online-room-page #main-content .container:before {display:none!important}
.ppso-online-shell-room {max-width:none;margin:0;padding:32px 24px;min-height:var(--oc-height);border:0;border-radius:0;background:var(--oc-bg)}
.ppso-online-shell-room:not(.is-live)>.ppso-online-list,.ppso-online-shell-room:not(.is-live)>.ppso-online-notice {width:min(1100px,100%);margin-left:auto;margin-right:auto}
.ppso-online-shell-room.is-live {padding:12px}
.ppso-online-room {display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,34%);grid-template-rows:66px 54px minmax(200px,.7fr) minmax(300px,1.3fr) 88px;grid-template-areas:"bar bar" "tabs tabs" "board stage" "board chat" "toolbar toolbar";gap:0;height:calc(var(--oc-height) - 24px);min-height:710px;border:1px solid #ccdae1;border-radius:12px;overflow:hidden;background:white}
.ppso-online-roombar {grid-area:bar;display:flex;align-items:center;gap:18px;padding:10px 20px;background:#153748;color:white;min-width:0}
.ppso-online-roombar>div {min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:18px}
.ppso-online-roombar strong {font-size:20px;line-height:1.3;overflow-wrap:anywhere}
.ppso-online-roombar #ppso-online-room-timer {display:block;font-size:18px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#d3f4eb;font-weight:650}
.ppso-online-roombar .ppso-online-button {min-height:48px;padding:10px 16px}
.ppso-online-connection {font-size:14px;background:#245c5b;color:#dcfff1;white-space:nowrap;padding:5px 9px;border-radius:5px}
.ppso-online-connection::before {content:"";display:inline-block;width:7px;height:7px;background:#89e1c4;border-radius:50%;margin-right:7px}
.ppso-online-connection.is-warning {background:#775b21;color:#fff6da}
.ppso-online-panel-tabs {grid-area:tabs;display:flex;gap:4px;align-items:stretch;padding:4px 18px;background:#fff;border-bottom:1px solid var(--oc-border)}
.ppso-online-panel-tabs .ppso-online-button {min-height:44px;border:0;border-radius:5px;font-size:15px;padding:8px 14px;background:transparent;color:var(--oc-muted)!important}
.ppso-online-panel-tabs .ppso-online-button[aria-pressed="true"] {background:var(--oc-tint);color:var(--oc-brand-dark)!important}
.ppso-online-collaboration {display:contents}
.ppso-online-stage {grid-area:stage;position:relative;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);gap:6px;min-height:0;min-width:0;overflow:hidden;padding:8px;background:#12303e}
.ppso-online-stage.has-many {grid-template-columns:repeat(2,minmax(0,1fr))}
.ppso-online-track {position:relative;min-height:0;min-width:0;border-radius:6px;background:#234957;overflow:hidden;grid-column:1;grid-row:1}
.ppso-online-track.is-audio {display:none!important}
.ppso-online-audio-help {position:absolute;left:10px;right:10px;bottom:10px;z-index:5;display:flex;flex-direction:column;gap:6px;padding:10px;background:#fffdf4;border:1px solid #d5b96b;border-radius:8px;max-height:calc(100% - 20px);overflow:auto;box-shadow:0 3px 12px #102a3b40}
.ppso-online-audio-help .ppso-online-button {min-height:48px;flex-shrink:0}
.ppso-online-track video {display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.ppso-online-track.is-screen video {object-fit:contain;background:#0d2430}
.ppso-online-track.is-local:not(.is-screen) {position:absolute;right:16px;top:16px;width:27%;height:29%;z-index:2;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 10px #0b222950}
.ppso-online-stage.has-many .ppso-online-track.is-remote {grid-column:auto;grid-row:auto}
.ppso-online-stage.has-screen .ppso-online-track:not(.is-screen):not(.is-audio) {display:none}
.ppso-online-stage.has-screen .ppso-online-track.is-screen {position:relative;grid-area:1 / 1 / -1 / -1;z-index:3}
.ppso-online-track-label {position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);border-radius:4px;padding:3px 7px;background:#0b2435df;color:white;font-size:14px;line-height:1.35}
.ppso-online-track.is-muted video {visibility:hidden}
.ppso-online-stage-empty {grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#dcece9;padding:22px;text-align:center}
.ppso-online-stage-empty>.ppso-online-icon {width:42px;height:42px;flex-basis:42px;color:#8ac1b6}
.ppso-online-stage-empty p {font-size:14px;max-width:320px;color:#bbd1d5}
.ppso-online-collab-card {min-width:0;min-height:0;background:white;color:var(--oc-ink);padding:20px}
.ppso-online-board-card {grid-area:board;display:flex;flex-direction:column;align-items:center;gap:14px;background:#f9fbfc;border-right:1px solid var(--oc-border);overflow:hidden}
.ppso-online-board-heading {width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-shrink:0}
.ppso-online-board-heading h2 {font-size:20px}
.ppso-online-board-heading p {margin-top:4px;font-size:14px}
.ppso-online-board-heading .ppso-online-button {flex-shrink:0;padding:10px 12px;font-size:14px}
.ppso-online-board-intro {text-align:center;max-width:490px;display:flex;flex-direction:column;align-items:center;gap:7px;margin:8px auto}
.ppso-online-board-intro>.ppso-online-icon {color:var(--oc-brand);width:32px;height:32px;flex-basis:32px}
.ppso-online-board-intro p {font-size:16px;color:var(--oc-muted)}
.ppso-online-board-card canvas {display:block;width:100%;height:auto;aspect-ratio:5/3;flex-shrink:0;background:white;border:1px solid #c3d4dc;border-radius:8px;touch-action:none;cursor:crosshair;box-shadow:0 3px 10px #24455006}
.ppso-online-board-surface {display:grid;place-items:center;width:100%;flex:1;min-height:0;min-width:0;container-type:size}
@supports (width:1cqw) {.ppso-online-board-surface canvas {width:min(100cqw,calc(100cqh * 5 / 3));height:auto}}
.ppso-online-board-card canvas.is-read-only {cursor:default}
.ppso-online-chat-card {grid-area:chat;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--oc-border);overflow:hidden;padding:16px}
.ppso-online-chat-card h2 {font-size:18px;line-height:1.35}
.ppso-online-policy {display:flex;gap:6px;align-items:flex-start;color:#6f5525;font-size:14px;line-height:1.4;padding:7px 10px;background:#fff8e9;border-radius:6px}
.ppso-online-policy strong {display:none}
.ppso-online-messages {min-height:60px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:10px;background:#f4f7f8;border:1px solid #e4ebed;border-radius:8px;overscroll-behavior:contain}
.ppso-online-messages:empty::before {content:attr(data-empty);font-size:16px;line-height:1.5;color:var(--oc-muted);margin:auto;text-align:center;padding:16px}
.ppso-online-message {max-width:94%;align-self:flex-start;border:1px solid #d9e5e8;background:white;border-radius:10px 10px 10px 2px;padding:9px 12px;overflow-wrap:anywhere}
.ppso-online-message.is-mine {align-self:flex-end;background:#e7f4ef;border-color:#badacd;border-radius:10px 10px 2px 10px}
.ppso-online-message-meta {font-size:14px;color:var(--oc-muted);margin-bottom:5px!important}
.ppso-online-message-body {white-space:pre-wrap;font-size:var(--oc-chat-size);line-height:1.55}
.ppso-online-message-image {max-width:100%;max-height:230px;display:block;border-radius:6px;object-fit:contain}
.ppso-online-image-preview {padding:0;border:0;min-height:48px}
.ppso-online-message-form {display:flex;gap:8px;align-items:stretch;margin:0}
.ppso-online-message-form input {font-size:var(--oc-chat-size)!important}
.ppso-online-message-form .ppso-online-button {min-height:48px;padding:10px 16px;flex-shrink:0;white-space:nowrap}
.ppso-online-image-label {position:relative;display:flex;align-items:center;gap:8px;min-height:48px;width:max-content;max-width:100%;padding:9px 14px;border:1px solid var(--oc-border);border-radius:7px;font-size:14px;font-weight:650;color:var(--oc-brand-dark);cursor:pointer;flex-shrink:0}
.ppso-online-image-label:hover {background:var(--oc-tint)}
.ppso-online-image-label:focus-within {outline:3px solid #e8a128;outline-offset:2px}
.ppso-online-image-label:has(input:disabled) {opacity:.55;cursor:not-allowed}
.ppso-online-image-label input {position:absolute;inset:0;opacity:0;min-width:0;max-width:none;width:100%;height:100%;font-size:16px;cursor:inherit}
.ppso-online-image-label input::file-selector-button {min-height:44px;border:1px solid var(--oc-border);border-radius:5px;padding:5px 8px;background:#fff;color:var(--oc-ink);font:inherit;cursor:pointer}
.ppso-online-chat-card #ppso-online-image-hint {font-size:14px;line-height:1.35}
.ppso-online-toolbar {grid-area:toolbar;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:white;border-top:1px solid var(--oc-border);z-index:3}
.ppso-online-room-actions,.ppso-online-extra-actions {display:flex;align-items:center;gap:8px}
.ppso-online-toolbar .ppso-online-button {padding:10px 14px;min-height:48px;white-space:normal;flex-shrink:1}
.ppso-online-toolbar .ppso-online-button.is-off {background:#f3f5f6;border-color:#c2cdd2;color:#597080!important}
.ppso-online-toolbar .ppso-online-button[aria-pressed="true"] {background:var(--oc-tint);border-color:#7fbcaf;color:var(--oc-brand-dark)!important}
.ppso-online-watermark {display:none}
.ppso-online-room[data-panel="video"] {grid-template-columns:minmax(0,1fr) minmax(340px,30%);grid-template-areas:"bar bar" "tabs tabs" "stage chat" "stage chat" "toolbar toolbar"}
.ppso-online-room[data-panel="video"] .ppso-online-board-card {display:none}
.ppso-online-room[data-panel="video"] .ppso-online-stage {border-right:1px solid var(--oc-border)}
.ppso-online-room[data-panel="video"] .ppso-online-chat-card {border-top:0}
.ppso-online-shell-room.is-live>.ppso-online-notice {position:fixed;left:24px;right:24px;top:80px;z-index:8;margin:0;box-shadow:0 6px 24px #16353b20}
.ppso-online-shell-room.is-live>.ppso-online-media-help {position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100% - 32px));max-height:80dvh;overflow:auto;z-index:10;box-shadow:0 0 0 100vmax #102a3b70,0 15px 60px #102a3b30}

/* Dialogs use a single accessible shell, including fullscreen and small screens. */
.ppso-online-modal-backdrop {position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:#102a3ba8;backdrop-filter:blur(3px);overscroll-behavior:contain}
.ppso-online-modal {display:flex;flex-direction:column;width:min(580px,100%);max-height:calc(100dvh - 48px);border:1px solid #cbdade;border-radius:16px;background:white;color:var(--oc-ink);box-shadow:0 20px 100px #051a3350;overflow:hidden}
.ppso-online-modal-header {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;border-bottom:1px solid var(--oc-border);flex-shrink:0}
.ppso-online-modal-header h2 {font-size:26px;line-height:1.35}
.ppso-online-modal-body {padding:24px 28px;overflow:auto;min-height:0;overscroll-behavior:contain}
.ppso-online-modal-copy {font-size:17px;color:var(--oc-muted);margin-bottom:22px!important}
.ppso-online-modal-footer {display:flex;justify-content:flex-end;gap:12px;padding:18px 26px;border-top:1px solid var(--oc-border);background:#fcfdfd;flex-shrink:0}
.ppso-online-modal-footer>.ppso-online-button {min-width:140px;flex:1}
.ppso-online-modal-setup {width:min(1040px,100%)}
.ppso-online-device-grid {display:grid;grid-template-columns:minmax(230px,.8fr) minmax(340px,1.2fr);gap:26px;align-items:start}
.ppso-online-device-preview {position:sticky;top:0;aspect-ratio:4/3;border-radius:12px;background:#eaf1f2;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--oc-border)}
.ppso-online-device-preview video {width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ppso-online-preview-placeholder {display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px;text-align:center;color:var(--oc-muted);font-size:16px}
.ppso-online-preview-placeholder>.ppso-online-icon {width:48px;height:48px;flex-basis:48px;color:var(--oc-brand)}
.ppso-online-device-checks {display:flex;flex-direction:column;gap:12px}
.ppso-online-device-row {padding:14px;border:1px solid var(--oc-border);border-radius:10px;background:white}
.ppso-online-device-row.is-checked {border-color:#95cbbd;background:#f7fcfa}
.ppso-online-device-row-title {display:flex;align-items:center;gap:10px;line-height:1.4}
.ppso-online-device-row-title strong {flex:1;font-size:16px}
.ppso-online-check-state {font-size:14px;color:var(--oc-muted)}
.is-checked .ppso-online-check-state {color:var(--oc-brand-dark);font-weight:650}
.ppso-online-device-row-actions {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.ppso-online-device-row-actions .ppso-online-button {padding:9px 12px;min-height:48px;font-size:15px}
.ppso-online-meter {width:100%;height:12px;accent-color:var(--oc-brand)}
.ppso-online-device-status {font-size:16px;color:var(--oc-brand-dark);margin-top:16px!important}
.ppso-online-device-status.is-error {padding:12px;border-radius:8px;background:#fff0f1;color:#922330}
.ppso-online-modal-body>.ppso-online-small-copy {margin-top:12px}
.ppso-online-modal-body>.ppso-online-button-quiet {margin-top:10px}
.ppso-online-modal-end .ppso-online-modal-body {text-align:center;padding:28px}
.ppso-online-modal-end .ppso-online-modal-body>.ppso-online-icon {width:76px;height:76px;flex-basis:76px;padding:20px;background:var(--oc-tint);color:var(--oc-brand);border-radius:50%;margin:0 auto 24px}
.ppso-online-modal-image {width:min(980px,100%)}
.ppso-online-modal-image .ppso-online-modal-body {text-align:center}
.ppso-online-help-item {padding:16px 0;border-bottom:1px solid var(--oc-border);font-size:17px}
.ppso-online-help-item:last-child {border-bottom:0}
.ppso-online-shell-room:fullscreen,.ppso-online-shell-room:-webkit-full-screen {--oc-height:100dvh;width:100vw;max-width:none;overflow:auto}

@media (max-width:1100px) {
  .ppso-online-shell-lobby {margin:16px auto;padding:24px}
  .ppso-online-lobby-intro {display:block}.ppso-online-lobby-intro>p {max-width:none;margin-top:14px}
  .ppso-online-room {grid-template-columns:minmax(0,1fr) minmax(320px,40%)}
  .ppso-online-toolbar {gap:8px;padding:12px}
  .ppso-online-toolbar .ppso-online-button {padding:10px;gap:6px;font-size:14px}
  .ppso-online-roombar {gap:10px;padding:10px 14px}
  .ppso-online-roombar>div {gap:12px}.ppso-online-roombar strong {font-size:18px}
  .ppso-online-connection {font-size:14px;padding:4px 6px}
  .ppso-online-entry-layout {gap:24px}.ppso-online-entry-aside {padding-left:24px}
}
@media (max-height:800px) and (min-width:761px) {
  .ppso-online-board-intro {display:none}
  .ppso-online-room {grid-template-rows:62px 50px minmax(160px,.65fr) minmax(260px,1.35fr) 82px;min-height:616px}
  .ppso-online-chat-card {gap:7px;padding:12px}
  .ppso-online-chat-card h2,.ppso-online-chat-card #ppso-online-image-hint {display:none}
}
@media (max-width:760px) {
  .ppso-online-shell {padding:20px 16px;margin:0;border:0;border-radius:0}
  .ppso-online-shell h1 {font-size:27px}.ppso-online-shell h2 {font-size:21px}
  .ppso-online-header {align-items:flex-start;flex-direction:column;gap:18px;padding-bottom:20px}
  .ppso-online-header-actions {width:100%}.ppso-online-header-actions>.ppso-online-button {flex:1}
  .ppso-online-lobby-intro {margin-bottom:24px;padding:20px 0}
  .ppso-online-steps {gap:10px}.ppso-online-steps li {flex-direction:column;gap:7px;text-align:center;align-self:flex-start;font-size:14px}
  .ppso-online-card {grid-template-columns:52px minmax(0,1fr);gap:15px;padding:20px 16px}
  .ppso-online-date-block {min-height:80px}.ppso-online-date-block strong {font-size:27px}
  .ppso-online-card-actions {grid-column:1/-1}.ppso-online-card-actions>.ppso-online-button {width:100%}
  .ppso-online-card h2 {font-size:20px}.ppso-online-time {font-size:16px}
  .ppso-online-entry-card {border-radius:12px;padding:24px 18px}
  .ppso-online-entry-card>h1 {margin:22px 0}
  .ppso-online-entry-layout {grid-template-columns:1fr;gap:24px}
  .ppso-online-entry-main {padding:0}.ppso-online-entry-main>.ppso-online-icon {width:56px;height:56px;flex-basis:56px;padding:14px}
  .ppso-online-entry-main>.ppso-online-button {width:100%;margin-top:4px}
  .ppso-online-entry-aside {padding:24px 0 0;border-left:0;border-top:1px solid var(--oc-border)}
  .ppso-online-safety {padding:16px}.ppso-online-safety h2 {font-size:18px}
  .ppso-online-shell-room {padding:16px 12px}.ppso-online-shell-room.is-live {padding:0;min-height:0}
  .ppso-online-room,.ppso-online-room[data-panel="video"] {height:var(--oc-height);min-height:calc(674px + env(safe-area-inset-bottom,0px));border:0;border-radius:0;grid-template-columns:minmax(0,1fr);grid-template-rows:74px 52px minmax(130px,24dvh) minmax(276px,1fr) calc(140px + env(safe-area-inset-bottom,0px));grid-template-areas:"bar" "tabs" "stage" "board" "toolbar"}
  .ppso-online-roombar {gap:10px;padding:10px 12px}
  .ppso-online-connection {display:none}
  .ppso-online-roombar>div {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
  .ppso-online-roombar strong {font-size:16px;line-height:1.2}
  .ppso-online-roombar #ppso-online-room-timer {font-size:16px}
  .ppso-online-roombar .ppso-online-button {min-width:48px;padding:10px;font-size:14px}
  .ppso-online-roombar .ppso-online-button .ppso-online-icon {display:none}
  .ppso-online-panel-tabs {padding:2px 6px;gap:0}
  .ppso-online-panel-tabs .ppso-online-button {flex:1;min-width:0;padding:6px;gap:5px;font-size:14px;min-height:48px}
  .ppso-online-panel-tabs .ppso-online-icon {width:20px;height:20px;flex-basis:20px}
  .ppso-online-stage {padding:6px}.ppso-online-track.is-local:not(.is-screen) {right:12px;top:12px;width:25%;height:32%}
  .ppso-online-board-card {border-right:0;padding:12px;gap:8px;overflow:hidden}
  .ppso-online-board-heading {gap:10px}.ppso-online-board-heading h2 {font-size:17px}
  .ppso-online-board-heading .ppso-online-small-copy,.ppso-online-board-intro {display:none}
  .ppso-online-board-heading .ppso-online-button {font-size:14px;min-height:48px;padding:8px}
  .ppso-online-chat-card {display:none;padding:12px;gap:8px}
  .ppso-online-room[data-panel="chat"] {grid-template-areas:"bar" "tabs" "stage" "chat" "toolbar"}
  .ppso-online-room[data-panel="chat"] .ppso-online-chat-card {display:flex}
  .ppso-online-room[data-panel="chat"] .ppso-online-board-card {display:none}
  .ppso-online-room[data-panel="video"] {grid-template-areas:"bar" "tabs" "stage" "stage" "toolbar"}
  .ppso-online-room[data-panel="video"] .ppso-online-chat-card {display:none}
  .ppso-online-chat-card h2,.ppso-online-chat-card #ppso-online-image-hint {display:none}
  .ppso-online-chat-card .ppso-online-policy {font-size:14px;padding:6px 8px}
  .ppso-online-toolbar {padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:7px;flex-direction:column;align-items:stretch;justify-content:flex-start}
  .ppso-online-room-actions {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
  .ppso-online-room-actions .ppso-online-button {min-height:48px;flex-direction:column;gap:4px;padding:5px 3px;font-size:14px;line-height:1.15}
  .ppso-online-room-actions .ppso-online-icon {width:20px;height:20px;flex-basis:20px}
  .ppso-online-extra-actions {justify-content:center;gap:16px}
  .ppso-online-extra-actions .ppso-online-button {min-height:48px;border:0;padding:4px 10px;font-size:14px}
  .ppso-online-media-help-actions {flex-direction:column}.ppso-online-media-help-actions>.ppso-online-button {width:100%}
  .ppso-online-shell-room.is-live>.ppso-online-notice {left:10px;right:10px;top:76px;font-size:14px;padding:10px}
  .ppso-online-modal-backdrop {padding:12px}
  .ppso-online-modal {max-height:calc(100dvh - 24px);border-radius:12px}
  .ppso-online-modal-header {padding:14px 16px;gap:10px}.ppso-online-modal-header h2 {font-size:22px}
  .ppso-online-modal-body {padding:18px 16px}.ppso-online-modal-copy {font-size:16px}
  .ppso-online-modal-footer {padding:12px 16px;gap:8px;flex-wrap:wrap}
  .ppso-online-modal-footer>.ppso-online-button {min-width:0;flex:1 1 40%;padding:11px;font-size:16px}
  .ppso-online-device-grid {grid-template-columns:1fr;gap:18px}
  .ppso-online-device-preview {position:relative;aspect-ratio:16/9;width:100%;max-height:200px}
  .ppso-online-device-row {padding:12px}.ppso-online-device-row-title {gap:8px}
  .ppso-online-device-row-actions .ppso-online-button {font-size:15px}
  .ppso-online-modal-body>.ppso-online-button-quiet {text-align:left;font-size:15px}
}
@media (max-width:760px) and (max-height:760px) {
  .ppso-online-audio-help p {display:none}
  .ppso-online-room,.ppso-online-room[data-panel="video"] {min-height:calc(662px + env(safe-area-inset-bottom,0px));grid-template-rows:74px 52px 120px minmax(276px,1fr) calc(140px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce) {.ppso-online-shell * {transition:none!important;scroll-behavior:auto!important}}