/* =========================================================
       GLOBAL
    ========================================================= */

    :root {
        --sidebar-width: 270px;

        --bg-main: #080b12;
        --bg-sidebar: #0b0f18;
        --bg-card: #101621;
        --bg-card-hover: #141c29;

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

        --text-main: #f1f5f9;
        --text-muted: #8b97a8;

        --player: #22c55e;
        --moderator: #3b82f6;
        --admin: #f97316;
        --developer: #a855f7;
        --items: #06b6d4;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 30px;
    }

    body {
        background:
            radial-gradient(
                circle at 70% 0%,
                rgba(59,130,246,.08),
                transparent 35%
            ),
            radial-gradient(
                circle at 20% 80%,
                rgba(168,85,247,.05),
                transparent 30%
            ),
            var(--bg-main);

        color: var(--text-main);
        min-height: 100vh;

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

    a {
        text-decoration: none;
    }


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

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;

        width: var(--sidebar-width);

        background:
            linear-gradient(
                180deg,
                rgba(15,23,42,.98),
                rgba(8,11,18,.98)
            );

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

        z-index: 1000;

        display: flex;
        flex-direction: column;

        padding: 24px 16px;
    }

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

        padding: 8px 12px 28px;

        color: white;
    }

    .brand-icon {
        width: 42px;
        height: 42px;

        display: grid;
        place-items: center;

        border-radius: 12px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #7c3aed
            );

        box-shadow:
            0 0 25px rgba(59,130,246,.3);

        font-size: 20px;
    }

    .brand-title {
        font-weight: 700;
        font-size: 15px;
        line-height: 1.1;
    }

    .brand-subtitle {
        color: var(--text-muted);
        font-size: 11px;
        margin-top: 3px;
    }

    .sidebar-label {
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .12em;

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

        padding: 0 12px 8px;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .sidebar-link {
        display: flex;
        align-items: center;
        gap: 11px;

        color: #94a3b8;

        padding: 11px 12px;

        border-radius: 9px;

        font-size: 13px;
        font-weight: 500;

        transition: .2s ease;
    }

    .sidebar-link:hover {
        color: white;
        background: rgba(255,255,255,.05);
        transform: translateX(2px);
    }

    .sidebar-link.active {
        color: white;

        background:
            linear-gradient(
                90deg,
                rgba(59,130,246,.18),
                rgba(59,130,246,.04)
            );

        border-left: 2px solid #3b82f6;
    }

    .sidebar-link .icon {
        width: 20px;
        text-align: center;
    }

    .sidebar-bottom {
        margin-top: auto;
    }

    .server-status {
        padding: 14px;

        border-radius: 12px;

        background: rgba(255,255,255,.035);
        border: 1px solid var(--border);
    }

    .status-dot {
        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: #22c55e;

        box-shadow:
            0 0 10px rgba(34,197,94,.8);
    }


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

    .main {
        margin-left: var(--sidebar-width);
        min-height: 100vh;
    }

    .content {
        max-width: 1250px;
        margin: auto;
        padding: 50px 45px 80px;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {
        position: relative;
        overflow: hidden;

        padding: 45px;

        border-radius: 20px;

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

        background:
            linear-gradient(
                135deg,
                rgba(37,99,235,.14),
                rgba(124,58,237,.08) 50%,
                rgba(15,23,42,.7)
            );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 20px 60px rgba(0,0,0,.2);
    }

    .hero::before {
        content: "";

        position: absolute;

        width: 350px;
        height: 350px;

        right: -150px;
        top: -180px;

        background: #2563eb;

        opacity: .08;

        filter: blur(80px);

        border-radius: 50%;
    }

    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding: 6px 10px;

        border-radius: 50px;

        background: rgba(59,130,246,.12);

        border: 1px solid rgba(59,130,246,.2);

        color: #60a5fa;

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

        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .hero h1 {
        position: relative;

        font-size: clamp(2rem, 4vw, 3.4rem);

        font-weight: 800;

        letter-spacing: -.04em;

        margin: 20px 0 12px;
    }

    .hero p {
        color: var(--text-muted);

        max-width: 650px;

        font-size: 15px;

        line-height: 1.7;
    }


    /* =========================================================
       SEARCH
    ========================================================= */

    .search-box {
        position: relative;

        margin-top: 28px;

        max-width: 650px;
    }

    .search-box input {
        width: 100%;

        padding: 14px 18px 14px 46px;

        border-radius: 12px;

        background: rgba(0,0,0,.25);

        border: 1px solid rgba(255,255,255,.1);

        color: white;

        outline: none;

        transition: .2s;
    }

    .search-box input:focus {
        border-color: rgba(59,130,246,.6);

        box-shadow:
            0 0 0 3px rgba(59,130,246,.1);
    }

    .search-icon {
        position: absolute;

        left: 17px;
        top: 50%;

        transform: translateY(-50%);

        color: #64748b;
    }


    /* =========================================================
       STAT CARDS
    ========================================================= */

    .stats {
        margin: 28px 0 50px;
    }

    .stat-card {
        height: 100%;

        padding: 20px;

        border-radius: 14px;

        background: var(--bg-card);

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

        transition: .2s;
    }

    .stat-card:hover {
        transform: translateY(-3px);

        background: var(--bg-card-hover);

        border-color: rgba(255,255,255,.13);
    }

    .stat-icon {
        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        border-radius: 9px;

        margin-bottom: 14px;

        font-size: 17px;
    }

    .stat-number {
        font-size: 25px;
        font-weight: 800;
    }

    .stat-label {
        color: var(--text-muted);
        font-size: 12px;
    }


    /* =========================================================
       SECTION
    ========================================================= */

    .command-section {
        margin-bottom: 60px;
        scroll-margin-top: 30px;
    }

    .section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 20px;

        margin-bottom: 18px;
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .section-title h2 {
        font-size: 21px;
        font-weight: 750;
        margin: 0;
    }

    .section-description {
        color: var(--text-muted);
        font-size: 12px;
        margin-top: 4px;
    }

    .role-icon {
        width: 40px;
        height: 40px;

        display: grid;
        place-items: center;

        border-radius: 10px;

        font-size: 17px;
    }

    .role-player .role-icon {
        background: rgba(34,197,94,.1);
        color: var(--player);
    }

    .role-moderator .role-icon {
        background: rgba(59,130,246,.1);
        color: var(--moderator);
    }

    .role-admin .role-icon {
        background: rgba(249,115,22,.1);
        color: var(--admin);
    }

    .role-developer .role-icon {
        background: rgba(168,85,247,.1);
        color: var(--developer);
    }

    .role-items .role-icon {
        background: rgba(6,182,212,.1);
        color: var(--items);
    }

    .role-badge {
        font-size: 10px;

        padding: 5px 9px;

        border-radius: 50px;

        text-transform: uppercase;

        letter-spacing: .06em;

        font-weight: 700;
    }

    .role-player .role-badge {
        color: var(--player);
        background: rgba(34,197,94,.1);
    }

    .role-moderator .role-badge {
        color: var(--moderator);
        background: rgba(59,130,246,.1);
    }

    .role-admin .role-badge {
        color: var(--admin);
        background: rgba(249,115,22,.1);
    }

    .role-developer .role-badge {
        color: var(--developer);
        background: rgba(168,85,247,.1);
    }

    .role-items .role-badge {
        color: var(--items);
        background: rgba(6,182,212,.1);
    }


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

    .command-table {
        overflow: hidden;

        border-radius: 14px;

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

        background: rgba(15,23,42,.55);

        box-shadow:
            0 15px 40px rgba(0,0,0,.12);
    }

    .command-table table {
        margin: 0;
    }

    .command-table thead {
        background: rgba(255,255,255,.035);
    }

    .command-table th {
        color: #64748b;

        font-size: 10px;

        text-transform: uppercase;

        letter-spacing: .1em;

        font-weight: 700;

        padding: 13px 18px;

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

    .command-table td {
        padding: 13px 18px;

        color: #cbd5e1;

        font-size: 13px;

        border-color: var(--border);

        vertical-align: middle;
    }

    .command-table tbody tr {
        transition: .15s ease;
    }

    .command-table tbody tr:hover {
        background: rgba(255,255,255,.035);
    }

    .command-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .command-cell {
        width: 250px;
    }

    .command {
        display: inline-block;

        padding: 5px 9px;

        border-radius: 6px;

        background: #080b12;

        border: 1px solid rgba(255,255,255,.08);

        color: #e2e8f0;

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            monospace;

        font-size: 12px;

        box-shadow:
            inset 0 1px 1px rgba(255,255,255,.03);
    }

    .description {
        color: #94a3b8 !important;
        line-height: 1.55;
    }


    /* =========================================================
       ITEM DATABASE
    ========================================================= */

    .item-database {
        border-radius: 16px;

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

        background:
            linear-gradient(
                145deg,
                rgba(6,182,212,.045),
                rgba(15,23,42,.55)
            );

        overflow: hidden;

        box-shadow:
            0 20px 50px rgba(0,0,0,.15);
    }

    .item-toolbar {
        padding: 22px;

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

        background: rgba(255,255,255,.02);
    }

    .item-search {
        position: relative;
    }

    .item-search input {
        width: 100%;

        padding: 13px 16px 13px 44px;

        border-radius: 10px;

        background: rgba(0,0,0,.3);

        border: 1px solid rgba(255,255,255,.1);

        color: white;

        outline: none;
    }

    .item-search input:focus {
        border-color: rgba(6,182,212,.6);

        box-shadow:
            0 0 0 3px rgba(6,182,212,.1);
    }

    .item-search-icon {
        position: absolute;

        left: 15px;
        top: 50%;

        transform: translateY(-50%);

        color: #64748b;
    }

    .item-status {
        display: flex;

        align-items: center;

        gap: 8px;

        margin-top: 12px;

        color: var(--text-muted);

        font-size: 12px;
    }

    .item-status-dot {
        width: 7px;
        height: 7px;

        border-radius: 50%;

        background: #64748b;
    }

    .item-status-dot.online {
        background: #22c55e;

        box-shadow:
            0 0 8px rgba(34,197,94,.7);
    }

    .item-status-dot.error {
        background: #ef4444;

        box-shadow:
            0 0 8px rgba(239,68,68,.7);
    }

    .item-command-builder {
        padding: 18px 22px;

        background:
            rgba(6,182,212,.035);

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

    .builder-label {
        color: #64748b;

        text-transform: uppercase;

        letter-spacing: .1em;

        font-size: 10px;

        font-weight: 700;

        margin-bottom: 8px;
    }

    .generated-command {
        display: flex;

        align-items: center;

        gap: 10px;

        flex-wrap: wrap;
    }

    .generated-command code {
        flex: 1;

        min-width: 220px;

        padding: 12px 14px;

        border-radius: 8px;

        background: #05070b;

        border: 1px solid rgba(255,255,255,.08);

        color: #67e8f9;

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            monospace;

        font-size: 13px;
    }

    .quantity-input {
        width: 110px;

        padding: 11px 12px;

        border-radius: 8px;

        background: #05070b;

        border: 1px solid rgba(255,255,255,.08);

        color: white;

        outline: none;
    }

    .quantity-input:focus {
        border-color: rgba(6,182,212,.6);

        box-shadow:
            0 0 0 3px rgba(6,182,212,.1);
    }

    .item-results-header {
        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        padding: 13px 18px;

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

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

    .item-results-header span {
        color: #64748b;

        font-size: 10px;

        text-transform: uppercase;

        letter-spacing: .1em;

        font-weight: 700;
    }

    .item-results {
        max-height: 560px;

        overflow-y: auto;
    }

    .item-row {
        display: grid;

        grid-template-columns: 100px minmax(180px, 1fr) 180px 130px;

        align-items: center;

        gap: 15px;

        padding: 13px 18px;

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

        cursor: pointer;

        transition: .15s ease;
    }

    .item-row:last-child {
        border-bottom: 0;
    }

    .item-row:hover {
        background: rgba(6,182,212,.055);
    }

    .item-row.selected {
        background: rgba(6,182,212,.09);

        box-shadow:
            inset 3px 0 0 var(--items);
    }

    .item-id {
        color: #67e8f9;

        font-family:
            "SFMono-Regular",
            Consolas,
            "Liberation Mono",
            monospace;

        font-size: 12px;

        font-weight: 700;
    }

    .item-name {
        color: #e2e8f0;

        font-size: 13px;

        font-weight: 600;
    }

    .item-type {
        color: #94a3b8;

        font-size: 11px;
    }

    .item-stack {
        color: #64748b;

        font-size: 11px;

        text-align: right;
    }

    .item-empty {
        padding: 45px 20px;

        text-align: center;

        color: #64748b;
    }

    .item-empty-icon {
        font-size: 30px;

        margin-bottom: 10px;

        opacity: .5;
    }

    .item-loading {
        padding: 45px 20px;

        text-align: center;

        color: #64748b;
    }

    .item-loading .spinner-border {
        width: 24px;
        height: 24px;
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
        color: #475569;

        font-size: 11px;

        padding-top: 30px;

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


    /* =========================================================
       MOBILE
    ========================================================= */

    .mobile-nav {
        display: none;

        background: #0b0f18;

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

    @media (max-width: 991.98px) {

        .sidebar {
            display: none;
        }

        .main {
            margin-left: 0;
        }

        .mobile-nav {
            display: block;

            position: sticky;
            top: 0;

            z-index: 1000;
        }

        .content {
            padding: 25px 18px 60px;
        }

        .hero {
            padding: 30px 24px;
        }

        .section-heading {
            align-items: flex-start;
        }

        .command-cell {
            width: auto;
        }

        .item-row {
            grid-template-columns: 80px 1fr;

            gap: 8px;
        }

        .item-type,
        .item-stack {
            display: none;
        }

    }

    @media (max-width: 575.98px) {

        .hero h1 {
            font-size: 2rem;
        }

        .hero {
            border-radius: 14px;
        }

        .command-table {
            overflow-x: auto;
        }

        .command-table table {
            min-width: 650px;
        }

        .generated-command {
            flex-direction: column;

            align-items: stretch;
        }

        .quantity-input {
            width: 100%;
        }

        .generated-command .btn {
            width: 100%;
        }

    }
    .Common {
        border: 2px solid #44e617;
    }
    .Uncommon {
        border: 2px solid #42cef5;
    }
    .Rare {
        border: 2px solid #610ac4;
    }
    .Legendary {
        border: 2px solid #c4800a;
    }
    .expandsizerarity {
 width: 155px;
}
.wrapitemname {
    max-width: 125px;
    overflow: wordwrap;
}
.expandsizedesc {
    max-width: 100px;
    overflow: wordwrap;
}