* { box-sizing: border-box; }
@font-face {
  font-family: 'Estedad';
  src: url('fonts/Estedad-Regular.ttf') format('truetype');
  font-display: swap;
}

:root{
  --bg-dark: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  --bg-light: linear-gradient(135deg, #e0f7fa, #ffffff, #e9f8ee);
  --text-dark: #ffffff;
  --text-light: #111111;
  --card-bg-dark: rgba(255,255,255,0.06);
  --card-bg-light: rgba(0,0,0,0.06);
  --accent: #00c853;
  --glass-dark: rgba(20,24,34,0.45);
  --glass-light: rgba(255,255,255,0.55);
  --chip-dark: rgba(255,255,255,0.10);
  --chip-light: rgba(0,0,0,0.08);
  --neon-green: #00ff88;
  --neon-red: #ff4d6d;
}

body { font-family: 'Estedad', sans-serif; background: var(--bg-dark); color: var(--text-dark); direction: rtl; margin: 0; transition: background .5s, color .5s; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.light { background: var(--bg-light); color: var(--text-light); }

header.site-header {
  position: fixed; inset-inline: 0; top: 0;
  min-height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; z-index: 1000;
  background: var(--glass-dark);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: visible;
}
body.light header.site-header { background: var(--glass-light); border-bottom-color: rgba(0,0,0,0.08); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 42px; height: 42px; border-radius: 8px; display:block; }
.brand-title {
  font-weight: 900;
  font-size: 1.25rem;
  background: linear-gradient(90deg, #30d7ff, #37e06f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
  line-height: 1.3;
  vertical-align: middle;
  display: inline-block;
  padding: 2px 0;
}

.header-actions { display:flex; align-items:center; gap:10px; }
.chip-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:12px; background:var(--chip-dark); color:inherit; border:none; cursor:pointer; font-size:18px; transition: transform .2s, background .3s; }
.chip-btn:hover { transform: translateY(-2px); }
body.light .chip-btn { background: var(--chip-light); }

.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .3s; z-index:1500; }
.backdrop.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top:0; left:0; height:100vh; width:320px; max-width:88vw;
  background: var(--card-bg-dark);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 6px 0 24px rgba(0,0,0,0.35);
  transform: translateX(-100%); opacity: 0;
  transition: transform .35s, opacity .25s;
  z-index:1600; padding:16px; display:flex; flex-direction:column; gap:6px;
  overflow:auto;
}
body.light .drawer { background: var(--card-bg-light); }
.drawer.open { transform: translateX(0); opacity:1; }
.drawer .title { font-weight:800; margin:8px 4px 12px; display:flex; justify-content:space-between; align-items:center; }
.drawer a { display:block; padding:10px 12px; border-radius:10px; color:inherit; text-decoration:none; }
.drawer a:hover { background: rgba(0,0,0,0.08); }
body.light .drawer a:hover { background: rgba(0,0,0,0.06); }

main { padding: 96px 20px 24px; max-width: 1100px; margin: 0 auto; }

h1,h2,h3,h4 { margin-bottom:10px; text-align:center; }
h1 { font-size: 2.1rem; line-height: 1.05; margin-top: 0; }

a.button { display:inline-block; padding:0.7em 1.6em; margin:10px; background-color:var(--accent); color:#fff; border-radius:12px; text-decoration:none; font-weight:800; transition:.3s; box-shadow:0 8px 24px rgba(0,200,83,.25); }
a.button:hover { background-color:#009624; transform: translateY(-2px); }

.hr-6 { border:0; border-top:1px solid #00bb8c; margin:40px auto; width:70%; }

.fade-section { opacity:0; transform: translateY(40px); transition: all .8s ease-out !important; }
.fade-section.visible { opacity:1; transform: translateY(0); }

.container-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
  align-items: start;
}

@media (max-width: 600px) {
  .container-grid {
    grid-template-columns: 1fr;
  }
}

.container-grid > .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.card, .fldset-class {
  background: var(--card-bg-dark);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: background .5s;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 140px;
}
body.light .card, body.light .fldset-class { background: var(--card-bg-light); }

.card img { display:block; margin: 0 auto 10px; max-width: 90px; height: auto; }
.fldset-class { border: none; height: auto; }

.logo { display:block; margin: 0 auto 10px; max-width: 100px; height: auto; }

footer { margin-top: 40px; text-align:center; padding-bottom:20px; }
footer .site-logo { margin-bottom: 12px; max-width: 300px; width: 100%; height: auto; }

.social-icons { display:inline-flex; gap:12px; align-items:center; justify-content:center; }
.social-icons img { width: 28px; height: 28px; object-fit:contain; border-radius:6px; }

.section-title { font-size: 1.8em; transition: color .3s ease; }
body.dark .section-title { color: var(--text-dark); }
body.light .section-title { color: var(--text-light); }

.motd { font-size: 1.2em; font-weight: 900; letter-spacing: .2px; }
.status { text-shadow: none; }
.status.online { color: var(--neon-green); text-shadow: 0 0 6px rgba(0,255,136,.75), 0 0 14px rgba(0,255,136,.45), 0 0 26px rgba(0,255,136,.35); }
.status.offline { color: var(--neon-red); text-shadow: 0 0 6px rgba(255,77,109,.75), 0 0 14px rgba(255,77,109,.45), 0 0 26px rgba(255,77,109,.35); }

.intro {
  margin: 0 auto;
  max-width: 780px;
  font-size: clamp(0.98rem, 1.7vw, 1.06rem);
  line-height: 1.7;
  text-align: center;
  color: inherit;
}

.status-actions {
  display:flex;
  gap:12px;
  justify-content: space-between;
  align-items:center;
}
.status-actions a.button {
  flex:1;
  text-align:center;
}

#infos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.theme-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.theme-icon:hover {
  transform: rotate(30deg);
}

@media (max-width: 420px) {
  header.site-header { min-height: 64px; padding-inline: 12px; }
  .brand-title { font-size: 1.05rem; }
  .logo { max-width: 70px; }
  .status-actions { flex-wrap:wrap; }
  .social-icons img { width:24px; height:24px; }
  .theme-icon { width: 20px; height: 20px; }
}