.wlsm-shortcode-shell,
.wpns-root,
.wpns-shortcode-wrap,
.wlsm-smart-notebook-preview {
  --wpns-bg: #f6f7fb;
  --wpns-panel: #ffffff;
  --wpns-border: #d9dce7;
  --wpns-text: #16181d;
  --wpns-muted: #61697a;
  --wpns-accent: #3858e9;
  --wpns-accent-2: #e8edff;
  --wpns-danger: #b42318;
  --wpns-shadow: 0 12px 28px rgba(18, 27, 54, 0.08);
  --wpns-stage-bg: #edf0f8;
}

.wpns-admin-wrap {
  margin-right: 20px;
}

.wpns-root,
.wpns-shortcode-wrap .wpns-root {
  background: var(--wpns-bg);
  border: 1px solid var(--wpns-border);
  border-radius: 16px;
  min-height: 80vh;
  height: 100%;
  box-shadow: var(--wpns-shadow);
  overflow: visible;
  color: var(--wpns-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wpns-app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  grid-template-rows: auto 1fr;
  min-height: inherit;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.wpns-toolbar {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px;
  background: var(--wpns-panel);
  border-bottom: 1px solid var(--wpns-border);
}

.wpns-toolbar .spacer,
.wpns-canvas-toolbar .spacer { flex: 1 1 auto; }

.wpns-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--wpns-border);
  color: var(--wpns-muted);
  font-size: 12px;
}

.wpns-btn,
.wpns-select,
.wpns-input,
.wpns-color,
.wpns-textarea {
  border: 1px solid var(--wpns-border);
  background: #fff;
  border-radius: 10px;
  color: var(--wpns-text);
  box-sizing: border-box;
}

.wpns-btn {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.wpns-btn:hover { border-color: #b8c0d4; }
.wpns-btn.primary {
  background: var(--wpns-accent);
  color: #fff;
  border-color: var(--wpns-accent);
}
.wpns-btn.soft {
  background: var(--wpns-accent-2);
  color: var(--wpns-accent);
  border-color: #c8d3ff;
}
.wpns-btn.danger { color: var(--wpns-danger); }
.wpns-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wpns-sidebar,
.wpns-inspector,
.wpns-center {
  min-height: 0;
  overflow: hidden;
}

.wpns-sidebar,
.wpns-inspector {
  background: var(--wpns-panel);
}

.wpns-sidebar {
  border-right: 1px solid var(--wpns-border);
  display: flex;
  flex-direction: column;
}

.wpns-inspector {
  border-left: 1px solid var(--wpns-border);
  display: flex;
  flex-direction: column;
}

.wpns-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--wpns-border);
}

.wpns-panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wpns-muted);
}

.wpns-pages {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.wpns-page-card {
  border: 1px solid var(--wpns-border);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  text-align: right;
}

.wpns-page-card.active {
  border-color: var(--wpns-accent);
  box-shadow: 0 0 0 2px rgba(56, 88, 233, 0.1);
}

.wpns-page-thumb {
  height: 104px;
  border: 1px solid #e8eaf2;
  background: linear-gradient(180deg, #fff, #f5f7ff);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpns-page-thumb small {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  color: var(--wpns-muted);
}

.wpns-page-thumb span {
  position: absolute;
  inset: auto 8px 8px 8px;
  font-size: 11px;
  color: var(--wpns-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpns-page-ratio {
  font-size: 11px;
  color: #8b93a7;
}

.wpns-center {
  display: flex;
  flex-direction: column;
}

.wpns-canvas-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid var(--wpns-border);
  flex-wrap: wrap;
}

.wpns-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  background: radial-gradient(circle at top, #f8fbff 0%, var(--wpns-stage-bg) 70%);
  overscroll-behavior: contain;
}

.wpns-root.wpns-is-fullscreen .wpns-stage-wrap,
.wpns-stage-wrap.wpns-stage-wrap-fullscreen {
  overflow: auto;
  overscroll-behavior: contain;
}

.wpns-stage-outer {
  transform-origin: top center;
}

.wpns-stage {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(11, 22, 53, 0.18);
  overflow: hidden;
}

.wpns-empty,
.wpns-loading {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wpns-muted);
  padding: 24px;
  text-align: center;
}

.wpns-stage svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.wpns-stage .wpns-svg-selected {
  filter: drop-shadow(0 0 0 2px rgba(56, 88, 233, 0.18));
}

.wpns-selection-box {
  position: absolute;
  border: 2px solid var(--wpns-accent);
  border-radius: 8px;
  pointer-events: none;
  box-sizing: border-box;
}

.wpns-selection-box.hidden { display: none; }

.wpns-selection-handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wpns-accent);
  border: 2px solid #fff;
  pointer-events: auto;
  cursor: nwse-resize;
}

.wpns-inspector-body {
  padding: 14px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wpns-group {
  border: 1px solid var(--wpns-border);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wpns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wpns-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wpns-field label {
  font-size: 12px;
  color: var(--wpns-muted);
}

.wpns-input,
.wpns-select,
.wpns-color,
.wpns-textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 40px;
}

.wpns-color {
  padding: 4px;
}

.wpns-textarea {
  resize: vertical;
  min-height: 110px;
}

.wpns-note {
  font-size: 12px;
  color: var(--wpns-muted);
  line-height: 1.55;
}

.wpns-status {
  font-size: 12px;
  color: var(--wpns-muted);
}

.wpns-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--wpns-border);
  background: #fff;
  color: var(--wpns-muted);
  font-size: 11px;
}

@media (max-width: 1280px) {
  .wpns-app {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .wpns-inspector {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--wpns-border);
  }
}

@media (max-width: 900px) {
  .wpns-app {
    grid-template-columns: 1fr;
  }
  .wpns-sidebar,
  .wpns-inspector {
    border: 0;
    border-top: 1px solid var(--wpns-border);
  }
}


.wpns-row-tight {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.wpns-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--wpns-border);
  border-radius: 10px;
  background: #fff;
  color: var(--wpns-text);
  font-size: 13px;
}

.wpns-check input {
  margin: 0;
}

.wpns-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 220px;
  line-height: 1.45;
  white-space: pre;
}


.wpns-shortcode-wrap {
  height: 100%;
}

.wpns-pages,
.wpns-stage-wrap,
.wpns-inspector-body {
  scrollbar-width: thin;
}

.wpns-toolbar-main {
  background: #fff;
}

.wpns-toolbar-layers {
  background: #0f172a;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.wpns-layer-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wpns-layer-switcher .wpns-btn {
  background: #fff;
  color: #0f172a;
}

.wpns-layer-switcher .wpns-btn.active {
  background: var(--wpns-accent);
  color: #fff;
  border-color: var(--wpns-accent);
}

.wpns-top-note {
  font-size: 12px;
  color: #cbd5e1;
}

[data-wpns-layer="content"] [data-layer-panel="interaction"],
[data-wpns-layer="content"] [data-layer-panel="teaching"],
[data-wpns-layer="interaction"] [data-layer-panel="content"],
[data-wpns-layer="interaction"] [data-layer-panel="teaching"],
[data-wpns-layer="teaching"] [data-layer-panel="content"],
[data-wpns-layer="teaching"] [data-layer-panel="interaction"] {
  display: none !important;
}

.wpns-sidebar-subhead {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--wpns-muted);
  border-bottom: 1px solid var(--wpns-border);
  background: #fff;
}

.wpns-page-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: center;
}

.wpns-page-thumb {
  height: 58px;
}

.wpns-page-thumb .wpns-thumb-svg,
.wpns-page-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wpns-page-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.wpns-page-meta small,
.wpns-page-meta span {
  color: var(--wpns-muted);
  font-size: 11px;
}

.wpns-page-meta strong {
  font-size: 13px;
}

.wpns-stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.wpns-stage-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  background: radial-gradient(circle at top, #f8fbff 0%, var(--wpns-stage-bg) 70%);
  overscroll-behavior: contain;
}

.wpns-shade {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: rgba(2, 6, 23, 0.82);
  z-index: 7;
  pointer-events: auto;
}

.wpns-shade-handle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 84px;
  height: 18px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  cursor: ns-resize;
}

.wpns-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 92px at var(--x, 50%) var(--y, 50%), transparent 0 86px, rgba(2, 6, 23, 0.82) 112px);
  z-index: 6;
  pointer-events: none;
}

.wpns-app.is-play-mode [data-role="selection-box"] {
  display: none !important;
}

.wpns-app.is-play-mode .wpns-svg-root [data-wpns-drag-source="1"] {
  cursor: grab;
}

.wpns-app.is-play-mode .wpns-svg-root [data-wpns-trigger-group] {
  cursor: pointer;
}

.wpns-app { grid-template-rows: auto auto 1fr; }


/* Viewer-only mode */
.wpns-viewer-only {
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
.wpns-viewer-only .wpns-stage-wrap { padding: 0; overflow: visible; }
.wpns-viewer-only .wpns-stage-scroll { position: relative; inset: auto; overflow: visible; padding: 24px; }
.wpns-viewer-only .wpns-center { min-width: 0; overflow: visible; }
.wpns-viewer-toolbar { position: sticky; top: 0; z-index: 5; }
.wpns-viewer-note { justify-content: flex-start; }
.wpns-viewer-only .wpns-sidebar { border-right: 1px solid var(--wpns-border); }
.wpns-viewer-only .wpns-page-thumb { height: 70px; }
.wpns-viewer-only .wpns-stage svg { cursor: default; }
.wpns-viewer-only .wpns-selection-box,
.wpns-viewer-only .wpns-inspector,
.wpns-viewer-only .wpns-toolbar-layers { display: none !important; }
@media (max-width: 900px) { .wpns-viewer-only { grid-template-columns: 1fr; } .wpns-viewer-only .wpns-sidebar { order: 2; border-right: 0; border-top: 1px solid var(--wpns-border); } }

/* viewer-only persistence build */
.wpns-viewer-only.wpns-app { height: auto; max-height: none; }
.wpns-viewer-only .wpns-center,
.wpns-viewer-only .wpns-stage-wrap { overflow: visible; }
.wpns-viewer-only .wpns-stage-wrap { padding: 24px; }
.wpns-viewer-only .wpns-stage-scroll { overflow: visible; }
.wpns-viewer-only .wpns-sidebar { max-height: calc(100vh - 140px); }

.wpns-viewer-toolbar [data-action="zoomReset"]{min-width:72px;font-weight:600;}


/* zoom-unbounded viewer */
.wpns-root.wpns-viewer-root {
  overflow: visible;
  height: auto;
  max-height: none;
}
.wpns-viewer-root .wpns-app {
  height: auto;
  max-height: none;
}
.wpns-viewer-root .wpns-stage-wrap {
  overflow: visible;
  justify-content: flex-start;
}
.wpns-viewer-root .wpns-stage-scroll {
  overflow: visible;
  margin: 0 auto;
}
.wpns-viewer-root .wpns-stage-outer {
  position: relative;
  margin: 0 auto;
}


/* centered zoom without covering page list */
.wpns-viewer-root .wpns-sidebar { position: relative; z-index: 2; background: var(--wpns-panel); }
.wpns-viewer-root .wpns-center { position: relative; z-index: 1; }
.wpns-viewer-root .wpns-stage-wrap { justify-content: flex-start; }
.wpns-viewer-root .wpns-stage-scroll { margin-left: 0; margin-right: auto; }

.wpns-root.wpns-is-fullscreen {
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
}

.wpns-root.wpns-is-fullscreen .wpns-app {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.wpns-root.wpns-is-fullscreen .wpns-center {
  min-height: 0;
  overflow: hidden;
}

.wpns-root.wpns-is-fullscreen .wpns-stage-scroll {
  flex: 0 0 auto;
}


.wpns-pdf-stage {
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.wpns-pdf-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #ffffff;
}

.wpns-pdf-thumb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

.wpns-pdf-thumb-sheet {
  width: 62px;
  background: #ffffff;
  border: 1px solid #d7dbe2;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  position: relative;
}

.wpns-pdf-thumb-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  border-radius: 6px 6px 0 0;
  background: #d93025;
}

.wpns-pdf-thumb-sheet span {
  position: absolute;
  inset: 18px 0 auto 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #d93025;
}

.wpns-pdf-thumb-sheet small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-size: 10px;
  color: #6b7280;
}

/* Embedded viewer inside School Management learning modals */
.wlsm-notebook-root.wpns-root,
.wlsm-smart-notebook-preview .wpns-root {
  min-height: 720px;
  border-radius: 22px;
  border-color: rgba(37,99,235,.18);
  box-shadow: 0 18px 45px rgba(15,23,42,.12);
  overflow: hidden;
}
.wlsm-notebook-root .wpns-toolbar .wpns-btn.primary { display: none !important; }
.wlsm-notebook-root .wpns-app { grid-template-columns: 220px minmax(0,1fr) 0px; }
.wlsm-notebook-root .wpns-inspector { display: none !important; }
.wlsm-notebook-root .wpns-stage-wrap { padding: 18px; }
@media (max-width: 860px) {
  .wlsm-notebook-root.wpns-root,
  .wlsm-smart-notebook-preview .wpns-root { min-height: 560px; }
  .wlsm-notebook-root .wpns-app { grid-template-columns: 1fr; }
  .wlsm-notebook-root .wpns-sidebar { display: none; }
}


/* fix32 full-screen embedded viewers */
.wlsm-smart-viewer .wlsm-smart-notebook-preview .wpns-root,
.wlsm-lesson-viewer-page .wpns-root {
  min-height: calc(100vh - 190px) !important;
  height: calc(100vh - 190px) !important;
  max-height: none !important;
}
.wlsm-smart-viewer .wlsm-notebook-root .wpns-app,
.wlsm-lesson-viewer-page .wpns-root .wpns-app {
  min-height: inherit !important;
  height: 100% !important;
}
.wlsm-smart-viewer .wlsm-notebook-root .wpns-toolbar .wpns-btn.primary,
.wlsm-lesson-viewer-page .wpns-toolbar .wpns-btn.primary {
  display: none !important;
}

/* Interactive PDF canvas renderer inside Notebook Viewer */
.wpns-pdf-canvas-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
}

.wpns-pdf-canvas-sheet {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.wpns-pdf-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: #ffffff;
}

.wpns-pdf-render-status,
.wpns-pdf-fallback-message {
  align-self: center;
  justify-self: center;
  margin: auto;
  color: var(--wpns-muted);
  font-size: 14px;
  text-align: center;
  padding: 18px;
}

.wpns-pdf-object {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #ffffff;
}

.wpns-pdf-native-fallback iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #ffffff;
}

.wpns-pdf-native-fallback .wpns-pdf-fallback-message {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--wpns-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
}



/* DWorld v15: force learning viewers to use the full screen width even inside WordPress containers/shortcodes. */
:where(.dw-pdfva,
.wlsm-pptv,
.wlsm-ead-document-viewer,
.wlsm-universal-file-viewer,
.wlsm-notebook-root.wpns-root,
.wpns-root.wpns-viewer-root,
.wlsm-smart-notebook-preview .wpns-root) {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  clear: both;
}

@supports (width: 100dvw) {
  :where(.dw-pdfva,
  .wlsm-pptv,
  .wlsm-ead-document-viewer,
  .wlsm-universal-file-viewer,
  .wlsm-notebook-root.wpns-root,
  .wpns-root.wpns-viewer-root,
  .wlsm-smart-notebook-preview .wpns-root) {
    width: 100dvw !important;
    max-width: 100dvw !important;
    min-width: 100dvw !important;
    margin-left: calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50dvw) !important;
  }
}

:where(.dw-pdfva:fullscreen,
.wlsm-pptv.wlsm-pptv-fullscreen,
.wpns-root.wpns-is-fullscreen,
.wlsm-viewer-fullscreen) {
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Keep plugin and theme wrappers from clipping the full-bleed viewers. */
:where(.wlsm-container.wlsm-container-student,
.wlsm-container.wlsm-container-parent,
.wlsm-container .wlsm-content-area,
.wlsm-smart-viewer,
.wlsm-smart-panel,
.wlsm-smart-resource-grid,
.wlsm-smart-resource-card,
.wlsm-smart-notebook-preview,
.wlsm-smart-inline-preview,
.wlsm-lesson-viewer-content,
.jconfirm .jconfirm-box,
.jconfirm .jconfirm-box div.jconfirm-content,
.jconfirm .jconfirm-box div.jconfirm-content-pane) {
  overflow: visible !important;
}

/* Elementor/Astra safe: keep viewer overflow changes inside School Management wrappers only. */
:where(.wlsm-container,
.wlsm-content-area,
.wlsm-smart-viewer,
.wlsm-smart-panel,
.wlsm-smart-resource-grid,
.wlsm-smart-resource-card,
.wlsm-smart-notebook-preview,
.wlsm-smart-inline-preview,
.wlsm-lesson-viewer-content):has(:where(.dw-pdfva,
.wlsm-pptv,
.wpns-root,
.wlsm-ead-document-viewer,
.wlsm-universal-file-viewer)) {
  overflow: visible !important;
}