:root{
  --sky:#0ea5e9;
  --sky-dark:#0284c7;
  --sky-light:#38bdf8;
  --bg:#f1f5f9;
  --text:#1e293b;
  --white:#ffffff;
  --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ========== الشريط العلوي ========== */
.navbar{
  background:var(--sky);
  color:var(--white);
  box-shadow:0 4px 20px rgba(14,165,233,.3);
  position:sticky;
  top:0;
  z-index:100;
}
.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.logo{
  font-size:1.5rem;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.logo-icon{font-size:1.7rem;}

.tabs{display:flex;gap:8px;flex-wrap:wrap;}
.tab{
  background:rgba(255,255,255,.15);
  color:var(--white);
  border:2px solid rgba(255,255,255,.35);
  padding:9px 18px;
  border-radius:50px;
  font-family:'Cairo',sans-serif;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  transition:.25s;
}
.tab:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);}
.tab.active{background:var(--white);color:var(--sky-dark);border-color:var(--white);}

/* ========== الحاوية ========== */
.container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:32px 20px;
  flex:1;
}
.view{display:none;animation:fade .35s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.welcome{text-align:center;padding:60px 20px;}
.welcome h1{color:var(--sky-dark);font-size:2.2rem;margin-bottom:14px;}
.welcome p{font-size:1.1rem;color:#475569;margin-bottom:8px;}
.welcome .hint{color:var(--sky);font-weight:600;margin-top:20px;}

.page-title{
  color:var(--sky-dark);
  font-size:1.7rem;
  margin-bottom:24px;
  text-align:center;
}

/* ========== المربعات الستة ========== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
}
.card{
  background:var(--sky);
  color:var(--white);
  border-radius:var(--radius);
  padding:34px 20px;
  text-align:center;
  cursor:pointer;
  transition:.28s;
  box-shadow:0 6px 18px rgba(14,165,233,.28);
  border:none;
  font-family:'Cairo',sans-serif;
}
.card:hover{
  transform:translateY(-7px);
  background:var(--sky-light);
  box-shadow:0 14px 30px rgba(14,165,233,.42);
}
.card .icon{font-size:2.6rem;display:block;margin-bottom:12px;}
.card .name{font-size:1.2rem;font-weight:700;display:block;}
.card .count{font-size:.85rem;opacity:.85;margin-top:6px;display:block;}

/* ========== قائمة الملفات ========== */
.back-btn{
  background:var(--white);
  color:var(--sky-dark);
  border:2px solid var(--sky);
  padding:9px 20px;
  border-radius:50px;
  font-family:'Cairo',sans-serif;
  font-weight:600;
  cursor:pointer;
  margin-bottom:22px;
  transition:.25s;
}
.back-btn:hover{background:var(--sky);color:var(--white);}

.files{display:flex;flex-direction:column;gap:14px;}
.file-item{
  background:var(--white);
  border-radius:16px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border-right:5px solid var(--sky);
  transition:.25s;
  flex-wrap:wrap;
}
.file-item:hover{transform:translateX(-5px);box-shadow:0 6px 18px rgba(0,0,0,.1);}
.file-name{font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:10px;}
.file-actions{display:flex;gap:10px;}
.act{
  padding:8px 16px;
  border-radius:50px;
  border:none;
  font-family:'Cairo',sans-serif;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:.25s;
  text-decoration:none;
  display:inline-block;
}
.act-view{background:var(--sky);color:var(--white);}
.act-view:hover{background:var(--sky-dark);}
.act-dl{background:#e0f2fe;color:var(--sky-dark);}
.act-dl:hover{background:#bae6fd;}

.empty{
  text-align:center;
  padding:50px 20px;
  color:#94a3b8;
  background:var(--white);
  border-radius:var(--radius);
  font-size:1.05rem;
}

/* ========== النافذة المنبثقة ========== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.8);
  z-index:200;
  padding:16px;
  backdrop-filter:blur(4px);
}
.modal.open{display:flex;align-items:center;justify-content:center;}
.modal-box{
  background:var(--white);
  border-radius:var(--radius);
  width:100%;
  max-width:950px;
  height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-head{
  background:var(--sky);
  color:var(--white);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modal-head h3{font-size:1.1rem;font-weight:700;}
.close-btn{
  background:rgba(255,255,255,.2);
  color:var(--white);
  border:none;
  width:34px;height:34px;
  border-radius:50%;
  font-size:1.1rem;
  cursor:pointer;
  transition:.25s;
}
.close-btn:hover{background:rgba(255,255,255,.4);}
.modal-body{flex:1;background:#334155;overflow:auto;display:flex;align-items:center;justify-content:center;}
.modal-body iframe{width:100%;height:100%;border:none;}
.modal-body img{max-width:100%;max-height:100%;object-fit:contain;}
.modal-foot{padding:12px 20px;text-align:center;background:var(--white);}
.dl-btn{
  display:inline-block;
  background:var(--sky);
  color:var(--white);
  padding:11px 32px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  transition:.25s;
}
.dl-btn:hover{background:var(--sky-dark);}

/* ========== الفوتر ========== */
.footer{
  background:var(--sky-dark);
  color:var(--white);
  padding:18px 20px;
  font-size:.9rem;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.footer-text{text-align:center;}
.footer-text p{margin:0;line-height:1.5;}

/* الأيقونة: مقاس ثابت صارم لا يتغير مهما كان محتوى الـ SVG */
.footer-social{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  max-width:34px;
  max-height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:var(--white);
  transition:.25s;
  flex-shrink:0;
  overflow:hidden;
  line-height:0;
}
.footer-social svg{
  width:18px;
  height:18px;
  max-width:18px;
  max-height:18px;
  fill:currentColor;
  display:block;
}
.footer-social:hover{
  background:rgba(255,255,255,.3);
  transform:translateY(-2px) scale(1.05);
}

/* ========== الهواتف ========== */
@media(max-width:600px){
  .nav-inner{justify-content:center;}
  .logo{font-size:1.3rem;}
  .tab{padding:7px 14px;font-size:.85rem;}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .card{padding:24px 10px;}
  .card .icon{font-size:2rem;}
  .card .name{font-size:.95rem;}
  .welcome h1{font-size:1.6rem;}
  .file-item{flex-direction:column;align-items:stretch;text-align:center;}
  .file-actions{justify-content:center;}
  .modal-box{height:95vh;}
}
@media(max-width:500px){
  .footer-inner{justify-content:center;text-align:center;}
}

/* ========== زر "عن الموقع" (مختلف شكلاً عن الفرق) ========== */
.tab-about{
  background:transparent;
  border:2px solid rgba(255,255,255,.6);
}
.tab-about:hover{background:rgba(255,255,255,.15);}
.tab-about.active{
  background:var(--white);
  color:var(--sky-dark);
  border-color:var(--white);
}

/* ========== صندوق "عن الموقع" ========== */
.about-box{
  background:var(--white);
  border-radius:var(--radius);
  padding:34px 28px;
  max-width:700px;
  margin:0 auto;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border-right:5px solid var(--sky);
}
.about-box p{
  font-size:1.1rem;
  line-height:1.9;
  color:var(--text);
  text-align:center;
}

@media(max-width:600px){
  .about-box{padding:24px 18px;}
  .about-box p{font-size:1rem;}
}