:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#111;
  --border:#ddd;
  --accent1:#8e2de2;
  --accent2:#ff416c;
}

[data-theme="dark"]{
  --bg:#0f1115;
  --card:#1a1d24;
  --text:#f1f1f1;
  --border:#333;
}

*{box-sizing:border-box;font-family:system-ui}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
}

.container{
  max-width:800px;
  margin:40px auto;
  padding:20px;
}

.card{
  background:var(--card);
  padding:25px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}

/* Logo */
.logo{
  font-size:42px;
  font-weight:800;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:center;
  margin-bottom:30px;
}

/* Form */
.search-form{
  display:flex;
  gap:10px;
}

input,button{
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
}

button{
  cursor:pointer;
}

.profile-img{
  width:160px;
  border-radius:50%;
}

.story-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
  margin-top:20px;
}

.story-item img, .story-item video{
  width:100%;
  border-radius:8px;
  cursor:pointer;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.modal img,.modal video{
  max-width:90%;
  max-height:90%;
}

.theme-btn{
  position:fixed;
  top:15px;
  right:15px;
  padding:8px 12px;
  border-radius:20px;
}

/* =========================
   Profilbild + Zoom-Lupe
========================= */

.profile-pic-wrap{
  position: relative;
  display: inline-block;
}

.profile-pic-wrap .profile-img{
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: block;
}

/* Button liegt AUF dem Bild */
.profile-zoom-btn{
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.profile-zoom-btn:hover{
  background: rgba(0,0,0,.8);
}

/* Lupe – garantiert sichtbar */
.profile-zoom-icon{
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

.profile-zoom-icon::after{
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: #fff;
  right: -6px;
  bottom: -4px;
  transform: rotate(45deg);
  border-radius: 2px;
}

/* =========================
   Skeleton Loader (Shimmer)
========================= */
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
}

[data-theme="light"] .skeleton{
  background: rgba(0,0,0,0.05);
}

.skeleton::after{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:150%;
  height:100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  animation: shimmer 1.2s infinite;
}

[data-theme="light"] .skeleton::after{
  background: linear-gradient(
    90deg,
    transparent
    ,rgba(0,0,0,0.08),
    transparent
  );
}

@keyframes shimmer{
  100% { left: 150%; }
}

/* Story Skeleton Layout */
.story-skeleton-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px){
  .story-skeleton-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.story-skeleton-item{
  aspect-ratio: 9 / 16;
  border-radius: 14px;
}

/* Optional: kleiner Text-Skeleton */
.skeleton-line{
  height: 12px;
  border-radius: 999px;
}