@charset "utf-8";
/* ==========================================================
   后台样式
   ========================================================== */

:root {
    --brand: #006598;
    --brand-d: #004B72;
    --brand-l: #2A9FD9;
    --blue-50: #F0F7FB;
    --blue-100: #D9E8F0;
    --orange: #F59331;
    --orange-d: #D97818;
    --orange-50: #FFF6ED;
    --mint-bg: #EBF7F4;
    --red-bg: #FDEEEF;
    --ink: #2C3E50;
    --ink-2: #5A6B7F;
    --ink-3: #8A99AB;
    --line: #E4EBF2;
    --bg: #F2F5F9;
    --sidebar-w: 206px;
    --radius: 6px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px; line-height: 1.7; color: var(--ink); background: var(--bg);
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--orange-d); }
img { max-width: 100%; border: 0; display: block; }
ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ==================== 登录页 ==================== */
.login-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #004B72 0%, #006598 45%, #2A9FD9 100%);
    padding: 20px;
}
.login-wrap { width: 100%; max-width: 400px; }
.login-card {
    background: #fff; border-radius: 12px; padding: 40px 38px 28px;
    box-shadow: 0 12px 48px rgba(0, 30, 60, .28);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 { font-size: 25px; color: var(--brand-d); letter-spacing: 1px; }
.login-logo p { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.login-card .f-row { margin-bottom: 16px; }
.login-card .f-row label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.login-card .f-row input {
    width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--line);
    border-radius: 5px; font-size: 15px; outline: none; transition: border-color .18s;
}
.login-card .f-row input:focus { border-color: var(--brand); border-color: var(--brand); }
.btn-primary {
    width: 100%; height: 44px; border: 0; border-radius: 5px;
    background: var(--orange); color: #fff; font-size: 16px; font-weight: 600;
    cursor: pointer; transition: background .18s;
}
.btn-primary:hover { background: var(--orange-d); }
.login-foot { text-align: center; margin-top: 22px; font-size: 13px; }
.login-foot a { color: var(--ink-3); }

/* ==================== 框架 ==================== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w); flex-shrink: 0; background: var(--brand-d);
    color: #B8D8EC; display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; overflow-y: auto;
}
.sb-logo {
    height: 58px; display: flex; align-items: center; padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 15.5px;
    color: #fff; font-weight: 600; letter-spacing: .5px; flex-shrink: 0;
}
.sb-group { padding: 14px 18px 6px; font-size: 11.5px; color: #6FA6C9; letter-spacing: 1px; }
.sb-nav a {
    display: flex; align-items: center; gap: 9px; padding: 10px 18px;
    font-size: 14px; color: #B8D8EC; border-left: 3px solid transparent;
}
.sb-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sb-nav a.on {
    background: rgba(255, 255, 255, .12); color: #fff;
    border-left-color: var(--orange); font-weight: 500;
}
.sb-nav .ico { width: 18px; text-align: center; opacity: .85; font-size: 13px; }
.sb-foot { margin-top: auto; padding: 14px 18px; font-size: 12.5px; border-top: 1px solid rgba(255,255,255,.1); }
.sb-foot a { color: #B8D8EC; }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: 58px; background: #fff; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; position: sticky; top: 0; z-index: 50;
}
.topbar .crumb { font-size: 15px; color: var(--ink); font-weight: 600; }
.topbar .t-right { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-2); }
.topbar .t-right a { color: var(--ink-2); }
.topbar .t-right a:hover { color: var(--orange-d); }

.content { padding: 22px; flex: 1; }

/* ==================== 卡片 ==================== */
.box { background: #fff; border-radius: var(--radius); box-shadow: 0 1px 4px rgba(0, 60, 110, .06); margin-bottom: 18px; }
.box-head {
    padding: 14px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.box-head h2 { font-size: 15.5px; color: var(--ink); font-weight: 600; }
.box-head .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.box-body { padding: 20px; }
.box-body.tight { padding: 0; }
/* 表格列较多时横向滚动，避免列头被挤压换行 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .tb { min-width: 640px; }
/* 明细表列更多，需要更宽的最小宽度 */
.table-scroll.wide .tb { min-width: 1290px; }

/* 并列分布区块：自适应三列，窄屏自动换行不挤压 */
.dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; align-items: start; }

/* ==================== 统计卡 ==================== */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
/* 指标多的时候（如效果分析有 7 项）用自适应列宽，避免卡片换行错乱 */
.stat-row.cols-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
    background: #fff; border-radius: var(--radius); padding: 20px 22px;
    box-shadow: 0 1px 4px rgba(0, 60, 110, .06); position: relative; overflow: hidden;
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.stat.o::before { background: var(--orange); }
.stat.m::before { background: #7FC7B8; }
.stat.p::before { background: #B49AD6; }
.stat b { display: block; font-size: 29px; color: var(--brand-d); font-weight: 700; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--ink-3); }
.stat .trend { font-size: 12px; margin-top: 5px; color: var(--ink-3); }

/* ==================== 表格 ==================== */
.tb { font-size: 13.5px; }
.tb th {
    background: var(--blue-50); color: var(--ink-2); font-weight: 600;
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
    white-space: nowrap; font-size: 13px;
}
.tb td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb tbody tr:hover { background: #FAFCFE; }
.tb .op { white-space: nowrap; }
.tb .op a { margin-right: 10px; font-size: 13px; }
.tb .op a.del { color: #D9534F; }
.tb .op a.del:hover { color: #B93A36; }
.tb .title-cell { font-weight: 500; color: var(--ink); }
.tb .title-cell a { color: var(--ink); }
.tb .title-cell a:hover { color: var(--brand); }
.tb .thumb-cell { width: 76px; }
.tb .thumb-cell img { width: 68px; height: 46px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.tb .chk { width: 34px; text-align: center; }

/* 标签 */
.tag-pill {
    display: inline-block; padding: 1px 9px; border-radius: 10px;
    font-size: 12px; line-height: 1.7;
}
.tag-green { background: var(--mint-bg); color: #2F6E62; }
.tag-gray { background: #F0F2F5; color: var(--ink-3); }
.tag-orange { background: var(--orange-50); color: var(--orange-d); }
.tag-blue { background: var(--blue-50); color: var(--brand); }
.tag-red { background: var(--red-bg); color: #A63E46; }

/* ==================== 分页 ==================== */
.pager { display: flex; align-items: center; gap: 5px; padding: 14px 20px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.pager .pinfo { color: var(--ink-3); font-size: 13px; margin-right: auto; }
.pbtn {
    min-width: 30px; height: 30px; line-height: 28px; text-align: center;
    padding: 0 9px; border: 1px solid var(--line); border-radius: 4px;
    font-size: 13px; color: var(--ink-2); background: #fff;
}
.pbtn:hover { border-color: var(--brand); color: var(--brand); }
.pbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pbtn.dis { color: #CCC; border-color: var(--line); cursor: not-allowed; }
.pdots { color: var(--ink-3); padding: 0 3px; }

/* ==================== 表单 ==================== */
.fm-row { margin-bottom: 16px; }
.fm-row > label { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 500; }
.fm-row > label em { color: #D9534F; font-style: normal; }
.fm-row .hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.6; }
.fm-row input[type=text], .fm-row input[type=password], .fm-row input[type=number],
.fm-row input[type=email], .fm-row input[type=url], .fm-row input[type=date],
.fm-row textarea, .fm-row select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 5px; font-size: 14px; color: var(--ink); outline: none;
    transition: border-color .18s; background: #fff;
}
.fm-row input:focus, .fm-row textarea:focus, .fm-row select:focus { border-color: var(--brand); }
.fm-row textarea { resize: vertical; min-height: 80px; line-height: 1.7; }
.fm-row textarea.tall { min-height: 420px; font-family: Consolas, Monaco, "Courier New", monospace; font-size: 13px; }
.fm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.fm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }

.radio-row label, .check-row label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13.5px; color: var(--ink-2); margin-right: 18px; cursor: pointer;
}

/* 按钮 */
.btn {
    display: inline-block; padding: 0 18px; height: 36px; line-height: 34px;
    border: 1px solid var(--line); border-radius: 5px; background: #fff;
    color: var(--ink-2); font-size: 13.5px; cursor: pointer;
    transition: all .16s; text-align: center;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-d); border-color: var(--brand-d); color: #fff; }
.btn-orange { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-d); border-color: var(--orange-d); color: #fff; }
.btn-danger { background: #D9534F; border-color: #D9534F; color: #fff; }
.btn-danger:hover { background: #B93A36; border-color: #B93A36; color: #fff; }
.btn-sm { height: 28px; line-height: 26px; padding: 0 11px; font-size: 12.5px; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-group.right { justify-content: flex-end; }

/* ==================== 提示 ==================== */
.alert { padding: 11px 16px; border-radius: 5px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.7; }
.alert-ok { background: var(--mint-bg); color: #2F6E62; border: 1px solid #BFE3DA; }
.alert-err { background: var(--red-bg); color: #A63E46; border: 1px solid #F5C9CD; }
.alert-info { background: var(--blue-50); color: var(--brand); border: 1px solid var(--blue-100); }
.alert-warn { background: var(--orange-50); color: var(--orange-d); border: 1px solid #FFD5B0; }

/* ==================== 图片上传器 ==================== */
.img-picker { display: flex; gap: 12px; align-items: flex-start; }
.img-preview {
    width: 130px; height: 90px; border: 1px dashed var(--line); border-radius: 5px;
    background: var(--blue-50); display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; color: var(--ink-3); font-size: 12px; text-align: center;
}
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-preview.has { border-style: solid; }
.img-picker .side { flex: 1; min-width: 0; }

/* ==================== 工具类 ==================== */
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.mb0 { margin-bottom: 0; }
.mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; }
.mt16 { margin-top: 16px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex.between { justify-content: space-between; }
.sep { height: 1px; background: var(--line); margin: 18px 0; }

.log-list { font-size: 13px; }
.log-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 12px; }
.log-list li:last-child { border-bottom: 0; }
.log-list .t { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

/* ==================== 响应式 ==================== */
@media (max-width: 1000px) {
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .fm-grid, .fm-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    :root { --sidebar-w: 0px; }
    .sidebar { transform: translateX(-100%); transition: transform .25s; width: 220px; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .sb-toggle { display: block !important; }
    .stat-row { grid-template-columns: 1fr; }
    .content { padding: 14px; }
}
.sb-toggle {
    display: none; width: 36px; height: 36px; border: 1px solid var(--line);
    background: #fff; border-radius: 4px; font-size: 17px; cursor: pointer; margin-right: 12px;
}