body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #00ff66;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}

/* FELSŐ SÁV */
#top {
    margin-top: 15px;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* PANEL – PNG háttér, fix arány */
#panel {
    position: relative;
    width: 90%;
    max-width: 1028px;
    aspect-ratio: 1028 / 805;
    margin: 20px auto;
    background-image: url("panel.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* KÖRÖK – csak ezek kapnak 40×40-es dobozt */
.pv_v,
.pv_w,
.load_w,
.grid_v,
.batt,
.soc,
#charge_label,
#discharge_label {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 1.2rem;
    text-shadow:
        0 0 2px #000,
        0 0 4px #000,
        0 0 6px #00ff66,
        0 0 12px #00ff66;
}

/* POZÍCIÓK */
.pv_v { left: 26.5%; top: 22%; }
.pv_w { left: 28%; top: 40%; }
.load_w { left: 6.5%; top: 67%; }
.grid_v { right: 5%; top: 29%; }
.batt { right: 28%; top: 68%; }
.soc { right: 28%; top: 78%; }
#charge_label,
#discharge_label { right: 28%; top: 52%; }

/* FLOW – ezek NEM kapnak fix méretet */
#flow,
#flow_pv,
.flow-right,
.flow-left,
.flow-pv {
    position: absolute;
    text-shadow:
        0 0 2px #000,
        0 0 4px #000,
        0 0 6px #00ff66,
        0 0 12px #00ff66;
}

/* BATT → LOAD/GRID (vízszintes, szélesebb) */
#flow {
    left: 32%;
    top: 54%;
    width: 33%;
    height: 0.6%;
    overflow: hidden;
    display: none;
    z-index: 9999;
}

.flow-right {
    display: block;
    background: linear-gradient(90deg, transparent, #00ff66, transparent);
    background-size: 200% 100%;
    animation: moveRight 4s linear infinite;
}

.flow-left {
    display: block;
    background: linear-gradient(90deg, transparent, #00ff66, transparent);
    background-size: 200% 100%;
    animation: moveLeft 4s linear infinite;
}

@keyframes moveRight {
    from { background-position: 200% 0; }
    to   { background-position: 0 0; }
}

@keyframes moveLeft {
    from { background-position: 0 0; }
    to   { background-position: 200% 0; }
}

/* PV → BATT (FÜGGŐLEGES) */
#flow_pv {
    left: 16%;
    top: 38%;
    width: 0.6%;
    height: 8%;
    overflow: hidden;
    display: none;
    z-index: 9999;
}

.flow-pv {
    display: block;
    background: linear-gradient(
        180deg,
        transparent 0%,
        #00ff66 40%,
        #ffffff 50%,
        #00ff66 55%,
        transparent 100%
    );
    background-size: 100% 200%;
    animation: flowPVvertical 4s linear infinite;
}

@keyframes flowPVvertical {
    from { background-position: 0 200%; }
    to   { background-position: 0 0%; }
}

/* ALSÓ SÁV */
#bottom {
    margin-top: 10px;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.warning-icon {
    width: 40px;
    height: 40px;
    background-image: url("warning.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* WARNING OVERLAY – egyszerű, tiszta */
.warning {
    background-image: url("warning.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#menu {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 1.2rem;
    font-family: 'Orbitron', sans-serif;
}

.menu-item {
    color: #00ff66;
    text-decoration: none;
    padding: 8px 14px;
    border: 2px solid #00ff66;
    border-radius: 6px;
    text-shadow:
        0 0 2px #000,
        0 0 4px #000,
        0 0 6px #00ff66,
        0 0 12px #00ff66;
    transition: 0.2s;
}

.menu-item:hover {
    background: #00ff66;
    color: #000;
}
.page {
    display: none;
}

.page.active {
    display: block;
}
#page-statisztika h2 {
    margin-bottom: 20px;
    color: #00ff66;
    text-shadow:
        0 0 2px #000,
        0 0 4px #000,
        0 0 6px #00ff66,
        0 0 12px #00ff66;
}

.chart-box {
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
}