:root {
    --meo-primary: #2b63f1;
    --meo-primary-dark: #1d4ed8;
    --meo-ink: #101828;
    --meo-muted: #667085;
    --meo-line: #e4e7ec;
    --meo-bg: #f5f7fa;
    --meo-surface: #ffffff;
}

body {
    background: var(--meo-bg);
    color: var(--meo-ink);
}

#page-topbar {
    background: #fff !important;
    border-bottom: 1px solid rgba(228, 231, 236, 0.9);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

.navbar-header {
    height: 72px;
    padding: 0 20px 0 0;
}

.navbar-brand-box {
    width: 248px;
    padding: 0 20px;
    background: #fff !important;
    border-right: 1px solid var(--meo-line);
}

.logo-lg img {
    max-width: 156px;
    max-height: 28px;
    width: auto;
    height: auto;
}

.header-item {
    color: #344054 !important;
}

.header-item:hover,
.header-item:focus {
    color: #101828 !important;
}

.meo-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    margin-left: 12px;
    border: 1px solid var(--meo-line);
    border-radius: 2px;
    background: #fff;
}

.meo-menu-toggle:hover,
.meo-menu-toggle:focus {
    border-color: #cfd8ea;
    background: #f8fafc;
}

.meo-menu-toggle-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 16px;
    height: 16px;
}

.meo-menu-toggle-icon span {
    display: block;
    width: 16px;
    height: 2px;
    background: #344054;
    border-radius: 1px;
}

.meo-overview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    margin-left: 12px;
    border: 1px solid var(--meo-line);
    border-radius: 2px;
    color: #344054;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
}

.meo-overview-btn:hover {
    color: #101828;
    text-decoration: none;
    border-color: #cfd8ea;
}

.meo-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}

.meo-top-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 2px;
    color: #344054;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

.meo-top-link:hover {
    color: #101828;
    text-decoration: none;
    background: #f8fafc;
    border-color: #e5e7eb;
}

.meo-top-link i {
    font-size: 16px;
    color: var(--meo-primary);
}

.header-profile-user {
    background: #f2f4f7;
    padding: 0;
}

.noti-icon {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 2px;
}

.noti-icon:hover {
    background: #f8fafc;
    border-color: #e5e7eb;
}

.noti-icon i {
    font-size: 18px !important;
    color: #667085 !important;
}

.noti-icon .badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    top: 8px !important;
    right: 6px !important;
    border-radius: 999px;
    font-size: 10px;
    line-height: 16px;
    box-shadow: none;
}

.dropdown-menu {
    border: 1px solid var(--meo-line);
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

.vertical-menu {
    width: 248px;
    top: 72px;
    background: #fff;
    border-right: 1px solid var(--meo-line);
    box-shadow: none;
}

.main-content {
    margin-left: 248px;
}

.page-content {
    padding: calc(72px + 24px) 12px 60px 12px;
}

#sidebar-menu {
    padding-top: 14px;
}

#sidebar-menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 12px;
    padding: 11px 14px;
    border-radius: 2px;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
}

#sidebar-menu ul li a i {
    min-width: 20px;
    color: #667085;
    font-size: 17px;
}

#sidebar-menu ul li a:hover {
    color: #101828;
    background: #f8fafc;
}

#sidebar-menu ul li a:hover i {
    color: var(--meo-primary);
}

.mm-active > a,
.mm-active > a:hover,
.mm-active .active {
    color: #101828 !important;
    background: #eef4ff !important;
    border: 1px solid #dbe8ff;
}

.mm-active > a i,
.mm-active .active i {
    color: var(--meo-primary) !important;
}

#sidebar-menu ul li ul.sub-menu {
    padding: 4px 0 6px;
}

#sidebar-menu ul li ul.sub-menu li a {
    margin-left: 22px;
    padding-left: 18px;
    font-size: 12px;
    color: #667085;
}

#sidebar-menu .has-arrow:after {
    margin-top: 2px;
    color: #98a2b3;
}

.footer {
    left: 248px;
    background: transparent;
}

.msh-home {
    color: #1f2937;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.msh-home * {
    box-sizing: border-box;
}

.msh-home .layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) 360px;
    gap: 16px;
}

.msh-home .main-col,
.msh-home .side-col {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

.msh-home .side-col .panel {
    border-color: #e6ebf2;
}

.msh-home .panel {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 2px;
    min-width: 0;
}

.msh-home .panel-body {
    padding: 18px;
    min-width: 0;
}

.msh-home .panel-title {
    position: relative;
    margin: 0 0 16px;
    padding-left: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.msh-home .panel-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 3px;
    height: 20px;
    background: #2b63f1;
}

.msh-home .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
}

.msh-home .panel-head .panel-title {
    margin-bottom: 0;
}

.msh-home .panel-more {
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
}

.msh-home .panel-more:hover {
    color: #2b63f1;
    text-decoration: none;
}

.msh-home .overview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.msh-home .overview-intro {
    min-width: 0;
    flex: 1 1 auto;
}

.msh-home .overview-heading {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.msh-home .overview-meta {
    margin-top: 8px;
    color: #667085;
    font-size: 13px;
    line-height: 1.6;
    max-width: 520px;
}

.msh-home .overview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(420px, 100%);
    flex: 0 0 420px;
    min-width: 0;
    max-width: 100%;
}

.msh-home .overview-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #ebeef5;
    background: #fcfcfd;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
}

.msh-home .overview-link:hover {
    color: #2b63f1;
    border-color: #cfd8ea;
    background: #fff;
    text-decoration: none;
}

.msh-home .overview-link i {
    font-size: 16px;
    color: #98a2b3;
}

.msh-home .content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 16px;
    min-width: 0;
}

.msh-home .quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.msh-home .quick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #ebeef5;
    border-radius: 2px;
    color: #374151;
    text-decoration: none;
    background: #fcfcfd;
}

.msh-home .quick-item:hover {
    color: #2b63f1;
    text-decoration: none;
    border-color: #cfd8ea;
}

.msh-home .quick-item i {
    color: #9ca3af;
    font-size: 12px;
}

.msh-home .quick-subtitle {
    margin: 12px 0 8px;
    color: #6b7280;
    font-size: 13px;
}

.msh-home .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.msh-home .stat-card {
    min-height: 136px;
    padding: 14px 16px 13px;
    border: 1px solid #ebeef5;
    border-radius: 2px;
    background: #fff;
    min-width: 0;
}

.msh-home .stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.msh-home .stat-name {
    position: relative;
    padding-top: 8px;
    color: #374151;
    font-size: 12px;
}

.msh-home .stat-name:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: #d1d5db;
}

.msh-home .stat-card:nth-child(1) .stat-name:before {
    background: #2b63f1;
}

.msh-home .stat-card:nth-child(2) .stat-name:before {
    background: #ff8a00;
}

.msh-home .stat-card:nth-child(3) .stat-name:before {
    background: #16a34a;
}

.msh-home .stat-card:nth-child(4) .stat-name:before {
    background: #ef4444;
}

.msh-home .stat-icon {
    color: #c7ced9;
    font-size: 24px;
}

.msh-home .stat-value {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.msh-home .stat-value strong {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #111827;
}

.msh-home .stat-unit {
    margin-left: 2px;
    color: #6b7280;
    font-size: 12px;
}

.msh-home .stat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #f0f2f5;
}

.msh-home .stat-links a {
    color: #4b5563;
    font-size: 12px;
    text-decoration: none;
}

.msh-home .stat-links a:hover {
    color: #2b63f1;
}

.msh-home .product-list {
    display: grid;
    gap: 0;
}

.msh-home .product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid #ebeef5;
    border-top: 0;
    color: #374151;
    text-decoration: none;
    background: #fff;
}

.msh-home .product-row:first-child {
    border-top: 1px solid #ebeef5;
}

.msh-home .product-row:hover {
    color: #2b63f1;
    text-decoration: none;
    background: #fafcff;
}

.msh-home .product-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.msh-home .product-left i {
    color: #2b63f1;
    font-size: 18px;
}

.msh-home .product-count {
    min-width: 32px;
    padding-left: 10px;
    color: #6b7280;
    text-align: right;
    font-weight: 600;
}

.msh-home .resource-wrap {
    border: 1px solid #ebeef5;
    border-radius: 2px;
    overflow: hidden;
    min-width: 0;
}

.msh-home .resource-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #fafafa;
    border-bottom: 1px solid #ebeef5;
    color: #6b7280;
    font-size: 12px;
}

.msh-home .resource-body {
    min-height: 220px;
    max-height: 520px;
    overflow: auto;
    background: #fff;
    width: 100%;
    max-width: 100%;
}

.msh-home .resource-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: #9ca3af;
    font-size: 13px;
}

.msh-home .user-box {
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-top: 2px solid #eef4ff;
}

.msh-home .user-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f6;
}

.msh-home .user-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.msh-home .user-avatar {
    width: 58px;
    height: 58px;
    border: 1px solid #e5e7eb;
    object-fit: cover;
    background: #fff;
}

.msh-home .user-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
    line-height: 1.5;
}

.msh-home .user-subline {
    margin-top: 7px;
    color: #667085;
    font-size: 12px;
}

.msh-home .user-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #e7ecf3;
    background: #fff;
    white-space: nowrap;
}

.msh-home .user-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    margin-left: 8px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    border: 1px solid #e5e7eb;
}

.msh-home .user-link {
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
}

.msh-home .user-link:hover {
    color: #2b63f1;
}

.msh-home .verify-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.msh-home .verify-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    background: #f9fafb;
    color: #6b7280;
    font-size: 12px;
    border: 1px solid #edf0f5;
    white-space: nowrap;
}

.msh-home .verify-item i {
    font-size: 13px;
}

.msh-home .verify-item.is-on {
    background: #ebf9ef;
    color: #16a34a;
}

.msh-home .verify-item.is-off {
    background: #f9fafb;
    color: #6b7280;
}

.msh-home .user-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #ebeef5;
}

.msh-home .user-stat {
    text-align: center;
    position: relative;
}

.msh-home .user-stat + .user-stat:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #eef1f5;
}

.msh-home .user-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
}

.msh-home .user-stat-label {
    margin-top: 6px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
}

.msh-home .finance-balance {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #edf1f6;
    position: relative;
}

.msh-home .finance-balance:after {
    content: "";
    position: absolute;
    right: 16px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dbe8ff;
}

.msh-home .finance-label {
    color: #6b7280;
    font-size: 13px;
}

.msh-home .finance-value {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.msh-home .finance-value strong {
    font-size: 24px;
    line-height: 1.2;
}

.msh-home .finance-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f6;
}

.msh-home .finance-link {
    color: #6b7280;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.msh-home .finance-link:hover {
    color: #2b63f1;
}

.msh-home .recharge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 38px;
    padding: 0 20px;
    background: #2b63f1;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0;
}

.msh-home .recharge-btn:hover {
    color: #fff;
    text-decoration: none;
    background: #1d4ed8;
}

.msh-home .finance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    min-width: 0;
}

.msh-home .finance-card {
    padding: 12px 14px;
    background: #f7f8fb;
    border: 1px solid #edf1f6;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.msh-home .finance-card-label {
    color: #6b7280;
    font-size: 12px;
}

.msh-home .finance-card-value {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.msh-home .notice-list {
    display: grid;
    gap: 0;
    min-width: 0;
}

.msh-home .notice-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 0 0 0;
    border-top: 1px solid #f0f2f5;
}

.msh-home .notice-row:first-child {
    border-top: 0;
}

.msh-home .notice-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    background: #fff1f2;
    color: #ef4444;
    font-size: 12px;
}

.msh-home .notice-tag.is-blue {
    background: #eff6ff;
    color: #2b63f1;
}

.msh-home .notice-title {
    color: #374151;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.msh-home .notice-title:hover {
    color: #2b63f1;
    text-decoration: none;
}

.msh-home .notice-time {
    color: #9ca3af;
    font-size: 12px;
}

.meo-resource-table {
    width: 100%;
    max-width: 100%;
}

.meo-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #ebeef5;
    background: #fff;
}

.meo-resource-caption {
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.meo-resource-entry {
    color: #2b63f1;
    font-size: 12px;
    text-decoration: none;
}

.meo-resource-entry:hover {
    text-decoration: none;
}

.meo-resource-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.meo-resource-table table {
    width: 100%;
    min-width: 720px;
    margin-bottom: 0;
    table-layout: fixed;
}

.meo-resource-table thead th,
.meo-resource-table tbody td {
    padding: 12px 14px;
    color: #344054;
    font-size: 12px;
    vertical-align: middle;
    border-color: #ebeef5;
    word-break: break-word;
}

.meo-resource-name {
    color: #1f2937;
    text-decoration: none;
}

.meo-resource-name:hover {
    color: #2b63f1;
    text-decoration: none;
}

.meo-status-text {
    display: inline-flex;
    align-items: center;
}

.meo-resource-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 24px 12px;
    color: #98a2b3;
}

.meo-resource-empty img {
    width: 96px;
    height: auto;
}

.meo-resource-empty p {
    margin: 0;
}

.meo-resource-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid #ebeef5;
    background: #fff;
    flex-wrap: wrap;
}

.meo-resource-pageinfo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #667085;
    font-size: 12px;
}

.meo-resource-limit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.meo-resource-limit select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
}

@media (max-width: 1400px) {
    .msh-home .layout {
        grid-template-columns: 1fr 320px;
    }

    .msh-home .overview-actions {
        flex-basis: 360px;
        width: min(360px, 100%);
    }
}

@media (max-width: 1100px) {
    .msh-home .layout {
        grid-template-columns: 1fr;
    }

    .msh-home .overview-bar {
        display: grid;
        gap: 14px;
    }

    .msh-home .content-grid {
        grid-template-columns: 1fr;
    }

    .msh-home .overview-actions {
        width: 100%;
        flex-basis: auto;
    }
}

@media (max-width: 992px) {
    .navbar-brand-box {
        width: auto;
        border-right: 0;
        padding: 0 12px;
    }

    .main-content,
    .footer {
        margin-left: 0;
        left: 0;
    }

    .vertical-menu {
        top: 72px;
        width: 260px;
    }

    .meo-top-actions {
        display: none;
    }

    .page-content {
        padding: calc(72px + 16px) 10px 48px;
    }

    .msh-home .layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .msh-home .content-grid {
        gap: 12px;
    }

    .msh-home .main-col,
    .msh-home .side-col {
        gap: 12px;
    }

    .msh-home .panel-body,
    .msh-home .user-box {
        padding: 18px;
    }

    .msh-home .overview-meta {
        max-width: none;
    }
}

@media (max-width: 860px) {
    .msh-home .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .msh-home .overview-actions,
    .msh-home .finance-grid,
    .msh-home .quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .meo-overview-btn span,
    .d-none.d-xl-inline-block.ml-1 {
        display: none !important;
    }

    #page-topbar {
        top: 0 !important;
        left: 0;
        right: 0;
    }

    .navbar-header {
        height: 64px;
        padding: 0 8px;
        justify-content: space-between;
    }

    .navbar-header > .d-flex {
        min-width: 0;
    }

    .navbar-header > .d-flex.align-items-center:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar-header > .d-flex.align-items-center:last-child {
        flex: 0 0 auto;
        margin-left: 8px;
    }

    .vertical-menu {
        top: 64px;
    }

    .navbar-brand-box {
        display: none;
    }

    .meo-menu-toggle {
        margin-left: 0;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .meo-overview-btn {
        height: 36px;
        width: 36px;
        min-width: 36px;
        padding: 0;
        margin-left: 8px;
        font-size: 12px;
        justify-content: center;
        flex: 0 0 36px;
    }

    .meo-overview-btn i {
        margin: 0;
    }

    .page-content {
        padding-top: calc(64px + 12px);
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #page-header-user-dropdown {
        min-width: 40px;
        height: 40px;
        justify-content: center;
    }

    .header-profile-user {
        width: 32px;
        height: 32px;
    }

    .msh-home .panel {
        border-radius: 2px;
    }

    .msh-home .panel-body,
    .msh-home .user-box {
        padding: 14px;
    }

    .msh-home .side-col {
        order: 1;
    }

    .msh-home .main-col {
        order: 2;
    }

    .msh-home .panel-title {
        margin-bottom: 14px;
        font-size: 13px;
    }

    .msh-home .overview-heading {
        font-size: 18px;
    }

    .msh-home .overview-meta {
        margin-top: 6px;
        line-height: 1.6;
    }

    .msh-home .overview-link {
        min-height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }

    .msh-home .quick-grid,
    .msh-home .finance-grid {
        gap: 8px;
    }

    .msh-home .quick-item,
    .msh-home .finance-card,
    .msh-home .stat-card {
        min-width: 0;
    }

    .msh-home .quick-item {
        padding: 12px;
    }

    .msh-home .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .msh-home .stat-card {
        padding: 13px;
        min-height: 124px;
    }

    .msh-home .stat-value strong {
        font-size: 24px;
    }

    .msh-home .product-row {
        gap: 10px;
        padding: 0 12px;
    }

    .msh-home .resource-toolbar {
        display: grid;
        gap: 4px;
        font-size: 12px;
    }

    .meo-resource-head,
    .meo-resource-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .meo-resource-table table {
        min-width: 0;
    }

    .meo-resource-table thead {
        display: none;
    }

    .meo-resource-table tbody,
    .meo-resource-table tr,
    .meo-resource-table td {
        display: block;
        width: 100%;
    }

    .meo-resource-table tbody tr {
        padding: 12px;
        border-top: 1px solid #ebeef5;
    }

    .meo-resource-table tbody tr:first-child {
        border-top: 0;
    }

    .meo-resource-table tbody td {
        padding: 6px 0;
        border: 0;
    }

    .meo-resource-table tbody td:before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: #98a2b3;
        font-size: 11px;
    }

    .msh-home .user-top {
        display: grid;
        gap: 10px;
        padding-bottom: 10px;
    }

    .msh-home .user-main {
        align-items: center;
        gap: 12px;
    }

    .msh-home .user-avatar {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .msh-home .user-link {
        justify-self: start;
    }

    .msh-home .verify-row,
    .msh-home .user-stats {
        gap: 8px;
    }

    .msh-home .user-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .msh-home .user-stat + .user-stat:before {
        top: 8px;
        bottom: 8px;
    }
}

@media (max-width: 580px) {
    .msh-home .panel-body,
    .msh-home .user-box {
        padding: 16px;
    }

    .msh-home .overview-actions {
        grid-template-columns: 1fr;
    }

    .msh-home .panel-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .msh-home .notice-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
    }

    .msh-home .notice-title {
        white-space: normal;
        text-overflow: initial;
    }

    .msh-home .notice-tag {
        justify-self: start;
    }

    .msh-home .notice-time {
        font-size: 11px;
    }

    .msh-home .stats-grid {
        grid-template-columns: 1fr;
    }

    .msh-home .quick-grid {
        grid-template-columns: 1fr;
    }

    .msh-home .user-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .msh-home .verify-row {
        grid-template-columns: 1fr;
    }

    .msh-home .verify-item {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }

    .msh-home .finance-balance,
    .msh-home .finance-card {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .logo-lg img {
        max-width: 112px;
        max-height: 22px;
    }

    .meo-overview-btn {
        min-width: 0;
        padding: 0 8px;
    }

    .msh-home .quick-grid {
        grid-template-columns: 1fr;
    }

    .msh-home .overview-bar,
    .msh-home .content-grid,
    .msh-home .stats-grid,
    .msh-home .finance-grid,
    .msh-home .user-stats {
        width: 100%;
        max-width: 100%;
    }

    .msh-home .product-left {
        min-width: 0;
    }

    .msh-home .product-left span,
    .msh-home .notice-title,
    .msh-home .user-name,
    .msh-home .overview-meta {
        word-break: break-word;
    }

    .msh-home .finance-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .msh-home .user-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .msh-home .recharge-btn,
    .msh-home .user-link {
        width: 100%;
        justify-content: center;
    }

    .msh-home .user-stat + .user-stat:before {
        display: block;
    }

    .meo-resource-pageinfo {
        display: grid;
        gap: 8px;
    }
}

.meo-page-card {
    border: 1px solid #ebeef5;
    border-radius: 2px;
    box-shadow: none;
}

.meo-page-card > .card-body {
    padding: 18px 20px;
}

.meo-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.meo-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meo-toolbar-btn {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
}

.meo-filter-select {
    min-width: 150px;
}

.meo-ticket-link,
.meo-bill-id-link {
    color: #2b63f1;
    text-decoration: none;
}

.meo-ticket-link:hover,
.meo-bill-id-link:hover,
.meo-action-link:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.meo-dept-badge,
.meo-id-badge {
    padding: 4px 10px;
    border-radius: 2px;
    font-weight: 600;
}

.meo-status-badge {
    background: var(--meo-status-color, #667085);
    color: #fff;
    border-radius: 2px;
    padding: 5px 10px;
    font-weight: 600;
}

.meo-billing-status {
    border-radius: 2px;
    padding: 5px 10px;
    font-weight: 600;
}

.meo-empty-text {
    text-align: center;
    color: #667085;
}

.meo-table-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meo-summary-note {
    color: #667085;
    font-size: 13px;
}

.meo-bill-box {
    width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 2px;
    padding: 20px;
    font-size: 14px;
}

.meo-bill-logo {
    height: 4.4rem;
}

.meo-bill-status {
    display: inline-block;
    min-width: 7rem;
    margin-bottom: 0;
    text-align: center;
    font-weight: 700;
}

.meo-bill-status-paid {
    padding-top: 1.25rem;
}

.meo-bill-status-unpaid {
    margin-bottom: .25rem;
}

.meo-bill-pay-btn {
    width: 7rem;
    border-radius: 2px;
}

.meo-bill-card {
    border: 1px solid #ebeef5;
    border-radius: 2px;
    box-shadow: none;
}

.meo-bill-table-wrap {
    min-height: auto;
    border-radius: 0 0 2px 2px;
}

.meo-bill-table {
    border: 1px solid #ddd;
}

.meo-bill-actions .btn {
    border-radius: 2px;
}

.explanation {
    width: 100%;
    min-height: 150px;
    padding: 18px 20px;
    background-color: #f5f6f7;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #ebeef5;
}

.explanation_msg {
    width: 175px;
    min-height: 85px;
    line-height: 24px;
}

.downloadTemplate {
    cursor: pointer;
    color: #2b63f1;
    font-size: 12px;
    padding-top: 5px;
}

.custom-file-label::after {
    content: "浏览" !important;
}

@media (max-width: 768px) {
    .meo-table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .meo-table-toolbar .table-search,
    .meo-table-toolbar .table-filter,
    .meo-toolbar-actions {
        width: 100%;
    }

    .meo-filter-select {
        width: 100% !important;
    }

    .meo-bill-box {
        padding: 16px;
    }

    .explanation {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .explanation_msg {
        width: 100%;
    }

    .meo-page-card > .card-body {
        padding: 14px;
    }

    .table-footer,
    .table-pagination,
    .table-pageinfo {
        display: grid;
        gap: 8px;
    }

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

@media (max-width: 480px) {
    .meo-page-card > .card-body {
        padding: 12px;
    }

    .meo-toolbar-btn {
        width: 100%;
        justify-content: center;
    }

    .meo-table-tools {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .meo-responsive-table thead {
        display: none;
    }

    .meo-responsive-table,
    .meo-responsive-table tbody,
    .meo-responsive-table tr,
    .meo-responsive-table td {
        display: block;
        width: 100%;
    }

    .meo-responsive-table tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid #ebeef5;
        background: #fff;
    }

    .meo-responsive-table td {
        position: relative;
        padding: 8px 0 8px 94px !important;
        min-height: 36px;
        border: 0 !important;
        text-align: left !important;
    }

    .meo-responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 8px;
        width: 84px;
        color: #6b7280;
        font-size: 12px;
        line-height: 1.4;
    }

    .meo-responsive-table td:last-child .meo-action-link {
        display: inline-flex;
        margin-right: 10px;
        margin-bottom: 6px;
    }

    .meo-billing-table-responsive .meo-bulk-cell {
        display: none !important;
    }
}