html.dark body { background-color: #000000; color: #e5e5e5; }
html.dark .surface { background-color: #121212; border-color: #2a2a2a; }
html.dark .input-field { background-color: #000000; border-color: #333; color: white; }

html:not(.dark) body { background-color: #f3f4f6; color: #111827; }
html:not(.dark) .surface { background-color: #ffffff; border-color: #e5e7eb; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
html:not(.dark) .input-field { background-color: #f9fafb; border-color: #d1d5db; color: #111827; }

html:not(.dark) pre { color: #1f2937; }
html:not(.dark) thead { background-color: #f9fafb; }
html:not(.dark) tbody tr { border-color: #e5e7eb; }
html:not(.dark) tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); }

.custom-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: #333; border-radius: 3px; }

@media (max-width: 768px) {
    thead {
        display: none;
    }

    tbody tr {
        display: flex;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid #333;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-align: right;
    }

    tbody td:last-child {
        border-bottom: none;
        padding-top: 1rem;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.7rem;
        opacity: 0.5;
        text-align: left;
        margin-right: 1rem;
    }
}