.mpv-viewer {
  --mpv-height: 780px;
  --mpv-mobile-height: 620px;
  --mpv-bg: #202124;
  --mpv-stage-bg: #2b2d31;
  --mpv-toolbar-bg: #111318;
  --mpv-toolbar-color: #fff;
  --mpv-button-bg: rgba(255,255,255,.08);
  --mpv-button-hover-bg: rgba(255,255,255,.18);
  --mpv-page-gap: 18px;
  --mpv-page-radius: 4px;
  --mpv-radius: 16px;
  --mpv-glass-blur: 18px;
  position: relative;
  width: 100%;
  height: var(--mpv-height);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: var(--mpv-toolbar-color);
  background: var(--mpv-bg);
  border-radius: var(--mpv-radius);
  box-sizing: border-box;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.mpv-viewer *, .mpv-viewer *::before, .mpv-viewer *::after { box-sizing: border-box; }
.mpv-viewer.mpv-glass { background: color-mix(in srgb, var(--mpv-bg) 72%, transparent); backdrop-filter: blur(var(--mpv-glass-blur)); -webkit-backdrop-filter: blur(var(--mpv-glass-blur)); }

.mpv-toolbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  color: var(--mpv-toolbar-color);
  background: var(--mpv-toolbar-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
}

.mpv-glass .mpv-toolbar { background: color-mix(in srgb, var(--mpv-toolbar-bg) 72%, transparent); backdrop-filter: blur(var(--mpv-glass-blur)); -webkit-backdrop-filter: blur(var(--mpv-glass-blur)); }
.mpv-toolbar-group { display: flex; align-items: center; min-width: 0; gap: 6px; }
.mpv-toolbar-left { justify-content: flex-start; }
.mpv-toolbar-center { justify-content: center; }
.mpv-toolbar-right { justify-content: flex-end; }
.mpv-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }

.mpv-button, .mpv-zoom-label {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: var(--mpv-button-bg);
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, opacity .18s ease;
  line-height: 1;
}
.mpv-button:hover, .mpv-button:focus-visible, .mpv-zoom-label:hover, .mpv-zoom-label:focus-visible { color: inherit; background: var(--mpv-button-hover-bg); outline: none; transform: translateY(-1px); }
.mpv-button:disabled { cursor: not-allowed; opacity: .35; transform: none; }
.mpv-button svg, .mpv-error svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mpv-zoom-label { width: auto; min-width: 58px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.mpv-separator { width: 1px; height: 24px; margin: 0 3px; background: rgba(255,255,255,.14); }
.mpv-page-control { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; background: var(--mpv-button-bg); border-radius: 9px; font-size: 12px; }
.mpv-page-input { width: 37px !important; min-width: 0 !important; height: 27px !important; margin: 0 !important; padding: 2px 4px !important; color: inherit !important; text-align: center; font: inherit !important; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 6px !important; box-shadow: none !important; -moz-appearance: textfield; }
.mpv-page-input::-webkit-outer-spin-button, .mpv-page-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.mpv-page-total { opacity: .72; white-space: nowrap; }

.mpv-stage { position: relative; min-height: 0; flex: 1 1 auto; background: var(--mpv-stage-bg); }
.mpv-pages { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; gap: var(--mpv-page-gap); padding: 18px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.mpv-pages:focus-visible { outline: 2px solid rgba(255,255,255,.38); outline-offset: -2px; }
.mpv-pages::-webkit-scrollbar { width: 10px; height: 10px; }
.mpv-pages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.mpv-pages::-webkit-scrollbar-track { background: transparent; }
.mpv-viewer[data-mpv-mode="single"] .mpv-pages { justify-content: flex-start; }

.mpv-page { position: relative; flex: 0 0 auto; display: flex; justify-content: center; width: 100%; min-height: 180px; scroll-margin: 18px; }
.mpv-page-shell { position: relative; overflow: hidden; max-width: 100%; background: #fff; border-radius: var(--mpv-page-radius); box-shadow: 0 8px 26px rgba(0,0,0,.28); transition: width .15s ease, height .15s ease; }
.mpv-page canvas { display: block; max-width: none; background: #fff; border-radius: inherit; }
.mpv-page-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #777; background: #f2f2f2; font-size: 12px; }
.mpv-page.is-rendered .mpv-page-placeholder { display: none; }
.mpv-page-number { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 3px 6px; color: #fff; background: rgba(0,0,0,.55); border-radius: 5px; font-size: 10px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.mpv-page:hover .mpv-page-number { opacity: 1; }

.mpv-loading, .mpv-error { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: rgba(255,255,255,.9); text-align: center; background: var(--mpv-stage-bg); }
.mpv-loading[hidden], .mpv-error[hidden] { display: none !important; }
.mpv-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.18); border-top-color: currentColor; border-radius: 50%; animation: mpv-spin .8s linear infinite; }
.mpv-loading-text { font-size: 13px; opacity: .85; }
.mpv-error svg { width: 34px; height: 34px; }
.mpv-error strong { font-size: 16px; }
.mpv-error-message { max-width: 560px; font-size: 13px; opacity: .78; }
.mpv-open-direct { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 4px; padding: 0 14px; color: #fff !important; text-decoration: none !important; background: rgba(255,255,255,.12); border-radius: 9px; }
.mpv-open-direct:hover { background: rgba(255,255,255,.2); }

.mpv-viewer.is-pseudo-fullscreen { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; border-radius: 0 !important; }
body.mpv-body-locked { overflow: hidden !important; }
.mpv-viewer:fullscreen, .mpv-viewer:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }

.mpv-editor-placeholder { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: #555; text-align: center; background: #f4f5f7; border: 1px dashed #bbb; border-radius: 14px; }
.mpv-editor-placeholder strong { font-size: 18px; }
.mpv-editor-placeholder span { font-size: 13px; }
.mpv-shortcode-error { padding: 14px 16px; color: #842029; background: #f8d7da; border: 1px solid #f5c2c7; border-radius: 8px; }
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@keyframes mpv-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
  .mpv-viewer { height: var(--mpv-mobile-height, var(--mpv-height)); }
  .mpv-toolbar { grid-template-columns: 1fr auto; gap: 8px; min-height: 52px; padding: 8px; }
  .mpv-toolbar-left { display: none; }
  .mpv-toolbar-center { justify-content: flex-start; min-width: 0; }
  .mpv-toolbar-right { justify-content: flex-end; }
  .mpv-button, .mpv-zoom-label { width: 34px; min-width: 34px; height: 34px; border-radius: 8px; }
  .mpv-zoom-label { display: none; }
  .mpv-separator, .mpv-rotate, .mpv-print { display: none; }
  .mpv-page-control { height: 34px; padding: 0 7px; }
  .mpv-page-input { width: 33px !important; }
  .mpv-pages { padding: 10px; gap: 10px; }
}

@media (max-width: 420px) {
  .mpv-toolbar-center { gap: 3px; }
  .mpv-toolbar-right { gap: 3px; }
  .mpv-button { width: 32px; min-width: 32px; }
  .mpv-fullscreen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mpv-button, .mpv-page-shell, .mpv-page-number { transition: none; }
  .mpv-spinner { animation-duration: 1.5s; }
}