cat > /opt/hype-agent/dashboard/style.css <<'EOF'
html {

    background:#000000;

}


body {

    margin:0;
    padding:0;

    background:#000000 !important;
    color:#f9fafb;

    font-family:Arial, sans-serif;

}


header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 40px;

    background:#1f2937;

    color:#f9fafb;

}


header h1 {

    margin:0;

    color:#f9fafb;

}


#status {

    padding:8px 15px;

    border-radius:8px;

    background:#065f46;

    color:white;

}



/* ZONE TRADING */

main {

    padding:30px;

}



.trading-layout {

    display:grid;

    grid-template-columns:20% 60% 20%;

    gap:20px;

    align-items:stretch;

    height:650px;

}



/* PANNEAUX */

.side-panel {

    background:#1f2937;

    color:#f9fafb;

    border-radius:12px;

    padding:20px;

    border:1px solid #374151;

    height:610px;

}


.side-panel h2,
.side-panel h3 {

    color:#f9fafb;

}



/* GRAPHIQUE */

.chart-card {

    background:#1f2937;

    color:#f9fafb;

    border-radius:12px;

    padding:20px;

    border:1px solid #374151;

    height:610px;

}


.chart-card h2 {

    color:#f9fafb;

}



#chart {

    width:100%;

    height:560px;

}



/* KPI */

.cards-layout {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-top:30px;

}



.card {

    background:#1f2937;

    color:#f9fafb;

    border-radius:12px;

    padding:20px;

    border:1px solid #374151;

}



.card h2 {

    color:#f9fafb;

}


.card strong {

    color:#f9fafb;

    font-size:18px;

}


.order-book-panel {
    overflow:hidden;
}

.order-book-header {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    padding:8px 0;
    font-size:12px;
    color:#9ca3af;
    border-bottom:1px solid #374151;
}

.order-book-header span:nth-child(2),
.order-book-header span:nth-child(3) {
    text-align:right;
}


.order-book-side {
    margin-top:8px;
}


.order-book-row {
    position:relative;

    display:grid;
    grid-template-columns:1fr 1fr 1fr;

    gap:8px;

    padding:4px 0;

    font-size:12px;

    font-variant-numeric:
        tabular-nums;
}


.order-book-row span {
    position:relative;
    z-index:2;
}


.order-book-row span:nth-child(2),
.order-book-row span:nth-child(3) {
    text-align:right;
}


.order-book-row.ask .price {
    color:#f43f5e;
}


.order-book-row.bid .price {
    color:#10b981;
}


.order-book-depth {
    position:absolute;
    top:0;
    bottom:0;
    right:0;

    opacity:0.12;

    z-index:1;
}


.order-book-row.ask .order-book-depth {
    background:#f43f5e;
}


.order-book-row.bid .order-book-depth {
    background:#10b981;
}


.order-book-spread {
    margin:10px 0;

    padding:10px 0;

    border-top:1px solid #374151;
    border-bottom:1px solid #374151;
}


.order-book-spread > div {
    display:flex;
    justify-content:space-between;

    margin:4px 0;

    font-size:13px;
}


#best-ask {
    color:#f43f5e;
}


#best-bid {
    color:#10b981;
}

.main-header {
    display:grid;
    grid-template-columns:auto 1fr 1fr auto;
    align-items:center;
    gap:24px;
}


.header-portfolio,
.header-wallet {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:40px;

    padding:0 18px;

    border-radius:8px;

    font-variant-numeric:
        tabular-nums;
}


.header-portfolio {
    border:1px solid #065f46;
    background:rgba(6,95,70,0.18);
}


.header-wallet {
    border:1px solid #7f1d1d;
    background:rgba(127,29,29,0.18);
}


.header-label {
    font-size:11px;
    color:#9ca3af;
    letter-spacing:0.08em;
}


.header-separator {
    color:#4b5563;
}

EOF