﻿
                /* Mobile settings menu styles: visible only on small screens and when JS shows it */
                @media (max-width: 768px) {
                    #settings .settings-layout { display: none !important; }
                    #settings .left-nav-card { display: none !important; }
                    #settings-mobile-shell { display: block; padding: 16px 12px 86px; }
                    .settings-mobile-shell .mobile-settings-inner { background: transparent; }
                    .mobile-menu-title { color: #fff; font-size: 20px; font-weight:800; margin: 6px 0 12px; }
                    .mobile-widget-myclass { margin-bottom: 12px; }
                    .myclass-card { background: rgba(255,255,255,0.12); border-radius: 14px; padding: 12px; display:flex; align-items:center; justify-content:space-between; border:1px solid rgba(255,255,255,0.08); }
                    .myclass-title { font-weight:800; color:white; }
                    .myclass-sub { font-size:12px; color: rgba(255,255,255,0.9); margin-top:4px; }
                    .myclass-action { color: rgba(255,255,255,0.9); font-size:22px; }
                    .mobile-menu-cards { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
                    .mobile-card { background: rgba(255,255,255,0.06); border-radius: 14px; padding: 8px; }
                    .mobile-card-item { display:flex; align-items:center; gap:12px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.04); color: white; cursor:pointer; }
                    .mobile-card-item i { width:28px; text-align:center; font-size:16px; color: white; }
                    .mobile-card-item .chev { margin-left:auto; color: rgba(255,255,255,0.9); }
                    .mobile-logout-wrap { display:flex; justify-content:center; margin-top:8px; }
                    .mobile-logout-btn { background: transparent; border: 1px solid rgba(255,255,255,0.22); color: white; padding: 12px 36px; border-radius: 24px; font-weight:800; }
                    /* ensure the global header is hidden to match screenshot on mobile menu */
                    header.header { display: none !important; }
                }
                @media (min-width: 769px) {
                    #settings-mobile-shell { display: none !important; }
                }
            
