:root {  
  --gold: #FFD700;  
  --bg: #f9f9f9;  
  --text-dark: #333;  
  --highlight: #ffc107;  
  --soft-border: #ddd;  
}  
  
/* From Uiverse.io by cohencoo */   
  
/* From Uiverse.io by adamgiebl */   
.input-wrapper input {  
  background-color: #eee;  
  border: none;  
  padding: 2rem;  
  font-size: 1rem;  
  width: 12em;  
  border-radius: 20px;  
  color: lightcoral;  
  box-shadow: 0 0.4rem #dfd9d9;  
  cursor: pointer;  
  align-content: center;  
}  
  
.input-wrapper input:focus {  
  outline-color: lightcoral;  
}  
  
.input:focus {  
  outline-offset: 5px;  
  background-color: #fff  
}  
  
.story-bar {  
    
  display: flex;  
  overflow-x: auto;  
  padding: 14px 16px;  
  gap: 14px;  
  background-color: var(--bg);  
  border-bottom: 1px solid var(--soft-border);  
  scroll-snap-type: x mandatory;  
}  
  
.story-thumb {  
  text-align: center;  
  cursor: pointer;  
  position: relative;  
  scroll-snap-align: start;  
}  
  
.story-thumb img {  
  width: 80px;  
  height: 80px;  
  border-radius: 50%;  
  border: 3px solid transparent;  
  object-fit: cover;  
  transition: transform 0.2s ease;  
}  
  
.story-thumb img:hover {  
  transform: scale(1.05);  
}  
  
.story-unseen img {  
  border-color: var(--gold);  
}  
  
.story-viewed img {  
  opacity: 0.6;  
}  
  
.story-thumb p {  
  font-size: 13px;  
  margin-top: 6px;  
  color: var(--text-dark);  
}  
  
.upload-btn {  
    display: block;  
  box-shadow: 0 0.4rem #dfd9d9;  
  width: 64px;  
  height: 64px;  
  border-radius: 20%;  
  background: linear-gradient(135deg, var(--highlight), var(--gold));  
  color: white;  
  font-size: 26px;  
  font-weight: bold;  
  text-align: center;  
  line-height: 64px;  
  position: relative;  
  cursor: pointer;  
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);  
}  
  
.upload-btn input {  
  opacity: 0;  
  position: absolute;  
  inset: 0;  
  cursor: pointer;  
}  
  
  
.caption-input {  
  flex: 1;  
  padding: 8px 12px;  
  border: 1px solid var(--soft-border);  
  border-radius: 6px;  
  font-size: 14px;  
  margin-left: 12px;  
  background: #fff;  
}  
.submit-btn {  
    display: block;  
      box-shadow: 0 0.4rem #dfd9d9;  
    width: 53px;  
    height: 53px;  
  padding: 8px 14px;  
  margin-left: 10px;  
  background: linear-gradient(135deg, var(--highlight), var(--gold));  
  color: #000;  
  border: none;  
  border-radius: 1rem;  
  font-weight: 600;  
  cursor: pointer;  
  transition: background 0.3s ease;  
}  
  
.submit-btn:hover {  
  background-color: #e0a800;  
}  
  
.delete-form {  
  position: absolute;  
  top: 0;  
  right: 0;  
}  
  
.delete-btn {  
  background: #fff;  
  border: none;  
  font-size: 14px;  
  color: #dc3545;  
  cursor: pointer;  
  border-radius: 50%;  
  width: 20px;  
  height: 20px;  
  line-height: 16px;  
  text-align: center;  
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);  
}  
  
#story-viewer {  
  display: none;  
  position: fixed;  
  inset: 0;  
  background: rgba(0, 0, 0, 0.85);  
  z-index: 9999;  
  justify-content: center;  
  align-items: center;  
}  
  
.story-overlay {  
  background: #fff;  
  padding: 24px;  
  border-radius: 12px;  
  box-shadow: 0 0 20px rgba(0,0,0,0.4);  
  text-align: center;  
  max-width: 90%;  
  max-height: 90%;  
  position: relative;  
}  
  
#story-img {  
  max-width: 100%;  
  border-radius: 10px;  
  margin-bottom: 12px;  
}  
  
#story-caption {  
  font-size: 16px;  
  color: var(--text-dark);  
  font-weight: 500;  
}  
  
.close-btn {  
  position: absolute;  
  top: 10px;  
  right: 20px;  
  font-size: 32px;  
  color: #ff4d4f;  
  cursor: pointer;  
}  
  
@media (max-width: 600px) {  
  .story-thumb img,  
  .upload-btn {  
    width: 52px;  
    height: 52px;  
    font-size: 20px;  
    line-height: 52px;  
  }  
  
  .caption-input {  
    font-size: 12px;  
    padding: 6px;  
    margin-left: 8px;  
  }  
  
  .submit-btn {  
    font-size: 12px;  
    padding: 6px 10px;  
    margin-left: 6px;  
  }  
}