body {
            background: #121212;
            color: #fff;
        }
        .sidebar {
            height: 100dvh;
            background: #000;
            padding-top: 20px;
            position: fixed;
            width: 220px;
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .sidebar a {
            display: block;
            padding: 12px 20px;
            color: #ccc;
            text-decoration: none;
        }
        .sidebar a:hover {
            background: #222;
            color: #fff;
        }

        .sidebar::-webkit-scrollbar {
            width: 6px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: #111;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #ff4d4d;
            border-radius: 10px;
        }
        .content {
            margin-left: 220px;
            padding: 30px;
        }

        .card {
            background-color: #1e1e1e;
            border: 1px solid #2c2c2c;
            color: #ffffff;
            border-radius: 10px;
            transition: 0.3s;
        }

        .card:hover {
            border-color: #ff4d4d;
            transform: translateY(-3px);
        }

        small {
            color: #b0b0b0 !important;
        }

        .card small {
            color: #9aa0a6 !important;
        }

        .card h5 {
            color: #ff4d4d;
            font-weight: bold;
        }

        hr {
            border: none;
            height: 1px;
            background: linear-gradient(
                to right,
                transparent,
                #ff4d4d,
                transparent
            );
            margin: 20px 0;
        }

        .seta {
            display: inline-block;
            transition: transform 0.25s ease;
            will-change: transform;
        }