@font-face {
    font-family: "moko-admin-icons";
    src: url("/css/layui2.0/font/iconfont.woff2?v=256") format("woff2"),
         url("/css/layui2.0/font/iconfont.woff?v=256") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root {
    --moko-brand: #d91b98;
    --moko-brand-hover: #b81783;
    --moko-brand-soft: #fbeaf6;
    --moko-brand-line: rgba(217, 27, 152, .34);
    --moko-brand-wash: #fff8fc;
    --moko-purple: #7c3aed;
    --moko-bg: #f7f8fb;
    --moko-surface: #ffffff;
    --moko-text: #252633;
    --moko-muted: #7b7c88;
    --moko-border: #e7e7ee;
    --moko-success: #16a34a;
    --moko-warning: #f59e0b;
    --moko-danger: #ef4444;
    --moko-info: #3b82f6;
    --moko-radius-sm: 6px;
    --moko-radius: 9px;
    --moko-shadow: 0 2px 10px rgba(35, 38, 55, .05);
}

body.moko-admin-page {
    box-sizing: border-box;
    min-height: 100%;
    background: var(--moko-bg);
    color: var(--moko-text);
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.moko-admin-page *, .moko-admin-page *:before, .moko-admin-page *:after { box-sizing: border-box; }
.moko-admin-page a { transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.moko-admin-page h1, .moko-admin-page h2, .moko-admin-page h3 { color: var(--moko-text); font-weight: 600; }
.moko-admin-page h1 { font-size: 24px; line-height: 34px; }
.moko-admin-page h2 { font-size: 18px; line-height: 28px; }
.moko-admin-page h3 { font-size: 15px; line-height: 24px; }
.moko-admin-page h1:not(.layui-layer-title), .moko-admin-page h2:not(.layui-layer-title) {
    border-left: 3px solid var(--moko-brand);
    padding-left: 10px;
}
.moko-admin-page hr { height: 1px; border: 0; background: var(--moko-brand-line); }

.moko-admin-page input[type="text"], .moko-admin-page input[type="password"],
.moko-admin-page input[type="number"], .moko-admin-page input[type="date"],
.moko-admin-page input[type="datetime-local"], .moko-admin-page input[type="email"],
.moko-admin-page select, .moko-admin-page textarea,
.moko-admin-page .layui-input, .moko-admin-page .layui-select, .moko-admin-page .layui-textarea {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #dcdce5;
    border-radius: var(--moko-radius-sm);
    background: #fff;
    color: var(--moko-text);
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.moko-admin-page textarea { min-height: 88px; resize: vertical; }
.moko-admin-page input:focus, .moko-admin-page select:focus, .moko-admin-page textarea:focus,
.moko-admin-page .layui-input:focus, .moko-admin-page .layui-textarea:focus {
    border-color: #e173bd !important;
    box-shadow: 0 0 0 3px rgba(217, 27, 152, .10);
}
.moko-admin-page input:disabled, .moko-admin-page select:disabled, .moko-admin-page textarea:disabled {
    background: #f1f2f5;
    color: #a0a1aa;
    cursor: not-allowed;
}

.moko-admin-page button, .moko-admin-page input[type="button"], .moko-admin-page input[type="submit"],
.moko-admin-page .btn, .moko-admin-page .layui-btn {
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    min-height: 34px;
    height: auto !important;
    padding: 6px 14px !important;
    border: 1px solid var(--moko-brand);
    border-radius: var(--moko-radius-sm);
    background: var(--moko-brand);
    color: #fff;
    font-weight: 500;
    line-height: 20px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: visible !important;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
}
.moko-admin-page button, .moko-admin-page a.btn, .moko-admin-page a.button, .moko-admin-page a.layui-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.moko-admin-page button.moko-icon-only, .moko-admin-page a.moko-icon-only {
    min-width: 34px !important;
    width: 34px !important;
    padding: 6px !important;
}
.moko-admin-page button:hover, .moko-admin-page input[type="button"]:hover,
.moko-admin-page input[type="submit"]:hover, .moko-admin-page .btn:hover, .moko-admin-page .layui-btn:hover {
    border-color: var(--moko-brand-hover);
    background: var(--moko-brand-hover);
    color: #fff;
}
.moko-admin-page .btn-default, .moko-admin-page .layui-btn-primary, .moko-admin-page .moko-btn-secondary {
    border-color: var(--moko-border);
    background: #fff;
    color: #555664;
}
.moko-admin-page .btn-danger, .moko-admin-page .layui-btn-danger, .moko-admin-page .moko-btn-danger { border-color: var(--moko-danger); background: var(--moko-danger); }

.moko-admin-page table:not(.admin_shell) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--moko-surface);
    color: var(--moko-text);
    border-top: 2px solid var(--moko-brand-line);
}
.moko-admin-page table:not(.admin_shell) th {
    padding: 11px 12px;
    border-color: var(--moko-border) !important;
    background: var(--moko-brand-wash) !important;
    color: #60616d !important;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}
.moko-admin-page table:not(.admin_shell) td {
    padding: 10px 12px;
    border-color: #eeeeF3 !important;
    background: #fff;
    color: #454653;
    line-height: 20px;
    vertical-align: middle;
}
.moko-admin-page table:not(.admin_shell) tbody tr:nth-child(even) > td { background: #fdf9fc; }
.moko-admin-page table:not(.admin_shell) tr:hover > td { background: #fff1fa !important; }
.moko-admin-page .layui-table-view, .moko-admin-page .common_table_div,
.moko-admin-page .panel, .moko-admin-page .well, .moko-admin-page fieldset {
    border-color: var(--moko-brand-line) !important;
    border-radius: var(--moko-radius);
    background: #fff;
    box-shadow: var(--moko-shadow);
}
.moko-admin-page .panel-heading, .moko-admin-page .layui-card-header,
.moko-admin-page legend, .moko-admin-page caption {
    border-bottom: 1px solid var(--moko-brand-line) !important;
    background: var(--moko-brand-wash);
    color: var(--moko-text);
}
.moko-admin-page .search_jl, .moko-admin-page .search-form, .moko-admin-page .filter-form,
.moko-admin-page .layui-form:not(.layui-form-pane) {
    border-left: 3px solid var(--moko-brand);
    background: var(--moko-brand-wash);
}
.moko-admin-page .layui-tab-title { border-bottom-color: var(--moko-brand-line); }
.moko-admin-page .layui-tab-title .layui-this { color: var(--moko-brand); }
.moko-admin-page .layui-tab-title .layui-this:after { border-bottom: 2px solid var(--moko-brand); }
.moko-admin-page .layui-table-view { border-top: 2px solid var(--moko-brand-line) !important; }

.moko-admin-page .pagination, .moko-admin-page .page, .moko-admin-page .turn_page { height: auto; margin: 18px auto; }
.moko-admin-page .pagination li, .moko-admin-page .page a, .moko-admin-page .turn_page li a,
.moko-admin-page .layui-laypage a, .moko-admin-page .layui-laypage span {
    min-width: 34px;
    height: 34px;
    margin: 0 3px;
    padding: 0 10px;
    border: 1px solid var(--moko-border);
    border-radius: var(--moko-radius-sm);
    background: #fff;
    color: #5f606d;
    line-height: 32px;
    text-align: center;
}
.moko-admin-page .pagination .active, .moko-admin-page .pagination li.thisclass,
.moko-admin-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
    border-color: var(--moko-brand);
    background: var(--moko-brand);
    color: #fff;
}

.moko-admin-page .label, .moko-admin-page .badge, .moko-admin-page .moko-status {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0f1f4;
    color: #61626e;
    font-weight: 500;
}
.moko-admin-page .label-success, .moko-admin-page .moko-status-success { background: #e9f8ee; color: var(--moko-success); }
.moko-admin-page .label-warning, .moko-admin-page .moko-status-warning { background: #fff6df; color: #b77900; }
.moko-admin-page .label-danger, .moko-admin-page .moko-status-danger { background: #feebeb; color: var(--moko-danger); }

.moko-admin-icon {
    display: inline-block;
    margin-right: 6px;
    font-family: "moko-admin-icons" !important;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    vertical-align: -1px;
    -webkit-font-smoothing: antialiased;
}
.moko-icon-search:before { content: "\e615"; }
.moko-icon-add:before { content: "\e608"; }
.moko-icon-edit:before { content: "\e642"; }
.moko-icon-delete:before { content: "\e640"; }
.moko-icon-refresh:before { content: "\e669"; }
.moko-icon-export:before { content: "\e67d"; }
.moko-icon-check:before { content: "\e605"; }
.moko-icon-close:before { content: "\1006"; }
.moko-icon-view:before { content: "\e695"; }
.moko-icon-setting:before { content: "\e716"; }

.moko-admin-page .moko-empty-state { padding: 48px 20px; color: var(--moko-muted); text-align: center; }
.moko-admin-page .moko-table-shell { max-width: 100%; overflow-x: auto; border-radius: var(--moko-radius); }
.moko-admin-page :focus-visible { outline: 2px solid rgba(217, 27, 152, .65); outline-offset: 2px; }

.moko-global-loading {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(247, 248, 251, .78);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility 0s linear .16s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.moko-is-loading > .moko-global-loading {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.moko-loading-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(150px, auto);
    grid-template-rows: auto auto;
    column-gap: 14px;
    min-width: 250px;
    max-width: min(90vw, 380px);
    padding: 20px 22px 22px;
    overflow: hidden;
    border: 1px solid var(--moko-brand-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 45px rgba(60, 28, 52, .16);
    color: var(--moko-text);
}
.moko-loading-spinner {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    border: 4px solid var(--moko-brand-soft);
    border-top-color: var(--moko-brand);
    border-right-color: var(--moko-purple);
    border-radius: 50%;
    animation: moko-loading-spin .75s linear infinite;
}
.moko-loading-title { align-self: end; font-size: 16px; line-height: 22px; }
.moko-loading-text { align-self: start; margin-top: 3px; color: var(--moko-muted); font-size: 13px; line-height: 20px; }
.moko-loading-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    background: var(--moko-brand-soft);
}
.moko-loading-progress:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    background: linear-gradient(90deg, var(--moko-brand), var(--moko-purple));
    animation: moko-loading-progress 1.15s ease-in-out infinite;
}
@keyframes moko-loading-spin { to { transform: rotate(360deg); } }
@keyframes moko-loading-progress { from { left: -45%; } to { left: 105%; } }

@media (prefers-reduced-motion: reduce) {
    .moko-loading-spinner { animation-duration: 1.8s; }
    .moko-loading-progress:after { animation: none; left: 0; width: 100%; }
}
@media print { .moko-global-loading { display: none !important; } }

@media (max-width: 900px) {
    .moko-admin-page table:not(.admin_shell) th, .moko-admin-page table:not(.admin_shell) td { padding: 8px 9px; }
    .moko-admin-page input[type="text"], .moko-admin-page select { max-width: 100%; }
}