/* ===========================================================================
   大苗子农事 · 前台样式（设计基准，Blade 与静态原型共用）

   合并前是 base / layout / components / page 四个文件、四次请求；
   顺序就是原来 <link> 的先后顺序，后出现的照旧覆盖前面的，合并不改变任何渲染结果。
   已逐像素验证：15 页原型 + 6 页 Blade，合并前后完全一致。

   分层（按顺序，越靠后优先级越高）：
     01 基础层   设计变量 / 重置 / 排版 / 工具类
     02 布局层   头部 / 底部导航 / 页脚 / 页面骨架
     03 组件层   按钮 / 卡片 / 标签 / 筛选 / 时间轴 / 搜索 / 提示条 / 分页
     04 页面层   首页 / 节气条 / 作物卡 / 详情头 / 正文排版 / 搜索结果

   ⚠ 只放「设计基准」本身。Blade 版新增或覆盖的规则放 /static/web/css/web.css，
     不要并进来 —— 这个文件静态原型也在用，Blade 专用规则混进来会污染原型。
     真踩过：web.css 里 `.cat i::after{content:' 种'}` 一合并，原型首页
     分类卡的数字后面凭空多出「种」。

   ⚠ 第三方库（layui 等）的样式同样不并进来，它们的加载顺序有讲究
     （layui.css 的全局 reset 必须在本文件之前），见 home_common.blade.php 的 @stack('vendor-style')。
   =========================================================================== */

/* ===== 01 基础层 · 设计变量 / 重置 / 排版 / 工具类 ===== */

:root {
    /* 文字 */
    --ink: #1C2A22;
    --ink-2: #4A5A50;
    --ink-3: #8A948C;
    --ink-4: #B4BCB4;

    /* 线与面 */
    --line: #E6E8E0;
    --line-2: #F0F1EA;
    --paper: #FBFAF6;
    --paper-2: #F4F3EC;
    --card: #FFFFFF;

    /* 品牌色 */
    --green: #2F5D3A;
    --green-d: #24492D;
    --green-l: #EDF3E6;
    --gold: #C9A227;
    --gold-d: #A8871A;
    --gold-l: #FAF3DC;
    --terra: #B4643C;
    --terra-l: #FBF0EA;

    /* 行情涨跌：中国习惯，涨红跌绿（跟欧美反过来），别改 */
    --up: #C0392B;
    --down: #2F8F5B;
    --flat: #8A948C;

    /* 形 */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(28, 42, 34, .05), 0 8px 24px rgba(28, 42, 34, .06);
    --shadow-hover: 0 2px 4px rgba(28, 42, 34, .06), 0 14px 34px rgba(28, 42, 34, .10);

    /* 尺度 */
    --header-h: 58px;
    --nav-h: 56px;
    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

@media (min-width: 1024px) {
    :root {
        --header-h: 72px;
    }
}

/* ---------- 重置 ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ---------- 排版 ---------- */

h1,
h2,
h3 {
    letter-spacing: -.01em;
    line-height: 1.35;
}

/* 数字统一等宽，表格和时间轴里不会跳动 */
.num {
    font-variant-numeric: tabular-nums;
}

/* ---------- 工具类 ---------- */

.u-container {
    width: 100%;
    /* 内容区 1200px。1240 是因为这个盒子的 20px 内边距也算在宽度里，
       减去两侧就是 1200 —— 对齐惠农网（实测其内容区固定 1200、padding 0）。
       改这个数等于改全站内容宽度，改完跑 .workbuddy/scripts/overflow-check.cjs。 */
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.u-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.u-row {
    display: flex;
    align-items: center;
}

.u-mt-8 { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-48 { margin-top: 48px; }

.u-muted { color: var(--ink-3); }
.u-sm { font-size: 13px; }
.u-xs { font-size: 12px; }

.u-mob { display: block; }
.u-desk { display: none; }

@media (min-width: 1024px) {
    body {
        font-size: 16px;
    }

    .u-mob { display: none; }
    .u-desk { display: block; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ===== 02 布局层 · 头部 / 移动端底部导航 / 页脚 / 页面骨架 ===== */

/* ---------- 头部 ---------- */

.hd {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    border-bottom: 1px solid var(--line);
    background: rgba(251, 250, 246, .92);
    backdrop-filter: saturate(180%) blur(12px);
}

.hd-in {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    /* 跟 .u-container 完全一致（宽度和内边距都是），否则头部会比正文宽一圈，两侧对不齐 */
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.hd-logo {
    display: flex;
    align-items: center;
    flex: none;
}

.hd-logo img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 8px;
}

.hd-logo b {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
}

.hd-nav {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

.hd-nav a {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink-2);
    transition: background .16s, color .16s;
}

.hd-nav a:hover {
    background: var(--green-l);
    color: var(--green-d);
}

.hd-nav a.is-on {
    background: var(--green-l);
    color: var(--green-d);
    font-weight: 500;
}

.hd-search {
    display: none;
    position: relative;
    flex: 1;
    max-width: 320px;
    margin-left: auto;
}

.hd-search input {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}

.hd-search input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(47, 93, 58, .10);
}

.hd-search button {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--ink-3);
}

.hd-search button:hover {
    color: var(--green);
}

/* 移动端：搜索图标 + 下拉面板 */
.hd-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.hd-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--ink-2);
    transition: background .16s, color .16s;
}

.hd-icon:hover {
    background: var(--green-l);
    color: var(--green-d);
}

.hd-drawer {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 49;
    padding: 14px 16px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 18px 30px rgba(28, 42, 34, .10);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
}

.hd-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.hd-drawer .m-search {
    display: flex;
    gap: 8px;
}

.hd-drawer .m-search input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    outline: none;
}

.hd-drawer .m-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.hd-drawer .m-links a {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-size: 14px;
    color: var(--ink-2);
}

@media (min-width: 1024px) {
    .hd-nav { display: flex; }
    .hd-search { display: block; }
    .hd-actions,
    .hd-drawer { display: none; }
}

/* ---------- 移动端底部导航 ---------- */

.bnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 48;
    display: flex;
    height: var(--nav-h);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
}

.bnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    color: var(--ink-3);
}

.bnav a svg {
    width: 22px;
    height: 22px;
}

.bnav a.is-on {
    color: var(--green);
}

@media (min-width: 1024px) {
    .bnav { display: none; }
}

/* ---------- 页面骨架 ---------- */

.page {
    padding-bottom: 32px;
}

.main {
    padding-bottom: calc(var(--nav-h) + 20px);
    /* 页面右上角的晨光。必须挂在全宽的 .main 上——挂在 .hero 这类有宽度的元素上，
       背景会在元素右边界被直接裁断，页面上留下一道竖直硬边 */
    background: radial-gradient(78% 560px at 94% -8%, #EDF3E6 0%, rgba(237, 243, 230, 0) 62%);
}

@media (min-width: 1024px) {
    .main { padding-bottom: 0; }
}

/* 章节标题：左侧竖线，右侧「更多」 */
.sec {
    margin-top: 36px;
}

.sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sec-head h2 {
    position: relative;
    padding-left: 12px;
    font-size: 19px;
    font-weight: 600;
}

.sec-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: var(--green);
    transform: translateY(-50%);
}

.sec-head .more {
    font-size: 13px;
    color: var(--ink-3);
    transition: color .16s;
}

.sec-head .more:hover {
    color: var(--green);
}

@media (min-width: 1024px) {
    .sec { margin-top: 56px; }
    .sec-head h2 { font-size: 22px; }
}

/* ---------- 页脚 ---------- */

.foot {
    margin-top: 48px;
    padding: 32px 0 24px;
    border-top: 1px solid var(--line);
    background: var(--paper-2);
    font-size: 13px;
    color: var(--ink-3);
}

.foot-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
}

.foot-brand img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.foot-brand b {
    font-size: 15px;
    font-weight: 600;
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 14px;
}

.foot-links a:hover {
    color: var(--green);
}

.foot-decl {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px dashed #DED9C6;
    border-radius: var(--radius-sm);
    background: var(--gold-l);
    color: #7A6A34;
    line-height: 1.7;
}

.foot-copy {
    margin-top: 18px;
    padding-bottom: calc(var(--nav-h) + 8px);
}

@media (min-width: 1024px) {
    .foot-copy { padding-bottom: 0; }
}

/* ===== 03 组件层 · 按钮 / 卡片 / 标签 / 筛选 / 时间轴 / 搜索 / 提示条 / 分页 ===== */

/* ---------- 按钮 ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    background: var(--green);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: background .16s, transform .16s;
}

.btn:hover {
    background: var(--green-d);
}

.btn:active {
    transform: translateY(1px);
}

.btn-ghost {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
}

.btn-ghost:hover {
    border-color: var(--green);
    background: var(--green-l);
    color: var(--green-d);
}

.btn-sm {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

/* ---------- 卡片 ---------- */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

a.card:hover {
    border-color: #CBD9C6;
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* ---------- 标签 ---------- */

.tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.7;
    background: var(--line-2);
    color: var(--ink-2);
}

.tag-green {
    background: var(--green-l);
    color: var(--green-d);
}

.tag-gold {
    background: var(--gold-l);
    color: var(--gold-d);
}

.tag-terra {
    background: var(--terra-l);
    color: #8F4A26;
}

/* 核验徽章：内容合规的重要标识 */
.tag-verify {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border: 1px solid #C8DCC2;
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 12px;
    color: var(--green-d);
}

.tag-verify svg {
    width: 12px;
    height: 12px;
}

/* ---------- 筛选 chip ---------- */

.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar {
    display: none;
}

.chip {
    flex: none;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 14px;
    color: var(--ink-2);
    white-space: nowrap;
    transition: all .16s;
}

.chip:hover {
    border-color: var(--green);
    color: var(--green-d);
}

.chip.is-on {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

/* ---------- 搜索框（首页大号） ---------- */

.searchbox {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 6px 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: var(--shadow);
    transition: border-color .16s, box-shadow .16s;
}

.searchbox.is-focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(47, 93, 58, .10);
}

.searchbox input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    font-size: 16px;
    outline: none;
}

.searchbox input::placeholder {
    color: var(--ink-4);
}

.searchbox .go {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    transition: background .16s;
}

.searchbox .go:hover {
    background: var(--green-d);
}

.hotwords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--ink-3);
}

.hotwords a:hover {
    color: var(--green);
}

/* ---------- 农事时间轴 ---------- */

.timeline {
    position: relative;
    padding-left: 26px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(180deg, var(--green-l) 0%, var(--green) 40%, var(--gold) 100%);
}

.tl-item {
    position: relative;
    padding-bottom: 22px;
}

.tl-item::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 6px;
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--green-l);
    box-shadow: 0 0 0 1px var(--line);
}

.tl-item.is-now::before {
    background: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 0 6px rgba(201, 162, 39, .16);
}

.tl-item.is-past::before {
    background: var(--green);
}

.tl-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.tl-name {
    font-size: 16px;
    font-weight: 600;
}

.tl-window {
    font-size: 13px;
    color: #6B7A70;
}

.tl-body {
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}

.tl-item.is-now .tl-body {
    border-color: #E7DCA8;
    background: var(--gold-l);
}

.tl-body li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.8;
}

.tl-body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
}

.tl-item.is-now .tl-body li::before {
    background: var(--gold-d);
}

/* ---------- 提示条 ---------- */

.note {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #E7DCA8;
    border-radius: var(--radius-sm);
    background: var(--gold-l);
    font-size: 13px;
    line-height: 1.7;
    color: #7A6A34;
}

.note svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.note-warn {
    border-color: #EBCFBF;
    background: var(--terra-l);
    color: #8F4A26;
}

/* ---------- 面包屑 ---------- */

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

.crumb a:hover {
    color: var(--green);
}

.crumb .sep {
    color: var(--ink-4);
}

/* ---------- 数据表格 ---------- */

.tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.tbl {
    min-width: 480px;
    font-size: 14px;
}

.tbl th,
.tbl td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-2);
    text-align: left;
    vertical-align: top;
}

.tbl th {
    background: var(--paper-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}

.tbl tr:last-child td {
    border-bottom: 0;
}

/* ---------- 分页 ---------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.pager a,
.pager span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    /* 窄屏放不下时「上一页」会被拆成两行，必须禁掉换行 */
    white-space: nowrap;
    font-size: 14px;
    color: var(--ink-2);
}

.pager a:hover {
    border-color: var(--green);
    color: var(--green-d);
}

.pager .is-on {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

/* ---------- 空状态 ---------- */

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

.empty svg {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    opacity: .5;
}

/* ===== 04 页面层 · 首页 hero / 节气条 / 作物卡 / 详情头 / 正文排版 / 搜索结果 ===== */

/* ---------- 首页 Hero ---------- */

.hero {
    position: relative;
    padding: 40px 0 8px;
    overflow: hidden;
}

/* 梯田插画：渐隐做在 hero.svg 内部（两层 mask 相乘），
   所以这里贴边放也不会出现矩形硬边；只在桌面出现，窄屏让位给文字 */
.hero::after {
    content: "";
    display: none;
    position: absolute;
    right: 0;
    top: -20px;
    width: 380px;
    height: 380px;
    background: url("../images/hero.svg") center / contain no-repeat;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .hero::after { display: block; }
}

.hero-slogan {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.4;
}

.hero-slogan em {
    font-style: normal;
    color: var(--green);
}

.hero-sub {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    font-size: 14px;
    color: var(--ink-3);
}

.hero-box {
    position: relative;
    z-index: 1;
    margin-top: 22px;
}

@media (min-width: 1024px) {
    .hero {
        padding: 64px 0 8px;
    }

    /* 别把插画放大到超出 .hero 底边：那会在 hero 的 overflow 裁切处留下一条横线 */
    .hero::after { top: -16px; width: 380px; height: 380px; }
    .hero-slogan { max-width: 620px; font-size: 40px; }
    .hero-sub { max-width: 560px; font-size: 15px; }
    .hero-box { max-width: 620px; }
}

@media (min-width: 1280px) {
    .hero::after { width: 440px; height: 440px; }
}

/* ---------- 节气条（首页特色模块） ---------- */

.term {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(120deg, #fff 0%, var(--green-l) 100%);
    box-shadow: var(--shadow);
}

.term-mark {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: var(--green);
    color: #fff;
}

.term-mark b {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
}

.term-mark span {
    font-size: 10px;
    opacity: .75;
}

.term-info {
    flex: 1;
    min-width: 0;
}

.term-info h3 {
    font-size: 16px;
    font-weight: 600;
}

.term-info p {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-2);
}

.term-tasks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
}

.term-tasks li {
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .75);
    font-size: 12px;
    color: var(--green-d);
}

@media (min-width: 1024px) {
    .term { margin-top: 36px; padding: 20px 24px; }
    .term-mark { width: 76px; height: 76px; }
    .term-mark b { font-size: 24px; }
    .term-info h3 { font-size: 18px; }
}

/* ---------- 分类九宫格 ---------- */

.cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: all .18s;
}

.cat:hover {
    border-color: #CBD9C6;
    background: var(--green-l);
    transform: translateY(-2px);
}

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

.cat i {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-4);
}

@media (min-width: 640px) {
    .cats { grid-template-columns: repeat(6, 1fr); gap: 14px; }
    .cat { padding: 20px 8px; }
    .cat span { font-size: 14px; }
}

/* 作物小插画统一底色块 */
.cat-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--green-l);
}

.cat-art img {
    width: 28px;
    height: 28px;
}

/* ---------- 作物卡片网格 ---------- */

.crops {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.crop-art {
    position: relative;
    overflow: hidden;
    height: 160px;
    background: var(--green-l);
}

.crop-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crop-art .badge {
    position: absolute;
    top: 8px;
    left: 8px;
}

.crop-body {
    padding: 12px 14px 14px;
}

.crop-body h3 {
    font-size: 15px;
    font-weight: 600;
}

.crop-body .alias {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

@media (min-width: 768px) {
    .crops { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .crop-art { height: 180px; }
}

@media (min-width: 1024px) {
    .crops { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 文章列表 ---------- */

.posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.post:hover {
    border-color: #CBD9C6;
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.post-thumb {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-sm);
    background: var(--green-l);
}

.post-thumb img {
    width: 40px;
    height: 40px;
}

.post-main {
    flex: 1;
    min-width: 0;
}

.post-main h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-sum {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-4);
}

@media (min-width: 768px) {
    .posts { gap: 16px; }
    .post-thumb { width: 120px; height: 96px; }
    .post-main h3 { font-size: 17px; }
}

/* ---------- 作物详情头部 ---------- */

.crop-hd {
    display: flex;
    gap: 16px;
    padding: 20px 0 4px;
}

.crop-hd-art {
    flex: none;
    overflow: hidden;
    width: 84px;
    height: 84px;
    border-radius: var(--radius);
    background: var(--green-l);
}

.crop-hd-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crop-hd-main h1 {
    font-size: 24px;
    font-weight: 600;
}

.crop-hd-main .latin {
    margin-top: 2px;
    font-size: 12px;
    font-style: italic;
    color: var(--ink-4);
}

.crop-hd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* 关键数值卡片 */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.stat {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.stat b {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--green-d);
    letter-spacing: -.01em;
}

.stat b i {
    font-style: normal;
    margin-left: 3px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ink-3);
}

.stat span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-3);
}

@media (min-width: 640px) {
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .crop-hd-art { width: 108px; height: 108px; }
    .crop-hd-main h1 { font-size: 30px; }
}

/* ---------- Tab 切换 ---------- */

.tabs {
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    display: flex;
    gap: 4px;
    margin-top: 20px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tabs button {
    flex: none;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--ink-2);
    white-space: nowrap;
    transition: all .16s;
}

.tabs button.is-on {
    background: var(--green);
    color: #fff;
}

.panel {
    display: none;
    margin-top: 20px;
}

.panel.is-on {
    display: block;
}

@media (min-width: 1024px) {
    .tabs { top: var(--header-h); gap: 8px; }
}

/* ---------- 正文排版 ---------- */

/* 正文通栏每行会到 70 字，桌面端改成「正文 + 侧栏」两栏。
   正文用 1fr 而不是固定 700px：容器 1080 − 内边距 40 = 1040，
   但 1024 视口下只有 984，固定宽度会溢出。1fr 让它自己缩，侧栏保持 280。 */
.post-layout {
    display: block;
}

.post-col {
    min-width: 0;
}

.post-aside {
    display: none;
}

@media (min-width: 1024px) {
    .post-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 48px;
        align-items: start;
    }

    .post-aside {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 28px);
    }
}

.toc {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.toc h4 {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-3);
}

.toc a {
    display: block;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--line-2);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
    transition: color .16s, border-color .16s;
}

.toc a:hover {
    border-left-color: var(--green);
    color: var(--green-d);
}

.toc a.is-on {
    border-left-color: var(--green);
    font-weight: 600;
    color: var(--green-d);
}

.aside-card {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--green-l);
}

.aside-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--green-d);
}

.aside-card p {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-2);
}

.article-hd {
    padding: 18px 0 4px;
}

.article-hd h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.45;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-3);
}

.prose {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.95;
    color: #24362B;
}

/* 点目录跳转时别被吸顶头部盖住 */
.prose h2,
.prose h3 {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.prose h2 {
    margin: 34px 0 10px;
    padding-left: 12px;
    border-left: 4px solid var(--green);
    font-size: 19px;
    font-weight: 600;
}

.prose h3 {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.prose p {
    margin: 14px 0;
}

.prose ul {
    margin: 14px 0;
}

.prose ul li {
    position: relative;
    padding-left: 20px;
    margin: 6px 0;
}

.prose ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.prose blockquote {
    margin: 20px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--gold-l);
    font-size: 15px;
    color: #6B5A28;
}

.prose table {
    margin: 18px 0;
    font-size: 14px;
}

.prose strong {
    font-weight: 600;
    color: var(--ink);
}

.prose figure {
    margin: 22px 0;
}

.prose figure img {
    width: 100%;
    border-radius: var(--radius-sm);
}

.prose figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-3);
    text-align: center;
}

@media (min-width: 1024px) {
    .article-hd { padding: 30px 0 4px; }
    .article-hd h1 { font-size: 34px; }
    .prose { font-size: 17px; }
}

/* ---------- 搜索结果 ---------- */

.result-head {
    padding: 18px 0 12px;
    border-bottom: 1px solid var(--line);
}

.result-head h1 {
    font-size: 20px;
    font-weight: 600;
}

.result-head .kw {
    color: var(--green);
}

.result-head p {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-3);
}

.result-group {
    margin-top: 26px;
}

.result-group h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
}

.result-group h2 span {
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--line-2);
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-3);
}

.hl {
    padding: 0 1px;
    border-radius: 3px;
    background: var(--gold-l);
    color: var(--gold-d);
    font-weight: 500;
}

.result-list {
    margin-top: 12px;
}

/* ---------- 地区（省份）选择 ---------- */

/* 放在作物详情、全年农事历、首页三处。不同省的播期差一个月，时间轴必须按省重算 */
.region-bar {
    margin-top: 16px;
    padding: 12px 0 10px;
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
}

.region-bar-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-3);
}

.region-bar-hd b {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.provinces {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.provinces::-webkit-scrollbar {
    display: none;
}

.province {
    flex: none;
    height: 30px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 13px;
    color: var(--ink-2);
    transition: all .16s;
}

.province:hover {
    border-color: #CBD9C6;
}

.province.is-on {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    font-weight: 600;
}

/* ---------- 时间轴上的日期 ---------- */

.tl-window {
    font-size: 13px;
    color: #6B7A70;
}

.tl-window b {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-2);
}

.tl-rel {
    margin-left: 6px;
    font-size: 12px;
    color: var(--ink-4);
}

.tl-item.is-now .tl-name {
    color: var(--green-d);
}

.tl-today {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--gold-l);
    font-size: 11px;
    font-weight: 600;
    color: var(--gold-d);
}

/* 时间轴上方那句「按 X 省播期推算」：交代日期来源，字号要压住不抢正文 */
.tl-note {
    margin: 2px 0 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink-3);
}

.tl-note b {
    font-weight: 600;
    color: var(--green-d);
}

/* 当前节点左侧露出的进度条 */
.tl-item.is-now::after {
    content: "";
    position: absolute;
    left: -24px;
    top: 6px;
    width: 3px;
    height: calc(100% - 14px);
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-l) 100%);
}

/* ---------- 症状图组 ---------- */

.figs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.fig {
    /* 浏览器给 figure 默认 margin:1em 40px，在 1fr 的网格轨道里会挤成一根竖条 */
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.fig-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: linear-gradient(150deg, var(--green-l) 0%, var(--paper-2) 100%);
}

.fig-img img {
    width: 52%;
    height: 52%;
    object-fit: contain;
    opacity: .55;
}

.fig-cap {
    padding: 6px 8px;
    border-top: 1px solid var(--line-2);
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
}

/* ---------- 状态页（空态 / 404 / 错误） ---------- */

.state {
    padding: 40px 0 26px;
    text-align: center;
}

.state-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--green-l);
}

.state-art img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    opacity: .7;
}

.state-h {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.state-p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

.state-act {
    margin-top: 20px;
}

.state-alt {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line-2);
}

.state-alt h4 {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

/* ---------- 骨架屏 ---------- */

.sk {
    border-radius: 4px;
    background: linear-gradient(90deg, #EFF1EC 25%, #F7F8F4 37%, #EFF1EC 63%);
    background-size: 400% 100%;
    animation: sk 1.4s ease infinite;
}

.sk-line {
    height: 12px;
    margin-top: 8px;
}

.sk-thumb {
    width: 84px;
    height: 84px;
    flex: none;
}

@keyframes sk {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- 识别页 ---------- */

.shot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 20px;
    border: 1px dashed #C9D3C4;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--green-l) 0%, #fff 70%);
}

.shot-t {
    font-size: 14px;
    font-weight: 600;
    color: var(--green-d);
}

.shot-s {
    font-size: 12px;
    color: var(--ink-3);
    text-align: center;
    line-height: 1.7;
}

.cand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line-2);
}

.cand-bar {
    width: 96px;
    height: 6px;
    border-radius: 3px;
    background: var(--line-2);
    overflow: hidden;
}

.cand-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--green);
}

/* ---------- KPI 四格 ---------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.kpi {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.kpi b {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--green-d);
    font-variant-numeric: tabular-nums;
}

.kpi b i {
    margin-left: 3px;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    color: var(--ink-3);
}

.kpi span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-3);
}

@media (min-width: 640px) {
    .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* ---------- 对比表 ---------- */

.tbl-compare td:first-child {
    white-space: nowrap;
    color: var(--ink-2);
    background: var(--paper);
}

.tbl-compare .is-bad {
    color: var(--terra);
}

/* ---------- 二级页面标题 ---------- */

/* 病虫害库、肥水查询这类"列表/工具"页共用，首屏不要面包屑占位就直接用 */
.page-hd {
    margin-top: 22px;
}

.page-hd h1 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
}

.page-hd p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-3);
}

.page-hd .cnt {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-4);
}

@media (min-width: 768px) {
    .page-hd h1 { font-size: 30px; }
}

/* ---------- 多组筛选行 ---------- */

/* 每组一条，标签固定宽度、chips 自己横向滚，避免手机上一行挤三四组 */
.filters {
    margin-top: 18px;
    padding-top: 4px;
    border-top: 1px solid var(--line-2);
}

.filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}

.filter-row + .filter-row {
    border-top: 1px dashed var(--line-2);
}

.filter-label {
    flex: none;
    width: 56px;
    padding-top: 8px;
    font-size: 13px;
    color: var(--ink-3);
}

.filter-row .chips {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-row .chip {
    height: 30px;
    padding: 0 13px;
    font-size: 13px;
}

/* ---------- 病虫害列表 ---------- */

.pest-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-2);
}

.pest-item:last-child {
    border-bottom: 0;
}

.pest-art {
    flex: none;
    overflow: hidden;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    background: linear-gradient(150deg, var(--green-l) 0%, var(--paper-2) 100%);
}

.pest-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pest-main {
    flex: 1 1 auto;
    min-width: 0;
}

.pest-main h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.pest-main h3 em {
    margin-left: 6px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    color: var(--ink-3);
}

.pest-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}

.pest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* ---------- 全年农事历：月份轴 ---------- */

/* 12 个月横向排，每格塞本月起始的节点。手机上靠横向滚，不做 12 等分缩字 */
.year {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.year::-webkit-scrollbar {
    display: none;
}

.year-cell {
    flex: none;
    /* 多作物叠加后一条要放「作物名 / 阶段 / 日期」三行，118 太窄放不下 */
    width: 152px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.year-cell.is-now {
    border-color: var(--green);
    background: linear-gradient(170deg, var(--green-l) 0%, #fff 78%);
}

.year-m {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.year-cell.is-now .year-m {
    color: var(--green-d);
}

.year-node {
    display: block;
    margin-top: 6px;
    padding: 5px 8px 5px 9px;
    /* 左侧色条 = 哪个作物，颜色由行内 --c 传进来 */
    border-left: 3px solid var(--c, var(--green));
    border-radius: 4px;
    background: var(--paper-2);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-2);
}

/* 作物名单独一行并与色条同色，扫一眼就知道这条属于哪样作物 */
.year-node em {
    display: block;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--c, var(--green));
}

/* 该作物此刻所处的阶段，描边强调 */
.year-node.is-live {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--c, var(--green));
}

.year-node.is-blank {
    border-left-color: var(--line);
    color: var(--ink-4);
}

.year-cell.is-now .year-node {
    background: #fff;
}

.year-node i {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-style: normal;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* 作物选择条的色点：复用省份条的按钮样式，只多一个小圆点标色 */
.province .dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: 1px;
}

.province.is-on .dot {
    background: #fff !important;
}

/* ---------- 二十四节气横轴 ---------- */

.tts {
    display: flex;
    gap: 6px;
    margin-top: 14px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tts::-webkit-scrollbar {
    display: none;
}

/* 名字不叫 .term，那是首页的节气卡，别覆盖 */
.tt {
    flex: none;
    width: 60px;
    padding: 8px 0;
    border-radius: var(--radius-sm);
    background: var(--paper);
    text-align: center;
    font-size: 13px;
    color: var(--ink-2);
}

.tt i {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-style: normal;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
}

.tt.is-past {
    color: var(--ink-4);
}

.tt.is-on {
    background: var(--green);
    color: #fff;
    font-weight: 600;
}

.tt.is-on i {
    color: rgba(255, 255, 255, .72);
}

/* ---------- 查询表单（肥水） ---------- */

.form {
    margin-top: 4px;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
}

.form-row > label {
    flex: none;
    width: 78px;
    font-size: 14px;
    color: var(--ink-2);
}

.form-row .field {
    flex: 1 1 auto;
    min-width: 0;
}

.form-row .unit {
    flex: none;
    font-size: 13px;
    color: var(--ink-3);
}

.input,
.select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
}

.input:focus,
.select:focus {
    outline: 0;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(47, 93, 58, .08);
}

.input::placeholder {
    color: var(--ink-4);
}

/* ---------- 编号步骤（防治流程用） ---------- */

.steps {
    counter-reset: step;
    margin-top: 12px;
}

.steps li {
    position: relative;
    padding: 0 0 16px 34px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-2);
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-l);
    font-size: 12px;
    font-weight: 600;
    color: var(--green-d);
}

/* 竖线连到下一项，最后一项不画 */
.steps li::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 27px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}

.steps li:last-child {
    padding-bottom: 0;
}

.steps li:last-child::after {
    display: none;
}

/* ---------- 圆点清单 ---------- */

.dot-list li {
    position: relative;
    padding: 5px 0 5px 16px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-2);
}

.dot-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

/* ---------- 查询结果高亮块 ---------- */

.result-box {
    margin-top: 18px;
    padding: 18px 16px;
    border: 1px solid #DCE6D5;
    border-radius: var(--radius);
    background: linear-gradient(120deg, #FFFFFF 0%, var(--green-l) 100%);
}

.result-box h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--green-d);
}

/* ---------- 个人中心 ---------- */

.user-hd {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 20px 18px;
    border-radius: var(--radius);
    background: linear-gradient(120deg, var(--green) 0%, #3E7349 100%);
    color: #fff;
}

.user-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.user-hd-main {
    flex: 1 1 auto;
    min-width: 0;
}

.user-hd h1 {
    font-size: 18px;
    font-weight: 600;
}

.user-hd p {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
}

.user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.user-tags .tag {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ---------- 设置项列表 ---------- */

.menu {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
    font-size: 14px;
    color: var(--ink);
}

.menu-item:last-child {
    border-bottom: 0;
}

.menu-item .ic {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--green);
}

.menu-item .t {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-item .v {
    flex: none;
    font-size: 13px;
    color: var(--ink-3);
}

/* 箭头图标必须给死尺寸：SVG 默认宽高 100%，在 flex 行里会撑成一个大三角 */
.arrow {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--ink-4);
}

/* ---------- 登录页 ---------- */

.login {
    max-width: 380px;
    margin: 30px auto 0;
}

.login-card {
    padding: 28px 20px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-logo img {
    width: 34px;
    height: 34px;
}

.login-logo b {
    font-size: 17px;
    letter-spacing: .01em;
}

.login-card h1 {
    margin-top: 18px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.login-sub {
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

.btn-wechat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin-top: 20px;
    border-radius: var(--radius-pill);
    background: #07C160;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.login-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 4px;
    font-size: 12px;
    color: var(--ink-4);
}

.login-or::before,
.login-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
}

.login-agree {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-3);
}

.login-agree input {
    flex: none;
    margin-top: 2px;
}

.login-agree a {
    color: var(--green);
}

/* ---------- 生育进度条（个人中心·我关注的作物） ---------- */

.prog {
    height: 6px;
    margin-top: 8px;
    border-radius: 3px;
    background: var(--line-2);
    overflow: hidden;
}

.prog i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--green) 0%, #6E9B79 100%);
}

.prog-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-3);
}

.prog-row b {
    font-weight: 600;
    color: var(--green-d);
    font-variant-numeric: tabular-nums;
}

/* ---------- 本期该干的事（多作物分段） ---------- */

/* 一样作物一段，作物名前的色点与月份轴里的色条同色 */
.crop-now {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-2);
}

.crop-now:first-child {
    padding-top: 0;
}

.crop-now:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.crop-now-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crop-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.crop-now-hd b {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.crop-now-badge {
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--green-l);
    font-size: 12px;
    font-weight: 600;
    color: var(--green-d);
}

/* 还没到播期 / 本季已收完：压成灰的，不跟正在长的阶段抢注意力 */
.crop-now-badge.is-off {
    background: var(--paper-2);
    font-weight: 400;
    color: var(--ink-3);
}

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

.crop-now .dot-list {
    margin-top: 8px;
}

.crop-now > p {
    margin-top: 8px;
}

/* 月份轴图例：本季已过 / 未到播期的作物压灰，说明它为什么不出现在当前月份的格里 */
.year-lg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
}

.lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-2);
}

.lg i {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.lg em {
    font-style: normal;
    color: var(--ink-4);
}

.lg.is-off {
    color: var(--ink-4);
}

.lg.is-off i {
    opacity: .4;
}

/* ---------- 价格行情 ---------- */

/* 数据来源 + 更新时间 */
.price-src {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--ink-3);
}

/* 市场切换条复用 .chips，只紧一下上间距 */
.price-mk {
    margin-top: 12px;
}

/* 价格头：左边大字价 + 涨跌，右边区间切换 */
.price-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.price-hd-main {
    min-width: 0;
}

.price-k {
    display: block;
    font-size: 12px;
    color: var(--ink-3);
}

/* 市场所在地跟在名字后面压淡 */
.price-k i {
    margin-left: 6px;
    font-style: normal;
    color: var(--ink-4);
}

.price-v {
    display: block;
    margin-top: 2px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}

.price-v i {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    color: var(--ink-3);
}

.price-d {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.price-d2 {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* 区间切换：7/30/90 天，小号分段控件 */
.seg {
    display: inline-flex;
    flex: none;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--card);
}

.seg button {
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--ink-3);
    white-space: nowrap;
}

.seg button.is-on {
    background: var(--green);
    color: #fff;
}

.price-chart {
    margin-top: 6px;
}

.pg-svg {
    display: block;
    overflow: visible;
}

/* 近 90 天价位分位条：低=偏宜(绿)，高=偏贵(红) */
.price-pos {
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--paper-2);
}

.pos-hd {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-3);
}

.pos-hd b {
    font-weight: 600;
    color: var(--ink-2);
}

.pos-bar {
    position: relative;
    height: 6px;
    margin-top: 8px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #DDEBD9 0%, #F2EBCB 52%, #F3D9CE 100%);
}

.pos-bar i {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 1px 4px rgba(28, 42, 34, .3);
}

.pos-tip {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-2);
}

.pos-tip b {
    color: var(--ink);
}

/* 市场价格对比表 */
.tbl-price {
    /* .tbl 默认 min-width:480px，四列表格在 390 宽下会撑出横向滚动 */
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.tbl-price th:first-child {
    width: 40%;
}

.tbl-price th,
.tbl-price td {
    padding: 9px 10px;
    font-size: 13px;
}

.tbl-price td.num,
.tbl-price th:nth-child(n+2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tbl-price tr.is-on td {
    background: var(--green-l);
}

/* 市场所在地，第二行小字 */
.tbl-price .pl {
    display: block;
    margin-top: 1px;
    font-style: normal;
    font-size: 11px;
    color: var(--ink-4);
}

.price-foot {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-4);
}

/* ---------- 卡片上的一行价 ---------- */

.crop-price {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--line);
    font-variant-numeric: tabular-nums;
}

.cp-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cp-num {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.cp-unit {
    font-size: 10px;
    font-style: normal;
    color: var(--ink-4);
}

/* 迷你走势推到右边，左边的价保持左对齐 */
.cp-spark {
    flex: none;
    margin-left: auto;
    opacity: .85;
}

/* 涨幅单独一行，跟迷你走势一样是 30 天口径，不要跟「今日价」混读 */
.cp-trend {
    margin-top: 5px;
    font-size: 11px;
    color: var(--ink-4);
}

.cp-trend b {
    font-weight: 600;
}

/* 没有对应监测品种时的空态 */
.cp-none {
    font-size: 11px;
    color: var(--ink-4);
}

@media (min-width: 1024px) {
    /* 通栏 1120 会把走势图拉成一条很扁的曲线，压到阅读舒服的宽度 */
    .price-box {
        max-width: 780px;
    }
}

/* ===== 生长阶段图集 ===== */

.growth-gallery {
    margin: 24px 0;
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.gallery-hd {
    margin-bottom: 16px;
}

.gallery-hd b {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.gallery-hd span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-3);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--paper-2);
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .gallery-item img {
        height: 180px;
    }
}

.gallery-item figcaption {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--ink-2);
    text-align: center;
    background: var(--card);
}