:root{
  --ink:#183438;--ink-soft:#415854;--muted:#7a8c88;
  --green:#0f6c62;--green-deep:#093f3d;--green-light:#e8f4ef;--green-line:#cfe3da;
  --canvas:#f4f6f3;--card:#fff;--line:#e4ebe7;--line-soft:#eef2f0;
  --warn:#b4761b;--warn-bg:#fdf6e9;
  --bad:#c03b2f;--bad-bg:#fdf0ee;
  --radius:18px;--radius-sm:12px;
  --shadow-card:0 4px 24px rgba(24,52,56,.06),0 1px 3px rgba(24,52,56,.04);
  --shadow-card-hover:0 12px 40px rgba(24,52,56,.1);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas)}

/* ── 顶部导航 ── */
.site-header{height:82px;max-width:1220px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 30px}
.identity{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.identity-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--green),#0a554d);color:#fff;font-size:19px;font-weight:800;box-shadow:0 4px 12px rgba(15,108,98,.25)}
.identity b{display:block;font-size:17px;letter-spacing:.5px}
.identity small{display:block;font-size:8px;letter-spacing:1.2px;margin-top:3px;color:#627773}
.site-header nav{display:flex;gap:28px;align-items:center}
.site-header nav a{font-size:13px;color:#516662;text-decoration:none;transition:color .2s}
.site-header nav a:hover{color:var(--green)}
.site-header .login-link{color:var(--green);font-weight:700;border:1px solid var(--green-line);border-radius:20px;padding:8px 14px;background:#fff;transition:all .2s}
.site-header .login-link:hover{background:var(--green);color:#fff;border-color:var(--green)}

/* ── Hero ── */
.hero{max-width:1220px;min-height:480px;margin:0 auto 46px;border-radius:28px;background:linear-gradient(115deg,#d5eee2 0%,#e9f2e8 48%,#b8dfd4 100%);overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:64px 8%;position:relative}
.hero-copy{z-index:1}
.eyebrow{color:var(--green);font-size:12px;font-weight:800;letter-spacing:1.2px;margin:0 0 14px}
.hero h1{font-size:54px;line-height:1.12;letter-spacing:-2.5px;margin:0;color:#133937}
.intro{max-width:450px;color:#516965;font-size:16px;line-height:1.8;margin:20px 0 28px}
.query-panel{background:#fff;border:1px solid #fff;border-radius:16px;padding:18px;max-width:470px;box-shadow:0 20px 45px rgba(15,79,68,.12)}
.query-panel label{display:block;font-size:12px;font-weight:700;margin:0 0 8px;color:var(--ink-soft)}
.query-row{display:flex;gap:8px}
.query-row input{min-width:0;flex:1;border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;font:600 15px ui-monospace,Consolas,monospace;letter-spacing:.6px;color:var(--ink);text-transform:uppercase;outline:none;transition:all .2s;background:#fafcfb}
.query-row input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(15,108,98,.12);background:#fff}
.query-row button,.dialog-submit{border:0;border-radius:10px;background:linear-gradient(135deg,var(--green),#0a554d);color:#fff;padding:0 19px;font-weight:700;cursor:pointer;font:inherit;transition:all .2s;box-shadow:0 4px 12px rgba(15,108,98,.2)}
.query-row button:hover,.dialog-submit:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,108,98,.3)}
.query-panel p{font-size:11px;color:var(--muted);margin:10px 0 0}
.hero-object{height:370px;position:relative;display:grid;place-items:center}
.coat{position:relative;width:225px;height:255px;border-radius:62px 62px 26px 26px;background:linear-gradient(150deg,#0d6f67,#084b49);box-shadow:inset 16px 0 25px #64ada1,inset -12px -10px 24px #063a39,0 25px 40px rgba(11,93,80,.3);transform:rotate(-5deg)}
.coat:before,.coat:after{content:"";position:absolute;top:65px;width:92px;height:85px;background:#0b625b;border-radius:50px;z-index:-1}
.coat:before{left:-55px;transform:rotate(25deg)}
.coat:after{right:-55px;transform:rotate(-25deg)}
.collar{position:absolute;top:0;left:72px;width:80px;height:54px;border:14px solid #daf0e8;border-top:0;border-radius:0 0 45px 45px}
.tag{position:absolute;right:-28px;bottom:40px;background:#fffdf5;width:100px;padding:11px;border-radius:8px;transform:rotate(8deg);box-shadow:0 10px 22px rgba(6,47,43,.18);color:#183438}
.tag i{display:block;width:32px;height:32px;background:repeating-linear-gradient(90deg,#183438 0 3px,transparent 3px 5px),repeating-linear-gradient(#183438 0 3px,transparent 3px 5px);margin-bottom:7px;border-radius:3px}
.tag b,.tag small{display:block;font-size:10px}
.tag small{color:#72827f;margin-top:2px}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.5)}
.ring-one{width:330px;height:330px}
.ring-two{width:460px;height:460px;border-color:rgba(12,116,103,.12)}

/* ── 结果卡片（核心展示区） ── */
.lookup{max-width:940px;margin:0 auto}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);margin:0 0 46px;transition:box-shadow .3s}
.result-card:hover{box-shadow:var(--shadow-card-hover)}

/* 卡片头部 */
.result-head{padding:26px 30px;background:linear-gradient(135deg,var(--green-deep) 0%,#0c4a47 100%);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:16px}
.result-head p{margin:0 0 5px;color:#9fc9bf;font-size:12px;letter-spacing:.3px}
.result-head h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px}
.status{padding:7px 14px;border-radius:20px;background:rgba(255,255,255,.15);color:#d4f0e6;font-size:12px;font-weight:700;letter-spacing:.3px;white-space:nowrap;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2)}
.status.void{background:rgba(192,59,47,.2);color:#ffb8b2;border-color:rgba(255,184,178,.3)}

/* 异常/作废提示条 */
.result-note{padding:13px 30px;background:var(--warn-bg);color:var(--warn);font-size:13px;line-height:1.6;border-bottom:1px solid #f0e6cf}
.result-note.muted{background:var(--line-soft);color:var(--muted);border-bottom:1px solid var(--line)}

/* 溯源信息网格 */
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:6px 20px 14px}
.result-grid div{padding:16px 12px;border-bottom:1px solid var(--line-soft);position:relative}
.result-grid div:nth-last-child(-n+3){border-bottom:0}
.result-grid small{display:block;color:var(--muted);font-size:11.5px;margin-bottom:5px;letter-spacing:.2px;font-weight:500}
.result-grid b{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-all}
.result-grid b.code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}

/* 信息区块（企业/产品/批次/质检/网点） */
.info-block{border-top:1px solid var(--line);padding:10px 30px 22px;position:relative}
.info-block h3{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:9px;padding-top:16px}
.info-block h3:before{content:"";display:inline-block;width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--green),#0a554d)}

/* 产品图片 */
.product-figure{margin:14px 0 4px;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fafcfb;overflow:hidden;text-align:center;box-shadow:0 2px 8px rgba(24,52,56,.04)}
.product-figure img{display:block;width:100%;max-height:320px;object-fit:contain;background:#fff}

/* 质量等级徽章 */
.grade-badge{display:inline-block;padding:3px 11px;border-radius:12px;background:var(--green-light);border:1px solid var(--green-line);color:var(--green);font-size:12px;font-weight:700;letter-spacing:.3px}

/* 表格（面料成分 / 质检明细） */
.table-scroll{overflow-x:auto;margin-top:12px;border-radius:var(--radius-sm);border:1px solid var(--line)}
.trace-table{width:100%;min-width:420px;border-collapse:collapse;font-size:13px;background:#fff}
.trace-table th,.trace-table td{border-bottom:1px solid var(--line-soft);padding:10px 12px;text-align:left}
.trace-table th{background:var(--green-light);font-weight:700;color:var(--green-deep);white-space:nowrap;font-size:12.5px;letter-spacing:.2px}
.trace-table tbody tr:nth-child(even){background:#fafcfb}
.trace-table tbody tr:hover{background:var(--green-light)}
.trace-table tbody tr:last-child td{border-bottom:0}
.trace-table .good,.trace-table .bad{font-weight:700}

/* 网点列表 */
.outlet-list{list-style:none;margin:12px 0 0;padding:0}
.outlet-list li{padding:12px 0;border-bottom:1px dashed var(--line);display:flex;flex-direction:column;gap:3px}
.outlet-list li:last-child{border-bottom:0}
.outlet-list b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.outlet-list small{color:var(--muted);font-size:12.5px;line-height:1.6}

/* 辅助文案 */
.mini{font-size:12px;color:var(--muted);line-height:1.7;margin:10px 0 0}
.mini.warn{color:var(--warn);background:var(--warn-bg);padding:8px 12px;border-radius:8px;border-left:3px solid #e0b85c}
.good{color:var(--green)}
.bad{color:var(--bad)}

/* 质检报告链接 */
.report-link{display:inline-flex;align-items:center;gap:5px;margin:14px 0 0;color:var(--green);font-weight:700;font-size:13px;text-decoration:none;border-bottom:1px solid var(--green-line);padding-bottom:2px;transition:all .2s}
.report-link:hover{color:#0a554d;border-bottom-color:var(--green)}
.report-link:after{content:"→";font-size:12px;transition:transform .2s}
.report-link:hover:after{transform:translateX(3px)}

/* 底部操作区 */
.result-actions{padding:20px 30px 26px;display:flex;gap:14px;align-items:center;border-top:1px solid var(--line-soft);background:#fafcfb}
.result-actions button{background:linear-gradient(135deg,var(--green),#0a554d);color:#fff;border:0;border-radius:10px;padding:12px 22px;font-weight:700;cursor:pointer;font:inherit;transition:all .2s;box-shadow:0 4px 12px rgba(15,108,98,.2);letter-spacing:.3px}
.result-actions button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,108,98,.3)}
.result-actions a{color:var(--green);font-size:13px;font-weight:600;text-decoration:none;transition:color .2s}
.result-actions a:hover{color:#0a554d;text-decoration:underline}

/* 加载 / 空状态 */
.loading,.empty-result{padding:36px 28px;text-align:center;background:#fff;border-radius:var(--radius);margin-bottom:46px;color:var(--muted);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.loading{font-size:14px}
.empty-result{font-size:14px;line-height:1.7}

/* ── 保障区 / 如何使用 / 隐私 ── */
.assurance{max-width:1120px;margin:0 auto 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.assurance article{display:flex;gap:14px;background:#fff;padding:22px;border-radius:var(--radius-sm);border:1px solid var(--line);transition:all .25s}
.assurance article:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}
.assurance span{font:700 14px ui-monospace,monospace;color:var(--green);padding-top:2px;background:var(--green-light);width:32px;height:32px;display:grid;place-items:center;border-radius:8px;flex-shrink:0}
.assurance b{font-size:15px}
.assurance p{color:var(--muted);font-size:13px;line-height:1.7;margin:6px 0 0}
.how{padding:85px max(7%,calc((100% - 1060px)/2));background:#e7efe9;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.how h2,.privacy h2{font-size:34px;line-height:1.3;letter-spacing:-1.3px;margin:0}
.how ol{margin:0;padding:0;counter-reset:steps;display:grid;gap:22px}
.how li{list-style:none;counter-increment:steps;position:relative;padding:16px 16px 16px 56px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--line);transition:all .2s}
.how li:hover{box-shadow:var(--shadow-card)}
.how li:before{content:"0" counter(steps);position:absolute;left:14px;top:18px;color:var(--green);font:700 15px ui-monospace,monospace;background:var(--green-light);width:28px;height:28px;display:grid;place-items:center;border-radius:7px}
.how li b{font-size:15px}
.how li p{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.7}
.privacy{max-width:780px;margin:80px auto;text-align:center}
.privacy>p:last-child{line-height:1.9;color:var(--muted);max-width:620px;margin:18px auto;font-size:14px}

/* ── 页脚 ── */
footer{border-top:1px solid var(--line);padding:28px max(5%,calc((100% - 1120px)/2));display:flex;justify-content:space-between;font-size:12px;color:var(--muted);background:#fff}
footer a{color:var(--green);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}

/* ── 反馈弹窗 ── */
.dialog-form{padding:30px;min-width:min(440px,calc(100vw - 40px));position:relative}
.dialog-form h2{margin:0;font-size:22px}
.dialog-form>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7}
.dialog-form label{display:block;margin:16px 0;font-size:12px;font-weight:700;color:var(--ink-soft)}
.dialog-form input,.dialog-form textarea,.dialog-form select{display:block;width:100%;margin-top:7px;border:1.5px solid var(--line);border-radius:9px;padding:11px;font:inherit;background:#fafcfb;transition:all .2s;color:var(--ink)}
.dialog-form input:focus,.dialog-form textarea:focus,.dialog-form select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(15,108,98,.1);background:#fff;outline:none}
.dialog-form textarea{min-height:100px;resize:vertical}
.dialog-submit{height:44px;width:100%;margin-top:8px}
.dialog-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:24px;color:var(--muted);cursor:pointer;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;transition:all .2s}
.dialog-close:hover{background:var(--line-soft);color:var(--ink)}
dialog{border:0;border-radius:18px;padding:0;box-shadow:0 24px 60px rgba(18,44,39,.25)}
dialog::backdrop{background:rgba(16,40,36,.5);backdrop-filter:blur(2px)}

/* ── 响应式（移动端优先打磨） ── */
@media(max-width:760px){
  .site-header{height:64px;padding:0 16px}
  .site-header nav a:not(.login-link){display:none}
  .site-header .login-link{padding:6px 12px;font-size:12px}
  .hero{border-radius:0;grid-template-columns:1fr;padding:44px 20px 28px;margin-bottom:24px;min-height:auto}
  .hero h1{font-size:36px;letter-spacing:-1.5px}
  .intro{font-size:14.5px;line-height:1.7;margin:14px 0 22px}
  .hero-object{height:200px;margin-top:18px}
  .coat{transform:scale(.68) rotate(-5deg)}
  .ring-one{width:200px;height:200px}
  .ring-two{width:280px;height:280px}
  .query-panel{padding:14px;max-width:100%}
  .query-row{flex-direction:column}
  .query-row input{width:100%}
  .query-row button{padding:12px;height:44px}
  .assurance{grid-template-columns:1fr;gap:12px;padding:0 16px;margin-bottom:50px}
  .assurance article{padding:18px}
  .how{grid-template-columns:1fr;padding:50px 20px;gap:30px}
  .how h2,.privacy h2{font-size:27px}
  .privacy{margin:50px 20px}
  /* 结果卡片移动端 */
  .result-card{border-radius:0;margin:0 -16px 24px;border-left:0;border-right:0}
  .result-head{padding:20px 18px;flex-direction:column;align-items:flex-start;gap:10px}
  .result-head h2{font-size:19px}
  .status{align-self:flex-start}
  .result-note{padding:11px 18px;font-size:12.5px}
  .result-grid{grid-template-columns:1fr 1fr;padding:4px 12px 10px;gap:0}
  .result-grid div{padding:13px 8px}
  .result-grid div:nth-last-child(-n+3){border-bottom:1px solid var(--line-soft)}
  .result-grid div:last-child{border-bottom:0}
  .result-grid b{font-size:13.5px}
  .info-block{padding:6px 18px 18px}
  .info-block h3{font-size:14px;padding-top:14px;margin-bottom:10px}
  .product-figure img{max-height:220px}
  .table-scroll{border-radius:10px}
  .trace-table{font-size:12.5px;min-width:360px}
  .trace-table th,.trace-table td{padding:8px 10px}
  .outlet-list li{padding:10px 0}
  .outlet-list b{font-size:13.5px}
  .result-actions{padding:16px 18px 22px;flex-direction:column;align-items:stretch;gap:10px}
  .result-actions button{width:100%;padding:13px}
  .result-actions a{text-align:center;padding:6px}
  .loading,.empty-result{border-radius:0;margin:0 -16px 24px;padding:28px 20px}
  footer{padding:20px 16px;gap:10px;flex-direction:column}
  .dialog-form{padding:22px 20px}
}

/* ══════════ 三 tab（2026-10-09） ══════════
   对齐 Ecode 官方查询页（国家物联网标识管理中心）的信息架构：
   产品信息 / 企业信息 / 追溯信息。家长在官方页与本页看到的组织方式一致，
   不必为一个"只是看看"的页面重新学一遍导航。
   用纯 CSS + 一个切 class 的小函数实现，不为三个 tab 引前端框架。 */
.tabs{display:flex;gap:4px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--card);overflow-x:auto}
.tab{appearance:none;border:0;background:none;padding:15px 20px 13px;font-size:14.5px;font-weight:600;
  color:var(--muted);cursor:pointer;position:relative;font-family:inherit;letter-spacing:.3px;white-space:nowrap}
.tab:hover{color:var(--green)}
.tab.is-active{color:var(--green-deep)}
.tab.is-active:after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--green),#0a554d)}
.tab-panel{padding-top:2px}
.tab-panel.hidden{display:none}
/* 标题下的「部位 + 号型」：家长第一眼要确认的就是这个 */
.result-head .spec{margin:7px 0 0;font-size:14px;font-weight:700;color:#cdeae1;letter-spacing:1.2px}

/* 出厂流向信息（官方 tab3 的同一区块，逐条列出货发给了谁） */
.flow-list{padding:4px 0 2px}
.flow-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 16px;margin:0 0 12px;background:#fbfdfc}
.flow-row{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.flow-row:last-child{border-bottom:0}
.flow-row small{color:var(--muted);font-size:12px;flex:0 0 140px;padding-top:2px}
.flow-row b{font-weight:600;color:var(--ink);word-break:break-all}
.flow-row b.code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.4px}

@media(max-width:560px){
  .tabs{padding:0 10px}
  .tab{padding:13px 13px 11px;font-size:13.5px}
  .tab.is-active:after{left:10px;right:10px}
  .bottom-nav-open .tabs,.tab-panel{padding-left:0;padding-right:0}
  .flow-row{flex-direction:column;gap:3px}
  .flow-row small{flex:none;padding-top:0}
  .result-head .spec{font-size:13px}
}