/* V3.1 实装 A：联网开关、靶点页、天然产物库 */
.net-w { position: relative; margin-left: 12px; }
.net-t { font: 600 13px/1 var(--w6a-font-cn, sans-serif); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--w6a-hairline); background: var(--w6a-paper); color: var(--w6a-ink-700); cursor: pointer; white-space: nowrap; }
.net-t b { display: inline-block; min-width: 1.2em; }
.net-t[data-on="1"] { border-color: var(--w6a-brand); color: var(--w6a-brand); background: var(--w6a-brand-tint); }
.net-t[data-on="1"]::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--w6a-ok, #1a7f4b); margin-right: 6px; vertical-align: 1px; animation: netp 1.6s ease-in-out infinite; }
@keyframes netp { 50% { opacity: .3; } }
.net-note { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, 86vw); z-index: 60; background: var(--w6a-paper); border: 1px solid var(--w6a-border, #ccd); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.12); font-size: 13px; }
.net-note p { margin: 0 0 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.tg-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.tg-form input, .tg-form select { font: inherit; padding: 8px 10px; border: 1px solid var(--w6a-hairline); border-radius: 8px; background: var(--w6a-paper); min-width: 0; }
.tg-form #tq { flex: 1 1 220px; } .tg-form .tax-o { width: 130px; }
.msg.warn { color: var(--w6a-danger); font-weight: 600; }
.tg-card { border: 1px solid var(--w6a-hairline); border-radius: 14px; padding: 14px 16px; margin: 10px 0; background: var(--w6a-paper); animation: tgopen .5s cubic-bezier(.2,.8,.2,1) both; transform-origin: top; }
@keyframes tgopen { from { opacity: 0; transform: translateY(-8px) scaleY(.9); } }
.tg-card h3 { margin: 2px 0 8px; }
.tg-dl, .np-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: 14px; } .tg-dl dt, .np-dl dt { color: var(--w6a-ink-500); } .tg-dl dd, .np-dl dd { margin: 0; }
.tg-fn { margin: 8px 0 4px; padding: 6px 12px; border-left: 3px solid var(--w6a-brand); background: var(--w6a-sunk); font-size: 14px; }
.tg-af { margin-top: 8px; }
.tg-bars { list-style: none; padding: 0; margin: 8px 0; }
.tg-bars li { opacity: 0; animation: tgrow .45s ease-out forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes tgrow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.tg-bars button { display: grid; grid-template-columns: 52px minmax(60px, 1fr) 62px; grid-template-areas: "id bar r" "m m m"; gap: 2px 10px; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.tg-bars button:hover { background: var(--w6a-brand-tint); }
.tg-bars b { grid-area: id; } .tg-r { grid-area: r; font-variant-numeric: tabular-nums; text-align: right; } .tg-m { grid-area: m; }
.tg-bar { grid-area: bar; align-self: center; height: 10px; background: var(--w6a-sunk); border-radius: 5px; overflow: hidden; }
.tg-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--w6a-brand), var(--w6a-accent, var(--w6a-brand))); border-radius: 5px; animation: tgbar .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes tgbar { from { width: 0; } }
.tg-view { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid var(--w6a-hairline); background: radial-gradient(circle at 50% 40%, #fff, var(--w6a-sunk)); overflow: hidden; }
.tg-ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--w6a-ink-500); margin: 0; font-size: 14px; }
.tg-lig ul { list-style: none; padding: 0; margin: 6px 0; } .tg-lig li { padding: 8px 0; border-bottom: 1px solid var(--w6a-hairline); } .tg-lig .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.np-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.np-count b { font-size: 28px; color: var(--w6a-brand); }
.np-f { display: flex; gap: 8px; flex-wrap: wrap; } .np-f input { font: inherit; padding: 8px 10px; border: 1px solid var(--w6a-hairline); border-radius: 8px; min-width: 0; flex: 1 1 220px; }
.np-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.np-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; max-height: 1180px; overflow-y: auto; padding: 4px; }
.np-c { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; background: var(--w6a-paper); border: 1px solid var(--w6a-hairline); border-radius: 12px; padding: 8px 10px 10px; cursor: pointer; animation: npin .5s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.np-c[hidden] { display: none; }
@keyframes npin { from { opacity: 0; transform: translateY(8px); } }
.np-c:hover { border-color: var(--w6a-brand); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.np-s { display: block; height: 110px; } .np-s svg { width: 100%; height: 110px; }
.np-c i, .np-o { font-size: 12px; color: var(--w6a-ink-500); } .np-t { font-size: 12px; color: var(--w6a-brand); }
.np-detail { position: sticky; top: 16px; border: 1px solid var(--w6a-hairline); border-radius: 16px; padding: 14px 16px; background: var(--w6a-paper); }
.np-big svg { width: 100%; height: auto; max-height: 260px; }
.np-detail .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
  .tg-grid, .np-body { grid-template-columns: 1fr; }
  .np-wall { max-height: 720px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .np-detail { position: static; }
  .net-w { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .tg-card, .tg-bars li, .tg-bar i, .np-c, .net-t::before { animation: none !important; opacity: 1; } }