:root {
    --bg:#090b10;
    --sidebar:#0e1118;
    --panel:#131720;
    --panel2:#191e29;
    --panel3:#202633;

    --border:rgba(255,255,255,.075);

    --text:#f5f6f8;
    --muted:#9299a8;
    --muted2:#69717f;

    --gold:#d8ad57;
    --gold-light:#f1d17d;
    --gold-dark:#ad7729;

    --green:#62d59a;
    --red:#ee7777;
    --orange:#e4a95d;
}

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    min-height:100%;
}

body {
    font-family:
        Inter,
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(216,173,87,.08),
            transparent 38rem
        ),
        var(--bg);

    color:var(--text);
}

a {
    color:inherit;
}

button,
input,
select {
    font:inherit;
}


/* ==========================================================
   APP
   ========================================================== */

.app-shell {
    display:grid;
    grid-template-columns:
        265px minmax(0,1fr);

    min-height:100vh;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar {
    position:sticky;
    top:0;

    height:100vh;

    display:flex;
    flex-direction:column;

    padding:20px 15px;

    border-right:
        1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            #11151d,
            var(--sidebar)
        );
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;

    padding:
        7px 8px
        27px;
}

.brand-rune,
.auth-rune {
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-dark)
        );

    color:#211709;

    font-size:26px;
    font-weight:900;

    box-shadow:
        0 10px 30px
        rgba(216,173,87,.15);
}

.brand-text strong {
    display:block;

    letter-spacing:.14em;
    font-size:17px;
}

.brand-text span {
    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:11px;
}

.nav {
    display:flex;
    flex-direction:column;

    gap:5px;
}

.nav > a {
    min-height:46px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:
        0 13px;

    border:
        1px solid transparent;

    border-radius:12px;

    color:#b5bbc7;

    text-decoration:none;

    font-weight:650;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.nav > a:hover {
    background:
        rgba(255,255,255,.04);

    color:#fff;
}

.nav > a.active {
    background:
        rgba(216,173,87,.10);

    border-color:
        rgba(216,173,87,.16);

    color:
        var(--gold-light);
}

.nav-icon {
    width:22px;

    text-align:center;

    font-size:17px;
}

.nav-heading {
    margin:
        21px 11px
        6px;

    color:#646c79;

    font-size:10px;
    font-weight:850;

    letter-spacing:.16em;
}

.sidebar-account {
    margin-top:auto;

    display:grid;
    grid-template-columns:
        40px minmax(0,1fr) 30px;

    align-items:center;

    gap:10px;

    padding:
        18px 6px
        4px;

    border-top:
        1px solid var(--border);
}

.account-avatar {
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        var(--panel3);

    color:
        var(--gold-light);

    font-weight:900;
}

.account-copy {
    min-width:0;
}

.account-copy strong {
    display:block;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.account-copy span {
    display:block;

    margin-top:2px;

    color:var(--muted);

    font-size:11px;
}

.logout {
    color:var(--muted);

    text-decoration:none;

    font-size:18px;
}


/* ==========================================================
   MAIN
   ========================================================== */

.main-content {
    min-width:0;

    padding:
        34px
        clamp(20px,4vw,50px)
        60px;
}

.page-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:20px;

    margin-bottom:32px;
}

.eyebrow {
    color:var(--gold);

    font-size:11px;
    font-weight:900;

    letter-spacing:.16em;
}

h1 {
    margin:
        7px 0
        0;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height:1.08;
}

h2 {
    margin:
        0 0
        6px;
}

h3 {
    margin:
        0;
}

.page-lead,
.muted {
    color:var(--muted);

    line-height:1.6;
}

.page-lead {
    margin:
        11px 0
        0;
}


/* ==========================================================
   BADGES
   ========================================================== */

.role-badge,
.support-chip {
    display:inline-flex;
    align-items:center;

    width:max-content;

    border-radius:999px;

    font-size:12px;
    font-weight:750;
}

.role-badge {
    padding:
        8px 12px;

    border:
        1px solid
        rgba(216,173,87,.22);

    background:
        rgba(216,173,87,.08);

    color:
        var(--gold-light);
}

.support-chip {
    margin-top:16px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(228,169,93,.26);

    background:
        rgba(228,169,93,.09);

    color:#efbd77;
}


/* ==========================================================
   STATS
   ========================================================== */

.stats {
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px,1fr)
        );

    gap:15px;
}

.stat-card {
    padding:20px;

    border:
        1px solid
        var(--border);

    border-radius:17px;

    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );
}

.stat-card span {
    display:block;

    color:var(--muted);

    font-size:12px;
}

.stat-card strong {
    display:block;

    margin-top:7px;

    font-size:26px;
}

.stat-card strong.status-good {
    color:var(--green);

    font-size:17px;
}


/* ==========================================================
   SECTIONS
   ========================================================== */

.content-section {
    margin-top:34px;
}

.section-header {
    margin-bottom:17px;
}

.section-header p {
    margin:
        5px 0
        0;

    color:var(--muted);
}


/* ==========================================================
   BOTS
   ========================================================== */

.bot-grid,
.module-grid,
.admin-grid {
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(245px,1fr)
        );

    gap:16px;
}

.bot-card,
.module-card,
.panel {
    border:
        1px solid
        var(--border);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );
}

.bot-card {
    padding:20px;
}

.bot-card-top {
    display:flex;
    align-items:center;

    gap:13px;
}

.bot-card-top span {
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:12px;
}

.bot-avatar {
    width:52px;
    height:52px;

    flex:
        0 0 52px;

    display:grid;
    place-items:center;

    border-radius:16px;

    background:
        var(--panel3);

    color:
        var(--gold-light);

    font-size:24px;
    font-weight:900;
}

.bot-card-footer {
    margin-top:20px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;
}

.bot-status {
    color:var(--muted);

    font-size:12px;
}


/* ==========================================================
   MODULES
   ========================================================== */

.module-card {
    min-height:205px;

    display:flex;
    flex-direction:column;

    padding:21px;
}

.module-icon {
    margin-bottom:18px;

    font-size:29px;
}

.module-card p {
    margin:
        9px 0
        22px;

    color:var(--muted);

    line-height:1.55;

    font-size:14px;
}

.module-state {
    margin-top:auto;

    width:max-content;

    padding:
        6px 9px;

    border-radius:8px;

    background:
        rgba(255,255,255,.04);

    color:var(--muted);

    font-size:11px;
}


/* ==========================================================
   SUPPORT
   ========================================================== */

.support-banner {
    margin-bottom:25px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:18px;

    padding:
        17px 18px;

    border:
        1px solid
        rgba(228,169,93,.30);

    border-radius:16px;

    background:
        rgba(228,169,93,.09);
}

.support-banner strong {
    display:block;

    margin-bottom:4px;

    color:#efbd77;
}

.support-banner span {
    color:#c6b8a5;

    font-size:13px;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.button,
button {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:
        0 15px;

    border:
        1px solid
        rgba(216,173,87,.22);

    border-radius:11px;

    background:
        rgba(216,173,87,.07);

    color:
        var(--gold-light);

    text-decoration:none;

    font-weight:750;

    cursor:pointer;
}

.button:hover,
button:hover {
    filter:brightness(1.08);
}

.button.primary,
button.primary {
    border:0;

    background:
        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-dark)
        );

    color:#211709;
}

.button.full {
    width:100%;
}


/* ==========================================================
   FORMS
   ========================================================== */

label {
    display:block;

    margin-top:16px;

    color:#c5cad3;

    font-size:13px;
    font-weight:650;
}

input,
select {
    width:100%;

    margin-top:7px;

    padding:
        13px 14px;

    border:
        1px solid
        var(--border);

    border-radius:11px;

    outline:none;

    background:
        var(--panel3);

    color:#fff;
}

input:focus,
select:focus {
    border-color:
        rgba(216,173,87,.40);

    box-shadow:
        0 0 0 3px
        rgba(216,173,87,.06);
}

form .button,
form button {
    margin-top:20px;
}


/* ==========================================================
   AUTH
   ========================================================== */

.auth-page {
    min-height:100vh;

    display:grid;
    place-items:center;

    padding:22px;
}

.auth-card {
    width:
        min(
            460px,
            100%
        );

    padding:32px;

    border:
        1px solid
        var(--border);

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            #171c26,
            #11151d
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.30);
}

.auth-rune {
    margin-bottom:24px;
}

.auth-card h1 {
    font-size:31px;
}

.auth-card > p {
    color:var(--muted);

    line-height:1.6;
}

.setup-link {
    margin-top:20px;

    color:var(--muted);

    font-size:12px;
}

.setup-link a {
    color:
        var(--gold-light);
}


/* ==========================================================
   ADMIN
   ========================================================== */

.admin-grid {
    align-items:start;
}

.panel {
    padding:22px;
}

.message {
    margin-bottom:20px;

    padding:
        13px 15px;

    border-radius:11px;
}

.message.success {
    border:
        1px solid
        rgba(98,213,154,.25);

    background:
        rgba(98,213,154,.09);

    color:#9ceabc;
}

.message.error {
    border:
        1px solid
        rgba(238,119,119,.25);

    background:
        rgba(238,119,119,.09);

    color:#ffaaaa;
}


/* ==========================================================
   TABLE
   ========================================================== */

.table-wrap {
    overflow:auto;

    border:
        1px solid
        var(--border);

    border-radius:16px;

    background:
        var(--panel);
}

table {
    width:100%;

    border-collapse:collapse;
}

th,
td {
    padding:
        14px 16px;

    text-align:left;

    border-bottom:
        1px solid
        var(--border);
}

th {
    color:var(--muted);

    font-size:11px;

    letter-spacing:.08em;

    text-transform:uppercase;
}

td {
    font-size:14px;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.empty-state {
    padding:
        45px 30px;

    border:
        1px dashed
        rgba(255,255,255,.12);

    border-radius:18px;

    text-align:center;
}

.empty-icon {
    margin-bottom:12px;

    color:
        var(--gold);

    font-size:31px;
}

.empty-state p {
    max-width:470px;

    margin:
        9px auto
        0;

    color:var(--muted);

    line-height:1.6;
}

.system-state {
    width:max-content;

    margin-top:15px;

    padding:
        7px 10px;

    border-radius:8px;

    font-size:12px;
}

.system-state.warning {
    color:#efbd77;

    background:
        rgba(228,169,93,.09);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px) {

    .app-shell {
        grid-template-columns:1fr;
    }

    .sidebar {
        position:relative;

        height:auto;

        border-right:0;

        border-bottom:
            1px solid
            var(--border);
    }

    .sidebar-account {
        margin-top:22px;
    }

    .main-content {
        padding:
            24px 18px
            45px;
    }

    .page-header,
    .support-banner {
        flex-direction:column;
        align-items:flex-start;
    }
}


@media(max-width:520px) {

    .stats,
    .bot-grid,
    .module-grid,
    .admin-grid {
        grid-template-columns:1fr;
    }

    .auth-card {
        padding:24px;
    }
}


/* ==========================================================
   FLOKI_REBUILD02_OVERVIEW
   Dashboard Übersicht
   ========================================================== */

.dashboard-header {
    margin-bottom:30px;
}


.dashboard-stats {
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


.status-good {
    display:flex !important;
    align-items:center;
    gap:7px;
}


.status-dot,
.connection-dot {
    display:inline-block;

    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:50%;
}


.status-dot {
    background:var(--green);

    box-shadow:
        0 0 12px
        rgba(98,213,154,.45);
}


.dashboard-bot-section {
    margin-top:32px;
}


.dashboard-section-header {
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;
}


.server-search {
    width:min(310px,100%);

    min-height:44px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:
        0 12px;

    border:
        1px solid
        var(--border);

    border-radius:12px;

    background:
        var(--panel);
}


.server-search-icon {
    color:var(--muted);

    font-size:18px;
}


.server-search input {
    min-width:0;

    width:100%;

    margin:0;

    padding:0;

    border:0;

    background:transparent;

    box-shadow:none;

    color:var(--text);
}


.server-search input:focus {
    border:0;

    box-shadow:none;

    outline:none;
}


.dashboard-bot-grid {
    display:grid;

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

    gap:16px;
}


.dashboard-server-card {
    min-height:215px;

    display:flex;
    flex-direction:column;

    padding:20px;

    border:
        1px solid
        var(--border);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.dashboard-server-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(216,173,87,.20);

    box-shadow:
        0 16px 34px
        rgba(0,0,0,.14);
}


.dashboard-server-card[hidden] {
    display:none;
}


.dashboard-server-head {
    display:flex;
    align-items:flex-start;

    gap:13px;
}


.dashboard-server-avatar {
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:
        var(--panel3);

    color:
        var(--gold-light);

    font-size:23px;
    font-weight:900;
}


.dashboard-server-title {
    min-width:0;
}


.dashboard-server-title h3 {
    margin:1px 0 0;

    font-size:16px;

    line-height:1.35;

    overflow-wrap:anywhere;
}


.dashboard-server-title span {
    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:11px;
}


.dashboard-server-info {
    margin-top:24px;
}


.connection-status {
    display:inline-flex;
    align-items:center;

    gap:7px;

    color:var(--muted);

    font-size:12px;
    font-weight:650;
}


.connection-status .connection-dot {
    background:#6c7482;
}


.connection-status.connected {
    color:var(--green);
}


.connection-status.connected
.connection-dot {
    background:var(--green);

    box-shadow:
        0 0 10px
        rgba(98,213,154,.35);
}


.dashboard-server-actions {
    margin-top:auto;

    padding-top:22px;
}


.dashboard-server-button {
    width:100%;
}


.server-search-empty {
    margin-top:10px;

    padding:40px 30px;

    border:
        1px dashed
        rgba(255,255,255,.12);

    border-radius:18px;

    text-align:center;
}


.server-search-empty[hidden] {
    display:none;
}


.server-search-empty p {
    color:var(--muted);
}


@media(max-width:1350px) {

    .dashboard-bot-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

}


@media(max-width:1050px) {

    .dashboard-bot-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media(max-width:900px) {

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


    .dashboard-section-header {
        flex-direction:column;

        align-items:stretch;
    }


    .server-search {
        width:100%;
    }

}


@media(max-width:620px) {

    .dashboard-bot-grid {
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   FLOKI_MY_BOTS_PAGE
   ========================================================== */

.my-bots-header {
    align-items:center;
}


.my-bots-count {
    min-width:150px;

    padding:
        14px 18px;

    border:
        1px solid
        var(--border);

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );
}


.my-bots-count span {
    display:block;

    color:var(--muted);

    font-size:11px;
}


.my-bots-count strong {
    display:block;

    margin-top:4px;

    font-size:25px;

    color:
        var(--gold-light);
}


.my-bots-empty {
    min-height:300px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:45px 30px;

    border:
        1px dashed
        rgba(255,255,255,.13);

    border-radius:20px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(216,173,87,.04),
            transparent 22rem
        );
}


.my-bots-empty-icon {
    width:55px;
    height:55px;

    display:grid;
    place-items:center;

    margin-bottom:18px;

    border-radius:17px;

    background:
        var(--panel2);

    color:
        var(--gold-light);

    font-size:25px;
}


.my-bots-empty h2 {
    margin:0;
}


.my-bots-empty p {
    max-width:560px;

    margin:
        12px auto 0;

    color:var(--muted);

    line-height:1.65;
}


.my-bots-empty-button {
    margin-top:24px;
}


.my-bots-toolbar {
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;
}


.my-bots-toolbar > div:first-child {
    display:flex;

    align-items:baseline;

    gap:7px;
}


.my-bots-toolbar strong {
    color:
        var(--gold-light);

    font-size:22px;
}


.my-bots-toolbar span {
    color:var(--muted);

    font-size:13px;
}


@media(max-width:700px) {

    .my-bots-header,
    .my-bots-toolbar {
        align-items:stretch;
        flex-direction:column;
    }


    .my-bots-count {
        width:100%;
    }

}