355	        .footer { text-align: center; padding: 20px 56px; font-size: 11px; color: var(--ink-muted); border-top: 1px solid var(--border); background: var(--white); letter-spacing: .05em; }
356	        .footer strong { color: var(--gold); font-weight: 600; }
357
358	        @media (max-width:1140px) {
359	            .stats-grid { grid-template-columns: repeat(2, 1fr); }
360	            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }
361	        }
362
363	        @media (max-width:900px) {
364	            .topbar { padding: 0 16px; height: 48px; }
365	            .topbar-tag:last-child { display: none; }
366	            .hero { padding: 24px 16px 20px; }
367	            .main { padding: 16px 16px 48px; }
368	            .footer { padding: 14px 16px; font-size: 10px; }
369	            .hero-inner { flex-direction: column; gap: 16px; }
370	            .hero-title { font-size: 28px; }
371	            .hero-meta { flex-wrap: wrap; width: 100%; }
372	            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }
373	            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
374	            .stat-num { font-size: 32px; }
375	            .stat-card { padding: 16px 16px 14px; }
376	            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
377	            .controls-row { width: 100%; gap: 8px; }
378	            .search-wrap { width: 100%; }
379	            .search-input { width: 100%; box-sizing: border-box; }
380	            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }
381	            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }
382	            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
383	            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
384	            .sort-btn { min-height: 40px; }
385	            .table-head { display: none; }
386	            .table-card { background: transparent; border: none; box-shadow: none; }
387	            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }
388	            .learner-row:active { box-shadow: var(--shadow-md); }
389	            .learner-row:last-child { border-bottom: 1px solid var(--border); }
390	            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
391	            .row-num { font-size: 12px; min-width: 18px; }
392	            .avatar { width: 40px; height: 40px; font-size: 14px; }
393	            .learner-name { font-size: 14px; }
394	            .learner-dept { font-size: 11px; margin-top: 3px; }
395	            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }
396	            .sessions-done { font-size: 20px; }
397	            .pct-cell { display: none !important; }
398	            .cell.center { display: none !important; }
399	            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
400	            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }
401	        }
402
403	        @media (max-width:480px) {
404	            .topbar { padding: 0 14px; height: 46px; }
405	            .brand-sep, .brand-sub { display: none; }
406	            .hero { padding: 18px 14px 16px; }
407	            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }
408	            .hero-title { font-size: 22px; line-height: 1.18; }
409	            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }
410	            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
411	            .meta-chip:last-child { border-bottom: none; }
412	            .main { padding: 14px 14px 56px; }
413	            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
414	            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }
415	            .stat-num { font-size: 26px; }
416	            .stat-num .unit { font-size: 16px; }
417	            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }
418	            .stat-lbl { font-size: 10px; }
419	            .stat-tag { display: none; }
420	            .section-title { font-size: 12px; }
421	            .count-badge { font-size: 10px; }
422	            .filter-btn { padding: 10px 10px; font-size: 10px; }
423	            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
424	            .sort-btn { font-size: 11px; padding: 9px 12px; }
425	            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }
426	            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }
427	            .learner-info { padding: 12px 14px 10px; }
428	            .avatar { width: 36px; height: 36px; font-size: 12px; }
429	            .learner-name { font-size: 13px; }
430	            .learner-dept { font-size: 10px; }
431	            .progress-cell { padding: 10px 14px 10px !important; }
432	            .sessions-done { font-size: 18px; }
433	            .card-footer { padding: 9px 14px; }
434	            .card-footer-pct { font-size: 20px; }
435	            .status-badge { font-size: 9px; padding: 3px 8px; }
436	            .batch-pill { font-size: 8px; padding: 1px 6px; }
437	            .footer { font-size: 10px; padding: 12px 14px; }
438	        }
439	    </style>
440
441
442
443

444

445
🏆

446	            AI Champions
447

448	            DEWA
449

450

451

452
453
454

455

456

457
📊 Learning Analytics

458
AI Champions: Vibe Coder to Agentic Engineer

459

460
9 enrolled total

461
93 sessions total

462
3 week program

463
Avg. —% complete

464
— min watched total

465

466

467

468

469
470
471

472

473

474

.footer { text-align: center; padding: 20px 56px; font-size: 11px; color: var(--ink-muted); border-top: 1px solid var(--border); background: var(--white); letter-spacing: .05em; }
        .footer strong { color: var(--gold); font-weight: 600; }

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }
        }

        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 48px; }
            .topbar-tag:last-child { display: none; }
            .hero { padding: 24px 16px 20px; }
            .main { padding: 16px 16px 48px; }
            .footer { padding: 14px 16px; font-size: 10px; }
            .hero-inner { flex-direction: column; gap: 16px; }
            .hero-title { font-size: 28px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .stat-num { font-size: 32px; }
            .stat-card { padding: 16px 16px 14px; }
            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; box-sizing: border-box; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }
            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
            .sort-btn { min-height: 40px; }
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }
            .learner-row:active { box-shadow: var(--shadow-md); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 18px; }
            .avatar { width: 40px; height: 40px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .sessions-done { font-size: 20px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }
        }

        @media (max-width:480px) {
            .topbar { padding: 0 14px; height: 46px; }
            .brand-sep, .brand-sub { display: none; }
            .hero { padding: 18px 14px 16px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }
            .hero-title { font-size: 22px; line-height: 1.18; }
            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:last-child { border-bottom: none; }
            .main { padding: 14px 14px 56px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }
            .stat-num { font-size: 26px; }
            .stat-num .unit { font-size: 16px; }
            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }
            .stat-lbl { font-size: 10px; }
            .stat-tag { display: none; }
            .section-title { font-size: 12px; }
            .count-badge { font-size: 10px; }
            .filter-btn { padding: 10px 10px; font-size: 10px; }
            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
            .sort-btn { font-size: 11px; padding: 9px 12px; }
            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }
            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 36px; height: 36px; font-size: 12px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px 10px !important; }
            .sessions-done { font-size: 18px; }
            .card-footer { padding: 9px 14px; }
            .card-footer-pct { font-size: 20px; }
            .status-badge { font-size: 9px; padding: 3px 8px; }
            .batch-pill { font-size: 8px; padding: 1px 6px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }
    </style>

🏆

            AI Champions

            DEWA

📊 Learning Analytics

AI Champions: Vibe Coder to Agentic Engineer

9 enrolled total

93 sessions total

3 week program

Avg. —% complete

— min watched total


I'll replace the mobile CSS with a more comprehensive, better-tuned approach — improved touch targets, compacter hero, better card layout, and a small-phone breakpoint.


Edit

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }
        }

        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 48px; }
            .topbar-tag:last-child { display: none; }
            .hero { padding: 24px 16px 20px; }
            .main { padding: 16px 16px 48px; }
            .footer { padding: 14px 16px; font-size: 10px; }
            .hero-inner { flex-direction: column; gap: 16px; }
            .hero-title { font-size: 28px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .stat-num { font-size: 32px; }
            .stat-card { padding: 16px 16px 14px; }
            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; box-sizing: border-box; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }
            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
            .sort-btn { min-height: 40px; }
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }
            .learner-row:active { box-shadow: var(--shadow-md); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 18px; }
            .avatar { width: 40px; height: 40px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .sessions-done { font-size: 20px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }
        }

        @media (max-width:480px) {
            .topbar { padding: 0 14px; height: 46px; }
            .brand-sep, .brand-sub { display: none; }
            .hero { padding: 18px 14px 16px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }
            .hero-title { font-size: 22px; line-height: 1.18; }
            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:last-child { border-bottom: none; }
            .main { padding: 14px 14px 56px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }
            .stat-num { font-size: 26px; }
            .stat-num .unit { font-size: 16px; }
            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }
            .stat-lbl { font-size: 10px; }
            .stat-tag { display: none; }
            .section-title { font-size: 12px; }
            .count-badge { font-size: 10px; }
            .filter-btn { padding: 10px 10px; font-size: 10px; }
            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
            .sort-btn { font-size: 11px; padding: 9px 12px; }
            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }
            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 36px; height: 36px; font-size: 12px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px 10px !important; }
            .sessions-done { font-size: 18px; }
            .card-footer { padding: 9px 14px; }
            .card-footer-pct { font-size: 20px; }
            .status-badge { font-size: 9px; padding: 3px 8px; }
            .batch-pill { font-size: 8px; padding: 1px 6px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }

        /* faster tap response on mobile */
        button, input { touch-action: manipulation; }

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }
        }

        /* ── TABLET / LARGE PHONE ── */
        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 52px; }
            .hero { padding: 20px 16px 18px; }
            .main { padding: 16px 16px 56px; }
            .footer { padding: 14px 16px; font-size: 11px; }

            /* hero */
            .hero-inner { flex-direction: column; gap: 12px; }
            .hero-pill { margin-bottom: 10px; }
            .hero-title { font-size: 26px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 9px 14px; font-size: 11px; flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); }
            .meta-chip:nth-child(odd) { border-right: 1px solid var(--border); }
            .meta-chip:nth-last-child(-n+2) { border-bottom: none; }

            /* stats */
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .stat-num { font-size: 36px; }
            .stat-card { padding: 18px 16px 16px; }

            /* controls */
            .section-head { flex-direction: row; align-items: center; margin-bottom: 12px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; font-size: 16px; /* prevents iOS zoom */ padding: 11px 14px 11px 36px; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; scrollbar-width: none; }
            .filter-group::-webkit-scrollbar { display: none; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 0 14px; font-size: 12px; min-height: 44px; }
            .dept-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; gap: 6px; }
            .dept-row::-webkit-scrollbar { display: none; }
            .dept-btn { flex-shrink: 0; min-height: 38px; padding: 0 14px; font-size: 12px; }
            .sort-btn { min-height: 44px; }

            /* table → cards */
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row {
                display: flex !important; flex-direction: column !important;
                padding: 0; margin-bottom: 10px;
                border: 1px solid var(--border); border-radius: var(--r-lg);
                background: var(--white); box-shadow: var(--shadow-sm);
                overflow: hidden; column-gap: 0; transition: box-shadow .2s;
            }
            .learner-row:active { box-shadow: var(--shadow-md); transform: scale(.995); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 20px; }
            .avatar { width: 42px; height: 42px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .progress-track { height: 8px; }
            .sessions-done { font-size: 22px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 24px; font-weight: 700; }
        }

        /* ── PHONE ── */
        @media (max-width:600px) {
            .topbar { padding: 0 14px; }
            .brand-sep, .brand-sub { display: none; }
            .brand-name { font-size: 14px; }

            .hero { padding: 16px 14px 14px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 10px; }
            .hero-title { font-size: 20px; line-height: 1.2; }
            .hero-meta { border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:nth-child(odd) { border-right: none; }
            .meta-chip:last-child { border-bottom: none; }

            .main { padding: 12px 12px 64px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
            .stat-card { padding: 14px 12px 12px; border-radius: var(--r-md); }
            .stat-accent { height: 3px; }
            .stat-icon-wrap { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
            .stat-num { font-size: 30px; }
            .stat-num .unit { font-size: 18px; }
            .stat-lbl { font-size: 10px; margin-top: 4px; }
            .stat-tag { display: none; }

            .section-head { margin-bottom: 10px; }
            .section-title { font-size: 13px; }
            .count-badge { font-size: 11px; }

            .filter-btn { padding: 0 11px; font-size: 11px; min-height: 44px; }
            .dept-btn { font-size: 11px; padding: 0 12px; min-height: 38px; }
            .sort-btn { font-size: 11px; padding: 0 14px; min-height: 44px; }

            .search-input { padding: 12px 14px 12px 36px; }

            .learner-row { margin-bottom: 8px; border-radius: var(--r-md); }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 38px; height: 38px; font-size: 13px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px !important; }
            .sessions-done { font-size: 20px; }
            .card-footer { padding: 10px 14px; }
            .card-footer-pct { font-size: 22px; }
            .status-badge { font-size: 10px; padding: 4px 10px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }

        /* ── SMALL PHONE (iPhone SE etc.) ── */
        @media (max-width:375px) {
            .hero-title { font-size: 18px; }
            .stats-grid { gap: 6px; }
            .stat-num { font-size: 26px; }
            .stat-lbl { font-size: 9px; letter-spacing: .04em; }
            .filter-btn { padding: 0 9px; font-size: 10px; }
            .dept-btn { font-size: 10px; padding: 0 10px; }
            .learner-name { font-size: 12px; }
            .card-footer-pct { font-size: 20px; }
        }


The file /Users/khalidbinkalban/ai-champions-dashboard.html has been updated successfully.

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }
        }

        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 48px; }
            .topbar-tag:last-child { display: none; }
            .hero { padding: 24px 16px 20px; }
            .main { padding: 16px 16px 48px; }
            .footer { padding: 14px 16px; font-size: 10px; }
            .hero-inner { flex-direction: column; gap: 16px; }
            .hero-title { font-size: 28px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .stat-num { font-size: 32px; }
            .stat-card { padding: 16px 16px 14px; }
            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; box-sizing: border-box; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }
            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }
            .sort-btn { min-height: 40px; }
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }
            .learner-row:active { box-shadow: var(--shadow-md); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 18px; }
            .avatar { width: 40px; height: 40px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .sessions-done { font-size: 20px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }
        }

        @media (max-width:480px) {
            .topbar { padding: 0 14px; height: 46px; }
            .brand-sep, .brand-sub { display: none; }
            .hero { padding: 18px 14px 16px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }
            .hero-title { font-size: 22px; line-height: 1.18; }
            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:last-child { border-bottom: none; }
            .main { padding: 14px 14px 56px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }
            .stat-num { font-size: 26px; }
            .stat-num .unit { font-size: 16px; }
            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }
            .stat-lbl { font-size: 10px; }
            .stat-tag { display: none; }
            .section-title { font-size: 12px; }
            .count-badge { font-size: 10px; }
            .filter-btn { padding: 10px 10px; font-size: 10px; }
            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }
            .sort-btn { font-size: 11px; padding: 9px 12px; }
            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }
            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 36px; height: 36px; font-size: 12px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px 10px !important; }
            .sessions-done { font-size: 18px; }
            .card-footer { padding: 9px 14px; }
            .card-footer-pct { font-size: 20px; }
            .status-badge { font-size: 9px; padding: 3px 8px; }
            .batch-pill { font-size: 8px; padding: 1px 6px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }

        /* faster tap response on mobile */
        button, input { touch-action: manipulation; }

        @media (max-width:1140px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .table-head, .learner-row { grid-template-columns: 1.2fr 1fr 80px 130px; column-gap: 10px; }
        }

        /* ── TABLET / LARGE PHONE ── */
        @media (max-width:900px) {
            .topbar { padding: 0 16px; height: 52px; }
            .hero { padding: 20px 16px 18px; }
            .main { padding: 16px 16px 56px; }
            .footer { padding: 14px 16px; font-size: 11px; }

            /* hero */
            .hero-inner { flex-direction: column; gap: 12px; }
            .hero-pill { margin-bottom: 10px; }
            .hero-title { font-size: 26px; }
            .hero-meta { flex-wrap: wrap; width: 100%; }
            .meta-chip { padding: 9px 14px; font-size: 11px; flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); }
            .meta-chip:nth-child(odd) { border-right: 1px solid var(--border); }
            .meta-chip:nth-last-child(-n+2) { border-bottom: none; }

            /* stats */
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .stat-num { font-size: 36px; }
            .stat-card { padding: 18px 16px 16px; }

            /* controls */
            .section-head { flex-direction: row; align-items: center; margin-bottom: 12px; }
            .controls-row { width: 100%; gap: 8px; }
            .search-wrap { width: 100%; }
            .search-input { width: 100%; font-size: 16px; /* prevents iOS zoom */ padding: 11px 14px 11px 36px; }
            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; scrollbar-width: none; }
            .filter-group::-webkit-scrollbar { display: none; }
            .filter-btn { flex-shrink: 0; justify-content: center; padding: 0 14px; font-size: 12px; min-height: 44px; }
            .dept-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; gap: 6px; }
            .dept-row::-webkit-scrollbar { display: none; }
            .dept-btn { flex-shrink: 0; min-height: 38px; padding: 0 14px; font-size: 12px; }
            .sort-btn { min-height: 44px; }

            /* table → cards */
            .table-head { display: none; }
            .table-card { background: transparent; border: none; box-shadow: none; }
            .learner-row {
                display: flex !important; flex-direction: column !important;
                padding: 0; margin-bottom: 10px;
                border: 1px solid var(--border); border-radius: var(--r-lg);
                background: var(--white); box-shadow: var(--shadow-sm);
                overflow: hidden; column-gap: 0; transition: box-shadow .2s;
            }
            .learner-row:active { box-shadow: var(--shadow-md); transform: scale(.995); }
            .learner-row:last-child { border-bottom: 1px solid var(--border); }
            .learner-info { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); width: 100%; }
            .row-num { font-size: 12px; min-width: 20px; }
            .avatar { width: 42px; height: 42px; font-size: 14px; }
            .learner-name { font-size: 14px; }
            .learner-dept { font-size: 11px; margin-top: 3px; }
            .progress-cell { padding: 12px 16px !important; border-bottom: 1px solid var(--border); width: 100%; }
            .progress-track { height: 8px; }
            .sessions-done { font-size: 22px; }
            .pct-cell { display: none !important; }
            .cell.center { display: none !important; }
            .card-footer { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-alt); }
            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 24px; font-weight: 700; }
        }

        /* ── PHONE ── */
        @media (max-width:600px) {
            .topbar { padding: 0 14px; }
            .brand-sep, .brand-sub { display: none; }
            .brand-name { font-size: 14px; }

            .hero { padding: 16px 14px 14px; }
            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 10px; }
            .hero-title { font-size: 20px; line-height: 1.2; }
            .hero-meta { border-radius: var(--r-sm); }
            .meta-chip { flex: 1 1 100%; border-right: none !important; border-bottom: 1px solid var(--border); padding: 9px 14px; }
            .meta-chip:nth-child(odd) { border-right: none; }
            .meta-chip:last-child { border-bottom: none; }

            .main { padding: 12px 12px 64px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
            .stat-card { padding: 14px 12px 12px; border-radius: var(--r-md); }
            .stat-accent { height: 3px; }
            .stat-icon-wrap { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
            .stat-num { font-size: 30px; }
            .stat-num .unit { font-size: 18px; }
            .stat-lbl { font-size: 10px; margin-top: 4px; }
            .stat-tag { display: none; }

            .section-head { margin-bottom: 10px; }
            .section-title { font-size: 13px; }
            .count-badge { font-size: 11px; }

            .filter-btn { padding: 0 11px; font-size: 11px; min-height: 44px; }
            .dept-btn { font-size: 11px; padding: 0 12px; min-height: 38px; }
            .sort-btn { font-size: 11px; padding: 0 14px; min-height: 44px; }

            .search-input { padding: 12px 14px 12px 36px; }

            .learner-row { margin-bottom: 8px; border-radius: var(--r-md); }
            .learner-info { padding: 12px 14px 10px; }
            .avatar { width: 38px; height: 38px; font-size: 13px; }
            .learner-name { font-size: 13px; }
            .learner-dept { font-size: 10px; }
            .progress-cell { padding: 10px 14px !important; }
            .sessions-done { font-size: 20px; }
            .card-footer { padding: 10px 14px; }
            .card-footer-pct { font-size: 22px; }
            .status-badge { font-size: 10px; padding: 4px 10px; }
            .footer { font-size: 10px; padding: 12px 14px; }
        }

        /* ── SMALL PHONE (iPhone SE etc.) ── */
        @media (max-width:375px) {
            .hero-title { font-size: 18px; }
            .stats-grid { gap: 6px; }
            .stat-num { font-size: 26px; }
            .stat-lbl { font-size: 9px; letter-spacing: .04em; }
            .filter-btn { padding: 0 9px; font-size: 10px; }
            .dept-btn { font-size: 10px; padding: 0 10px; }
            .learner-name { font-size: 12px; }
            .card-footer-pct { font-size: 20px; }
        }

.footer { text-align: center; padding: 20px 56px; font-size: 11px; color: var(--ink-muted); border-top: 1px solid var(--border); background: var(--white); letter-spacing: .05em; }

.footer strong { color: var(--gold); font-weight: 600; }

+        /* faster tap response on mobile */

+        button, input { touch-action: manipulation; }

+        /* ── TABLET / LARGE PHONE ── */

-            .topbar { padding: 0 16px; height: 48px; }

-            .topbar-tag:last-child { display: none; }

-            .hero { padding: 24px 16px 20px; }

-            .main { padding: 16px 16px 48px; }

-            .footer { padding: 14px 16px; font-size: 10px; }

-            .hero-inner { flex-direction: column; gap: 16px; }

-            .hero-title { font-size: 28px; }

+            .topbar { padding: 0 16px; height: 52px; }

+            .hero { padding: 20px 16px 18px; }

+            .main { padding: 16px 16px 56px; }

+            .footer { padding: 14px 16px; font-size: 11px; }

+            .hero-inner { flex-direction: column; gap: 12px; }

+            .hero-pill { margin-bottom: 10px; }

+            .hero-title { font-size: 26px; }

.hero-meta { flex-wrap: wrap; width: 100%; }

-            .meta-chip { padding: 8px 14px; font-size: 11px; flex: 1 1 40%; }

-            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

-            .stat-num { font-size: 32px; }

-            .stat-card { padding: 16px 16px 14px; }

-            .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }

+            .meta-chip { padding: 9px 14px; font-size: 11px; flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); }

+            .meta-chip:nth-child(odd) { border-right: 1px solid var(--border); }

+            .meta-chip:nth-last-child(-n+2) { border-bottom: none; }

+            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

+            .stat-num { font-size: 36px; }

+            .stat-card { padding: 18px 16px 16px; }

+            .section-head { flex-direction: row; align-items: center; margin-bottom: 12px; }

.controls-row { width: 100%; gap: 8px; }

-            .search-input { width: 100%; box-sizing: border-box; }

-            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; }

-            .filter-btn { flex-shrink: 0; justify-content: center; padding: 10px 12px; font-size: 11px; min-height: 40px; }

-            .dept-row, .batch-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

-            .dept-btn, .batch-btn { flex-shrink: 0; min-height: 36px; }

-            .sort-btn { min-height: 40px; }

+            .search-input { width: 100%; font-size: 16px; /* prevents iOS zoom */ padding: 11px 14px 11px 36px; }

+            .filter-group { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; flex-wrap: nowrap; scrollbar-width: none; }

+            .filter-group::-webkit-scrollbar { display: none; }

+            .filter-btn { flex-shrink: 0; justify-content: center; padding: 0 14px; font-size: 12px; min-height: 44px; }

+            .dept-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; gap: 6px; }

+            .dept-row::-webkit-scrollbar { display: none; }

+            .dept-btn { flex-shrink: 0; min-height: 38px; padding: 0 14px; font-size: 12px; }

+            .sort-btn { min-height: 44px; }

-            .learner-row { display: flex !important; flex-direction: column !important; gap: 0; padding: 0; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; column-gap: 0; transition: box-shadow .2s; }

-            .learner-row:active { box-shadow: var(--shadow-md); }

+                display: flex !important; flex-direction: column !important;

+                padding: 0; margin-bottom: 10px;

+                border: 1px solid var(--border); border-radius: var(--r-lg);

+                background: var(--white); box-shadow: var(--shadow-sm);

+                overflow: hidden; column-gap: 0; transition: box-shadow .2s;

+            .learner-row:active { box-shadow: var(--shadow-md); transform: scale(.995); }

-            .row-num { font-size: 12px; min-width: 18px; }

-            .avatar { width: 40px; height: 40px; font-size: 14px; }

+            .row-num { font-size: 12px; min-width: 20px; }

+            .avatar { width: 42px; height: 42px; font-size: 14px; }

.learner-dept { font-size: 11px; margin-top: 3px; }

-            .progress-cell { padding: 12px 16px 12px !important; border-bottom: 1px solid var(--border); width: 100%; }

-            .sessions-done { font-size: 20px; }

+            .progress-cell { padding: 12px 16px !important; border-bottom: 1px solid var(--border); width: 100%; }

+            .progress-track { height: 8px; }

+            .sessions-done { font-size: 22px; }

.cell.center { display: none !important; }

-            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 22px; font-weight: 700; }

+            .card-footer-pct { font-family: 'Fraunces', 'Georgia', 'Palatino Linotype', Palatino, serif; font-size: 24px; font-weight: 700; }

-            .topbar { padding: 0 14px; height: 46px; }

+            .topbar { padding: 0 14px; }

.brand-sep, .brand-sub { display: none; }

-            .hero { padding: 18px 14px 16px; }

-            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 12px; }

-            .hero-title { font-size: 22px; line-height: 1.18; }

-            .hero-meta { flex-direction: column; border-radius: var(--r-sm); }

+            .brand-name { font-size: 14px; }

+            .hero { padding: 16px 14px 14px; }

+            .hero-pill { font-size: 10px; padding: 4px 10px 4px 8px; margin-bottom: 10px; }

+            .hero-title { font-size: 20px; line-height: 1.2; }

+            .hero-meta { border-radius: var(--r-sm); }

+            .meta-chip:nth-child(odd) { border-right: none; }

.meta-chip:last-child { border-bottom: none; }

-            .main { padding: 14px 14px 56px; }

-            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }

-            .stat-card { padding: 14px 14px 12px; border-radius: var(--r-md); }

-            .stat-num { font-size: 26px; }

-            .stat-num .unit { font-size: 16px; }

-            .stat-icon-wrap { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 10px; }

-            .stat-lbl { font-size: 10px; }

+            .main { padding: 12px 12px 64px; }

+            .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }

+            .stat-card { padding: 14px 12px 12px; border-radius: var(--r-md); }

+            .stat-accent { height: 3px; }

+            .stat-icon-wrap { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }

+            .stat-num { font-size: 30px; }

+            .stat-num .unit { font-size: 18px; }

+            .stat-lbl { font-size: 10px; margin-top: 4px; }

-            .section-title { font-size: 12px; }

-            .count-badge { font-size: 10px; }

-            .filter-btn { padding: 10px 10px; font-size: 10px; }

-            .dept-btn, .batch-btn { font-size: 10px; padding: 6px 10px; }

-            .sort-btn { font-size: 11px; padding: 9px 12px; }

-            .search-input { font-size: 13px; padding: 10px 14px 10px 34px; }

-            .learner-row { border-radius: var(--r-md); margin-bottom: 8px; }

+            .section-head { margin-bottom: 10px; }

+            .section-title { font-size: 13px; }

+            .count-badge { font-size: 11px; }

+            .filter-btn { padding: 0 11px; font-size: 11px; min-height: 44px; }

+            .dept-btn { font-size: 11px; padding: 0 12px; min-height: 38px; }

+            .sort-btn { font-size: 11px; padding: 0 14px; min-height: 44px; }

+            .search-input { padding: 12px 14px 12px 36px; }

+            .learner-row { margin-bottom: 8px; border-radius: var(--r-md); }

.learner-info { padding: 12px 14px 10px; }

-            .avatar { width: 36px; height: 36px; font-size: 12px; }

+            .avatar { width: 38px; height: 38px; font-size: 13px; }

-            .progress-cell { padding: 10px 14px 10px !important; }

-            .sessions-done { font-size: 18px; }

-            .card-footer { padding: 9px 14px; }

-            .card-footer-pct { font-size: 20px; }

-            .status-badge { font-size: 9px; padding: 3px 8px; }

-            .batch-pill { font-size: 8px; padding: 1px 6px; }

+            .progress-cell { padding: 10px 14px !important; }

+            .sessions-done { font-size: 20px; }

+            .card-footer { padding: 10px 14px; }

+            .card-footer-pct { font-size: 22px; }

+            .status-badge { font-size: 10px; padding: 4px 10px; }

.footer { font-size: 10px; padding: 12px 14px; }

+        /* ── SMALL PHONE (iPhone SE etc.) ── */

+            .hero-title { font-size: 18px; }

+            .stat-num { font-size: 26px; }

+            .stat-lbl { font-size: 9px; letter-spacing: .04em; }

+            .filter-btn { padding: 0 9px; font-size: 10px; }

+            .dept-btn { font-size: 10px; padding: 0 10px; }

+            .learner-name { font-size: 12px; }

+            .card-footer-pct { font-size: 20px; }


Here's what improved:

- **Touch targets** — all buttons are now at least 44px tall (Apple/Google's recommended minimum)
- **Search input** — font-size set to `16px` on mobile, which prevents iOS from zooming in when you tap it
- **Hero** — more compact, meta chips stack neatly in pairs then full-width on smallest screens
- **Filter rows** — hidden scrollbars (cleaner look), smooth momentum scroll
- **Progress bar** — thicker (8px) on mobile for easier reading
- **Cards** — subtle scale press effect on tap for tactile feedback
- **Stats grid** — better padding/sizing at each breakpoint
- **New 600px breakpoint** — covers modern phones (iPhone 14 etc.) specifically
- **New 375px breakpoint** — covers small phones like iPhone SE
- **`touch-action: manipulation`** — removes the 300ms tap delay on buttons globally


Failed with non-blocking status code: /bin/sh: Bin: command not found

PLAYER_NAME=Khalid Bin Kalban python3 ~/.claude/push_stats.py


Failed with non-blocking status code: /bin/sh: Bin: command not found


remove emojies and make all SVG icons


490:
🏆

502:
📊 Learning Analytics

520:
👥

528:
📈

536:
⚡

544:
⏸


+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">


                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                    Learning Analytics


                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                    Learning Analytics

+                <div class="hero-pill">

+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">

AI Champions: Vibe Coder to Agentic Engineer


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>

+                <div class="stat-icon-wrap" style="background: var(--blue-bg); color: var(--blue);">

+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
                    </svg>


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
                    </svg>

+                <div class="stat-icon-wrap" style="background: var(--amber-bg); color: var(--amber);">


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
                    </svg>


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
                    </svg>

+                <div class="stat-icon-wrap" style="background: #fef0f9; color: #c41e8a;">


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>


                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>

+                <div class="stat-icon-wrap" style="background: var(--teal-bg); color: var(--teal);">


Done. All emojis replaced with SVG icons:

| Was | Now |
|---|---|
| 🏆 (topbar) | Trophy / award cup SVG |
| 📊 (hero pill) | Bar chart SVG |
| 👥 (total enrolled) | Users/people SVG |
| 📈 (avg progress) | Trending up SVG |
| ⚡ (in progress) | Lightning bolt SVG |
| ⏸ (not started) | Info circle SVG |


Biz Dev make it BD&E, and the main name of the division make it Business Developmenet and Excellence


608:            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>
663:                { name: 'Jayakumar Vandavasi Karunamurthy',      pct: 25,  mins: 125.0,  grp: 'Business Dev & Excellence', started: 'Apr 9' },
664:                { name: 'Mahmoud Tarek Rezk',                    pct: 0,   mins: 0,      grp: 'Business Dev & Excellence', started: null    },
755:                if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';


<button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>

<button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">BD&E</button>


<button class="dept-btn" onclick="setDept('BS&HR', this)">BS&HR</button>

<button class="dept-btn" onclick="setDept('Transmission Power', this)">Transmission Power</button>

<button class="dept-btn" onclick="setDept('Generation', this)">Generation</button>

-            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">Biz Dev</button>

+            <button class="dept-btn" onclick="setDept('Business Dev & Excellence', this)">BD&E</button>

<button class="dept-btn" onclick="setDept('Internal Audit', this)">Internal Audit</button>


if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';

if (g === 'Business Dev & Excellence') return 'Business Development and Excellence';


if (g === 'Transmission Power') return 'Transmission Power';

if (g === 'Generation') return 'Generation';

-                if (g === 'Business Dev & Excellence') return 'Biz Dev & Excellence';

+                if (g === 'Business Dev & Excellence') return 'Business Development and Excellence';

if (g === 'Internal Audit') return 'Internal Audit';


Done. Filter button now shows **BD&E**, and the full department name displayed under each learner's name is **Business Development and Excellence**.