html {
    scroll-behavior: smooth;
}

#main {
    margin-top: 3.25rem;
    min-height: calc(100vh - 3.25rem);
}

.sidebar {
    background: #0a0a0a;
    padding: 1.5rem 0;
    border-right: 1px solid #1a1a1a;
    min-height: calc(100vh - 3.25rem);
}

.sidebar .menu-list a {
    color: #b0b0b0;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    transition: all 0.15s;
}

.sidebar .menu-list a:hover {
    background: #1a1a1a;
    color: #fff;
}

.sidebar .menu-list a.is-active {
    background: #3273dc;
    color: #fff;
}

.main-content {
    padding: 1.5rem 2rem;
    background: #0d0d0d;
}

.log-box {
    background: #111;
    color: #00e676;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.85rem;
    max-height: 600px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
}

.box {
    background: #141414;
    border: 1px solid #1e1e1e;
}

.table {
    background: #141414;
    color: #e0e0e0;
}

.table th {
    color: #b0b0b0;
    border-color: #2a2a2a;
}

.table td {
    border-color: #2a2a2a;
}

.navbar {
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
}

.navbar-item {
    color: #e0e0e0;
}

.navbar-item:hover {
    background: #1a1a1a;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .sidebar {
        display: none;
        min-height: auto;
    }
    .sidebar.is-active {
        display: block;
    }
    .main-content {
        padding: 1rem;
    }
}