.nx{--nx-brand:#3FB584;--nx-hover:#3FB584;--nx-ink:#13231C;--nx-muted:#586861;--nx-line:#D9E2DD;--nx-surface:#fff;--nx-surface2:#F7FAF8;--nx-weak:#E8F7F1;--nx-ink-brand:#1F7A55;max-width:80rem;margin:0 auto;padding:0 24px;font-family:'Roboto Condensed',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:var(--nx-ink)}
.dark .nx{--nx-ink:#F3F4F6;--nx-muted:#9CA3AF;--nx-line:#374151;--nx-surface:#1F2937;--nx-surface2:#273244;--nx-weak:#143D2E;--nx-ink-brand:#3FB584}
.nx-head{margin-bottom:22px}
.nx-head h2{margin:0;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;line-height:1.05;color:var(--nx-ink)}
.nx-head p{margin:8px 0 0;font-size:18px;color:var(--nx-muted);max-width:64ch}
.nx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.nx-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--nx-line);border-radius:18px;background:var(--nx-surface);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.nx-card:hover{border-color:var(--nx-brand);box-shadow:0 10px 26px rgba(10,30,22,.10);transform:translateY(-2px)}
.dark .nx-card:hover{box-shadow:none}
.nx-img{position:relative;display:block;aspect-ratio:16/10;background:var(--nx-weak);overflow:hidden}
.nx-img img{display:block;width:100%;height:100%;object-fit:cover}
.nx-date{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:9px;background:rgba(19,35,28,.82);color:#fff;font-size:15px;font-weight:700;line-height:1.1;backdrop-filter:blur(4px)}
.nx-bm{position:absolute;right:12px;top:12px;z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #D9E2DD;border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.12);cursor:pointer}
.dark .nx-bm{background:rgba(31,41,55,.92);border-color:#374151}
.nx-bm svg{width:20px;height:20px}
.nx-bm .bookmark-path{fill:transparent;stroke:#9CA3AF;stroke-width:1.5;stroke-linejoin:round}
.nx-bm .bookmark-path[class~="fill-[#3fb584]"]{fill:var(--nx-brand);stroke:var(--nx-brand)}
.nx-bm:focus-visible,.nx-title a:focus-visible,.nx-btn:focus-visible,.nx-chip:focus-visible{outline:3px solid var(--nx-brand);outline-offset:2px}
.nx-body{display:flex;flex-direction:column;flex:1;padding:16px 16px 18px}
.nx-title{margin:0;font-size:21px;font-weight:700;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.nx-title a{color:var(--nx-ink);text-decoration:none}
.nx-title a::after{content:"";position:absolute;inset:0;z-index:1}
.nx-title a:hover{color:var(--nx-ink-brand)}
.nx-meta{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:16px;color:var(--nx-muted);line-height:1.2}
.nx-meta svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--nx-brand);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nx-chips{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.nx-chip{padding:4px 10px;border:1px solid var(--nx-line);border-radius:6px;background:var(--nx-surface2);color:var(--nx-ink);font-size:14px;font-weight:500;text-decoration:none;transition:background .12s,color .12s,border-color .12s}
.nx-chip:hover{background:var(--nx-brand);border-color:var(--nx-brand);color:#fff}
.nx-desc{margin:10px 0 0;font-size:16px;line-height:1.4;color:var(--nx-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nx-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto;height:44px;border-radius:11px;background:var(--nx-brand);color:#fff;font-size:17px;font-weight:500;text-decoration:none;transition:background .12s}
.nx-btn-wrap{padding-top:16px;margin-top:auto}
.nx-card:hover .nx-btn{background:var(--nx-hover)}
.nx-empty{margin:0;font-size:18px;color:var(--nx-muted)}
.nx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1100px){.nx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.nx{padding:0 16px}.nx-grid{gap:14px}}
@media (max-width:520px){.nx-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nx-card,.nx-chip,.nx-btn{transition:none}.nx-card:hover{transform:none}}
.dark .nx-head h2{font-weight:500}
.dark .nx-title{font-weight:500}
.dark .nx-btn{background:#374151;color:#F3F4F6}
.dark .nx-card:hover .nx-btn{background:#4B5563}
.dark .nx-btn{font-weight:400}