/* Dropper Workspace - Custom Styles */
/* Most styling is handled by Tailwind CSS in the HTML template. */

[v-cloak] {
    display: none;
}

body {
    background-color: #0f172a; /* slate-900 */
    color: #f8fafc; /* slate-50 */
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

:root[data-palette="mono"] {
    --accent: #94a3b8;
}

:root[data-palette="ocean"] {
    --accent: #38bdf8;
}

:root[data-palette="sunset"] {
    --accent: #fb7185;
}

.button-primary,
.tag,
.progress span,
.chip-button:hover {
    border-color: var(--accent, #94a3b8) !important;
    box-shadow: inset 0 0 0 1px var(--accent, #94a3b8);
}

/* Custom Scrollbar for a premium feel */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569; /* slate-600 */
}

/* Ensure masonry items render cleanly */
.masonry-item {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}