.storyboard-preview-dialog { width: min(960px, calc(100vw - 28px)); max-width: 960px; max-height: calc(100vh - 28px); padding: 0; border: 1px solid #315b78; border-radius: 20px; background: #0b121d; color: #e8f0f7; box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow: hidden; }
.storyboard-preview-dialog::backdrop { background: rgba(5,8,14,.76); backdrop-filter: blur(5px); }
.storyboard-preview-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-height: calc(100vh - 28px); padding: 22px; overflow: auto; }
.storyboard-preview-header, .storyboard-preview-footer, .storyboard-preview-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.storyboard-preview-header { padding-bottom: 14px; border-bottom: 1px solid #23374b; }
.storyboard-preview-kicker { color: #ff806d; font: 700 10px ui-monospace, monospace; letter-spacing: .14em; }
.storyboard-preview-header h2 { margin: 6px 0 0; font-size: 22px; overflow-wrap: anywhere; }
.storyboard-preview-close { width: 36px; height: 36px; border: 1px solid #3d6178; border-radius: 50%; background: #132333; color: #a7c1d2; font-size: 23px; line-height: 1; cursor: pointer; }
.storyboard-preview-close:hover, .storyboard-preview-close:focus-visible { color: #fff; border-color: #ff806d; outline: 2px solid #ff806d; outline-offset: 2px; }
.storyboard-preview-summary { color: #ffbf69; font: 700 12px ui-monospace, monospace; }
.storyboard-preview-notice { margin: -5px 0 0; padding: 10px 12px; border-left: 3px solid #72c9ff; background: rgba(114,201,255,.08); color: #a9bfd0; font-size: 12px; line-height: 1.55; }
.storyboard-preview-timeline { display: flex; gap: 7px; padding: 3px 0 8px; overflow-x: auto; scrollbar-color: #315b78 transparent; }
.storyboard-preview-timeline-item { flex: 0 0 112px; display: grid; gap: 5px; min-height: 55px; padding: 9px; border: 1px solid #29445b; border-radius: 10px; text-align: left; background: #111e2c; color: #8fa9bb; cursor: pointer; }
.storyboard-preview-timeline-item strong { color: #72c9ff; font: 700 11px ui-monospace, monospace; }
.storyboard-preview-timeline-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.storyboard-preview-timeline-item.is-active, .storyboard-preview-timeline-item:focus-visible { border-color: #ff806d; background: rgba(255,128,109,.14); color: #fff; outline: 2px solid #ff806d; outline-offset: 1px; }
.storyboard-preview-detail { min-height: 230px; padding: 20px; border: 1px solid #315b78; border-left: 4px solid #ff806d; border-radius: 14px; background: linear-gradient(135deg, #142536, #101923); }
.storyboard-preview-detail-top { justify-content: flex-start; flex-wrap: wrap; color: #ffbf69; font: 700 11px ui-monospace, monospace; }
.storyboard-preview-title { margin: 24px 0 20px; font-size: clamp(21px, 4vw, 34px); overflow-wrap: anywhere; }
.storyboard-preview-field { display: grid; gap: 5px; margin-top: 16px; }
.storyboard-preview-field > span { color: #72c9ff; font: 700 10px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.storyboard-preview-field p { margin: 0; color: #d6e2ea; line-height: 1.7; overflow-wrap: anywhere; }
.storyboard-preview-empty { padding: 48px 20px; border: 1px dashed #3d6178; border-radius: 14px; color: #a9bfd0; text-align: center; }
.storyboard-preview-empty strong { color: #fff; }
.storyboard-preview-empty p { margin: 8px 0 0; font-size: 12px; }
.storyboard-preview-footer { padding-top: 4px; color: #718b9d; font-size: 11px; }
.storyboard-preview-footer > div { display: flex; gap: 8px; }
.storyboard-preview-dialog button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
  .storyboard-preview-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 14px; }
  .storyboard-preview-shell { max-height: calc(100vh - 16px); padding: 15px; gap: 11px; }
  .storyboard-preview-header h2 { font-size: 18px; }
  .storyboard-preview-detail { min-height: 260px; padding: 15px; }
  .storyboard-preview-footer { align-items: stretch; flex-direction: column; }
  .storyboard-preview-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .storyboard-preview-footer .secondary-button { justify-content: center; }
}