* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background: #f2f4f7;
    color: #222;
    font-size: 14px;
}

a {
    color: #1a73e8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 登录 */
.login-body {
    background: linear-gradient(135deg, #2b5876, #4e4376);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: #fff;
    border-radius: 10px;
    padding: 34px 36px;
    width: 380px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.login-box h2 {
    margin: 0 0 20px;
    text-align: center;
    font-size: 22px;
}

.login-box .form-row {
    margin-bottom: 14px;
}

.login-box input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.login-box input:focus {
    border-color: #1a73e8;
}

/* 顶栏 */
.topbar {
    height: 52px;
    background: #1f2d3d;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.topbar .logo {
    font-size: 18px;
    font-weight: 700;
    margin-right: 26px;
    color: #fff;
}

.topbar .nav a {
    color: #cbd5e0;
    padding: 15px 14px;
    display: inline-block;
}

.topbar .nav a:hover {
    color: #fff;
    text-decoration: none;
    background: #2b3c50;
}

.topbar .nav a.on {
    color: #fff;
    background: #2f80ed;
}

.topbar .right {
    margin-left: auto;
    color: #cbd5e0;
    font-size: 13px;
}

.topbar .right a {
    color: #ffd166;
    margin-left: 12px;
}

.wrap {
    padding: 16px;
}

h1.page-title {
    font-size: 18px;
    margin: 0 0 14px;
    font-weight: 600;
}

/* 卡片 */
.card {
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}

/* 统计卡 */
.stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat {
    flex: 1;
    min-width: 150px;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.stat .t {
    color: #7b8794;
    font-size: 13px;
}

.stat .v {
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px;
}

.stat.blue .v {
    color: #2f80ed;
}

.stat.green .v {
    color: #0f9d58;
}

.stat.orange .v {
    color: #f2994a;
}

.stat.red .v {
    color: #eb5757;
}

/* 表格 */
table.tb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.tb th {
    background: #f6f8fa;
    text-align: left;
    padding: 9px 8px;
    border-bottom: 1px solid #e3e8ee;
    white-space: nowrap;
    font-weight: 600;
    color: #4a5568;
}

table.tb td {
    padding: 8px;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}

table.tb tr:hover td {
    background: #fafcff;
}

/* 按钮 */
.btn {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #d0d7de;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}

.btn:hover {
    background: #f2f4f7;
    text-decoration: none;
}

.btn.primary {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}

.btn.primary:hover {
    background: #1765cc;
}

.btn.danger {
    background: #eb5757;
    border-color: #eb5757;
    color: #fff;
}

.btn.ok {
    background: #0f9d58;
    border-color: #0f9d58;
    color: #fff;
}

.btn.sm {
    padding: 3px 8px;
    font-size: 12px;
}

/* 表单 */
.form-row {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row>label {
    width: 96px;
    text-align: right;
    color: #555;
    flex: none;
}

.form-row input,
.form-row select,
.form-row textarea {
    padding: 6px 9px;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: #1a73e8;
}

.form-row textarea {
    width: 320px;
    height: 56px;
}

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.toolbar input,
.toolbar select {
    padding: 6px 9px;
    border: 1px solid #d0d7de;
    border-radius: 5px;
    font-size: 13px;
}

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

.alert {
    padding: 9px 12px;
    border-radius: 5px;
    margin-bottom: 12px;
    font-size: 13px;
}

.alert.ok {
    background: #e8f5e9;
    color: #137333;
}

.alert.err {
    background: #fdecea;
    color: #c5221f;
}

.alert.warn {
    background: #fff8e1;
    color: #8d6e00;
}

.pager {
    margin-top: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.pager a {
    padding: 4px 10px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    color: #333;
    background: #fff;
}

.pager a.on {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

.pager .pt {
    color: #7b8794;
    margin-right: 6px;
}

.tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 12px;
    background: #eef2f7;
    color: #52606d;
}

.tag.green {
    background: #e6f4ea;
    color: #137333;
}

.tag.red {
    background: #fce8e6;
    color: #c5221f;
}

.tag.blue {
    background: #e8f0fe;
    color: #1967d2;
}

.tag.orange {
    background: #fef3e2;
    color: #b06000;
}

.empty {
    padding: 40px;
    text-align: center;
    color: #9aa5b1;
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.modal.on {
    display: flex;
}

.modal .box {
    background: #fff;
    border-radius: 8px;
    width: 640px;
    max-width: 94vw;
    max-height: 90vh;
    overflow: auto;
    padding: 18px 20px;
}

.modal .box h3 {
    margin: 0 0 14px;
}

.grid2 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.grid2>div {
    flex: 1;
    min-width: 320px;
}