/* Nokia/Symbian-like colorful tiles */
:root{
  --bg:#0f1115;
  --card:#161a22;
  --text:#e7e9ee;
  --muted:#9aa3b2;
  --radius:22px;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 80% -20%, #243145, transparent 60%), var(--bg);
  color:var(--text);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; position:sticky; top:0; backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(22,26,34,.85), rgba(22,26,34,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index: 10;
}
.brand{display:flex; flex-direction:column; gap:2px}
.brand-title{font-weight:800; letter-spacing:.6px}
.brand-sub{font-size:.8rem; color:var(--muted)}
.status{display:flex; gap:10px; align-items:center; color:var(--muted); font-weight:600}
.status .dot{width:10px; height:10px; border-radius:50%; background:#38f26b; box-shadow:0 0 0 6px rgba(56,242,107,.1)}

.wrap{width:min(1200px, 94vw); margin:28px auto; display:grid; gap:22px}

.logo-card{
  background:var(--card);
  border-radius: var(--radius);
  padding:18px;
  min-height:120px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.logo-card img{max-height:80px; object-fit:contain}
.logo-card .logo-fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:.3}
.logo-card h1{margin:0; font-weight:800}
.logo-card p{margin:6px 0 0 0}

.tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:18px;
}

.tile{
  display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-content:flex-end;
  min-height:160px; border-radius: calc(var(--radius) + 4px);
  padding:16px; text-decoration:none; color:white; position:relative; overflow:hidden;
  box-shadow: var(--shadow);
  transform: translateY(0); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  isolation:isolate;
}
.tile:hover{ transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.45); filter:saturate(1.1)}
.tile:active{ transform: translateY(0) scale(.99)}

.tile .ico{
  width:56px; height:56px; display:grid; place-items:center;
  background: rgba(255,255,255,.16); backdrop-filter: blur(3px);
  border-radius: 18px;
}
.tile .ico svg{width:30px; height:30px; display:block}

.tile span{font-weight:700; font-size:1.1rem; text-shadow: 0 1px 0 rgba(0,0,0,.25)}

/* Colorful gradients for each tile */
.t1{ background: linear-gradient(135deg,#00c6ff,#0072ff)}
.t2{ background: linear-gradient(135deg,#ff9966,#ff5e62)}
.t3{ background: linear-gradient(135deg,#7F00FF,#E100FF)}
.t4{ background: linear-gradient(135deg,#36D1DC,#5B86E5)}
.t5{ background: linear-gradient(135deg,#f7971e,#ffd200)}
.t6{ background: linear-gradient(135deg,#11998e,#38ef7d)}
.t7{ background: linear-gradient(135deg,#ee0979,#ff6a00)}
.t8{ background: linear-gradient(135deg,#00F260,#0575E6)}
.t9{ background: linear-gradient(135deg,#b92b27,#1565C0)}
.t10{ background: linear-gradient(135deg,#02AAB0,#00CDAC)}

/* Ripple animation */
.ripple{ position:relative; overflow:hidden }
.ripple::after{
  content:""; position:absolute; inset:auto; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.35); transform:scale(0); opacity:.8; pointer-events:none;
  transition:none; top:var(--y); left:var(--x);
}
.ripple:active::after{
  animation:ripple .6s ease;
}
@keyframes ripple{
  from{transform:translate(-50%,-50%) scale(.1); opacity:.5}
  to{transform:translate(-50%,-50%) scale(18); opacity:0}
}

.foot{color:var(--muted); text-align:center; padding:30px 0}

@media (max-width:480px){
  .tile{min-height:130px}
  .tile .ico{width:50px;height:50px}
}

/* Splash screen */
.splash{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff; z-index:9999;
  animation: fadeOut 1s ease 2s forwards;
}
.splash-inner{ text-align:center; animation: zoomIn 1s ease }
.splash-logo{ max-width:160px; margin-bottom:20px; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)) }
@keyframes fadeOut{ to{opacity:0; visibility:hidden} }
@keyframes zoomIn{ from{transform:scale(.7); opacity:.5} to{transform:scale(1); opacity:1} }

/* White background for logo card */
.logo-card.white-bg{ background:#fff; color:#000; }
.logo-card.white-bg img{ filter: invert(1) contrast(100%) }