:root{--p:#0f8f9e;--bg:#f2fbfb;--tx:#0d2b2f;--card-bg:#fff;--border:#e5e5e5;--muted:#6a6a6a;--radius:20px;--radius-media:20px;--shadow:0 12px 32px rgba(0,0,0,.12);--border-w:0px;--sec-gap:88px;--lh:1.75;--card-gap:20px;--font:system;--fs-base:16px;--fs-h3:19px;--fs-h2:23px;--fs-h1:28px;--border-c:transparent}
:root{
--head-h:92px;
--head-clear:calc(var(--head-h) + 16px);
--accent:#c2402c;
--accent-soft:#fbe7e2;
--p-deep:#0a6b77;
--p-soft:#dff1f3;
--ink-soft:#365458;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
--foot-bg:#08383d;
--foot-tx:#cbe4e6;
--foot-mut:#a9cbce;
--foot-ico:#8fe3ea;
}

/* 基础重置 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh);font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
svg{vertical-align:middle;flex:0 0 auto}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* 通用容器 */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.container::before,.container::after{content:none;display:none}

/* 跳过链接：未聚焦时完全移出视口 */
.htr-skip{position:absolute;left:-9999px;top:0;z-index:300;padding:10px 20px;background:var(--p-deep);color:#fff;border-radius:var(--radius);font-size:14px;line-height:1.4}
.htr-skip:focus{left:20px;top:16px}

/* 顶栏：骨架 H，导航叠在头图之上，滚动后收缩为实底吸顶条 */
.htr-head{position:fixed;top:0;left:0;right:0;z-index:90;padding:16px 0;background:linear-gradient(180deg,rgba(6,42,46,.74) 0%,rgba(6,42,46,.44) 58%,rgba(6,42,46,0) 100%);transition:padding .25s ease,background .25s ease,box-shadow .25s ease}
.htr-head.htr-is-stuck{padding:9px 0;background:var(--card-bg);box-shadow:0 10px 30px rgba(8,56,61,.13)}
.htr-head__inner{display:flex;align-items:center;justify-content:space-between;gap:22px}

.htr-brand{display:flex;align-items:center;gap:12px;color:#fff;transition:transform .2s ease,color .2s ease}
.htr-brand:hover{transform:translateY(-3px);color:#fff}
.htr-is-stuck .htr-brand{color:var(--tx)}
.htr-brand__mark{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--radius);background:rgba(255,255,255,.18);color:#fff;box-shadow:0 8px 22px rgba(4,32,36,.28);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.htr-is-stuck .htr-brand__mark{background:var(--p-soft);color:var(--p-deep);box-shadow:none}
.htr-brand__name{display:block;font-size:var(--fs-h3);font-weight:700;letter-spacing:.02em;line-height:1.25}
.htr-brand__sub{display:block;font-style:normal;font-size:11px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
.htr-is-stuck .htr-brand__sub{color:var(--muted);opacity:1}

.htr-nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.htr-link{display:inline-block;padding:9px 16px;border-radius:var(--radius);font-size:15px;line-height:1.4;white-space:nowrap;color:rgba(255,255,255,.94);transition:transform .2s ease,color .2s ease,background .2s ease}
.htr-link:hover{transform:translateY(-3px);color:#fff;background:rgba(255,255,255,.2)}
.htr-link.active{color:#fff;background:rgba(255,255,255,.26);font-weight:600}
.htr-is-stuck .htr-link{color:var(--tx)}
.htr-is-stuck .htr-link:hover{transform:translateY(-3px);color:var(--p-deep);background:var(--p-soft)}
.htr-is-stuck .htr-link.active{color:#fff;background:var(--p-deep);font-weight:600}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border:0;border-radius:var(--radius);background:var(--p-deep);color:#fff;font-size:var(--fs-base);font-weight:600;line-height:1.4;letter-spacing:.01em;text-align:center;box-shadow:var(--shadow);transition:transform .2s ease,color .2s ease,background .2s ease}
.btn:hover{transform:translateY(-3px);background:var(--accent);color:#fff}
.btn--ghost{background:var(--p-soft);color:var(--p-deep);box-shadow:none}
.btn--ghost:hover{background:var(--p-deep);color:#fff}
.btn--accent{background:var(--accent)}
.btn--accent:hover{background:var(--p-deep)}

/* 页脚 */
.site-footer{position:relative;background:var(--foot-bg);color:var(--foot-tx);overflow:hidden}
.site-footer::before{content:"";display:block;height:6px;background:var(--accent)}
.htr-f-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.9fr);gap:44px;padding-top:64px;padding-bottom:56px}
.htr-f-brand{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:18px}
.htr-f-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius);background:rgba(255,255,255,.12);color:var(--foot-ico)}
.htr-f-name{font-size:var(--fs-h3);font-weight:700;letter-spacing:.02em}
.htr-f-desc{max-width:430px;margin-bottom:22px;font-size:14px;line-height:1.85;color:var(--foot-mut)}
.htr-f-meta li{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;font-size:14px;color:var(--foot-tx)}
.htr-f-meta svg{margin-top:4px;color:var(--foot-ico)}
.htr-f-title{position:relative;margin-bottom:20px;padding-left:14px;font-size:var(--fs-h3);font-weight:700;line-height:1.4;color:#fff}
.htr-f-title::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:2px;background:var(--accent)}
.htr-f-links{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.htr-f-link{display:inline-block;font-size:14px;color:var(--foot-tx);transition:transform .2s ease,color .2s ease}
.htr-f-link:hover{transform:translateY(-3px);color:#fff}
.htr-f-serv li{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px;color:var(--foot-tx)}
.htr-f-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius);background:rgba(255,255,255,.1);color:var(--foot-ico)}
.htr-f-social{display:flex;flex-direction:column;gap:12px}
.htr-f-soc{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius);background:rgba(255,255,255,.08);font-size:14px;color:var(--foot-tx);transition:transform .2s ease,color .2s ease,background .2s ease}
.htr-f-soc:hover{transform:translateY(-3px);background:rgba(255,255,255,.17);color:#fff}
.htr-f-soc span{line-height:1.5}
.htr-f-bottom{box-shadow:inset 0 1px 0 rgba(255,255,255,.13);background:rgba(0,0,0,.16)}
.htr-f-bottom__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:20px;font-size:13px;color:var(--foot-mut)}
.htr-f-legal{display:flex;flex-wrap:wrap;gap:22px}
.htr-f-legal a{display:inline-block;color:var(--foot-mut);transition:transform .2s ease,color .2s ease}
.htr-f-legal a:hover{transform:translateY(-3px);color:#fff}

/* 窄屏 */
@media (max-width:1320px){
.htr-brand__sub{display:none}
.htr-link{padding:8px 13px;font-size:14px}
}
@media (max-width:880px){
.htr-head{padding:12px 0}
.htr-head__inner{flex-wrap:wrap;justify-content:center;gap:12px}
.htr-nav{justify-content:center;width:100%}
.htr-f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding-top:52px;padding-bottom:44px}
}
@media (max-width:600px){
.htr-brand__name{font-size:17px}
.htr-brand__mark{width:40px;height:40px}
.htr-link{padding:7px 11px;font-size:13px}
.htr-f-grid{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:44px;padding-bottom:36px}
.htr-f-bottom__in{flex-direction:column;align-items:flex-start;text-align:left}
}

/* ================= 语义类别名层（对接分支依赖） =================
   引擎的类名是按品牌现编的前缀（本主题：htr-），与 data-connect.md 新建
   yoga_list/api_list/api_show 沿用的语义类零重叠。这一层把语义类映射到本主题的
   设计令牌（--p/--card-bg/--border/--muted/--radius/--shadow/--fs-*）上，
   保证新页面有样式。**只做映射，不改引擎视觉**；个别观感需要微调时，
   在 data-connect.md 第 5 步按主题补，不要改这一层。
   约束：长度一律 px、flex:1 必配 min-width:0。 */

.page-banner{background:var(--card-bg);padding:calc(var(--sec-gap, 88px) * .3) 0;margin-bottom:var(--card-gap, 20px)}
.page-banner h1,.page-banner .banner-title{font-size:var(--fs-h2, 30px);line-height:1.35;margin:0}
.crumbs{margin-top:10px;font-size:14px;color:var(--muted,#888)}
.crumbs a{color:var(--muted,#888)}
.crumbs a:hover{color:var(--p)}

.article-card,.list-item{background:var(--card-bg);border:var(--border-w, 0) solid var(--border);border-radius:var(--radius-media, var(--radius, 8px));box-shadow:var(--shadow, none);overflow:hidden}
.article-card{display:flex;flex-direction:column}
.list-item{display:flex;flex-direction:row;gap:var(--card-gap, 20px);align-items:stretch}
.article-card__media,.article-cover,.product-img{display:block;min-width:0;overflow:hidden;border-radius:var(--radius-media, var(--radius, 8px))}
.article-cover img,.product-img img{display:block;width:100%;height:100%;object-fit:cover}
.article-card__body,.list-item__body{min-width:0;flex:1 1 auto;padding:18px 20px}
.article-card__title,.list-item__title{margin:0 0 8px;font-size:19px;font-weight:600;line-height:1.45;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card__title a:hover,.list-item__title a:hover{color:var(--p)}
.article-card__desc,.list-item__desc{margin:0;font-size:15px;line-height:1.8;color:var(--muted,#888);word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card__meta,.list-item__meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13px;color:var(--muted,#888)}

.article-detail{max-width:840px;margin:0 auto}
.article-detail__head{margin-bottom:26px}
.article-detail__title{margin:0;font-size:var(--fs-h1, 34px);line-height:1.35}
.article-detail__meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:14px;color:var(--muted,#888)}
.article-detail__body{font-size:var(--fs-base, 16px);line-height:var(--lh, 1.8)}
.article-detail__body p{margin:0 0 1.4em}
.article-detail__body img{max-width:100%;height:auto;margin:1.6em 0;border-radius:var(--radius-media, var(--radius, 8px))}
.article-detail__pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:36px;padding-top:22px;border-top:1px solid var(--border)}
.article-detail__pager a{flex:1 1 240px;min-width:0;overflow:hidden;color:var(--p);text-overflow:ellipsis;white-space:nowrap}

.article-summary{margin:0 0 28px;padding:18px 22px;background:var(--card-bg);border-left:3px solid var(--p);border-radius:var(--radius-media, var(--radius, 8px));font-size:15px;line-height:1.85;color:var(--muted,#888)}

.footer-row,.footer-main{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
.footer-row>*,.footer-main>*{flex:1 1 180px;min-width:0}
.site-logo-text{font-size:19px;font-weight:600;letter-spacing:.5px}
.site-footer .site-logo-text{color:var(--tx)}

/* 导航下拉：hover 展开。不要加 :focus-within（点击后子菜单不消失） */
.main-menu li{position:relative}
.main-menu .dropdown-menu{display:none;position:absolute;left:0;top:100%;z-index:80;min-width:180px;max-height:360px;overflow-y:auto;margin:0;padding:8px 0;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-media, var(--radius, 8px));box-shadow:var(--shadow, 0 8px 24px rgba(0,0,0,.14))}
.main-menu .dropdown:hover>.dropdown-menu{display:block}
.main-menu .dropdown-menu li{white-space:nowrap}
.main-menu .dropdown-menu a{display:block;padding:9px 16px;font-size:14px;color:var(--tx)}
.main-menu .dropdown-menu a:hover{background:var(--p);color:var(--bg)}
/* Bootstrap 3 的 .dropdown-menu>.active>a 是深蓝底，会套到导航当前项上，必须显式覆盖 */
.main-menu .dropdown-menu>.active>a{background:var(--p);color:var(--bg)}

.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:32px;padding:0;list-style:none}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;font-size:14px;color:var(--tx);background:var(--card-bg);border-radius:var(--radius, 8px)}
.pagination a:hover,.pagination .active a{background:var(--p);color:var(--bg)}

/* === 导航下拉（每个主分类 hover 出子类 + 更多分类）：限高滚动；链接 nowrap；祖先不能加 overflow === */
.htr-more,.htr-dd{position:relative;display:inline-block}
.htr-more__k,.htr-dd__k{cursor:default}
.htr-dd__arw{font-size:11px;opacity:.72;margin-left:3px;vertical-align:middle}
.htr-more__menu,.htr-dd__menu{display:none;position:absolute;left:0;top:100%;z-index:400;min-width:250px;max-height:360px;overflow-y:auto;padding:10px 0;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-media,var(--radius,8px));box-shadow:var(--shadow)}
.htr-more:hover .htr-more__menu,.htr-dd:hover .htr-dd__menu{display:block}
.htr-more__g,.htr-dd__all{display:block;padding:8px 18px;font-weight:700;color:var(--tx);white-space:nowrap}
.htr-more__g:hover,.htr-more__g.active,.htr-dd__all:hover,.htr-dd__all.active{color:var(--p-deep);background:var(--p-soft)}
.htr-more__s,.htr-dd__s{display:block;padding:6px 18px 6px 30px;font-size:14px;color:var(--muted);white-space:nowrap}
.htr-more__s:hover,.htr-dd__s:hover{color:var(--p-deep);background:var(--p-soft)}
/* 靠右的导航项：下拉改为右对齐，避免面板超出视口被截断（仅桌面端，窄屏项本来就靠左） */
@media (min-width:992px){
.htr-nav > .htr-dd:nth-last-child(-n+3) .htr-dd__menu{left:auto;right:0}
}

/* === 侧边栏组件 + 两栏骨架（列表页/详情页共用） === */
.htr-two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.htr-two__main{min-width:0}
@media (max-width:991px){.htr-two{grid-template-columns:minmax(0,1fr);gap:28px}}
.htr-side{display:grid;gap:var(--card-gap,20px);align-content:start;min-width:0}
.htr-side__p{background:var(--card-bg);border-radius:var(--radius-media,var(--radius,8px));box-shadow:var(--shadow);padding:18px 20px}
.htr-side__h{margin:0 0 14px;padding-bottom:10px;font-size:17px;font-weight:700;border-bottom:1px solid var(--border)}
.htr-side__list{margin:0;padding:0;list-style:none}
.htr-side__list>li>a{display:block;padding:8px 0;font-size:14px;color:var(--tx);border-bottom:1px dashed var(--border)}
.htr-side__list>li:last-child>a{border-bottom:0}
.htr-side__list>li>a:hover{color:var(--p)}
.htr-side__list>li>a.is-on{color:var(--p-deep);font-weight:700}
.htr-side__row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.htr-side__n{flex:0 0 auto;font-size:12px;color:var(--muted)}
.htr-side__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htr-side__subs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.htr-side__subs a{padding:3px 9px;font-size:12px;color:var(--muted);background:var(--p-soft);border-radius:calc(var(--radius,8px)/2);white-space:nowrap}
.htr-side__subs a:hover{color:#fff;background:var(--p)}

/* === 数据对接页面（列表/详情）骨架 === */
.htr-page{padding-top:calc(var(--head-h,92px) + 18px);padding-bottom:56px}
.htr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap,20px)}
.htr-news{display:grid;gap:14px}
@media (max-width:767px){.htr-cards{grid-template-columns:minmax(0,1fr)}}
.htr-deck__emoji{display:flex;align-items:center;justify-content:center;width:100%;min-height:150px;font-size:38px;line-height:1}
.list-item .htr-deck__emoji{min-height:112px}
.htr-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;color:var(--muted)}
.htr-crumb a{color:var(--muted)}
.htr-crumb a:hover{color:var(--p)}
.htr-crumb i{font-size:11px;opacity:.7}

/* === 数据页零散补样式 === */
.htr-empty{padding:40px 0;color:var(--muted);text-align:center}
.banner-title{font-size:var(--fs-h1,28px);line-height:1.35}
.banner-meta{margin-top:8px;font-size:14px;color:var(--muted)}
.article-detail__cat{display:inline-block;margin-bottom:10px;padding:4px 12px;font-size:13px;color:var(--p-deep);background:var(--p-soft);border-radius:calc(var(--radius,8px)/2)}
.htr-rel{margin-top:38px}
.htr-rel__h{margin:0 0 18px;font-size:var(--fs-h2,23px);font-weight:700}

/* === 顶栏铺满浏览器宽度（正文仍 1200 居中）；放开后需复核头部行数与高度 === */
.htr-head__inner{max-width:none;width:100%}