:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #080a0d; color: #f5f7fa; }
body { min-height: 100vh; }
#app { min-height: 100vh; }
.panel { width: min(720px, calc(100% - 32px)); margin: 5vh auto; padding: 32px; border: 1px solid #29303a; border-radius: 18px; background: #11151b; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
h1 { margin-top: 0; font-size: clamp(28px, 5vw, 48px); }
p { color: #c0c7d1; line-height: 1.55; }
label { display: grid; gap: 8px; margin: 18px 0; font-weight: 650; }
input { width: 100%; padding: 13px 14px; border: 1px solid #3a4350; border-radius: 10px; background: #090c10; color: white; font: inherit; }
input:focus { outline: 2px solid #83b7ff; outline-offset: 1px; }
.row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: end; }
.checkbox { display: flex; flex-direction: row; align-items: center; gap: 10px; padding-bottom: 12px; }
.checkbox input { width: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
button { border: 0; border-radius: 10px; padding: 12px 16px; background: #e9eef5; color: #0b0d10; font: inherit; font-weight: 750; cursor: pointer; }
button:hover { filter: brightness(.92); }
button:disabled { opacity: .45; cursor: not-allowed; }
#status { margin-top: 20px; min-height: 24px; color: #9cc4ff; }
#loading { text-align: left; }
#slideshow { position: fixed; inset: 0; overflow: hidden; background: #000; touch-action: pan-y; }
#photo { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity .45s ease; }
/* Fullscreen: stretch large photos only (see .can-stretch from app.js). */
#slideshow:fullscreen #photo.can-stretch,
#slideshow:-webkit-full-screen #photo.can-stretch,
#slideshow.is-fullscreen #photo.can-stretch {
  object-fit: fill;
}
#photo.loaded { opacity: 1; }
#brand {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
}
#controls { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; opacity: 0; transition: opacity .25s; }
#slideshow:hover #controls, #controls:focus-within { opacity: 1; }
#controls button { padding: 9px 12px; background: rgba(20,24,30,.72); color: white; backdrop-filter: blur(8px); }
#previousButton, #nextButton { font-size: 24px; line-height: 1; }
@media (max-width: 620px) { .panel { padding: 22px; } .row { grid-template-columns: 1fr; gap: 0; } #controls { left: 10px; right: 10px; flex-wrap: wrap; } }