/* 中国节水产业一张图 · H5（手机优先） */
:root{
  --bg:#081826; --bg2:#0B2132; --panel:#0F2A3D; --line:#1E445C;
  --teal:#39A0C4; --teal2:#6FC3DD; --gold:#D9A441; --gold2:#F2C979;
  --txt:#DCE9F0; --mut:#7E9AAC; --good:#4CC38A;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; overscroll-behavior:none;}
body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif; background:var(--bg); color:var(--txt); font-size:14px; user-select:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input{font-family:inherit;}

#app{display:flex; flex-direction:column; height:100dvh; max-width:860px; margin:0 auto;}
/* 顶栏 */
#hd{display:flex; align-items:center; gap:8px; padding:10px 14px; background:linear-gradient(180deg,#0D2436,#0A1D2C); border-bottom:1px solid var(--line); z-index:20;}
#hd .logo{font-size:16px; font-weight:800; color:#fff; white-space:nowrap;}
#hd .logo em{color:var(--teal2); font-style:normal;}
#hd .sub{font-size:10px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 底部导航 */
#nav{display:flex; border-top:1px solid var(--line); background:#0A1D2C; z-index:20; padding-bottom:env(safe-area-inset-bottom);}
#nav button{flex:1; padding:9px 0 7px; text-align:center; color:var(--mut); font-size:11px;}
#nav button .ic{display:block; font-size:19px; margin-bottom:2px;}
#nav button.on{color:var(--teal2); font-weight:700;}
/* 视图 */
#bd{flex:1; position:relative; overflow:hidden;}
.view{position:absolute; inset:0; display:none; overflow-y:auto;}
.view.on{display:block;}

/* ===== 地图视图 ===== */
#view-map{background:radial-gradient(800px 500px at 60% 30%, #0E2A3E 0%, var(--bg) 75%); overflow:hidden;}
#mapwrap{position:absolute; inset:0; touch-action:none;}
#mapsvg{width:100%; height:100%; display:block;}
.prov{fill:#132E44; stroke:#3E6379; stroke-width:.6;}
.flowline{stroke:#39A0C4; stroke-width:1.5; opacity:.8; stroke-linecap:round; fill:none; stroke-dasharray:6 10; animation:flow 3s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-160;}}
.dotp{animation:dotpulse 2.6s ease-in-out infinite;}
@keyframes dotpulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.flashring{animation:flash 1.6s ease-out infinite;}
@keyframes flash{0%{r:6;opacity:.9;}100%{r:26;opacity:0;}}
.wslab text{fill:var(--teal2); font-weight:700;}
.wslab circle{fill:rgba(57,160,196,.16); stroke:var(--teal); stroke-width:.8;}
.chips{position:absolute; left:0; right:0; display:flex; gap:6px; overflow-x:auto; padding:8px 12px; scrollbar-width:none; z-index:5;}
.chips::-webkit-scrollbar{display:none;}
.chips .chip{flex-shrink:0; padding:5px 12px; font-size:12px; border-radius:14px; border:1px solid var(--line); background:rgba(13,36,54,.9); color:var(--mut); white-space:nowrap;}
.chips .chip.on{color:#fff; border-color:var(--teal); background:rgba(57,160,196,.2);}
.chips .chip.gold.on{border-color:var(--gold); background:rgba(217,164,65,.18); color:var(--gold2);}
#lyChips{top:0;}
#wsChips{top:40px;}
#metricStrip{position:absolute; left:0; right:0; bottom:0; display:flex; gap:6px; overflow-x:auto; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); z-index:5;}
#metricStrip .mt{flex-shrink:0; min-width:96px; background:rgba(13,36,54,.92); border:1px solid var(--line); border-radius:10px; padding:6px 12px; text-align:center;}
#metricStrip .mt b{display:block; font-size:16px; color:var(--gold2);}
#metricStrip .mt span{font-size:9.5px; color:var(--mut);}
.mapctl{position:absolute; right:10px; top:88px; display:flex; flex-direction:column; gap:6px; z-index:5;}
.mapctl button{width:36px; height:36px; border-radius:10px; background:rgba(13,36,54,.92); border:1px solid var(--line); color:var(--txt); font-size:16px;}

/* 底部弹层 */
.sheet{position:absolute; left:0; right:0; bottom:0; max-height:62%; background:linear-gradient(180deg,#0E2A3F,#0B2132); border-top:1px solid var(--line); border-radius:16px 16px 0 0; z-index:10; transform:translateY(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column;}
.sheet.on{transform:translateY(0);}
.sheet .grab{padding:8px; text-align:center; flex-shrink:0;}
.sheet .grab i{display:inline-block; width:40px; height:4px; border-radius:2px; background:var(--line);}
.sheet .sbody{overflow-y:auto; padding:0 16px calc(16px + env(safe-area-inset-bottom));}
.sheet h3{font-size:17px; color:#fff; margin-bottom:2px;}
.sheet .ssub{font-size:11.5px; color:var(--mut); margin-bottom:10px;}
.tag{display:inline-block; font-size:11px; border:1px solid var(--line); border-radius:9px; padding:1px 8px; margin:0 6px 6px 0; color:var(--mut);}
.tag.g{border-color:var(--gold); color:var(--gold2);}
.kv2{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0;}
.kv2 .k{flex:1 1 45%; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:7px 10px; font-size:12px;}
.kv2 .k b{display:block; color:var(--teal2); font-size:13px;}
.btnrow{display:flex; gap:8px; margin:12px 0;}
.btnrow button,.btnrow a{flex:1; text-align:center; padding:11px; border-radius:10px; font-size:13px; border:1px solid var(--teal); color:var(--teal2); background:rgba(57,160,196,.1); text-decoration:none;}
.btnrow .primary{border-color:var(--gold); color:var(--gold2); background:rgba(217,164,65,.12); font-weight:700;}
.session-item{border:1px solid var(--line); border-radius:11px; padding:10px 12px; margin-bottom:8px; background:var(--panel);}
.session-item b{color:var(--teal2); font-size:13.5px;}
.session-item .sn{font-size:10.5px; color:var(--mut); float:right;}
.session-item .agd{margin-top:8px; border-top:1px dashed var(--line); padding-top:6px; display:none;}
.session-item.open .agd{display:block;}
.agd .aday{font-size:11.5px; color:var(--gold2); font-weight:700; margin:6px 0 3px;}
.aitem{display:flex; gap:8px; padding:4px 0; font-size:11.5px; border-bottom:1px solid rgba(30,68,92,.5);}
.aitem .t{color:var(--teal2); font-family:Consolas,monospace; font-size:10.5px; white-space:nowrap; padding-top:1px;}
.aitem b{display:block; font-size:12px; color:var(--txt);}
.aitem span{color:var(--mut); font-size:10.5px;}

/* ===== 检索视图 ===== */
#view-search{background:var(--bg); padding:12px;}
.schbox{display:flex; gap:8px; margin-bottom:8px;}
#schKw{flex:1; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:15px; outline:none;}
#schKw:focus{border-color:var(--teal);}
#schGo{padding:12px 18px; border-radius:11px; background:linear-gradient(135deg,#2B86A8,#39A0C4); color:#fff; font-weight:700; font-size:15px;}
.frow{display:flex; gap:6px; overflow-x:auto; padding:4px 0; scrollbar-width:none;}
.frow::-webkit-scrollbar{display:none;}
.frow .chip{flex-shrink:0; padding:4px 11px; font-size:11.5px; border-radius:12px; border:1px solid var(--line); color:var(--mut); white-space:nowrap;}
.frow .chip.on{color:#fff; border-color:var(--teal); background:rgba(57,160,196,.18);}
#schStat{font-size:11.5px; color:var(--mut); padding:8px 2px; border-bottom:1px solid var(--line); margin-bottom:8px;}
#schStat b{color:var(--gold2);}
.rcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:9px;}
.rcard:active{border-color:var(--teal);}
.rcard b{font-size:14px; color:#fff;}
.rcard .rm{font-size:11px; color:var(--mut); margin:3px 0;}
.rcard .rd{font-size:12px; color:#A9BFCC; line-height:1.6;}
.rcard .crd{float:right; font-size:10px; color:var(--gold2); border:1px solid rgba(217,164,65,.5); border-radius:7px; padding:0 6px;}
.empty{padding:60px 20px; text-align:center; color:var(--mut); line-height:2;}
.disclaim{padding:12px 4px 30px; font-size:10px; color:#5E7889; line-height:1.7;}

/* ===== 企业详情（覆盖页） ===== */
#view-detail{background:var(--bg); z-index:15;}
.dt-hd{position:sticky; top:0; display:flex; align-items:center; gap:10px; padding:12px 14px; background:#0A1D2C; border-bottom:1px solid var(--line); z-index:2;}
.dt-hd button{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); color:var(--mut); font-size:16px;}
.dt-hd b{font-size:15px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dt-body{padding:16px 14px 40px;}
.goldbadge{display:inline-block; font-size:11px; color:#231a06; background:linear-gradient(135deg,#E9BE6C,#D9A441); border-radius:9px; padding:3px 10px; font-weight:800; margin-bottom:8px;}
.dt-name{font-size:20px; color:#fff; font-weight:800; line-height:1.4;}
.dt-pos{font-size:12px; color:var(--mut); margin:6px 0 14px;}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px;}
.panel h5{font-size:13px; color:var(--teal2); margin-bottom:10px;}
.panel h5::before{content:"▍"; margin-right:5px;}
#radar{width:100%; height:280px; display:block;}
.dimlist{margin-top:8px;}
.dimrow{display:flex; justify-content:space-between; padding:7px 6px; border-bottom:1px dashed var(--line); font-size:13px;}
.dimrow b{color:var(--gold2); font-family:Consolas,monospace;}
.dimrow .ev{flex:1; color:var(--mut); font-size:11px; text-align:right; padding-left:12px;}
.intro{font-size:13px; color:#A9BFCC; line-height:1.9;}
.casechip{display:block; font-size:12.5px; padding:8px 11px; border:1px solid rgba(217,164,65,.4); color:var(--gold2); border-radius:10px; margin-bottom:7px;}

/* 我的 */
#view-me{background:var(--bg); padding:16px 14px;}
.me-h{font-size:17px; color:#fff; font-weight:800; margin-bottom:12px;}
.me-item{display:flex; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 14px; margin-bottom:9px; font-size:13.5px;}
.me-item .ic{font-size:20px;}
.me-item span{color:var(--mut); font-size:11px; display:block;}

/* 大屏（宽屏）适配 */
@media (min-width:861px){
  #app{max-width:none;}
  .chips .chip{font-size:13px;}
}
.loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mut); background:var(--bg); z-index:50; flex-direction:column; gap:10px;}
.loading .spin{width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--teal2); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== v0.2 追加：测算 / 成果 / 电脑端预览框 ===== */
.calc-l{padding:16px 14px;}
.calc-l h3{font-size:18px; color:#fff; margin-bottom:4px;}
.calc-l .csub{font-size:12px; color:var(--mut); line-height:1.8; margin-bottom:16px;}
.fgroup{margin-bottom:16px;}
.fgroup label{display:flex; justify-content:space-between; font-size:13px; margin-bottom:7px;}
.fgroup label output{color:var(--gold2); font-weight:700; font-family:Consolas,monospace;}
.fgroup select{width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:14px; outline:none;}
input[type=range]{width:100%; -webkit-appearance:none; height:6px; border-radius:3px; background:linear-gradient(90deg,var(--teal) var(--p,50%),#123349 var(--p,50%)); outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--teal2); border:3px solid #0B2132; box-shadow:0 0 0 2px var(--teal2);}
.biggo{width:100%; padding:13px; border-radius:11px; border:none; background:linear-gradient(135deg,#2B86A8,#39A0C4); color:#fff; font-size:15px; font-weight:800;}
.calc-r{padding:0 14px 30px;}
.gauge-wrap{display:flex; gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;}
.gauge{position:relative; width:130px; height:130px; flex-shrink:0;}
.gauge svg{width:100%; height:100%;}
.gauge .gv{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.gauge .gv b{font-size:28px; color:var(--gold2); font-weight:800;}
.gauge .gv span{font-size:11px; color:var(--mut);}
.concl{flex:1; min-width:0;}
.crow{padding:8px 0; border-bottom:1px dashed var(--line); font-size:12.5px;}
.crow:last-child{border-bottom:none;}
.crow span{display:block; color:var(--mut); font-size:11px;}
.crow b{color:var(--gold2); font-family:Consolas,monospace; font-size:15px;}
.crow em{font-style:normal; color:var(--txt); font-size:12px;}
.pchip{display:block; width:100%; text-align:left; padding:10px 12px; margin-bottom:8px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:13px;}
.pchip span{display:block; color:var(--mut); font-size:10.5px; margin-top:2px;}

.sec-h{font-size:16px; color:#fff; font-weight:800; padding:14px 14px 2px;}
.sec-sub{font-size:11.5px; color:var(--mut); padding:2px 14px 10px; line-height:1.7;}
.pubcard{margin:0 14px 10px; background:var(--panel); border:1px solid rgba(217,164,65,.45); border-radius:13px; padding:12px 14px;}
.pubcard b{font-size:14px; color:var(--gold2); display:block; margin:4px 0;}
.pubcard .pubno{font-size:10px; color:#231a06; background:linear-gradient(135deg,#E9BE6C,#D9A441); display:inline-block; border-radius:7px; padding:1px 8px; font-weight:800;}
.pubcard .rm{font-size:11px; color:var(--teal2);}
.pubcard .rd{font-size:11.5px; color:var(--mut); margin-top:3px;}
#agendaList{padding:0 14px 30px;}

/* 电脑端预览：手机框效果（手机本身不受影响） */
@media (min-width:861px){
  body{display:flex; align-items:center; justify-content:center; background:#04101B;}
  #app{max-width:430px; height:92dvh; border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.6); position:relative;}
  .sheet{border-radius:16px 16px 0 0;}
  body::before{content:"手机端预览（约430px宽）· 真机全屏效果请在手机浏览器打开"; position:fixed; top:14px; left:50%; transform:translateX(-50%); font-size:12px; color:#5E7889;}
}

/* ===== 知水数字人 ===== */
#zsBtn{position:absolute; right:14px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:30; width:52px; height:52px; border-radius:50%; border:2px solid var(--teal); background:linear-gradient(135deg,#123C54,#0F2A3D); font-size:22px; box-shadow:0 6px 22px rgba(0,0,0,.5);}
#zsPanel{position:absolute; right:10px; left:10px; bottom:calc(64px + env(safe-area-inset-bottom)); top:56px; background:var(--bg2); border:1px solid var(--line); border-radius:18px; z-index:29; display:none; flex-direction:column; overflow:hidden; box-shadow:0 14px 44px rgba(0,0,0,.6);}
#zsPanel.on{display:flex;}
.zs-hd{display:flex; align-items:center; gap:9px; padding:11px 13px; background:linear-gradient(135deg,#123C54,#0F2A3D);}
.zs-av{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#2B86A8,#6FC3DD); display:flex; align-items:center; justify-content:center; font-size:16px;}
.zs-hd b{font-size:14px; color:#fff;}
.zs-hd span{font-size:10px; color:var(--mut); display:block;}
#zsClose{margin-left:auto; color:var(--mut); font-size:15px; padding:6px 10px;}
.zs-body{flex:1; overflow-y:auto; padding:12px;}
.zmsg{max-width:88%; margin-bottom:11px; padding:10px 13px; border-radius:13px; font-size:13px; line-height:1.8; white-space:pre-line; animation:zin .3s ease-out;}
@keyframes zin{from{opacity:0; transform:translateY(8px);}to{opacity:1;}}
.zmsg.ai{background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px;}
.zmsg.me{background:linear-gradient(135deg,#2B86A8,#39A0C4); color:#fff; margin-left:auto; border-bottom-right-radius:4px;}
.zcard{display:block; width:100%; text-align:left; background:#0D2C40; border:1px solid var(--teal); border-radius:10px; padding:9px 12px; margin-top:8px; color:var(--txt);}
.zcard b{display:block; font-size:12.5px; color:#fff;}
.zcard span{font-size:11px; color:var(--mut); display:block; margin-top:2px; white-space:normal;}
.zs-quicks{display:flex; gap:6px; padding:8px 12px 2px; overflow-x:auto; scrollbar-width:none; flex-shrink:0;}
.zs-quicks::-webkit-scrollbar{display:none;}
.zs-quicks:empty{display:none;}
.zchip{flex-shrink:0; font-size:11.5px; padding:5px 12px; border-radius:13px; border:1px solid var(--teal); color:var(--teal2); background:rgba(57,160,196,.08); white-space:nowrap;}
.zs-input{display:flex; gap:7px; padding:10px 12px; border-top:1px solid var(--line);}
#zsKw{flex:1; padding:10px 13px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font-size:13.5px; outline:none;}
#zsSend{padding:10px 18px; border-radius:10px; border:none; background:linear-gradient(135deg,#B8862F,#D9A441); color:#231a06; font-weight:800;}
.zs-note{font-size:10px; color:#5E7889; text-align:center; padding:0 12px 8px;}
.ztyping i{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--mut); margin-right:4px; animation:tyb 1s infinite;}
.ztyping i:nth-child(2){animation-delay:.15s;} .ztyping i:nth-child(3){animation-delay:.3s;}
@keyframes tyb{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ===== v0.4.1 修复：分类标签换行（移动端显示不全） ===== */
#lyChips,#wsChips,.frow,.zs-quicks{flex-wrap:wrap; overflow-x:visible; row-gap:6px;}
#wsChips{background:rgba(8,24,38,.72); border-radius:10px; margin:0 10px; padding:6px 8px;}
#lyChips{background:rgba(8,24,38,.72); border-radius:10px; margin:0 10px;}
.chips{left:10px; right:10px;}
.zs-quicks{overflow-x:visible;}