* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background: #f0f2f5;
    color: #333;
    font-size: 14px;
}

/* 登录页 */
.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #4a7cf7 0%, #6a5af9 100%);
}
.login-box {
    width: 360px;
    background: #fff;
    border-radius: 8px;
    padding: 36px 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.login-box h1 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 24px;
    color: #333;
}

/* 顶部导航 */
.navbar {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 24px;
    height: 52px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.navbar .title {
    font-size: 16px;
    font-weight: bold;
    margin-right: 40px;
    color: #4a7cf7;
}
.navbar a {
    margin-right: 24px;
    color: #555;
    text-decoration: none;
    line-height: 52px;
}
.navbar a.active { color: #4a7cf7; font-weight: bold; }
.navbar .right { margin-left: auto; display: flex; align-items: center; }
.navbar .right span { margin-right: 16px; color: #666; }

.container { max-width: 1000px; margin: 24px auto; padding: 0 16px; }

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.toolbar .spacer { margin-left: auto; }

input[type=text], input[type=password], input[type=number], select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    outline: none;
    background: #fff;
}
input:focus, select:focus { border-color: #4a7cf7; }

.btn {
    display: inline-block;
    height: 34px;
    line-height: 32px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    background: #4a7cf7;
    color: #fff;
}
.btn:hover { opacity: .88; }
.btn.plain { background: #fff; color: #555; border-color: #d9d9d9; }
.btn.danger { background: #f5222d; }
.btn.small { height: 26px; line-height: 24px; padding: 0 10px; font-size: 12px; }
.btn.block { width: 100%; height: 38px; line-height: 38px; }

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
th, td {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 12px;
    text-align: left;
}
th { background: #fafafa; color: #666; font-weight: normal; }
tr:hover td { background: #f7faff; }
.empty td { text-align: center; color: #999; padding: 24px 0; }

.pager { margin: 14px 0; display: flex; align-items: center; gap: 8px; }
.pager .info { color: #888; margin-right: auto; }

/* 弹窗 */
.mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.mask.show { display: flex; }
.dialog {
    width: 420px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
}
.dialog h3 { margin-bottom: 18px; font-size: 16px; }
.form-item { margin-bottom: 14px; display: flex; align-items: center; }
.form-item label { width: 80px; text-align: right; margin-right: 12px; color: #555; }
.form-item input, .form-item select { flex: 1; }
.dialog .actions { text-align: right; margin-top: 20px; }
.dialog .actions .btn { margin-left: 10px; }

.tip { color: #999; font-size: 12px; }