:root{
  --bg:#060914;
  --bg2:#0b1020;
  --card:rgba(255,255,255,.06);
  --card-2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
  --txt:#f5f7ff;
  --muted:rgba(245,247,255,.72);
  --muted-2:rgba(245,247,255,.54);
  --a:#ff4d94;
  --b:#7d5cff;
  --c:#4fd8ff;
  --shadow:0 20px 60px rgba(0,0,0,.38);
}

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  background:
    radial-gradient(1000px 650px at 90% 10%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 650px at 10% 20%, rgba(255,77,148,.16), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
}

body.theme-ramadan{
  background:
    radial-gradient(1000px 650px at 90% 10%, rgba(255,214,107,.10), transparent 60%),
    radial-gradient(900px 650px at 10% 20%, rgba(39,136,109,.14), transparent 55%),
    linear-gradient(180deg, #071016, #041018);
}

body.theme-eid{
  background:
    radial-gradient(900px 520px at 85% 12%, rgba(255,215,107,.22), transparent 60%),
    radial-gradient(850px 520px at 12% 18%, rgba(79,216,255,.18), transparent 58%),
    radial-gradient(700px 500px at 50% 100%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0a1622, #07111a 55%, #08131d);
}

body.modal-open{
  overflow:hidden;
}

.hidden{
  display:none!important;
}

.wrap{
  max-width:680px;
  margin:0 auto;
  padding:16px 14px 90px;
}

.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.top{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(6,9,20,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}

.bar{
  max-width:680px;
  margin:0 auto;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
}

.row > *{
  flex:1;
}

.btn{
  border:0;
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--a),var(--b));
  box-shadow:0 14px 34px rgba(255,77,148,.20);
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}

.theme-ramadan .btn{
  background:linear-gradient(135deg,#d9b45f,#27886d);
  box-shadow:0 14px 34px rgba(217,180,95,.16);
}

.theme-eid .btn{
  background:linear-gradient(135deg,#ffd66b,#45cfff);
  color:#102030;
  box-shadow:0 14px 34px rgba(69,207,255,.16);
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:scale(.985);
}

.btn.secondary{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:none;
  color:var(--txt);
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
  border:1px solid var(--border);
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(360px 140px at 0% 0%, rgba(255,255,255,.06), transparent 55%);
  pointer-events:none;
}

.loginCard{
  width:min(520px,100%);
  text-align:center;
  padding:22px;
}

.loginBadge{
  width:max-content;
  margin:0 auto 14px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:rgba(245,247,255,.95);
  font-size:13px;
  font-weight:800;
}

.passHints{
  display:grid;
  gap:8px;
  margin:14px 0 0;
}

.hintChip{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(245,247,255,.8);
  font-size:13px;
}

h1,h2,h3{
  margin:0 0 10px;
}

p{
  margin:8px 0;
  color:var(--muted);
  line-height:1.8;
}

.small{
  font-size:12px;
  color:var(--muted-2);
  margin:0;
}

.subTitle{
  font-size:13px;
  font-weight:800;
  color:rgba(245,247,255,.86);
  margin-bottom:10px;
}

.mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

input{
  width:100%;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.22);
  color:var(--txt);
  padding:13px 14px;
  outline:none;
  font-size:15px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

input:focus{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:13px;
  color:rgba(245,247,255,.95);
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--a);
  box-shadow:0 0 18px rgba(255,77,148,.75);
}

.theme-ramadan .dot{
  background:#ffd66b;
  box-shadow:0 0 18px rgba(255,214,107,.55);
}

.theme-eid .dot{
  background:#45cfff;
  box-shadow:0 0 18px rgba(69,207,255,.55);
}

.hero{
  position:relative;
  z-index:2;
  margin:8px 0 14px;
  padding:24px 18px;
  border:1px solid var(--border);
  border-radius:28px;
  background:
    radial-gradient(450px 200px at 0% 0%, rgba(255,77,148,.13), transparent 60%),
    radial-gradient(420px 220px at 100% 100%, rgba(79,216,255,.11), transparent 60%),
    rgba(255,255,255,.05);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.theme-ramadan .hero{
  background:
    radial-gradient(450px 200px at 0% 0%, rgba(217,180,95,.14), transparent 60%),
    radial-gradient(420px 220px at 100% 100%, rgba(39,136,109,.12), transparent 60%),
    rgba(255,255,255,.04);
}

.theme-eid .hero{
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(255,214,107,.18), transparent 60%),
    radial-gradient(420px 220px at 100% 100%, rgba(69,207,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-color: rgba(255,214,107,.22);
  box-shadow:
    0 20px 60px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,214,107,.05) inset;
}

.heroGlow{
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 68%);
  top:-70px;
  left:-50px;
  filter:blur(10px);
  pointer-events:none;
}

.heroText{
  position:relative;
  z-index:2;
}

.heroMini{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  font-size:12px;
  color:rgba(245,247,255,.78);
  margin-bottom:12px;
}

.heroTitle{
  font-size:28px;
  margin-bottom:8px;
}

.heroStats{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.statCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:rgba(0,0,0,.16);
  padding:14px;
}

.largeStat{
  background:
    linear-gradient(135deg, rgba(255,77,148,.12), rgba(125,92,255,.12)),
    rgba(0,0,0,.18);
}

.theme-ramadan .largeStat{
  background:
    linear-gradient(135deg, rgba(217,180,95,.12), rgba(39,136,109,.12)),
    rgba(0,0,0,.18);
}

.theme-eid .largeStat{
  background:
    linear-gradient(135deg, rgba(255,214,107,.14), rgba(69,207,255,.14)),
    rgba(0,0,0,.18);
}

.statLabel{
  font-size:12px;
  color:rgba(245,247,255,.64);
  margin-bottom:8px;
  font-weight:700;
}

.statValue{
  font-weight:900;
  color:rgba(245,247,255,.96);
  font-size:15px;
  line-height:1.6;
  word-break:break-word;
}

.actionsGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}

.actionCard{
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:16px 14px;
  text-align:right;
  color:var(--txt);
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
}

.actionCard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
}

.actionIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  margin-bottom:10px;
  font-size:20px;
}

.actionTitle{
  display:block;
  font-weight:900;
  font-size:15px;
  margin-bottom:6px;
}

.actionSub{
  display:block;
  color:var(--muted-2);
  font-size:12px;
  line-height:1.7;
}

.grid{
  display:grid;
  gap:12px;
  position:relative;
  z-index:2;
}

.sectionHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}

.metaRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(245,247,255,.88);
  font-weight:900;
  font-size:12px;
}

.msgs{
  display:grid;
  gap:12px;
}

.msgCard{
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(260px 100px at 100% 0%, rgba(125,92,255,.10), transparent 60%),
    radial-gradient(240px 100px at 0% 100%, rgba(255,77,148,.08), transparent 60%),
    rgba(0,0,0,.18);
  opacity:0;
  transform:translateY(10px);
  animation:pop .6s ease forwards;
}

.theme-ramadan .msgCard{
  background:
    radial-gradient(260px 100px at 100% 0%, rgba(217,180,95,.10), transparent 60%),
    radial-gradient(240px 100px at 0% 100%, rgba(39,136,109,.08), transparent 60%),
    rgba(0,0,0,.18);
}

.theme-eid .msgCard{
  background:
    radial-gradient(240px 100px at 100% 0%, rgba(69,207,255,.12), transparent 60%),
    radial-gradient(220px 100px at 0% 100%, rgba(255,214,107,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-color: rgba(255,214,107,.16);
}

.msgCard:nth-child(1){animation-delay:.04s}
.msgCard:nth-child(2){animation-delay:.08s}
.msgCard:nth-child(3){animation-delay:.12s}
.msgCard:nth-child(4){animation-delay:.16s}
.msgCard:nth-child(5){animation-delay:.20s}
.msgCard:nth-child(6){animation-delay:.24s}

.msgHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.msgIndex{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:900;
  color:rgba(245,247,255,.92);
}

.msgBadge{
  font-size:12px;
  color:rgba(245,247,255,.66);
  font-weight:800;
}

.msgBody{
  color:rgba(245,247,255,.90);
  line-height:1.95;
  font-size:14px;
}

@keyframes pop{
  to{
    opacity:1;
    transform:none;
  }
}

.gallery,
.vThumbs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.ph,
.vThumb{
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  position:relative;
  cursor:pointer;
  padding:0;
}

.ph img,
.vThumb video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}

.ph:hover img,
.vThumb:hover video{
  transform:scale(1.04);
}

.ph::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 140px at 15% 10%, rgba(255,77,148,.14), transparent 60%),
    radial-gradient(220px 140px at 90% 85%, rgba(125,92,255,.12), transparent 60%);
  pointer-events:none;
}

.playBadge{
  position:absolute;
  left:10px;
  bottom:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  color:#fff;
  font-weight:900;
}

.moreCard{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg, rgba(255,77,148,.16), rgba(125,92,255,.16)),
    rgba(255,255,255,.04);
}

.theme-ramadan .moreCard{
  background:
    linear-gradient(135deg, rgba(217,180,95,.16), rgba(39,136,109,.16)),
    rgba(255,255,255,.04);
}

.theme-eid .moreCard{
  background:
    linear-gradient(135deg, rgba(255,214,107,.16), rgba(69,207,255,.16)),
    rgba(255,255,255,.04);
}

.moreInner{
  text-align:center;
  padding:10px;
}

.moreCount{
  font-size:24px;
  font-weight:900;
  color:#fff;
}

.moreText{
  margin-top:6px;
  font-size:12px;
  color:rgba(245,247,255,.80);
  line-height:1.7;
}

.timeline{
  display:grid;
  gap:12px;
}

.timelineItem{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.timelineLine{
  position:absolute;
  top:18px;
  right:15px;
  bottom:-14px;
  width:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
}

.timelineItem:last-child .timelineLine{
  display:none;
}

.timelineDot{
  position:relative;
  z-index:2;
  min-width:32px;
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--a),var(--b));
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(255,77,148,.22);
}

.theme-ramadan .timelineDot{
  background:linear-gradient(135deg,#d9b45f,#27886d);
  box-shadow:0 10px 24px rgba(217,180,95,.22);
}

.theme-eid .timelineDot{
  background:linear-gradient(135deg,#ffd66b,#45cfff);
  color:#102030;
  box-shadow:0 10px 24px rgba(69,207,255,.22);
}

.timelineCard{
  flex:1;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
}

.timelineDate{
  font-weight:900;
  color:#fff;
  margin-bottom:6px;
  font-size:13px;
}

.timelineText{
  color:rgba(245,247,255,.84);
  line-height:1.85;
  font-size:14px;
}

.timelineSummary{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
  padding:14px;
}

.summaryLabel{
  font-size:12px;
  color:rgba(245,247,255,.65);
  margin-bottom:8px;
}

.summaryValue{
  font-weight:900;
  color:rgba(245,247,255,.94);
}

.footerNote{
  text-align:center;
  margin:18px 0 0;
  color:rgba(245,247,255,.56);
  font-size:12px;
}

.modalBack{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.66);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  overscroll-behavior:contain;
}

.modal{
  width:min(620px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  margin:0;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(12,16,28,.94);
  backdrop-filter: blur(12px);
  padding:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  text-align:center;
}

.modal h3{
  margin:4px 0 8px;
}

.modal p{
  margin:6px 0 12px;
}

.modalActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:14px;
}

.modalActions button{
  flex:1;
}

.modal input{
  margin:10px 0 0;
}

.lightImg{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:rgba(0,0,0,.25);
}

.lightImg img{
  width:100%;
  height:auto;
  display:block;
}

.messageSheet{
  text-align:right;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(125,92,255,.10), transparent 60%),
    radial-gradient(260px 120px at 0% 100%, rgba(255,77,148,.08), transparent 60%),
    rgba(0,0,0,.18);
  line-height:2;
  color:rgba(245,247,255,.92);
}

.theme-ramadan .messageSheet{
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(217,180,95,.10), transparent 60%),
    radial-gradient(260px 120px at 0% 100%, rgba(39,136,109,.08), transparent 60%),
    rgba(0,0,0,.18);
}

.theme-eid .messageSheet{
  background:
    radial-gradient(260px 120px at 100% 0%, rgba(69,207,255,.10), transparent 60%),
    radial-gradient(260px 120px at 0% 100%, rgba(255,214,107,.08), transparent 60%),
    rgba(0,0,0,.18);
}

.allGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.allItem{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  overflow:hidden;
  padding:0;
  cursor:pointer;
  position:relative;
  aspect-ratio:1/1;
}

.allItem img,
.allItem video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.videoItem .playBadge{
  inset:auto 10px 10px auto;
}

.hearts{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

.heart{
  position:absolute;
  bottom:-40px;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:#ff4d94;
  opacity:.14;
  animation:floatUp linear infinite;
}

.heart:before,
.heart:after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ff4d94;
}

.heart:before{
  left:-7px;
  top:0;
}

.heart:after{
  left:0;
  top:-7px;
}

.moon{
  position:absolute;
  bottom:-50px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255,214,107,.18);
  box-shadow:
    inset -6px 0 0 rgba(255,214,107,.80),
    0 0 18px rgba(255,214,107,.25);
  animation:floatUp linear infinite;
}

.moon::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:rgba(7,10,18,.88);
  transform:translateX(4px);
}

.star{
  position:absolute;
  bottom:-40px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,214,107,.95);
  box-shadow:0 0 14px rgba(255,214,107,.45);
  opacity:.22;
  animation:floatUp linear infinite;
}

.star::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1px solid rgba(255,214,107,.25);
}

.spark{
  position:absolute;
  bottom:-40px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#45cfff;
  box-shadow:0 0 14px rgba(69,207,255,.45);
  opacity:.20;
  animation:floatUp linear infinite;
}

.spark::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(255,214,107,.25);
}

@keyframes floatUp{
  from{
    transform:translateY(0) scale(.9);
    opacity:0;
  }
  12%{
    opacity:.16;
  }
  to{
    transform:translateY(-115vh) scale(1.2);
    opacity:0;
  }
}

@media (max-width: 640px){
  .wrap{
    padding:14px 12px 80px;
  }

  .hero{
    padding:20px 14px;
    border-radius:24px;
  }

  .heroTitle{
    font-size:24px;
  }

  .actionsGrid{
    grid-template-columns:1fr;
  }

  .gallery,
  .vThumbs,
  .allGrid{
    grid-template-columns:repeat(2,1fr);
  }

  .sectionHead{
    flex-direction:column;
  }

  .bar{
    padding:10px 12px;
  }
}
.theme-eid .heroMini{
  background: rgba(255,214,107,.12);
  border-color: rgba(255,214,107,.20);
  color: #ffe9a6;
}

.theme-eid .actionCard{
  border-color: rgba(255,214,107,.14);
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(255,214,107,.10), transparent 60%),
    radial-gradient(220px 120px at 0% 100%, rgba(69,207,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.theme-eid .timelineDot{
  background: linear-gradient(135deg, #ffd66b, #45cfff);
  color: #0e2230;
}

.theme-eid .moreCard{
  background:
    linear-gradient(135deg, rgba(255,214,107,.22), rgba(69,207,255,.18)),
    rgba(255,255,255,.04);
}

.theme-eid .playBadge{
  background: rgba(9,20,30,.52);
  border-color: rgba(255,214,107,.24);
}

.theme-eid .spark{
  background: #ffd66b;
  box-shadow: 0 0 16px rgba(255,214,107,.40);
}
.eidMsg .msgBody{
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  line-height: 1.9;
}