.btn-tool {
    @apply p-2 rounded-lg bg-white/5 hover:bg-white/10 text-white/80 hover:text-white transition-all active:scale-95;
}

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

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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) .btn-tool {
    background: rgba(0, 0, 0, 0.05);
    color: #374151;
}
html:not(.dark) .btn-tool:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #111827;
}