:root{--bg-base: #0b0e1a;--bg-surface: rgba(22, 28, 54, .6);--bg-surface-hover: rgba(30, 38, 74, .8);--bg-modal: rgba(15, 19, 38, .95);--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(139, 92, 246, .3);--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-tertiary: #6b7280;--accent-cyan: #06b6d4;--accent-magenta: #ec4899;--accent-purple: #8b5cf6;--gradient-accent: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));--gradient-hover: linear-gradient(135deg, #7c3aed, #db2777);--font-main: "Outfit", sans-serif;--shadow-glow: 0 0 20px rgba(139, 92, 246, .2);--shadow-card: 0 10px 30px rgba(0, 0, 0, .5);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);font-family:var(--font-main);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(at 0% 0%,rgba(139,92,246,.15) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(6,182,212,.1) 0px,transparent 50%)}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-purple)}.app-container{max-width:1200px;width:100%;margin:0 auto;padding:2rem 1.5rem;flex-grow:1}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;border-bottom:1px solid var(--border-color);padding-bottom:1.5rem}.brand{display:flex;align-items:center;gap:.75rem}.brand-logo{font-size:2.25rem;font-weight:800;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.05em;text-shadow:0 0 30px rgba(139,92,246,.3)}.brand-subtitle{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.15em;margin-top:.25rem}.controls-bar{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem;align-items:center}.search-wrapper{position:relative;flex-grow:1;min-width:250px}.search-input{width:100%;padding:.875rem 1.25rem .875rem 2.75rem;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-family:var(--font-main);font-size:1rem;outline:none;transition:var(--transition-smooth)}.search-input:focus{border-color:var(--accent-purple);box-shadow:0 0 15px #8b5cf640;background:var(--bg-surface-hover)}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.select-input{padding:.875rem 1.5rem;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-family:var(--font-main);font-size:1rem;outline:none;cursor:pointer;transition:var(--transition-smooth)}.select-input:focus{border-color:var(--accent-purple)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;border-radius:12px;font-family:var(--font-main);font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition-smooth);outline:none}.btn-primary{background:var(--gradient-accent);color:#fff;border:none;box-shadow:var(--shadow-glow)}.btn-primary:hover{background:var(--gradient-hover);transform:translateY(-2px);box-shadow:0 0 25px #8b5cf666}.btn-secondary{background:#ffffff0d;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:#ffffff1a}.btn-danger{background:#ef444433;color:#f87171;border:1px solid rgba(239,68,68,.4)}.btn-danger:hover{background:#ef44444d;transform:translateY(-2px)}.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2rem;margin-top:1rem}.cd-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;cursor:pointer;transition:var(--transition-smooth);display:flex;flex-direction:column;height:100%;position:relative;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.cd-card:hover{transform:translateY(-8px);border-color:var(--border-glow);box-shadow:var(--shadow-card),0 0 20px #8b5cf626}.cd-cover-container{aspect-ratio:1;width:100%;overflow:hidden;background:#14182c;position:relative;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border-color)}.cd-cover{width:100%;height:100%;object-fit:cover;transition:var(--transition-smooth)}.cd-card:hover .cd-cover{transform:scale(1.05)}.cd-placeholder-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-tertiary);font-weight:500;text-align:center;padding:1rem}.cd-placeholder-icon{font-size:3rem;margin-bottom:.5rem;opacity:.5}.cd-info{padding:1.25rem;display:flex;flex-direction:column;flex-grow:1}.cd-title{font-size:1.125rem;font-weight:700;margin-bottom:.25rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-artist{font-size:.95rem;color:var(--text-secondary);margin-bottom:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cd-metadata{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:.8rem}.cd-tag{background:#8b5cf626;color:#c084fc;padding:.25rem .6rem;border-radius:9999px;font-weight:600;border:1px solid rgba(139,92,246,.2)}.cd-year{color:var(--text-tertiary);font-weight:500}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#050710cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.5rem;animation:fadeIn .25s ease-out}.modal-content{background:var(--bg-modal);border:1px solid var(--border-color);border-radius:24px;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px #0009,0 0 30px #8b5cf626;position:relative;animation:slideUp .3s cubic-bezier(.16,1,.3,1);padding:2.5rem}.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-secondary);width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-smooth)}.modal-close:hover{background:#ffffff1a;color:var(--text-primary);transform:rotate(90deg)}.cd-detail-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width: 580px){.cd-detail-grid{grid-template-columns:240px 1fr}}.cd-detail-cover{width:100%;aspect-ratio:1;border-radius:16px;object-fit:cover;border:1px solid var(--border-color);box-shadow:var(--shadow-card)}.cd-detail-info{display:flex;flex-direction:column}.cd-detail-title{font-size:2rem;font-weight:800;line-height:1.2;margin-bottom:.5rem;background:linear-gradient(135deg,#fff,var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.cd-detail-artist{font-size:1.25rem;color:var(--accent-cyan);font-weight:600;margin-bottom:1.5rem}.cd-detail-meta{display:flex;gap:1.5rem;margin-bottom:2rem;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:.75rem 0}.meta-item{display:flex;flex-direction:column;gap:.25rem}.meta-label{font-size:.75rem;text-transform:uppercase;color:var(--text-tertiary);letter-spacing:.05em}.meta-value{font-weight:600;color:var(--text-primary)}.tracklist-container{margin-top:1rem}.tracklist-title{font-size:1.125rem;font-weight:700;margin-bottom:.75rem;color:var(--text-primary)}.track-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}.track-item{display:flex;align-items:center;background:#ffffff08;padding:.75rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.02)}.track-num{font-weight:700;color:var(--accent-purple);margin-right:1rem;font-size:.875rem;width:1.25rem}.track-name{color:var(--text-primary)}.form-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem}.form-label{font-weight:600;font-size:.9rem;color:var(--text-secondary)}.form-input{width:100%;padding:.875rem 1rem;background:#ffffff08;border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);font-family:var(--font-main);font-size:1rem;outline:none;transition:var(--transition-smooth)}.form-input:focus{border-color:var(--accent-purple);background:#ffffff0d}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.file-input-wrapper{position:relative;display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;background:#ffffff08;border:1px dashed var(--border-color);border-radius:10px;cursor:pointer;transition:var(--transition-smooth)}.file-input-wrapper:hover{border-color:var(--accent-purple);background:#ffffff0d}.file-input-hidden{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-input-text{font-size:.9rem;color:var(--text-secondary)}.track-manager{border:1px solid var(--border-color);border-radius:12px;padding:1rem;background:#0003}.track-input-row{display:flex;gap:.5rem;margin-bottom:.75rem}.form-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 2rem;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:20px;margin-top:1rem}.empty-state-icon{font-size:4rem;color:var(--text-tertiary);margin-bottom:1.5rem;animation:pulse 2s infinite}.empty-state-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.empty-state-subtitle{color:var(--text-secondary);max-width:400px;margin-bottom:1.5rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:.5}50%{transform:scale(1.05);opacity:.8}to{transform:scale(1);opacity:.5}}.header-auth{display:flex;align-items:center;gap:1rem}.admin-status-badge{display:flex;align-items:center;gap:.6rem;background:#22c55e1a;border:1px solid rgba(34,197,94,.3);padding:.35rem .6rem .35rem .75rem;border-radius:9999px;font-size:.85rem;font-weight:600;color:#4ade80}.status-indicator{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}.btn-sm{padding:.4rem .8rem;font-size:.85rem;border-radius:8px}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#050710d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1100;padding:1.5rem;animation:fadeIn .2s ease-out}.password-modal{max-width:440px;padding:2rem;border-radius:20px;background:var(--bg-modal);border:1px solid var(--border-color);box-shadow:0 25px 60px #000000b3,0 0 35px #8b5cf633}.modal-title-group{display:flex;align-items:center;gap:.75rem}.modal-title-group h2{font-size:1.35rem;font-weight:700;color:var(--text-primary)}.lock-icon-badge{width:36px;height:36px;border-radius:10px;background:#8b5cf626;border:1px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;font-size:1.1rem}.password-instruction{font-size:.9rem;color:var(--text-secondary);line-height:1.5;margin-top:1rem;margin-bottom:1.25rem}.form-error{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#ef44441f;border:1px solid rgba(239,68,68,.3);border-radius:10px;color:#f87171;font-size:.875rem;margin-bottom:1.25rem}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.75rem}