:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0e13;
  color: #edf3fb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #18324a 0, transparent 38rem), #0b0e13;
}

main {
  width: min(48rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

header, section {
  border: 1px solid #283443;
  border-radius: 1rem;
  background: rgba(16, 22, 30, 0.92);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.05; }
h2 { font-size: 1.05rem; color: #c8d8eb; }
h3 { font-size: .95rem; color: #c8d8eb; margin: 1rem 0 .5rem; }
.eyebrow { color: #72c7ff; font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.hint { color: #9dadbe; font-size: .88rem; }

label { display: block; font-weight: 650; margin-bottom: .5rem; }
textarea, input, pre, output {
  width: 100%;
  border: 1px solid #3a4b60;
  border-radius: .65rem;
  background: #080b10;
  color: #f5f8fc;
  padding: .8rem;
}
textarea { resize: vertical; min-height: 7rem; }
input { display: block; margin-bottom: .65rem; }
pre { min-height: 4rem; overflow: auto; white-space: pre-wrap; }
output { display: block; font-weight: 700; margin-bottom: .8rem; }
output[data-kind="success"] { border-color: #2fa66d; color: #7ee2ae; }
output[data-kind="error"] { border-color: #ba4a55; color: #ff9aa5; }
output[data-kind="working"] { border-color: #2979b8; color: #8dcfff; }
output[data-kind="warning"] { border-color: #b8862a; color: #ffd27a; }
output[hidden] { display: none; }

progress {
  display: block;
  width: 100%;
  height: .9rem;
  margin: 1rem 0 .7rem;
  accent-color: #46aeea;
}

.actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#photo-preview {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  margin: 1rem auto;
  border: 1px solid #3a4b60;
  border-radius: .65rem;
}
#photo-preview[hidden] { display: none; }
button {
  border: 0;
  border-radius: .65rem;
  padding: .75rem 1.1rem;
  background: #46aeea;
  color: #061019;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
button.secondary { background: #293646; color: #edf3fb; }
button.danger { background: #a63f4d; color: #fff4f5; }
button:disabled { opacity: .45; cursor: not-allowed; }

.capabilities, .events { padding-left: 1.4rem; }
/* T-159 F58: long event codes have no spaces; without wrapping one code
   widened the whole mobile page and the fixed album layer with it. */
.capabilities li, .events li { margin: .3rem 0; overflow-wrap: anywhere; }
.capabilities li[data-ok="true"] { color: #7ee2ae; }
.capabilities li[data-ok="false"] { color: #ff9aa5; }
code { color: #9ed7ff; }

.viewer-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #0b0e13;
}
.viewer-stage[hidden] { display: none; }
.viewer-toolbar {
  height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem .65rem;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #283443;
  border-radius: 0;
}
.viewer-toolbar output {
  min-width: 0;
  margin: 0;
  padding: .35rem .55rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.viewer-toolbar > #viewer-transport-state {
  flex: 1 1 12rem;
  width: auto;
}
.viewer-toolbar button { flex: 0 0 auto; padding: .45rem .8rem; }
.transport-rotation-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  font-size: .82rem;
}
.transport-rotation-controls[hidden] { display: none; }
.transport-control-label { margin: 0; white-space: nowrap; }
.transport-rotation-controls input[type="number"] {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  margin: 0;
  padding: .4rem .45rem;
  text-align: center;
}
.transport-rotation-controls output {
  flex: 1 1 12rem;
  width: auto;
  min-width: 10rem;
  max-width: 18rem;
  margin: 0;
  padding: .35rem .55rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#viewer-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 2.75rem);
  border: 0;
  background: #fff;
}

@media (max-width: 36rem) {
  main { width: min(100% - 1rem, 48rem); padding-top: .5rem; }
  header, section { border-radius: .8rem; padding: 1rem; }
  .field-grid { grid-template-columns: 1fr; }
}