/* HQTD Environmental Precision Analytics · V4 · 2026-09-17 */
:root{
  --env-blue:#0756a3;--env-cyan:#0b91a7;--env-navy:#062344;--env-ink:#16324f;
  --env-muted:#61748a;--env-line:#dce7f1;--env-soft:#f4f8fc;--env-white:#fff;
}
.env-topic-section{padding:72px 0;background:linear-gradient(180deg,#f7fbff 0%,#eef6fb 100%);border-top:1px solid #e2edf5;border-bottom:1px solid #e2edf5}
.env-topic-wrap{width:min(1280px,calc(100% - 48px));margin:0 auto}
.env-topic-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:30px}
.env-topic-kicker{display:block;color:#0871c5;font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.env-topic-head h2{margin:0;color:#10284a;font-size:34px;line-height:1.2}
.env-topic-head p{max-width:570px;margin:0;color:#62788d;font-size:14px;line-height:1.85}
.env-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.env-topic-card{position:relative;display:flex;flex-direction:column;min-height:330px;padding:26px;border:1px solid #d9e7f2;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(24,67,104,.08);text-decoration:none;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.env-topic-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#0756a3,#12a6bf)}
.env-topic-card:hover{transform:translateY(-4px);border-color:#b8d8eb;box-shadow:0 20px 42px rgba(20,69,108,.14)}
.env-topic-card.is-coming{background:linear-gradient(145deg,#fbfdff,#f3f7fa)}
.env-topic-status{align-self:flex-start;padding:5px 9px;border-radius:999px;background:#eaf4ff;color:#0756a3;font-size:11px;font-weight:900;letter-spacing:.4px}
.env-topic-status.coming{background:#edf1f4;color:#708094}
.env-topic-card h3{margin:20px 0 7px;color:#132d4b;font-size:23px;line-height:1.35}
.env-topic-card .en{color:#0a7ea3;font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase}
.env-topic-card p{margin:14px 0 18px;color:#667b8e;font-size:14px;line-height:1.8;flex:1}
.env-topic-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.env-topic-tags span{padding:5px 8px;border:1px solid #d7e5ef;border-radius:4px;color:#46637c;background:#f9fcfe;font-size:11px;font-weight:800}
.env-topic-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:17px;border-top:1px solid #e7eef4;color:#0756a3;font-size:13px;font-weight:900}
.env-topic-foot small{color:#7a8b9c;font-size:11px;font-weight:700}
.env-board-strip{margin:28px 0 8px;padding:22px;border:1px solid #dbe8f2;border-radius:10px;background:linear-gradient(135deg,#f6fbff,#eef6fb)}
.env-board-strip-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.env-board-strip-head h2{margin:0;color:#173654;font-size:20px}
.env-board-strip-head span{color:#0a7faa;font-size:11px;font-weight:900;letter-spacing:1.3px}
.env-board-strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.env-board-strip-grid a{display:block;padding:16px;border:1px solid #d9e6ef;border-radius:7px;background:#fff;color:#173654;text-decoration:none}
.env-board-strip-grid a strong{display:block;margin-bottom:5px;font-size:15px}
.env-board-strip-grid a small{color:#718294;font-size:11px;line-height:1.55}
.env-board-strip-grid a:hover{border-color:#8bc8e0;box-shadow:0 8px 20px rgba(32,92,127,.09)}
/* standalone topic common shell */
.env-page{background:#fff;color:var(--env-ink)}
.env-page .env-hero{padding:78px 0 68px;background:linear-gradient(135deg,#052b55 0%,#0756a3 56%,#0b91a7 100%);color:#fff;overflow:hidden}
.env-page .env-container{width:min(1240px,calc(100% - 48px));margin:0 auto}
.env-page .env-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:48px;align-items:center}
.env-page .env-eyebrow{display:block;margin-bottom:15px;color:#8ce6f4;font-size:12px;font-weight:900;letter-spacing:2px}
.env-page .env-hero h1{margin:0 0 20px;font-size:48px;line-height:1.16;letter-spacing:-1px}
.env-page .env-hero h1 em{font-style:normal;color:#8ce6f4}
.env-page .env-hero p{max-width:780px;margin:0;color:#e3f1fb;font-size:16px;line-height:1.95}
.env-page .env-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.env-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:5px;font-size:13px;font-weight:900;text-decoration:none;cursor:pointer}
.env-btn-primary{background:#fff;color:#0756a3}
.env-btn-secondary{background:#0fc0cf;color:#062d51}
.env-btn-outline{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff}
.env-hero-panel{padding:26px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(4,35,66,.42);box-shadow:0 24px 60px rgba(0,0,0,.16)}
.env-hero-panel .metric{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.env-hero-panel .metric:last-child{border-bottom:0}
.env-hero-panel .metric strong{font-size:28px;color:#fff}
.env-hero-panel .metric span{color:#cde8f8;font-size:12px;line-height:1.55}
.env-section{padding:68px 0}
.env-section.soft{background:#f5f9fc}
.env-section.dark{background:#062344;color:#fff}
.env-section-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:28px}
.env-section-head span{display:block;margin-bottom:8px;color:#0b91a7;font-size:11px;font-weight:900;letter-spacing:1.8px}
.env-section-head h2{margin:0;color:#173654;font-size:32px;line-height:1.25}
.env-section.dark .env-section-head h2{color:#fff}
.env-section-head p{max-width:570px;margin:0;color:#6a7f92;font-size:14px;line-height:1.8}
.env-section.dark .env-section-head p{color:#b9d2e7}
.env-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.env-category-card{padding:20px;border:1px solid #dce7ef;border-radius:9px;background:#fff;box-shadow:0 8px 22px rgba(25,64,96,.05)}
.env-category-card b{display:block;color:#0756a3;font-size:27px;margin-bottom:8px}
.env-category-card h3{margin:0 0 6px;color:#183854;font-size:16px}
.env-category-card p{margin:0;color:#728496;font-size:12px;line-height:1.65}
.env-workflow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.env-workflow article{padding:20px;border:1px solid #dce7ef;border-radius:8px;background:#fff}
.env-workflow b{color:#0b91a7;font-size:11px;letter-spacing:1px}.env-workflow h3{margin:9px 0;color:#173654;font-size:16px}.env-workflow p{margin:0;color:#718396;font-size:12px;line-height:1.7}
.env-coming-panel{padding:36px;border:1px dashed #b8cbd9;border-radius:12px;background:linear-gradient(135deg,#f9fcfe,#eef5f9);text-align:center}
.env-coming-panel strong{display:block;color:#173654;font-size:26px;margin-bottom:10px}.env-coming-panel p{max-width:760px;margin:0 auto;color:#718395;line-height:1.8}
/* modal */
.env-contact-modal[hidden]{display:none!important}.env-contact-modal{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:20px}.env-contact-backdrop{position:absolute;inset:0;background:rgba(3,18,34,.72);backdrop-filter:blur(5px)}
.env-contact-panel{position:relative;z-index:1;width:min(430px,100%);padding:28px;border-radius:12px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.35);text-align:center}
.env-contact-close{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#eef3f7;color:#52677a;font-size:22px;cursor:pointer}
.env-contact-panel .kicker{display:block;color:#0b91a7;font-size:11px;font-weight:900;letter-spacing:1.5px}.env-contact-panel h2{margin:8px 0 8px;color:#173654;font-size:23px}.env-contact-panel p{margin:0 0 14px;color:#6d8092;font-size:12px;line-height:1.7}.env-contact-panel img{display:block;width:min(100%,310px);margin:0 auto;border-radius:10px;background:#eef7ff}.env-contact-panel small{display:block;margin-top:12px;color:#7b8b99;font-size:11px;line-height:1.6}
.env-footer{background:#062344;color:#c7dded}.env-footer .env-container{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:32px 0}.env-footer strong{color:#fff}.env-footer a{color:#d7edf8;text-decoration:none}
@media(max-width:980px){.env-topic-grid,.env-board-strip-grid{grid-template-columns:1fr}.env-topic-head,.env-section-head{display:block}.env-topic-head p,.env-section-head p{margin-top:14px}.env-page .env-hero-grid{grid-template-columns:1fr}.env-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.env-workflow{grid-template-columns:1fr 1fr}.env-page .env-hero h1{font-size:39px}}
@media(max-width:620px){.env-topic-wrap,.env-page .env-container{width:min(100% - 28px,620px)}.env-topic-section{padding:52px 0}.env-topic-head h2,.env-section-head h2{font-size:27px}.env-page .env-hero{padding:52px 0}.env-page .env-hero h1{font-size:33px}.env-category-grid,.env-workflow{grid-template-columns:1fr}.env-footer .env-container{display:grid}.env-topic-card{min-height:0}}

/* V3 · Homepage floating Environmental Precision Analytics hub */
.env-floating-hub{
  position:fixed;top:118px;right:28px;z-index:2090;
  width:min(470px,calc(100vw - 36px));max-height:calc(100vh - 154px);overflow:auto;
  padding:28px 26px 22px;border:1px solid rgba(255,255,255,.2);border-radius:18px;
  background:linear-gradient(145deg,#073d70 0%,#0873b8 58%,#0b91a7 100%);
  color:#fff;box-shadow:0 26px 70px rgba(5,54,96,.32);backdrop-filter:blur(16px)
}
.env-floating-hub[hidden],.env-floating-reopen[hidden]{display:none!important}
.env-floating-close{position:absolute;right:12px;top:12px;width:36px;height:36px;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.env-floating-close:hover{background:rgba(255,255,255,.17)}
.env-floating-kicker{display:flex;align-items:center;gap:9px;padding-right:42px;color:#c9eff8;font-size:11px;font-weight:900;letter-spacing:1.7px;text-transform:uppercase}
.env-floating-kicker span{display:block;width:34px;height:4px;border-radius:999px;background:#ff9a2f}
.env-floating-hub h2{margin:15px 46px 8px 0;color:#fff;font-size:28px;line-height:1.22;letter-spacing:-.4px}
.env-floating-intro{margin:0 0 18px;color:#e0f1fa;font-size:13px;line-height:1.75}
.env-floating-topics{display:grid;gap:10px}
.env-floating-topic{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.env-floating-topic:hover{transform:translateX(-3px);background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.38)}
.env-floating-topic strong{display:block;margin-bottom:4px;color:#fff;font-size:14px;line-height:1.4}
.env-floating-topic small{display:block;color:#ccebf6;font-size:10.5px;line-height:1.5}
.env-floating-topic>span{flex:0 0 auto;padding:6px 8px;border-radius:5px;background:#fff;color:#0756a3;font-size:10px;font-weight:900;white-space:nowrap}
.env-floating-topic.is-coming{background:rgba(3,39,68,.22)}
.env-floating-topic.is-coming>span{background:rgba(255,255,255,.16);color:#fff}
.env-floating-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:10.5px}
.env-floating-foot span{color:#c4e6f3}.env-floating-foot a{color:#fff;font-weight:900;text-decoration:none}
.env-floating-reopen{position:fixed;right:28px;top:150px;z-index:2088;min-width:235px;padding:13px 16px;border:1px solid rgba(255,255,255,.26);border-radius:12px;background:linear-gradient(135deg,#0756a3,#0b91a7);color:#fff;text-align:left;box-shadow:0 18px 44px rgba(5,54,96,.25);cursor:pointer}
.env-floating-reopen strong{display:block;font-size:13px}.env-floating-reopen small{display:block;margin-top:3px;color:#d4eff8;font-size:10px}
@media(max-width:820px){
  .env-floating-hub{top:auto;right:12px;bottom:84px;width:calc(100vw - 24px);max-height:70vh;padding:23px 18px 18px;border-radius:15px}
  .env-floating-hub h2{font-size:23px}.env-floating-intro{font-size:12px}.env-floating-topic{padding:12px}.env-floating-topic strong{font-size:13px}
  .env-floating-reopen{top:auto;right:12px;bottom:84px;min-width:220px}
}

/* V4 · Microplastics full topic */
.micro-gallery,.micro-spectrum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.micro-gallery figure,.micro-spectrum-grid figure{margin:0;overflow:hidden;border:1px solid #dce7ef;border-radius:10px;background:#fff;box-shadow:0 10px 26px rgba(25,64,96,.07)}
.micro-gallery img,.micro-spectrum-grid img{display:block;width:100%;height:310px;object-fit:cover;background:#eef3f7}
.micro-spectrum-grid img{height:285px;object-fit:contain;background:#fff}
.micro-gallery figcaption,.micro-spectrum-grid figcaption{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;color:#173654;font-size:12px}
.micro-gallery figcaption span{color:#718396;font-size:11px}
.micro-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.micro-app-grid article{padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.06)}
.micro-app-grid strong{display:block;margin-bottom:8px;color:#fff;font-size:18px}.micro-app-grid p{margin:0;color:#c7dceb;font-size:12px;line-height:1.75}
@media(max-width:820px){.micro-gallery,.micro-spectrum-grid,.micro-app-grid{grid-template-columns:1fr}.micro-gallery img,.micro-spectrum-grid img{height:auto}}