.ifm-root {
  --ifm-paper: #f4efe3;
  --ifm-ink: #dceaf0;
  --ifm-gold: #e1c18a;
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  background: #0e242d;
  color: var(--ifm-ink);
  font-family: var(--type-sans, "Microsoft YaHei", "PingFang SC", sans-serif);
  overscroll-behavior: contain;
  isolation: isolate;
}
.ifm-root[hidden], .ifm-root [hidden] { display: none !important; }
.ifm-root *, .ifm-root *::before, .ifm-root *::after { box-sizing: border-box; }
.ifm-root button { font: inherit; }
.ifm-root button:focus-visible, .ifm-root video:focus-visible { outline: 2px solid var(--ifm-gold); outline-offset: 3px; }
.ifm-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
  background: #122d37;
  border-bottom: 1px solid #ffffff15;
}
.ifm-heading { min-width: 0; text-align: center; }
.ifm-overline { color: #d8c49e; letter-spacing: .16em; font-size: 10px; }
.ifm-heading h2 { color: inherit; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifm-button {
  border: 1px solid #d7e1df5c;
  border-radius: 4px;
  background: #e6eee807;
  color: inherit;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.ifm-button:hover { background: #edf4f014; border-color: #e5cfaa; }
.ifm-button:active { background: #edf4f024; }
.ifm-button:disabled { opacity: .4; cursor: default; }
.ifm-stage { position: relative; min-height: 0; overflow: hidden; background: #091b22; }
.ifm-image-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-x pan-y pinch-zoom; }
.ifm-root .ifm-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; user-select: none; cursor: zoom-in; }
.ifm-image-wrap.is-zoomed { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
.ifm-root .ifm-image-wrap.is-zoomed .ifm-image { width: 180%; height: auto; max-width: none; max-height: none; min-height: 100%; object-fit: contain; object-position: top left; cursor: zoom-out; }
.ifm-video-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ifm-root .ifm-video { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #091b22; }
.ifm-image-error { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #102b36; }
.ifm-image-error p { margin: 0 20px 20px; font-size: 15px; }
.ifm-slide-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); border-radius: 50%; padding: 0; width: 44px; height: 44px; font-family: Arial, sans-serif; font-size: 21px; background: #0e242dab; }
.ifm-previous { left: max(15px, env(safe-area-inset-left)); }
.ifm-next { right: max(15px, env(safe-area-inset-right)); }
.ifm-bottom { padding: 14px max(23px,env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(23px, env(safe-area-inset-left)); background: #122d37; border-top: 1px solid #ffffff15; }
.ifm-caption-row { display: flex; gap: 20px; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.ifm-caption { font-size: 13px; line-height: 1.7; margin: 0; max-width: 900px; }
.ifm-counter { flex-shrink: 0; font-size: 11px; color: #cbb891; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.ifm-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ifm-button[aria-pressed=true] { border-color: var(--ifm-gold); background: #e1c18a1c; color: #f6dfb3; }
.ifm-orientation-hint { margin-left: auto; color: #aec1c7; font-size: 11px; line-height: 1.7; }
.ifm-status { min-height: 1.5em; color: #b4c5ca; margin: 10px 0 0; font-size: 11px; line-height: 1.6; }
.ifm-root::backdrop { background: #0e242d; }
@media (max-width: 650px) {
  .ifm-toolbar { padding-top: max(9px, env(safe-area-inset-top)); padding-bottom: 9px; padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); gap: 10px; }
  .ifm-heading h2 { font-size: 13px; }
  .ifm-overline { font-size: 9px; }
  .ifm-button { padding: 10px 12px; font-size: 12px; }
  .ifm-close { gap: 5px; }
  .ifm-bottom { padding-left: max(15px,env(safe-area-inset-left)); padding-right: max(15px,env(safe-area-inset-right)); padding-top: 12px; }
  .ifm-caption { font-size: 12px; }
  .ifm-orientation-hint { width: 100%; margin-left: 0; font-size: 10px; }
  .ifm-actions { gap: 8px; }
  .ifm-status { font-size: 10px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .ifm-toolbar { padding-top: max(4px,env(safe-area-inset-top)); padding-bottom: 4px; gap: 10px; }
  .ifm-overline { display: none; }
  .ifm-heading h2 { font-size: 12px; margin: 0; }
  .ifm-bottom { padding-top: 7px; padding-bottom: max(5px,env(safe-area-inset-bottom)); }
  .ifm-caption-row { margin-bottom: 5px; }
  .ifm-caption { font-size: 11px; line-height: 1.4; }
  .ifm-actions { gap: 7px; flex-wrap: nowrap; }
  .ifm-orientation-hint { display: none; }
  .ifm-status { font-size: 10px; line-height: 1.3; margin: 5px 0 0; min-height: 0; }
  .ifm-status:empty { display: none; }
  .ifm-button { padding-top: 7px; padding-bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ifm-root *, .ifm-root *::before, .ifm-root *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}