/* ===============================
   RESET
=============================== */
/* HEADER FIX */
.header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;

    height:100px;              /* 🔥 control header size */
    overflow:hidden !important;
background:#000;
    border-bottom:2px solid #033;
    
}

/* LOGO FIX */
.logo{
    max-height:60px !important;
    height:60px !important;
    width:auto !important;
    object-fit:contain !important;
    display:block;
}

/* TITLE */
.title{
    font-size:32px;
    color:#0f0;
    text-shadow:0 0 10px #0f0;
    font-weight:bold;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ===============================
   BODY (ONLY ONE!)
=============================== */
body{
    margin:0;
    font-family:"Segoe UI",Tahoma,sans-serif;
    direction:rtl;

    /* LED BACKGROUND */
    background:#000;
    background-image: radial-gradient(#003300 1px, transparent 1px);
    background-size:3px 3px;

    color:#0f0;
}

/* ===============================
   HEADER
=============================== */
.header{
    text-align:center;
    font-size:38px;
    padding:20px;
    color:#0f0;
    text-shadow:0 0 10px #0f0, 0 0 20px #0f0;
}

/* ===============================
   BOARD LAYOUT
=============================== */
.board{
    display:flex;
    width:100%;
    gap:10px;
    padding:10px;
}

.col{
    width:50%;
}

/* ===============================
   ROW
=============================== */
.row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px;
    border-bottom:1px solid #033;
}

/* ===============================
   CURRENCY
=============================== */
.currency-box{
    display:flex;
    align-items:center;
    gap:8px;
    width:40%;
}

.flag{
    width:32px;
    height:22px;
    border-radius:3px;
}

.currency-name{
    font-size:18px;
    font-weight:700;
    color:#0f0;
}

/* ===============================
   CODE + PRICES
=============================== */
.code{
    width:15%;
    text-align:center;
    font-size:18px;
    color:#0ff;
}

.buy{
    width:20%;
    text-align:center;
    font-size:26px;
    font-weight:900;
    color:#00ff00;
    text-shadow:0 0 8px #00ff00;
}

.sell{
    width:20%;
    text-align:center;
    font-size:26px;
    font-weight:900;
    color:#ff2a2a;
    text-shadow:0 0 8px #ff2a2a;
}

/* ===============================
   FOOTER
=============================== */
.footer{
    text-align:center;
    padding:10px;
    font-size:14px;
    color:#0f0;
}

/* ===============================
   MOBILE
=============================== */
@media (max-width:900px){

    .header{
        font-size:26px;
    }

    .currency-name{
        font-size:14px;
    }

    .code{
        font-size:14px;
    }

    .buy,.sell{
        font-size:18px;
    }

    .flag{
        width:24px;
        height:16px;
    }
}