/* Guaranteed Pure Explicit CSS */
* {
box-sizing: border-box;
}

/* Inner-pane thumbs (page chrome is the ghost overlay in scrollbar.css) */
* {
scrollbar-width: thin;
scrollbar-color: #7e22ce #070312;
}

::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: #070312;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #7e22ce, #a855f7);
border-radius: 9999px;
border: 1px solid rgba(168, 85, 247, 0.4);
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #a855f7, #34d399);
box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
}

html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
background-color: var(--color-bg) !important;
color: var(--color-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow-x: hidden;
}

/* Drag & Drop Overlay */
body.drag-active::after {
content: 'Drop file to send 📎';
position: fixed;
inset: 12px;
border: 2px dashed #34d399;
background: rgba(7, 3, 18, 0.88);
backdrop-filter: blur(12px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
font-weight: 700;
font-family: ui-monospace, monospace;
color: #34d399;
text-shadow: 0 0 20px rgba(52, 211, 153, 0.8);
pointer-events: none;
border-radius: 20px;
}

/* Cosmic Ambient Background */
.bg-canvas {
position: fixed;
inset: 0;
background-color: var(--color-bg);
background-image: 
radial-gradient(circle at 50% 40%, rgba(120, 40, 200, 0.18) 0%, transparent 60%),
radial-gradient(circle at 85% 85%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
linear-gradient(to right, rgba(168, 85, 247, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(168, 85, 247, 0.07) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
pointer-events: none;
z-index: 0;
}

/* Centerpiece Container */
#hero-view {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
position: relative;
z-index: 10;
}