/* Left nav card */
                .left-nav-card{ width:260px; padding:12px; border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(2,6,23,0.06); }
                .nav-pill{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 14px; border-radius:10px; font-weight:600; cursor:pointer; color:#0f172a; background:transparent; border:0; outline:0; }
                .nav-pill i{ color:#0f172a; width:18px; text-align:center; }
                .nav-pill + .nav-pill{ margin-top:8px; }
                .nav-pill.active{ background:#EFF6FF; color:#0b61ff; box-shadow:none; }
                .nav-pill:focus{ outline:none; box-shadow:none; }

                /* Right cards */
                .big-card{ display:flex; flex-direction:column; align-items:stretch; background:#fff; border-radius:18px; padding:18px; margin-bottom:18px; box-shadow:0 10px 30px rgba(2,6,23,0.07); border:1px solid rgba(11,97,255,0.04); }
                .big-card .card-title{ font-size:16px; font-weight:700; color: #0b61ff; display:flex; align-items:center; gap:10px; }
                .big-card .card-title .title-icon{ font-size:18px; color:#0b61ff; background:rgba(11,97,255,0.06); padding:6px; border-radius:8px; }
                .big-card .card-sub{ font-size:13px; color:#6b7280; margin-top:6px; }
                .big-card .card-content{ display:flex; flex-direction:column; }
                .card-chevron{ font-size:28px; color:#cbd5e1; }
                .card-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
                /* Ensure learning and users tabs use dark text for titles and labels */
                #tab-learning .big-card .card-title, #tab-learning .big-card .card-sub, #tab-learning .control-label, #tab-learning .card-controls select { color: #0f172a; }
                #tab-users .big-card .card-title, #tab-users .big-card .card-sub, #tab-users .control-label, #tab-users .card-controls select { color: #0f172a; }
                /* new card content layout */
                .card-desc{ font-size:13px; color:#6b7280; margin-top:6px; }
                .card-label{ font-size:14px; color:#0f172a; margin-top:10px; font-weight:600; }
                .card-controls{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }

                /* selects in settings */
                #tab-general select, #tab-learning select, #tab-users select { padding:8px 10px; border-radius:10px; border:1px solid #e6eefc; background:#f8fbff; font-size:14px; }

                /* styled toggle switch */
                .switch{ position:relative; display:inline-block; width:46px; height:28px; }
                .switch input{ display:none; }
                .switch span{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#f1f5ff; border-radius:999px; transition:.18s; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.02); }
                .switch span:after{ content:''; position:absolute; width:20px; height:20px; left:4px; top:4px; background:#fff; border-radius:50%; transition:.18s; box-shadow:0 6px 18px rgba(2,6,23,0.08); }
                .switch input:checked + span{ background:#0b61ff; }
                .switch input:checked + span:after{ transform:translateX(18px); }
                /* control rows */
                .control-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:760px; }
                .control-label{ flex:1; color:#0f172a; font-size:14px; }
                .card-controls select, .card-controls .switch{ flex:0 0 auto; }
                /* clickable cards */
                .big-card.clickable{ cursor:pointer; transition: transform .18s, box-shadow .18s; }
                .big-card.clickable:hover{ transform: translateY(-6px); box-shadow:0 20px 50px rgba(2,6,23,0.10); }