:root{
  --bg:#0b0b0f; --panel:#121219; --panel2:#161625; --text:#fff;
  --accent:#e41d67; --accent2:#3aa3ff; --glow:#ff8c00; --glow2:#32cd32;
  --radius:18px; --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Tahoma, Arial, sans-serif; color:var(--text); background:radial-gradient(1200px 800px at 50% -10%, #1a1a2e 0%, #0b0b0f 55%, #06060a 100%);
  display:flex; flex-direction:column; min-height:100vh;
}
header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(22,22,37,.85), rgba(22,22,37,.6));
  backdrop-filter: blur(6px);
  padding:18px; text-align:center; font-size:2rem; font-weight:800; letter-spacing:.5px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.container{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.wrapper{
  width:100%; max-width:1200px; margin:0 auto;
}
.center{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}


.grid{
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  width:100%;
}
.tile{
  background:linear-gradient(135deg,var(--panel2), var(--panel));
  border:1px solid #22243a; border-radius:var(--radius); padding:26px; min-height:140px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  text-decoration:none; color:var(--text); font-weight:800; font-size:1.25rem;
  box-shadow:var(--shadow); transform:translateY(0); transition:transform .25s, box-shadow .25s, background .25s;
}
.tile:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 28px 70px rgba(0,0,0,.55); background:linear-gradient(135deg,#1d1d30, #12121c); }
.tile span{opacity:.85}


.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 22px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#22243a; color:#fff; border:1px solid #2d3050;
  padding:12px 18px; border-radius:12px; text-decoration:none; cursor:pointer;
  font-weight:700; transition:transform .2s, background .2s;
}
.btn:hover{ background:#2b2e52; transform:translateY(-2px) }
.btn-accent{ background:linear-gradient(135deg,var(--accent),#ff5faa); border:none }
.btn-accent:hover{ filter:brightness(1.08) }
.btn-ghost{ background:transparent; border:1px solid #2d3050 }

.player{
  background:linear-gradient(180deg,#0c0c12,#0a0a14); border:1px solid #1e2037; border-radius:20px;
  padding:14px; box-shadow:var(--shadow); margin-bottom:20px;
}
.player video,.player audio{ width:100%; height:auto; border-radius:14px; outline:none }

.cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
}
.card{
  background:linear-gradient(135deg,#141422,#10101a); border:1px solid #22233a; border-radius:16px; overflow:hidden; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform:translateY(-4px); border-color:#3a3f6b; box-shadow:0 18px 55px rgba(0,0,0,.55) }
.card-thumb{ width:100%; height:140px; object-fit:cover; background:#0b0b10 }
.card-title{ padding:12px 14px; font-weight:700; font-size:1rem; text-align:center; direction:rtl }

/* فوتر با ساعت/تاریخ بزرگ و انیمیشن */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #000, #04040a);
  border-top: 1px solid #171729;
  direction: ltr; /* Ensure Left-to-Right layout */
}

#clock, #date {
  font-weight: 900;
  letter-spacing: 0.3px;
  line-height: 1.15;
  text-shadow: 0 0 16px rgba(255, 140, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.45);
  transform-origin: center;
  animation: pulse 2s infinite ease-in-out;
}

#clock {
  font-size: 2.2rem;
  color: var(--glow);
}

#date {
  font-size: 1.8rem;
  color: var(--glow2);
  text-shadow: 0 0 18px rgba(50, 205, 50, 0.8), 0 0 34px rgba(50, 205, 50, 0.45);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}


.page{
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.page .wrapper{ max-width:1100px }
@media (max-width:680px){
  header{ font-size:1.6rem }
  #clock{ font-size:1.6rem } #date{ font-size:1.3rem }
}