:root{
    --bg:#050b22;
    --card:#111827;
    --border:#1f2937;
    --text:#ffffff;
    --muted:#94a3b8;
    --primary:#3b82f6;
}

body{
    background:var(--bg);
    color:var(--text);
    margin:0;
    overflow-x:hidden;
}

.app-wrapper{
    display:flex;
}

/* Sidebar */

.sidebar{
    width:260px;
    min-height:100vh;
    background:#0d1324;
    border-right:1px solid var(--border);
    padding:20px;
    position:fixed;
}

.main-content{
    margin-left:260px;
    width:calc(100% - 260px);
    padding:20px;
}

/* Header */

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.page-title{
    font-size:34px;
    font-weight:700;
}

.page-subtitle{
    color:var(--muted);
}

/* Cards */

.dashboard-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding:20px;
}

/* Stats */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:20px;
}

.stat-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:20px;
}

.stat-value{
    font-size:28px;
    font-weight:bold;
}

/* Videos */

.video-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-top:20px;
}

.video-card{
    background:var(--card);
    border-radius:12px;
    overflow:hidden;
    border:1px solid var(--border);
}

.video-card iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
}