:root {
    --bg-page: #f0fdfa; /* Soft mint/cyan background */
    
    --text-dark: #1e293b;
    --text-muted: #64748b;
    
    --brand-blue: #3b82f6;
    --brand-yellow: #facc15;
    --brand-coral: #fb7185;
    
    --bg-white: #ffffff;
    --bg-gray: #f8fafc;
    
    /* Bento Box styling */
    --bento-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 10px 20px rgba(0,0,0,0.04);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Quicksand', sans-serif;
    background-color: var(--bg-page);
    /* Soft playful grid pattern in background */
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--text-dark);
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; overflow-x: hidden;
}

h1, h2, h3, h4, .logo b, .btn-primary, .rank { font-family: 'Nunito', sans-serif; }

/* Canvas */
.presentation-canvas {
    width: 100%; max-width: 1400px;
    display: flex; flex-direction: column; align-items: center;
    padding: 2rem;
}

/* Header */
.presentation-header { text-align: center; margin-bottom: 3rem; }
.presentation-header h1 { font-size: 3.2rem; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 0.5rem; color: var(--text-dark);}
.presentation-header p { color: var(--text-muted); font-size: 1.2rem; font-weight: 600; max-width: 800px; margin: 0 auto;}

/* --- BENTO GRID LAYOUT --- */
.bento-container {
    display: grid;
    grid-template-columns: repeat(4, 280px); /* 4 columns of fixed width */
    grid-template-rows: 240px 180px 240px; /* 3 rows */
    gap: 24px;
    justify-content: center;
}

/* Base Bento Box Style */
.bento-box {
    background: var(--bg-white);
    border-radius: 32px; /* Super rounded like iOS widgets */
    box-shadow: var(--bento-shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
}
.bento-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.03), 0 20px 40px rgba(0,0,0,0.06);
}

/* 1. Hero Video Box */
.hero-video { grid-column: 1 / 4; grid-row: 1 / 3; padding: 0;}
.bento-topbar { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 2rem; border-bottom: 2px solid var(--bg-gray);}
.bento-topbar .logo { font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text-dark);}
.bento-topbar .logo b { font-weight: 900; }
.search-bar { flex: 1; max-width: 400px; background: var(--bg-gray); padding: 0.6rem 1.2rem; border-radius: 100px; display: flex; align-items: center; gap: 0.5rem;}
.search-bar input { border: none; background: transparent; outline: none; width: 100%; font-family: inherit; font-weight: 600; color: var(--text-dark);}
.streak-badge { background: #fef08a; color: #a16207; font-weight: 800; padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.9rem;}

.video-content { display: flex; gap: 2rem; padding: 2rem; height: 100%;}
.video-player { position: relative; width: 60%; background: #000; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.video-player img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8;}
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background: var(--brand-coral); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.8rem; cursor: pointer; box-shadow: 0 10px 25px rgba(225, 29, 72, 0.4);}
.video-controls { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; display: flex; align-items: center; gap: 1rem; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding: 1rem 1.2rem; border-radius: 16px;}
.progress-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden;}
.progress-bar .fill { height: 100%; background: var(--brand-yellow); border-radius: 4px;}
.time-text { color: white; font-size: 0.8rem; font-weight: 700; font-family: monospace;}

.course-info { flex: 1; display: flex; flex-direction: column; justify-content: center;}
.course-info h2 { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; color: var(--text-dark); line-height: 1.2;}
.course-info p { color: var(--text-muted); font-weight: 600; margin-bottom: 2rem; font-size: 1.1rem;}
.tutor-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;}
.tutor-info img { width: 56px; height: 56px; border-radius: 16px;}
.tutor-info div { display: flex; flex-direction: column;}
.tutor-info b { font-size: 1.1rem; color: var(--text-dark);}
.tutor-info span { font-size: 0.9rem; color: var(--text-muted); font-weight: 600;}
.btn-primary { background: var(--brand-blue); color: white; border: none; padding: 1rem 2rem; border-radius: 100px; font-weight: 800; font-size: 1.1rem; cursor: pointer; display: inline-block; width: max-content; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);}


/* 2. Leaderboard Box */
.leaderboard-box { grid-column: 4 / 5; grid-row: 1 / 4; display: flex; flex-direction: column; padding: 2rem;}
.leaderboard-box h4 { font-size: 1.4rem; font-weight: 900; margin-bottom: 1.5rem; text-align: center;}
.leaderboard-list { display: flex; flex-direction: column; gap: 1rem; flex: 1;}
.lb-item { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border-radius: 100px; background: var(--bg-gray); transition: transform 0.2s;}
.lb-item:hover { transform: scale(1.02); }
.lb-item .rank { font-size: 1.3rem; font-weight: 900; width: 30px; text-align: center;}
.lb-item img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid white;}
.lb-info { flex: 1; display: flex; flex-direction: column;}
.lb-info b { font-size: 1rem; font-weight: 800;}
.lb-info span { font-size: 0.8rem; color: var(--text-muted); font-weight: 700;}

.lb-item.rank-1 { background: linear-gradient(135deg, #fefce8, #fef08a); border: 2px solid #fde047;}
.lb-item.rank-2 { background: #eff6ff;}
.lb-item.rank-3 { background: #fdf2f8;}
.lb-item.you { background: var(--brand-blue); color: white; box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);}
.lb-item.you span { color: #bfdbfe;}

.quiz-promo { margin-top: auto; display: flex; align-items: center; gap: 1rem; background: #fff1f2; padding: 1.2rem; border-radius: 20px; border: 2px dashed var(--brand-coral);}
.q-icon { font-size: 2rem;}
.quiz-promo b { display: block; font-size: 1rem; font-weight: 800; color: #881337;}
.quiz-promo span { font-size: 0.8rem; font-weight: 700; color: var(--brand-coral);}


/* 3. Profile Box */
.profile-box { grid-column: 1 / 2; grid-row: 3 / 4; align-items: center; justify-content: center; text-align: center;}
.level-ring { position: relative; width: 110px; height: 110px; margin-bottom: 1rem;}
.level-ring svg { width: 100%; height: 100%; transform: rotate(-90deg);}
.bg-circle { fill: none; stroke: var(--bg-gray); stroke-width: 8;}
.progress-circle { fill: none; stroke: var(--brand-coral); stroke-width: 8; stroke-linecap: round;}
.p-avatar { position: absolute; top: 8px; left: 8px; width: 94px; height: 94px; border-radius: 50%; object-fit: cover; border: 4px solid white;}
.profile-box h3 { font-size: 1.3rem; font-weight: 900;}
.profile-box span { font-size: 0.9rem; color: var(--text-muted); font-weight: 700; margin-top: 0.2rem;}


/* 4. Badges Box */
.badges-box { grid-column: 2 / 3; grid-row: 3 / 4; justify-content: center;}
.badges-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;}
.badges-head h4 { font-size: 1.2rem; font-weight: 900;}
.badge-count { background: var(--bg-gray); padding: 0.3rem 0.8rem; border-radius: 100px; font-size: 0.8rem; font-weight: 700;}

.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
.b-item { height: 70px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 2rem;}
.b-item.yellow { background: #fef08a; }
.b-item.blue { background: #bfdbfe; }
.b-item.coral { background: #fecdd3; }
.b-item.gray { background: #f1f5f9; filter: grayscale(100%); opacity: 0.6;}


/* 5. Curriculum Box */
.curriculum-box { grid-column: 3 / 4; grid-row: 3 / 4; justify-content: center;}
.curriculum-box h4 { font-size: 1.2rem; font-weight: 900; margin-bottom: 1.5rem;}
.module-list { display: flex; flex-direction: column; gap: 1rem;}
.module-item { display: flex; gap: 1rem; align-items: center; padding: 1rem; background: var(--bg-gray); border-radius: 20px;}
.module-item.active { background: #eff6ff; border: 2px solid #bfdbfe;}
.module-item.active .m-icon { background: var(--brand-blue); color: white;}
.module-item.locked { opacity: 0.6; }
.module-item.locked .m-icon { background: #e2e8f0; color: #94a3b8;}
.m-icon { width: 44px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;}
.m-text { flex: 1; display: flex; flex-direction: column;}
.m-text b { font-size: 1rem; font-weight: 800; color: var(--text-dark);}
.m-text span { font-size: 0.8rem; color: var(--text-muted); font-weight: 700;}