/* ===== 设计变量（与 App 同一套 token：主色 + 容器色 + 状态色） ===== */
:root {
    --brand: #2e7d46;
    --brand-dark: #1f5c33;
    --brand-soft: #e6f4e9;          /* 大面积浅绿底（说明块 / 悬停行 / 已占用苗床） */
    --primary-container: #b4f0be;   /* 选中态 / 强调按钮 / 出库中 */
    --on-primary-container: #00210c;
    --secondary-container: #d3e8d4;
    --on-secondary-container: #0e1f12;
    --tertiary-container: #bee9fb;  /* 已分苗棚 / 在线会话 */
    --on-tertiary-container: #001f29;
    --warn-container: #ffe7b8;      /* 分苗床中 / 草稿 */
    --on-warn-container: #3f2e00;
    --error: #ba1a1a;
    --error-container: #ffdad6;     /* 已取消 */
    --on-error-container: #410002;
    --surface-high: #e5eae2;        /* 出库完成 / 中性灰容器 */

    --bg: #f1f5ed;
    --panel: #ffffff;
    --ink: #191d18;
    --ink-2: #43483f;
    --ink-3: #73796e;
    --line: #e0e6de;
    --line-2: #eef2eb;
    --outline-variant: #c3c8be;
    --sidebar: #0f2419;
    --sidebar-ink: #a9c2b3;
    --radius: 14px;
    --r-ctl: 10px;
    --shadow: 0 1px 2px rgba(15, 36, 25, .04);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 16px; }

/* ===== 后台布局 ===== */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 212px;
    flex: 0 0 212px;
    background: var(--sidebar);
    color: var(--sidebar-ink);
    padding: 16px 12px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.brand { display: flex; align-items: center; gap: 9px; padding: 2px 4px 13px; border-bottom: 1px solid rgba(169, 194, 179, .18); margin-bottom: 11px; }

.brand-logo {
    width: 29px; height: 29px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    flex: 0 0 29px;
}

.brand-text { color: #fff; font-weight: 700; font-size: 13.5px; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 11px;
    border-radius: 9px;
    color: var(--sidebar-ink);
    font-weight: 500;
    font-size: 13px;
    transition: background .15s, color .15s;
}

.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.active { background: var(--brand); color: #fff; font-weight: 600; }
.nav svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 17px; }

.sidebar-foot {
    margin-top: auto;
    padding: 10px 11px 0;
    border-top: 1px solid rgba(169, 194, 179, .14);
    font-size: 11.5px;
    line-height: 1.7;
}

.sidebar-foot code { color: #dcefe2; background: rgba(255, 255, 255, .08); padding: 1px 5px; border-radius: 4px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 54px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar-path { color: var(--ink-2); font-size: 13px; }

.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }

.avatar {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    font-size: 12.5px;
    font-weight: 600;
}

.content { padding: 18px 20px 40px; max-width: 1400px; width: 100%; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.page-head h1 { font-size: 19px; font-weight: 700; }
.page-head p { margin: 3px 0 0; color: var(--ink-2); font-size: 12.5px; }

.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ===== 卡片 ===== */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
}

.card-body { padding: 0 18px 18px; }
.card > .card-body:first-child { padding-top: 16px; }

.card-head h2 { font-size: 14.5px; font-weight: 650; }

.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

@media (max-width: 1080px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-2, .grid-main { grid-template-columns: minmax(0, 1fr); }
    .sidebar { display: none; }
    .content, .topbar { padding-left: 18px; padding-right: 18px; }
}

.stat { padding: 16px 18px; }
.stat-label { color: var(--ink-2); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: .3px; margin-top: 6px; }
.stat-value small { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.stat-sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }

/* ===== 表格：表头 12px 灰、行高 44、hairline 分隔 ===== */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 13px; }

th {
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f7faf6; }

.cell-main { font-weight: 600; }
.cell-sub { color: var(--ink-3); font-size: 12.5px; }
.cell-title { display: flex; align-items: center; gap: 12px; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.thumb {
    width: 56px; height: 38px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid var(--line);
    flex: 0 0 56px;
    background: var(--brand-soft);
}

.empty { padding: 44px 18px; text-align: center; color: var(--ink-3); }

/* ===== 徽标（容器色 chip，带小圆点；订单状态各用独立类名，不占用中性 badge-muted） ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }

/* 订单状态（与 App 一一对应）：已分苗棚＝蓝 / 分苗床中＝琥珀 / 出库中＝绿 / 出库完成＝灰 / 已取消＝红 */
.badge-assigned { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.badge-assigning { background: var(--warn-container); color: var(--on-warn-container); }
.badge-outbound { background: var(--primary-container); color: var(--on-primary-container); }
.badge-done { background: var(--surface-high); color: var(--ink-2); }
.badge-cancelled { background: var(--error-container); color: var(--on-error-container); }
/* CMS 文章状态沿用同一套容器色 */
.badge-ok { background: var(--primary-container); color: var(--on-primary-container); }
.badge-info { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.badge-warn { background: var(--warn-container); color: var(--on-warn-container); }
.badge-danger { background: var(--error-container); color: var(--on-error-container); }
.badge-muted { background: #edf0ea; color: var(--ink-2); }
.badge-brand { background: var(--primary-container); color: var(--on-primary-container); }

/* 苗棚管理人员的角色徽标是「我的苗棚」入口：悬停加深，提示可点击 */
a.user-role:hover { filter: brightness(.94); }

/* ===== 按钮：主色填充＝主操作；描边＝次要；浅绿容器＝行内作业入口；文字＝第三级 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-ctl);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { background: #fff; border-color: var(--outline-variant); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); background: #fff; color: var(--brand-dark); }
.btn-tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn-tonal:hover { background: #a3e8af; color: var(--on-primary-container); }
.btn-danger { background: #fff; border-color: #e7b6b2; color: var(--error); }
.btn-danger:hover { background: #fff5f4; border-color: var(--error); color: var(--error); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn.disabled { pointer-events: none; opacity: .45; }

/* ===== 表单 ===== */
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-full { grid-column: 1 / -1; }

@media (max-width: 760px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field label { display: block; font-weight: 550; margin-bottom: 6px; font-size: 13px; }
.field .hint { color: var(--ink-3); font-size: 12px; margin-top: 5px; }

.input, select.input, textarea.input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-ctl);
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46, 125, 70, .14); }
.input.is-invalid { border-color: var(--error); }
textarea.input { resize: vertical; min-height: 88px; }
textarea.content-input { min-height: 320px; line-height: 1.8; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--brand); }

.field-error { color: var(--error); font-size: 12px; margin-top: 5px; }

/* ===== 分配苗床：苗棚清单 + 批量填写 ===== */
.gh-list { display: flex; flex-direction: column; }

.gh-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.gh-row:last-child { border-bottom: 0; }
.gh-row .btn { margin-left: auto; }
/* 行尾说明（如「非本人负责」，没有操作按钮时靠右） */
.gh-row .row-end { margin-left: auto; }
.gh-row-active { background: var(--primary-container); color: var(--on-primary-container); border-radius: 10px; border-bottom-color: transparent; }

/* 订单详情的「分配苗床数据 / 出库数据」：整行就是 <summary>，点一下就地展开明细 */
.gh-details > summary { list-style: none; cursor: pointer; }
.gh-details > summary::-webkit-details-marker { display: none; }
.gh-details[open] > summary { background: transparent; }

.gh-caret {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-right: 1.6px solid var(--ink-3);
    border-bottom: 1.6px solid var(--ink-3);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.gh-details[open] > summary .gh-caret { transform: rotate(45deg); }

.gh-detail-body {
    padding: 4px 0 12px 20px;
}

.gh-detail-body .bed-grid { max-height: 232px; }

/* 出库数据展开区上方的一行：该棚各品种的「已出库 / 分到」 */
.variety-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: 10px;
}

.fill-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-3);
}

.fill-bar .input { width: 96px; padding: 6px 10px; font-size: 13px; }
.table-input { width: 128px; }

.table-assign .col-trays { width: 180px; }
.table-assign .col-ops { width: 96px; }

/* ===== 新建订单：品种行 ===== */
.item-rows { display: flex; flex-direction: column; }

.item-row-head, .item-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 120px 160px minmax(180px, 1.5fr) 56px;
    gap: 10px;
    align-items: start;
}

.item-row-head { padding-bottom: 8px; color: var(--ink-3); font-size: 12px; }

.item-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.item-row:last-child { border-bottom: 0; }
.item-row .check-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.item-row .col-ops { text-align: right; }

@media (max-width: 900px) {
    .item-row-head { display: none; }
    .item-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .item-row .col-seed, .item-row .col-gh { grid-column: 1 / -1; }
}

/* 出库登记：选择区按品种分组 */
.variety-group { padding: 4px 0 10px; }
.variety-group + .variety-group { border-top: 1px dashed var(--line); padding-top: 12px; }
.variety-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

/* 苗床可能有几百个：选择区做成小方块网格，支持连选/滑动涂选 */
.bed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
    max-height: 292px;
    overflow-y: auto;
    padding: 2px;
}

.bed-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-ctl);
    background: var(--panel);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.bed-chip:hover { border-color: var(--brand); color: var(--brand-dark); }

/* 该订单已经有分配数量的苗床 */
.bed-chip-has { background: var(--brand-soft); border-color: #c8e6cf; color: var(--brand-dark); }

.bed-chip[aria-pressed="true"] {
    background: var(--primary-container);
    border-color: var(--brand);
    color: var(--on-primary-container);
    font-weight: 650;
}

.bed-chip-num { font-size: 11px; font-weight: 600; opacity: .75; }

/* 手机上开启滑动选择后，手指划过苗床不再滚动页面 */
.bed-grid.sweep .bed-chip { touch-action: none; }

/* 分配详情是只读方块：没有点选与按压态，悬停留作看单床详情 */
.bed-grid-static .bed-chip { cursor: default; }
.bed-grid-static .bed-chip:hover { border-color: var(--line); }

/* 出库记录按「一次登记」分组：组头是出库日期与操作人；每条记录自带司机与苗款 */
.outbound-batches { display: flex; flex-direction: column; gap: 10px; }
.outbound-batch { border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; background: #fff; }
.batch-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    margin-bottom: 9px;
    font-size: 13px;
    color: var(--ink-2);
}
.batch-head .batch-date { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.batch-head .batch-meta { color: var(--ink-3); }

.sweep-label { display: inline-flex; align-items: center; gap: 5px; }

.fill-status { margin: 10px 0 0; color: var(--brand-dark); font-size: 12.5px; }
/* 基础数据页里的说明列表 */
.tips {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink-2);
}

.tips code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 12.5px;
}


/* 表单外的说明块，区别于 .field .hint 的小字提示 */
.notice {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #c8e6cf;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--ink-2);
    font-size: 13px;
}

/* 说明块里的行内表单：老板确认订单完成（备注 + 按钮） */
.confirm-form { display: flex; gap: 10px; margin-top: 10px; }
.confirm-form .input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
    .confirm-form { flex-wrap: wrap; }
    .confirm-form .input { flex: 1 1 100%; }
}

/* ===== 输入框模糊搜索下拉 ===== */
.combo { position: relative; }

.combo-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 264px;
    overflow-y: auto;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.combo-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.combo-item .cell-sub { margin-left: auto; }
.combo-item:hover, .combo-item.active { background: var(--brand-soft); }

/* 窄屏字段上下堆叠，下拉改为就地展开，避免盖住下面的客户电话输入框 */
@media (max-width: 760px) {
    .combo-panel {
        position: static;
        margin-top: 6px;
        max-height: 208px;
    }
}

.form-actions {
    display: flex;
    gap: 10px;
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

.cover-preview {
    margin-top: 10px;
    width: 220px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
}

/* ===== 工具栏 / 筛选 ===== */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.toolbar .grow { flex: 1 1 200px; min-width: 160px; }
.toolbar .spacer { flex: 1; }
.toolbar select.input { width: auto; min-width: 132px; }
.toolbar .input, .toolbar select.input { height: 38px; padding: 0 12px; }

/* ===== 提示条 ===== */
.alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid #c8e6cf;
    background: var(--brand-soft);
    color: #1f5c33;
    font-size: 13px;
}

.alert-error { border-color: transparent; background: var(--error-container); color: var(--on-error-container); }

/* ===== 分页 ===== */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-2);
}

.pager-btns { display: flex; align-items: center; gap: 8px; }

.pager-info { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.page-size { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--ink-3); }

.page-size select.input {
    width: auto;
    min-width: 68px;
    padding: 5px 8px;
    font-size: 12px;
}

/* 博客首页：分页条独立成卡片 */
.site-main > .pager {
    margin-top: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ===== 仪表盘 ===== */
.bar-row { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 12px; padding: 7px 0; }
.bar-track { height: 6px; border-radius: 999px; background: var(--surface-high); overflow: hidden; }
.bar { height: 100%; border-radius: 999px; background: var(--brand); }
.bar-count { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.list-rows { display: flex; flex-direction: column; }

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.list-row:last-child { border-bottom: none; }
.list-row .amount { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===== 登录页 ===== */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(1200px 600px at 15% -10%, #d8ecdd 0%, transparent 60%),
                radial-gradient(900px 500px at 100% 0%, #eaf4d8 0%, transparent 55%),
                var(--bg);
}

.login-card { width: 100%; max-width: 428px; padding: 30px 32px 26px; border-radius: 16px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.login-brand .brand-text { color: var(--ink); }
.login-card h1 { font-size: 21px; }
.login-card .sub { color: var(--ink-2); font-size: 13px; margin: 6px 0 18px; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn { width: 100%; height: 42px; margin-top: 6px; }
.login-back { margin-top: 16px; text-align: center; font-size: 13px; }

.demo-box {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px dashed var(--outline-variant);
    border-radius: 12px;
    background: var(--bg);
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.9;
}

.demo-box b { color: var(--ink); }

/* ============================================================
   博客前台
   ============================================================ */
.site-body { background: var(--bg); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.site-brand:hover { color: var(--ink); }
.site-brand b { display: block; font-size: 15px; line-height: 1.2; }
.site-brand small { display: block; color: var(--ink-3); font-size: 11px; letter-spacing: .04em; }

.site-nav { display: flex; gap: 18px; margin-left: 8px; flex: 1; }
.site-nav a { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.site-nav a:hover { color: var(--brand); }

.hero { position: relative; color: #fff; overflow: hidden; }

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, rgba(9, 38, 24, .92) 8%, rgba(17, 74, 45, .74) 46%, rgba(24, 96, 60, .38) 100%);
}

.hero-inner {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    padding: 88px 24px 96px;
}

.hero-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero h1 { font-size: 40px; line-height: 1.25; margin: 20px 0 14px; letter-spacing: -.02em; }
.hero p { max-width: 560px; margin: 0 0 28px; font-size: 15.5px; line-height: 1.85; color: rgba(255, 255, 255, .85); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn-primary { background: #fff; color: var(--brand-dark); }
.hero .btn-primary:hover { background: #eaf6ee; color: var(--brand-dark); }
.hero .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.site-main { max-width: 1120px; margin: 0 auto; padding: 44px 24px 72px; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.section-head h2 { font-size: 22px; }
.section-sub { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    transition: border-color .15s, background .15s, color .15s;
}

.chip:hover { border-color: #bcd3c3; color: var(--brand-dark); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.post-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1080px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .post-grid { grid-template-columns: minmax(0, 1fr); }
    .hero h1 { font-size: 30px; }
    .hero-inner { padding: 64px 20px 72px; }
    .site-nav { display: none; }
}

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    color: var(--ink);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.post-card:hover {
    color: var(--ink);
    transform: translateY(-3px);
    border-color: #cfe0d4;
    box-shadow: 0 2px 4px rgba(15, 36, 25, .06), 0 18px 34px -18px rgba(15, 36, 25, .35);
}

.post-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #dcecd9, #b9dcc3);
}

.post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-cover img { transform: scale(1.045); }

.post-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 40px;
    font-weight: 700;
    color: rgba(23, 96, 60, .55);
}

.post-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1; }
.post-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.post-date { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.post-body h3 { font-size: 17px; line-height: 1.45; }
.post-body p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.75; flex: 1; }

.post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    color: var(--ink-3);
    font-size: 12.5px;
}

.post-foot span:last-child { color: var(--brand); font-weight: 550; }

/* ===== 文章详情 ===== */
.article-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 76px;
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) 268px;
    align-items: start;
}

@media (max-width: 980px) { .article-wrap { grid-template-columns: minmax(0, 1fr); } }

.article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }

.article-head { padding: 34px 40px 22px; }
.article-head h1 { font-size: 30px; line-height: 1.4; margin: 14px 0 16px; letter-spacing: -.01em; }

.article-meta { display: flex; align-items: center; gap: 16px; color: var(--ink-3); font-size: 13px; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

.article-cover { margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-cover img { display: block; width: 100%; max-height: 420px; object-fit: cover; }

.article-body { padding: 28px 40px 8px; }
.article-body p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.95; color: #26332b; }

.article-body p:first-child::first-letter { font-size: 1.05em; }

.article-foot { padding: 8px 40px 34px; }

@media (max-width: 720px) {
    .article-head, .article-body, .article-foot { padding-left: 22px; padding-right: 22px; }
    .article-head h1 { font-size: 24px; }
}

.aside-card { position: sticky; top: 84px; }
.aside-list { display: flex; flex-direction: column; padding: 6px 0; }

.aside-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    color: var(--ink-2);
    font-size: 13.5px;
    border-left: 3px solid transparent;
}

.aside-list a:hover { background: #f6faf7; color: var(--brand-dark); }
.aside-list a.active { border-left-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 550; }

.site-footer { border-top: 1px solid var(--line); background: #fff; }

.site-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--ink-3);
    font-size: 12.5px;
}

/* ===== 空状态 / 错误页 ===== */
.empty-state {
    max-width: 520px;
    margin: 72px auto;
    padding: 40px 32px;
    text-align: center;
}

.empty-code { font-size: 46px; font-weight: 700; color: var(--brand); letter-spacing: -.03em; }
.empty-state h2 { margin: 10px 0 8px; font-size: 20px; }
.empty-state p { margin: 0 0 22px; color: var(--ink-2); font-size: 14px; }

.empty-state .error-path { margin: 0 0 8px; color: var(--ink-3); font-size: 12.5px; }
.error-path code { color: var(--ink-2); background: #f1f6f2; padding: 1px 6px; border-radius: 4px; }
.empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ===== 订单：状态树 ===== */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 4px 0 2px;
}

.timeline-node { position: relative; padding: 0 6px; }

.timeline-node a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    color: var(--ink-3);
}

.timeline-dot {
    position: relative;
    z-index: 1;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--outline-variant);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

.timeline-node::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    right: 50%;
    height: 2px;
    background: var(--line);
}

.timeline-node::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 50%;
    right: 0;
    height: 2px;
    background: var(--line);
}

.timeline-node:first-child::before, .timeline-node:last-child::after { display: none; }

.timeline-label { font-size: 13px; font-weight: 550; }
.timeline-time { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.timeline-node.done .timeline-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.timeline-node.done::before, .timeline-node.done::after { background: var(--brand); }
.timeline-node.done .timeline-label { color: var(--ink); }

.timeline-node.current .timeline-dot {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.timeline-node.current .timeline-label { color: var(--brand); font-weight: 650; }
.timeline-node a:hover .timeline-label { color: var(--brand); }

@media (max-width: 760px) {
    .timeline { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: 4px; }
    .timeline-node { padding-left: 30px; padding-bottom: 6px; }
    .timeline-node a { flex-direction: row; align-items: center; gap: 8px; text-align: left; }
    .timeline-dot { position: absolute; left: 0; top: 2px; }
    .timeline-node::before, .timeline-node::after {
        left: 12px; right: auto; width: 2px; height: 100%; top: 0;
    }
    .timeline-node::before { display: none; }
    .timeline-node:last-child::after { display: none; }
}

/* ===== 订单：数据模块（详情页每个模块各自成卡，与稿子 W4/W5 一致） ===== */
.card:has(> .module) { background: transparent; border: 0; box-shadow: none; }
.card:has(> .module) > .module {
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card:has(> .module) > .module + .module,
.card:has(> .module) > .sticky-actions { margin-top: 14px; }

.module {
    scroll-margin-top: 78px;
}

.module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px 0;
}

.module-head h2 { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.module-tools { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.module-body { padding: 10px 18px 18px; }

.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.kv dt { color: var(--ink-3); font-size: 12px; margin-bottom: 3px; }
.kv dd { margin: 0; font-size: 13px; }
.kv .wide { grid-column: span 2; }

@media (max-width: 860px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kv { grid-template-columns: minmax(0, 1fr); } .kv .wide { grid-column: auto; } }

/* ===== 进度 ===== */
.progress { display: flex; align-items: center; gap: 8px; min-width: 108px; }
.progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-high); overflow: hidden; min-width: 56px; }
.progress-bar { height: 100%; border-radius: 999px; background: var(--brand); }
.progress-text { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 34px; }
.progress-pending { color: var(--ink-3); font-size: 12.5px; }

/* ===== 标签页：下划线式（页签同稿子） ===== */
.tabs { display: flex; gap: 22px; padding: 6px 18px 0; border-bottom: 1px solid var(--line); }

.tab {
    padding: 12px 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
}

.tab:hover { background: transparent; color: var(--brand); }

.tab.active {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--brand);
    color: var(--brand);
    font-weight: 650;
    margin-bottom: -1px;
    padding-bottom: 13px;
}

.tab-count { color: var(--ink-3); font-weight: 500; margin-left: 2px; }

/* ===== 多选苗棚 ===== */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-ctl);
    font-size: 13px;
    cursor: pointer;
    background: #fff;
}

.check:hover { border-color: var(--brand); background: #fff; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 16px; }
.check:has(input:checked) { border-color: var(--brand); background: var(--primary-container); color: var(--on-primary-container); font-weight: 650; }

/* ===== 时间线日志 ===== */
.log-list { display: flex; flex-direction: column; }

.log-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 10px 14px;
    align-items: baseline;
    padding: 11px 22px;
    border-bottom: 1px solid var(--line);
}

.log-item:last-child { border-bottom: none; }
.log-item .log-time { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.log-item .log-who { color: var(--ink-2); font-size: 12.5px; }

@media (max-width: 620px) {
    .log-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .log-item .log-time, .log-item .log-who { font-size: 12px; }
}

/* ===== 移动端导航 ===== */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink-2);
    cursor: pointer;
}

.nav-toggle svg { width: 18px; height: 18px; }

.nav-backdrop { display: none; }

@media (max-width: 1080px) {
    .nav-toggle { display: inline-flex; }

    body.nav-open .sidebar {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        height: 100vh;
        overflow-y: auto;
        box-shadow: 0 12px 40px rgba(15, 36, 25, .35);
    }

    body.nav-open .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background: rgba(15, 36, 25, .42);
    }
}

.sidebar-role {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* ===== 移动端：内容与表格 ===== */
@media (max-width: 760px) {
    .content { padding: 16px 14px 40px; }
    .topbar { padding: 10px 14px; gap: 10px; }
    .topbar-path { display: none; }
    .topbar-user { font-size: 12.5px; gap: 8px; }
    .topbar-user > a.btn { display: none; }
    .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-head .btn { width: 100%; }
    .card-head { flex-wrap: wrap; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }
    /* 窄屏下单元格不折行：auto 布局会把中文列压成 1 字宽（逐字竖排），
       不折行让列按内容撑开，交给 .table-wrap 横向滚动 */
    table { min-width: 640px; }
    .table-wrap th, .table-wrap td { white-space: nowrap; }
    /* 分配苗床是手机上要真的改数量的页面：三列（苗床 / 调整后数量 / 操作）不横向滚动 */
    table.table-assign { min-width: 0; }
    .table-assign .table-input { width: 88px; }
    .table-assign th, .table-assign td { padding-left: 12px; padding-right: 12px; }
    .table-assign .col-trays, .table-assign .col-ops { width: auto; }
    .bed-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); max-height: 248px; }
    .toolbar { padding: 12px 14px; }
    .log-item { padding: 10px 14px; }
    .module-head, .module-body { padding-left: 14px; padding-right: 14px; }
}

/* 手机端底部操作条：业务流转的主要入口（桌面端也是模块末尾的动作条） */
.sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sticky-actions .btn { min-width: 140px; }

@media (max-width: 760px) { .sticky-actions { padding: 10px 14px; } }