
    :root {
      --primary: #0a0e1f;
      --secondary: #1a2332;
      --neon: rgba(32, 166, 106, 0.9);
      --alert: #ff4653;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }

    body {
      background: var(--primary);
      color: var(--neon);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .cyber-container {
      display: grid;
      grid-template-columns: 280px 1fr;
      height: 100vh;
      position: relative;
    }

    /* القائمة الجانبية الهولوغرامية */
    .hologram-nav {
      background: linear-gradient(160deg, var(--secondary) 40%, transparent);
      backdrop-filter: blur(10px);
      border-right: 2px solid var(--neon);
      box-shadow: 0 0 30px rgba(0, 255, 157, 0.1);
      padding: 1rem;
      position: relative;
      overflow: hidden;
    }

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .cyber-node {
      background: var(--primary);
      border: 2px solid var(--neon);
      padding: 1.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      clip-path: polygon(15% 0, 100% 0, 100% 80%, 85% 100%, 0 100%, 0 20%);
      position: relative;
      counter-increment: cyber-counter;
    }

    .cyber-node::before {
      content: counter(cyber-counter, decimal-leading-zero);
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 0.8em;
      opacity: 0.6;
    }

    .cyber-node:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 25px var(--neon);
    }

    /* المنطقة الرئيسية */
    .main-hub {
      position: relative;
      padding: 2rem;
      background:
        radial-gradient(circle at 50% 50%, rgb(214, 23, 23) 0%, transparent 30%);
    }

    .cyber-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    /* التأثيرات الخاصة */
    .cyber-glitch {
      position: fixed;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 999;
      background:
        linear-gradient(0deg, transparent 50%, rgba(0,255,157,0.05) 50%),
        repeating-linear-gradient(45deg,
        rgba(0,0,0,0.1) 0px,
        rgba(0,0,0,0.1) 2px,
        transparent 2px,
        transparent 4px);
      animation: glitch 7s infinite;
    }

    @keyframes glitch {
      0% { background-position: 0 0; }
      50% { background-position: 100px 50vh; }
    }

    /* التصميم التفاعلي */
    .cyber-node.active {
      background: var(--neon);
      color: var(--primary);
    }

    .cyber-node.active::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      background: var(--alert);
      right: -5px;
      top: -5px;
      border-radius: 50%;
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    #err{
      display: none;


    }
    @media (max-width: 768px) {
      .cyber-container{
        display: none;
      }

      #err{
        display: block;
        text-align: center;
        color: red;

      }
    }

  