:root { --bg: #f8fafc; --card-bg: rgba(255, 255, 255, 0.95); --text-main: #0f172a; --text-muted: #64748b; --primary: #4f46e5; --primary-hover: #4338ca; --primary-glow: rgba(79, 70, 229, 0.15); --primary-light: #e0e7ff; --success: #10b981; --success-light: #d1fae5; --danger: #ef4444; --danger-light: #fee2e2; --warning: #f59e0b; --warning-light: #fef3c7; --info: #3b82f6; --info-light: #dbeafe; --purple: #8b5cf6; --purple-light: #ede9fe; --border: #e2e8f0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03); --shadow-lg: 0 10px 20px -5px rgba(15, 23, 42, 0.08), 0 6px 6px -6px rgba(15, 23, 42, 0.04); --glass-bg: rgba(255, 255, 255, 0.7); }
            #msc-app-wrapper, #msc-app-wrapper * { box-sizing: border-box; }
            .msc-body { font-family: "Inter", sans-serif; background: var(--bg); color: var(--text-main); height: 100vh; width: 100vw; display: flex; flex-direction: column; font-size: 13px; overflow: hidden; -webkit-font-smoothing: antialiased; } 
            h1, h2, h3, h4, .msc-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
            ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: rgba(241, 245, 249, 0.4); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.6); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; transition: background 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.9); border: 2px solid transparent; background-clip: content-box; } * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.6) transparent; }
            .bento-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: start; z-index: 10; position: relative;} 
            .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
            @keyframes slideUpFade { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } 
            .animate-card { animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; } .delay-1 { animation-delay: 0.05s; } .delay-2 { animation-delay: 0.1s; } .delay-3 { animation-delay: 0.15s; } .delay-4 { animation-delay: 0.2s; } .delay-5 { animation-delay: 0.25s; } .delay-6 { animation-delay: 0.3s; }
            #temp-alert-holder { display: none !important; }
            .msc-card { background: var(--card-bg); padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); } 
            .input-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; width: 100%;} .flex-col-gap { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; width: 100%;} .input-group label { font-size: 12px; font-weight: 600; color: var(--text-main); } 
            .auth-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: "Inter", sans-serif; background: #fff; color: var(--text-main); transition: all 0.2s ease; height: 38px; box-shadow: inset 0 1px 2px rgba(15,23,42,0.02);} .auth-input:focus { border-color: var(--primary); outline: none; box-shadow: var(--primary-glow); } textarea.auth-input { height: auto; min-height: 60px; padding-top: 10px; } select.auth-input option[value="__NEW__"] { font-weight: 700; color: var(--primary); }
            .input-with-icon { position: relative; display: flex; align-items: center; width: 100%; } .input-with-icon > i:first-child { position: absolute; left: 12px; color: #94a3b8; font-size: 14px; pointer-events: none;} .input-with-icon input { padding-left: 36px; width: 100%; } .input-with-icon input:focus + i, .input-with-icon input:focus ~ i { color: var(--primary); } .input-with-icon input.has-eye-btn { padding-right: 40px; }
            .eye-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px 8px; outline: none; z-index: 10; font-size: 14px; pointer-events: auto;} .eye-btn:hover { color: var(--primary); } .eye-btn i { position: static; pointer-events: none; color: inherit; left: auto; }
            .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; background: var(--bg); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); max-height: 180px; overflow-y:auto; } .checkbox-grid label { display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; border:2px solid var(--border); border-radius:var(--radius-md); background:#fff; cursor:pointer; font-weight:700; font-size:12px; transition:0.2s; box-shadow: var(--shadow-sm);} .checkbox-grid label:hover { border-color: var(--primary-light); } .checkbox-grid label:has(input:checked) { border-color:var(--primary); background:var(--primary-light); color:var(--primary);} .checkbox-grid input { display:none; }
            .auth-btn { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: all 0.2s ease; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size:13px; font-family:"Inter", sans-serif; box-shadow: var(--shadow-sm);} .auth-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px var(--primary-glow); } .auth-btn:active { transform: translateY(0); box-shadow: none; } .auth-btn:disabled { background: #cbd5e1; cursor: not-allowed; box-shadow: none; opacity: 0.7; transform: none; }
            .act-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--radius-sm) !important; border: none !important; cursor: pointer !important; font-size: 13px !important; color: #fff !important; transition: all 0.2s ease !important; box-shadow: var(--shadow-sm) !important; flex-shrink: 0 !important;} .act-edit { background: var(--info) !important; } .act-del { background: var(--danger) !important; } .act-add { background: var(--success) !important; } .act-print { background: var(--purple) !important; } .act-btn:hover { transform: translateY(-2px) !important; filter: brightness(1.1) !important; box-shadow: var(--shadow-md) !important; } .act-btn:active { transform: translateY(0) !important; }
            .msc-dropdown { position: relative; display: inline-block; } .msc-dropdown-content { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--card-bg); min-width: 170px; box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); border: 1px solid var(--border); z-index: 99999; overflow: hidden; animation: slideUpFade 0.2s; backdrop-filter: blur(10px); } .msc-dropdown:hover .msc-dropdown-content, .msc-dropdown:focus-within .msc-dropdown-content { display: block; } .msc-dropdown-item { padding: 10px 16px; color: var(--text-main); text-decoration: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; transition: 0.2s; cursor:pointer; } .msc-dropdown-item:hover { background: var(--bg); color: var(--primary); }
            .pos-grid { display: grid; grid-template-columns: 350px 1fr; gap: 20px; align-items: start; } .pos-user-card { border:2px dashed var(--border); padding:20px; text-align:center; border-radius:var(--radius-md); background:var(--bg); transition: 0.3s; } .pos-user-card.green { border-color: var(--success); background: var(--success-light); } .pos-user-card.red { border-color: var(--danger); background: var(--danger-light); }
            .msc-layout { display: flex; height: 100vh; width: 100vw; overflow: hidden;} .msc-mobile-topbar { display: none; }
            .msc-tabs-container { display: flex; gap: 8px; border-bottom: 2px solid var(--border); margin-bottom: 24px; padding: 0 10px; } .msc-tab-btn { background: transparent; border: none; padding: 14px 24px; font-size: 14px; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; position: relative; top: 2px; font-family: "Plus Jakarta Sans", sans-serif; } .msc-tab-btn:hover { color: var(--primary); background: var(--bg); border-radius: 8px 8px 0 0; } .msc-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--card-bg); border-radius: 8px 8px 0 0; } .msc-tab-pane { display: none; animation: slideUpFade 0.3s forwards; } .msc-tab-pane.active { display: block; }
            .msc-sidebar { width: 260px; background: rgba(255,255,255,0.65); padding: 24px 16px; border-right: 1px solid rgba(255,255,255,0.4); display: flex; flex-direction: column; z-index: 10; overflow-y: auto; backdrop-filter: blur(24px); transition: width 0.3s ease, padding 0.3s ease; box-shadow: 2px 0 15px rgba(15,23,42,0.02); } .msc-sidebar.collapsed { width: 80px; padding: 24px 12px; } .msc-sidebar.collapsed .menu-label, .msc-sidebar.collapsed .msc-menu span, .msc-sidebar.collapsed .msc-menu .msc-badge { display: none; } .msc-sidebar.collapsed .mobile-brand span { display: none; } .msc-sidebar.collapsed .msc-menu { justify-content: center; padding: 12px; } .msc-sidebar.collapsed .msc-menu i { margin: 0; font-size: 18px; }
            .msc-menu { padding: 12px 16px; margin-bottom: 6px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 14px; font-weight: 500; color: var(--text-muted); transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); font-size: 13px; position: relative; overflow: hidden; } .msc-menu::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--primary); transform: scaleY(0); transition: transform 0.2s ease; border-radius: 0 4px 4px 0; } .msc-menu:hover { background: rgba(255,255,255,0.9); color: var(--text-main); transform: translateX(4px); } .msc-menu.active { background: #fff; color: var(--primary); font-weight: 600; box-shadow: 0 4px 12px rgba(15,23,42,0.03); border: 1px solid rgba(255,255,255,0.8); } .msc-menu.active::before { transform: scaleY(1); } .menu-label { margin-top: 24px; margin-bottom: 10px; font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.8px; padding-left: 16px; }
            .msc-main { flex: 1; padding: 24px 32px; overflow-y: auto; position: relative;} .msc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; background: var(--glass-bg); backdrop-filter: blur(24px); padding: 16px 24px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; z-index: 500; overflow: visible !important;} 
            .stat-card { background: var(--card-bg); padding: 16px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; transition: 0.3s ease; position: relative; overflow: hidden;} .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #cbd5e1; } .stat-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; } .stat-icon.blue { background: var(--info-light); color: var(--info); } .stat-icon.orange { background: var(--warning-light); color: var(--warning); } .stat-icon.green { background: var(--success-light); color: var(--success); } .stat-icon.purple { background: var(--purple-light); color: var(--purple); } .stat-icon.red { background: var(--danger-light); color: var(--danger); } .stat-info { display: flex; flex-direction: column; } .stat-info h4 { margin:0; color: var(--text-muted); font-size: 12px; font-weight: 600;} .stat-info h2 { margin:2px 0 0; font-size: 26px; font-weight: 800; color: var(--text-main);}
            .msc-panel { display:none; opacity:0; } .msc-panel.active { display:block; animation: slideUpFade 0.4s forwards; }
            .table-container { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-bg); max-height: 600px; overflow-y: auto; box-shadow: var(--shadow-sm); margin-bottom: 16px; position: relative; } 
            .msc-table { width: 100%; border-collapse: separate; border-spacing: 0; white-space: nowrap; } .msc-table th { text-align: left; padding: 12px 16px; color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(248, 250, 252, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; } .msc-table td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; font-weight: 500; font-size: 13px; color: var(--text-main); transition: background 0.2s;} .msc-table tr:last-child td { border-bottom: none; } .msc-table tr:hover td { background: #f8fafc; } .truncate-td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
            .msc-compact-table th, .msc-compact-table td { padding: 10px 16px; font-size: 12px; }
            .msc-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 10px 0; } .msc-pag-btn { background: #fff; border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: 0.2s; box-shadow: var(--shadow-sm); } .msc-pag-btn:hover:not(:disabled) { background: var(--bg); color: var(--text-main); border-color: #cbd5e1; } .msc-pag-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: var(--primary-glow); pointer-events: none; } .msc-pag-btn:disabled { opacity: 0.5; cursor: not-allowed; } .msc-pag-info { font-size: 12px; color: var(--text-muted); margin-right: 12px; font-weight: 500; }
            .msc-badge { padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase;} .badge-active { background: var(--primary-light); color: var(--primary); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-success { background: var(--success-light); color: var(--success); } .badge-warn { background: var(--warning-light); color: var(--warning); }
            .wizard-steps { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 24px; padding: 0 30px;} .wizard-steps::before { content: ''; position: absolute; top: 50%; left: 30px; right: 30px; height: 2px; background: var(--border); z-index: 1; transform: translateY(-50%); border-radius: 2px;} .wiz-step { position: relative; z-index: 2; width: 32px; height: 32px; background: var(--card-bg); border: 2px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--text-muted); transition: all 0.3s ease; } .wiz-step.active { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .wiz-step.completed { background: var(--primary); border-color: var(--primary); color: #fff; } .wiz-content { display: none; animation: slideUpFade 0.3s forwards; } .wiz-content.active { display: block; } .wiz-nav { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
            .msc-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15,23,42,0.4); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(8px);} .msc-modal-card { background: var(--card-bg); padding: 32px; border-radius: var(--radius-xl); width: 90%; max-width: 600px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; max-height: 90vh; overflow-y: auto; transform: scale(0.95); opacity: 0; animation: modalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; border: 1px solid rgba(255,255,255,0.5); } @keyframes modalPop { to { transform: scale(1); opacity: 1; } } .modal-close { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 16px; color: var(--text-muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg); transition: all 0.2s ease; z-index: 100; pointer-events: auto;} .modal-close:hover{ color: var(--danger); background: var(--danger-light); transform: rotate(90deg);} .modal-grid-strict { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; } .modal-grid-strict .full-span { grid-column: 1 / -1; } .msc-modal-card.mini { max-width: 420px; text-align: center; }
            .search-box { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; width: 100%; height: 38px; background: #fff; transition: 0.2s ease; box-shadow: var(--shadow-sm);} .mode-toggle { display: inline-flex; background: var(--bg); padding: 4px; border-radius: var(--radius-sm); margin-bottom: 16px; width: 100%; border: 1px solid var(--border);} .mode-toggle label { flex: 1; text-align: center; padding: 8px 12px; cursor: pointer; border-radius: 4px; font-weight: 600; font-size: 12px; color: var(--text-muted); margin: 0; transition: 0.2s;}
            #msc-toast-container { position: fixed; top: 24px; right: 24px; z-index: 999999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; } .msc-toast { pointer-events: auto; min-width: 280px; max-width: 400px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-radius: var(--radius-md); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); padding: 16px; display: flex; align-items: flex-start; gap: 14px; transform: translateX(120%); opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255,255,255,0.8); position: relative; overflow: hidden;} .msc-toast::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; } .msc-toast.success::before { background: var(--success); } .msc-toast.error::before { background: var(--danger); } .msc-toast.show { transform: translateX(0); opacity: 1; }
            .msc-bottom-nav { display: none; }
            @media (max-width: 768px) { .pos-grid { grid-template-columns: 1fr; } .desktop-toggle-btn { display: none !important; } .desktop-only { display: none !important; } .msc-layout { flex-direction: column; height: auto; min-height: 100vh; overflow-y: auto; padding-bottom: 70px; } #msc-mobile-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } .msc-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; margin-top: 10px; } .msc-sidebar { position: fixed; bottom: 0; left: -100%; height: calc(100vh - 65px); width: 280px; background: var(--card-bg); box-shadow: 4px 0 25px rgba(0,0,0,0.15); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1005; padding-top: 20px; } .msc-sidebar.mobile-open { transform: translateX(100%); left: 0; } .msc-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.6); z-index: 1004; backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; display: none; } .msc-bottom-nav { display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(15px); border-top: 1px solid var(--border); box-shadow: 0 -4px 15px rgba(0,0,0,0.05); z-index: 1006; padding-bottom:env(safe-area-inset-bottom); } .msc-bottom-nav-item { flex: 1; text-align: center; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: 0.3s; } .msc-bottom-nav-item i { font-size: 18px; } .msc-bottom-nav-item.active { color: var(--primary); } .msc-bottom-nav-item.active i { transform: translateY(-2px); } .msc-main { padding: 16px; width: 100vw; overflow-x: hidden; } .col-1, .col-2, .col-3, .col-4, .col-5 { grid-column: span 5 !important; } .msc-modal-card { padding: 24px 20px; width: 100%; max-width: none; border-radius: 24px 24px 0 0; position: absolute; bottom: 0; max-height: 85vh; animation: slideUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal-grid-strict, .modal-grid { grid-template-columns: 1fr; gap: 12px; }  .modal-grid-strict .full-span { grid-column: 1 / -1; } }
            .auth-wrapper { min-height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y:auto; position: relative;} .auth-box { background: var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; padding: 40px; position:relative; overflow:hidden; border: 1px solid var(--border); z-index: 2;} .auth-logo { text-align: center; margin-bottom: 24px; font-size: 26px; font-weight: 800; color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; } .auth-toggle { display: flex; background: var(--bg); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 24px; border: 1px solid var(--border); } .auth-toggle-btn { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 4px; font-weight: 600; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: 0.2s ease; font-family:"Inter", sans-serif; } .auth-toggle-btn.active { background: #fff; color: var(--text-main); box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .auth-panel { display: none; animation: slideUpFade 0.4s forwards; } .auth-panel.active { display: block; } .empty-state-row td { text-align:center; padding:40px 20px; color:var(--text-muted); border-bottom:none !important; }
            #msc-top-loader { position: fixed; top: 0; left: 0; height: 3px; background: var(--primary); z-index: 999999; width: 0%; transition: width 0.3s ease; box-shadow: 0 0 10px var(--primary); }
            @keyframes skeletonPulse { 0% { background-color: rgba(203, 213, 225, 0.4); } 50% { background-color: rgba(203, 213, 225, 0.8); } 100% { background-color: rgba(203, 213, 225, 0.4); } }
            .skeleton-loading { position: relative; overflow: hidden; }
            .skeleton-loading::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7); z-index: 20; backdrop-filter: blur(2px); }
            .skeleton-loading::before { content: 'Processing...'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 21; font-weight: 700; color: var(--primary); font-size: 14px; background: var(--primary-light); padding: 8px 16px; border-radius: 20px; box-shadow: var(--shadow-sm); animation: skeletonPulse 1.5s infinite ease-in-out; }
            #camera-modal-content video { border-radius: 12px; border: 2px solid var(--primary); box-shadow: var(--shadow-md); width: 100% !important; height: auto !important; }

/* ================================================================
   2.2 UX / Interaction Layer
   ================================================================ */
.msc-dropdown.open .msc-dropdown-content { display:block; }
.msc-dropdown > [role="button"] { outline:none; }
.msc-dropdown > [role="button"]:focus-visible { box-shadow:0 0 0 3px var(--primary-glow), var(--shadow-sm) !important; }

.msc-notif-item { display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .18s ease, opacity .18s ease; }
.msc-notif-item:hover { background:var(--bg); }
.msc-notif-item.is-read { opacity:.72; }
.msc-notif-item.is-unread { background:rgba(239,246,255,.38); }
.msc-notif-icon { width:32px; height:32px; flex:0 0 32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.msc-notif-icon.danger { color:var(--danger); background:var(--danger-light); }
.msc-notif-icon.warning { color:var(--warning); background:var(--warning-light); }
.msc-notif-icon.success { color:var(--success); background:var(--success-light); }
.msc-notif-icon.info { color:var(--primary); background:var(--primary-light); }
.msc-notif-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.msc-notif-body strong { font-size:12px; color:var(--text-main); line-height:1.35; }
.msc-notif-body span { font-size:11px; color:var(--text-muted); line-height:1.45; }
.msc-notif-body small { font-size:10px; color:#94a3b8; font-weight:600; }
.msc-notif-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.msc-notif-actions button,.msc-notif-actions a { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; background:transparent; color:var(--text-muted); border-radius:7px; cursor:pointer; text-decoration:none; }
.msc-notif-actions button:hover,.msc-notif-actions a:hover { background:#fff; border-color:var(--border); color:var(--primary); }
.msc-notif-empty { min-height:150px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:var(--text-muted); text-align:center; padding:22px; }
.msc-notif-empty i { font-size:24px; color:#cbd5e1; margin-bottom:5px; }
.msc-notif-empty strong { color:var(--text-main); font-size:13px; }
.msc-notif-empty span { font-size:11px; }
.msc-notif-link { border:0; background:transparent; color:var(--primary); font-size:10px; font-weight:700; cursor:pointer; padding:4px 0; }
.msc-notif-link.danger { color:var(--danger); }

.msc-module-count-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:92px; padding:7px 9px; border:1px solid #fde68a; background:#fffbeb; color:#92400e; border-radius:10px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.msc-module-count-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); border-color:#fbbf24; }
.msc-module-count-btn strong { font-size:13px; color:#92400e; }
.msc-module-count-btn span { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.35px; }

.msc-modal-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.msc-modal-eyebrow { font-size:9px; color:var(--primary); font-weight:800; letter-spacing:1.1px; margin-bottom:4px; }
.msc-modal-title { margin:0; font-size:18px; line-height:1.25; color:var(--text-main); }
.msc-modal-subtitle { margin-top:4px; font-size:11px; color:var(--text-muted); }
.msc-modal-avatar { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:14px; color:var(--primary); background:var(--primary-light); font-size:18px; }
.msc-modal-count { margin-left:auto; white-space:nowrap; padding:7px 10px; border-radius:999px; background:var(--success-light); color:var(--success); font-size:10px; font-weight:800; }
.msc-module-view-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; padding:10px 12px; border:1px solid var(--border); background:var(--bg); border-radius:12px; }
.msc-module-view-toolbar > div:first-child { min-width:0; display:flex; flex-direction:column; gap:2px; }
.msc-module-view-toolbar strong { font-size:11px; color:var(--text-main); }
.msc-module-view-toolbar span { font-size:9px; color:var(--text-muted); }
.msc-segmented { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:9px; background:#fff; flex-shrink:0; }
.msc-segmented-btn { border:0; background:transparent; color:var(--text-muted); font-size:10px; font-weight:800; padding:6px 10px; border-radius:7px; cursor:pointer; }
.msc-segmented-btn.active { background:var(--text-main); color:#fff; }
.msc-data-state { min-height:180px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--text-muted); text-align:center; padding:26px; font-size:12px; }
.msc-data-state i { font-size:20px; color:var(--primary); }
.msc-module-assignment-list { display:grid; gap:9px; max-height:58vh; overflow:auto; padding-right:2px; }
.msc-module-assignment-card { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff; transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease; }
.msc-module-assignment-card:hover { border-color:#cbd5e1; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.msc-module-card-icon { width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:#fff7ed; color:#ea580c; }
.msc-module-card-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.msc-module-card-body strong { font-size:12px; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msc-module-card-body span { font-size:10px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msc-module-card-body small { font-size:9px; color:#94a3b8; font-weight:600; }
.msc-module-status { flex-shrink:0; padding:4px 7px; border-radius:999px; font-size:9px; font-weight:800; text-transform:uppercase; }
.msc-module-status.active { color:var(--success); background:var(--success-light); }
.msc-module-status.history { color:var(--text-muted); background:var(--bg); border:1px solid var(--border); }

.msc-toast-icon { width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--text-main); }
.msc-toast.success .msc-toast-icon { background:var(--success-light); color:var(--success); }
.msc-toast.error .msc-toast-icon { background:var(--danger-light); color:var(--danger); }
.msc-toast-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.msc-toast-body strong { color:var(--text-main); font-size:12px; }
.msc-toast-body span { color:var(--text-muted); font-size:11px; line-height:1.45; }
.msc-toast-close { width:26px; height:26px; flex:0 0 26px; border:0; background:transparent; color:var(--text-muted); border-radius:7px; cursor:pointer; }
.msc-toast-close:hover { background:var(--bg); color:var(--text-main); }

@media (max-width:768px) {
    #msc-toast-container { top:auto; left:12px; right:12px; bottom:76px; }
    .msc-toast { min-width:0; max-width:none; width:100%; }
    .msc-module-view-toolbar { align-items:stretch; flex-direction:column; }
    .msc-segmented { align-self:flex-start; }
    .msc-modal-heading { align-items:flex-start; }
    .msc-modal-count { margin-left:0; }
    .msc-module-assignment-list { max-height:52vh; }
}


/* ================================================================
   2.3 Operations UX: student-centric tracking + branch logistics
   ================================================================ */
.msc-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.msc-section-head.compact{padding:0 0 16px;background:transparent;border-bottom:1px solid var(--border)}
.msc-section-head h3{font-size:17px;margin:2px 0 4px}.msc-section-head p{margin:0;color:var(--text-muted);font-size:11px;line-height:1.5;max-width:620px;font-weight:500}
.msc-eyebrow{font-size:9px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:var(--primary)}
.msc-live-kpis{display:flex;align-items:center;gap:8px;flex-shrink:0}.msc-live-kpis span{padding:8px 11px;border:1px solid var(--border);background:var(--bg);border-radius:999px;font-size:10px;font-weight:800;color:var(--text-main)}
.msc-filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--border);background:#fff}
.msc-filter-bar .mode-toggle{flex-shrink:0}.msc-filter-bar .auth-input{background:#fff}
.msc-person-cell{display:flex;gap:10px;align-items:center;min-width:210px}.msc-person-cell>div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}.msc-person-cell strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msc-person-cell span{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msc-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}
.msc-location-cell{display:flex;flex-direction:column;gap:3px;min-width:170px}.msc-location-cell strong{font-size:11px}.msc-location-cell span{font-size:10px;color:var(--text-muted);line-height:1.45}.msc-location-cell i{margin-right:4px}.msc-metric-pill{display:inline-flex;align-items:baseline;gap:5px;padding:6px 9px;background:var(--bg);border:1px solid var(--border);border-radius:9px}.msc-metric-pill strong{font-size:15px}.msc-metric-pill span{font-size:9px;color:var(--text-muted);font-weight:800;text-transform:uppercase}.msc-muted-value{color:var(--text-muted);font-size:12px;font-weight:800}
.msc-status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.25px;white-space:nowrap}.msc-status-pill.success{color:#047857;background:var(--success-light)}.msc-status-pill.warning{color:#a16207;background:var(--warning-light)}.msc-status-pill.danger{color:#b91c1c;background:var(--danger-light)}.msc-status-pill.info{color:#1d4ed8;background:var(--info-light)}
.msc-date-cell{font-size:10px;color:var(--text-muted);line-height:1.4}.msc-row-actions{display:flex;justify-content:flex-end;gap:5px;align-items:center;flex-wrap:wrap}.msc-action-secondary{height:30px!important;padding:0 10px!important;background:#fff!important;color:var(--text-main)!important;border:1px solid var(--border)!important;box-shadow:none!important;font-size:10px!important}.msc-action-secondary:hover{color:var(--primary)!important;border-color:var(--primary)!important;background:var(--primary-light)!important}.msc-action-warning{height:30px!important;padding:0 10px!important;background:var(--warning)!important;font-size:10px!important}
.msc-route-preview{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px dashed #c7d2fe;background:#eef2ff;color:var(--primary);font-size:10px;font-weight:800;text-align:center}.msc-route-preview.invalid{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.msc-field-hint{font-size:9px;color:var(--text-muted);line-height:1.4}.msc-cargo-cart{min-height:120px;max-height:280px;overflow:auto;background:var(--bg);border:2px dashed var(--border);padding:12px;border-radius:12px}.msc-route-cell{display:flex;align-items:center;gap:6px;max-width:300px}.msc-route-cell span{font-size:10px;font-weight:700;line-height:1.4}.msc-route-cell i{font-size:10px;color:var(--primary);flex-shrink:0}.msc-location-state{display:flex;align-items:flex-start;gap:6px;font-size:10px;font-weight:800;line-height:1.4;max-width:240px}.msc-location-state.transit{color:#b45309}.msc-location-state.arrived{color:#047857}.msc-location-state.canceled{color:#64748b}.msc-transfer-meta{font-size:9px;color:var(--text-muted);margin-top:5px}.msc-responsive-table{overflow:auto}.msc-responsive-table .msc-table{min-width:980px}
@media (max-width:1100px){.msc-filter-bar .input-with-icon{width:220px!important}.msc-section-head{align-items:stretch;flex-direction:column}.msc-live-kpis{justify-content:flex-start}}
@media (max-width:768px){.msc-filter-bar{padding:12px;gap:8px}.msc-filter-bar>*{width:100%!important}.msc-filter-bar .mode-toggle{width:100%!important;display:flex}.msc-filter-bar .mode-toggle label{flex:1;text-align:center}.msc-section-head{padding:16px}.msc-section-head h3{font-size:15px}.msc-tracking-shell{border-radius:12px}.msc-person-cell{min-width:180px}.msc-route-cell{max-width:250px}.msc-row-actions{justify-content:flex-start}}

/* v2.4 professional operations / Student 360 */
.msc-notif-filters{display:flex;gap:4px;padding:7px 10px;border-bottom:1px solid var(--border);overflow:auto;white-space:nowrap}
.msc-notif-filters button{border:0;background:transparent;color:var(--text-muted);font:600 10px/1.2 inherit;padding:6px 9px;border-radius:7px;cursor:pointer}
.msc-notif-filters button.active{background:var(--primary-light);color:var(--primary)}
.msc-route-node{display:inline-flex;align-items:flex-start;gap:5px;max-width:190px;line-height:1.35}
.msc-route-node i{font-size:10px;margin-top:3px;color:var(--primary)}
.msc-360-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.msc-360-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0}.msc-360-stat strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msc-360-stat span{display:block;color:var(--text-muted);font-size:10px;margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.msc-360-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.msc-360-card{border:1px solid var(--border);border-radius:14px;background:var(--card-bg);overflow:hidden}.msc-360-card-head{display:flex;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border);font-size:12px}.msc-360-card-head i{color:var(--primary);margin-right:5px}.msc-360-list-row{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);align-items:center}.msc-360-list-row:last-child{border-bottom:0}.msc-360-list-row div{min-width:0}.msc-360-list-row strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msc-360-list-row span{display:block;color:var(--text-muted);font-size:10px;margin-top:2px}.msc-360-list-row em{font-style:normal;font-size:9px;font-weight:800;padding:4px 7px;border-radius:7px;background:var(--success-light);color:var(--success);white-space:nowrap}.msc-360-list-row em.danger{background:var(--danger-light);color:var(--danger)}.msc-360-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:11px}.msc-finance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.msc-finance-grid>div{background:var(--bg);border-radius:10px;padding:14px}.msc-finance-grid strong{display:block;font-size:16px}.msc-finance-grid span{display:block;color:var(--text-muted);font-size:10px;margin-top:4px}
@media(max-width:720px){.msc-360-summary{grid-template-columns:1fr 1fr}.msc-360-grid{grid-template-columns:1fr}.msc-360-card{min-width:0}.msc-route-node{max-width:130px}}

/* v3.0 canonical resource and branch-network UI */
.msc-module-count-btn{border:1px solid #c7d2fe;background:#eef2ff;color:#3730a3;border-radius:10px;min-width:70px;padding:6px 10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.msc-module-count-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(79,70,229,.12)}.msc-module-count-btn strong{font-size:14px;line-height:1}.msc-module-count-btn span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}.msc-branch-network{padding:14px 24px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#f8fafc)}.msc-branch-network-title{display:flex;align-items:center;gap:8px;color:var(--text-main);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.65px}.msc-branch-network-title i{color:var(--primary)}.msc-branch-network-title small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted);margin-left:4px}.msc-branch-network-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.msc-branch-network-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:#fff;border-radius:10px;padding:7px 10px;box-shadow:var(--shadow-sm)}.msc-branch-network-chip strong{font-size:11px;color:var(--text-main)}.msc-branch-network-chip small{font-size:9px;color:var(--text-muted)}.msc-branch-network-chip em{font-style:normal;font-size:8px;font-weight:800;text-transform:uppercase;padding:2px 5px;border-radius:5px;background:var(--success-light);color:#166534}.msc-branch-network-chip.archived em{background:var(--danger-light);color:#991b1b}.msc-branch-route-cell{display:flex;flex-direction:column;gap:4px;min-width:190px}.msc-branch-route-cell strong{font-size:11px;line-height:1.35;color:var(--text-main)}.msc-branch-route-cell small{font-size:9px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.35px}.msc-branch-route-cell.current strong{color:var(--primary)}
@media(max-width:900px){.msc-branch-network-title{align-items:flex-start;flex-direction:column;gap:3px}.msc-branch-network-title small{margin-left:0}.msc-branch-route-cell{min-width:150px}}

/* 3.2 unified resource and logistics presentation */
.msc-module-subject-group{grid-column:1/-1;border:1px solid var(--border);border-radius:14px;background:var(--card-bg);overflow:hidden;box-shadow:var(--shadow-sm)}
.msc-module-subject-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--bg);border-bottom:1px solid var(--border)}
.msc-module-subject-head strong{font-size:12px;color:var(--text-main);letter-spacing:.02em}
.msc-module-subject-head span{font-size:10px;font-weight:800;color:var(--primary);background:var(--primary-light);padding:4px 8px;border-radius:999px}
.msc-module-subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:10px}
.msc-module-assignment-card{min-width:0}
@media(max-width:760px){.msc-module-subject-grid{grid-template-columns:1fr}}
.msc-logistics-route-note{font-size:10px;color:var(--text-muted);margin-top:4px;line-height:1.45}
.msc-branch-route-cell.current strong{display:block}
.msc-branch-route-cell.current small{display:block;margin-top:4px}

/* v4.0 compact professional ERP density */
:root{--msc-space-1:4px;--msc-space-2:8px;--msc-space-3:12px;--msc-space-4:16px;--msc-control-h:34px}
.msc-main{padding:16px 20px!important}
.msc-header{padding:10px 14px!important;margin-bottom:14px!important;border-radius:10px!important}
.msc-sidebar{width:224px!important;padding:14px 10px!important}
.msc-sidebar.collapsed{width:68px!important;padding:14px 8px!important}
.msc-menu{padding:9px 11px!important;margin-bottom:3px!important;border-radius:8px!important;gap:10px!important;font-size:12px!important}
.menu-label{margin-top:16px!important;margin-bottom:6px!important;padding-left:11px!important;font-size:9px!important}
.bento-grid{gap:10px!important}
.msc-card{padding:14px!important;border-radius:10px!important}
.stat-card{padding:12px 14px!important;border-radius:10px!important;gap:8px!important}
.stat-icon{width:34px!important;height:34px!important;font-size:15px!important}
.auth-input{height:34px!important;padding:6px 10px!important;font-size:12px!important}
.auth-btn{height:34px!important;padding:6px 12px!important;font-size:12px!important;gap:6px!important}
.act-btn{width:29px!important;height:29px!important;min-width:29px!important;font-size:12px!important}
.msc-table th,.msc-table td{padding:8px 9px!important;font-size:11px!important}
.table-container{border-radius:9px!important}
.msc-tabs-container{gap:4px!important;margin-bottom:14px!important;padding:0 4px!important}
.msc-tab-btn{padding:9px 13px!important;font-size:12px!important;gap:6px!important}
.pos-grid{grid-template-columns:300px 1fr!important;gap:12px!important}
.checkbox-grid{gap:6px!important;padding:8px!important;max-height:160px!important}
.checkbox-grid label{padding:8px!important;font-size:11px!important}
@media(max-width:1100px){.msc-sidebar{width:200px!important}.msc-main{padding:12px 14px!important}.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.col-5,.col-4,.col-3{grid-column:span 2!important}}
@media(max-width:760px){.msc-sidebar{width:100%!important;max-height:56px!important;overflow:hidden}.msc-layout{display:block!important}.msc-main{height:calc(100vh - 56px);padding:10px!important}.bento-grid{grid-template-columns:1fr!important}.col-5,.col-4,.col-3,.col-2,.col-1{grid-column:span 1!important}.pos-grid{grid-template-columns:1fr!important}.msc-table{min-width:720px!important}}

/* v4.1.0 runtime-safe compact modal + navigation system */
body.msc-modal-open{overflow:hidden!important}
.modal-backdrop{display:none;position:fixed;inset:0;z-index:11000;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.46);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overscroll-behavior:contain}
.modal-backdrop[aria-hidden="false"]{display:flex}
.msc-detail-modal{position:relative;width:min(94vw,760px);max-width:760px;max-height:min(86vh,760px);overflow:auto;background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.18);padding:0;animation:mscDetailIn .18s ease-out}
.msc-student360-modal{width:min(94vw,980px);max-width:980px}
.msc-detail-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:rgba(248,250,252,.92);position:sticky;top:0;z-index:2}
.msc-detail-modal-head h3{font-size:15px;line-height:1.2;margin:2px 0 3px!important}
.msc-detail-modal-head p{margin:0;color:var(--text-muted);font-size:10px;line-height:1.35}
.msc-detail-modal-head small{display:block;color:var(--primary);font-size:9px;font-weight:700;margin-top:4px;line-height:1.35}
.msc-detail-eyebrow{display:block;font-size:8px;font-weight:800;color:var(--primary);letter-spacing:.08em;text-transform:uppercase}
.msc-modal-close{border:1px solid var(--border);background:#fff;color:var(--text-muted);width:28px;height:28px;min-width:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.msc-modal-close:hover{color:var(--danger);border-color:#fecaca;background:#fef2f2}
.msc-detail-tabs{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:74px;z-index:1}
.msc-detail-tabs button{border:0;background:transparent;color:var(--text-muted);padding:7px 10px;border-radius:7px;font:700 10px/1.2 inherit;cursor:pointer}
.msc-detail-tabs button.active{background:var(--primary-light);color:var(--primary)}
.msc-detail-tabs button span{margin-left:4px;font-size:9px}
#studentModulesState,#student360State{min-height:180px;padding:24px;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text-muted);font-size:11px;text-align:center}
#studentModulesList{padding:10px;grid-template-columns:1fr;gap:10px}
.msc-module-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px;gap:8px}
.msc-module-assignment-card{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px;border:1px solid var(--border);border-radius:9px;background:#fff;min-height:54px}
.msc-module-card-icon{width:26px;height:26px;border-radius:7px;background:#fff1f2;color:#e11d48;display:flex;align-items:center;justify-content:center;font-size:11px}
.msc-module-card-body{min-width:0}.msc-module-card-body strong{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msc-module-card-body span,.msc-module-card-body small{display:block;color:var(--text-muted);font-size:8.5px;line-height:1.35;margin-top:2px}.msc-module-status{font-style:normal;font-size:8px;font-weight:800;padding:4px 6px;border-radius:6px;white-space:nowrap}.msc-module-status.active{background:var(--success-light);color:#047857}.msc-module-status.history{background:#f1f5f9;color:#64748b}
.msc-360-summary{padding:10px 12px;margin:0!important;gap:8px!important}.msc-360-stat{padding:9px!important;border-radius:9px!important}.msc-360-stat strong{font-size:11px!important}.msc-360-stat span{font-size:8px!important}.msc-360-grid{padding:0 12px 12px;gap:10px!important}.msc-360-grid>.msc-detail-section{border:1px solid var(--border);border-radius:9px;background:#fff;overflow:hidden}.msc-detail-section-head{padding:8px 10px!important}.msc-detail-section-head h4{font-size:10px!important}.msc-detail-section-head span{font-size:9px!important}.msc-360-list-row{padding:8px 10px!important}.msc-360-list-row strong{font-size:10px!important}.msc-360-list-row span,.msc-360-list-row em{font-size:8px!important}.msc-finance-grid{padding:10px!important;gap:8px!important}.msc-finance-grid>div{padding:10px!important}.msc-finance-grid strong{font-size:13px!important}.msc-finance-grid span{font-size:8px!important}
.msc-camera-trigger{position:absolute!important;right:3px!important;top:3px!important;width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border-radius:6px!important;background:#fff!important;color:var(--primary)!important;border:1px solid var(--border)!important;box-shadow:none!important}
#catSearchBox{padding-right:38px!important}
.msc-toast{max-width:min(360px,calc(100vw - 20px));padding:10px 12px!important;border-radius:9px!important}.msc-toast-body strong{font-size:11px!important}.msc-toast-body span{font-size:10px!important}.msc-toast-icon{width:26px!important;height:26px!important;min-width:26px!important;font-size:11px!important}.msc-toast-close{width:22px!important;height:22px!important}
.msc-dropdown.open .msc-dropdown-content{display:block!important}
.msc-dropdown-content{max-width:calc(100vw - 20px)}
.msc-dropdown-content .msc-notif-filters{scrollbar-width:none}.msc-dropdown-content .msc-notif-filters::-webkit-scrollbar{display:none}
@media (max-width:768px){
  #msc-mobile-topbar{height:56px;padding:10px 12px!important;position:fixed!important;top:0;left:0;right:0;z-index:1200}
  .msc-layout{padding-top:56px!important;padding-bottom:58px!important;min-height:100vh!important;height:100vh!important;overflow:hidden!important}
  .msc-main{height:calc(100vh - 56px)!important;max-height:none!important;overflow:auto!important;padding:10px!important;padding-bottom:70px!important}
  .msc-sidebar{position:fixed!important;top:56px!important;bottom:auto!important;left:0!important;width:min(86vw,300px)!important;height:calc(100vh - 56px)!important;max-height:none!important;overflow-y:auto!important;transform:translateX(-105%)!important;padding:14px 10px!important;z-index:1205!important;box-shadow:12px 0 30px rgba(15,23,42,.16)!important}
  .msc-sidebar.mobile-open{transform:translateX(0)!important;left:0!important}
  .msc-sidebar-overlay{top:56px!important;height:calc(100vh - 56px)!important;z-index:1204!important}
  .msc-bottom-nav{height:58px!important;z-index:1210!important}.msc-bottom-nav-item{font-size:9px!important}.msc-bottom-nav-item i{font-size:15px!important}
  .msc-detail-modal,.msc-student360-modal{width:calc(100vw - 20px)!important;max-height:calc(100vh - 40px)!important;border-radius:14px!important}.msc-detail-modal-head{padding:12px!important}.msc-detail-tabs{top:68px}.msc-module-subject-grid{grid-template-columns:1fr!important}.msc-360-grid{grid-template-columns:1fr!important}
  .msc-dropdown-content{right:-4px!important;width:min(340px,calc(100vw - 20px))!important}
}
@media(max-width:420px){.msc-detail-modal,.msc-student360-modal{width:calc(100vw - 12px)!important}.msc-360-summary{grid-template-columns:1fr 1fr!important}.msc-module-assignment-card{grid-template-columns:24px minmax(0,1fr) auto}.msc-module-card-icon{width:24px;height:24px}}
@keyframes mscDetailIn{from{opacity:0;transform:translateY(6px) scale(.992)}to{opacity:1;transform:none}}


/* v4.2.0 final interaction and compact UI hardening */
#msc-app-wrapper.msc-body{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
#msc-app-wrapper .msc-main{min-width:0!important}
#msc-app-wrapper .msc-card{padding:14px!important}
#msc-app-wrapper .bento-grid{gap:10px!important}
#msc-app-wrapper .stat-card{padding:10px 12px!important;min-height:74px!important}
#msc-app-wrapper .stat-info h2{font-size:19px!important;line-height:1.1!important}
#msc-app-wrapper .stat-info p{font-size:9px!important}
#msc-app-wrapper .msc-header{padding:11px 14px!important;gap:8px!important}
#msc-app-wrapper .msc-header h2{font-size:15px!important}
#msc-app-wrapper .auth-btn{height:32px!important;min-height:32px!important;padding:6px 11px!important;font-size:11px!important;gap:6px!important}
#msc-app-wrapper .act-btn{width:29px!important;height:29px!important;min-width:29px!important;font-size:11px!important}
#msc-app-wrapper .auth-input{height:34px!important;padding:7px 10px!important;font-size:11px!important}
#msc-app-wrapper .input-group label{font-size:9px!important}
#msc-app-wrapper .msc-table{font-size:10px!important}
#msc-app-wrapper .msc-table th{font-size:9px!important;padding:8px 9px!important}
#msc-app-wrapper .msc-table td{padding:8px 9px!important}
#msc-app-wrapper .table-container{border-radius:9px!important}
.msc-modal-overlay,.modal-backdrop{z-index:100001!important}
#msc-toast-container{z-index:100010!important}
.msc-modal-card{padding:18px!important;width:min(92vw,560px)!important;max-height:88vh!important;border-radius:14px!important}
.modal-close{top:12px!important;right:12px!important;width:28px!important;height:28px!important}
.msc-detail-modal{z-index:100002!important}
.msc-sidebar-overlay{z-index:100004!important}
.msc-sidebar{z-index:100005!important}
@media(max-width:768px){
  #msc-app-wrapper .msc-main{width:100%!important}
  #msc-app-wrapper .msc-card{padding:11px!important}
  #msc-app-wrapper .stat-card{min-height:66px!important}
  #msc-app-wrapper .msc-header{padding:10px 11px!important}
  .msc-modal-overlay,.modal-backdrop{padding:8px!important}
  .msc-modal-card{width:calc(100vw - 16px)!important;max-height:90vh!important;padding:14px!important;border-radius:13px!important}
}

/* v4.2.1 runtime/UI normalization */
.msc-modal-overlay,.modal-backdrop{width:100%;height:100%;box-sizing:border-box}
.msc-modal-overlay[aria-hidden="true"],.modal-backdrop[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.msc-modal-overlay[aria-hidden="false"],.modal-backdrop[aria-hidden="false"]{visibility:visible;pointer-events:auto}
.msc-detail-modal{max-width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
.msc-modal-card{max-width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
.msc-dropdown-content{max-width:calc(100vw - 16px)}
.msc-bottom-nav{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
.msc-bottom-nav-item{min-width:0;white-space:nowrap}


/* v4.3.0 — final compact design system and interaction safety */
:root{--msc-ui-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--msc-ui-radius:8px;--msc-ui-gap:8px}
#msc-app-wrapper,.msc-body{font-family:var(--msc-ui-font);font-size:12px;line-height:1.35;color:var(--text-main);}
#msc-app-wrapper *{box-sizing:border-box}
#msc-app-wrapper .msc-card{padding:10px!important;border-radius:9px!important;box-shadow:0 1px 2px rgba(15,23,42,.05)!important}
#msc-app-wrapper .msc-header{min-height:44px!important;padding:8px 11px!important}
#msc-app-wrapper .msc-header h2,#msc-app-wrapper .msc-header h3{font-size:14px!important;line-height:1.2!important;margin:0!important}
#msc-app-wrapper .bento-grid{gap:8px!important}
#msc-app-wrapper .stat-card{min-height:62px!important;padding:8px 10px!important;border-radius:8px!important}
#msc-app-wrapper .stat-info h2{font-size:17px!important;margin:0!important}
#msc-app-wrapper .stat-info p{font-size:8.5px!important;margin-top:2px!important}
#msc-app-wrapper .auth-btn,#msc-app-wrapper button.auth-btn{height:30px!important;min-height:30px!important;padding:5px 9px!important;border-radius:7px!important;font-size:10px!important;line-height:1!important;box-shadow:none!important}
#msc-app-wrapper .act-btn{width:27px!important;height:27px!important;min-width:27px!important;border-radius:7px!important}
#msc-app-wrapper .auth-input,#msc-app-wrapper select.auth-input,#msc-app-wrapper textarea.auth-input{min-height:31px!important;height:31px!important;padding:6px 8px!important;border-radius:7px!important;font-size:10px!important}
#msc-app-wrapper textarea.auth-input{height:auto!important;min-height:72px!important}
#msc-app-wrapper .input-group{gap:3px!important;margin-bottom:9px!important}
#msc-app-wrapper .input-group label{font-size:8.5px!important;font-weight:700!important}
#msc-app-wrapper .msc-table{font-size:9.5px!important}
#msc-app-wrapper .msc-table th{padding:7px 8px!important;font-size:8.5px!important;line-height:1.15!important;white-space:nowrap}
#msc-app-wrapper .msc-table td{padding:6px 8px!important;line-height:1.25!important}
#msc-app-wrapper .table-container{border-radius:8px!important;box-shadow:none!important}
#msc-app-wrapper .table-container table thead th{position:sticky;top:0;z-index:4}
#msc-app-wrapper .section-header{padding:7px 9px!important}
#msc-app-wrapper .section-header h3{font-size:11px!important}
#msc-app-wrapper .filter-bar{gap:6px!important;padding:7px!important}
.msc-modal-overlay,.modal-backdrop{padding:10px!important;z-index:100001!important;background:rgba(15,23,42,.38)!important;backdrop-filter:blur(2px)!important}
.msc-modal-card{width:min(94vw,520px)!important;max-width:520px!important;max-height:calc(100vh - 24px)!important;padding:14px!important;border-radius:11px!important;box-shadow:0 16px 45px rgba(15,23,42,.20)!important;overflow:auto!important}
.msc-modal-card.mini{width:min(94vw,440px)!important}
.msc-modal-card h3{font-size:14px!important;line-height:1.25!important;margin:0 0 8px!important}
.msc-modal-card p{font-size:10px!important;line-height:1.4!important;margin:0 0 12px!important}
.modal-close,.msc-modal-close{position:absolute!important;top:9px!important;right:9px!important;width:28px!important;height:28px!important;min-width:28px!important;padding:0!important;border:1px solid var(--border)!important;border-radius:7px!important;background:#fff!important;color:var(--text-muted)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;z-index:5!important}
.modal-close:hover,.msc-modal-close:hover{background:#f8fafc!important;color:var(--danger)!important}
#msc-toast-container{right:12px!important;bottom:12px!important;z-index:100010!important}
.msc-toast{max-width:min(340px,calc(100vw - 20px))!important;padding:8px 10px!important;border-radius:8px!important}
.msc-toast-body strong{font-size:10px!important}.msc-toast-body span{font-size:9px!important}.msc-toast-icon{width:24px!important;height:24px!important;min-width:24px!important}
.msc-dropdown-content{border-radius:9px!important;box-shadow:0 10px 28px rgba(15,23,42,.14)!important}
.msc-dropdown.open .msc-dropdown-content{display:block!important}
@media (hover:none),(pointer:coarse){.msc-dropdown:hover .msc-dropdown-content{display:none!important}.msc-dropdown.open:hover .msc-dropdown-content{display:block!important}}
*:focus-visible{outline:2px solid rgba(79,70,229,.42);outline-offset:2px}
html.msc-modal-open,body.msc-modal-open{overscroll-behavior:none}
@media(max-width:768px){
 #msc-app-wrapper .msc-main{padding:8px!important;padding-bottom:68px!important}
 #msc-app-wrapper .msc-card{padding:9px!important}
 #msc-app-wrapper .stat-card{min-height:58px!important}
 #msc-app-wrapper .msc-header{min-height:42px!important;padding:7px 9px!important}
 .msc-modal-overlay,.modal-backdrop{padding:6px!important}
 .msc-modal-card,.msc-modal-card.mini{width:calc(100vw - 12px)!important;max-width:none!important;max-height:calc(100vh - 18px)!important;padding:12px!important;border-radius:10px!important}
 #msc-toast-container{right:8px!important;left:8px!important;bottom:66px!important}
 .msc-toast{width:100%!important;max-width:none!important}
}


/* v4.4.0 — consistency pass */
#msc-app-wrapper h1{font-size:18px!important;line-height:1.2!important}
#msc-app-wrapper h2{font-size:15px!important;line-height:1.2!important}
#msc-app-wrapper h3{font-size:13px!important;line-height:1.25!important}
#msc-app-wrapper h4{font-size:11px!important;line-height:1.3!important}
#msc-app-wrapper .msc-modal-card .modal-grid-strict{gap:9px!important}
#msc-app-wrapper .msc-modal-card .modal-grid-strict .full-span{grid-column:1/-1}
#msc-app-wrapper .msc-modal-card .auth-btn[disabled]{opacity:.55!important;cursor:not-allowed!important}
#msc-app-wrapper .msc-modal-card .input-group{margin-bottom:8px!important}
#msc-app-wrapper .msc-modal-card .checkbox-grid{gap:6px!important}
#msc-app-wrapper .msc-modal-card .checkbox-grid label{min-height:28px!important;padding:5px 7px!important;font-size:9px!important}
#msc-app-wrapper .msc-modal-card .auth-btn{margin-top:10px!important}
#msc-app-wrapper .msc-table tr{transition:background .12s ease}
#msc-app-wrapper .msc-table tbody tr:hover{background:#f8fafc}
#msc-app-wrapper .msc-table td .act-btn + .act-btn{margin-left:3px}
.msc-detail-modal-head{padding:11px 13px!important}
.msc-detail-tabs{padding:6px 9px!important}
.msc-detail-tabs button{font-size:9px!important;padding:6px 8px!important}
.msc-module-assignment-card{min-height:50px!important;padding:8px!important}
.msc-module-subject-head{padding:7px 8px!important;font-size:9px!important}