/* 页面专属样式：variety
   站点级样式（设计令牌 / 顶栏 / 页头 / 搜索 / 按钮 / 栅格容器）由 site.css 统一提供，
   本文件只保留该页特有的规则。 */
button,input,select{
font:inherit;color:inherit
}
.btn[disabled]{
opacity:.5;cursor:not-allowed
}

.bd{
padding:16px 20px 18px
}

.mpicker{
display:grid;grid-template-columns:repeat(12,1fr);gap:5px
}
.mpicker button{
height:34px;border:1px solid var(--line);background:var(--white);border-radius:var(--r-s);font-size:13.5px;color:var(--ink2);cursor:pointer;transition:.14s;font-variant-numeric:tabular-nums
}
.mpicker button.has{
background:var(--green-bg);border-color:#cfe8d8;color:var(--green-d);font-weight:600
}
.mpicker button.on.has{
background:var(--green);color:#fff
}

.tinfo{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);padding:13px 20px;border-bottom:1px dashed var(--line2)
}
.tinfo b{
color:var(--ink2);font-variant-numeric:tabular-nums
}
.tinfo .right{
margin-left:auto;display:flex;align-items:center;gap:8px
}
.vlist{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px 20px 18px
}
.vitem{
position:relative;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--white);transition:.16s;display:flex;flex-direction:column
}
.vitem:hover{
border-color:#bfdcc9;box-shadow:0 8px 20px rgba(29,135,67,.10);transform:translateY(-2px)
}
.vitem .pic{
position:relative;height:132px;background:linear-gradient(140deg,#eaf5ec,#dceee2 60%,#d0e7d8);display:grid;place-items:center;color:#5d7a68;font-size:12.5px;letter-spacing:.5px;border-bottom:1px solid var(--line2)
}
.vitem .pic::after{
content:"品种图 4:3";position:absolute;bottom:6px;right:8px;font-size:11px;color:#8aa394
}
.vitem .pic .season{
position:absolute;left:8px;top:8px;background:rgba(22,33,26,.62);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:20px
}
.vitem .b{
padding:12px 13px 13px;flex:1;display:flex;flex-direction:column
}
.vitem h3{
font-size:16.5px;font-weight:600;line-height:1.5
}
.vitem h3 a:hover{
color:var(--green-d)
}
.vitem .lat{
font-size:12px;color:var(--muted);margin-top:1px
}
.vitem dl{
margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--ink2);flex:1
}
.vitem dl div{
display:flex;gap:6px
}
.vitem dl dt{
color:var(--muted);flex:none
}
.vitem .foot{
display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line2)
}
.tagx{
font-size:12px;color:var(--green-d);background:var(--green-bg);padding:1px 7px;border-radius:4px
}
.cmp{
margin-left:auto;font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none
}
.cmp input{
cursor:pointer;width:15px;height:15px;accent-color:var(--green)
}
.vitem.picked{
border-color:var(--green-l);box-shadow:0 0 0 2px rgba(51,169,95,.18)
}
.empty{
padding:46px 20px;text-align:center;color:var(--muted);font-size:15px;grid-column:1/-1
}
.cmpbar{
position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;background:rgba(237,248,241,.98);border-top:1px solid var(--green-l);box-shadow:0 -4px 18px rgba(22,33,26,.10)
}
.cmpbar.on{
display:block
}
.cmpbar .in{
max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px;font-size:15px
}
.cmpbar b{
font-variant-numeric:tabular-nums
}
.cmpbar .clr{
background:none;border:0;color:var(--muted);font-size:14px;cursor:pointer;text-decoration:underline
}
.cmptable{
padding:16px 20px 18px;border-bottom:1px dashed var(--line2);background:#fbfdfb
}
.cmptable .hd{
display:flex;align-items:center;gap:10px;margin-bottom:12px
}
.cmptable .hd b{
font-size:16.5px
}
.cmptable .hd button{
margin-left:auto;border:0;background:none;color:var(--muted);font-size:14.5px;cursor:pointer
}
.tscroll{
overflow-x:auto
}
table.cmp2{
width:100%;border-collapse:collapse;font-size:15px;min-width:560px
}
table.cmp2 th,table.cmp2 td{
padding:10px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top
}
table.cmp2 thead th{
background:#f2f8f4;font-size:14px;color:var(--green-d);border-bottom:1px solid var(--line)
}
table.cmp2 tbody th{
font-weight:600;color:var(--muted);white-space:nowrap;width:96px;font-size:14px
}
table.cmp2 .diff{
background:#fffaf0
}
aside .bd{
padding:12px 18px 15px
}

.rd{
padding:9px 0;border-bottom:1px dashed var(--line2);font-size:15px;line-height:1.6
}
.rd:last-child{
border-bottom:0
}
.rd a:hover{
color:var(--green-d)
}
.rd em{
font-style:normal;display:block;font-size:12.5px;color:var(--muted);margin-top:2px
}

@media (max-width:860px){
.phead h1{
font-size:24px
}
.vlist{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.mpicker{
grid-template-columns:repeat(6,1fr)
}
}
@media (max-width:560px){
.vlist{
grid-template-columns:1fr
}
.mpicker{
grid-template-columns:repeat(4,1fr)
}
}
@media (prefers-reduced-motion:reduce){
.vitem:hover{
transform:none
}
}

/* 前端筛选用 hidden 属性隐藏卡片，需保证优先于 .vitem 自身的 display */
.vlist .vitem[hidden]{display:none}