/* ================================================================
   KPRU CapGuide View All V2 — Future-Ready Theme System v2.0.3
   Presentation-only overrides. No application logic lives here.
   Variants: classic(master) / focus / glass / journey
   Goals: stable scrolling, semantic Light/Dark tokens, low repaint cost, top-aligned cover, live theme switch.
   ================================================================ */

body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) {
  --kpru-radius-xl: 28px;
  --kpru-radius-lg: 20px;
  --kpru-radius-md: 14px;
  --kpru-ease: cubic-bezier(.2,.8,.2,1);
  --kpru-fast: 160ms;
}

/* Avoid expensive broad transitions and large moving shadows during scroll. */
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .reader-container {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .step-header,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .badge-action-link,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .btn-story-trigger,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .toc-item,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .dark-mode-toggle,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .view-mode-toggle {
  transition: background-color var(--kpru-fast) ease, color var(--kpru-fast) ease, border-color var(--kpru-fast) ease, opacity var(--kpru-fast) ease;
}
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .guide-title-text { letter-spacing: -.025em; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .instruction-text { line-height: 1.75; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .step-container-item { position: relative; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .zoom-btn { border-radius: 10px; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .btn-story-trigger { animation: none; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .toc-item:focus-visible,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) button:focus-visible,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) a:focus-visible { outline: 3px solid rgba(59,130,246,.35); outline-offset: 3px; }

/* Stable cover for every View All V1 theme.
   Keep the whole cover width and anchor its visible crop at the TOP. */
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-main-container { margin-top: 0; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper {
  border-radius: 0;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
  box-shadow: none;
  animation: none;
  background: #eef2f7;
}
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper:hover { transform: none !important; box-shadow: none; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper::after { display:none !important; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper img {
  width:100%;
  height:auto;
  max-height:none !important;
  object-fit:cover;
  object-position:50% 0%;
  transform:none !important;
  filter:none !important;
  transition: opacity 180ms ease !important;
}
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper .cover-zoomed-bg {
  transform:none !important;
  filter:none !important;
  transition: opacity 180ms ease !important;
}
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper.cover-loaded { background:transparent; }

/* Disable image-card movement. Keep only color/shadow feedback from the base UI. */
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .img-wrapper-container:hover .img-wrapper,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .img-wrapper-container:hover .extra-img-wrapper { transform:none !important; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .img-wrapper,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .extra-img-wrapper { transition:border-color 160ms ease, box-shadow 160ms ease; }
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .img-wrapper-container:hover .zoom-controls,
body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .img-wrapper-container:hover .extra-zoom-controls { transform:none !important; }

/* Live switching: suppress layout animation for two frames. */
body.kpru-view-switching *,
body.kpru-view-switching *::before,
body.kpru-view-switching *::after {
  transition:none !important;
  animation:none !important;
}

/* Top controls shared by all View All V2 themes. */
.kpru-view-top-controls {
  position:absolute;
  top:24px;
  right:24px;
  z-index:120;
  display:flex;
  gap:8px;
  align-items:center;
}
.kpru-view-top-controls .dark-mode-toggle,
.kpru-view-top-controls .view-mode-toggle {
  position:static !important;
  width:44px;
  height:44px;
  margin:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.1rem;
}
.kpru-view-top-controls .view-mode-toggle {
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.94);
  color:#334155;
  box-shadow:0 6px 18px rgba(15,23,42,.10);
}
.kpru-view-top-controls .view-mode-toggle:hover { background:#fff; color:#5b21b6; }

.kpru-view-picker {
  position:absolute;
  top:54px;
  right:0;
  width:min(470px, calc(100vw - 32px));
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  background:rgba(255,255,255,.985);
  color:#172033;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 150ms ease, transform 150ms ease, visibility 150ms linear;
}
.kpru-view-picker.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.kpru-view-picker-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:3px 4px 10px; }
.kpru-view-picker-head strong { font-size:.95rem; }
.kpru-view-picker-head small { display:block; color:#64748b; font-size:.73rem; margin-top:2px; }
.kpru-view-current-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 2px 10px; padding:7px 10px; border:1px solid #e2e8f0; border-radius:11px; background:#f8fafc; font-size:.7rem; color:#64748b; }
.kpru-view-current-row strong { color:#4c1d95; font-size:.72rem; }
.kpru-view-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.kpru-view-choice {
  appearance:none;
  width:100%;
  border:1px solid #e2e8f0;
  border-radius:13px;
  padding:7px;
  background:#fff;
  color:#334155;
  text-align:left;
  cursor:pointer;
  box-shadow:none;
  transition:border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.kpru-view-choice:hover { border-color:#a78bfa; background:#faf8ff; }
.kpru-view-choice.is-active { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.10); }
.kpru-view-choice-preview { position:relative; height:74px; border-radius:9px; overflow:hidden; margin-bottom:7px; }
.kpru-view-choice-preview::before,
.kpru-view-choice-preview::after { content:""; position:absolute; }
.kpru-view-choice-label { display:block; font-size:.76rem; font-weight:800; line-height:1.2; }
.kpru-view-choice-note { display:block; margin-top:2px; color:#64748b; font-size:.64rem; line-height:1.2; }

/* Pure-CSS thumbnail: View Master */
.kpru-preview-master { background:#6890bb; }
.kpru-preview-master::before { inset:7px 10px; background:#fff; border-top:5px solid #6f42c1; border-bottom:5px solid #6f42c1; border-radius:7px; box-shadow:0 2px 7px rgba(15,23,42,.14); }
.kpru-preview-master::after { left:21px; right:21px; top:17px; height:14px; background:linear-gradient(90deg,#dbeafe,#ede9fe); border-radius:4px; box-shadow:0 20px 0 -2px #eff6ff, 0 35px 0 -3px #e2e8f0; }

/* Pure-CSS thumbnail: Focus */
.kpru-preview-focus { background:#eef2f7; }
.kpru-preview-focus::before { left:9px; top:7px; bottom:7px; width:12px; background:#1f2937; border-radius:5px; opacity:.8; }
.kpru-preview-focus::after { left:27px; right:8px; top:7px; bottom:7px; background:linear-gradient(#fff 0 26%,#f5f3ff 26% 39%,#fff 39%); border-radius:7px; box-shadow:0 2px 7px rgba(15,23,42,.10); }

/* Pure-CSS thumbnail: Glass */
.kpru-preview-glass { background:linear-gradient(135deg,#0f172a,#1d4ed8 55%,#6d28d9); }
.kpru-preview-glass::before { inset:9px 11px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.6); border-radius:9px; }
.kpru-preview-glass::after { left:21px; right:21px; top:31px; height:8px; background:linear-gradient(90deg,#0ea5e9,#7c3aed); border-radius:5px; box-shadow:0 14px 0 rgba(255,255,255,.75); }

/* Pure-CSS thumbnail: Journey */
.kpru-preview-journey { background:#f4f1ea; }
.kpru-preview-journey::before { left:20px; top:8px; bottom:8px; width:2px; background:linear-gradient(#7c3aed,#0ea5e9,#f59e0b); }
.kpru-preview-journey::after { left:30px; right:8px; top:9px; height:18px; background:#fff; border:1px solid #e7e2d8; border-radius:6px; box-shadow:0 24px 0 -1px #fff, 0 24px 0 0 #e7e2d8, 0 48px 0 -1px #fff, 0 48px 0 0 #e7e2d8; }

body.dark-theme .kpru-view-picker { background:#111827; color:#f8fafc; border-color:#334155; }
body.dark-theme .kpru-view-picker-head small,
body.dark-theme .kpru-view-choice-note { color:#94a3b8; }
body.dark-theme .kpru-view-current-row { background:#172033; border-color:#334155; color:#94a3b8; }
body.dark-theme .kpru-view-current-row strong { color:#c4b5fd; }
body.dark-theme .kpru-view-choice { background:#1e293b; border-color:#334155; color:#f8fafc; }
body.dark-theme .kpru-view-choice:hover { background:#252f43; border-color:#8b5cf6; }
body.dark-theme .kpru-view-top-controls .view-mode-toggle { background:rgba(15,23,42,.90); border-color:#334155; color:#e2e8f0; }

/* ----------------------------------------------------------------
   01 — FOCUS READER
   Quiet, editorial, light academic reader. TOC moves to the left.
   ---------------------------------------------------------------- */
body.kpru-view-focus {
  background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
  color:#172033;
}
body.kpru-view-focus .container.flex-grow-1 { max-width:1380px; }
body.kpru-view-focus .reader-container {
  max-width:1280px; padding:0 0 42px; overflow:hidden;
  border:1px solid #e6eaf0; border-top:0; border-bottom:0;
  border-radius:28px; box-shadow:0 16px 44px rgba(15,23,42,.08); background:#fff;
}
body.kpru-view-focus .cover-main-container { margin:0 0 28px; }
body.kpru-view-focus .cover-logo-link { top:22px; left:24px; }
body.kpru-view-focus .content-area { max-width:1020px; margin:0 auto; padding:0 42px; }
body.kpru-view-focus .content-area > .text-center[style] { margin-top:0 !important; }
body.kpru-view-focus .guide-title-text { font-size:clamp(2rem,4vw,3.25rem)!important; color:#111827!important; }
body.kpru-view-focus .guide-desc-text.ql-editor { margin-top:0; margin-bottom:6px; }
body.kpru-view-focus .dark-mode-toggle { background:rgba(255,255,255,.94); color:#111827; border-color:rgba(15,23,42,.12); box-shadow:0 6px 18px rgba(15,23,42,.10); }
body.kpru-view-focus .section-divider { background:#f5f3ff; color:#5b21b6; box-shadow:none; border:1px solid #e9d5ff; border-left:5px solid #7c3aed; border-radius:14px!important; padding:14px 18px; }
body.kpru-view-focus .section-divider i { font-size:1.25rem; }
body.kpru-view-focus .section-description { color:#5b21b6!important; padding-left:22px; }
body.kpru-view-focus .step-block { border:1px solid #e8edf3; border-radius:20px; padding:6px 22px 24px; background:#fff; box-shadow:0 5px 18px rgba(15,23,42,.04); }
body.kpru-view-focus .step-container-item { margin-bottom:18px!important; }
body.kpru-view-focus .step-header { margin:0 -8px; padding:18px 8px; }
body.kpru-view-focus .step-header:hover { background:#f8fafc; }
body.kpru-view-focus .step-number { width:44px;height:44px;border-radius:50%;background:#111827;box-shadow:none; }
body.kpru-view-focus .img-wrapper, body.kpru-view-focus .extra-img-wrapper { border:1px solid #e5e7eb; outline:0; border-radius:16px; box-shadow:0 7px 20px rgba(15,23,42,.07); }
body.kpru-view-focus .toc-sidebar { left:0; right:auto; border-radius:0 20px 20px 0; box-shadow:8px 0 24px rgba(15,23,42,.09); }
body.kpru-view-focus .toc-sidebar.collapsed { transform:translateX(-230px); }
body.kpru-view-focus .toc-toggle-btn { left:auto; right:-45px; border-radius:0 10px 10px 0; background:#111827; box-shadow:4px 0 10px rgba(15,23,42,.14); }
body.kpru-view-focus .toc-active { background:#111827!important; }
body.kpru-view-focus .btn-story-trigger { background:#111827; box-shadow:0 6px 16px rgba(15,23,42,.13); }
body.kpru-view-focus.dark-theme { background:#0b1120; }
body.kpru-view-focus.dark-theme .reader-container, body.kpru-view-focus.dark-theme .step-block { background:#111827; border-color:#243044; }
body.kpru-view-focus.dark-theme .guide-title-text { color:#f8fafc!important; }
body.kpru-view-focus.dark-theme .section-divider { background:#1f1b3a; border-color:#382f66; color:#c4b5fd; }
body.kpru-view-focus.dark-theme .step-number { background:#e2e8f0;color:#0f172a; }

/* ----------------------------------------------------------------
   02 — GLASS STUDIO
   Premium glass look without large backdrop-filter surfaces.
   ---------------------------------------------------------------- */
body.kpru-view-glass {
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(56,189,248,.18), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(168,85,247,.18), transparent 30rem),
    linear-gradient(145deg,#09111f 0%,#172554 48%,#3b0764 100%);
}
body.kpru-view-glass .container.flex-grow-1 { max-width:1420px; }
body.kpru-view-glass .reader-container {
  max-width:1320px; padding:18px 18px 46px; border:1px solid rgba(255,255,255,.25);
  border-radius:28px; background:rgba(248,250,252,.96);
  box-shadow:0 24px 58px rgba(2,6,23,.32);
}
body.kpru-view-glass .cover-main-container { margin:-18px -18px 24px; }
body.kpru-view-glass .cover-full-wrapper { border-radius:26px 26px 18px 18px; }
body.kpru-view-glass .content-area { padding:0 34px; }
body.kpru-view-glass .content-area > .text-center[style] { margin-top:-34px!important; position:relative; z-index:4; }
body.kpru-view-glass .guide-title-text { font-size:clamp(2rem,4.5vw,3.4rem)!important; color:#111827!important; text-shadow:0 1px rgba(255,255,255,.8); }
body.kpru-view-glass .content-area > .text-center > .badge.bg-primary { background:linear-gradient(135deg,#0284c7,#7c3aed)!important; border:1px solid rgba(255,255,255,.55); }
body.kpru-view-glass .guide-desc-text.ql-editor { margin-top:-8px; }
body.kpru-view-glass .section-divider { background:linear-gradient(135deg,#2563eb,#7c3aed); border:1px solid rgba(255,255,255,.35); box-shadow:0 8px 20px rgba(79,70,229,.16); }
body.kpru-view-glass .step-block { background:#f8fafc; border:1px solid rgba(148,163,184,.28); border-radius:22px; padding:7px 22px 24px; box-shadow:0 6px 20px rgba(15,23,42,.06); }
body.kpru-view-glass .step-container-item { margin-bottom:18px!important; }
body.kpru-view-glass .step-header { margin:0 -8px; }
body.kpru-view-glass .step-header:hover { background:#fff; }
body.kpru-view-glass .step-number { border-radius:14px; background:linear-gradient(135deg,#0ea5e9,#7c3aed); box-shadow:0 7px 18px rgba(79,70,229,.18); }
body.kpru-view-glass .img-wrapper, body.kpru-view-glass .extra-img-wrapper { border:1px solid rgba(255,255,255,.85); outline:0; border-radius:18px; box-shadow:0 9px 24px rgba(15,23,42,.12); }
body.kpru-view-glass .toc-sidebar { background:rgba(255,255,255,.97); border:1px solid rgba(255,255,255,.55); box-shadow:-10px 0 30px rgba(2,6,23,.20); }
body.kpru-view-glass .toc-toggle-btn { background:linear-gradient(135deg,#0284c7,#7c3aed); }
body.kpru-view-glass .dark-mode-toggle { background:rgba(15,23,42,.82); color:#fff; border-color:rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(2,6,23,.22); }
body.kpru-view-glass .view-mode-toggle { background:rgba(15,23,42,.82); color:#fff; border-color:rgba(255,255,255,.18); }
body.kpru-view-glass .btn-story-trigger { background:linear-gradient(135deg,#0284c7,#7c3aed); box-shadow:0 8px 18px rgba(76,29,149,.20); }
body.kpru-view-glass.dark-theme .reader-container { background:#0f172a; border-color:rgba(148,163,184,.18); }
body.kpru-view-glass.dark-theme .step-block { background:#1e293b; border-color:#334155; }
body.kpru-view-glass.dark-theme .guide-title-text { color:#f8fafc!important; text-shadow:none; }
body.kpru-view-glass.dark-theme .step-header:hover { background:#263449; }
body.kpru-view-glass.dark-theme .toc-sidebar { background:#0f172a; }

/* ----------------------------------------------------------------
   03 — JOURNEY TIMELINE
   Editorial process timeline using explicit is-step/is-section classes.
   ---------------------------------------------------------------- */
body.kpru-view-journey { background:#f4f1ea; color:#292524; }
body.kpru-view-journey .container.flex-grow-1 { max-width:1400px; }
body.kpru-view-journey .reader-container { max-width:1320px; padding:0 0 48px; overflow:hidden; border:0; border-radius:26px; background:#fffdf8; box-shadow:0 16px 44px rgba(68,64,60,.11); }
body.kpru-view-journey .cover-main-container { margin:0 0 28px; }
body.kpru-view-journey .content-area { max-width:1080px; margin:0 auto; padding:0 44px; }
body.kpru-view-journey .content-area > .text-center[style] { margin-top:-30px!important; position:relative; z-index:2; background:#fffdf8; border-radius:20px 20px 0 0; padding:18px 26px 0; }
body.kpru-view-journey .guide-title-text { font-size:clamp(2rem,4vw,3.15rem)!important; color:#292524!important; }
body.kpru-view-journey .guide-desc-text.ql-editor { margin-top:0; }
body.kpru-view-journey #content-wrapper { position:relative; padding-left:66px; }
body.kpru-view-journey #content-wrapper::before { content:""; position:absolute; top:8px; bottom:20px; left:27px; width:2px; background:linear-gradient(#7c3aed,#0ea5e9,#f59e0b); opacity:.28; }
body.kpru-view-journey .step-container-item { margin-bottom:22px!important; }
body.kpru-view-journey .step-container-item.is-step::before { content:""; position:absolute; left:-46px; top:30px; width:12px; height:12px; border-radius:50%; background:#fffdf8; border:3px solid #7c3aed; box-shadow:0 0 0 5px #fffdf8; }
body.kpru-view-journey .step-block { border:1px solid #e7e2d8; border-radius:20px; padding:7px 22px 24px; background:#fff; box-shadow:0 5px 17px rgba(68,64,60,.06); }
body.kpru-view-journey .step-header { margin:0 -8px; }
body.kpru-view-journey .step-header:hover { background:#faf8f3; }
body.kpru-view-journey .step-number { width:46px;height:46px;border-radius:16px;background:#292524;box-shadow:none; }
body.kpru-view-journey .section-divider { margin-left:-66px; background:#292524; color:#fff; box-shadow:none; border-radius:16px!important; padding:14px 20px; }
body.kpru-view-journey .section-description { margin-left:-20px; color:#6d28d9!important; }
body.kpru-view-journey .img-wrapper, body.kpru-view-journey .extra-img-wrapper { border:1px solid #e7e2d8; outline:0; border-radius:16px; box-shadow:0 7px 20px rgba(68,64,60,.08); }
body.kpru-view-journey .toc-sidebar { top:auto; bottom:24px; width:310px; border-radius:20px 0 0 20px; box-shadow:-8px 0 26px rgba(68,64,60,.12); }
body.kpru-view-journey .toc-toggle-btn { top:18px; background:#292524; }
body.kpru-view-journey .toc-active { background:#292524!important; }
body.kpru-view-journey .dark-mode-toggle { background:#fffdf8;color:#292524;border-color:#ddd6cb;box-shadow:0 6px 16px rgba(68,64,60,.10); }
body.kpru-view-journey .btn-story-trigger { background:#292524; box-shadow:0 7px 18px rgba(68,64,60,.14); }
body.kpru-view-journey.dark-theme { background:#151312; }
body.kpru-view-journey.dark-theme .reader-container, body.kpru-view-journey.dark-theme .content-area > .text-center[style] { background:#1c1917; }
body.kpru-view-journey.dark-theme .step-block { background:#231f1c; border-color:#3f3a35; }
body.kpru-view-journey.dark-theme .guide-title-text { color:#fafaf9!important; }
body.kpru-view-journey.dark-theme #content-wrapper::before { opacity:.45; }
body.kpru-view-journey.dark-theme .step-container-item.is-step::before { background:#1c1917; box-shadow:0 0 0 5px #1c1917; }
body.kpru-view-journey.dark-theme .section-divider { background:#44403c; }

@media (max-width: 991.98px) {
  .kpru-view-top-controls { top:18px; right:18px; }
  body.kpru-view-focus .content-area,
  body.kpru-view-glass .content-area,
  body.kpru-view-journey .content-area { padding-left:20px; padding-right:20px; }
  body.kpru-view-journey #content-wrapper { padding-left:0; }
  body.kpru-view-journey #content-wrapper::before,
  body.kpru-view-journey .step-container-item.is-step::before { display:none!important; }
  body.kpru-view-journey .section-divider { margin-left:0; }
  body.kpru-view-glass .content-area > .text-center[style],
  body.kpru-view-journey .content-area > .text-center[style] { margin-top:-18px!important; }
}

@media (max-width: 575.98px) {
  body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) { padding-top:14px!important; }
  .kpru-view-top-controls { top:12px; right:12px; gap:6px; }
  .kpru-view-top-controls .dark-mode-toggle,
  .kpru-view-top-controls .view-mode-toggle { width:40px; height:40px; font-size:1rem; }
  .kpru-view-picker { top:48px; right:0; }
  .kpru-view-picker-grid { grid-template-columns:1fr; }
  .kpru-view-choice { display:grid; grid-template-columns:88px 1fr; column-gap:8px; align-items:center; }
  .kpru-view-choice-preview { height:58px; margin:0; grid-row:1 / span 2; }
  body.kpru-view-focus .reader-container,
  body.kpru-view-glass .reader-container,
  body.kpru-view-journey .reader-container { border-radius:18px; }
  body.kpru-view-focus .content-area,
  body.kpru-view-glass .content-area,
  body.kpru-view-journey .content-area { padding-left:14px; padding-right:14px; }
  body.kpru-view-focus .step-block,
  body.kpru-view-glass .step-block,
  body.kpru-view-journey .step-block { padding-left:12px; padding-right:12px; }
  body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .guide-title-text { font-size:1.8rem!important; }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) *,
  body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) *::before,
  body:is(.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) *::after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}


/* =================================================================
   VIEW ALL V2 — SEMANTIC COLOR SYSTEM
   One set of semantic tokens is shared by all four presentations.
   Layout DNA may differ, but readable text/surface contrast stays consistent.
   ================================================================= */
html { color-scheme: light; scrollbar-gutter: stable; }
html[data-kpru-theme="dark"] { color-scheme: dark; }

body {
  --kpru-page-bg:#6890bb;
  --kpru-surface:#ffffff;
  --kpru-surface-2:#f8fafc;
  --kpru-surface-3:#eef2f7;
  --kpru-text:#0f172a;
  --kpru-text-soft:#334155;
  --kpru-muted:#64748b;
  --kpru-border:#dbe3ef;
  --kpru-border-strong:#cbd5e1;
  --kpru-accent:#5b21b6;
  --kpru-accent-2:#2563eb;
  --kpru-accent-soft:#ede9fe;
  --kpru-accent-text:#6d28d9;
  --kpru-on-accent:#ffffff;
  --kpru-hover:#f1f5f9;
  --kpru-shadow:rgba(15,23,42,.10);
  --kpru-control-bg:rgba(255,255,255,.96);
  --kpru-control-text:#334155;
  --kpru-focus-ring:rgba(124,58,237,.36);
  background:var(--kpru-page-bg);
  color:var(--kpru-text);
  text-rendering:optimizeLegibility;
}

html[data-kpru-theme="dark"] body,
body.dark-theme {
  --kpru-page-bg:#0f172a;
  --kpru-surface:#111827;
  --kpru-surface-2:#172033;
  --kpru-surface-3:#1e293b;
  --kpru-text:#f8fafc;
  --kpru-text-soft:#cbd5e1;
  --kpru-muted:#94a3b8;
  --kpru-border:#334155;
  --kpru-border-strong:#475569;
  --kpru-accent:#a78bfa;
  --kpru-accent-2:#60a5fa;
  --kpru-accent-soft:#2e2350;
  --kpru-accent-text:#ddd6fe;
  --kpru-on-accent:#0f172a;
  --kpru-hover:#1e293b;
  --kpru-shadow:rgba(0,0,0,.32);
  --kpru-control-bg:rgba(15,23,42,.96);
  --kpru-control-text:#e2e8f0;
  --kpru-focus-ring:rgba(167,139,250,.48);
}

/* Variant-specific page/surface identity. */
body.kpru-view-classic { --kpru-page-bg:#6890bb; }
html[data-kpru-theme="dark"] body.kpru-view-classic,
body.kpru-view-classic.dark-theme { --kpru-page-bg:#0f172a; }

body.kpru-view-focus { --kpru-page-bg:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%); }
html[data-kpru-theme="dark"] body.kpru-view-focus,
body.kpru-view-focus.dark-theme { --kpru-page-bg:#0b1120; --kpru-surface:#111827; --kpru-surface-2:#172033; }

body.kpru-view-glass {
  --kpru-page-bg:radial-gradient(circle at 18% 8%,rgba(56,189,248,.16),transparent 28rem),radial-gradient(circle at 82% 18%,rgba(168,85,247,.16),transparent 30rem),linear-gradient(145deg,#09111f 0%,#172554 48%,#3b0764 100%);
  --kpru-surface:rgba(248,250,252,.97);
  --kpru-surface-2:#f8fafc;
}
html[data-kpru-theme="dark"] body.kpru-view-glass,
body.kpru-view-glass.dark-theme {
  --kpru-page-bg:radial-gradient(circle at 18% 8%,rgba(14,165,233,.10),transparent 28rem),radial-gradient(circle at 82% 18%,rgba(124,58,237,.12),transparent 30rem),linear-gradient(145deg,#050a13 0%,#0f172a 52%,#1e1036 100%);
  --kpru-surface:#0f172a;
  --kpru-surface-2:#172033;
}

body.kpru-view-journey {
  --kpru-page-bg:#f4f1ea;
  --kpru-surface:#fffdf8;
  --kpru-surface-2:#ffffff;
  --kpru-surface-3:#faf8f3;
  --kpru-border:#e7e2d8;
  --kpru-hover:#faf8f3;
}
html[data-kpru-theme="dark"] body.kpru-view-journey,
body.kpru-view-journey.dark-theme {
  --kpru-page-bg:#151312;
  --kpru-surface:#1c1917;
  --kpru-surface-2:#231f1c;
  --kpru-surface-3:#292524;
  --kpru-border:#3f3a35;
  --kpru-hover:#2c2723;
  --kpru-text:#fafaf9;
  --kpru-text-soft:#d6d3d1;
  --kpru-muted:#a8a29e;
}

/* Semantic surfaces + typography. These overrides intentionally come last. */
body { background:var(--kpru-page-bg) !important; color:var(--kpru-text); }
.reader-container { background:var(--kpru-surface) !important; color:var(--kpru-text); border-color:var(--kpru-border); }
.step-block { background:var(--kpru-surface-2); color:var(--kpru-text); border-color:var(--kpru-border); }
.guide-title-text,
.step-title-text,
.instruction-text,
.ql-editor,
.ql-editor p,
.ql-editor li,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6,
body .text-dark { color:var(--kpru-text) !important; }
body .text-muted,
.guide-desc-text { color:var(--kpru-muted) !important; }
.section-description { color:var(--kpru-accent-text) !important; }
hr, .border-top { border-color:var(--kpru-border) !important; }
.step-header:hover { background:var(--kpru-hover) !important; }
.img-wrapper, .extra-img-wrapper { border-color:var(--kpru-border) !important; outline-color:var(--kpru-surface-3) !important; }
.toc-sidebar { background:var(--kpru-surface) !important; color:var(--kpru-text); border-color:var(--kpru-border) !important; }
.toc-header { border-bottom-color:var(--kpru-border) !important; }
.toc-item { color:var(--kpru-text-soft) !important; }
.toc-item:hover { background:var(--kpru-hover) !important; color:var(--kpru-accent-2) !important; }
.toc-item.toc-section { color:var(--kpru-accent-text) !important; border-color:var(--kpru-border) !important; }
.dropdown-menu,
.modal-content { background:var(--kpru-surface) !important; color:var(--kpru-text); border-color:var(--kpru-border) !important; }
.dropdown-item { color:var(--kpru-text-soft) !important; }
.dropdown-item:hover,
.dropdown-item:focus { background:var(--kpru-hover) !important; color:var(--kpru-text) !important; }
.modal-body { color:var(--kpru-text); }
.form-control,
.form-select,
.input-group-text { background:var(--kpru-surface-2); color:var(--kpru-text); border-color:var(--kpru-border); }
.form-control:focus,
.form-select:focus { border-color:var(--kpru-accent); box-shadow:0 0 0 .2rem var(--kpru-focus-ring); }

/* Bootstrap light badges need explicit dark-mode surfaces to avoid white glare. */
html[data-kpru-theme="dark"] body .badge.bg-light,
body.dark-theme .badge.bg-light { background:var(--kpru-surface-2) !important; }
html[data-kpru-theme="dark"] body .badge.bg-light.text-primary,
body.dark-theme .badge.bg-light.text-primary { color:#93c5fd !important; }
html[data-kpru-theme="dark"] body .badge.bg-light.text-secondary,
body.dark-theme .badge.bg-light.text-secondary { color:#cbd5e1 !important; }
html[data-kpru-theme="dark"] body .badge.bg-light.text-success,
body.dark-theme .badge.bg-light.text-success { color:#86efac !important; }
html[data-kpru-theme="dark"] body .badge.bg-light.text-danger,
body.dark-theme .badge.bg-light.text-danger { color:#fca5a5 !important; }

/* View picker uses the same semantic palette in every presentation. */
.kpru-view-top-controls .view-mode-toggle,
.kpru-view-top-controls .dark-mode-toggle {
  background:var(--kpru-control-bg) !important;
  color:var(--kpru-control-text) !important;
  border-color:var(--kpru-border) !important;
  box-shadow:0 6px 18px var(--kpru-shadow);
}
.kpru-view-top-controls .view-mode-toggle:hover,
.kpru-view-top-controls .dark-mode-toggle:hover { color:var(--kpru-accent) !important; background:var(--kpru-surface) !important; }
.kpru-view-picker { background:var(--kpru-surface) !important; color:var(--kpru-text) !important; border-color:var(--kpru-border) !important; contain:layout paint; }
.kpru-view-picker-head small,
.kpru-view-choice-note { color:var(--kpru-muted) !important; }
.kpru-view-current-row { background:var(--kpru-surface-2) !important; border-color:var(--kpru-border) !important; color:var(--kpru-muted) !important; }
.kpru-view-current-row strong { color:var(--kpru-accent-text) !important; }
.kpru-view-choice { background:var(--kpru-surface-2) !important; color:var(--kpru-text-soft) !important; border-color:var(--kpru-border) !important; }
.kpru-view-choice:hover { background:var(--kpru-hover) !important; border-color:var(--kpru-accent) !important; }
.kpru-view-choice.is-active { border-color:var(--kpru-accent) !important; box-shadow:0 0 0 2px var(--kpru-focus-ring) !important; }
.kpru-view-choice:focus-visible,
.kpru-view-top-controls button:focus-visible { outline:3px solid var(--kpru-focus-ring) !important; outline-offset:2px; }

/* Preserve each variant's structural identity while using semantic surfaces. */
body.kpru-view-focus .reader-container,
body.kpru-view-focus .step-block { background:var(--kpru-surface) !important; border-color:var(--kpru-border) !important; }
body.kpru-view-focus .section-divider { background:var(--kpru-accent-soft) !important; color:var(--kpru-accent-text) !important; border-color:var(--kpru-border) !important; }
body.kpru-view-focus .step-number { background:var(--kpru-text) !important; color:var(--kpru-surface) !important; }

body.kpru-view-glass .reader-container { background:var(--kpru-surface) !important; border-color:color-mix(in srgb, var(--kpru-border), transparent 15%) !important; }
body.kpru-view-glass .step-block { background:var(--kpru-surface-2) !important; border-color:var(--kpru-border) !important; }
body.kpru-view-glass .guide-title-text { color:var(--kpru-text) !important; text-shadow:none !important; }
body.kpru-view-glass .step-header:hover { background:var(--kpru-hover) !important; }

body.kpru-view-journey .reader-container,
body.kpru-view-journey .content-area > .text-center[style] { background:var(--kpru-surface) !important; }
body.kpru-view-journey .step-block { background:var(--kpru-surface-2) !important; border-color:var(--kpru-border) !important; }
body.kpru-view-journey .guide-title-text { color:var(--kpru-text) !important; }
body.kpru-view-journey .step-container-item.is-step::before { background:var(--kpru-surface) !important; box-shadow:0 0 0 5px var(--kpru-surface) !important; }
body.kpru-view-journey .section-description { color:var(--kpru-accent-text) !important; }

/* Dark mode: remove the legacy yellow text override from the Master renderer. */
html[data-kpru-theme="dark"] body .guide-title-text,
html[data-kpru-theme="dark"] body .step-title-text,
html[data-kpru-theme="dark"] body .text-dark,
body.dark-theme .guide-title-text,
body.dark-theme .step-title-text,
body.dark-theme .text-dark { color:var(--kpru-text) !important; }
html[data-kpru-theme="dark"] body .section-description,
body.dark-theme .section-description { color:var(--kpru-accent-text) !important; }

/* Motion discipline for all four modes, including Master. */
.kpru-view-top-controls button,
.kpru-view-choice,
.kpru-view-picker { touch-action:manipulation; }
body.kpru-view-switching *,
body.kpru-view-switching *::before,
body.kpru-view-switching *::after { transition:none !important; animation:none !important; }

@media (max-width:575.98px) {
  .kpru-view-picker { width:min(420px, calc(100vw - 24px)); }
  .kpru-view-current-row { margin-bottom:8px; }
}

/* Bootstrap utility harmonization for V2 dark surfaces. */
html[data-kpru-theme="dark"] body .modal-body.bg-light,
body.dark-theme .modal-body.bg-light { background:var(--kpru-surface-2) !important; }
html[data-kpru-theme="dark"] body #kpruViewPickerClose.btn-light,
body.dark-theme #kpruViewPickerClose.btn-light { background:var(--kpru-surface-2) !important; color:var(--kpru-text) !important; border-color:var(--kpru-border) !important; }
html[data-kpru-theme="dark"] body .input-group-text { background:var(--kpru-surface-3) !important; color:var(--kpru-text-soft) !important; }

/* =================================================================
   VIEW ALL V2 v2.0.1 — STEP CONTENT POLISH
   - Step label uses Editor-configured guide.step_prefix (ขั้นตอนที่ / รายการที่ / custom)
   - Step body gains a wider rounded neutral panel aligned with header hover bounds
   - Focus + Glass content width increased to max 1150px
   - Focus gets a lightweight cover clarity sweep (transform-only)
   - Focus + Glass guide title matches View Master size
   - Glass dark mode step header gets a visible violet outline
   ================================================================= */

/* Editor-driven step prefix becomes a readable label instead of a number-only square. */
body .step-number.step-prefix-label {
  width:auto !important;
  min-width:96px;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  font-size:.90rem;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  flex:0 0 auto;
  gap:.38em; /* Prefix/number spacing: "กิจกรรมที่ 1" instead of "กิจกรรมที่1" in flex layout. */
}
body.kpru-view-focus .step-number.step-prefix-label,
body.kpru-view-glass .step-number.step-prefix-label {
  min-width:104px;
  border-radius:999px !important;
}
body.kpru-view-journey .step-number.step-prefix-label {
  min-width:104px;
  border-radius:14px !important;
}
.toc-step-separator { opacity:.5; padding:0 .12rem; }

/* Step content panel: same horizontal footprint as each view's header hover area. */
.step-body {
  box-sizing:border-box;
  background:var(--kpru-surface-3);
  border:1px solid var(--kpru-border);
  border-radius:16px;
  padding:18px 16px 20px;
  margin-top:4px;
  margin-bottom:12px;
}
body.kpru-view-classic .step-body { margin-left:-15px; margin-right:-15px; }
body.kpru-view-focus .step-body,
body.kpru-view-glass .step-body,
body.kpru-view-journey .step-body { margin-left:-8px; margin-right:-8px; }
.step-body > .instruction-text.ql-editor {
  min-height:auto !important;
  margin:10px 0 0 !important;
  padding:8px 4px 2px !important;
  background:transparent !important;
  overflow:visible;
}
.step-body > .img-wrapper-container:first-child { margin-top:0; }

/* Keep the neutral panel readable in both themes without introducing extra blur/repaint. */
html[data-kpru-theme="dark"] body .step-body,
body.dark-theme .step-body {
  background:var(--kpru-surface-3);
  border-color:var(--kpru-border);
}

/* Focus + Glass: requested wider reading area, capped at 1150px. */
body.kpru-view-focus .content-area,
body.kpru-view-glass .content-area {
  width:100%;
  max-width:1150px;
  margin-left:auto;
  margin-right:auto;
}

/* Guide title: Focus + Glass use the same desktop scale as View Master. */
body.kpru-view-focus .guide-title-text,
body.kpru-view-glass .guide-title-text {
  font-size:1.9rem !important;
  line-height:1.4;
}

/* Focus cover: lightweight clarity sweep inspired by View Master.
   Transform + opacity only; no image filter, blur, or layout-changing scale. */
body.kpru-view-focus .cover-full-wrapper {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
body.kpru-view-focus .cover-full-wrapper::after {
  display:block !important;
  content:"";
  position:absolute;
  top:-12%;
  bottom:-12%;
  left:-42%;
  width:30%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,.58) 50%,rgba(255,255,255,.10) 80%,rgba(255,255,255,0) 100%);
  transform:translate3d(-170%,0,0) skewX(-17deg);
  opacity:0;
  pointer-events:none;
  z-index:2;
  transition:transform 760ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
  will-change:transform;
}
body.kpru-view-focus .cover-full-wrapper:hover::after {
  transform:translate3d(540%,0,0) skewX(-17deg);
  opacity:.72;
}

/* Glass Dark: step title frame must remain clearly visible against dark surfaces. */
html[data-kpru-theme="dark"] body.kpru-view-glass .step-header,
body.kpru-view-glass.dark-theme .step-header {
  border:1px solid #7c3aed;
  border-radius:14px;
  background:rgba(91,33,182,.12);
}
html[data-kpru-theme="dark"] body.kpru-view-glass .step-header:hover,
body.kpru-view-glass.dark-theme .step-header:hover {
  border-color:#a78bfa;
  background:rgba(109,40,217,.18) !important;
}

@media (max-width:575.98px) {
  body .step-number.step-prefix-label {
    min-width:0;
    height:38px;
    padding:0 11px;
    font-size:.82rem;
  }
  .step-body {
    padding:14px 12px 16px;
    border-radius:14px;
  }
  body.kpru-view-classic .step-body { margin-left:-10px; margin-right:-10px; }
  body.kpru-view-focus .guide-title-text,
  body.kpru-view-glass .guide-title-text { font-size:1.8rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.kpru-view-focus .cover-full-wrapper::after { display:none !important; }
}

/* v2.0.3 — Journey now follows the same Editor-driven prefix contract as Master/Focus/Glass.
   Keep the Journey shape, but show the full label เช่น "ขั้นตอนที่ 1" / "กิจกรรมที่ 1". */
body.kpru-view-journey .step-number.step-prefix-label {
  width:auto !important;
  min-width:104px;
  height:46px;
  padding:0 14px;
  border-radius:14px !important;
  font-size:.90rem;
}
body.kpru-view-journey .step-body {
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0 0 12px;
}
body.kpru-view-journey .step-body > .instruction-text.ql-editor {
  margin-top:-25px !important;
  margin-bottom:-25px !important;
  padding:12px 15px !important;
}

/* =================================================================
   VIEW ALL V2 v2.0.2 — UNIFIED MASTER GEOMETRY + COVER MOTION CONTRACT
   User-approved cross-view invariants:
   1) Master / Focus / Glass / Journey use the same outer reading width as View Master.
   2) All four covers use the same Master-inspired fade + clarity + sweep motion contract.
   Presentation identity remains in palette, cards, TOC and timeline styling only.
   ================================================================= */

/* One responsive shell authority for all four views: match Bootstrap's View Master container. */
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .container.flex-grow-1 {
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:576px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .container.flex-grow-1 { max-width:540px; }
}
@media (min-width:768px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .container.flex-grow-1 { max-width:720px; }
}
@media (min-width:992px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .container.flex-grow-1 { max-width:960px; }
}
@media (min-width:1200px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .container.flex-grow-1 { max-width:1140px; }
}
@media (min-width:1400px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .container.flex-grow-1 { max-width:1320px; }
}

/* Reader geometry is now a shared contract derived from View Master. */
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .reader-container {
  --kpru-reader-pad:15px;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:var(--kpru-reader-pad) !important;
}
@media (min-width:576px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .reader-container { --kpru-reader-pad:20px; }
}
@media (min-width:992px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .reader-container { --kpru-reader-pad:30px; }
}

/* Cover footprint is identical to Master: flush to reader edges, never a narrower card. */
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-main-container {
  margin:calc(0px - var(--kpru-reader-pad)) calc(0px - var(--kpru-reader-pad)) 30px !important;
}

/* Keep the main content footprint consistent with Master; theme DNA can style inside it. */
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .content-area {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:30px !important;
  padding-right:30px !important;
}

/* Shared Master-inspired cover behavior. Sweep color differs per presentation,
   but geometry, timing and image clarity behavior are identical. */
body.kpru-view-classic { --kpru-cover-sweep:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 22%,rgba(255,255,255,.52) 50%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0) 100%); }
body.kpru-view-focus { --kpru-cover-sweep:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(219,234,254,.12) 22%,rgba(255,255,255,.62) 50%,rgba(237,233,254,.16) 78%,rgba(255,255,255,0) 100%); }
body.kpru-view-glass { --kpru-cover-sweep:linear-gradient(100deg,rgba(14,165,233,0) 0%,rgba(14,165,233,.16) 24%,rgba(255,255,255,.58) 50%,rgba(124,58,237,.18) 76%,rgba(124,58,237,0) 100%); }
body.kpru-view-journey { --kpru-cover-sweep:linear-gradient(100deg,rgba(245,158,11,0) 0%,rgba(245,158,11,.12) 24%,rgba(255,255,255,.58) 50%,rgba(124,58,237,.12) 76%,rgba(124,58,237,0) 100%); }

body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%) !important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%) !important;
  transform:translateZ(0);
  transition:transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 500ms cubic-bezier(.2,.8,.2,1) !important;
  background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);
  background-size:200% 100%;
  animation:skeleton-shine 1.5s linear infinite;
}
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper.cover-loaded {
  animation:none;
  background:transparent;
}
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper:hover {
  transform:translate3d(0,-8px,0) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.16) !important;
}

body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper img,
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper .cover-zoomed-bg {
  width:100%;
  display:block;
  opacity:0;
  transform:translateZ(0) scale(1);
  filter:brightness(1) saturate(1);
  transition:opacity 220ms ease, transform 620ms cubic-bezier(.2,.8,.2,1), filter 620ms ease !important;
}
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper img {
  height:auto;
  max-height:none !important;
  object-fit:cover;
  object-position:50% 0%;
}
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper img.is-loaded,
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper .cover-zoomed-bg.is-loaded { opacity:1; }
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper:hover img,
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper:hover .cover-zoomed-bg {
  transform:translateZ(0) scale(1.025) !important;
  filter:brightness(1.035) saturate(1.07) !important;
}

/* GPU-friendly version of View Master's diagonal highlight sweep: transform, not left-animation. */
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper::after {
  display:block !important;
  content:"";
  position:absolute;
  top:-14%;
  bottom:-14%;
  left:0;
  width:34%;
  height:auto;
  background:var(--kpru-cover-sweep);
  transform:translate3d(-230%,0,0) skewX(-22deg);
  opacity:0;
  pointer-events:none;
  z-index:2;
  transition:transform 760ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease !important;
}
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper:hover::after {
  left:0;
  transform:translate3d(430%,0,0) skewX(-22deg);
  opacity:.78;
}

/* Saved cover crop remains authoritative: do not rewrite its background-position/size. */
body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper .cover-zoomed-bg {
  transform-origin:center center;
}

/* Same mobile geometry for every presentation. */
@media (max-width:575.98px) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .content-area {
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper:hover {
    transform:none !important;
    box-shadow:0 8px 22px rgba(15,23,42,.10) !important;
  }
}

/* Accessibility + battery: retain top-aligned cover, disable decorative motion only. */
@media (prefers-reduced-motion:reduce) {
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper,
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper img,
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper .cover-zoomed-bg {
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
  body:is(.kpru-view-classic,.kpru-view-focus,.kpru-view-glass,.kpru-view-journey) .cover-full-wrapper::after { display:none !important; }
}