.boki-svg-viewer__actions{
  display:flex;
  justify-content:flex-end;
  margin-block:8px 0;
}

.boki-svg-viewer__trigger,
.boki-svg-viewer__close{
  min-block-size:44px;
  min-inline-size:44px;
  border:1px solid var(--button-border, var(--border, #cbd5e1));
  border-radius:10px;
  background:var(--button-bg, var(--surface, #fff));
  color:var(--button-fg, var(--text, #0f172a));
  font-family:var(--font-ui, system-ui, sans-serif);
  font-size:.875rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:var(--ui-ja-label-tracking, .02em);
  cursor:pointer;
}

.boki-svg-viewer__trigger{
  padding:8px 14px;
}

.boki-svg-viewer__close{
  flex:0 0 auto;
  padding:8px 12px;
}

@media (hover:hover){
  .boki-svg-viewer__trigger:hover,
  .boki-svg-viewer__close:hover{
    border-color:var(--accent, #2563eb);
    background:var(--button-hover-bg, var(--surface-3, #eef4ff));
    color:var(--button-hover-fg, var(--text-strong, var(--text, #0f172a)));
  }
}

.boki-svg-viewer__trigger:focus-visible,
.boki-svg-viewer__close:focus-visible,
.boki-svg-viewer__viewport:focus-visible{
  outline:3px solid var(--focus, var(--accent, #2563eb));
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--focus-ring, transparent);
}

.boki-svg-viewer{
  box-sizing:border-box;
  inline-size:calc(100% - 16px);
  max-inline-size:1280px;
  max-block-size:calc(100vh - 16px);
  max-block-size:calc(100dvh - 16px);
  margin:auto;
  padding:0;
  overflow:hidden;
  border:1px solid var(--border-strong, var(--border, #cbd5e1));
  border-radius:14px;
  background:var(--surface, #fff);
  color:var(--text, #0f172a);
  box-shadow:0 24px 72px rgba(2, 6, 23, .28);
}

.boki-svg-viewer::backdrop{
  background:rgba(2, 6, 23, .72);
}

.boki-svg-viewer__panel{
  display:flex;
  min-block-size:0;
  max-block-size:calc(100vh - 18px);
  max-block-size:calc(100dvh - 18px);
  flex-direction:column;
}

.boki-svg-viewer__header{
  display:flex;
  flex:0 0 auto;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-block-end:1px solid var(--border, #cbd5e1);
  background:var(--surface, #fff);
}

.boki-svg-viewer__title{
  margin:0;
  color:var(--text, #0f172a);
  font-family:var(--font-body, sans-serif);
  font-size:clamp(1rem, 2vw, 1.25rem);
  line-height:1.5;
}

.boki-svg-viewer__hint{
  flex:0 0 auto;
  margin:0;
  padding:8px 14px;
  border-block-end:1px solid var(--border, #cbd5e1);
  background:var(--surface-2, var(--bg, #f8fafc));
  color:var(--helper-muted-strong, var(--muted, #475569));
  font-family:var(--font-ui, system-ui, sans-serif);
  font-size:.8125rem;
  line-height:1.5;
}

.boki-svg-viewer__viewport{
  min-block-size:0;
  flex:1 1 auto;
  overflow:auto;
  overscroll-behavior:contain;
  padding:16px;
  background:var(--surface-2, var(--bg, #f8fafc));
  touch-action:pan-x pan-y pinch-zoom;
}

.boki-svg-viewer__viewport > svg{
  display:block !important;
  inline-size:max(100%, var(--boki-svg-viewer-natural-width, 800px)) !important;
  max-inline-size:none !important;
  block-size:auto !important;
  margin:0 !important;
}

.boki-svg-viewer__placeholder{
  display:block;
}

@media (max-width:480px){
  .boki-svg-viewer__header{
    padding:10px 12px;
  }

  .boki-svg-viewer__viewport{
    padding:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .boki-svg-viewer,
  .boki-svg-viewer *,
  .boki-svg-viewer__trigger{
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}

@media (forced-colors:active){
  .boki-svg-viewer{
    border:2px solid CanvasText;
    background:Canvas;
    color:CanvasText;
    box-shadow:none;
  }

  .boki-svg-viewer__header,
  .boki-svg-viewer__hint,
  .boki-svg-viewer__viewport{
    border-color:CanvasText;
    background:Canvas;
    color:CanvasText;
  }

  .boki-svg-viewer__trigger,
  .boki-svg-viewer__close{
    border:1px solid ButtonText;
    background:ButtonFace;
    color:ButtonText;
  }

  .boki-svg-viewer__trigger:focus-visible,
  .boki-svg-viewer__close:focus-visible,
  .boki-svg-viewer__viewport:focus-visible{
    outline:3px solid Highlight;
    box-shadow:none;
  }
}

@media print{
  .boki-svg-viewer__actions,
  .boki-svg-viewer{
    display:none !important;
  }
}