body {
  margin: 0;
  padding-top: var(--sd-header-height, 116px);
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.dropzone {
  display: none;
  position: fixed;
  top: clamp(12px, 5vw, 50px);
  right: clamp(12px, 5vw, 50px);
  bottom: clamp(12px, 5vw, 50px);
  left: clamp(12px, 5vw, 50px);
  border-radius: 1rem;
  border: 2px dashed rgba(249, 249, 251, 0.4);
  background-color: rgba(43, 42, 51, 0.92);
  color: #f9f9fb;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
  text-align: center;
  cursor: pointer;
  z-index: 2000;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  box-sizing: border-box;
  pointer-events: none;
}

.dropzone.is-visible {
  display: flex;
  pointer-events: auto;
}

.dropzone.is-dragover {
  border-color: rgba(249, 249, 251, 0.75);
  background-color: rgba(43, 42, 51, 0.88);
  transform: translateY(-1px);
}

.dropzone-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.dropzone-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #f9f9fb;
}

.dropzone-subtitle {
  margin-bottom: 0;
  color: rgba(249, 249, 251, 0.75);
}

.preview-wrapper {
  flex: 1 1 auto;
  min-height: clamp(420px, calc(100vh - var(--sd-header-height, 120px) - 180px), 960px);
  background-color: #fff;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-frame {
  flex: 1;
  width: 100%;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.preview-placeholder {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(2.5rem, 8vw, 4rem) 1.5rem;
}

.preview-placeholder p {
  max-width: 520px;
}

.viewer-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.viewer-area {
  flex: 1 1 auto;
  min-height: 0;
}

.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tab-content > .tab-pane {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
}

.tab-content > .tab-pane.active {
  display: flex;
}

#preview-panel {
  gap: 0;
}

#statusMessage {
  min-height: 1.25rem;
}

#githubPublishForm .form-text a {
  text-decoration: none;
}

#publishProgressBar {
  transition: width 0.3s ease;
}

#publishLog {
  max-height: 180px;
  overflow-y: auto;
}

#githubResultSection .alert {
  border: none;
}

#toastContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  width: min(360px, calc(100vw - 1.5rem));
}

#toastContainer .toast {
  width: 100%;
  margin: 0;
}

.select2-container .select2-selection--single {
  height: 38px;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 0.75rem;
}

#sdHeader {
  background: #2b2a33 url('exelearning.png') no-repeat 20px 50%;
  background-size: auto 32px;
  border-bottom: 1px solid #0c0c0d;
  position: fixed;
  inset: 0 0 auto 0;
  padding: 0.75rem 1rem;
  z-index: 1080;
}

.sd-header-copy {
  color: #f9f9fb;
  padding-left: 72px;
}

.sd-header-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sd-header-subtitle {
  font-size: 0.85rem;
  color: rgba(249, 249, 251, 0.75);
}

.btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn .icon svg {
  width: 1rem;
  height: 1rem;
}

#_blank.btn {
  border-color: rgba(249, 249, 251, 0.4);
  color: #f9f9fb;
}

#_blank.btn:hover,
#_blank.btn:focus-visible {
  color: #0c0c0d;
  background-color: #f9f9fb;
  border-color: #f9f9fb;
}

@media (max-width: 576px) {
  #sdHeader {
    background-position: 12px center;
    background-size: auto 26px;
    padding-inline: 0.75rem;
  }

  .sd-header-copy {
    padding-left: 58px;
  }

  .sd-header-title {
    font-size: 0.95rem;
  }

  .sd-header-subtitle {
    font-size: 0.78rem;
  }
}

@media (max-width: 768px) {
  .dropzone {
    padding: clamp(2rem, 12vw, 3rem) 1rem;
  }
}