body { margin:0; background:#0f172a; color:#e2e8f0; font-family: 'Segoe UI', Arial, sans-serif; }
header { display:flex;justify-content:space-between;align-items:center;padding:24px 6vw 12px 6vw;background:transparent; }
.logo { font-size:2.2em; font-weight:bold; color:#60a5fa; letter-spacing:1px;}
.logo span { color:#a78bfa; }
nav a { color:#64748b; text-decoration:none; margin:0 10px;font-weight:500;font-size:1.08em;}
nav a:hover { color:#fff; }
main { max-width:1200px; margin:0 auto; padding:0 20px; }
.hero { text-align:center;margin:40px 0 35px 0; }
.hero h1 { font-size:2.5em; font-weight:800; color:#fff; letter-spacing:0.5px; }
.hero p { color:#94a3b8;font-size:1.3em;margin:12px 0 32px 0;}
.search-form { display:flex;justify-content:center;gap:10px; }
.search-form input[type="text"] {padding:12px;font-size:1.1em;border-radius:8px 0 0 8px;border:none;background:#1e293b;color:#e2e8f0;outline:none;width:340px;}
.search-form button {padding:12px 30px;border:none;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#6366f1,#38bdf8);color:#fff;font-weight:bold;cursor:pointer;font-size:1.1em;transition:background 0.2s;}
.search-form button:hover {background:linear-gradient(90deg,#a78bfa,#38bdf8);}
.dashboard {margin-top:30px;}
.tabs {display:flex;gap:8px;}
.tab-btn {background:#1e293b;color:#60a5fa;padding:10px 25px;border:none;border-radius:8px 8px 0 0;font-weight:bold;cursor:pointer;font-size:1.09em;transition:background 0.18s;}
.tab-btn.active {background:linear-gradient(90deg,#6366f1,#38bdf8);color:#fff;}
.tab-content {background:#1e293b;padding:34px 28px 22px 28px;border-radius:0 14px 14px 14px;min-height:350px;}
.tab-page {display:none;}
.tab-page.active {display:block;}
footer {text-align:center;padding:22px 0 10px 0;margin-top:60px;color:#64748b;}
/* إضافة شارتات وجداول عصرية */
.chart-container {width:100%;max-width:540px;margin:30px auto;}
.card {background:#111827;border-radius:14px;padding:22px 18px;margin-bottom:23px;box-shadow:0 4px 16px #0001;}
h2, h3 {color:#60a5fa;font-weight:700;}
.table-modern {width:100%;background:#0f172a;color:#e2e8f0;border-radius:8px;overflow:hidden;margin:10px 0 30px 0;}
.table-modern th {background:#1e293b;color:#38bdf8;padding:8px;font-weight:bold;}
.table-modern td {padding:8px;border-bottom:1px solid #23294b;}
@media (max-width:700px){
  main {padding:0 6px;}
  .dashboard {padding:0;}
  .tab-content {padding:15px 6px 7px 6px;}
}