:root{
            --bg-1:#0a0a14;
            --bg-2:#12122a;
            --accent-1:#7c3aed;
            --accent-2:#ec4899;
            --accent-3:#06b6d4;
            --text:#f1f5f9;
            --muted:#94a3b8;
            --card:rgba(255,255,255,0.04);
            --border:rgba(255,255,255,0.08);
            --radius:18px;
            --shadow:0 20px 45px -15px rgba(0,0,0,0.6);
        }
        *{margin:0;padding:0;box-sizing:border-box;}
        html{scroll-behavior:smooth;}
        body{
            font-family:
                -apple-system, BlinkMacSystemFont,
                "Segoe UI", "Segoe UI Arabic",
                "Helvetica Neue", "Noto Kufi Arabic",
                "Noto Sans Arabic", "Tahoma",
                "Arial", system-ui, sans-serif;
            background:
                radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,0.25), transparent 60%),
                radial-gradient(900px 500px at 100% 0%, rgba(6,182,212,0.18), transparent 55%),
                radial-gradient(700px 500px at 50% 110%, rgba(236,72,153,0.18), transparent 60%),
                linear-gradient(160deg, var(--bg-1), var(--bg-2));
            background-attachment:fixed;
            color:var(--text);
            min-height:100vh;
            line-height:1.7;
            overflow-x:hidden;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            text-rendering:optimizeLegibility;
        }
        a{color:inherit;text-decoration:none;}
        header{
            position:sticky;
            top:0;
            z-index:50;
            padding:18px 24px;
            background:rgba(10,10,20,0.7);
            backdrop-filter:blur(14px);
            -webkit-backdrop-filter:blur(14px);
            border-bottom:1px solid var(--border);
        }
        header h1{
            font-size:clamp(15px,2vw,20px);
            font-weight:700;
            background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
            max-width:1200px;
            margin:0 auto;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            letter-spacing:.2px;
        }
        header h1 a{display:block;}
        main{
            max-width:1200px;
            margin:0 auto;
            padding:32px 20px 60px;
        }
        .playvideo{
            position:relative;
            border-radius:var(--radius);
            overflow:hidden;
            box-shadow:var(--shadow), 0 0 0 1px var(--border);
            background:#000;
            margin-bottom:42px;
        }
        .playvideo video{
            display:block;
            width:100%;
            height:auto;
            aspect-ratio:16/9;
            background:#000;
        }
        .grid-section{
            display:grid;
            grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
            gap:20px;
        }
        .grid-item{
            background:var(--card);
            border:1px solid var(--border);
            border-radius:var(--radius);
            overflow:hidden;
            transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
            contain:content;
        }
        .grid-item:hover{
            transform:translateY(-6px);
            border-color:rgba(124,58,237,0.55);
            box-shadow:0 18px 35px -12px rgba(124,58,237,0.5);
        }
        .grid-item .links{display:block;padding:10px;}
        .grid-item img{
            width:100%;
            aspect-ratio:16/10;
            object-fit:cover;
            border-radius:12px;
            display:block;
            background:linear-gradient(135deg,#1e1b4b,#0f172a);
            transition:transform .5s ease;
        }
        .grid-item:hover img{transform:scale(1.05);}
        .grid-item h2{
            font-size:14px;
            font-weight:700;
            margin:12px 4px 6px;
            color:var(--text);
            display:-webkit-box;
            -webkit-box-orient:vertical;
            overflow:hidden;
            min-height:42px;
        }
        .grid-item p{
            font-size:12px;
            color:var(--muted);
            margin:0 4px 6px;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        footer{
            border-top:1px solid var(--border);
            padding:36px 20px;
            text-align:center;
            color:var(--muted);
            font-size:14px;
            background:rgba(10,10,20,0.5);
        }
        footer p{margin:6px 0;}
        footer .ul{
            list-style:none;
            display:flex;
            justify-content:center;
            gap:22px;
            margin:16px 0;
            flex-wrap:wrap;
        }
        footer .ul a{
            color:var(--text);
            font-weight:600;
            position:relative;
            padding-bottom:3px;
            transition:color .25s;
        }
        footer .ul a::after{
            content:"";
            position:absolute;
            bottom:0;right:0;
            width:0;height:2px;
            background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
            transition:width .3s ease;
        }
        footer .ul a:hover{color:#fff;}
        footer .ul a:hover::after{width:100%;}
        footer .age{
            font-size:12px;
            opacity:.6;
            margin-top:8px;
        }
        @keyframes fadeUp{
            from{opacity:0;transform:translateY(18px);}
            to{opacity:1;transform:translateY(0);}
        }
        .grid-item{animation:fadeUp .6s ease backwards;}
        .grid-item:nth-child(1){animation-delay:.02s}
        .grid-item:nth-child(2){animation-delay:.04s}
        .grid-item:nth-child(3){animation-delay:.06s}
        .grid-item:nth-child(4){animation-delay:.08s}
        .grid-item:nth-child(5){animation-delay:.10s}
        .grid-item:nth-child(6){animation-delay:.12s}
        .grid-item:nth-child(7){animation-delay:.14s}
        .grid-item:nth-child(8){animation-delay:.16s}
        ::-webkit-scrollbar{width:10px;}
        ::-webkit-scrollbar-track{background:var(--bg-1);}
        ::-webkit-scrollbar-thumb{
            background:linear-gradient(var(--accent-1),var(--accent-2));
            border-radius:10px;
        }
        .place320{
            min-height: 151px;
            text-align: center;
            display: block;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .place300{
            min-height: 501px;
            position:relative;
            text-align:center;
            margin:0 auto;
            display:block;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        @media(max-width:640px){
            main{padding:20px 14px 50px;}
            .grid-section{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
            .grid-item h2{font-size:12.5px;}
            .grid-item p{font-size:11px;}
            header{padding:14px 16px;}
        }
        @media (prefers-reduced-motion: reduce){
            *{animation:none !important;transition:none !important;}
        }