* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }

/* Login Page */
.login-wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%); }
.login-box { width: 420px; background: #fff; border-radius: 12px; padding: 50px 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-box h2 { text-align: center; color: #1e3c72; margin-bottom: 8px; font-size: 24px; }
.login-box .subtitle { text-align: center; color: #999; margin-bottom: 30px; font-size: 14px; }
.login-box .layui-form-item { margin-bottom: 20px; }
.login-box .layui-input { height: 44px; border-radius: 6px; }
.login-box .login-btn { width: 100%; height: 46px; background: linear-gradient(135deg, #1e3c72, #2a5298); border: none; border-radius: 6px; color: #fff; font-size: 16px; cursor: pointer; transition: opacity 0.3s; }
.login-box .login-btn:hover { opacity: 0.9; }

/* Main Layout */
.layout-wrapper { display: flex; height: 100vh; overflow: hidden; }
.layout-side { width: 220px; background: #20222a; display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s; overflow: hidden; }
.layout-side.collapsed { width: 60px; }
.layout-side .logo { height: 60px; display: flex; align-items: center; padding: 0 20px; color: #fff; font-size: 16px; font-weight: bold; background: #191b22; white-space: nowrap; overflow: hidden; }
.layout-side .logo i { font-size: 22px; margin-right: 10px; }
.layout-side.collapsed .logo span { display: none; }
.layout-side .layui-nav { background: transparent; }
.layout-side .layui-nav .layui-nav-item a { color: #b0b4c0; padding: 0 20px; height: 46px; line-height: 46px; font-size: 14px; }
.layout-side .layui-nav .layui-nav-item a:hover { color: #fff; }
.layout-side .layui-nav .layui-nav-item a i { margin-right: 10px; width: 20px; text-align: center; }
.layout-side .layui-nav .layui-this, .layout-side .layui-nav .layui-this>a { background: #1e3c72 !important; color: #fff !important; }
.layout-side .layui-nav .layui-nav-child { background: #191b22; }
.layout-side .layui-nav .layui-nav-child a { color: #b0b4c0; padding-left: 50px; }
.layout-side .layui-nav-tree .layui-nav-bar { display: none; }

.layout-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f0f2f5; }
.layout-header { height: 60px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); z-index: 10; flex-shrink: 0; }
.layout-header .toggle-btn { cursor: pointer; font-size: 20px; color: #666; }
.layout-header .header-right { display: flex; align-items: center; gap: 20px; }
.layout-header .header-right .user-info { display: flex; align-items: center; gap: 8px; color: #333; cursor: pointer; }
.layout-header .header-right .user-info img { width: 32px; height: 32px; border-radius: 50%; }

.layout-tabs { background: #fff; border-bottom: 1px solid #e8e8e8; padding: 0 10px; display: flex; align-items: center; height: 40px; flex-shrink: 0; overflow-x: auto; }
.layout-tabs .tab-item { display: inline-flex; align-items: center; padding: 0 16px; height: 32px; margin: 4px 2px; border-radius: 4px; font-size: 13px; color: #666; cursor: pointer; white-space: nowrap; border: 1px solid #e8e8e8; background: #fafafa; }
.layout-tabs .tab-item.active { background: #1e3c72; color: #fff; border-color: #1e3c72; }
.layout-tabs .tab-item .close { margin-left: 6px; font-size: 12px; }

.layout-body { flex: 1; overflow: hidden; }
.layout-body iframe { width: 100%; height: 100%; border: none; }

/* Content Pages */
.page-container { padding: 16px; min-height: 100%; background: #f0f2f5; }
.page-header { margin-bottom: 16px; }
.page-header h3 { font-size: 18px; color: #333; font-weight: 600; }
.page-header .desc { font-size: 13px; color: #999; margin-top: 4px; }
.search-bar { background: #fff; padding: 16px; border-radius: 6px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.search-bar .layui-form-item { margin-bottom: 0; }
.data-table { background: #fff; padding: 16px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.toolbar { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* Dashboard Cards */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 16px; }
.stat-card .icon { width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; }
.stat-card .icon.blue { background: linear-gradient(135deg, #1e3c72, #2a5298); }
.stat-card .icon.green { background: linear-gradient(135deg, #11998e, #38ef7d); }
.stat-card .icon.orange { background: linear-gradient(135deg, #f2994a, #f2c94c); }
.stat-card .icon.red { background: linear-gradient(135deg, #eb3349, #f45c43); }
.stat-card .info h4 { font-size: 28px; font-weight: 700; color: #333; }
.stat-card .info p { font-size: 14px; color: #999; margin-top: 4px; }

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-box { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.chart-box h4 { font-size: 16px; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }

.ranking-list { width: 100%; }
.ranking-list tr td { padding: 10px 12px; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.ranking-list tr:hover { background: #f8f9fa; }
.ranking-badge { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; font-size: 12px; font-weight: bold; }
.ranking-badge.gold { background: #ffd700; color: #fff; }
.ranking-badge.silver { background: #c0c0c0; color: #fff; }
.ranking-badge.bronze { background: #cd7f32; color: #fff; }
.ranking-badge.normal { background: #e8e8e8; color: #999; }

/* Global form label fix — prevent wrapping for 4+ character Chinese labels */
.layui-form-label { white-space: nowrap; }

/* Layer popup form layout — wider labels for popup forms */
.layui-layer-content .layui-form { padding: 20px; }
.layui-layer-content .layui-form-label { width: 110px; }
.layui-layer-content .layui-input-block { margin-left: 130px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: #333; margin-bottom: 6px; }

/* Responsive */
@media (max-width: 1200px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .stat-cards { grid-template-columns: 1fr; } .chart-row { grid-template-columns: 1fr; } }

/* Badge & Status */
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.status-badge.green { background: #e6f7e9; color: #52c41a; }
.status-badge.blue { background: #e6f0ff; color: #1e3c72; }
.status-badge.orange { background: #fff7e6; color: #fa8c16; }
.status-badge.red { background: #fff1f0; color: #f5222d; }
.status-badge.gray { background: #f5f5f5; color: #999; }

/* Attachment Preview */
.attachment-list { display: flex; flex-wrap: wrap; gap: 12px; }
.attachment-item { width: 120px; text-align: center; border: 1px solid #e8e8e8; border-radius: 6px; padding: 8px; cursor: pointer; }
.attachment-item img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; }
.attachment-item .name { font-size: 12px; color: #666; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item .actions { margin-top: 4px; }
.attachment-item .actions a { font-size: 12px; margin: 0 4px; color: #1e3c72; }