:root{
  --bg: radial-gradient(circle at 20% -10%, #2a2550 0%, #0f172a 55%, #0b1020 100%);
  --text:#f5f3ff; --muted:rgba(245,243,255,.6);
  --purple:#7e5bef;
  --border:rgba(255,255,255,.06);
  --max:1000px;
  --headerH: 64px;
}

*{box-sizing:border-box}
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- Sticky header ---------- */
header{
  height: var(--headerH);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 0 1.25rem;
  background: rgba(6,7,12,.42);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.header-center{
  position: static;
  transform: none;
  display:flex;
  align-items:center;
  justify-content: center;
  flex: 0 1 auto;
}
.country-select select{
  background:
    linear-gradient(135deg, rgba(126,91,239,.35), rgba(166,139,255,.2)),
    rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(154,134,255,.45);
  border-radius:999px;
  padding:.45rem 2.1rem .45rem .95rem;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.01em;
  appearance:none;
  box-shadow:0 10px 24px rgba(126,91,239,.25);
  background-image:
  linear-gradient(135deg, rgba(126,91,239,.35), rgba(166,139,255,.2)),
  linear-gradient(45deg, transparent 50%, rgba(255,255,255,.9) 50%),
  linear-gradient(135deg, rgba(255,255,255,.9) 50%, transparent 50%);
  background-position:
  center,
  right 1rem center,
  right 0.5rem center;
  background-size:
  auto,
  .55rem .36rem,
  .55rem .36rem;
  background-repeat: no-repeat;
}
.country-select select:hover{
  border-color:rgba(166,139,255,.7);
  box-shadow:0 12px 28px rgba(126,91,239,.35);
}
.country-select select:focus{
  outline:2px solid rgba(154,134,255,.45);
  outline-offset:2px;
}
.country-select select option{
  background:#141626;
  color:#f5f3ff;
}
.visually-hidden{
  border:0;
  clip:rect(0 0 0 0);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;
  white-space:nowrap;
}
.header-left, .header-right{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width: 0;
  flex: 1 1 0;
}
.header-left{
  justify-content: flex-start;
}
.header-right{
  justify-content: flex-end;
}
.brand{
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.a-brand{
  text-decoration:none;
  margin-top: 4px;
}

.btn{
  padding:.55rem 1.0rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  line-height: 1;
  user-select:none;
}
.btn-primary{
  background:linear-gradient(135deg,#7e5bef,#a68bff);
  color:#fff;
  box-shadow:0 8px 25px rgba(126,91,239,.35);
}
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.1);
}

/* “Del” + “Til toppen” i header — skjules indtil man scroller forbi hero */
.header-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.header-actions .btn{
  white-space: nowrap;
}
header.compact .header-actions{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
header.compact .header-center{
  position: static;
  transform: none;
  margin: 0;
}
header.compact .header-left{
  flex: 1;
  justify-content: flex-start;
}
header.compact .header-right{
  flex: 1;
}

main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 0rem;
}

/* ---------- Hero ---------- */
.hero{
  padding-top: .5rem;
  margin-bottom: 2.2rem;
}
.hero h1{
  font-size:clamp(2.4rem,5.3vw,3.2rem);
  margin:.2rem 0 .5rem;
  letter-spacing: -0.02em;
  text-align: center;
}
.hero p{
  color:var(--muted);
  max-width: 40rem;
  margin: 0 auto 1.3rem;
  text-align: center;
}
.cta-row{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  justify-content:center;
}
.cta-guidelines{
  margin-top:.6rem;
  text-align:center;
}
.guidelines-link{
  font-size:.78rem;
  color:rgba(245,243,255,.7);
  text-decoration:none;
  border-bottom:1px solid rgba(245,243,255,.25);
  padding-bottom:.05rem;
  transition:color .15s ease, border-color .15s ease;
}
.guidelines-link:hover{
  color:#fff;
  border-color:rgba(245,243,255,.6);
}

/* ---------- Feed ---------- */
.feed-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 2.5rem 0 1rem;
  gap: 1rem;
}
.feed-header h2{
  margin:0;
  font-size:1.1rem;
  letter-spacing: -0.01em;
}
.tag-search{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.85rem;
  color:var(--muted);
}
.tag-search label{
  font-size:.85rem;
  color:var(--muted);
}
.tag-search input{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:.4rem .75rem;
  font-size:.85rem;
  min-width: 180px;
}
.tag-search input::placeholder{
  color:rgba(245,243,255,.45);
}
.tag-search input:focus{
  outline:2px solid rgba(154,134,255,.45);
  outline-offset:2px;
}

.feed{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.secret-card{
  border:1px solid var(--border);
  border-radius:.95rem;
  padding:1rem 1rem .85rem;
  min-height:140px;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  justify-content:space-between;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  position: relative;
}
.search-delete-btn{
  position:absolute;
  top:.45rem;
  right:.45rem;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.search-delete-btn:hover{
  transform: scale(1.05);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.45);
}
.secret-text{font-weight:500;line-height:1.4}
.secret-meta{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.secret-actions{
  display:flex;
  justify-content:flex-end;
}
.report-btn{
  font-size:.7rem;
  color:rgba(245,243,255,.7);
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:.25rem .6rem;
  cursor:pointer;
  transition:all .15s ease;
}
.report-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
}
.delete-btn{
  color:#ffd7d9;
  border-color:rgba(255,120,120,.35);
  background:rgba(120,20,30,.25);
}
.delete-btn:hover{
  color:#fff;
  border-color:rgba(255,120,120,.6);
  background:rgba(160,30,50,.4);
}
.report-btn:disabled{
  cursor:default;
  opacity:.6;
}
.reactions{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
}
.reaction-btn{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.72rem;
  color:rgba(245,243,255,.9);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:.25rem .5rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.reaction-btn:hover{
  transform: translateY(-1px);
  background:rgba(255,255,255,.12);
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.reaction-btn.active{
  background:rgba(126,91,239,.3);
  border-color:rgba(126,91,239,.7);
  color:#fff;
  box-shadow:0 10px 20px rgba(126,91,239,.3);
}
.reaction-emoji{font-size:.85rem;line-height:1}
.reaction-count{font-variant-numeric:tabular-nums}
.category{
  font-size:.68rem;
  white-space:nowrap;
}

/* ---------- Gradient temaer ---------- */
.card--violet{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(126,91,239,.28) 0%, rgba(126,91,239,.12) 35%, rgba(10,11,18,.12) 60%),
    linear-gradient(180deg, rgba(20,18,35,.6), rgba(10,11,18,.35));
}
.card--slate{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(168,176,195,.18) 0%, rgba(98,106,122,.10) 40%, rgba(10,11,18,.10) 65%),
    linear-gradient(180deg, rgba(22,24,34,.55), rgba(10,11,18,.3));
}
.card--blue{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(84,164,255,.22) 0%, rgba(48,112,198,.12) 40%, rgba(10,11,18,.10) 65%),
    linear-gradient(180deg, rgba(16,24,40,.55), rgba(10,11,18,.3));
}
.card--rose{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,99,132,.22) 0%, rgba(255,99,132,.10) 40%, rgba(10,11,18,.1) 65%),
    linear-gradient(180deg, rgba(35,16,28,.55), rgba(10,11,18,.3));
}
.card--teal{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56,189,194,.22) 0%, rgba(56,189,194,.10) 40%, rgba(10,11,18,.1) 65%),
    linear-gradient(180deg, rgba(12,31,32,.55), rgba(10,11,18,.3));
}

/* ---------- Skeleton loader ---------- */
.skeleton{
  position: relative;
  overflow: hidden;
}
.skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.10) 45%,
      rgba(255,255,255,0.05) 90%);
  transform: translateX(-120%);
  animation: shimmer 1.15s infinite;
  opacity: .7;
}
@keyframes shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.sk-line{
  height: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
.sk-line.short{ width: 70%; }
.sk-line.tiny{ width: 45%; }
.sk-bottom{
  display:flex;
  justify-content:space-between;
  gap:.8rem;
  margin-top: 10px;
}
.sk-pill{
  height: 22px;
  width: 120px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

/* ---------- Udforsk universer ---------- */
.universes { margin-top: 3.5rem; text-align: center; }
.universes h2 { font-size: 1.15rem; margin-bottom: 1.2rem; letter-spacing: -0.01em; }
.universe-list { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.universe-pill{
  padding:.45rem .9rem .55rem;
  font-size:.78rem;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(245,243,255,.85);
  cursor:pointer;
  transition:all .2s ease;
  backdrop-filter:blur(8px);
}
.universe-pill:hover{
  background:rgba(126,91,239,.25);
  border-color:rgba(126,91,239,.45);
  color:#fff;
  box-shadow:0 6px 18px rgba(126,91,239,.35);
}
.universe-pill.active{
  background:rgba(126,91,239,.28);
  border-color:rgba(126,91,239,.6);
  color:#fff;
  box-shadow:0 6px 18px rgba(126,91,239,.35);
}

/* ---------- Modals ---------- */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .25s ease;
  z-index: 200;
  padding: 1rem;
}
.modal.show{visibility:visible;opacity:1}
.modal-content{
  background:#141626;
  border:1px solid rgba(255,255,255,.06);
  border-radius:1rem;
  width:100%;
  max-width:500px;
  padding:1.6rem 1.6rem 1.3rem;
  position:relative;
  box-shadow:0 20px 45px rgba(0,0,0,.4);
}
.modal-content h2{margin:0 0 .9rem}
.modal-content textarea,.modal-content input{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.6rem;
  color:#fff;
  padding:.65rem .6rem;
  font-size:.9rem;
}
.password-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom: 0.4rem;
}
.password-row #deletePasswordInput{
  flex:1;
}
.toggle-label{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.75rem;
  color:rgba(245,243,255,.6);
  white-space:nowrap;
}
.toggle-label input{
  width:auto;
  padding:0;
  margin:0;
  border:none;
  background:none;
}
.modal-content select#categoryInput{
  background:
    linear-gradient(135deg, rgba(126,91,239,.18), rgba(166,139,255,.08)),
    rgba(255,255,255,.03);
  border-color: rgba(154,134,255,.35);
  color: white;
  padding:.7rem .7rem;
  box-shadow:0 10px 24px rgba(126,91,239,.18);
  appearance: none;
  background-image:
  linear-gradient(135deg, rgba(126,91,239,.18), rgba(166,139,255,.08)),
  linear-gradient(45deg, transparent 50%, rgba(255,255,255,.9) 50%),
  linear-gradient(135deg, rgba(255,255,255,.9) 50%, transparent 50%);
  background-position:
  center,
  right 1rem center,
  right 0.5rem center;
  background-size:
  auto,
  .55rem .36rem,
  .55rem .36rem;
  background-repeat: no-repeat;
  width: 50%;
}
.modal-content select#categoryInput:focus{
  outline:2px solid rgba(154,134,255,.45);
  outline-offset:2px;
}
.modal-content textarea{
  resize:none;
  height:110px;
}
.char-counter{
  margin-top:.45rem;
  font-size:.85rem;
  color:var(--muted);
}
.close-btn{
  position:absolute; right:1rem; top:.6rem;
  background:none; border:none; color:rgba(255,255,255,.6);
  font-size:1.5rem; cursor:pointer
}

/* Responsive */
@media (max-width: 950px){
  .feed{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  header{
    height: auto;
    padding: .65rem 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand brand"
      "country actions"
      "tagline tagline";
    row-gap: .45rem;
    column-gap: .75rem;
    align-items: center;
  }
  .header-left{
    display: contents;
  }
  .brand{
    grid-area: brand;
    margin: 0 auto;
  }
  .header-center{
    grid-area: country;
    width: 100%;
    justify-content: flex-start;
  }
  .header-actions{
    grid-area: actions;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .header-right{
    grid-area: tagline;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 900px){
  .header-left{ gap: .6rem; }
  .header-actions{
    flex-wrap: wrap;
    justify-content: center;
  }
  .header-center{
    flex: 0 1 210px;
  }
  .country-select select{
    width: 100%;
    padding-right: 1.8rem;
  }
}
@media (max-width: 650px){
  .cta-row{flex-direction:column; align-items:center}
  .feed{ grid-template-columns: 1fr; }
  .tag-search label{ display:none; }
  header{
    height: auto;
    padding: .65rem 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "country"
      "actions"
      "tagline";
    row-gap: .45rem;
    justify-items: center;
  }
  .header-left{
    display: contents;
  }
  .brand{
    grid-area: brand;
    margin: 0 auto;
  }
  .header-center{
    grid-area: country;
    position: static;
    transform: none;
    width: 100%;
    justify-content: center;
  }
  .header-actions{
    grid-area: actions;
    width: 100%;
    justify-content: center;
  }
  .header-right{
    grid-area: tagline;
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: .35rem;
  }
  .btn{ padding: .5rem .85rem; }
  .brand{ font-size: .95rem; }
}

#feedStatus {
  text-align:center;
  color:rgba(245,243,255,.55);
  padding:1.2rem 0 0;
}

#infiniteSentinel {
  height: 1px;
}

footer{
  text-align:center;
  padding:2.5rem 1.25rem;
  color:rgba(245,243,255,.5);
  font-size:.85rem;
}

.modal-label {
  font-size:.72rem;
  color:rgba(245,243,255,.6);
  margin-bottom:.4rem;
  margin-top: 0.5rem;
  display:block;
}

.char-counter{
  text-align: right;
  font-size: .72rem;
  margin-top: 0;
  color: rgba(245, 243, 255, .6);
}

#countrySelect:hover {
  cursor: pointer;
}

#submitSecret {
  float: right;
  margin-top: 0.3em;
}

#categoryInput:hover {
  cursor: pointer;
}

#categoryInput option{
  background:#141626;
  color:#f5f3ff;
}