:root{
    --bg:#0f1115;
    --panel:#151922;
    --panel-2:#10141c;
    --border:#2a2f3a;
    --text:#f5f7fb;
    --muted:#aab2c0;
    --primary:#ff3b5c;
    --secondary:#ffd166;
    --ok:#22c55e;
    --danger:#ff6b6b;
}

*,
*::before,
*::after{
    box-sizing:border-box;
    min-width:0;
}

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:linear-gradient(135deg,#0f1115,#1b1f28);
    color:var(--text);
}

img,
video,
canvas,
svg,
iframe{
    max-width:100%;
    height:auto;
    display:block;
}

table{
    max-width:100%;
}

a,
button,
input,
select,
textarea{
    max-width:100%;
}

input,
select,
textarea,
button{
    font:inherit;
}

input,
select,
textarea{
    width:100%;
}

pre,
code{
    white-space:pre-wrap;
    word-break:break-word;
}

.layout,
.wrap,
.content,
.panel,
.card,
.section,
.grid,
.box,
.topbar,
.sidebar,
.filters,
.meta,
.userbox,
.actions,
.cards{
    max-width:100%;
    min-width:0;
}

.grid,
.cards{
    width:100%;
}

.actions,
.topbar,
.btns,
.hud-buttons{
    flex-wrap:wrap;
}

@media (max-width: 900px){
    .layout{
        grid-template-columns:1fr !important;
    }

    .sidebar{
        border-right:none !important;
        border-bottom:1px solid var(--border);
        width:100%;
    }

    .content,
    .wrap{
        padding-left:16px !important;
        padding-right:16px !important;
    }
}

@media (max-width: 560px){
    .content,
    .wrap{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .cards,
    .grid{
        grid-template-columns:1fr !important;
    }

    .topbar{
        flex-direction:column;
        align-items:flex-start !important;
    }
}