:root{
  --yx-blue:#0068B6; --yx-blue-d:#004E8C; --yx-blue-l:#E3EEF6; --yx-blue-xl:#F2F7FB;
  --yx-banner-a:#eef5fd; --yx-banner-b:#dbe9f8;
  --yx-orange:#F29700; --yx-orange-l:#FFF4E6;
  --yx-ink:#413D3C; --yx-ink-2:#6B6664;
  --yx-bg:#f4f5f7; --yx-card:#fff; --yx-line:#e8eef4; --yx-line-2:#eef2f6; --yx-mute:#6B7280;
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --sh-1:0 2px 8px rgba(0,104,182,.06);
  --sh-2:0 10px 30px rgba(0,104,182,.10);
  --sh-3:0 16px 44px rgba(0,104,182,.16);
  --mxw:680px;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-size:15px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--yx-bg);color:var(--yx-ink);line-height:1.7;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--mxw);margin:0 auto;padding:0 18px 64px}

/* 吸顶品牌栏 */
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;padding:12px 18px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--yx-line)}
.brand{display:flex;align-items:center;gap:8px}
.brand-icon{height:22px;width:22px;border-radius:6px;object-fit:cover;box-shadow:0 2px 6px rgba(0,104,182,.18)}
.brand-logo{height:18px;width:auto;object-fit:contain;opacity:.95;transition:.2s}
.brand:hover .brand-logo{opacity:1}
.tag{margin-left:auto;font-size:11px;font-weight:600;color:var(--yx-blue);background:var(--yx-blue-l);padding:5px 12px;border-radius:999px;letter-spacing:.3px;white-space:nowrap}
/* header 右侧：微信公众号关注入口（极简灰白图标，无文字） */
.header-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.wx-official{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--yx-line);color:#8a9199;transition:.2s}
.wx-official:hover{border-color:var(--yx-blue);color:var(--yx-blue)}
.wx-official svg{width:18px;height:18px}

/* 栏目导航：4 个可见胶囊 + 右侧汉堡「更多」，隐藏项垂向下拉，不再依赖横向滑动 */
.colnav{position:sticky;top:47px;z-index:45;background:rgba(244,245,247,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--yx-line)}
.colnav-in{display:flex;align-items:center;gap:8px;padding:10px 16px;max-width:var(--mxw);margin:0 auto}
.cnav{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;font-size:13px;color:var(--yx-ink-2);padding:7px 8px;border-radius:999px;background:#fff;border:1px solid var(--yx-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s}
.cnav:hover{color:var(--yx-blue);border-color:var(--yx-blue)}
.cnav.on{background:var(--yx-blue);color:#fff;border-color:var(--yx-blue);box-shadow:0 4px 12px rgba(0,104,182,.22)}
/* AI 算力 NEW 角标 */
.nav-new{margin-left:4px;font-size:9px;font-weight:700;line-height:1;color:#fff;background:#8A5A00;padding:2px 5px;border-radius:999px;letter-spacing:.5px;transform:translateY(-1px);font-style:normal}
/* 汉堡按钮（三横线）：触碰/点击旋转 90° */
.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid var(--yx-line);cursor:pointer;transition:.25s;box-sizing:border-box;padding:7px}
.hamburger i{display:block;width:15px;height:2px;background:var(--yx-ink-2);border-radius:2px;transition:.25s}
.nav-more{flex:none;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0}
.nav-more:hover .hamburger,.nav-more.open .hamburger,.nav-more:active .hamburger{border-color:var(--yx-blue)}
.nav-more:hover .hamburger i,.nav-more.open .hamburger i,.nav-more:active .hamburger i{background:var(--yx-blue)}
.nav-more.open .hamburger{transform:rotate(90deg)}
/* 顶部导航下拉：白色浮层垂直悬挂在汉堡下方 */
.nav-drop{position:absolute;right:16px;top:50px;display:flex;flex-direction:column;gap:6px;min-width:130px;padding:8px;background:#fff;border:1px solid var(--yx-line);border-radius:14px;box-shadow:0 12px 32px rgba(0,104,182,.16);z-index:46;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility .22s;will-change:transform,opacity}
.nav-drop.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-drop::before{content:"";position:absolute;top:-6px;right:12px;width:10px;height:10px;background:#fff;border-left:1px solid var(--yx-line);border-top:1px solid var(--yx-line);transform:rotate(45deg);border-radius:2px}
.nav-drop .cnav{flex:none;justify-content:flex-start;padding:9px 16px;font-size:13px}

/* Hero */
.hero{position:relative;margin:0 -18px;padding:46px 22px 36px;text-align:center;overflow:hidden;background:radial-gradient(90% 70% at 50% -25%,rgba(255,255,255,.55),transparent 60%),radial-gradient(120% 85% at 50% -10%,rgba(0,104,182,.16),transparent 62%),linear-gradient(180deg,var(--yx-banner-a) 0%,var(--yx-banner-b) 100%);border-bottom:1px solid var(--yx-line);box-shadow:inset 0 -26px 38px -30px rgba(0,104,182,.20)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,104,182,.18) 1px,transparent 1px);background-size:18px 18px;opacity:.7;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.hero>*{position:relative}
/* 繁星闪烁（banner 动态视觉 · 仰望星空） */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.star{position:relative;background:#fff;border-radius:50%;box-shadow:0 0 7px 1px rgba(255,255,255,.9);opacity:.55;animation:twinkle 3.4s ease-in-out infinite}
/* 近景星点：十字光芒星芒，更醒目 */
.star.sp{width:16px;height:16px;background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.95) 16%,transparent 55%);border-radius:50%;box-shadow:0 0 12px 3px rgba(255,255,255,.6);opacity:.85}
.star.sp::before,.star.sp::after{content:"";position:absolute;top:50%;left:50%;border-radius:2px;box-shadow:0 0 7px 1px rgba(255,255,255,.8)}
.star.sp::before{width:2px;height:16px;transform:translate(-50%,-50%);background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent)}
.star.sp::after{width:16px;height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
/* 交互命中区：更大透明触摸目标 = 高灵敏度；抓住放大跟随，松手自动回落原位并保持"点亮"呼吸态 */
.star-hit{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;touch-action:none}
.stars.frozen{animation:none!important;transform:none!important}
.star-hit.grabbed .star{animation:none!important;transform:scale(2.6)}
.star-hit.lit .star{animation:pulseStar 2.2s ease-in-out infinite}
.star-hit.returning{transition:left .5s cubic-bezier(.2,.7,.2,1),top .5s cubic-bezier(.2,.7,.2,1)}
.star-hit.returning .star{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@keyframes pulseStar{0%,100%{opacity:.82}50%{opacity:1}}
/* 远景星场（小而暗、慢闪，营造纵深） */
.stars.far .star{width:2px!important;height:2px!important;box-shadow:0 0 4px 1px rgba(255,255,255,.55);opacity:.4}
.stars.far .star.sp{display:none}
/* 近景星层（轻微漂浮视差） */
.stars.near{animation:drift 16s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--yx-blue);font-weight:500;margin-bottom:14px;padding:4px 10px;background:rgba(0,104,182,.08);border-radius:999px}
h1{font-size:20px;font-weight:700;color:#0f2a3f;letter-spacing:-.3px;line-height:1.4;margin-bottom:10px}
.hero .sub{font-size:13px;color:#6e7a85;max-width:540px;margin:0 auto;line-height:1.6}

/* 卡片 */
.card{background:var(--yx-card);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--sh-2);border:1px solid var(--yx-line);margin:18px 0}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--yx-orange);background:var(--yx-orange-l);padding:5px 11px;border-radius:999px}
.card h2{font-size:14.5px;font-weight:800;color:var(--yx-ink)}
.card p{font-size:14.5px;color:var(--yx-ink);margin:6px 0;line-height:1.65}
.card p strong{color:var(--yx-ink)}

/* 文章列表 */
.sec-label{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 12px}
.sec-label .t{font-size:14.5px;font-weight:800;color:var(--yx-ink)}
.sec-label .n{font-family:var(--mono);font-size:11px;color:var(--yx-mute)}
.article-list{display:flex;flex-direction:column;gap:12px}
.article-item{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--yx-blue-xl);border:1px solid var(--yx-line);border-radius:var(--r-md);padding:16px;overflow:hidden;transition:.25s;opacity:0;transform:translateY(12px)}
.article-item.in{opacity:1;transform:none}
.article-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--yx-blue),#0090d6);transform:scaleY(0);transform-origin:center;transition:.25s}
.article-item:hover{background:#fff;border-color:var(--yx-blue);box-shadow:var(--sh-1);transform:translateY(-2px)}
.article-item:hover::before{transform:scaleY(1)}
.ai-num{flex:none;width:30px;height:30px;border-radius:9px;background:var(--yx-blue);color:#fff;font-family:var(--mono);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,104,182,.25)}
.ai-main{flex:1;min-width:0}
.ai-title{font-size:14.5px;font-weight:700;color:#0f2a3f;line-height:1.55;transition:.2s}
.article-item:hover .ai-title{color:var(--yx-blue)}
.ai-meta{display:flex;align-items:center;gap:10px;margin-top:8px}
.ai-date{font-family:var(--mono);font-size:11px;color:var(--yx-mute)}
.ai-go{margin-left:auto;color:var(--yx-orange);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.ai-go .ar{font-size:17px;line-height:1;transition:.2s}
.article-item:hover .ai-go .ar{transform:translateX(4px)}

/* CTA */
.cta{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--yx-blue),#0086cf);color:#fff;font-size:15px;font-weight:700;padding:16px 20px;border-radius:var(--r-md);margin-top:14px;box-shadow:var(--sh-2);transition:.2s}
.cta:hover{transform:translateY(-2px);box-shadow:var(--sh-3);filter:brightness(1.03)}
.cta .o{color:#ffd9a0}
.note{font-size:11px;color:var(--yx-mute);text-align:center;margin-top:12px;line-height:1.6}

/* 页脚 */
footer{text-align:center;padding:28px 20px 36px;color:var(--yx-mute);font-size:12px;border-top:1px solid var(--yx-line);max-width:var(--mxw);margin:24px auto 0;line-height:1.7}
footer .s{color:var(--yx-orange);font-weight:700}
footer .ver{margin-left:6px;color:var(--yx-mute);font-size:8px;letter-spacing:.4px}
.icp{margin-top:6px;font-size:12px;color:var(--yx-mute);opacity:.85;letter-spacing:.5px;text-align:center}

/* 首页栏目导览 */
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.gcard{display:flex;flex-direction:column;background:linear-gradient(180deg,#fbfdff 0%,#e9f1fb 100%);border:1px solid #d8e6f3;border-radius:var(--r-md);padding:14px 16px;transition:.22s;position:relative;overflow:hidden}
.gcard::after{content:"";position:absolute;right:-16px;top:-16px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,rgba(0,104,182,.10),transparent 70%);transition:.3s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--yx-blue)}
.gcard:hover::after{transform:scale(1.3)}
.ghead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.gi{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--yx-blue),#0090d6);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,104,182,.20)}
.gi svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gcard h3{font-size:14.5px;font-weight:800;color:var(--yx-ink)}
.gcard p{font-size:13px;color:var(--yx-ink-2);line-height:1.55}
.garrow{position:absolute;right:14px;bottom:11px;color:var(--yx-orange);font-size:17px;font-weight:700;line-height:1;pointer-events:none}

/* 滚动渐显 */
.reveal{opacity:0;transform:translateY(16px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:480px){.guide-grid{grid-template-columns:1fr}.hero{padding:34px 18px 28px}h1{font-size:18px}.ai-title{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal,.article-item{opacity:1!important;transform:none!important;transition:none!important}.article-item::before{transform:scaleY(1)}}

/* ===== AI 助手页专属（华为云宝风格：干净大卡片 + 整体输入区） ===== */
/* 紧凑 banner：压缩上下留白 + 微斜渐变（对标华为云宝的协调感） */
.ai-hero{position:relative;overflow:hidden;text-align:center;padding:34px 20px 26px;background:linear-gradient(180deg,#f7fbff 0%,#eef5fb 100%);border-bottom:1px solid var(--yx-line)}
.ai-hero>*{position:relative}
/* 淡雅斜切装饰：极淡的品牌蓝光带 + 右侧微高光，保持简洁大气 */
.ai-hero::before{content:"";position:absolute;left:-12%;top:-80%;width:36%;height:260%;background:linear-gradient(180deg,rgba(0,104,182,.10),rgba(0,104,182,0));transform:rotate(-16deg);transform-origin:center;z-index:0;pointer-events:none}
.ai-hero::after{content:"";position:absolute;right:-12%;top:-80%;width:30%;height:260%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));transform:rotate(-16deg);transform-origin:center;z-index:0;pointer-events:none}
.ai-hero .kicker{display:inline-block}
.ai-avatar{width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:linear-gradient(135deg,var(--yx-blue),#0090d6);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,104,182,.16);position:relative}
.ai-avatar svg{width:31px;height:31px;stroke:#fff;fill:none;stroke-width:2}
.ai-name{font-size:20px;font-weight:700;color:#0f2a3f;letter-spacing:-.3px}
.ai-slogan{font-size:13px;color:#6e7a85;margin-top:6px}
.tabs-wrap{position:relative;z-index:1}
/* 标签栏：4 个可见胶囊铺满宽度 + 右侧汉堡「更多」，无右侧空白 */
.tabs{display:flex;align-items:center;gap:8px;padding:12px 16px 8px}
.tab{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;background:#fff;border:1px solid var(--yx-line);border-radius:999px;padding:7px 5px;font-size:12px;color:var(--yx-ink-2);cursor:pointer;transition:.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab.active{background:var(--yx-blue);color:#fff;border-color:var(--yx-blue);box-shadow:0 4px 12px rgba(0,104,182,.22)}
.tab:hover:not(.active){border-color:var(--yx-blue);color:var(--yx-blue)}
/* 汉堡「更多」按钮：与标签同款圆角胶囊，触碰/点击旋转 90° */
.tab-more{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:34px;background:#fff;border:1px solid var(--yx-line);border-radius:999px;cursor:pointer;transition:.2s;user-select:none}
.tab-more:hover .hamburger,.tab-more.open .hamburger,.tab-more:active .hamburger{border-color:var(--yx-blue)}
.tab-more:hover .hamburger i,.tab-more.open .hamburger i,.tab-more:active .hamburger i{background:var(--yx-blue)}
.tab-more.open .hamburger{transform:rotate(90deg)}
/* 标签下拉：白色浮层垂直悬挂在汉堡下方，脱离 .tabs 的 overflow-x 裁剪 */
.tab-drop{position:absolute;display:flex;top:46px;right:16px;flex-direction:column;gap:4px;min-width:130px;padding:8px;background:#fff;border:1px solid var(--yx-line);border-radius:14px;box-shadow:0 12px 32px rgba(0,104,182,.16);z-index:50;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility .22s;will-change:transform,opacity}
.tab-drop::before{content:"";position:absolute;top:-6px;right:12px;width:10px;height:10px;background:#fff;border-left:1px solid var(--yx-line);border-top:1px solid var(--yx-line);transform:rotate(45deg);border-radius:2px}
.tab-drop.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.tab-drop .tab{flex:none;justify-content:flex-start;padding:9px 16px;font-size:13px;border-radius:999px;min-height:36px;transition:.15s}
.tab-drop .tab:hover{border-color:var(--yx-blue);color:var(--yx-blue);background:rgba(0,104,182,.04)}
.tab-drop .tab.active{background:var(--yx-blue);color:#fff;border-color:var(--yx-blue)}
/* 热门徽章：橙色渐变小胶囊，置右 */
.q-tag{display:inline-flex;align-items:center;gap:2px;background:linear-gradient(135deg,#FF6B35,#F29700);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:auto;letter-spacing:.2px}
.suggest{max-width:var(--mxw);margin:0 auto;padding:0 16px 8px;overflow:hidden;transition:max-height .45s ease,opacity .32s ease,padding .32s ease}
.guide{font-size:12.5px;color:var(--yx-mute);margin:2px 2px 12px}
.card-q{background:#fff;border:1px solid var(--yx-line);border-radius:var(--r-md);padding:14px 0 4px;box-shadow:var(--sh-1);margin-bottom:12px;transition:.2s}
.card-q.hidden{display:none}
.card-q:hover{box-shadow:var(--sh-2)}
.card-q h3{font-size:14.5px;font-weight:800;color:var(--yx-ink);margin:0 16px 4px;display:flex;align-items:center;gap:10px}
.card-q h3 .icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.card-q h3 .icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon.orange{background:#F49600}
.icon.blue{background:var(--yx-blue)}
.icon.teal{background:#0086cf}
.icon.purple{background:#004a82}
.icon.slate{background:var(--yx-mute)}
.card-q .q{font-size:13.5px;color:var(--yx-ink-2);padding:12px 16px;border-bottom:1px solid var(--yx-line-2);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:.15s;line-height:1.55}
.card-q .q:last-child{border-bottom:none}
.card-q .q:hover{color:var(--yx-blue);background:rgba(0,104,182,.03)}
.card-q .q::after{content:"›";font-size:16px;color:var(--yx-mute);flex:none;margin-left:10px;transition:.15s}
.card-q .q:hover::after{color:var(--yx-blue);transform:translateX(3px)}
.card-q .q.q-biz{color:#C2560A;font-weight:700;background:rgba(242,151,0,.07)}
.card-q .q.q-biz:hover{color:#C2560A;background:rgba(242,151,0,.13)}
.chat{max-width:var(--mxw);margin:0 auto;padding:16px 16px 10px;display:flex;flex-direction:column;gap:14px;min-height:120px}
.msg{display:flex;gap:10px;align-items:flex-start;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--yx-blue),#0090d6);flex:none;display:flex;align-items:center;justify-content:center}
.msg .ava svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.bubble{padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.65;max-width:100%;word-break:break-word;white-space:pre-wrap;color:var(--yx-ink)}
.msg.bot .bubble{background:#fff;border:1px solid var(--yx-line);border-top-left-radius:4px;box-shadow:var(--sh-1)}
.msg.me{justify-content:flex-end}
.msg.me .ava{background:var(--yx-blue-l)}
.msg.me .ava svg{stroke:var(--yx-blue)}
.msg.me .bubble{background:linear-gradient(135deg,var(--yx-blue),#0086cf);color:#fff;border-top-right-radius:4px}
/* 分析中 loading：华为云宝风格（红点 + 文字） */
.typing{padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--yx-line);display:inline-flex;align-items:center;gap:10px;box-shadow:var(--sh-1)}
.typing .dot{width:8px;height:8px;border-radius:50%;background:var(--yx-blue);animation:typingDot 1.4s infinite}
.typing .txt{font-size:13.5px;color:var(--yx-ink-2)}
@keyframes typingDot{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
/* 模板问题模块：对话开始后自动收起，避免遮挡回答 */
.tabs.gone{display:none}
.suggest-pill{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:99;background:var(--yx-blue);color:#fff;border:none;border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600;box-shadow:0 6px 18px rgba(0,104,182,.35);cursor:pointer;display:none;align-items:center;gap:5px;white-space:nowrap}
.suggest-pill.show{display:inline-flex;animation:fadeUp .3s ease}
.suggest-pill svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4}
/* 回答优先展示：核心结论置顶 + 完整内容折叠展开 */
.msg{scroll-margin-bottom:120px}
.bubble.ans{padding:12px 14px}
.ans-summary{background:var(--yx-blue-l);border-left:3px solid var(--yx-blue);border-radius:10px;padding:10px 12px;font-size:14.5px;line-height:1.62;color:#0f2a3f;font-weight:600;margin-bottom:8px;white-space:pre-wrap;word-break:break-word}
.ans-body{font-size:14.5px;line-height:1.7;color:var(--yx-ink);white-space:pre-wrap;word-break:break-word}
.ans-detail{font-size:14px;line-height:1.68;color:var(--yx-ink);white-space:pre-wrap;word-break:break-word;overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.ans-detail.expanded{max-height:3000px;opacity:1}
.ans-toggle{margin-top:8px;background:none;border:none;color:var(--yx-blue);font-size:13px;font-weight:600;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:4px;font-family:inherit}
.ans-toggle .ar{display:inline-block;transition:transform .25s}
.ans-toggle.open .ar{transform:rotate(180deg)}
/* 底部输入区：华为云宝风格浅灰整体容器 */
.input-bar{position:fixed;bottom:0;left:0;right:0;max-width:var(--mxw);margin:0 auto;background:#f7f8fa;border-top:1px solid var(--yx-line);border-radius:18px 18px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.06);z-index:100;transition:transform .25s ease;will-change:transform}
.input-box{background:#fff;border:1px solid var(--yx-line);border-radius:16px;padding:10px 12px 8px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;gap:8px}
.q-input{width:100%;box-sizing:border-box;border:none;padding:6px 4px;font-size:15px;line-height:1.45;outline:none;color:var(--yx-ink);background:transparent;min-height:24px;max-height:120px;resize:none;overflow-y:auto}
.q-input::placeholder{color:var(--yx-mute)}
.bar-tools{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;gap:10px}
/* 深度思考（左下角胶囊） */
.deep-btn{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;gap:5px;-webkit-box-flex:0;-webkit-flex:none;flex:none;background:#fff;border:1px solid var(--yx-line);color:var(--yx-ink-2);border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s;line-height:1;white-space:nowrap}
.deep-btn .db-ic{display:block;-webkit-box-flex:0;-webkit-flex:none;flex:none;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.deep-btn:hover{border-color:var(--yx-blue);color:var(--yx-blue)}
.deep-btn.on{background:linear-gradient(135deg,var(--yx-blue-d),var(--yx-blue));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(0,104,182,.28);position:relative}
.deep-btn.on .db-ic{stroke:#fff}
/* 发送区：字数 + 蓝色圆形发送 */
.send-tools{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;gap:10px}
.char-count{font-size:12px;color:var(--yx-mute);min-width:38px;text-align:right}
.send{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--yx-blue),#0086cf);border:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;cursor:pointer;transition:opacity .22s,transform .22s,filter .22s;-webkit-box-flex:0;-webkit-flex:none;flex:none;box-shadow:0 4px 12px rgba(0,104,182,.3);opacity:1;transform:scale(1)}
.send:hover{filter:brightness(1.05)}
.send svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2.5}
.send:disabled{opacity:.35;filter:grayscale(1);box-shadow:none;cursor:default}
@media(max-width:420px){.deep-btn{padding:6px 9px}.deep-btn .db-tx{display:none}.deep-btn .db-ic{width:17px;height:17px}}
.disclaimer{text-align:center;font-size:11px;color:var(--yx-mute);padding:10px 20px 6px;max-width:var(--mxw);margin:0 auto;line-height:1.6}
.disclaimer a{color:var(--yx-blue);text-decoration:none;font-weight:600}
footer.ai{margin-bottom:170px}

/* ===== 客服智能体页专属 ===== */
.cs-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cs-act{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--yx-line);color:var(--yx-ink-2);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:.2s;line-height:1;white-space:nowrap}
.cs-act svg{width:14px;height:14px;stroke:var(--yx-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-act:hover{border-color:var(--yx-blue);color:var(--yx-blue);background:var(--yx-blue-xl)}
.cs-act:active{transform:scale(.96)}
.cs-lb{display:inline}
/* 窄屏：动作按钮仅留图标，避免 3 个按钮换行错位；cs-acts 横向可滑动兜底 */
@media(max-width:420px){.cs-acts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.cs-acts::-webkit-scrollbar{display:none}.cs-lb{display:none}.cs-act{padding:9px}.cs-act svg{width:18px;height:18px}}
.cs-turn{display:block;font-size:11.5px;color:var(--yx-blue);background:var(--yx-blue-l);border-radius:999px;padding:5px 12px;margin:14px auto 0;max-width:max-content;text-align:center;line-height:1.5;transition:.2s}
.cs-turn.warn{color:#fff;background:linear-gradient(135deg,var(--yx-blue-d),var(--yx-blue));box-shadow:0 6px 16px rgba(0,104,182,.3)}
.cs-qr{display:none;background:#fff;border:1px solid var(--yx-blue);border-radius:var(--r-md);padding:18px 18px 16px;box-shadow:var(--sh-2);margin:14px auto 0;max-width:var(--mxw);text-align:center;animation:fadeUp .4s ease}
.cs-qr.show{display:block}
.cs-qr h3{font-size:15px;font-weight:800;color:var(--yx-blue);margin-bottom:4px}
.cs-qr p{font-size:12.5px;color:var(--yx-ink-2);line-height:1.7}
.cs-qr .box{width:184px;height:184px;margin:14px auto 8px;border:1px solid var(--yx-line);border-radius:14px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.cs-qr .box img{width:100%;height:100%;object-fit:contain;display:block}
.cs-qr .hint{font-family:var(--mono);font-size:11px;color:var(--yx-mute);margin-top:2px}
.cs-sys{font-size:12.5px;color:var(--yx-mute);text-align:center;margin:10px auto;max-width:var(--mxw);line-height:1.7}
.cs-sys b{color:var(--yx-blue)}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px auto 0;max-width:var(--mxw)}
.cs-tag{font-size:12px;color:var(--yx-ink-2);background:#fff;border:1px solid var(--yx-line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.2s}
.cs-tag:hover{border-color:var(--yx-blue);color:var(--yx-blue);background:var(--yx-blue-xl)}

/* 业务助手：登录按钮 + 注册引导弹窗 */
.login-btn{margin-left:auto;font-size:13px;font-weight:600;color:var(--yx-blue);background:rgba(0,104,182,.08);border:1px solid rgba(0,104,182,.25);padding:6px 14px;border-radius:999px;cursor:pointer;transition:.2s;display:inline-block;text-decoration:none;font-family:inherit;text-align:center;line-height:1.4}
.login-btn:hover{background:rgba(0,104,182,.14)}
.login-btn.on{color:#fff;background:var(--yx-blue);border-color:var(--yx-blue)}
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(15,42,63,.5);backdrop-filter:blur(2px)}
.modal.show{display:flex}
.modal-card{position:relative;width:min(360px,90vw);background:#fff;border-radius:18px;padding:26px 22px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,40,80,.28);animation:pop .25s ease}
@keyframes pop{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:22px;line-height:1;color:#9aa6b0;cursor:pointer}
.reg-title{font-size:18px;font-weight:800;color:#0f2a3f}
.reg-sub{font-size:13px;color:#6e7a85;margin-top:6px}
.reg-qr{margin:16px auto;width:180px;height:180px;border-radius:12px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reg-qr img{width:100%;height:100%;object-fit:contain}
.reg-qr.noqr::after{content:"二维码暂未配置";font-size:12px;color:#9aa6b0}
.reg-tip{font-size:12px;color:#9aa6b0;margin-top:4px}
.reg-btn{margin-top:14px;width:100%;padding:12px;border:0;border-radius:12px;background:var(--yx-blue);color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:block;text-decoration:none;text-align:center}
.reg-btn:active{transform:translateY(1px)}
.reg-back{width:100%;margin-top:10px;padding:10px;border:0;border-radius:12px;background:#f4f5f7;color:var(--yx-ink-2);font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.reg-back:hover{background:#e8eef4;color:var(--yx-ink)}
.book-done{width:100%;margin-top:14px;padding:12px;border:0;border-radius:12px;background:var(--yx-blue);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:.2s}
.book-done:hover{background:#005a9e;box-shadow:0 8px 20px rgba(0,104,182,.28)}
.book-done:active{transform:translateY(1px)}

/* AI 助手页 · hero 转化按钮（预约演示）+ 合规弱提示条 */
.hero-cta{display:inline-flex;align-items:center;gap:6px;margin-top:20px;background:var(--yx-blue);color:#fff;font-size:12px;font-weight:700;padding:7px 22px;border-radius:999px;box-shadow:0 8px 22px rgba(0,104,182,.30);transition:transform .2s,box-shadow .2s;cursor:pointer;border:0;font-family:inherit;text-align:center;line-height:1.3}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,104,182,.38)}
.hero-cta svg{width:14px;height:14px}
.hero-cta:active{transform:translateY(0)}
.reg-nag{position:fixed;left:12px;right:12px;bottom:74px;z-index:55;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--yx-line);border-radius:14px;padding:10px 12px;box-shadow:0 10px 28px rgba(0,104,182,.18);animation:pop .24s ease}
.reg-nag[hidden]{display:none}
.reg-nag-tx{flex:1;font-size:12.5px;line-height:1.4;color:var(--yx-ink-2)}
.reg-nag-btn{flex:none;background:var(--yx-blue);color:#fff;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:999px;white-space:nowrap;text-decoration:none}
.reg-nag-btn:active{transform:translateY(1px)}
.reg-nag-x{flex:none;background:none;border:0;color:var(--yx-ink-3);font-size:12px;padding:6px 4px;cursor:pointer}

/* AI 助手页 · 3D 蓝紫渐变球体 + 横向滑动推荐 */
.ai-orb{width:120px;height:120px;margin:0 auto 20px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 26% 24%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 30%),radial-gradient(circle at 82% 80%,rgba(244,150,0,.50) 0%,rgba(244,150,0,0) 44%),radial-gradient(circle at 58% 40%,rgba(0,190,255,.22) 0%,rgba(0,190,255,0) 38%),linear-gradient(135deg,#cdeffb 0%,#9fe1ff 24%,#4aa6ff 48%,#0068B6 72%,#F49600 100%);box-shadow:inset 0 0 34px rgba(255,255,255,.72),inset -16px -16px 40px rgba(244,150,0,.16),inset 16px 16px 40px rgba(255,255,255,.42),0 16px 52px rgba(0,104,182,.24),0 0 90px rgba(244,150,0,.20);animation:orbFloat 5s ease-in-out infinite}
.ai-orb::before{content:'';position:absolute;top:14%;left:18%;width:30%;height:22%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.92),rgba(255,255,255,.08) 72%);filter:blur(1px)}
.ai-orb svg{width:50px;height:50px;position:relative;z-index:2;filter:drop-shadow(0 0 12px rgba(255,255,255,.65));opacity:.96}
.ai-orb svg .obr{fill:#fff}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* 无障碍：键盘焦点可见（品牌蓝焦点环） */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.tab:focus-visible,.tab-more:focus-visible,.card-q .q:focus-visible,.send:focus-visible,
.deep-btn:focus-visible,.cs-act:focus-visible,.suggest-pill:focus-visible,.hero-cta:focus-visible,
.login-btn:focus-visible,.wx-official:focus-visible,.reg-nag-btn:focus-visible,.reg-nag-x:focus-visible,
.modal-x:focus-visible,.reg-btn:focus-visible,.reg-back:focus-visible,.book-done:focus-visible,.brand:focus-visible,.cnav:focus-visible{
  outline:2px solid var(--yx-blue);
  outline-offset:2px;
}
/* 鼠标点击聚焦时不显示默认 outline，仅保留键盘焦点环 */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible),
.tab:focus:not(:focus-visible),.tab-more:focus:not(:focus-visible),.card-q .q:focus:not(:focus-visible),.send:focus:not(:focus-visible),
.deep-btn:focus:not(:focus-visible),.cs-act:focus:not(:focus-visible),.suggest-pill:focus:not(:focus-visible),.hero-cta:focus:not(:focus-visible),
.login-btn:focus:not(:focus-visible),.wx-official:focus:not(:focus-visible),.reg-nag-btn:focus:not(:focus-visible),.reg-nag-x:focus:not(:focus-visible),
.modal-x:focus:not(:focus-visible),.reg-btn:focus:not(:focus-visible),.reg-back:focus:not(:focus-visible),.book-done:focus:not(:focus-visible),.brand:focus:not(:focus-visible),.cnav:focus:not(:focus-visible){
  outline:none;
}

/* ===== 桌面渐进增强（≥992px） ===== */
@media (min-width:992px){
  .wrap{max-width:960px;padding:0 24px 72px}
  .colnav-in{max-width:960px;gap:10px}
  .nav-more{display:none}
  .nav-drop{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;flex-direction:row;gap:8px;background:none;border:0;box-shadow:none;padding:0;min-width:0;width:auto}
  .nav-drop::before{display:none}
  .nav-drop .cnav{flex:1;justify-content:center;padding:7px 8px;font-size:13px;white-space:nowrap}
  .hero{margin:0 -24px;padding:72px 24px 52px}
  h1{font-size:28px;letter-spacing:-.5px}
  .hero .sub{font-size:15px;max-width:600px}
  .kicker{font-size:12px}
  .card{padding:26px}
  .card h2,.card p{font-size:15px}
  .article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .ai-title{font-size:15px}
}

/* ===== 主题切换按钮 ===== */
.yx-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:120;width:44px;height:44px;border-radius:50%;border:1px solid var(--yx-line);background:var(--yx-card);color:var(--yx-ink);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;transition:.2s}
.yx-theme-toggle:hover{border-color:var(--yx-blue);color:var(--yx-blue)}
@media (max-width:640px){ .yx-theme-toggle{bottom:76px} }

/* ===== 深色模式：跟随系统（prefers-color-scheme）+ 手动 data-theme 覆盖 ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --yx-blue-l:#13283f; --yx-blue-xl:#0f1822;
    --yx-banner-a:#0f1a26; --yx-banner-b:#0a1320;
    --yx-orange-l:#2a1d06;
    --yx-ink:#e6edf3; --yx-ink-2:#9aa6b2;
    --yx-bg:#0d1117; --yx-card:#161b22; --yx-line:#222b36; --yx-line-2:#1b232c; --yx-mute:#8b95a1;
  }
}
html[data-theme="dark"]{
  --yx-blue-l:#13283f; --yx-blue-xl:#0f1822;
  --yx-banner-a:#0f1a26; --yx-banner-b:#0a1320;
  --yx-orange-l:#2a1d06;
  --yx-ink:#e6edf3; --yx-ink-2:#9aa6b2;
  --yx-bg:#0d1117; --yx-card:#161b22; --yx-line:#222b36; --yx-line-2:#1b232c; --yx-mute:#8b95a1;
}
html[data-theme="dark"] header{background:rgba(13,17,23,.82)}
html[data-theme="dark"] .colnav{background:rgba(13,17,23,.9)}
html[data-theme="dark"] .hero{background:radial-gradient(90% 70% at 50% -25%,rgba(255,255,255,.06),transparent 60%),radial-gradient(120% 85% at 50% -10%,rgba(0,104,182,.30),transparent 62%),linear-gradient(180deg,var(--yx-banner-a) 0%,var(--yx-banner-b) 100%)}
html[data-theme="dark"] .input-bar{background:#11161d}
html[data-theme="dark"] .tag{background:var(--yx-blue-l);color:var(--yx-blue)}
html[data-theme="dark"] .cnav,
html[data-theme="dark"] .wx-official,
html[data-theme="dark"] .hamburger,
html[data-theme="dark"] .nav-drop,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .tab-more,
html[data-theme="dark"] .tab-drop,
html[data-theme="dark"] .article-item,
html[data-theme="dark"] .card-q,
html[data-theme="dark"] .msg.bot .bubble,
html[data-theme="dark"] .typing,
html[data-theme="dark"] .input-box,
html[data-theme="dark"] .deep-btn,
html[data-theme="dark"] .cs-act,
html[data-theme="dark"] .cs-tag,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .reg-nag{background:#161b22;color:var(--yx-ink);border-color:var(--yx-line)}
html[data-theme="dark"] .nav-drop::before,
html[data-theme="dark"] .tab-drop::before{border-left-color:var(--yx-line);border-top-color:var(--yx-line)}
html[data-theme="dark"] .article-item:hover,
html[data-theme="dark"] .card-q:hover,
html[data-theme="dark"] .deep-btn:hover,
html[data-theme="dark"] .cs-act:hover,
html[data-theme="dark"] .cs-tag:hover{background:#1b232c}
html[data-theme="dark"] .modal{background:rgba(0,0,0,.6)}