:root {
            --brand-950: #140319;
            --brand-900: #2a0738;
            --brand-700: #6e1d8d;
            --brand-500: #a855f7;
            --brand-300: #d8b4fe;
            --accent-warm: #f59e0b;
            --text-900: #0f172a;
            --text-500: #64748b;
            --border: #d7e2ee;
            --surface: rgba(255, 255, 255, 0.94);
            --surface-strong: rgba(255, 255, 255, 0.98);
            --shadow-soft: 0 20px 48px rgba(8, 17, 32, 0.08);
            --shadow-hover: 0 28px 68px rgba(8, 17, 32, 0.14);
            --sidebar-width: 302px;
        }

        html,
        body {
            overflow-x: hidden;
        }

        body {
            margin: 0;
            min-height: 100vh;
            color: var(--text-900);
            font-family: 'Source Sans 3', sans-serif;
            line-height: 1.55;
            background:
                radial-gradient(900px circle at 0% 0%, rgba(192, 132, 252, 0.18) 0%, transparent 52%),
                radial-gradient(760px circle at 100% 0%, rgba(107, 33, 168, 0.14) 0%, transparent 48%),
                radial-gradient(560px circle at 50% 100%, rgba(168, 85, 247, 0.12) 0%, transparent 46%),
                linear-gradient(180deg, #fbf7ff 0%, #f3ebfb 52%, #efe5f8 100%);
        }

        h1, h2, h3, h4, h5, h6, .app-brand, .page-title { font-family: 'Manrope', sans-serif; }
        img { max-width: 100%; }

        .app-shell {
            display: block;
            min-height: 100vh;
        }
        .app-sidebar {
            width: var(--sidebar-width);
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 30;
            height: 100vh;
            height: 100dvh;
            min-height: 100vh;
            overflow-y: auto;
            scrollbar-gutter: stable;
            padding: 1.35rem 1rem 1rem;
            display: flex;
            flex-direction: column;
            color: #d7e4f2;
            background:
                radial-gradient(440px circle at 0% 0%, rgba(192, 132, 252, 0.24) 0%, transparent 52%),
                radial-gradient(360px circle at 100% 100%, rgba(126, 34, 206, 0.2) 0%, transparent 42%),
                linear-gradient(180deg, var(--brand-900) 0%, var(--brand-950) 100%);
        }

        .app-brand, .sidebar-link, .sidebar-quick { text-decoration: none; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            text-align: center;
            line-height: 1.2;
            vertical-align: middle;
            font-weight: 700;
            border-radius: 14px;
            border-width: 1px;
            transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
        }
        .btn:hover:not(:disabled),
        .btn:focus-visible:not(:disabled) {
            transform: translateY(-1px);
        }
        .btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 .2rem rgba(168, 85, 247, 0.14);
        }
        .btn-primary {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #4b0d63 0%, #a855f7 100%);
            box-shadow: 0 14px 28px rgba(75, 13, 99, 0.18);
        }
        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #3b0a4f 0%, #9333ea 100%);
            box-shadow: 0 18px 30px rgba(75, 13, 99, 0.24);
        }
        .btn-outline-primary {
            color: #4b0d63;
            border-color: rgba(168, 85, 247, 0.28);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 238, 255, 0.96) 100%);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
        }
        .btn-outline-primary:hover,
        .btn-outline-primary:focus,
        .btn-outline-primary:active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #6e1d8d 0%, #a855f7 100%);
            box-shadow: 0 16px 28px rgba(110, 29, 141, 0.2);
        }
        .btn-outline-secondary {
            color: #334155;
            border-color: rgba(148, 163, 184, 0.32);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.94) 100%);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
        }
        .btn-outline-secondary:hover:not(.floor-picker-trigger):not(.select-modal-trigger),
        .btn-outline-secondary:focus:not(.floor-picker-trigger):not(.select-modal-trigger),
        .btn-outline-secondary:active:not(.floor-picker-trigger):not(.select-modal-trigger) {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #475569 0%, #64748b 100%);
            box-shadow: 0 16px 28px rgba(51, 65, 85, 0.18);
        }
        .btn-outline-light {
            color: #7c2d12;
            border-color: rgba(255, 255, 255, 0.68);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 247, 230, 0.96) 100%);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
        }
        .btn-outline-light:hover,
        .btn-outline-light:focus,
        .btn-outline-light:active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
            box-shadow: 0 18px 30px rgba(180, 83, 9, 0.24);
        }
        .btn-outline-success {
            color: #166534;
            border-color: rgba(34, 197, 94, 0.24);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 253, 245, 0.96) 100%);
            box-shadow: 0 10px 22px rgba(21, 128, 61, 0.08);
        }
        .btn-outline-success:hover,
        .btn-outline-success:focus,
        .btn-outline-success:active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
            box-shadow: 0 16px 28px rgba(21, 128, 61, 0.2);
        }
        .btn-outline-danger {
            color: #b91c1c;
            border-color: rgba(239, 68, 68, 0.24);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 242, 242, 0.96) 100%);
            box-shadow: 0 10px 22px rgba(185, 28, 28, 0.06);
        }
        .btn-outline-danger:hover,
        .btn-outline-danger:focus,
        .btn-outline-danger:active {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
            box-shadow: 0 16px 28px rgba(185, 28, 28, 0.2);
        }
        .app-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: #fff;
            padding: .35rem .35rem .75rem;
        }
        .app-brand:hover { color: #fff; }
        .brand-mark { width: 4rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; }
        .brand-mark-sm { width: 3.5rem; height: 3.5rem; }
        .brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
        .brand-copy { display: flex; flex-direction: column; min-width: 0; }
        .brand-eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 216, 248, 0.72); }
        .brand-title { font-size: 1.08rem; line-height: 1.2; }
        .guest-brand { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }

        .sidebar-role {
            margin: .65rem 0 1.1rem;
            display: inline-flex;
            padding: .3rem .78rem;
            border-radius: 999px;
            font-size: .78rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            background: rgba(255, 255, 255, 0.09);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .sidebar-link {
            display: flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: .28rem;
            padding: .78rem .82rem;
            border-radius: 16px;
            border: 1px solid transparent;
            color: #d4e0ee;
            font-size: .95rem;
            font-weight: 600;
            transition: .18s ease;
        }
        .sidebar-link:hover, .mobile-nav-link:hover {
            color: #fff;
            transform: translateX(2px);
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .08);
        }
        .sidebar-link.active, .mobile-nav-link.active {
            color: var(--text-900);
            background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(245,237,255,.94) 100%);
            border-color: rgba(168, 85, 247, 0.22);
            box-shadow: 0 16px 28px rgba(8, 17, 32, 0.22);
        }

        .sidebar-support {
            margin-top: auto;
            padding: 1rem;
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
            border: 1px solid rgba(255,255,255,.08);
        }
        .sidebar-support-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(215, 228, 242, 0.62); }
        .sidebar-support-title { color: #fff; font-weight: 700; margin: .35rem 0; }
        .sidebar-support-copy { color: #bfd0e3; font-size: .88rem; margin: .35rem 0 0; }

        .sidebar-quick, .btn-philcst {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 16px;
            color: #fff;
            font-weight: 800;
            background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
            box-shadow: 0 16px 30px rgba(110, 29, 141, 0.24);
        }
        .sidebar-quick { width: 100%; padding: .82rem 1rem; }
        .sidebar-quick:hover, .btn-philcst:hover, .btn-philcst:focus {
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 20px 34px rgba(110, 29, 141, 0.28);
        }
        .offcanvas.offcanvas-start {
            width: min(86vw, 340px);
            border-right: 1px solid rgba(168, 85, 247, 0.14);
            background:
                radial-gradient(520px circle at 0% 0%, rgba(216, 180, 254, 0.28) 0%, transparent 44%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 255, 0.98) 100%);
            box-shadow: 0 26px 62px rgba(15, 23, 42, 0.2);
        }
        .offcanvas-header {
            padding: 1.05rem 1rem .9rem;
            border-bottom: 1px solid rgba(217, 228, 240, 0.9);
        }
        .offcanvas-title {
            color: var(--text-900);
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            letter-spacing: -.02em;
        }
        .offcanvas-body {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: .35rem;
        }
        .mobile-nav-link {
            color: var(--text-900);
            background: rgba(255, 255, 255, 0.76);
            border-color: rgba(216, 180, 254, 0.34);
            box-shadow: 0 12px 22px rgba(15, 23, 42, 0.05);
        }
        .mobile-nav-link i {
            color: var(--brand-700);
        }
        .mobile-nav-link:hover {
            color: var(--text-900);
            transform: translateX(3px);
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(168, 85, 247, 0.2);
        }
        .mobile-nav-link.active {
            color: #fff;
            background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-500) 100%);
            border-color: transparent;
            box-shadow: 0 18px 28px rgba(75, 13, 99, 0.24);
        }
        .mobile-nav-link.active i,
        .mobile-nav-link.active span {
            color: #fff;
        }
        .app-main {
            min-width: 0;
            margin-left: var(--sidebar-width);
        }
        .app-topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            padding: 1rem 1.5rem;
            background: rgba(255,255,255,.74);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        }
        .topbar-title { margin: 0; font-size: 1.35rem; font-weight: 800; }
        .topbar-subtitle { margin: .1rem 0 0; color: var(--text-500); font-size: .92rem; }
        .topbar-tools { display: flex; align-items: center; gap: .75rem; }
        .topbar-dropdown {
            position: relative;
        }
        .topbar-action, .user-chip {
            display: inline-flex;
            align-items: center;
            border-radius: 14px;
            background: rgba(255,255,255,.78);
            border: 1px solid rgba(217,228,240,.9);
        }
        .topbar-action {
            position: relative;
            justify-content: center;
            width: 2.8rem;
            height: 2.8rem;
            color: #334155;
        }
        .topbar-action:hover,
        .topbar-action:focus-visible,
        .user-chip-button:hover,
        .user-chip-button:focus-visible {
            color: var(--text-900);
            border-color: rgba(168, 85, 247, 0.24);
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
        }
        .user-chip {
            gap: .8rem;
            padding: .42rem .68rem .42rem .42rem;
            border-radius: 999px;
        }
        .user-chip-button {
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        .user-chip-button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 .2rem rgba(168, 85, 247, 0.14), 0 14px 28px rgba(15, 23, 42, 0.08);
        }
        .user-chip-avatar {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            border-radius: 999px;
            color: #fff;
            font-size: .84rem;
            font-weight: 800;
            background: linear-gradient(135deg, #4b0d63 0%, #a855f7 100%);
        }
        .avatar-fallback {
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .avatar-photo {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        .user-chip-copy {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 0;
            gap: .08rem;
        }
        .user-chip-name {
            max-width: 11rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .92rem;
            font-weight: 800;
            line-height: 1.08;
        }
        .user-chip-role {
            color: var(--text-500);
            font-size: .73rem;
            font-weight: 700;
            line-height: 1.1;
        }
        .user-chip-caret {
            color: #64748b;
            font-size: .82rem;
        }
        .account-mobile-trigger { display: none; }
        .account-mobile-trigger .user-chip-avatar {
            width: 1.9rem;
            height: 1.9rem;
        }
        .topbar-signout {
            min-width: 6.45rem;
            min-height: 2.85rem;
            padding-inline: 1rem;
            border-radius: 999px;
            font-weight: 800;
        }

        .offcanvas.account-offcanvas {
            width: min(92vw, 420px);
            border-left: 1px solid rgba(168, 85, 247, 0.16);
            background:
                radial-gradient(340px circle at 0% 0%, rgba(216, 180, 254, 0.24) 0%, transparent 46%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(249, 245, 255, 0.98) 100%);
            box-shadow: -24px 0 58px rgba(15, 23, 42, 0.18);
        }
        .account-offcanvas .offcanvas-header {
            padding: 1.1rem 1rem .95rem;
        }
        .account-panel {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .account-hero-card {
            padding: 1.1rem;
            border-radius: 26px;
            color: #fff;
            background:
                radial-gradient(240px circle at 0% 0%, rgba(245, 158, 11, 0.18) 0%, transparent 44%),
                radial-gradient(320px circle at 100% 100%, rgba(216, 180, 254, 0.16) 0%, transparent 42%),
                linear-gradient(135deg, rgba(42, 7, 56, 0.98) 0%, rgba(75, 13, 99, 0.96) 58%, rgba(168, 85, 247, 0.9) 100%);
            box-shadow: 0 24px 48px rgba(75, 13, 99, 0.2);
        }
        .account-hero-top {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }
        .account-avatar {
            width: 4rem;
            height: 4rem;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 24px;
            color: #fff;
            font-family: 'Manrope', sans-serif;
            font-size: 1.2rem;
            font-weight: 800;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.12) 100%);
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }
        .account-hero-copy {
            flex: 1;
            min-width: 0;
        }
        .account-kicker {
            color: rgba(240, 232, 248, 0.76);
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .account-name {
            margin: .3rem 0 0;
            color: #fff;
            font-family: 'Manrope', sans-serif;
            font-size: 1.3rem;
            font-weight: 800;
            line-height: 1.1;
        }
        .account-role {
            margin: .26rem 0 0;
            color: rgba(255, 255, 255, 0.86);
            font-size: .95rem;
            font-weight: 700;
        }
        .account-contact {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
            margin-top: .9rem;
        }
        .account-contact-pill {
            display: inline-flex;
            align-items: center;
            gap: .38rem;
            padding: .42rem .68rem;
            border-radius: 999px;
            color: #fff;
            font-size: .82rem;
            font-weight: 700;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .account-note {
            margin-top: .9rem;
            padding: .92rem 1rem;
            border-radius: 18px;
            color: rgba(255, 255, 255, 0.88);
            font-size: .89rem;
            line-height: 1.55;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .account-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .75rem;
        }
        .account-detail {
            min-height: 7.2rem;
            padding: .95rem;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(217, 228, 240, 0.9);
            box-shadow: 0 14px 24px rgba(15, 23, 42, 0.05);
        }
        .account-detail-icon {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: .75rem;
            border-radius: 14px;
            color: var(--brand-700);
            background: linear-gradient(135deg, rgba(216, 180, 254, 0.48) 0%, rgba(249, 245, 255, 0.94) 100%);
        }
        .account-detail-label {
            display: block;
            color: var(--text-500);
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .account-detail-value {
            display: block;
            margin-top: .34rem;
            color: var(--text-900);
            font-size: .98rem;
            font-weight: 800;
            line-height: 1.3;
            word-break: break-word;
        }
        .account-actions-card {
            padding: 1rem;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(217, 228, 240, 0.9);
            box-shadow: 0 16px 28px rgba(15, 23, 42, 0.05);
        }
        .account-actions-title {
            margin: 0 0 .22rem;
            color: var(--text-900);
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }
        .account-actions-copy {
            margin: 0 0 .95rem;
            color: var(--text-500);
            font-size: .92rem;
        }
        .account-actions {
            display: grid;
            gap: .75rem;
        }
        .account-actions form {
            width: 100%;
            margin: 0;
        }
        .account-actions .btn {
            width: 100%;
            min-height: 2.9rem;
        }
        .profile-side-card .account-hero-card {
            padding: 1rem;
            border-radius: 22px;
        }
        .profile-side-card .account-grid {
            grid-template-columns: 1fr;
        }
        .profile-side-card .account-detail {
            min-height: auto;
        }
        .profile-photo-card {
            margin-bottom: 1.5rem;
            padding: 1rem;
            border-radius: 24px;
            border: 1px solid rgba(217, 228, 240, 0.9);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 255, 0.94) 100%);
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
        }
        .profile-photo-top {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .profile-photo-preview {
            width: 5.25rem;
            height: 5.25rem;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 26px;
            color: #fff;
            font-family: 'Manrope', sans-serif;
            font-size: 1.3rem;
            font-weight: 800;
            background: linear-gradient(135deg, #4b0d63 0%, #a855f7 100%);
            border: 1px solid rgba(168, 85, 247, 0.2);
            box-shadow: 0 16px 28px rgba(75, 13, 99, 0.16);
        }
        .profile-photo-copy {
            min-width: 0;
        }
        .profile-photo-title {
            margin: 0 0 .22rem;
            font-family: 'Manrope', sans-serif;
            font-size: 1.02rem;
            font-weight: 800;
            color: var(--text-900);
        }
        .profile-photo-copy p {
            margin: 0;
            color: var(--text-500);
            font-size: .92rem;
        }
        .profile-photo-actions {
            display: grid;
            gap: .75rem;
        }

        .app-content { padding: 1.5rem; }
        .content-wrap { width: 100%; max-width: 1380px; }

        .app-card {
            background: var(--surface);
            border: 1px solid rgba(217, 228, 240, 0.9);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(14px);
        }
        .app-card:hover { box-shadow: var(--shadow-hover); }
        .app-card .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(226, 232, 240, 0.9); }
        .app-card .card-body { padding: 1.25rem; }
        .stats-card {
            border-radius: 24px;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .stats-card:hover {
            transform: translateY(-3px);
            border-color: rgba(168, 85, 247, 0.18);
        }

        .panel-hero {
            padding: 1.5rem;
            border-radius: 28px;
            background:
                radial-gradient(420px circle at 0% 0%, rgba(216, 180, 254, 0.16) 0%, transparent 50%),
                radial-gradient(300px circle at 100% 100%, rgba(168, 85, 247, 0.16) 0%, transparent 42%),
                linear-gradient(135deg, rgba(42,7,56,.97) 0%, rgba(75,13,99,.94) 55%, rgba(168,85,247,.88) 100%);
            box-shadow: 0 22px 48px rgba(75, 13, 99, 0.18);
        }

        .page-title { font-weight: 800; }
        .text-muted-soft { color: var(--text-500) !important; }
        .page-hero-shell,
        .page-toolbar,
        .page-summary-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .page-hero-actions,
        .page-toolbar-actions,
        .mobile-form-actions,
        .notification-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
        }
        .filter-form-actions {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-self: flex-start;
            gap: .55rem;
            padding-top: 1.9rem;
        }
        .filter-form-actions .btn {
            width: 100%;
            min-height: calc(2.375rem + 2px);
            padding-top: .375rem;
            padding-bottom: .375rem;
        }
        .incident-history-filter-form .filter-form-actions {
            align-self: flex-start;
            padding-top: 1.9rem;
        }
        .incident-history-filter-form .filter-form-actions .btn {
            min-height: calc(2.375rem + 2px);
            border-radius: 14px;
        }
        .incident-history-filter-form > * {
            min-width: 0;
        }
        .incident-history-filter-form .form-control,
        .incident-history-filter-form .form-select,
        .incident-history-filter-form .btn {
            height: calc(2.875rem + 2px);
        }
        .incident-history-filter-form .form-control,
        .incident-history-filter-form .form-select {
            width: 100%;
            min-width: 0;
        }
        .incident-history-filter-form .field-description {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @media (min-width: 1200px) {
            .incident-history-filter-form {
                display: grid !important;
                grid-template-columns:
                    minmax(260px, 1.7fr)
                    minmax(120px, .72fr)
                    minmax(128px, .78fr)
                    minmax(120px, .72fr)
                    minmax(132px, .68fr);
                align-items: start !important;
                column-gap: 1rem;
                row-gap: 1rem;
                margin-right: 0;
                margin-left: 0;
            }
            .incident-history-filter-form > * {
                width: auto;
                max-width: none;
                padding-right: 0;
                padding-left: 0;
            }
        }
        .page-hero-actions .btn,
        .page-toolbar-actions .btn,
        .mobile-form-actions .btn,
        .notification-actions .btn {
            min-height: 2.8rem;
        }
        .mobile-setting-toggle {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }

        .metric-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
        .metric-label { margin-bottom: .3rem; color: var(--text-500); font-size: .9rem; font-weight: 700; }
        .metric-value { font-size: 2rem; font-weight: 800; line-height: 1; }
        .metric-icon {
            width: 3rem;
            height: 3rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            color: #fff;
            font-size: 1.25rem;
        }
        .metric-icon.navy { background: linear-gradient(135deg, #2a0738, #4b0d63); }
        .metric-icon.amber { background: linear-gradient(135deg, #c27a07, #f59e0b); }
        .metric-icon.red { background: linear-gradient(135deg, #b91c1c, #ef4444); }
        .metric-icon.green { background: linear-gradient(135deg, #6e1d8d, #a855f7); }

        .dashboard-metrics {
            margin-bottom: .25rem;
        }
        .dashboard-stat-column,
        .dashboard-stat-shell {
            position: relative;
        }
        .dashboard-stat-shell {
            height: 100%;
        }
        .dashboard-stat-shell:hover,
        .dashboard-stat-shell:focus-within {
            z-index: 80;
        }
        .dashboard-stat-button {
            width: 100%;
            padding: 0;
            color: inherit;
            text-align: left;
            cursor: pointer;
            appearance: none;
            background: var(--surface);
        }
        .dashboard-stat-button .card-body {
            display: block;
            width: 100%;
        }
        .dashboard-stat-button:focus-visible {
            outline: none;
            border-color: rgba(168, 85, 247, 0.38);
            box-shadow: 0 0 0 .22rem rgba(168, 85, 247, 0.14), var(--shadow-hover);
        }
        .dashboard-stat-shell:hover .dashboard-stat-button,
        .dashboard-stat-shell:focus-within .dashboard-stat-button {
            border-color: rgba(168, 85, 247, 0.34);
            box-shadow: 0 24px 54px rgba(75, 13, 99, 0.15);
        }
        .dashboard-floating-panel {
            position: absolute;
            top: calc(100% + .45rem);
            left: 0;
            z-index: 90;
            width: min(340px, calc(100vw - 2rem));
            padding: .8rem;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(-6px);
            transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
        }
        .dashboard-stat-shell:hover .dashboard-floating-panel,
        .dashboard-stat-shell:focus-within .dashboard-floating-panel {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }
        .dashboard-floating-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .75rem;
        }
        .dashboard-floating-head .metric-icon {
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 14px;
            font-size: 1rem;
            flex: 0 0 auto;
        }
        .dashboard-insight-kicker {
            color: #6e1d8d;
            font-size: .66rem;
            font-weight: 800;
            letter-spacing: .09em;
            text-transform: uppercase;
        }
        .dashboard-insight-title {
            margin: .18rem 0 0;
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-900);
        }
        .dashboard-insight-value {
            margin-top: .25rem;
            font-family: 'Manrope', sans-serif;
            font-size: 1.65rem;
            font-weight: 800;
            line-height: 1;
            color: #2a0738;
        }
        .dashboard-insight-description {
            margin: .42rem 0 0;
            color: var(--text-500);
            font-size: .86rem;
            line-height: 1.55;
        }
        .dashboard-insight-share {
            margin-top: .45rem;
            color: #334155;
            font-size: .78rem;
            font-weight: 800;
        }
        .dashboard-insight-link {
            align-self: flex-start;
            margin-top: .65rem;
            min-height: 2.35rem;
            padding: .42rem .72rem;
            border-radius: 12px;
            font-size: .84rem;
        }
        .dashboard-chart {
            display: grid;
            gap: .45rem;
            margin-top: .75rem;
        }
        .dashboard-chart-item {
            width: 100%;
            padding: .48rem .58rem;
            color: inherit;
            text-align: left;
            border: 1px solid transparent;
            border-radius: 12px;
            background: rgba(248, 250, 252, 0.72);
            transition: background .18s ease, border-color .18s ease, transform .18s ease;
        }
        .dashboard-chart-item.active {
            border-color: rgba(168, 85, 247, 0.2);
            background: rgba(255, 255, 255, 0.94);
        }
        .dashboard-chart-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .55rem;
            margin-bottom: .32rem;
            color: #334155;
            font-size: .82rem;
            font-weight: 800;
        }
        .dashboard-chart-track {
            display: block;
            height: .48rem;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(203, 213, 225, 0.62);
        }
        .dashboard-chart-fill {
            display: block;
            height: 100%;
            min-width: 0;
            border-radius: inherit;
            transition: width .24s ease;
        }
        .dashboard-chart-fill.navy { background: linear-gradient(90deg, #2a0738, #4b0d63); }
        .dashboard-chart-fill.amber { background: linear-gradient(90deg, #c27a07, #f59e0b); }
        .dashboard-chart-fill.red { background: linear-gradient(90deg, #b91c1c, #ef4444); }
        .dashboard-chart-fill.green { background: linear-gradient(90deg, #6e1d8d, #a855f7); }

        @media (min-width: 768px) and (max-width: 1199.98px) {
            .dashboard-stat-shell-md-end .dashboard-floating-panel {
                right: 0;
                left: auto;
            }
        }

        @media (min-width: 1200px) {
            .dashboard-stat-shell-xl-end .dashboard-floating-panel {
                right: 0;
                left: auto;
            }
        }

        .guest-shell { min-height: 100vh; padding: .45rem .85rem 1rem; }
        .guest-top {
            max-width: min(96vw, 1500px);
            margin: 0 auto .85rem;
            padding: .9rem 1.15rem;
            border-radius: 26px;
            background: linear-gradient(180deg, #47105f 0%, #3a0b50 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 18px 40px rgba(39, 7, 55, 0.24);
        }
        .guest-top .guest-brand {
            color: #ffffff;
        }
        .guest-top .brand-logo {
            filter: drop-shadow(0 8px 18px rgba(12, 4, 18, 0.28));
        }
        .guest-platform-label {
            color: rgba(240, 232, 248, 0.88);
            font-size: .92rem;
            font-weight: 700;
        }
        .guest-shell > main.container { max-width: min(96vw, 1500px); }

        .form-control, .form-select {
            min-height: 3.25rem;
            border-radius: 14px;
            border-color: #dbe5ef;
            box-shadow: none;
        }
        .form-control:focus, .form-select:focus {
            border-color: rgba(168,85,247,.45);
            box-shadow: 0 0 0 .2rem rgba(168,85,247,.12);
        }
        .field-description {
            margin-top: .4rem;
            color: #64748b;
            font-size: .84rem;
            line-height: 1.5;
        }

        .table thead th { color: var(--text-500); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
        .table > :not(caption) > * > * {
            padding-top: .95rem;
            padding-bottom: .95rem;
            border-bottom-color: rgba(226, 232, 240, 0.78);
            vertical-align: middle;
        }
        .table tbody tr:hover { background: rgba(244, 250, 250, 0.7); }
        .list-group-item {
            border-color: rgba(226, 232, 240, 0.8);
            background: transparent;
        }
        .alert {
            border: none;
            border-radius: 20px;
            box-shadow: var(--shadow-soft);
        }
        .flash-popup-stack {
            position: fixed;
            top: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1080;
            display: flex;
            flex-direction: column;
            gap: .75rem;
            width: min(460px, calc(100vw - 1.5rem));
        }
        .flash-popup {
            display: flex;
            align-items: flex-start;
            gap: .85rem;
            padding: .95rem 1rem;
            border: 1px solid var(--flash-border, rgba(52, 168, 83, 0.18));
            background: var(--flash-background, linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.98) 100%));
            box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
            animation: flashPopupIn .28s ease-out;
        }
        .flash-popup-icon {
            flex-shrink: 0;
            width: 2.25rem;
            height: 2.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            color: var(--flash-icon-color, #166534);
            font-size: 1rem;
            background: var(--flash-icon-background, rgba(34, 197, 94, 0.16));
        }
        .flash-popup-body {
            flex: 1;
            min-width: 0;
        }
        .flash-popup-title {
            margin: 0 0 .15rem;
            font-size: .95rem;
            font-weight: 800;
            color: var(--flash-title-color, #166534);
        }
        .flash-popup-copy {
            margin: 0;
            color: var(--flash-copy-color, #14532d);
            font-size: .96rem;
            line-height: 1.45;
        }
        .flash-popup .btn-close {
            margin: .1rem 0 0;
        }
        .flash-popup-success {
            --flash-border: rgba(52, 168, 83, 0.18);
            --flash-background: linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.98) 100%);
            --flash-icon-color: #166534;
            --flash-icon-background: rgba(34, 197, 94, 0.16);
            --flash-title-color: #166534;
            --flash-copy-color: #14532d;
        }
        .flash-popup-error {
            --flash-border: rgba(239, 68, 68, 0.2);
            --flash-background: linear-gradient(180deg, rgba(254, 242, 242, 0.99) 0%, rgba(254, 226, 226, 0.99) 100%);
            --flash-icon-color: #b91c1c;
            --flash-icon-background: rgba(239, 68, 68, 0.14);
            --flash-title-color: #991b1b;
            --flash-copy-color: #7f1d1d;
        }
        .flash-popup-warning {
            --flash-border: rgba(245, 158, 11, 0.22);
            --flash-background: linear-gradient(180deg, rgba(255, 251, 235, 0.99) 0%, rgba(254, 243, 199, 0.99) 100%);
            --flash-icon-color: #b45309;
            --flash-icon-background: rgba(245, 158, 11, 0.15);
            --flash-title-color: #92400e;
            --flash-copy-color: #78350f;
        }
        .flash-popup-info {
            --flash-border: rgba(59, 130, 246, 0.2);
            --flash-background: linear-gradient(180deg, rgba(239, 246, 255, 0.99) 0%, rgba(219, 234, 254, 0.99) 100%);
            --flash-icon-color: #1d4ed8;
            --flash-icon-background: rgba(59, 130, 246, 0.14);
            --flash-title-color: #1e40af;
            --flash-copy-color: #1e3a8a;
        }
        @keyframes flashPopupIn {
            from {
                opacity: 0;
                transform: translateY(-14px) scale(.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .badge-status {
            display: inline-flex;
            align-items: center;
            padding: .48rem .72rem;
            border-radius: 999px;
            font-size: .74rem;
            font-weight: 800;
            letter-spacing: .04em;
        }
        .status-submitted,
        .status-under-review,
        .status-pending,
        .status-pending-review {
            color: #92400e;
            background: rgba(245, 158, 11, 0.16);
        }
        .status-assigned,
        .status-in-progress {
            color: #6e1d8d;
            background: rgba(168, 85, 247, 0.14);
        }
        .status-resolved,
        .status-closed {
            color: #4b0d63;
            background: rgba(192, 132, 252, 0.16);
        }
        .status-rejected,
        .status-cancelled {
            color: #b91c1c;
            background: rgba(239, 68, 68, 0.14);
        }
        .urgency-low { color: #0f766e; font-weight: 700; }
        .urgency-medium { color: #b45309; font-weight: 700; }
        .urgency-high { color: #ea580c; font-weight: 700; }
        .urgency-critical { color: #b91c1c; font-weight: 800; }
        .pagination {
            gap: .35rem;
            flex-wrap: wrap;
        }
        .pagination .page-link {
            border: 1px solid rgba(215, 226, 238, 0.9);
            color: #6e1d8d;
            border-radius: 14px;
            padding: .55rem .82rem;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.03);
        }
        .pagination .page-item.active .page-link {
            border-color: transparent;
            background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
            color: #fff;
            box-shadow: 0 14px 24px rgba(110, 29, 141, 0.22);
        }
        .pagination .page-item.disabled .page-link {
            color: #94a3b8;
            background: rgba(255,255,255,.72);
        }

        @media (max-width: 991.98px) {
            .app-shell { display: block; }
            .app-sidebar { display: none; }
            .app-main { margin-left: 0; }
            .app-topbar, .app-content { padding-inline: 1rem; }
            .topbar-tools { gap: .5rem; }
            .topbar-action {
                width: 2.55rem;
                height: 2.55rem;
            }
            .user-chip {
                padding: .38rem .7rem .38rem .38rem;
            }
            .user-chip-name {
                max-width: 8rem;
            }
            .user-chip-role {
                display: none;
            }
            .topbar-signout {
                min-width: 0;
                min-height: 2.7rem;
                padding-inline: .9rem;
            }
            .account-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .panel-hero {
                padding: 1.2rem;
                border-radius: 26px;
            }
            .page-hero-actions,
            .page-toolbar-actions {
                width: 100%;
            }
            .page-summary-bar {
                align-items: flex-start;
            }
            .metric-value {
                font-size: 1.75rem;
            }
            .app-card .card-header,
            .app-card .card-body {
                padding: 1rem;
            }
        }

        @media (max-width: 767.98px) {
            .app-topbar {
                padding: .85rem;
            }
            .app-content {
                padding: .95rem .85rem 1.1rem;
            }
            .topbar-title {
                font-size: 1rem;
            }
            .topbar-subtitle {
                display: none;
            }
            .user-chip {
                display: none;
            }
            .account-mobile-trigger {
                display: inline-flex;
            }
            .topbar-signout .signout-label {
                display: none;
            }
            .btn-sm {
                min-height: 2.55rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .app-card,
            .panel-hero {
                border-radius: 22px;
            }
            .panel-hero {
                padding: 1rem;
            }
            .page-hero-shell,
            .page-toolbar,
            .page-summary-bar {
                flex-direction: column;
                align-items: flex-start;
            }
            .page-hero-actions,
            .page-toolbar-actions,
            .mobile-form-actions,
            .notification-actions,
            .filter-form-actions {
                width: 100%;
                flex-direction: column;
                gap: .55rem;
                padding-top: 0;
            }
            .incident-history-filter-form .filter-form-actions {
                padding-top: 0;
            }
            .page-hero-actions > *,
            .page-toolbar-actions > *,
            .mobile-form-actions > *,
            .notification-actions > *,
            .filter-form-actions > * {
                width: 100%;
            }
            .page-hero-actions .staff-data-actions,
            .page-toolbar-actions .staff-data-actions {
                width: 100%;
                justify-content: stretch;
            }
            .page-hero-actions .staff-data-actions .btn,
            .page-toolbar-actions .staff-data-actions .btn {
                width: 100%;
            }
            .metric-row {
                align-items: flex-start;
            }
            .metric-value {
                font-size: 1.55rem;
            }
            .metric-icon {
                width: 2.75rem;
                height: 2.75rem;
                border-radius: 16px;
                font-size: 1.05rem;
            }
            .dashboard-floating-panel {
                right: auto;
                left: 0;
                width: min(100%, calc(100vw - 3rem));
            }
            .dashboard-insight-link {
                width: 100%;
            }
            .dashboard-chart-top {
                align-items: flex-start;
            }
            .table-mobile-cards {
                min-width: 0 !important;
            }
            .table-mobile-cards thead {
                display: none;
            }
            .table-mobile-cards,
            .table-mobile-cards tbody,
            .table-mobile-cards tr,
            .table-mobile-cards td {
                display: block;
                width: 100%;
            }
            .table-mobile-cards tbody {
                display: grid;
                gap: .85rem;
                padding: .95rem 0;
            }
            .table-mobile-cards tbody tr {
                padding: 1rem;
                border: 1px solid rgba(217, 228, 240, 0.94);
                border-radius: 18px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
                box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
            }
            .table-mobile-cards tbody tr.empty-row {
                padding: 0;
                border: 0;
                background: transparent;
                box-shadow: none;
            }
            .table-mobile-cards td {
                padding: .32rem 0 !important;
                border: 0 !important;
                white-space: normal;
            }
            .table-mobile-cards td::before {
                content: attr(data-label);
                display: block;
                margin-bottom: .14rem;
                color: #64748b;
                font-size: .71rem;
                font-weight: 800;
                letter-spacing: .08em;
                text-transform: uppercase;
            }
            .table-mobile-cards tbody tr.empty-row td {
                padding: 1rem !important;
                text-align: center;
            }
            .table-mobile-cards tbody tr.empty-row td::before {
                display: none;
            }
            .table-mobile-cards td[data-label="Actions"] .btn,
            .table-mobile-cards td .d-flex .btn,
            .table-mobile-cards td .flex-column .btn,
            .table-mobile-cards td .notification-actions .btn {
                width: 100%;
            }
            .table-mobile-cards td .d-flex,
            .table-mobile-cards td .flex-column {
                width: 100%;
            }
            .mobile-setting-toggle {
                flex-direction: column;
            }
            .offcanvas.account-offcanvas {
                width: 100%;
            }
            .account-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .guest-shell { padding: .35rem .55rem .85rem; }
            .guest-top {
                flex-direction: column;
                align-items: flex-start !important;
                gap: .75rem;
                padding: .8rem .9rem;
                border-radius: 22px;
            }
            .flash-popup-stack {
                top: .75rem;
                left: .75rem;
                right: .75rem;
                transform: none;
                width: auto;
            }
            .topbar-title { font-size: 1.1rem; }
            .topbar-subtitle { font-size: .84rem; }
            .offcanvas.offcanvas-start {
                width: min(92vw, 340px);
            }
            .offcanvas-body {
                padding: .85rem;
            }
            .mobile-nav-link {
                padding: .84rem .86rem;
            }
            .app-card .card-header,
            .app-card .card-body {
                padding: .95rem;
            }
        }

        .topbar-dropdown .dropdown-menu {
            inset: auto 0 auto auto !important;
            top: calc(100% + .8rem) !important;
            left: auto !important;
            right: 0 !important;
            transform: none !important;
            margin-top: 0;
            padding: .75rem;
            border: 1px solid rgba(217, 228, 240, 0.9);
            border-radius: 24px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(249, 245, 255, 0.98) 100%);
            box-shadow: 0 26px 54px rgba(15, 23, 42, 0.16);
            z-index: 1100;
        }
        .notification-dropdown-menu {
            width: min(92vw, 380px);
        }
        .account-dropdown-menu {
            width: min(88vw, 300px);
        }
        .notification-dropdown-menu.show {
            display: flex;
            flex-direction: column;
            gap: .8rem;
        }
        .account-dropdown-menu.show {
            display: grid;
            gap: .35rem;
        }
        .account-dropdown-hero {
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: .9rem;
            padding: .95rem;
            border-radius: 22px;
            color: #fff;
            background:
                radial-gradient(180px circle at 0% 0%, rgba(251, 191, 36, 0.22) 0%, transparent 48%),
                radial-gradient(220px circle at 100% 100%, rgba(216, 180, 254, 0.22) 0%, transparent 42%),
                linear-gradient(135deg, #4b0d63 0%, #7c3aed 54%, #a855f7 100%);
            box-shadow: 0 22px 42px rgba(91, 33, 182, 0.22);
        }
        .account-dropdown-hero::after {
            content: '';
            position: absolute;
            inset: auto -2rem -2rem auto;
            width: 6rem;
            height: 6rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
        }
        .account-dropdown-avatar {
            width: 3.4rem;
            height: 3.4rem;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 20px;
            color: #fff;
            font-size: 1rem;
            font-weight: 800;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
        }
        .account-dropdown-copy {
            position: relative;
            z-index: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: .16rem;
        }
        .account-dropdown-kicker {
            margin: 0;
            color: rgba(248, 250, 252, 0.76);
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .account-dropdown-name {
            margin: 0;
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            line-height: 1.15;
            color: #fff;
        }
        .account-dropdown-role {
            margin: 0;
            color: rgba(255, 255, 255, 0.84);
            font-size: .82rem;
            font-weight: 700;
        }
        .account-dropdown-email {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            padding: .22rem .52rem;
            border-radius: 999px;
            color: #fff;
            font-size: .7rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.14);
        }
        .dropdown-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: .1rem .15rem 0;
        }
        .dropdown-panel-actions {
            display: flex;
            align-items: center;
            gap: .5rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .dropdown-panel-form {
            margin: 0;
        }
        .dropdown-panel-eyebrow {
            margin: 0 0 .16rem;
            color: var(--text-500);
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .dropdown-panel-title {
            margin: 0;
            color: var(--text-900);
            font-family: 'Manrope', sans-serif;
            font-size: 1rem;
            font-weight: 800;
        }
        .dropdown-panel-link {
            color: var(--brand-700);
            font-size: .84rem;
            font-weight: 800;
            text-decoration: none;
        }
        .dropdown-panel-button {
            min-height: 2rem;
            padding: .32rem .7rem;
            border: 1px solid rgba(248, 113, 113, 0.22);
            border-radius: 999px;
            color: #b91c1c;
            font-size: .78rem;
            font-weight: 800;
            background: linear-gradient(135deg, rgba(254, 242, 242, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        .dropdown-panel-link:hover {
            color: var(--brand-900);
        }
        .dropdown-panel-button:hover:not(:disabled),
        .dropdown-panel-button:focus-visible:not(:disabled) {
            transform: translateY(-1px);
            border-color: rgba(239, 68, 68, 0.34);
            box-shadow: 0 14px 24px rgba(185, 28, 28, 0.1);
        }
        .dropdown-panel-button:disabled {
            opacity: .58;
            cursor: not-allowed;
            box-shadow: none;
        }
        .notification-dropdown-list {
            display: grid;
            gap: .55rem;
        }
        .notification-dropdown-form,
        .account-menu-form {
            margin: 0;
            display: block;
        }
        .notification-dropdown-item,
        .account-menu-item {
            width: 100%;
            display: flex;
            text-decoration: none;
            cursor: pointer;
            text-align: left;
        }
        .notification-dropdown-item {
            align-items: flex-start;
            gap: .8rem;
            padding: .88rem .92rem;
            border: 1px solid rgba(217, 228, 240, 0.9);
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.78);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
        }
        .notification-dropdown-item:hover,
        .notification-dropdown-item:focus-visible,
        .account-menu-item:hover,
        .account-menu-item:focus-visible {
            transform: translateY(-1px);
            border-color: rgba(168, 85, 247, 0.24);
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
        }
        .notification-dropdown-item.is-unread {
            background: linear-gradient(135deg, rgba(250, 245, 255, 0.98) 0%, rgba(241, 250, 255, 0.98) 100%);
            border-color: rgba(168, 85, 247, 0.24);
        }
        .notification-dropdown-icon,
        .account-menu-icon {
            width: 2.3rem;
            height: 2.3rem;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            color: var(--brand-700);
            background: linear-gradient(135deg, rgba(216, 180, 254, 0.38) 0%, rgba(248, 250, 255, 0.94) 100%);
        }
        .notification-dropdown-copy {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: .2rem;
        }
        .notification-dropdown-title {
            color: var(--text-900);
            font-size: .92rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .notification-dropdown-message {
            color: var(--text-500);
            font-size: .84rem;
            line-height: 1.45;
        }
        .notification-dropdown-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            color: #64748b;
            font-size: .72rem;
            font-weight: 700;
        }
        .dropdown-empty-state {
            padding: 1rem;
            border-radius: 18px;
            color: var(--text-500);
            font-size: .9rem;
            line-height: 1.55;
            text-align: center;
            background: rgba(255, 255, 255, 0.68);
            border: 1px dashed rgba(217, 228, 240, 0.95);
        }
        .account-menu-item {
            align-items: center;
            gap: .8rem;
            min-height: 3.25rem;
            padding: .75rem .85rem;
            border: 1px solid rgba(217, 228, 240, 0.8);
            border-radius: 18px;
            color: var(--text-900);
            background: rgba(255, 255, 255, 0.72);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
        }
        .account-menu-item button,
        .account-menu-item a {
            color: inherit;
        }
        .account-menu-copy {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: .12rem;
        }
        .account-menu-label {
            font-size: .95rem;
            font-weight: 800;
            line-height: 1.2;
        }
        .account-menu-help {
            color: var(--text-500);
            font-size: .75rem;
            line-height: 1.4;
        }
        .account-menu-item-profile {
            background: linear-gradient(135deg, rgba(245, 243, 255, 0.98) 0%, rgba(238, 242, 255, 0.94) 100%);
            border-color: rgba(167, 139, 250, 0.3);
        }
        .account-menu-item-profile .account-menu-icon {
            color: #6d28d9;
            background: linear-gradient(135deg, rgba(221, 214, 254, 0.94) 0%, rgba(243, 232, 255, 0.98) 100%);
        }
        .account-menu-item-security {
            background: linear-gradient(135deg, rgba(255, 247, 237, 0.98) 0%, rgba(254, 242, 242, 0.94) 100%);
            border-color: rgba(251, 146, 60, 0.28);
        }
        .account-menu-item-security .account-menu-icon {
            color: #c2410c;
            background: linear-gradient(135deg, rgba(254, 215, 170, 0.94) 0%, rgba(255, 237, 213, 0.98) 100%);
        }
        .account-menu-item-theme {
            background: linear-gradient(135deg, rgba(236, 254, 255, 0.98) 0%, rgba(224, 242, 254, 0.94) 100%);
            border-color: rgba(56, 189, 248, 0.26);
        }
        .account-menu-item-theme .account-menu-icon {
            color: #0369a1;
            background: linear-gradient(135deg, rgba(186, 230, 253, 0.94) 0%, rgba(224, 242, 254, 0.98) 100%);
        }
        .account-theme-toggle {
            border: none;
            background: transparent;
            text-align: left;
        }
        .account-menu-form {
            padding-top: .35rem;
            border-top: 1px solid rgba(217, 228, 240, 0.82);
        }
        .account-menu-item-danger {
            color: #b91c1c;
            background: linear-gradient(135deg, rgba(254, 242, 242, 0.99) 0%, rgba(255, 255, 255, 0.96) 100%);
            border-color: rgba(248, 113, 113, 0.24);
        }
        .account-menu-item-danger .account-menu-icon {
            color: #b91c1c;
            background: linear-gradient(135deg, rgba(254, 226, 226, 0.98) 0%, rgba(254, 242, 242, 0.98) 100%);
        }

        @media (max-width: 767.98px) {
            .profile-dropdown .user-chip {
                display: inline-flex !important;
                justify-content: center;
                padding: .34rem;
                width: 2.75rem;
                height: 2.75rem;
            }
            .profile-dropdown .user-chip-copy,
            .profile-dropdown .user-chip-caret {
                display: none;
            }
            .profile-dropdown .user-chip-avatar {
                width: 2rem;
                height: 2rem;
            }
            .notification-dropdown-menu,
            .account-dropdown-menu {
                width: min(92vw, 360px);
            }
            .dropdown-panel-head {
                align-items: flex-start;
                flex-direction: column;
            }
            .dropdown-panel-actions {
                width: 100%;
                justify-content: space-between;
            }
        }

        @media (max-width: 575.98px) {
            html,
            body {
                width: 100%;
                max-width: 100%;
            }

            body {
                overflow-x: clip;
            }

            .app-main,
            .app-content,
            .content-wrap,
            .guest-shell,
            .guest-shell > main.container {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            .guest-shell > main.container {
                padding-inline: 0 !important;
            }

            .app-topbar {
                padding: .72rem .68rem;
            }

            .app-topbar > .d-flex,
            .app-topbar > .d-flex > .d-flex:first-child,
            .app-topbar > .d-flex > .d-flex:first-child > div {
                min-width: 0;
            }

            .app-topbar > .d-flex > .d-flex:first-child {
                flex: 1 1 auto;
            }

            .topbar-tools {
                flex: 0 0 auto;
                gap: .42rem;
            }

            .topbar-title {
                max-width: 100%;
                font-size: .96rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .topbar-action,
            .profile-dropdown .user-chip {
                width: 2.5rem;
                height: 2.5rem;
            }

            .app-content {
                padding: .75rem .68rem 1rem;
            }

            .content-wrap > .row,
            .app-content .row,
            .guest-shell .row {
                --bs-gutter-x: 0;
            }

            .app-content .row > *,
            .app-card,
            .panel-hero,
            .student-stat-card,
            .profile-photo-card,
            .table-responsive,
            .list-group-item,
            .modal-content,
            .offcanvas,
            .form-control,
            .form-select,
            .btn,
            .badge {
                min-width: 0;
                max-width: 100%;
            }

            .app-card,
            .panel-hero,
            .student-stat-card,
            .profile-photo-card {
                border-radius: 18px;
            }

            .app-card .card-body.p-4,
            .app-card .card-body.p-md-5 {
                padding: .95rem !important;
            }

            .panel-hero {
                padding: .9rem;
            }

            .page-title,
            .topbar-title,
            .text-muted-soft,
            .card-title,
            .card-body,
            .list-group-item,
            .table-mobile-cards td,
            .badge,
            .btn,
            p,
            dd {
                overflow-wrap: anywhere;
            }

            .badge,
            .btn {
                white-space: normal;
            }

            .table-responsive {
                overflow-x: visible;
            }

            .table-mobile-cards tbody {
                gap: .68rem;
                padding: .65rem 0;
            }

            .table-mobile-cards tbody tr {
                padding: .82rem;
                border-radius: 16px;
            }

            .notification-item > .d-flex {
                flex-direction: column;
                align-items: stretch !important;
            }

            .notification-actions,
            .notification-actions form {
                width: 100%;
            }

            .notification-actions .btn {
                width: 100%;
            }

            .pagination {
                flex-wrap: wrap;
                justify-content: center;
                gap: .25rem;
            }

            .pagination .page-link {
                min-width: 2.35rem;
                text-align: center;
            }

            .modal-dialog {
                max-width: calc(100% - 1rem);
                margin: .5rem;
            }

            .topbar-dropdown .dropdown-menu {
                position: fixed !important;
                inset: calc(4.1rem + env(safe-area-inset-top)) .65rem auto .65rem !important;
                width: auto !important;
                max-width: none !important;
                max-height: calc(100dvh - 4.85rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                overflow-y: auto;
                transform: none !important;
                border-radius: 18px;
            }

            .notification-dropdown-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: .12rem;
            }

            .account-dropdown-email {
                width: 100%;
                white-space: normal;
            }
        }

        @media (max-width: 360px) {
            .app-topbar {
                padding-inline: .55rem;
            }

            .app-content {
                padding-inline: .55rem;
            }

            .app-card .card-header,
            .app-card .card-body,
            .app-card .card-body.p-4,
            .app-card .card-body.p-md-5,
            .panel-hero {
                padding: .78rem !important;
            }

            .topbar-action,
            .profile-dropdown .user-chip {
                width: 2.35rem;
                height: 2.35rem;
            }
        }

        html[data-theme="dark"] {
            color-scheme: dark;
        }
        html[data-theme="dark"] body {
            color: #e2e8f0;
            background:
                radial-gradient(900px circle at 0% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 52%),
                radial-gradient(720px circle at 100% 0%, rgba(79, 70, 229, 0.16) 0%, transparent 48%),
                radial-gradient(560px circle at 50% 100%, rgba(14, 165, 233, 0.14) 0%, transparent 44%),
                linear-gradient(180deg, #020617 0%, #0f172a 52%, #111827 100%);
        }
        html[data-theme="dark"] .app-sidebar {
            color: #d7e4f2;
            background:
                radial-gradient(460px circle at 0% 0%, rgba(56, 189, 248, 0.18) 0%, transparent 50%),
                radial-gradient(360px circle at 100% 100%, rgba(129, 140, 248, 0.16) 0%, transparent 44%),
                linear-gradient(180deg, #020617 0%, #0f172a 58%, #111827 100%);
        }
        html[data-theme="dark"] .sidebar-role,
        html[data-theme="dark"] .sidebar-support {
            border-color: rgba(148, 163, 184, 0.16);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.64) 100%);
        }
        html[data-theme="dark"] .sidebar-link {
            color: #cbd5e1;
        }
        html[data-theme="dark"] .sidebar-link:hover,
        html[data-theme="dark"] .mobile-nav-link:hover {
            color: #f8fafc;
            background: rgba(148, 163, 184, 0.12);
            border-color: rgba(148, 163, 184, 0.16);
        }
        html[data-theme="dark"] .sidebar-link.active,
        html[data-theme="dark"] .mobile-nav-link.active {
            color: #f8fafc;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(49, 46, 129, 0.9) 100%);
            border-color: rgba(99, 102, 241, 0.28);
            box-shadow: 0 18px 30px rgba(2, 6, 23, 0.34);
        }
        html[data-theme="dark"] .mobile-nav-link {
            color: #e2e8f0;
            background: rgba(15, 23, 42, 0.82);
            border-color: rgba(71, 85, 105, 0.58);
        }
        html[data-theme="dark"] .mobile-nav-link i,
        html[data-theme="dark"] .dropdown-panel-link,
        html[data-theme="dark"] .notification-dropdown-icon,
        html[data-theme="dark"] .account-menu-icon {
            color: #7dd3fc;
        }
        html[data-theme="dark"] .app-topbar {
            background: rgba(2, 6, 23, 0.74);
            border-bottom-color: rgba(71, 85, 105, 0.4);
        }
        html[data-theme="dark"] .topbar-title,
        html[data-theme="dark"] .page-title,
        html[data-theme="dark"] .offcanvas-title,
        html[data-theme="dark"] .dropdown-panel-title,
        html[data-theme="dark"] .notification-dropdown-title,
        html[data-theme="dark"] .account-menu-label,
        html[data-theme="dark"] .metric-value,
        html[data-theme="dark"] .profile-photo-title,
        html[data-theme="dark"] .list-group-item strong,
        html[data-theme="dark"] .table,
        html[data-theme="dark"] .table td,
        html[data-theme="dark"] .table th {
            color: #f8fafc;
        }
        html[data-theme="dark"] .topbar-subtitle,
        html[data-theme="dark"] .text-muted-soft,
        html[data-theme="dark"] .metric-label,
        html[data-theme="dark"] .dashboard-insight-description,
        html[data-theme="dark"] .student-stat-meta,
        html[data-theme="dark"] .field-description,
        html[data-theme="dark"] .notification-dropdown-message,
        html[data-theme="dark"] .notification-dropdown-meta,
        html[data-theme="dark"] .dropdown-empty-state,
        html[data-theme="dark"] .table thead th,
        html[data-theme="dark"] .user-chip-role,
        html[data-theme="dark"] .profile-photo-copy p {
            color: #94a3b8 !important;
        }
        html[data-theme="dark"] .app-card,
        html[data-theme="dark"] .dashboard-stat-button,
        html[data-theme="dark"] .dashboard-floating-panel,
        html[data-theme="dark"] .student-stat-card,
        html[data-theme="dark"] .profile-photo-card,
        html[data-theme="dark"] .table-mobile-cards tbody tr,
        html[data-theme="dark"] .notification-item {
            border-color: rgba(71, 85, 105, 0.55);
            background:
                radial-gradient(420px circle at 0% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 48%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%);
            box-shadow: 0 22px 48px rgba(2, 6, 23, 0.36), inset 0 1px 0 rgba(148, 163, 184, 0.08);
        }
        html[data-theme="dark"] .app-card:hover,
        html[data-theme="dark"] .dashboard-stat-button:hover,
        html[data-theme="dark"] .dashboard-stat-shell:hover .dashboard-stat-button,
        html[data-theme="dark"] .dashboard-stat-shell:focus-within .dashboard-stat-button,
        html[data-theme="dark"] .student-stat-card:hover,
        html[data-theme="dark"] .profile-photo-card:hover {
            border-color: rgba(96, 165, 250, 0.3);
            box-shadow: 0 24px 52px rgba(2, 6, 23, 0.42), 0 0 0 1px rgba(56, 189, 248, 0.08);
        }
        html[data-theme="dark"] .dashboard-insight-kicker,
        html[data-theme="dark"] .dashboard-insight-value {
            color: #7dd3fc;
        }
        html[data-theme="dark"] .dashboard-insight-title,
        html[data-theme="dark"] .dashboard-insight-share,
        html[data-theme="dark"] .dashboard-chart-top {
            color: #e5eefb;
        }
        html[data-theme="dark"] .dashboard-chart-item {
            color: #e2e8f0;
            border-color: rgba(71, 85, 105, 0.34);
            background: rgba(15, 23, 42, 0.58);
        }
        html[data-theme="dark"] .dashboard-chart-item.active {
            border-color: rgba(96, 165, 250, 0.28);
            background: rgba(30, 41, 59, 0.84);
        }
        html[data-theme="dark"] .dashboard-chart-track {
            background: rgba(71, 85, 105, 0.64);
        }
        html[data-theme="dark"] .app-card .card-header,
        html[data-theme="dark"] .card-header.bg-white {
            color: #f8fafc;
            background: transparent !important;
            border-bottom-color: rgba(71, 85, 105, 0.46);
        }
        html[data-theme="dark"] .student-stat-card::before {
            background: linear-gradient(180deg, #38bdf8 0%, #818cf8 100%);
        }
        html[data-theme="dark"] .panel-hero {
            background:
                radial-gradient(440px circle at 0% 0%, rgba(56, 189, 248, 0.22) 0%, transparent 48%),
                radial-gradient(320px circle at 100% 100%, rgba(129, 140, 248, 0.2) 0%, transparent 44%),
                linear-gradient(135deg, rgba(2, 6, 23, 0.97) 0%, rgba(15, 23, 42, 0.98) 52%, rgba(30, 64, 175, 0.88) 100%);
            border: 1px solid rgba(96, 165, 250, 0.14);
            box-shadow: 0 24px 54px rgba(2, 6, 23, 0.4);
        }
        html[data-theme="dark"] .page-hero-actions .badge.text-bg-light.border,
        html[data-theme="dark"] .badge.text-bg-light.border {
            color: #dbeafe !important;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.92) 100%) !important;
            border-color: rgba(96, 165, 250, 0.24) !important;
            box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
        }
        html[data-theme="dark"] .form-label,
        html[data-theme="dark"] .form-check-label,
        html[data-theme="dark"] .col-form-label,
        html[data-theme="dark"] .small,
        html[data-theme="dark"] .profile-photo-copy strong,
        html[data-theme="dark"] .profile-photo-copy h3,
        html[data-theme="dark"] .app-card p strong {
            color: #e5eefb;
        }
        html[data-theme="dark"] .border-top,
        html[data-theme="dark"] .border-bottom {
            border-color: rgba(71, 85, 105, 0.55) !important;
        }
        html[data-theme="dark"] .profile-photo-card {
            background:
                radial-gradient(260px circle at 0% 0%, rgba(96, 165, 250, 0.1) 0%, transparent 44%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(17, 24, 39, 0.94) 100%);
        }
        html[data-theme="dark"] .profile-photo-preview {
            border-color: rgba(96, 165, 250, 0.24);
            background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 48%, #06b6d4 100%);
            box-shadow: 0 18px 30px rgba(29, 78, 216, 0.26);
        }
        html[data-theme="dark"] .topbar-action,
        html[data-theme="dark"] .user-chip,
        html[data-theme="dark"] .btn-outline-secondary,
        html[data-theme="dark"] .btn-outline-primary,
        html[data-theme="dark"] .btn-outline-danger {
            color: #e2e8f0;
            border-color: rgba(71, 85, 105, 0.6);
            background: rgba(15, 23, 42, 0.8);
        }
        html[data-theme="dark"] .topbar-action:hover,
        html[data-theme="dark"] .topbar-action:focus-visible,
        html[data-theme="dark"] .user-chip-button:hover,
        html[data-theme="dark"] .user-chip-button:focus-visible,
        html[data-theme="dark"] .btn-outline-secondary:hover,
        html[data-theme="dark"] .btn-outline-secondary:focus,
        html[data-theme="dark"] .btn-outline-primary:hover,
        html[data-theme="dark"] .btn-outline-primary:focus,
        html[data-theme="dark"] .btn-outline-danger:hover,
        html[data-theme="dark"] .btn-outline-danger:focus {
            color: #f8fafc;
            border-color: rgba(125, 211, 252, 0.4);
            background: rgba(15, 23, 42, 0.96);
            box-shadow: 0 16px 30px rgba(2, 6, 23, 0.28);
        }
        html[data-theme="dark"] .topbar-signout {
            color: #fca5a5;
        }
        html[data-theme="dark"] .topbar-signout:hover,
        html[data-theme="dark"] .topbar-signout:focus {
            color: #fff;
        }
        html[data-theme="dark"] .offcanvas.offcanvas-start,
        html[data-theme="dark"] .topbar-dropdown .dropdown-menu {
            border-color: rgba(71, 85, 105, 0.62);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.99) 0%, rgba(17, 24, 39, 0.98) 100%);
            box-shadow: 0 26px 54px rgba(2, 6, 23, 0.44);
        }
        html[data-theme="dark"] .notification-dropdown-item,
        html[data-theme="dark"] .dropdown-empty-state {
            border-color: rgba(71, 85, 105, 0.55);
            background: rgba(15, 23, 42, 0.78);
        }
        html[data-theme="dark"] .notification-dropdown-item.is-unread {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 64, 175, 0.22) 100%);
            border-color: rgba(96, 165, 250, 0.32);
        }
        html[data-theme="dark"] .notification-dropdown-item:hover,
        html[data-theme="dark"] .notification-dropdown-item:focus-visible,
        html[data-theme="dark"] .account-menu-item:hover,
        html[data-theme="dark"] .account-menu-item:focus-visible {
            background: rgba(30, 41, 59, 0.95);
            border-color: rgba(96, 165, 250, 0.34);
            box-shadow: 0 16px 30px rgba(2, 6, 23, 0.3);
        }
        html[data-theme="dark"] .notification-dropdown-icon,
        html[data-theme="dark"] .account-menu-icon {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(30, 64, 175, 0.18) 100%);
        }
        html[data-theme="dark"] .dropdown-panel-button {
            color: #fca5a5;
            border-color: rgba(248, 113, 113, 0.24);
            background: linear-gradient(135deg, rgba(69, 10, 10, 0.86) 0%, rgba(30, 41, 59, 0.94) 100%);
        }
        html[data-theme="dark"] .dropdown-panel-button:hover:not(:disabled),
        html[data-theme="dark"] .dropdown-panel-button:focus-visible:not(:disabled) {
            border-color: rgba(252, 165, 165, 0.34);
            box-shadow: 0 14px 24px rgba(127, 29, 29, 0.16);
        }
        html[data-theme="dark"] .account-dropdown-hero {
            background:
                radial-gradient(180px circle at 0% 0%, rgba(56, 189, 248, 0.22) 0%, transparent 48%),
                radial-gradient(220px circle at 100% 100%, rgba(129, 140, 248, 0.22) 0%, transparent 42%),
                linear-gradient(135deg, #0f172a 0%, #312e81 56%, #2563eb 100%);
            box-shadow: 0 24px 46px rgba(2, 6, 23, 0.34);
        }
        html[data-theme="dark"] .account-dropdown-email {
            background: rgba(15, 23, 42, 0.28);
            border-color: rgba(255, 255, 255, 0.14);
        }
        html[data-theme="dark"] .account-menu-item {
            border-color: rgba(71, 85, 105, 0.55);
            background: rgba(15, 23, 42, 0.78);
        }
        html[data-theme="dark"] .account-menu-help {
            color: #94a3b8;
        }
        html[data-theme="dark"] .account-menu-item-profile {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(76, 29, 149, 0.28) 100%);
            border-color: rgba(167, 139, 250, 0.24);
        }
        html[data-theme="dark"] .account-menu-item-profile .account-menu-icon {
            color: #c4b5fd;
            background: linear-gradient(135deg, rgba(76, 29, 149, 0.46) 0%, rgba(30, 41, 59, 0.98) 100%);
        }
        html[data-theme="dark"] .account-menu-item-security {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(154, 52, 18, 0.24) 100%);
            border-color: rgba(251, 146, 60, 0.24);
        }
        html[data-theme="dark"] .account-menu-item-security .account-menu-icon {
            color: #fdba74;
            background: linear-gradient(135deg, rgba(154, 52, 18, 0.4) 0%, rgba(30, 41, 59, 0.98) 100%);
        }
        html[data-theme="dark"] .account-menu-item-theme {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(8, 145, 178, 0.24) 100%);
            border-color: rgba(56, 189, 248, 0.24);
        }
        html[data-theme="dark"] .account-menu-item-theme .account-menu-icon {
            color: #7dd3fc;
            background: linear-gradient(135deg, rgba(8, 145, 178, 0.36) 0%, rgba(30, 41, 59, 0.98) 100%);
        }
        html[data-theme="dark"] .account-menu-item-danger {
            color: #fca5a5;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(127, 29, 29, 0.24) 100%);
            border-color: rgba(248, 113, 113, 0.24);
        }
        html[data-theme="dark"] .account-menu-form {
            border-top-color: rgba(71, 85, 105, 0.58);
        }
        html[data-theme="dark"] .account-menu-item-danger .account-menu-icon {
            color: #fca5a5;
            background: linear-gradient(135deg, rgba(69, 10, 10, 0.96) 0%, rgba(127, 29, 29, 0.24) 100%);
        }
        html[data-theme="dark"] .form-control,
        html[data-theme="dark"] .form-select {
            color: #e2e8f0;
            background: rgba(15, 23, 42, 0.84);
            border-color: rgba(71, 85, 105, 0.62);
            box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
        }
        html[data-theme="dark"] .form-control::placeholder {
            color: #64748b;
        }
        html[data-theme="dark"] .form-control:focus,
        html[data-theme="dark"] .form-select:focus {
            color: #f8fafc;
            background: rgba(15, 23, 42, 0.92);
            border-color: rgba(96, 165, 250, 0.45);
            box-shadow: 0 0 0 .2rem rgba(96, 165, 250, 0.16), 0 12px 24px rgba(2, 6, 23, 0.18);
        }
        html[data-theme="dark"] .form-check-input {
            background-color: rgba(15, 23, 42, 0.92);
            border-color: rgba(96, 165, 250, 0.42);
        }
        html[data-theme="dark"] .form-check-input:checked {
            background-color: #38bdf8;
            border-color: #38bdf8;
        }
        html[data-theme="dark"] .form-check-input:focus {
            box-shadow: 0 0 0 .2rem rgba(56, 189, 248, 0.18);
        }
        html[data-theme="dark"] .form-control[type="file"]::file-selector-button {
            color: #eff6ff;
            border: 0;
            border-right: 1px solid rgba(71, 85, 105, 0.55);
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.92) 0%, rgba(8, 145, 178, 0.84) 100%);
        }
        html[data-theme="dark"] .btn-philcst,
        html[data-theme="dark"] .sidebar-quick {
            color: #eff6ff;
            background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #06b6d4 100%);
            box-shadow: 0 18px 34px rgba(29, 78, 216, 0.24);
        }
        html[data-theme="dark"] .btn-philcst:hover,
        html[data-theme="dark"] .btn-philcst:focus,
        html[data-theme="dark"] .sidebar-quick:hover {
            color: #fff;
            box-shadow: 0 22px 40px rgba(29, 78, 216, 0.3);
        }
        html[data-theme="dark"] .metric-icon.navy {
            background: linear-gradient(135deg, #1d4ed8, #38bdf8);
        }
        html[data-theme="dark"] .metric-icon.amber {
            background: linear-gradient(135deg, #c2410c, #f59e0b);
        }
        html[data-theme="dark"] .metric-icon.red {
            background: linear-gradient(135deg, #dc2626, #fb7185);
        }
        html[data-theme="dark"] .metric-icon.green {
            background: linear-gradient(135deg, #0f766e, #14b8a6);
        }
        html[data-theme="dark"] .flash-popup {
            box-shadow: 0 24px 52px rgba(2, 6, 23, 0.32);
        }
        html[data-theme="dark"] .flash-popup-success {
            --flash-border: rgba(16, 185, 129, 0.24);
            --flash-background: linear-gradient(180deg, rgba(2, 44, 34, 0.98) 0%, rgba(6, 78, 59, 0.94) 100%);
            --flash-icon-color: #6ee7b7;
            --flash-icon-background: rgba(16, 185, 129, 0.18);
            --flash-title-color: #d1fae5;
            --flash-copy-color: #a7f3d0;
        }
        html[data-theme="dark"] .flash-popup-error {
            --flash-border: rgba(248, 113, 113, 0.22);
            --flash-background: linear-gradient(180deg, rgba(69, 10, 10, 0.98) 0%, rgba(127, 29, 29, 0.94) 100%);
            --flash-icon-color: #fca5a5;
            --flash-icon-background: rgba(248, 113, 113, 0.18);
            --flash-title-color: #fee2e2;
            --flash-copy-color: #fecaca;
        }
        html[data-theme="dark"] .flash-popup-warning {
            --flash-border: rgba(251, 191, 36, 0.24);
            --flash-background: linear-gradient(180deg, rgba(69, 26, 3, 0.98) 0%, rgba(146, 64, 14, 0.94) 100%);
            --flash-icon-color: #fde68a;
            --flash-icon-background: rgba(251, 191, 36, 0.18);
            --flash-title-color: #fef3c7;
            --flash-copy-color: #fde68a;
        }
        html[data-theme="dark"] .flash-popup-info {
            --flash-border: rgba(96, 165, 250, 0.24);
            --flash-background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 64, 175, 0.9) 100%);
            --flash-icon-color: #93c5fd;
            --flash-icon-background: rgba(96, 165, 250, 0.18);
            --flash-title-color: #dbeafe;
            --flash-copy-color: #bfdbfe;
        }
        html[data-theme="dark"] .table > :not(caption) > * > *,
        html[data-theme="dark"] .list-group-item {
            border-bottom-color: rgba(71, 85, 105, 0.46);
        }
        html[data-theme="dark"] .list-group-item.bg-light-subtle {
            background: rgba(30, 41, 59, 0.72) !important;
        }
        html[data-theme="dark"] .table tbody tr:hover {
            background: rgba(30, 41, 59, 0.62);
        }
        html[data-theme="dark"] .table-mobile-cards td::before {
            color: #94a3b8;
        }
        html[data-theme="dark"] .pagination .page-link {
            color: #c4b5fd;
            border-color: rgba(71, 85, 105, 0.62);
            background: rgba(15, 23, 42, 0.84);
        }
        html[data-theme="dark"] .pagination .page-item.disabled .page-link {
            color: #64748b;
            background: rgba(15, 23, 42, 0.72);
        }
        html[data-theme="dark"] .btn-close {
            filter: invert(1) grayscale(100%);
            opacity: .76;
        }

        /* Mobile fit polish: keep every authenticated page inside the phone viewport. */
        @media (max-width: 991.98px) {
            html,
            body,
            .app-shell,
            .app-main,
            .app-content,
            .content-wrap {
                min-width: 0;
                max-width: 100%;
            }

            body {
                overflow-x: clip;
            }

            .app-topbar {
                position: sticky;
                top: 0;
                z-index: 1020;
                padding-top: calc(.72rem + env(safe-area-inset-top));
                backdrop-filter: blur(14px);
            }

            .app-topbar > .d-flex {
                align-items: center !important;
                min-width: 0;
            }

            .app-topbar > .d-flex > .d-flex:first-child {
                flex: 1 1 auto;
                min-width: 0;
            }

            .app-topbar > .d-flex > .d-flex:first-child > div {
                min-width: 0;
            }

            .topbar-title {
                display: block;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .topbar-tools {
                flex: 0 0 auto;
                min-width: 0;
            }

            .profile-dropdown .user-chip {
                display: inline-flex !important;
                justify-content: center;
                width: 2.65rem;
                height: 2.65rem;
                padding: .32rem;
            }

            .profile-dropdown .user-chip-copy,
            .profile-dropdown .user-chip-caret {
                display: none !important;
            }

            .profile-dropdown .user-chip-avatar {
                width: 2rem;
                height: 2rem;
            }

            .content-wrap > *,
            .app-card,
            .panel-hero,
            .page-summary-bar,
            .page-toolbar,
            .page-hero-shell,
            .table-responsive,
            .list-group,
            .list-group-item,
            .modal-content,
            .offcanvas,
            form,
            fieldset {
                min-width: 0;
                max-width: 100%;
            }

            .app-content .row,
            .content-wrap > .row {
                --bs-gutter-x: 1rem;
                --bs-gutter-y: 1rem;
            }
        }

        @media (max-width: 767.98px) {
            .app-content {
                padding-bottom: calc(1rem + env(safe-area-inset-bottom));
            }

            .app-card,
            .panel-hero,
            .page-summary-bar {
                box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
            }

            .app-card .card-header,
            .app-card .card-body {
                padding: .95rem;
            }

            .page-summary-bar,
            .page-toolbar,
            .page-hero-shell {
                gap: .75rem;
            }

            .page-summary-bar > *,
            .page-toolbar > *,
            .page-hero-shell > * {
                min-width: 0;
                max-width: 100%;
            }

            .page-toolbar-actions,
            .page-hero-actions,
            .filter-form-actions,
            .mobile-form-actions,
            .notification-actions,
            .user-management-actions,
            .staff-data-actions {
                width: 100%;
                display: grid !important;
                grid-template-columns: 1fr;
                gap: .55rem;
            }

            .page-toolbar-actions > *,
            .page-hero-actions > *,
            .filter-form-actions > *,
            .mobile-form-actions > *,
            .notification-actions > *,
            .user-management-actions > *,
            .staff-data-actions > * {
                width: 100%;
                min-width: 0;
            }

            .form-control,
            .form-select,
            .select-modal-trigger,
            .btn {
                max-width: 100%;
            }

            .form-control,
            .form-select,
            .select-modal-trigger {
                min-height: 2.75rem;
            }

            .input-group {
                flex-wrap: nowrap;
                min-width: 0;
            }

            .input-group > .form-control,
            .input-group > .form-select {
                min-width: 0;
            }

            .badge,
            .btn,
            .dropdown-item,
            .list-group-item,
            .table-mobile-cards td,
            .card-body,
            .card-header,
            p,
            dd {
                overflow-wrap: anywhere;
            }

            .dashboard-metrics .row {
                --bs-gutter-x: .75rem;
                --bs-gutter-y: .75rem;
            }

            .dashboard-stat-button .card-body {
                padding: .9rem;
            }

            .metric-row {
                gap: .75rem;
            }

            .metric-label {
                font-size: .82rem;
                line-height: 1.2;
            }

            .metric-value {
                font-size: 1.5rem;
            }

            .metric-icon {
                width: 2.55rem;
                height: 2.55rem;
                border-radius: 14px;
                font-size: 1rem;
            }

            .dashboard-floating-panel {
                position: fixed;
                inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom)) .75rem;
                width: auto;
                max-height: min(70dvh, 28rem);
                overflow-y: auto;
                transform: translateY(8px);
            }

            .dashboard-stat-shell:hover .dashboard-floating-panel,
            .dashboard-stat-shell:focus-within .dashboard-floating-panel {
                transform: translateY(0);
            }

            .table-responsive {
                border-radius: inherit;
                overflow-x: visible;
            }

            .table-mobile-cards tbody tr {
                width: 100%;
                min-width: 0;
            }

            .table-mobile-cards td {
                min-width: 0;
                max-width: 100%;
            }

            .pagination {
                gap: .25rem;
            }

            .pagination .page-link {
                min-width: 2.25rem;
                padding: .48rem .65rem;
            }

            .topbar-dropdown .dropdown-menu {
                position: fixed !important;
                inset: calc(4.15rem + env(safe-area-inset-top)) .65rem auto .65rem !important;
                width: auto !important;
                max-width: none !important;
                max-height: calc(100dvh - 4.85rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                overflow-y: auto;
                border-radius: 18px;
                transform: none !important;
            }
        }

        @media (max-width: 575.98px) {
            .app-topbar {
                padding-inline: .65rem;
            }

            .app-content {
                padding-inline: .65rem;
            }

            .app-content .row,
            .content-wrap > .row,
            .guest-shell .row {
                --bs-gutter-x: 0;
            }

            .app-card,
            .panel-hero,
            .page-summary-bar,
            .modal-content {
                border-radius: 16px;
            }

            .topbar-title {
                font-size: .95rem;
            }

            .topbar-action,
            .profile-dropdown .user-chip {
                width: 2.45rem;
                height: 2.45rem;
            }

            .profile-dropdown .user-chip-avatar {
                width: 1.86rem;
                height: 1.86rem;
            }

            .dashboard-stat-button .card-body {
                padding: .82rem;
            }

            .metric-row {
                align-items: center;
            }

            .metric-label {
                max-width: 9.5rem;
            }

            .table-mobile-cards tbody {
                gap: .65rem;
                padding-block: .65rem;
            }

            .table-mobile-cards tbody tr {
                padding: .78rem;
                border-radius: 14px;
            }

            .modal-dialog {
                margin: .5rem;
                max-width: calc(100% - 1rem);
            }

            .modal-footer {
                align-items: stretch;
                flex-direction: column;
            }

            .modal-footer .btn {
                width: 100%;
            }
        }

        @media (max-width: 360px) {
            .app-topbar {
                padding-inline: .5rem;
            }

            .app-content {
                padding-inline: .5rem;
            }

            .app-card .card-header,
            .app-card .card-body {
                padding: .78rem;
            }

            .metric-label {
                max-width: 8rem;
            }
        }