:root {
    --primary:#7fb6cf;
    --dark:#4a8ca8;
    --bg:#f2f4f6;
    --white:#ffffff;
    --text:#2c2c2c;
}

/* RESET */
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI", Tahoma, sans-serif;
}

body {
    min-height:100vh;
    background: linear-gradient(135deg, var(--bg), var(--white));
    display:flex;
    flex-direction:column;
    color:var(--text);
}

/* HEADER */
header {
    height:90px;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

header h1 {
    font-size:26px;
    letter-spacing:3px;
    font-weight:700;
    color:var(--dark);
    animation: brand 1s ease forwards;
    opacity:0;
}

/* HERO */
.hero {
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.hero-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    width:100%;
    max-width:520px;
    padding:60px 50px;
    border-radius:26px;
    text-align:center;
    box-shadow:
        0 40px 80px rgba(0,0,0,.08),
        0 10px 25px rgba(0,0,0,.05);
    animation: enter 0.8s ease forwards;
    opacity:0;
}

/* TEXT */
.hero-card h2 {
    font-size:30px;
    margin-bottom:10px;
}

.subtitle {
    color:var(--dark);
    margin-bottom:30px;
    font-size:16px;
}

/* CODE EDITOR */
.code-editor {
    background: linear-gradient(180deg, #0f172a, #020617);
    border-radius:18px;
    overflow:hidden;
    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    margin-bottom:30px;
}

.editor-header {
    padding:12px;
    display:flex;
    gap:10px;
    background:rgba(255,255,255,.08);
}

.editor-header span {
    width:12px;
    height:12px;
    border-radius:50%;
}

.editor-header span:nth-child(1){background:#ef4444;}
.editor-header span:nth-child(2){background:#facc15;}
.editor-header span:nth-child(3){background:#22c55e;}

pre {
    padding:22px;
    min-height:160px;
    font-size:15px;
    color:#38bdf8;
    text-align:left;
    direction:ltr;
}

/* LOADING DOTS */
.loading-dots {
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:10px;
}

.loading-dots span {
    width:10px;
    height:10px;
    background:var(--primary);
    border-radius:50%;
    opacity:0;
    animation: dotPulse 1.5s infinite;
}

.loading-dots span:nth-child(1){animation-delay:0s;}
.loading-dots span:nth-child(2){animation-delay:.2s;}
.loading-dots span:nth-child(3){animation-delay:.4s;}

/* STATUS */
.status {
    margin-top:14px;
    font-size:14px;
    color:var(--dark);
    opacity:.85;
}

/* FOOTER */
footer {
    text-align:center;
    padding:18px;
    font-size:14px;
    color:#9ca3af;
}

/* ANIMATIONS */
@keyframes dotPulse {
    0% { opacity:0; transform:translateY(0); }
    30% { opacity:1; transform:translateY(-6px); }
    60% { opacity:0; transform:translateY(0); }
}

@keyframes enter {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes brand {
    from { letter-spacing:12px; opacity:0; }
    to { letter-spacing:3px; opacity:1; }
}
/* ===== BACKGROUND DOTS ===== */
#bgDots {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
header,
.hero,
footer {
    position: relative;
    z-index: 1;
}
/* ===============================
   MOBILE OPTIMIZATION
=============================== */
@media (max-width: 600px) {

    /* Card padding أقل */
    .hero-card {
        padding: 20px 22px;
        border-radius: 22px;
    }


    /* تكبير الكود أنيميشن */
    .code-editor {
        margin-bottom: 20px;
    }

    pre {
        font-size: 16px;          /* كان 15 */
        min-height: 190px;        /* أكبر */
        padding: 20px 18px;       /* أنسب للموبايل */
    }


}