* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background:#000; color:#fff; overflow:hidden; height:100vh;
  touch-action: pan-y;
}

#login-screen {
  height:100vh; display:flex; align-items:center; justify-content:center; background:#111;
}
.login-box {
  background:#222; padding:2rem; border-radius:16px; width:90%; max-width:380px; text-align:center;
}
.login-box input {
  width:100%; padding:14px; margin:10px 0; border:none; border-radius:8px; font-size:1.1rem; background:#333; color:white;
}
.login-box button {
  width:100%; padding:14px; background:#ff0050; color:white; border:none; border-radius:8px; font-size:1.2rem; margin-top:10px; cursor:pointer;
}
.error { color:#ff6666; margin-top:10px; }

#feed-screen { height:100vh; display:flex; flex-direction:column; }

header {
  background:#0a0a0a; padding:8px 16px; display:flex; align-items:center; justify-content:space-between;
  z-index:10; flex-shrink:0; height:52px;
}
header h1 { font-size:1.25rem; font-weight:600; }

.header-right { display:flex; align-items:center; gap:8px; }

.logout-btn, #mute-btn {
  background:#222; color:white; border:none; padding:6px 12px; border-radius:9999px; cursor:pointer; font-size:0.9rem;
}

.upload-label {
  position:relative; display:inline-block; background:#ff0050; color:white; padding:6px 16px;
  border-radius:9999px; font-size:0.9rem; font-weight:500; cursor:pointer;
}
.upload-label:hover { background:#ff3366; }
.upload-label input[type="file"] { position:absolute; opacity:0; width:100%; height:100%; top:0; left:0; cursor:pointer; }

/* PROGRESS BAR - Hidden by default, only shown via .show class */
#upload-progress {
  display: none !important;
  background: rgba(0,0,0,0.95);
  padding: 10px 16px;
  border-bottom: 1px solid #333;
  z-index: 20;
  position: sticky;
  top: 0;
}

#upload-progress.show {
  display: block !important;
}

.progress-container {
  width: 100%; background: #333; border-radius: 9999px; height: 8px; overflow: hidden;
}
.progress-bar {
  height: 100%; background: linear-gradient(90deg, #ff0050, #ff3366); width: 0%; border-radius: 9999px;
  transition: width 0.2s ease;
}
.progress-text {
  margin-top: 6px; font-size: 0.85rem; color: #aaa; text-align: center;
}

.feed {
  flex:1; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; background:#000;
}
.slide {
  height:100vh; width:100%; scroll-snap-align:start; display:flex; align-items:center; justify-content:center;
  position:relative; background:#111;
}
.slide img, .slide video { max-height:100%; max-width:100%; object-fit:contain; }
.slide video { width:100%; height:100%; }