/* 全球粮食态势与动态 —— 主样式（零外链，无外部字体/图标）v1.0 */
:root{
	--bg:#0a1208; --bg2:#111c0c; --panel:rgba(30,52,24,.5); --line:rgba(140,220,90,.18);
	--tx:#e8f2dc; --tx2:#adc49a; --tx3:#6d8a5f; --gold:#ffc53d; --red:#ff5c5c; --grn:#31d17c; --wheat:#e8c96a; --cy:#00eaff; --ice:#8fd6ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:14px/1.65 "Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
i,em{font-style:normal}

/* ---------- 头部 ---------- */
.hero{position:relative;padding:52px 6vw 30px;text-align:center;background:
	linear-gradient(180deg,rgba(10,18,8,.2) 0%,rgba(10,18,8,.9) 100%),
	radial-gradient(1200px 420px at 20% -10%,rgba(232,201,106,.18),transparent 60%),
	radial-gradient(900px 380px at 85% -20%,rgba(49,209,124,.1),transparent 60%)}
.hero h1{font-size:30px;letter-spacing:2px;font-weight:700}
.hero h1 span{color:var(--wheat)}
.hero p{margin:0 auto;max-width:900px;font-size:14px;color:#9cbd8a;line-height:1.9}
.meta{margin-top:22px;color:var(--tx3);font-size:12px}
.meta i{color:var(--gold)}

/* ---------- 顶部导航 ---------- */
nav.toc{position:sticky;top:0;z-index:50;background:rgba(10,18,8,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.35)}
nav.toc .in{display:flex;align-items:center;gap:10px 12px;max-width:1680px;width:96%;margin:0 auto;padding:8px 0;flex-wrap:wrap}
nav.toc .brand{display:inline-flex;align-items:baseline;gap:7px;font-size:15px;font-weight:800;color:#fff;letter-spacing:1px;padding:4px 12px 4px 10px;border-radius:8px;border:1px solid rgba(232,201,106,.3);background:linear-gradient(90deg,rgba(232,201,106,.14),rgba(232,201,106,.02));white-space:nowrap}
nav.toc .brand::before{content:"🌾";font-size:14px}
nav.toc .brand .en{font-size:10px;font-weight:400;color:var(--tx3);letter-spacing:1.5px;font-family:Consolas,monospace}
nav.toc .links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
nav.toc .links::-webkit-scrollbar{display:none}
nav.toc .links a{font-size:13px;color:var(--tx2);padding:5px 10px;border-radius:7px;white-space:nowrap;position:relative;transition:color .15s}
nav.toc .links a::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--wheat);vertical-align:1px;opacity:.85;transition:box-shadow .15s}
nav.toc .links a.n-ic::before{background:var(--ice)}
nav.toc .links a.n-gd::before{background:var(--gold)}
nav.toc .links a.n-rd::before{background:var(--red)}
nav.toc .links a.n-gn::before{background:var(--grn)}
nav.toc .links a.n-bl::before{background:var(--cy)}
nav.toc .links a:hover{color:#fff;background:rgba(232,201,106,.08)}
nav.toc .links a.on{color:#fff;background:rgba(232,201,106,.14);text-shadow:0 0 8px rgba(232,201,106,.4)}
nav.toc .links a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--wheat),transparent)}
nav.toc .cap{margin-left:auto;font-size:11px;color:#7ef7d3;background:rgba(49,209,124,.08);border:1px solid rgba(49,209,124,.35);padding:2.5px 10px;border-radius:999px;white-space:nowrap}
nav.toc .prog{flex-basis:100%;height:2px;background:rgba(140,220,90,.1);border-radius:2px;overflow:hidden}
nav.toc .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8bc34a,#e8c96a);transition:width .12s linear;border-radius:2px}

.wrap{width:96%;max-width:1680px;margin:0 auto}

/* ---------- 区块 ---------- */
section{margin-top:44px;scroll-margin-top:72px}
.sec-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.sec-head .tt{font-size:20px;font-weight:700;letter-spacing:1px}
.sec-head .tt::before{content:"◈";color:var(--wheat);margin-right:8px;font-size:16px}
.sec-head .desc{color:var(--tx3);font-size:12.5px;max-width:1100px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-20px;top:-20px;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(232,201,106,.12),transparent 70%)}
.kpi .num{font-size:24px;font-weight:800;color:#fff;font-family:Consolas,monospace}
.kpi .num i{font-size:12px;font-weight:400;color:var(--tx2);margin-left:4px}
.kpi .label{color:var(--tx2);font-size:12.5px;margin-top:2px}
.kpi .trend{color:var(--tx3);font-size:11.5px;margin-top:4px}
.kpi.warn .num{color:var(--gold)}
.kpi.alert .num{color:var(--red)}

/* ---------- 布局 ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}
.chart-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.chart-box h4,.side-card h4{font-size:14px;color:#dff0c8;margin-bottom:10px;font-weight:700}
.chart-box h4 em,.side-card h4 em{font-size:11px;color:var(--tx3);font-weight:400;margin-left:8px}
.chart{width:100%;height:320px}
.chart.tall{height:380px}

/* ---------- 地图面板 ---------- */
.rt-panel{display:grid;grid-template-columns:minmax(420px,7fr) minmax(320px,4fr);gap:14px}
.rt-map{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
#prod-map,#ev-map{width:100%;height:540px;display:block}
#ship-map{width:100%;height:620px;display:block}
.map-legend{display:flex;flex-wrap:wrap;gap:10px;padding:8px 4px 2px;font-size:12px;color:var(--tx2)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.map-tip{position:absolute;right:14px;bottom:10px;font-size:11px;color:var(--tx3)}
.crop-tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.crop-tabs button{font-size:12px;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(232,201,106,.05);color:var(--tx2);cursor:pointer;transition:all .15s}
.crop-tabs button.on{background:rgba(232,201,106,.2);border-color:rgba(232,201,106,.5);color:#ffe9b0;font-weight:700}
.rt-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rank-list{display:flex;flex-direction:column;gap:6px;max-height:250px;overflow:auto}
.rank-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 8px;border-radius:7px;background:rgba(232,201,106,.04)}
.rank-item .no{width:18px;color:var(--tx3);font-family:Consolas,monospace;text-align:right}
.rank-item .nm{flex:1;color:#e2eed6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-item .tv{font-family:Consolas,monospace;font-weight:700;color:var(--wheat)}
.wchips{display:flex;flex-wrap:wrap;gap:6px}
.wchip{font-size:11.5px;color:#d5e8bc;border:1px solid rgba(232,201,106,.3);background:rgba(232,201,106,.06);padding:2px 9px;border-radius:999px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.tcloud{font-size:12.5px;color:#d5e8bc;border:1px solid var(--line);background:rgba(140,220,90,.05);padding:4px 11px;border-radius:999px}

/* ---------- 事件列表 ---------- */
.ev-panel{display:grid;grid-template-columns:minmax(400px,6fr) minmax(320px,5fr);gap:14px;align-items:stretch}
.ev-panel .rt-map{display:flex;flex-direction:column;height:620px}
.ev-panel #ev-map{flex:1;min-height:0;height:auto;display:block}
.ev-list{height:620px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.ev-item{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--wheat);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.ev-item:hover{background:rgba(232,201,106,.08);border-color:rgba(232,201,106,.45)}
.ev-item.wf{border-left-color:var(--red)}
.ev-item.st{border-left-color:var(--gold)}
.ev-item.si{border-left-color:var(--ice)}
.ev-item.sel{background:rgba(232,201,106,.12);border-color:rgba(232,201,106,.65)}
.ev-item .h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ev-item .nm{font-weight:700;font-size:13px;color:#eaf2dc}
.ev-item .ct{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid rgba(232,201,106,.4);color:#e8d9a0;white-space:nowrap}
.ev-item.wf .ct{border-color:rgba(255,92,92,.4);color:#ffb0b0}
.ev-item.st .ct{border-color:rgba(255,197,61,.4);color:#ffd88a}
.ev-item.si .ct{border-color:rgba(143,214,255,.4);color:#c9ecff}
.ev-item .meta{margin-top:4px;font-size:11.5px;color:var(--tx3);display:flex;flex-wrap:wrap;gap:4px 12px}
.ev-item .mg{color:var(--gold);font-family:Consolas,monospace}
.ev-item .ds{margin-top:4px;font-size:12px;color:var(--tx2)}
.ev-item .ds a{color:#7ecbff;border-bottom:1px dashed rgba(126,203,255,.5)}

/* ---------- 航运走廊列表 ---------- */
.corr-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.corr-item .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.corr-item .nm{font-weight:700;font-size:13.5px;color:#f2e8c8}
.corr-item .tp{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid rgba(232,201,106,.35);color:#e8d9a0}
.corr-item.rh{border-left:3px solid var(--red)}
.corr-item.rm{border-left:3px solid var(--gold)}
.corr-item.rl{border-left:3px solid var(--grn)}
.corr-item .meta{margin-top:5px;font-size:11.5px;color:var(--tx3);display:flex;flex-wrap:wrap;gap:4px 14px}
.corr-item .ds{margin-top:4px;font-size:12px;color:var(--tx2);line-height:1.6}
.corr-item.rh .tp{border-color:rgba(255,92,92,.4);color:#ffb0b0}
.rk{font-weight:700}
.rk.h{color:var(--red)}.rk.m{color:var(--gold)}.rk.l{color:var(--grn)}

/* ---------- 表格 ---------- */
.tbl-scroll{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:12px}
table.gt{width:100%;border-collapse:collapse;font-size:12.5px;min-width:600px}
table.gt th{position:sticky;top:0;background:#1a2b14;color:#b8d998;font-weight:600;padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.gt td{padding:8px 10px;border-bottom:1px solid rgba(140,220,90,.09);color:var(--tx2);white-space:nowrap}
table.gt td.c{color:#fff;font-weight:600}
table.gt tr:hover td{background:rgba(232,201,106,.05)}
.num{font-family:Consolas,monospace;color:var(--wheat)}

/* ---------- 资讯 ---------- */
.news-list{display:flex;flex-direction:column;gap:8px;max-height:560px;overflow:auto;padding-right:4px}
.news-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;transition:border-color .15s}
.news-item:hover{border-color:rgba(232,201,106,.4)}
.news-item .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.news-item .nm{font-size:13.5px;font-weight:600;color:#eaf2dc;line-height:1.6}
.news-item a.nm:hover{color:var(--wheat)}
.news-item .meta{margin-top:4px;font-size:11.5px;color:var(--tx3);display:flex;flex-wrap:wrap;gap:4px 14px}
.news-item .src{color:#9fd8ff}
.news-item .lg{padding:0 7px;border-radius:999px;font-size:10.5px;border:1px solid rgba(232,201,106,.3)}
.news-item .lg.zh{color:#ffd88a}
.news-item .lg.en{color:#9fd8ff}
.news-item .tp{color:#7ef7d3}

/* ---------- 风险 ---------- */
.alert-banner{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin-bottom:14px}
.alert-banner .lv{font-size:30px;font-weight:900;font-family:Consolas,monospace}
.alert-banner .lv.high{color:var(--red);text-shadow:0 0 14px rgba(255,92,92,.4)}
.alert-banner .lv.mid{color:var(--gold);text-shadow:0 0 14px rgba(255,197,61,.3)}
.alert-banner .lv.low{color:var(--grn)}
.alert-banner .tx{font-size:12.5px;color:var(--tx2);line-height:1.8}
.risk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.risk-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.risk-card .top{display:flex;justify-content:space-between;align-items:center}
.risk-card .cn{font-size:14px;font-weight:700;color:#eaf2dc}
.risk-card .bd{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid}
.risk-card .bd.h{border-color:rgba(255,92,92,.45);color:#ffb0b0}
.risk-card .bd.m{border-color:rgba(255,197,61,.45);color:#ffd88a}
.risk-card .bd.l{border-color:rgba(49,209,124,.45);color:#7ef7d3}
.risk-card .pct{margin-top:7px;font-size:20px;font-weight:800;color:var(--wheat);font-family:Consolas,monospace}
.risk-card .yr{font-size:11px;color:var(--tx3);margin-left:6px}

/* ---------- 页脚 ---------- */
footer{margin-top:46px;padding:22px 6vw;border-top:1px solid var(--line);color:var(--tx3);font-size:12px;text-align:center;line-height:2}
footer .fl{color:var(--wheat);border-bottom:1px dashed rgba(232,201,106,.5);padding-bottom:1px}
footer .fl:hover{color:#fff;border-bottom-color:#fff}
footer b{color:var(--gold);font-family:Consolas,monospace}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
	.rt-panel,.ev-panel{grid-template-columns:1fr}
	#prod-map,#ev-map{height:420px}
	.ev-panel .rt-map{height:auto}
	.ev-panel #ev-map{height:400px;flex:none}
	.ev-list{height:400px;max-height:none}
	#ship-map{height:440px}
}
@media (max-width:920px){
	nav.toc .cap{display:none}
	nav.toc .prog{order:4}
}
@media (max-width:640px){
	.hero h1{font-size:22px}
	nav.toc .in{padding:6px 4vw}
	nav.toc .brand .en{display:none}
}