:root {
  color-scheme: dark;
  font-family: ui-rounded, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #17141f;
  color: #f7f2ff;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh;background: #ffc8e9;; }
button, select, input { font: inherit; }

.app-shell { width: min(1500px, calc(100% - 28px)); margin: 0 auto; padding: 30px 0 50px; }
header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 5px; color: #cab9e8; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 46px); }
.subtitle { margin: 8px 0 0; color: #cfc6da; }
.library-link { text-decoration: none; white-space: nowrap; border: 1px solid rgba(255,255,255,.16); background: #2d223d; color: #f5ebff; border-radius: 999px; padding: 9px 13px; }
.library-link:hover { background: #433157; }

.drop-zone, .toolbar, .viewer-frame {
    border: 1px solid rgb(0 0 0);
    background: #c3a2db;
    /* box-shadow: 0 18px 60px rgba(0, 0, 0, .22); */
}

.drop-zone { min-height: 86px; padding: 18px; border-radius: 18px 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; transition: .15s ease; }
.drop-zone.dragging { background: rgba(75,54,105,.9); border-color: #d3baff; }
.drop-zone.loaded { border-color: rgba(171, 235, 188, .35); }
.drop-zone strong { margin-left: auto; color: #cfc6da; font-size: 13px; font-weight: 600; }
.file-button, button, select { border: 1px solid rgba(255,255,255,.16); background: #37294c; color: white; border-radius: 10px; padding: 9px 13px; cursor: pointer; }
.file-button:hover, button:hover { background: #493562; }
.file-button input { display: none; }

.toolbar { border-top: 0; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.toolbar label { display: flex; align-items: center; gap: 8px; color: #d8cee5; }
.toolbar select { padding: 7px 30px 7px 10px; }

.viewer-frame { border-top: 0; border-radius: 0 0 18px 18px; padding: 12px; overflow: auto; position: relative; min-height: 424px; }

/* Keep KiSS at its authored pixel size. Large sets scroll instead of being
   stretched to the width of the browser window. */
#kissCanvas { display: block; width: auto; max-width: none; height: auto; background: #000; image-rendering: pixelated; touch-action: none; border-radius: 8px; }

.loading-overlay {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 400px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(9, 7, 14, .78);
  backdrop-filter: blur(3px);
}
.loading-overlay[hidden] { display: none; }
.loading-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 22px 28px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(38, 29, 52, .94);
  box-shadow: 0 18px 55px rgba(0,0,0,.34);
}
.loading-card span { color: #cfc6da; font-size: 12px; }
.kiss-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #eadbff;
  animation: kiss-spin .78s linear infinite;
}
@keyframes kiss-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .kiss-spinner { animation-duration: 1.8s; }
}
.hint { color: #bfb5ca; font-size: 13px; margin: 11px 3px; }
code { color: #e9d7ff; }

section#dropZone {
    background-color: rgb(131 95 157);
}

h1#pageTitle {
    color: #835f9d;
}

.subtitle {
    margin: 8px 0 0;
    color: #000000;
}


@media (max-width: 700px) {
  header { align-items: start; flex-direction: column; }
  .drop-zone strong { width: 100%; margin-left: 0; }
  .app-shell { width: min(100% - 14px, 1500px); padding-top: 12px; }
}