@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --sidebar-bg: #1e1e2d;
    --sidebar-hover: #2a2a3d;
    --sidebar-active: linear-gradient(135deg, #6366f1, #8b5cf6);
    --primary: #6366f1;
    --primary-light: #eef2ff;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --text-muted: #6b7280;
    --border: #e5e7eb;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#f3f4f6; color:#1f2937; min-height:100vh; }

/* ===== WRAPPER ===== */
.wrapper { display:flex; min-height:100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
    width:250px;
    background:var(--sidebar-bg);
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0;
    bottom:0;
    z-index:100;
    overflow-y:auto;
}
.sidebar-brand {
    padding:1.25rem 1.25rem 1rem;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.sidebar-brand h5 { color:#fff; font-weight:800; font-size:1.1rem; margin:0; letter-spacing:-0.5px; }
.sidebar-brand small { color:#6b7280; font-size:0.65rem; text-transform:uppercase; letter-spacing:1px; font-weight:500; }
.sidebar-nav { padding:0.75rem 0; flex:1; }
.sidebar-nav .nav-item { list-style:none; }
.sidebar-nav .nav-link {
    display:flex;
    align-items:center;
    gap:10px;
    padding:0.65rem 1.25rem;
    color:#9ca3af;
    text-decoration:none;
    font-size:0.875rem;
    font-weight:500;
    transition:all 0.15s;
    border-left:3px solid transparent;
}
.sidebar-nav .nav-link:hover {
    color:#fff;
    background:var(--sidebar-hover);
}
.sidebar-nav .nav-link.active {
    color:#fff;
    background:var(--sidebar-active);
    border-left-color:#fff;
    font-weight:600;
}
.sidebar-nav .nav-link i { width:20px; text-align:center; font-size:1.1rem; }
.sidebar-divider { height:1px; background:rgba(255,255,255,0.06); margin:0.5rem 1.25rem; }
.sidebar-footer { padding:0.75rem 0; border-top:1px solid rgba(255,255,255,0.06); }

/* ===== MAIN CONTENT ===== */
.main-content {
    flex:1;
    margin-left:250px;
    padding:1.5rem 2rem;
    min-height:100vh;
}
.page-header { margin-bottom:1.5rem; }
.page-header h1 { font-size:1.5rem; font-weight:700; margin:0; }
.page-header p { color:var(--text-muted); font-size:0.85rem; margin:2px 0 0; }

/* ===== STATS CARDS ===== */
.stat-card {
    background:#fff;
    border-radius:12px;
    padding:1.25rem;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    border:1px solid rgba(0,0,0,0.04);
    transition:transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.stat-card .stat-info {}
.stat-card .stat-label { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:2px; }
.stat-card .stat-value { font-size:1.75rem; font-weight:700; color:#1f2937; line-height:1.2; }
.stat-card .stat-desc { font-size:0.8rem; color:var(--text-muted); margin-top:2px; }
.stat-card .stat-icon {
    width:44px; height:44px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    flex-shrink:0;
}

/* Colorful stat icons */
.stat-icon.purple { background:#eef2ff; color:#6366f1; }
.stat-icon.green { background:#ecfdf5; color:#10b981; }
.stat-icon.blue { background:#eff6ff; color:#3b82f6; }
.stat-icon.orange { background:#fff7ed; color:#f97316; }
.stat-icon.red { background:#fef2f2; color:#ef4444; }
.stat-icon.yellow { background:#fffbeb; color:#f59e0b; }

/* ===== CARDS ===== */
.card-modern {
    background:#fff;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.04);
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    margin-bottom:1.25rem;
}
.card-modern .card-body { padding:1.25rem; }
.card-modern .card-title {
    font-size:0.85rem;
    font-weight:700;
    color:#374151;
    margin-bottom:0.75rem;
    display:flex;
    align-items:center;
    gap:6px;
}

/* ===== PLAYER ===== */
.player-section {
    background:linear-gradient(135deg,#1e1e2d,#2d2d44);
    border-radius:14px;
    padding:1.5rem;
    margin-bottom:1.5rem;
    color:#fff;
}
.player-section .current-track {
    font-size:0.95rem; font-weight:600; margin-bottom:0.75rem;
    display:flex; align-items:center; gap:8px;
}
.player-section .track-indicator {
    width:8px; height:8px;
    border-radius:50%;
    background:#22c55e;
    display:none;
    animation:pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.player-controls { display:flex; align-items:center; gap:8px; }
.player-controls button {
    background:rgba(255,255,255,0.08);
    border:none; color:#fff;
    width:38px; height:38px;
    border-radius:50%;
    cursor:pointer;
    font-size:0.95rem;
    transition:all 0.15s;
    display:flex; align-items:center; justify-content:center;
}
.player-controls button:hover { background:rgba(255,255,255,0.15); }
.player-controls .btn-play {
    width:46px; height:46px;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    font-size:1.1rem;
}
.player-controls .btn-play:hover { transform:scale(1.05); }
.progress-area { flex:1; min-width:150px; }
.progress-track {
    width:100%; height:4px;
    background:rgba(255,255,255,0.12);
    border-radius:2px; cursor:pointer; position:relative;
}
.progress-fill {
    height:100%;
    background:linear-gradient(90deg,#6366f1,#8b5cf6);
    border-radius:2px; width:0%;
    transition:width 0.2s;
}
.time-info { display:flex; justify-content:space-between; font-size:0.7rem; color:rgba(255,255,255,0.5); margin-top:3px; }
.volume-wrap { display:flex; align-items:center; gap:4px; font-size:0.85rem; color:rgba(255,255,255,0.5); }
.volume-wrap input[type=range] { width:70px; accent-color:#6366f1; }

/* ===== PLAYLIST ===== */
.playlist-scroll { max-height:260px; overflow-y:auto; }
.playlist-scroll::-webkit-scrollbar { width:4px; }
.playlist-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }
.track-item { border-left:3px solid transparent !important; transition:all 0.15s; }
.track-item:hover { background:#f9fafb !important; }
.track-item.active-track { background:#eef2ff !important; border-left-color:#6366f1 !important; }
.track-item.active-track .fw-bold { color:#6366f1; }
.play-now { background:none; border:none; color:#6366f1; cursor:pointer; font-size:0.8rem; padding:2px 6px; border-radius:4px; }
.play-now:hover { background:#eef2ff; }

/* ===== FORMS ===== */
.form-clean { border:1px solid var(--border); border-radius:8px; padding:0.55rem 0.75rem; font-size:0.875rem; transition:border-color 0.15s; }
.form-clean:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
.form-label-clean { font-size:0.8rem; font-weight:600; color:#374151; margin-bottom:0.25rem; display:block; }

/* ===== BUTTONS ===== */
.btn-clean {
    border:none; border-radius:8px; padding:0.5rem 1.25rem;
    font-size:0.85rem; font-weight:600; cursor:pointer;
    transition:all 0.15s; display:inline-flex; align-items:center; gap:6px;
}
.btn-primary-clean { background:var(--primary); color:#fff; }
.btn-primary-clean:hover { background:#4f46e5; transform:translateY(-1px); box-shadow:0 4px 10px rgba(99,102,241,0.25); }
.btn-success-clean { background:var(--success); color:#fff; }
.btn-success-clean:hover { background:#059669; }
.btn-danger-clean { background:var(--danger); color:#fff; }
.btn-danger-clean:hover { background:#dc2626; }
.btn-outline-clean { background:transparent; border:1px solid var(--border); color:#374151; }
.btn-outline-clean:hover { background:#f9fafb; border-color:#d1d5db; }

/* ===== TABLE ===== */
.table-clean { font-size:0.85rem; margin:0; }
.table-clean thead th {
    background:#f9fafb; color:var(--text-muted); font-weight:600;
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.5px;
    padding:0.65rem 0.75rem; border-bottom:2px solid var(--border);
}
.table-clean tbody td { padding:0.6rem 0.75rem; border-bottom:1px solid #f3f4f6; vertical-align:middle; }

/* ===== BADGES ===== */
.badge-clean { padding:0.2rem 0.55rem; border-radius:20px; font-size:0.7rem; font-weight:600; }

/* ===== ALERTS ===== */
.alert-clean { border:none; border-radius:10px; padding:0.75rem 1rem; font-size:0.85rem; }

/* ===== EMBED CODE ===== */
.embed-box { display:flex; gap:6px; }
.embed-box input { flex:1; font-size:0.75rem; background:#f9fafb; cursor:pointer; }

/* ===== LANDING ===== */
.hero-wrap {
    background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    padding:2rem;
}
.hero-wrap h1 { font-size:3.2rem; font-weight:800; line-height:1.1; margin-bottom:1rem; }
.hero-wrap h1 span { background:linear-gradient(135deg,#6366f1,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-wrap p { font-size:1.1rem; color:rgba(255,255,255,0.5); max-width:500px; margin:0 auto 2rem; }
.btn-hero {
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    border:none; padding:0.8rem 2.5rem;
    border-radius:12px; font-size:1rem; font-weight:700;
    color:#fff; cursor:pointer; transition:all 0.2s;
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-hero:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(99,102,241,0.4); color:#fff; }

.feature-card {
    background:#fff; border-radius:16px; padding:2rem; text-align:center;
    border:1px solid rgba(0,0,0,0.04); transition:transform 0.2s;
}
.feature-card:hover { transform:translateY(-4px); }
.feat-num {
    width:48px; height:48px; margin:0 auto 1rem;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    color:#fff; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.1rem;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
    .sidebar { width:100%; position:relative; }
    .main-content { margin-left:0; padding:1rem; }
    .hero-wrap h1 { font-size:2rem; }
    .stat-card .stat-value { font-size:1.3rem; }
}