:root { --sidebar-w: 250px; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f0f2f5; }
.sidebar { width: var(--sidebar-w); min-height: 100vh; background: #1e293b; position: fixed; top: 0; left: 0; z-index: 100; transition: transform .3s; }
.sidebar .brand { padding: 1.2rem; color: #fff; font-size: 1.1rem; font-weight: 700; border-bottom: 1px solid #334155; }
.sidebar .nav-link { color: #94a3b8; padding: .7rem 1.2rem; border-radius: 0; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: #334155; }
.sidebar .nav-link i { width: 24px; margin-right: 8px; text-align: center; }
.main-content { margin-left: var(--sidebar-w); min-height: 100vh; }
.top-bar { background: #fff; border-bottom: 1px solid #e2e8f0; padding: .7rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.page-content { padding: 1.5rem; }
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 10px; }
.card-header { background: #fff; border-bottom: 1px solid #f1f5f9; font-weight: 600; border-radius: 10px 10px 0 0 !important; }
.stat-card { border-left: 4px solid; }
.stat-card.blue { border-left-color: #3b82f6; }
.stat-card.green { border-left-color: #22c55e; }
.stat-card.orange { border-left-color: #f97316; }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; }
.thumbnail-img { width: 60px; height: 40px; object-fit: cover; border-radius: 4px; background: #e2e8f0; }
.badge-role { font-size: .7rem; }
.upload-zone { border: 2px dashed #cbd5e1; border-radius: 10px; padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.upload-zone:hover, .upload-zone.dragover { border-color: #3b82f6; background: #eff6ff; }
.upload-zone img { max-width: 100%; max-height: 200px; border-radius: 6px; margin-top: .5rem; }
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; }
.config-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.config-row input, .config-row select { font-size: .85rem; }
#loginPage { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e293b, #334155); }
#loginPage .login-card { width: 100%; max-width: 400px; }
/* Audio upload zone */
.audio-upload-zone { min-height: 100px; }
.audio-info audio { max-height: 40px; }
.audio-info { margin-top: .5rem; }

/* Background removal */
.bg-removal-status { margin-top: .5rem; padding: .5rem; background: #fff3cd; border-radius: 6px; font-size: .85rem; color: #856404; text-align: center; }

/* Sprite preview canvas */
.sprite-preview-canvas { border: 1px solid #dee2e6; border-radius: 4px; background: #f8f9fa; display: block; }

.hidden { display: none !important; }
@media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } }