/* ==========================================================================
   力明招生管理系统 — 统一样式表 v2.0（美化版）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* 品牌色 — 可通过JS动态切换 */
    --color-primary: #1a5276;
    --color-primary-light: #2980b9;
    --color-primary-lighter: #5dade2;
    --color-primary-dark: #0e2f44;
    --color-accent: #5FB878;
    --color-accent-light: #8bcf9e;

    /* 功能色 */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;
    --color-info: #3498db;

    /* 中性色 */
    --color-bg: #eef1f5;
    --color-card: #ffffff;
    --color-bg-card-alt: #f8f9fb;
    --color-text: #2c3e50;
    --color-text-secondary: #5d6d7e;
    --color-text-muted: #95a5a6;
    --color-border: #e8ecf1;
    --color-border-light: #f0f2f5;

    /* 导航 */
    --color-header-bg: #1a1f2e;
    --color-sidebar-bg: #1a1f2e;
    --color-sidebar-hover: rgba(255,255,255,0.06);
    --color-sidebar-active: rgba(91,184,120,0.18);
    --color-sidebar-accent: #5FB878;

    /* 尺寸 */
    --sidebar-width: 230px;
    --header-height: 54px;
    --mobile-nav-height: 56px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* 阴影 */
    --shadow-card: 0 2px 8px rgba(26, 31, 46, 0.06);
    --shadow-card-hover: 0 6px 20px rgba(26, 31, 46, 0.10);
    --shadow-dropdown: 0 8px 24px rgba(26, 31, 46, 0.14);
    --shadow-header: 0 2px 8px rgba(0,0,0,0.15);
    --shadow-nav: 0 -2px 8px rgba(0,0,0,0.06);
    --shadow-popup: 0 12px 40px rgba(26, 31, 46, 0.18);

    /* 字体 */
    --font-family: "Inter", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 11px;
    --font-size-lg: 15px;
    --font-size-xl: 18px;
    --font-size-h2: 22px;

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1b. Dark Theme Overrides
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --color-bg: #181a20;
    --color-card: #1e2028;
    --color-bg-card-alt: #23252e;
    --color-text: #e0e0e0;
    --color-text-secondary: #a0a8b4;
    --color-text-muted: #707a88;
    --color-border: #2a2d37;
    --color-border-light: #242730;
    --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.45);
    --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.5);
    --shadow-header: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-popup: 0 12px 40px rgba(0,0,0,0.55);
}

/* Dark mode — body background already uses --color-bg */

/* Dark mode — tables */
[data-theme="dark"] .layui-table { background: var(--color-card); border-color: var(--color-border); }
[data-theme="dark"] .layui-table th { background: #242730; color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="dark"] .layui-table td { border-color: var(--color-border-light); color: var(--color-text); }
[data-theme="dark"] .layui-table tr:hover td { background: #262933; }
[data-theme="dark"] .layui-table tr:nth-child(even) td { background: #202228; }
[data-theme="dark"] .layui-table tr:nth-child(even):hover td { background: #282b35; }

/* Dark mode — form inputs */
[data-theme="dark"] .layui-input,
[data-theme="dark"] .layui-textarea,
[data-theme="dark"] .layui-form-select .layui-input { background: #2a2d37; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .layui-input:focus,
[data-theme="dark"] .layui-textarea:focus { border-color: var(--color-primary-light); background: #2e313d; }

/* Dark mode — form selects dropdown */
[data-theme="dark"] .layui-form-select dl { background: #2a2d37; border-color: var(--color-border); }
[data-theme="dark"] .layui-form-select dl dd { color: var(--color-text); }
[data-theme="dark"] .layui-form-select dl dd:hover { background: var(--color-primary-light); color: #fff; }

/* Dark mode — layer popups */
[data-theme="dark"] .layui-layer { background: #1e2028 !important; }
[data-theme="dark"] .layui-layer-title { background: #242730 !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
[data-theme="dark"] .layui-layer-content { color: var(--color-text); }
[data-theme="dark"] .layui-layer-btn a { background: #2a2d37; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .layui-layer-btn .layui-layer-btn0 { background: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; }

/* Dark mode — badges */
[data-theme="dark"] .layui-badge { color: #fff; }
[data-theme="dark"] .layui-bg-green { background: #1e8449; }
[data-theme="dark"] .layui-bg-orange { background: #d35400; }

/* Dark mode — buttons */
[data-theme="dark"] .layui-btn-primary { background: #2a2d37; color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="dark"] .layui-btn-primary:hover { border-color: var(--color-primary-light); color: var(--color-primary-lighter); background: #2e313d; }

/* Dark mode — page / pagination */
[data-theme="dark"] .layui-laypage a { background: var(--color-card); color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .layui-laypage a:hover { color: var(--color-primary-lighter); }
[data-theme="dark"] .layui-laypage span { background: transparent; color: var(--color-text-muted); }
[data-theme="dark"] .layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--color-primary-light); }
[data-theme="dark"] .layui-laypage .layui-laypage-curr em { color: #fff; }
[data-theme="dark"] .layui-laypage input { background: #2a2d37; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .layui-laypage .layui-laypage-btn { background: var(--color-card); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .layui-laypage-count,
[data-theme="dark"] .layui-laypage-skip { background: transparent; color: var(--color-text-secondary); }
[data-theme="dark"] .layui-laypage-limits select { background: #2a2d37; color: var(--color-text); border-color: var(--color-border); }

/* Dark mode — panels / fieldsets */
[data-theme="dark"] .layui-elem-field { border-color: var(--color-border); }
[data-theme="dark"] .layui-elem-field legend { color: var(--color-text); }

/* Dark mode — alert */
[data-theme="dark"] .layui-alert { background: #2a2d37; border-color: var(--color-border); color: var(--color-text); }

/* Dark mode — tab */
[data-theme="dark"] .layui-tab-title { border-color: var(--color-border); }
[data-theme="dark"] .layui-tab-title li { color: var(--color-text-muted); }
[data-theme="dark"] .layui-tab-title .layui-this { color: var(--color-text); }
[data-theme="dark"] .layui-tab-title .layui-this::after { background: var(--color-primary-light); }
[data-theme="dark"] .layui-tab-content { color: var(--color-text); }

/* Dark mode — login page */
[data-theme="dark"] .login-card { background: rgba(30,32,40,0.95); }
[data-theme="dark"] .login-card h2 { color: #e0e0e0; }

/* Dark mode — public container */
[data-theme="dark"] .public-container { background: var(--color-card); color: var(--color-text); }
[data-theme="dark"] .public-container h2 { color: var(--color-text); }

/* Dark mode — batch bar */
[data-theme="dark"] .batch-bar { background: #2a2410; border-color: #5d4e10; }

/* Dark mode — header dropdown */
[data-theme="dark"] .layui-header .header-right .user-dropdown .dropdown-menu { background: #242730; }
[data-theme="dark"] .layui-header .header-right .user-dropdown .dropdown-menu a { color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .layui-header .header-right .user-dropdown .dropdown-menu a:hover { background: #2e313d; color: var(--color-primary-lighter); }

/* Dark mode — sidebar user bar */
[data-theme="dark"] .side-user-bar .su-name { color: var(--color-text); }

/* Dark mode — skeleton */
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-title,
[data-theme="dark"] .skeleton-text,
[data-theme="dark"] .skeleton-text-short { background: linear-gradient(90deg, #2a2d37 25%, #333640 50%, #2a2d37 75%); background-size: 200px 100%; }

/* Dark mode — stat cards / data cards */
[data-theme="dark"] .stat-card { background: var(--color-card); }
[data-theme="dark"] .stat-card .num { color: var(--color-primary-lighter); }
[data-theme="dark"] .data-card { background: var(--color-card); }
[data-theme="dark"] .data-card .card-name { color: var(--color-text); }

/* Dark mode — section tag */
[data-theme="dark"] .section-tag { background: #2a2d37; }

/* Dark mode — tag badges precision */
[data-theme="dark"] .tag-success { background: #1a3a28; color: #5fb878; }
[data-theme="dark"] .tag-danger { background: #3a1a1a; color: #e74c3c; }
[data-theme="dark"] .tag-warning { background: #3a2a10; color: #f39c12; }
[data-theme="dark"] .tag-primary { background: #1a2a3a; color: #5dade2; }
[data-theme="dark"] .tag-pink { background: #3a1a2a; color: #e84393; }

/* Dark mode — empty state */
[data-theme="dark"] .empty-state { color: var(--color-text-muted); }

/* Dark mode — payment/refund specific inputs and selects */
[data-theme="dark"] .ay-inline select,
[data-theme="dark"] .pf-field select,
[data-theme="dark"] .pf-field input,
[data-theme="dark"] .pay-search-bar input,
[data-theme="dark"] .search-bar input { background: #2a2d37; color: var(--color-text); border-color: var(--color-border); }
[data-theme="dark"] .pay-student-card,
[data-theme="dark"] .pay-form-wrap,
[data-theme="dark"] .refund-student-card,
[data-theme="dark"] .refund-form-wrap,
[data-theme="dark"] .receipt-wrap { background: var(--color-card); color: var(--color-text); }
[data-theme="dark"] .pay-student-card .info-row,
[data-theme="dark"] .refund-student-card .info-row,
[data-theme="dark"] .pay-search-bar label,
[data-theme="dark"] .search-bar label { color: var(--color-text-secondary); }
[data-theme="dark"] .pay-fee-table th,
[data-theme="dark"] .refund-table th { background: #242730; color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="dark"] .pay-fee-table td { border-color: var(--color-border-light); color: var(--color-text); }
[data-theme="dark"] .sp-row select { background: #2a2d37; color: var(--color-text); border-color: var(--color-border); }

/* Dark mode — all page wrappers (views use *-wrap / *-card for white containers) */
[data-theme="dark"] [class$="-wrap"],
[data-theme="dark"] [class$="-card"],
[data-theme="dark"] .layui-card,
[data-theme="dark"] .layui-card-body { background: var(--color-card); }
[data-theme="dark"] .layui-card-header { background: var(--color-bg-card-alt); border-color: var(--color-border); color: var(--color-text); }

/* Dark mode — readonly / muted inputs */
[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea[readonly],
[data-theme="dark"] input[style*="background:#f5f5f5"],
[data-theme="dark"] input[style*="background: #f5f5f5"] { background: #2a2d37 !important; color: var(--color-text-muted); }

/* Dark mode — section tags in views */
[data-theme="dark"] [class$="-section-tag"],
[data-theme="dark"] .reg-section-tag,
[data-theme="dark"] .pub-section-tag { background: #2a2d37; color: var(--color-text-secondary); }
[data-theme="dark"] [class$="-section-tag"].required,
[data-theme="dark"] .reg-section-tag.required,
[data-theme="dark"] .pub-section-tag.required { background: #3a1a1a; color: #e74c3c; }

/* Dark mode — student info / highlight boxes */
[data-theme="dark"] #studentInfo { background: #1a2e1a !important; border-color: #2a4a2a !important; color: var(--color-text); }
[data-theme="dark"] [style*="background:#f0f8f4"] { background: #1a2e1a !important; border-color: #2a4a2a !important; }
[data-theme="dark"] [style*="background:#f0f4ff"] { background: #1a1a3a !important; border-color: #2a2a5a !important; }
[data-theme="dark"] [style*="background:#fffbe6"] { background: #3a3a10 !important; }
[data-theme="dark"] [style*="background:#fff3cd"] { background: #3a3010 !important; border-color: #5a4a10 !important; color: #d4a017 !important; }
[data-theme="dark"] [style*="background:#f8f9fb"] { background: var(--color-bg-card-alt) !important; }

/* Dark mode — table header backgrounds in views */
[data-theme="dark"] [style*="background:#f8f8f8"],
[data-theme="dark"] [class*="-fee-table"] th,
[data-theme="dark"] .pay-fee-table th,
[data-theme="dark"] .refund-table th { background: #242730; color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="dark"] [style*="background:#f5f5f5"][style*="padding"] { background: var(--color-bg-card-alt) !important; }

/* Dark mode — search bars in payment/refund */
[data-theme="dark"] .pay-search-bar,
[data-theme="dark"] .search-bar { background: var(--color-card); }

/* Dark mode — logo preview bg */
[data-theme="dark"] .logo-preview { background: #2a2d37; }

/* Dark mode — fee total row */
[data-theme="dark"] [style*="background:#fff"] { }
[data-theme="dark"] .total-row td { background: #3a3a10 !important; }

/* Dark mode — popup/import selects in views */
[data-theme="dark"] select[id$="YearSelect"],
[data-theme="dark"] select[id$="Year"],
[data-theme="dark"] select[style*="border:1px solid #d2d2d2"] { background: #2a2d37; color: var(--color-text); border-color: var(--color-border) !important; }

/* Dark mode — layer content inline backgrounds */
[data-theme="dark"] .layui-layer-content [style*="background"] { }

/* Dark mode — generic form control fallback (bare inputs/selects/textareas not covered by whitelist) */
[data-theme="dark"] select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
[data-theme="dark"] textarea {
    background: #2a2d37 !important;
    border-color: var(--color-border) !important;
    color: var(--color-text);
}
[data-theme="dark"] select option { background: #2a2d37; color: var(--color-text); }
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus {
    background: #2e313d !important;
    border-color: var(--color-primary-light) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--color-text-muted) !important; }

/* Dark mode — light tip/info blocks in views (class rules + inline styles) */
[data-theme="dark"] .st-info,
[data-theme="dark"] .scp-group,
[data-theme="dark"] .asn-input-area,
[data-theme="dark"] .asn-scope-tip,
[data-theme="dark"] .tac-tip,
[data-theme="dark"] .tfa-tip,
[data-theme="dark"] [style*="background:#f0f7ff"],
[data-theme="dark"] [style*="background:#fdf6ec"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background:#fafbfc"],
[data-theme="dark"] [style*="background:#f0f0f0"] { background: var(--color-bg-card-alt) !important; border-color: var(--color-border) !important; color: var(--color-text-secondary); }
[data-theme="dark"] [style*="background:#f0f9eb"] { background: #1a2e1a !important; border-color: #2a4a2a !important; }
[data-theme="dark"] [style*="background:#fff0f0"],
[data-theme="dark"] [style*="background:#fef0f0"] { background: #3a1a1a !important; border-color: #5a2a2a !important; }
[data-theme="dark"] [style*="background:#fff3e0"] { background: #3a2a10 !important; border-color: #5a4a10 !important; }

/* Dark mode — text contrast inside dark containers */
[data-theme="dark"] .asn-card b { color: var(--color-text); }
[data-theme="dark"] .asn-card .kv,
[data-theme="dark"] .scp-group h4,
[data-theme="dark"] .st-row label { color: var(--color-text-secondary); }

/* Dark mode — xm-select (checkin status/fee, class level/major, etc.) */
[data-theme="dark"] xm-select,
[data-theme="dark"] xm-select .xm-input { background: #2a2d37; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] xm-select > .xm-body,
[data-theme="dark"] xm-select > .xm-body .xm-cascader-box,
[data-theme="dark"] xm-select > .xm-body .xm-paging > span { background-color: #2a2d37; border-color: var(--color-border); }
[data-theme="dark"] xm-select > .xm-body .xm-search { background-color: #2a2d37 !important; }
[data-theme="dark"] xm-select > .xm-body .xm-option-content,
[data-theme="dark"] xm-select > .xm-body .xm-paging > span,
[data-theme="dark"] xm-select > .xm-body .xm-toolbar .toolbar-tag,
[data-theme="dark"] xm-select .xm-right-arrow { color: var(--color-text); }
[data-theme="dark"] xm-select > .xm-body .xm-option:hover,
[data-theme="dark"] xm-select > .xm-body .xm-option-content:hover { background-color: #33363f !important; }

/* Dark mode — layui select dropdown selected item (specificity beats layui's .layui-this) */
[data-theme="dark"] .layui-form-select dl dd.layui-this { background-color: #33363f; color: var(--color-text); }


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}
body { background: var(--color-bg); }
a { color: var(--color-primary-light); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }
img { max-width: 100%; vertical-align: middle; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--color-primary-lighter); color: #fff; }

/* --------------------------------------------------------------------------
   3. Navigation — Header
   -------------------------------------------------------------------------- */
.layui-layout-admin .layui-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-height); background: var(--color-header-bg);
    z-index: 1000; box-shadow: var(--shadow-header);
}
.layui-header .brand {
    float: left; height: var(--header-height); line-height: var(--header-height);
    padding: 0 22px; color: #fff; font-size: var(--font-size-lg);
    font-weight: 600; letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(95,184,120,0.12), transparent);
}
.layui-header .brand i { margin-right: 8px; font-size: 20px; color: var(--color-accent); vertical-align: -2px; }
.layui-header .header-right { float: right; height: var(--header-height); line-height: var(--header-height); padding-right: 14px; }
.layui-header .header-right .header-item {
    display: inline-block; padding: 0 16px;
    color: rgba(255,255,255,0.7); cursor: pointer;
    transition: all var(--transition-fast); font-size: 13px;
    border-radius: var(--radius-sm);
}
.layui-header .header-right .header-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.layui-header .header-right .header-item b { color: #fff; margin-right: 4px; }

/* User dropdown */
.layui-header .header-right .user-dropdown { position: relative; display: inline-block; }
.layui-header .header-right .user-dropdown .dropdown-menu {
    display: none; position: absolute; top: var(--header-height);
    right: 0; min-width: 150px; background: #fff;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-dropdown); z-index: 1050; line-height: normal;
    overflow: hidden;
}
.layui-header .header-right .user-dropdown:hover .dropdown-menu { display: block; animation: slideDown 0.15s ease; }
.layui-header .header-right .dropdown-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 18px; color: var(--color-text);
    font-size: 13px; text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap; transition: background var(--transition-fast);
}
.layui-header .header-right .dropdown-menu a:last-child { border-bottom: none; }
.layui-header .header-right .dropdown-menu a:hover { background: #f0f4f8; color: var(--color-primary-light); }
.layui-header .header-right .dropdown-menu a i { font-size: 15px; width: 18px; text-align: center; }

.layui-header .hamburger {
    display: none; float: left; height: var(--header-height);
    line-height: var(--header-height); padding: 0 18px;
    color: rgba(255,255,255,0.8); font-size: 22px; cursor: pointer;
    transition: background var(--transition-fast);
}
.layui-header .hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Year indicator */
.layui-header .header-right .year-badge {
    display: inline-block;
    padding: 3px 14px;
    font-size: 12px;
    color: #fff;
    background: rgba(95,184,120,0.2);
    border: 1px solid rgba(95,184,120,0.3);
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   4. Navigation — Sidebar
   -------------------------------------------------------------------------- */
.layui-layout-admin .layui-side {
    position: fixed; top: var(--header-height); left: 0; bottom: 0;
    width: var(--sidebar-width); background: var(--color-sidebar-bg);
    overflow-y: auto; z-index: 999; overflow-x: hidden;
}
.layui-layout-admin .layui-side::-webkit-scrollbar { width: 4px; }
.layui-layout-admin .layui-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.layui-side .layui-nav { background: transparent; padding: 8px 0; }
.layui-side .layui-nav-tree .layui-nav-item { margin: 1px 0; border-left: 3px solid transparent; border-radius: 0; }
.layui-side .layui-nav-tree .layui-nav-item:hover { background: var(--color-sidebar-hover); }
.layui-side .layui-nav-tree .layui-nav-item.layui-this {
    background: var(--color-sidebar-active);
    border-left-color: var(--color-sidebar-accent);
}
.layui-side .layui-nav-tree .layui-nav-item a {
    font-size: 13px; color: rgba(255,255,255,0.65);
    padding: 0 20px; height: 44px; line-height: 44px;
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; transition: all var(--transition-fast);
}
.layui-side .layui-nav-tree .layui-nav-item:hover > a { color: rgba(255,255,255,0.9); }
.layui-side .layui-nav-tree .layui-nav-item.layui-this > a { color: #fff !important; font-weight: 500; }
.layui-side .layui-nav-tree .layui-nav-item a .layui-icon {
    font-size: 16px; vertical-align: -1px; width: 20px; text-align: center;
}

.layui-side .layui-nav-tree .layui-nav-child { background: rgba(0,0,0,0.2); display: none; }
.layui-side .layui-nav-tree .layui-nav-child dd { margin: 0; }
.layui-side .layui-nav-tree .layui-nav-child dd a {
    font-size: var(--font-size-sm); color: rgba(255,255,255,0.45);
    padding: 0 20px 0 48px; height: 36px; line-height: 36px;
    display: flex; align-items: center; gap: 6px;
    text-decoration: none; transition: all var(--transition-fast);
}
.layui-side .layui-nav-tree .layui-nav-child dd a:hover { color: #fff; background: rgba(255,255,255,0.04); }
.layui-side .layui-nav-tree .layui-nav-child dd.layui-this a { color: #fff !important; background: rgba(95,184,120,0.1); font-weight: 500; }

.layui-side .layui-nav-tree .layui-nav-more { border-top-color: rgba(255,255,255,0.35); }
.layui-side .layui-nav-tree .layui-nav-mored,
.layui-side .layui-nav-tree .layui-nav-itemed > .layui-nav-more {
    border-color: transparent transparent rgba(255,255,255,0.35);
    border-width: 0 4px 4px;
}
.layui-side .layui-nav-tree .layui-nav-itemed > .layui-nav-child { display: block; }

.side-user-bar {
    display: none; padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px;
}
.side-user-bar .su-name { color: #fff; font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.side-user-bar .su-links a {
    display: flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,0.5);
    font-size: var(--font-size-sm); padding: 7px 0; text-decoration: none;
    transition: color var(--transition-fast);
}
.side-user-bar .su-links a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   5. Main Body
   -------------------------------------------------------------------------- */
.layui-layout-admin .layui-body {
    position: fixed; top: var(--header-height); left: var(--sidebar-width);
    right: 0; bottom: 0; overflow-y: auto; background: var(--color-bg);
}
.layui-body .layui-main {
    padding: 20px 20px 40px;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.layui-body .layui-elem-field {
    margin-bottom: 18px; border-radius: var(--radius-md);
    overflow: visible; border-color: var(--color-border);
}
.layui-body .layui-field-box { padding: 18px 22px; }
.layui-body .layui-elem-field legend { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); }

/* --------------------------------------------------------------------------
   6. Tag Badges
   -------------------------------------------------------------------------- */
.tag-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: var(--font-size-xs); font-weight: 500; line-height: 1.6;
    letter-spacing: 0.3px;
}
.tag-success { background: #e8f8ef; color: #1e8449; }
.tag-danger { background: #fdedec; color: #c0392b; }
.tag-warning { background: #fef5e7; color: #d35400; }
.tag-primary { background: #ebf5fb; color: #1a5276; }
.tag-pink { background: #fce4ec; color: #b03a5e; }

/* --------------------------------------------------------------------------
   7. Data Cards
   -------------------------------------------------------------------------- */
.data-card {
    background: var(--color-card); border-radius: var(--radius-lg);
    padding: 16px 18px; margin-bottom: 12px;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 1px solid var(--color-border-light);
}
.data-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-card-hover); }
.data-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-light); }
.data-card .card-name { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); }
.data-card .card-tag { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.data-card .card-body { font-size: 13px; }
.data-card .card-row { display: flex; padding: 3px 0; }
.data-card .card-label { width: 72px; color: var(--color-text-muted); flex-shrink: 0; font-size: 12px; }
.data-card .card-value { color: var(--color-text-secondary); flex: 1; }
.data-card .card-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); }
.data-card-view { display: none; }

/* --------------------------------------------------------------------------
   8. Stat Cards (Dashboard)
   -------------------------------------------------------------------------- */
.stat-card {
    background: var(--color-card); padding: 24px 20px;
    border-radius: var(--radius-lg); text-align: center;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base); cursor: default;
    border: 1px solid var(--color-border-light);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-accent));
    opacity: 0; transition: opacity var(--transition-base);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.stat-card:hover::before { opacity: 1; }
.stat-card .num { font-size: 32px; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; letter-spacing: -0.5px; }
.stat-card .label { font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.layui-table {
    font-size: 13px; border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow-card); border: 1px solid var(--color-border-light);
}
.layui-table th {
    background: #f4f6f9; color: var(--color-text-secondary);
    font-weight: 600; border-bottom: 2px solid var(--color-border);
    padding: 12px 15px; font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.layui-table td { padding: 11px 15px; border-color: var(--color-border-light); }
.layui-table tr:hover td { background: #f8fafc; }
.layui-table tr:nth-child(even) td { background: #fafbfc; }
.layui-table tr:nth-child(even):hover td { background: #f4f7fa; }

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.layui-btn { border-radius: var(--radius-sm); font-size: 13px; transition: all var(--transition-fast); }
.layui-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.layui-btn-primary { border-color: var(--color-border); color: var(--color-text-secondary); }
.layui-btn-primary:hover { border-color: var(--color-primary-light); color: var(--color-primary-light); background: #fff; }
.layui-btn-sm { height: 30px; line-height: 30px; padding: 0 14px; font-size: var(--font-size-sm); }
.layui-btn-xs { height: 26px; line-height: 26px; padding: 0 10px; font-size: var(--font-size-xs); }
.layui-btn-normal { background: var(--color-primary-light); }
.layui-btn-warm { background: var(--color-warning); }
.layui-btn-danger { background: var(--color-danger); }

/* --------------------------------------------------------------------------
   11. Search / Form Layout
   -------------------------------------------------------------------------- */
.search-box {
    padding: 18px 22px; background: var(--color-card);
    border-radius: var(--radius-lg); margin-bottom: 18px;
    box-shadow: var(--shadow-card); border: 1px solid var(--color-border-light);
}
.search-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.search-form .layui-form-item { margin-bottom: 0; }
.search-form .layui-input-inline { width: 120px; margin-right: 0; }
.search-form .layui-input-inline.w140 { width: 140px; }
.search-form .layui-input-inline.w180 { width: 180px; }
.search-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.btn-row { margin-bottom: 16px; }

/* Action group */
.action-group { display: flex; flex-wrap: wrap; gap: 6px; }
.action-group .layui-btn { height: 34px; line-height: 34px; padding: 0 14px; font-size: 13px; }
.action-group .layui-btn-sm { height: 30px; line-height: 30px; padding: 0 12px; font-size: var(--font-size-sm); }
.action-group .layui-btn-xs { height: 26px; line-height: 26px; padding: 0 10px; font-size: var(--font-size-xs); }

/* --------------------------------------------------------------------------
   12. Page Info & Empty State
   -------------------------------------------------------------------------- */
.page-info { padding: 10px 0; color: var(--color-text-secondary); font-size: 13px; }
.page-info b { color: var(--color-primary); }
.page-box { margin-top: 18px; text-align: right; }

.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--color-text-muted);
}
.empty-state .layui-icon { font-size: 56px; opacity: 0.4; display: block; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* --------------------------------------------------------------------------
   13. Batch Bar
   -------------------------------------------------------------------------- */
.batch-bar {
    display: none; background: #fef9e7;
    border: 1px solid #f9e79f; border-radius: var(--radius-md);
    padding: 10px 18px; margin-bottom: 14px;
}
.batch-bar.show { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.batch-bar b { color: var(--color-warning); }
.batch-bar .layui-btn { height: 28px; line-height: 28px; padding: 0 10px; font-size: 12px; }

/* --------------------------------------------------------------------------
   14. Skeleton Loading
   -------------------------------------------------------------------------- */
@keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-wrap { padding: 20px; background: var(--color-card); border-radius: var(--radius-md); }
.skeleton-line {
    height: 14px; margin-bottom: 10px; border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200px 100%; animation: skeleton-loading 1.5s ease-in-out infinite;
}
.skeleton-title { height: 20px; width: 40%; margin-bottom: 16px; border-radius: var(--radius-sm); background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s ease-in-out infinite; }
.skeleton-text { height: 14px; width: 100%; margin-bottom: 8px; border-radius: var(--radius-sm); background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s ease-in-out infinite; }
.skeleton-text-short { height: 14px; width: 60%; margin-bottom: 8px; border-radius: var(--radius-sm); background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200px 100%; animation: skeleton-loading 1.5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   15. Section Tags (Form sections)
   -------------------------------------------------------------------------- */
.section-tag {
    display: inline-block; padding: 2px 14px; border-radius: 20px;
    font-size: var(--font-size-sm); font-weight: 500;
    color: var(--color-text-secondary); background: #f0f2f5;
}
.section-tag.required { color: #e74c3c; background: #fdedec; }

/* --------------------------------------------------------------------------
   16. Form Label — Prevent wrapping across ALL pages
   -------------------------------------------------------------------------- */
.layui-form-label {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17. Layui Popup / Layer Overrides
   -------------------------------------------------------------------------- */
.layui-layer { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-popup) !important; }
.layui-layer-title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 44px;
    background: #fafbfc !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    color: var(--color-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    height: 46px !important;
    line-height: 46px !important;
}
.layui-layer-setwin .layui-layer-close {
    transition: transform var(--transition-fast);
}
.layui-layer-setwin .layui-layer-close:hover { transform: rotate(90deg); }
.layui-layer-btn { padding: 10px 20px 16px !important; }
.layui-layer-btn a { border-radius: var(--radius-sm) !important; height: 32px !important; line-height: 32px !important; }
.layui-layer-page .layui-layer-content { overflow-y: auto; padding: 4px 0; }

/* Select dropdown z-index fix */
.layui-layer-page .layui-form-select dl { z-index: 9999; }

/* 修正表单下拉箭头与文字的水平对齐 */
.layui-form-select .layui-edge { top: 50% !important; margin-top: -6px !important; }

/* --------------------------------------------------------------------------
   18. Login Page
   -------------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #0e2f44 0%, #1a5276 40%, #2980b9 100%);
    position: relative; overflow: hidden;
}
.login-page::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(93,173,226,0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(91,184,120,0.10) 0%, transparent 40%);
    animation: loginBgFloat 20s ease-in-out infinite alternate;
}
@keyframes loginBgFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(2%, 2%) scale(1.05); }
}

.login-card {
    position: relative; z-index: 1;
    width: 420px; max-width: 94vw;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    padding: 40px 36px 36px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: loginCardEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes loginCardEnter {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card .login-logo {
    text-align: center; margin-bottom: 6px;
}
.login-card .login-logo i {
    font-size: 40px; color: var(--color-primary-light);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-card h2 {
    text-align: center; font-size: 22px; font-weight: 700;
    color: var(--color-primary-dark); margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.login-card .login-sub {
    text-align: center; font-size: 13px; color: var(--color-text-muted);
    margin-bottom: 28px;
}
.login-card .layui-form-item { margin-bottom: 18px; }
.login-card .layui-input {
    height: 44px; border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    padding: 0 16px; font-size: 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.login-card .layui-input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(41,128,185,0.15);
}
.login-card .layui-btn {
    width: 100%; height: 44px; line-height: 44px;
    border-radius: var(--radius-md); font-size: 15px; font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    border: none; letter-spacing: 1px;
}
.login-card .layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(41,128,185,0.35);
}
.login-card .captcha-row {
    display: flex; gap: 10px; align-items: center;
}
.login-card .captcha-row .layui-input { flex: 1; }
.login-card .captcha-row img {
    height: 44px; border-radius: var(--radius-md); cursor: pointer;
    border: 2px solid var(--color-border);
    transition: border-color var(--transition-fast);
}
.login-card .captcha-row img:hover { border-color: var(--color-primary-light); }

/* --------------------------------------------------------------------------
   18b. Public Container (for query / public pages)
   -------------------------------------------------------------------------- */
.public-container { max-width: 460px; margin: 50px auto 20px; background: #fff; padding: 35px 30px; border-radius: var(--radius-xl); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.public-container h2 { text-align: center; margin-bottom: 6px; color: var(--color-primary-dark, #1e3a5f); font-size: 20px; font-weight: 700; }
.public-container .layui-form-item { margin-bottom: 16px; }
.public-container .layui-input { height: 42px; border-radius: var(--radius-md); border: 2px solid var(--color-border); padding: 0 14px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.public-container .layui-input:focus { border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(41,128,185,0.15); }
.public-container .layui-btn { height: 42px; line-height: 42px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); border: none; }
.public-container .layui-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(41,128,185,0.35); }
.public-container .layui-alert-warning { border-radius: var(--radius-md); padding: 12px 16px; text-align: center; }
@media (max-width: 520px) {
    .public-container { max-width: 95%; margin: 30px auto 10px; padding: 24px 16px; }
    .public-container h2 { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   19. Animations
   -------------------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .layui-col-md3 { width: 50% !important; float: left; }
}
@media (max-width: 992px) {
    .layui-layout-admin .layui-side { left: calc(-1 * var(--sidebar-width)); transition: left var(--transition-slow); }
    .layui-layout-admin .layui-side.open { left: 0; box-shadow: 6px 0 24px rgba(0,0,0,0.25); }
    .layui-layout-admin .layui-body { left: 0; }
    .layui-header .hamburger { display: block; }
    .layui-header .header-right .user-dropdown { display: none; }
    .side-user-bar { display: block; }
}
@media (max-width: 767px) {
    .layui-layout-admin .layui-body { bottom: 0; }
    .data-table-view { display: none; }
    .data-card-view { display: block; }
    .stat-card { padding: 18px 14px; }
    .stat-card .num { font-size: 24px; }
    .layui-col-md3, .layui-col-md6 { width: 50% !important; float: left; }
    .layui-col-md6 { width: 100% !important; margin-bottom: 10px; }
    .search-box .layui-inline { display: block; margin-bottom: 8px; }
    .layui-body .layui-main { padding: 12px; }
    .page-box { text-align: center; }
    .layui-form-label { padding: 9px 12px; width: auto; }
    .login-card { padding: 28px 20px 24px; }
    .login-card h2 { font-size: 18px; }
}
@media (max-width: 480px) {
    .layui-col-md3 { width: 100% !important; }
    .layui-header .brand { font-size: 14px; padding: 0 10px; }
    .layui-header .header-right .header-item.year-item { display: none; }
    .data-card { padding: 12px 14px; }
    .layui-body .layui-main { padding: 10px; }
    .stat-card .num { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   20. Mobile Table Scroll Hint
   -------------------------------------------------------------------------- */
[class*="-table-wrap"] {
    background: linear-gradient(to right, var(--color-card) 30%, transparent),
                radial-gradient(ellipse at right, rgba(0,0,0,0.08) 0%, transparent 70%);
    background-attachment: local, scroll;
    background-repeat: no-repeat;
    background-size: 40px 100%, 20px 100%;
    background-position: right;
}

/* --------------------------------------------------------------------------
   21. Form Validation — inline error highlight
   -------------------------------------------------------------------------- */
.layui-form-danger {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(231,76,60,0.15) !important;
}

/* --------------------------------------------------------------------------
   22. Sidebar — active item left accent bar
   -------------------------------------------------------------------------- */
.layui-side .layui-nav-tree .layui-nav-item.layui-this::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 20px;
    background: var(--color-sidebar-accent);
    border-radius: 0 3px 3px 0;
}

/* --------------------------------------------------------------------------
   23. Readonly inputs — unified visual cue
   -------------------------------------------------------------------------- */
input[readonly], textarea[readonly] {
    cursor: not-allowed;
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   24. Layer close button — hover rotate
   -------------------------------------------------------------------------- */
.layui-layer-setwin .layui-layer-close {
    transition: transform 0.25s ease;
}
.layui-layer-setwin .layui-layer-close:hover {
    transform: rotate(90deg);
}

.tag-info { background: #e8f6f8; color: #117a8b; }
.tag-purple { background: #f4ecf7; color: #7d3c98; }
.tag-gold { background: #fdf6e3; color: #9c7a1f; }
[data-theme="dark"] .tag-info { background: #10333a; color: #4dd0e1; }
[data-theme="dark"] .tag-purple { background: #2a1a33; color: #b07cd6; }
[data-theme="dark"] .tag-gold { background: #3a2f10; color: #d4b106; }