:root {
    --side-bg: #0d0d12;
    --main-bg: #050507;
    --accent-purple: #a855f7;
    --kick-green: #53fc18;
    --border-color: #1f1f27;
}

body {
    display: flex;
    margin: 0;
    height: 100vh;
    background: var(--main-bg);
    color: white;
    font-family: 'Inter', sans-serif;
}

/* Sidebar Styling */
.sidebar {
    width: 280px;
    background: var(--side-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 25px;
    box-sizing: border-box;
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.logo-box { 
    background: var(--accent-purple); width: 40px; height: 40px; 
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}
.brand-text h2 { margin: 0; font-size: 18px; letter-spacing: 1px; }
.brand-text h2 span { color: var(--accent-purple); }
.brand-text small { color: #555; font-weight: bold; }

.nav-group { margin-bottom: 30px; }
.nav-group label { display: block; font-size: 10px; color: #444; margin-bottom: 10px; letter-spacing: 1px; }

input[type="text"] {
    width: 100%; background: #000; border: 1px solid #222; 
    padding: 12px; border-radius: 8px; color: white; margin-bottom: 10px;
    box-sizing: border-box;
}

.btn-primary {
    width: 100%; background: var(--accent-purple); border: none; 
    padding: 12px; border-radius: 8px; color: white; font-weight: bold; cursor: pointer;
}

.btn-mute {
    width: 100%; background: #ff444415; border: 1px solid #ff4444; 
    color: #ff4444; padding: 12px; border-radius: 8px; cursor: pointer;
}

/* Main Content & Grid */
.main-content { flex: 1; padding: 10px; }
.streams-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 10px; height: 100%;
}

.stream-slot {
    background: #0a0a0c; border: 1px solid var(--border-color);
    border-radius: 15px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

/* جعل الـ iframe يملأ المكان بالكامل */
iframe {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: none;
}

.slot-ui { z-index: 2; text-align: center; }
.number { 
    display: block; font-size: 40px; color: #15151a; font-weight: 900; 
    position: absolute; top: 10px; right: 20px;
}

.sidebar-footer { margin-top: auto; font-size: 11px; color: #333; line-height: 1.6; }