:root {
  --bg: #000;
  --fg: #fff;
  --dim: #9aa0a6;
  --accent: #4f8cff;
  --danger: #ff5c5c;
  --panel: rgba(20, 20, 22, 0.92);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; width: 100%;
  background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none;
  touch-action: none; /* we handle gestures ourselves */
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }
.dim { color: var(--dim); font-size: 0.9rem; }

/* ------------------------------ lock screen ------------------------------ */
#lock { display: flex; align-items: center; justify-content: center; padding: 24px; }
#lock-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
#lock h1 { font-weight: 600; font-size: 1.5rem; margin: 0 0 8px; }
input, button { font: inherit; }
#password, #add-url, #jump {
  padding: 14px 16px; border-radius: 12px; border: 1px solid #2a2a2e;
  background: #141416; color: var(--fg); outline: none; width: 100%;
}
#password:focus, #add-url:focus { border-color: var(--accent); }
button {
  cursor: pointer; border: none; border-radius: 12px; padding: 14px 16px;
  background: var(--accent); color: #fff; font-weight: 600;
}
button:disabled { opacity: 0.5; cursor: default; }
button.ghost { background: #26262b; color: var(--fg); }
button.danger { background: var(--danger); }
.msg { min-height: 1.2em; font-size: 0.9rem; color: var(--danger); margin: 0; }
.msg.ok { color: #43d17a; }

/* ------------------------------ viewer ----------------------------------- */
#stage {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.layer {
  position: absolute; top: 0; left: 0; display: block;
  max-width: none; max-height: none;   /* natural size; JS transform does the fitting */
  user-select: none; -webkit-user-drag: none;
  transform-origin: 0 0; will-change: transform; backface-visibility: hidden;
}
/* the neighbor layer is hidden/shown from JS via explicit display, never via an
   id rule — clearing an inline style must not reveal a stylesheet display:none */

/* swipe "release to change" indicator */
.swipe-hint {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; z-index: 15;
  background: rgba(20, 20, 22, 0.72); color: #fff; font-size: 2rem; line-height: 1;
  transition: background .15s ease, transform .15s ease, opacity .1s linear;
}
.swipe-hint.left  { left: 16px; right: auto; }
.swipe-hint.right { right: 16px; left: auto; }
.swipe-hint.ready { background: var(--accent); transform: translateY(-50%) scale(1.18); }

.empty { text-align: center; padding: 24px; }
.spinner {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* controls overlay */
#controls { position: fixed; inset: 0; pointer-events: none; }
#controls .bar { position: absolute; left: 0; right: 0; display: flex; align-items: center;
  gap: 10px; padding: 12px calc(12px + env(safe-area-inset-right)) 12px calc(12px + env(safe-area-inset-left));
  pointer-events: auto; }
#controls .bar.top { top: 0; padding-top: calc(12px + env(safe-area-inset-top));
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent); }
#controls .bar.bottom { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); justify-content: center; }
.spacer { flex: 1; }
#counter { font-variant-numeric: tabular-nums; font-size: 0.95rem; color: #eee; }
.icon {
  background: rgba(40,40,44,0.85); color: #fff; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
}
.icon.big { width: 54px; height: 54px; font-size: 2rem; }
.icon.on { background: var(--accent); }   /* active toggle (e.g. fullscreen) */
#jump { width: 72px; text-align: center; padding: 12px 8px; appearance: textfield; -moz-appearance: textfield; }
/* hide the desktop number spinners so the digit stays centered */
#jump::-webkit-outer-spin-button, #jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jump-total { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 0.95rem; min-width: 2.5em; }

/* modals */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex;
  align-items: center; justify-content: center; padding: 24px; z-index: 20; }
.card { background: var(--panel); backdrop-filter: blur(8px); border: 1px solid #2c2c31;
  border-radius: 18px; padding: 22px; width: 100%; max-width: 380px; display: flex;
  flex-direction: column; gap: 14px; }
.card h2 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.row { display: flex; gap: 10px; }
.row button { flex: 1; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom));
  transform: translateX(-50%); background: rgba(30,30,34,0.95); color: #fff;
  padding: 12px 18px; border-radius: 12px; font-size: 0.9rem; z-index: 30;
  max-width: 80vw; text-align: center; }