.mwi-mesh-page{
    --mesh-gold:#ffbf00;
    --mesh-green:#39df65;
    --mesh-red:#ff5d68;
    --mesh-blue:#4fc3ff;
    --mesh-panel:rgba(5,13,18,.96);
    --mesh-border:rgba(255,191,0,.42);
    color:#f5f7f8;
}

.mwi-mesh-shell{
    width:min(1652px,calc(100vw - 32px));
    margin:28px auto 110px;
}

.mwi-mesh-hero,
.mwi-mesh-panel{
    border:1px solid var(--mesh-border);
    background:linear-gradient(145deg,rgba(8,18,24,.98),rgba(2,8,12,.98));
    border-radius:18px;
}

.mwi-mesh-hero{
    min-height:360px;
    display:grid;
    grid-template-columns:1.25fr .9fr .85fr;
    overflow:hidden;
    margin-bottom:14px;
}

.mwi-mesh-hero-copy{
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.mwi-mesh-hero-copy>small,
.mwi-mesh-panel>small,
.mwi-mesh-messages header small{
    color:var(--mesh-gold);
    letter-spacing:.08em;
    font-size:12px;
}

.mwi-mesh-hero h1{
    margin:12px 0 16px;
    font-size:clamp(38px,4vw,64px);
    line-height:.95;
    font-weight:700;
}

.mwi-mesh-hero h1 span{
    color:var(--mesh-gold);
}

.mwi-mesh-hero-copy>p{
    max-width:610px;
    color:#cad1d5;
    line-height:1.65;
    font-size:16px;
}

.mwi-mesh-status{
    margin-top:20px;
    display:inline-flex;
    width:max-content;
    align-items:center;
    gap:9px;
    padding:9px 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    font-size:12px;
}

.mwi-mesh-status i,
.mwi-mesh-live i{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#888;
    box-shadow:0 0 12px currentColor;
}

.mwi-mesh-status.online i,
.mwi-mesh-live i{
    background:var(--mesh-green);
    color:var(--mesh-green);
}

.mwi-mesh-status.offline i{
    background:var(--mesh-red);
    color:var(--mesh-red);
}

.mwi-mesh-status.stale i{
    background:var(--mesh-gold);
    color:var(--mesh-gold);
}

.mwi-mesh-radio-art{
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    min-height:360px;
    background:
        radial-gradient(circle at center,
        rgba(79,195,255,.16),transparent 52%);
}

.mwi-mesh-radio-symbol{
    position:relative;
    z-index:3;
    font-size:110px;
    color:var(--mesh-gold);
    text-shadow:0 0 30px rgba(255,191,0,.45);
}

.mwi-mesh-radio-art>strong{
    position:absolute;
    bottom:34px;
    letter-spacing:.18em;
    color:#dce5e9;
}

.mwi-mesh-wave{
    position:absolute;
    border:2px solid rgba(79,195,255,.28);
    border-radius:50%;
}

.wave-1{width:130px;height:130px}
.wave-2{width:220px;height:220px}
.wave-3{width:310px;height:310px}

.mwi-mesh-stats{
    display:grid;
    grid-template-rows:repeat(3,1fr);
    border-left:1px solid var(--mesh-border);
}

.mwi-mesh-stats>div{
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.mwi-mesh-stats>div:last-child{
    border-bottom:0;
}

.mwi-mesh-stats small{
    color:#aeb7bc;
    font-size:11px;
}

.mwi-mesh-stats strong{
    margin-top:8px;
    font-size:36px;
    color:#fff;
}

.mwi-mesh-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(310px,.8fr);
    gap:14px;
}

.mwi-mesh-panel{
    padding:26px;
}

.mwi-mesh-messages header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.mwi-mesh-panel h2{
    margin:6px 0 0;
    font-size:22px;
}

.mwi-mesh-live{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    color:var(--mesh-green);
}

#mesh-messages{
    display:grid;
    gap:8px;
}

.mwi-mesh-message{
    padding:15px 16px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.mwi-mesh-message-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:7px;
}

.mwi-mesh-message-sender{
    color:var(--mesh-gold);
    font-weight:700;
}

.mwi-mesh-message-time{
    color:#87939a;
    font-size:11px;
    white-space:nowrap;
}

.mwi-mesh-message-text{
    color:#eef2f4;
    line-height:1.55;
    overflow-wrap:anywhere;
}

.mwi-mesh-message-meta{
    margin-top:7px;
    color:#7f8a90;
    font-size:10px;
}

.mwi-mesh-side{
    display:grid;
    gap:14px;
    align-content:start;
}

.mwi-mesh-node dl{
    margin:18px 0 0;
}

.mwi-mesh-node dl>div{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
}

.mwi-mesh-node dt{
    color:#9da8ae;
}

.mwi-mesh-node dd{
    margin:0;
    text-align:right;
    font-weight:700;
}

.mwi-mesh-about p{
    color:#bdc6cb;
    line-height:1.65;
}

.mwi-mesh-about .mwi-mesh-privacy{
    margin-top:20px;
    padding:14px;
    border-left:3px solid var(--mesh-green);
    background:rgba(57,223,101,.06);
    color:#dce5df;
}

.mwi-mesh-update{
    padding:12px 4px 0;
    text-align:right;
    color:#7f8a90;
    font-size:11px;
}

.mwi-mesh-loading{
    color:#9ca7ad;
}

@media(max-width:1050px){
    .mwi-mesh-hero{
        grid-template-columns:1fr 1fr;
    }

    .mwi-mesh-stats{
        grid-column:1/-1;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:auto;
        border-left:0;
        border-top:1px solid var(--mesh-border);
    }

    .mwi-mesh-stats>div{
        border-bottom:0;
        border-right:1px solid rgba(255,255,255,.10);
    }

    .mwi-mesh-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    .mwi-mesh-shell{
        width:calc(100vw - 20px);
        margin-top:14px;
    }

    .mwi-mesh-hero{
        grid-template-columns:1fr;
    }

    .mwi-mesh-hero-copy{
        padding:26px;
    }

    .mwi-mesh-radio-art{
        min-height:260px;
    }

    .mwi-mesh-stats{
        grid-template-columns:1fr;
    }

    .mwi-mesh-stats>div{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.10);
    }

    .mwi-mesh-message-head{
        display:block;
    }

    .mwi-mesh-message-time{
        display:block;
        margin-top:3px;
    }
}

/* Abstand zum festen Technical-Lab-Header */
.mwi-mesh-page {
    padding-top: 105px;
}

.mwi-mesh-shell {
    margin-top: 18px;
}

@media (max-width: 700px) {
    .mwi-mesh-page {
        padding-top: 90px;
    }

    .mwi-mesh-shell {
        margin-top: 12px;
    }
}

/* Meshtastic-Seite – etwas mehr Luft unter dem festen Header */
.mwi-mesh-page {
    padding-top: 130px;
}

@media (max-width: 700px) {
    .mwi-mesh-page {
        padding-top: 105px;
    }
}