/* 动态化之后新增的样式。



   配色和字体全部沿用 styles.css 里的变量，不引入第二套视觉语言。 */







/* --- 图标容器 -------------------------------------------------------------- */







/* 尺寸由调用方通过 --logo-size 指定（首页卡片 96px、详情页 132px）。 */



.tech-logo.logo-sized {



  width: var(--logo-size, 58px);



  height: var(--logo-size, 58px);



}







/* 没有任何图标时的文字回退。基础样式对所有非 img 子元素做了 visibility:hidden，



   为的是让「用背景图当图标」的那几种情况不重复显示文字，这里把回退文字放出来。 */



.tech-logo.logo-text > span {



  visibility: visible;



  font-size: calc(var(--logo-size, 58px) * 0.34);



  letter-spacing: -0.02em;



}







.project-media .tech-logo.logo-sized {



  margin: 69px auto 0;



}







.project-detail .detail-visual .tech-logo.logo-sized {



  position: absolute;



  z-index: 1;



  left: 50%;



  top: 50%;



  transform: translate(-50%, -50%);



  margin: 0;



}







/* --- 通用小件 -------------------------------------------------------------- */







.sr-only {



  position: absolute;



  width: 1px;



  height: 1px;



  padding: 0;



  margin: -1px;



  overflow: hidden;



  clip: rect(0, 0, 0, 0);



  white-space: nowrap;



  border: 0;



}







.empty-note,



.filter-note {



  font-size: 14px;



  line-height: 1.75;



  color: var(--muted);



  border-left: 2px solid var(--line);



  padding: 4px 0 4px 16px;



  margin: 28px 0;



}







.detail-actions {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  gap: 10px 22px;



  margin-top: 26px;



}







.note-title-link {



  color: inherit;



  text-decoration: none;



}







.note-title-link:hover {



  color: var(--teal);



}







/* --- 标签筛选 -------------------------------------------------------------- */







.tag-filter {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin: 26px 0 6px;



}







.tag-chip {



  font-family: var(--mono);



  font-size: 11px;



  letter-spacing: 0.06em;



  text-decoration: none;



  color: var(--muted);



  border: 1px solid var(--line);



  border-radius: 999px;



  padding: 6px 13px;



  transition: color 0.2s, border-color 0.2s, background 0.2s;



}







.tag-chip:hover {



  color: var(--ink);



  border-color: var(--ink);



}







.tag-chip.is-active {



  color: var(--ink);



  background: var(--acid);



  border-color: var(--acid);



}







/* --- 分页 ------------------------------------------------------------------ */







.pager {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 16px;



  margin: 46px 0 10px;



  padding-top: 22px;



  border-top: 1px solid var(--line);



}







.pager-link {



  font-family: var(--mono);



  font-size: 12px;



  letter-spacing: 0.06em;



  text-decoration: none;



  color: var(--ink);



}







.pager-link:hover {



  color: var(--teal);



}







.pager-link.is-disabled {



  color: var(--muted);



  opacity: 0.45;



}







.pager-status {



  font-family: var(--mono);



  font-size: 11px;



  letter-spacing: 0.1em;



  color: var(--muted);



}







/* --- 草稿预览提示 ---------------------------------------------------------- */







.draft-banner {



  display: flex;



  flex-wrap: wrap;



  align-items: center;



  gap: 10px 18px;



  width: min(1160px, calc(100% - 56px));



  margin: 22px auto 0;



  padding: 13px 18px;



  background: #fff6d8;



  border: 1px solid #e6cf7a;



  border-left-width: 4px;



  border-radius: 4px;



  font-size: 13px;



  line-height: 1.6;



  color: #5c4a10;



}







.draft-banner b {



  font-family: var(--mono);



  font-size: 11px;



  letter-spacing: 0.1em;



  text-transform: uppercase;



}







.draft-banner a {



  margin-left: auto;



  color: inherit;



  font-weight: 500;



}







/* --- 生活记录卡片 ---------------------------------------------------------- */







.journal-link {



  display: block;



  color: inherit;



  text-decoration: none;



  height: 100%;



}







.journal-media {



  margin: -6px -6px 16px;



  border-radius: 8px;



  overflow: hidden;



  background: var(--line);



}







.journal-media img {



  width: 100%;



  height: 190px;



  object-fit: cover;



  display: block;



  transition: transform 0.5s;



}







.journal-card:hover .journal-media img {



  transform: scale(1.04);



}







.journal-card .note-arrow {



  position: absolute;



  right: 18px;



  bottom: 14px;



}







/* --- 相册 ------------------------------------------------------------------ */







.detail-gallery {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));



  gap: 14px;



  margin: 34px 0;



}







.detail-gallery figure {



  margin: 0;



}







.detail-gallery img {



  width: 100%;



  height: 100%;



  aspect-ratio: 4 / 3;



  object-fit: cover;



  display: block;



  border-radius: 8px;



}







.detail-gallery figcaption {



  margin-top: 7px;



  font-size: 12px;



  color: var(--muted);



}







/* --- 搜索 ------------------------------------------------------------------ */







.search-form {



  display: flex;



  gap: 10px;



  margin: 26px 0 16px;



  max-width: 620px;



}







.search-form input[type="search"] {



  flex: 1;



  min-width: 0;



  font-family: var(--sans);



  font-size: 15px;



  color: var(--ink);



  background: var(--surface-hover);



  border: 1px solid var(--line);



  border-radius: 4px;



  padding: 12px 15px;



}







.search-form input[type="search"]:focus {



  outline: 2px solid var(--teal);



  outline-offset: 1px;



}







.search-types {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin-bottom: 10px;



}







.search-summary {



  font-size: 14px;



  color: var(--muted);



  margin: 20px 0 24px;



}







.search-results {



  display: grid;



  gap: 2px;



}







.search-result {



  display: block;



  padding: 20px 0;



  border-top: 1px solid var(--line);



  text-decoration: none;



  color: inherit;



}







.search-result:hover h3 {



  color: var(--teal);



}







.search-result h3 {



  margin: 7px 0 6px;



  font-size: 19px;



  line-height: 1.4;



}







.search-result p {



  margin: 0;



  font-size: 14px;



  line-height: 1.7;



  color: var(--muted);



}







.search-kind {



  font-family: var(--mono);



  font-size: 10px;



  letter-spacing: 0.12em;



  text-transform: uppercase;



  color: var(--orange);



}







.search-date {



  display: inline-block;



  margin-top: 9px;



  font-family: var(--mono);



  font-size: 11px;



  color: var(--muted);



}







/* --- 窄屏 ------------------------------------------------------------------ */







@media (max-width: 640px) {



  .draft-banner {



    width: calc(100% - 32px);



    margin-top: 14px;



  }







  .draft-banner a {



    margin-left: 0;



  }







  .project-media .tech-logo.logo-sized {



    margin: 46px auto 0;



  }







  .search-form {



    flex-direction: column;



  }







  .journal-media img {



    height: 150px;



  }



}



.tech-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }



.tech-icon-grid > * { min-width: 0; overflow-wrap: anywhere; }



.about-wide, .about-wide * { min-width: 0; overflow-wrap: anywhere; }



.contact-strip > * { min-width: 0; overflow-wrap: anywhere; }



@media (max-width: 800px) {



  .tech-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }



}







/* ==========================================================================

   ASHERLAB SUBPAGE GLOBAL DESIGN SYSTEM (全分子页面一体化设计系统)

   ========================================================================== */



/* 1. Subpage Header Architecture (顶层双翼与居中胶囊 Dock) */

.subpage-top-bar {

  position: relative;

  z-index: 100;

  width: min(1280px, calc(100% - 40px));

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 52px;

  padding: 10px 0;

}



/* 左侧 Brand Logo */

.subpage-top-bar .brand {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  text-decoration: none;

  color: var(--ink);

  font-size: 13.5px;

  font-weight: 700;

  letter-spacing: .16em;

  flex-shrink: 0;

}



.subpage-top-bar .brand-mark {

  width: 25px;

  height: 25px;

  display: grid;

  place-items: center;

  background: var(--ink);

  color: var(--acid);

  font-weight: 500;

  font-size: 14px;

  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);

}



/* 中间居中悬浮胶囊导航 Dock */

.subpage-nav-dock-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 auto;

}



.subpage-nav-dock {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 2px;

  padding: 3px 6px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(244, 238, 227, 0.92);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 4px 18px rgba(10, 20, 23, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;

}



.subpage-nav-dock .dock-divider {

  width: 1px;

  height: 14px;

  background: var(--line);

  margin: 0 5px;

  flex-shrink: 0;

  align-self: center;

}



.subpage-nav-dock .dock-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 28px;

  min-height: 28px;

  line-height: 28px;

  padding: 0 12px;

  margin: 0;

  border: 0;

  outline: 0;

  border-radius: 999px;

  color: var(--ink);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  font-size: 11.5px;

  font-weight: 500;

  letter-spacing: .03em;

  text-decoration: none;

  cursor: pointer;

  background: transparent;

  box-sizing: border-box;

  vertical-align: middle;

  transition: all .2s cubic-bezier(.2, 0, 0, 1);

}



.subpage-nav-dock .dock-pill:hover,

.subpage-nav-dock .dock-pill:focus-visible {

  background: var(--ink);

  color: var(--paper);

  transform: translateY(-1px);

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.12);

}



.subpage-nav-dock .dock-pill.active,

.subpage-nav-dock .dock-pill[aria-current="page"] {

  background: var(--teal);

  color: var(--paper);

  box-shadow: 0 2px 8px rgba(29, 107, 105, 0.25);

}



.subpage-nav-dock .dock-pill-register:disabled {

  color: var(--muted);

  opacity: .65;

  cursor: default;

  background: transparent;

  border: 0;

}

.subpage-nav-dock .dock-pill-register:disabled:hover {

  background: transparent;

  color: var(--muted);

  transform: none;

  box-shadow: none;

}



/* 右侧 Site Tools (搜索与反馈胶囊) */

.subpage-top-bar .site-tools {

  display: inline-flex;

  align-items: center;

  gap: 0 8px;

  margin: 0;

  padding: 0;

  flex-shrink: 0;

}



.subpage-top-bar .site-search {

  display: inline-flex;

  align-items: center;

  height: 28px;

  min-height: 28px;

  padding: 0 4px 0 10px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(244, 238, 227, 0.92);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 4px 14px rgba(10, 20, 23, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;

  transition: all .2s cubic-bezier(.2, 0, 0, 1);

}



.subpage-top-bar .site-search:hover,

.subpage-top-bar .site-search:focus-within {

  border-color: var(--teal);

  background: rgba(244, 238, 227, 0.98);

  box-shadow: 0 2px 10px rgba(29, 107, 105, 0.18);

}



.subpage-top-bar .search-icon-wrap {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: none;

  margin-right: 6px;

  color: var(--muted);

  transition: color .2s ease;

}



.subpage-top-bar .site-search:hover .search-icon-wrap,

.subpage-top-bar .site-search:focus-within .search-icon-wrap {

  color: var(--teal);

}



.subpage-top-bar .search-icon {

  display: block;

  width: 12px;

  height: 12px;

}



.subpage-top-bar .site-search input {

  width: 82px;

  min-width: 0;

  height: 26px;

  min-height: 26px;

  line-height: 26px;

  padding: 0 4px 0 0;

  border: 0;

  outline: 0;

  border-radius: 0;

  background: transparent;

  color: var(--ink);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  font-size: 11.5px;

  font-weight: 500;

  letter-spacing: .03em;

  opacity: 1;

  transition: width .45s cubic-bezier(.22, 1, .36, 1),

              padding .45s cubic-bezier(.22, 1, .36, 1),

              color .2s ease;

}



.subpage-top-bar .site-search input::placeholder {

  color: var(--muted);

  font-family: inherit;

  font-size: 11.5px;

}



.subpage-top-bar .site-search:hover input,

.subpage-top-bar .site-search:focus-within input {

  width: 220px;

  padding: 0 12px;

}



.subpage-top-bar .site-search button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 20px;

  min-height: 20px;

  min-width: 36px;

  padding: 0 8px;

  margin: 0;

  border: 0;

  outline: 0;

  border-radius: 999px;

  background: rgba(29, 107, 105, 0.08);

  color: var(--teal);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  font-size: 11px;

  font-weight: 500;

  letter-spacing: .03em;

  cursor: pointer;

  transition: all .2s cubic-bezier(.2, 0, 0, 1);

}



.subpage-top-bar .site-search button:hover,

.subpage-top-bar .site-search button:focus-visible {

  background: var(--teal);

  color: var(--paper);

  box-shadow: 0 2px 6px rgba(29, 107, 105, 0.25);

}



.subpage-top-bar .site-tools > a,

.subpage-top-bar .feedback-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 28px;

  min-height: 28px;

  line-height: 28px;

  padding: 0 13px;

  margin: 0;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(244, 238, 227, 0.92);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 4px 14px rgba(10, 20, 23, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;

  color: var(--ink);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  font-size: 11.5px;

  font-weight: 500;

  letter-spacing: .03em;

  text-decoration: none;

  cursor: pointer;

  transition: all .2s cubic-bezier(.2, 0, 0, 1);

}



.subpage-top-bar .site-tools > a:hover,

.subpage-top-bar .feedback-pill:hover,

.subpage-top-bar .site-tools > a:focus-visible,

.subpage-top-bar .feedback-pill:focus-visible {

  background: var(--ink);

  color: var(--paper);

  border-color: var(--ink);

  transform: translateY(-1px);

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.12);

}



/* 移动端顶栏响应式 (<= 980px) */

@media (max-width: 980px) {

  .subpage-top-bar {

    flex-wrap: wrap;

    gap: 10px;

    padding: 10px 0;

  }

  .subpage-nav-dock-wrap {

    order: 3;

    width: 100%;

    margin-top: 4px;

  }

}



/* 2. Tag Filter Chips (胶囊筛选药丸微调) */

.tag-chip {

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  font-size: 11.5px;

  font-weight: 500;

  letter-spacing: 0.03em;

  text-decoration: none;

  color: var(--muted);

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 5px 13px;

  background: rgba(244, 238, 227, 0.6);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition: all 0.2s cubic-bezier(.2, 0, 0, 1);

}



.tag-chip:hover {

  color: var(--ink);

  border-color: var(--ink);

  background: rgba(244, 238, 227, 0.95);

  transform: translateY(-1px);

}



.tag-chip.is-active {

  color: var(--paper);

  background: var(--teal);

  border-color: var(--teal);

  box-shadow: 0 2px 8px rgba(29, 107, 105, 0.25);

}



/* 3. Subpage Hero 赛博质感大标题 */

.subpage-hero {

  padding-top: 28px;

  padding-bottom: 24px;

}



.subpage-hero .module-page-copy h1 {

  font-size: clamp(32px, 4vw, 52px);

  font-weight: 700;

  font-style: italic;

  letter-spacing: -0.04em;

  line-height: 1.08;

  color: var(--teal);

  background: linear-gradient(110deg, var(--ink), var(--teal));

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow: 2px 2px 0 rgba(216, 244, 92, 0.12);

  margin: 0 0 8px;

}



.subpage-hero .eyebrow-tracker {

  font-family: var(--mono);

  font-size: 9px;

  letter-spacing: 0.16em;

  color: var(--orange);

  text-transform: uppercase;

  margin: 0 0 6px;

  display: flex;

  align-items: center;

  gap: 8px;

}



.subpage-hero .eyebrow-tracker::before {

  content: "";

  display: inline-block;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--orange);

  box-shadow: 0 0 0 3px rgba(242, 123, 81, 0.15);

}



/* 4. Subpage Cards 赛博悬浮卡片微光 */

.project-detail,

.tech-tile,

.long-note,

.journal-card {

  transition: transform 0.25s cubic-bezier(.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(.2, 0, 0, 1), border-color 0.25s ease;

}



.project-detail:hover,

.tech-tile:hover,

.journal-card:hover {

  transform: translateY(-2px);

  border-color: var(--teal);

  box-shadow: 0 8px 24px rgba(29, 107, 105, 0.12);

}



/* --- Subpage Project Detail Cards & Action Pills --- */

.project-detail {

  padding: 32px 0;

  border-bottom: 1px solid var(--line);

  transition: all 0.25s cubic-bezier(.2, 0, 0, 1);

}



.project-detail .detail-visual {

  position: relative;

  overflow: hidden;

  border-radius: 6px;

  background: var(--surface);

  box-shadow: 0 4px 18px rgba(10, 20, 23, 0.06);

}



.project-detail .detail-visual img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s cubic-bezier(.2, 0, 0, 1);

}



.project-detail:hover .detail-visual img {

  transform: scale(1.03);

}



.project-detail .detail-visual span {

  position: absolute;

  top: 12px;

  left: 12px;

  padding: 4px 10px;

  border-radius: 999px;

  background: rgba(10, 20, 23, 0.82);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  color: var(--acid);

  font: 500 10px/1.2 var(--mono);

  letter-spacing: .08em;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  z-index: 2;

}



.detail-actions {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 10px !important;

  margin-top: 22px !important;

}



.button-primary {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 999px !important;

  height: 32px !important;

  min-height: 32px !important;

  line-height: 32px !important;

  padding: 0 18px !important;

  background: var(--ink) !important;

  color: var(--paper) !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 11.5px !important;

  font-weight: 500 !important;

  letter-spacing: .03em !important;

  text-transform: none !important;

  text-decoration: none !important;

  box-shadow: 0 2px 10px rgba(10, 20, 23, 0.1) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.button-primary:hover {

  background: var(--teal) !important;

  box-shadow: 0 4px 14px rgba(29, 107, 105, 0.25) !important;

  transform: translateY(-1px) !important;

}



.project-link {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 32px !important;

  min-height: 32px !important;

  line-height: 30px !important;

  border: 1px solid var(--line) !important;

  border-radius: 999px !important;

  padding: 0 16px !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 11.5px !important;

  font-weight: 500 !important;

  letter-spacing: .03em !important;

  text-transform: none !important;

  text-decoration: none !important;

  margin-top: 0 !important;

  color: var(--ink) !important;

  background: rgba(244, 238, 227, 0.7) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.project-link:hover {

  border-color: var(--teal) !important;

  color: var(--teal) !important;

  background: rgba(244, 238, 227, 0.98) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 2px 8px rgba(29, 107, 105, 0.15) !important;

}





/* 5. ME&LIFE Profile & Journal Card Upgrades */

.profile-photo {

  border-radius: 6px !important;

  box-shadow: 0 4px 20px rgba(10, 20, 23, 0.08) !important;

}



.profile-photo span {

  border-radius: 999px !important;

  padding: 3px 10px !important;

  background: rgba(10, 20, 23, 0.82) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  border: 1px solid rgba(216, 244, 92, 0.25) !important;

}



.profile-points {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 8px 12px !important;

  margin-top: 24px !important;

}



.profile-points span {

  display: inline-flex !important;

  align-items: center !important;

  padding: 4px 12px !important;

  border-radius: 999px !important;

  background: rgba(244, 238, 227, 0.72) !important;

  border: 1px solid var(--line) !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  color: var(--teal) !important;

  letter-spacing: .04em !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.profile-points span b {

  font-family: var(--mono) !important;

  font-size: 9px !important;

  color: var(--orange) !important;

  margin-right: 6px !important;

}



.profile-points span:hover {

  border-color: var(--teal) !important;

  background: rgba(244, 238, 227, 0.96) !important;

  transform: translateY(-1px) !important;

}



.journal-card {

  border-radius: 6px !important;

  border: 1px solid var(--line) !important;

  transition: transform 0.25s cubic-bezier(.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(.2, 0, 0, 1), border-color 0.25s ease !important;

}



.journal-card:hover {

  transform: translateY(-3px) !important;

  border-color: var(--teal) !important;

  box-shadow: 0 10px 28px rgba(29, 107, 105, 0.12) !important;

}



.journal-card .journal-link {

  text-decoration: none !important;

  color: inherit !important;

  display: block !important;

  height: 100% !important;

}



.journal-card .journal-date {

  display: inline-block !important;

  padding: 2px 8px !important;

  border-radius: 999px !important;

  background: rgba(242, 123, 81, 0.1) !important;

  border: 1px solid rgba(242, 123, 81, 0.25) !important;

}



.journal-feature .journal-date {

  background: rgba(216, 244, 92, 0.12) !important;

  border-color: rgba(216, 244, 92, 0.3) !important;

}





/* 6. Search Page Central Big Capsule Search */

.search-form {

  display: flex !important;

  gap: 12px !important;

  margin: 28px 0 18px !important;

  max-width: 640px !important;

}



.search-form input[type="search"] {

  flex: 1 !important;

  min-width: 0 !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 14px !important;

  color: var(--ink) !important;

  background: rgba(244, 238, 227, 0.75) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  border: 1px solid var(--line) !important;

  border-radius: 999px !important;

  padding: 10px 20px !important;

  box-shadow: 0 4px 16px rgba(10, 20, 23, 0.04) !important;

  transition: all .25s cubic-bezier(.2, 0, 0, 1) !important;

}



.search-form input[type="search"]:focus {

  outline: none !important;

  border-color: var(--teal) !important;

  background: rgba(244, 238, 227, 0.98) !important;

  box-shadow: 0 4px 20px rgba(29, 107, 105, 0.16), 0 0 0 3px rgba(29, 107, 105, 0.15) !important;

}



.search-form .button-primary {

  height: 42px !important;

  min-height: 42px !important;

  padding: 0 24px !important;

  font-size: 13px !important;

}



/* 7. Feedback Form Glassmorphic Elevation */

.feedback-form input[type="text"],

.feedback-form input[type="email"],

.feedback-form textarea {

  border-radius: 8px !important;

  border: 1px solid var(--line) !important;

  background: rgba(244, 238, 227, 0.65) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.feedback-form input[type="text"]:focus,

.feedback-form input[type="email"]:focus,

.feedback-form textarea:focus {

  outline: none !important;

  border-color: var(--teal) !important;

  box-shadow: 0 0 0 3px rgba(29, 107, 105, 0.15) !important;

  background: rgba(244, 238, 227, 0.98) !important;

}



/* feedback-kind managed in feedback.css */



.feedback-actions .button-primary {

  height: 38px !important;

  min-height: 38px !important;

  padding: 0 24px !important;

  font-size: 12.5px !important;

}



/* 8. About Page Capsule Badges & Links */

.about-facts span {

  display: inline-flex !important;

  align-items: center !important;

  padding: 5px 14px !important;

  border-radius: 999px !important;

  background: rgba(244, 238, 227, 0.72) !important;

  border: 1px solid var(--line) !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 11.5px !important;

  font-weight: 500 !important;

  color: var(--teal) !important;

  margin-right: 8px !important;

  margin-bottom: 8px !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.about-facts span b {

  font-family: var(--mono) !important;

  font-size: 9.5px !important;

  color: var(--orange) !important;

  margin-right: 6px !important;

}



.about-facts span:hover {

  border-color: var(--teal) !important;

  background: rgba(244, 238, 227, 0.96) !important;

  transform: translateY(-1px) !important;

}



.contact-strip a {

  display: inline-flex !important;

  align-items: center !important;

  padding: 6px 16px !important;

  border-radius: 999px !important;

  border: 1px solid var(--line) !important;

  background: rgba(244, 238, 227, 0.7) !important;

  color: var(--ink) !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  text-decoration: none !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

  margin-right: 8px !important;

}



.contact-strip a:hover {

  background: var(--ink) !important;

  color: var(--paper) !important;

  border-color: var(--ink) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 12px rgba(10, 20, 23, 0.12) !important;

}





/* 9. Subpage 3D Wireframe HUD Viewport Enhancement (Homepage Parity) */

.page-motion {

  pointer-events: auto !important;

  cursor: crosshair;

}



.page-hero--motion > .page-motion {

  border-radius: 12px !important;

  aspect-ratio: 16 / 11 !important;

  min-height: 440px !important;

  max-width: 660px !important;

  background: radial-gradient(circle at 50% 50%, rgba(216, 244, 92, 0.05) 0%, rgba(29, 107, 105, 0.02) 45%, rgba(244, 238, 227, 0.35) 85%) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  box-shadow: 0 8px 32px rgba(10, 20, 23, 0.05), 0 0 0 1px rgba(29, 107, 105, 0.22) inset !important;

  border-color: rgba(29, 107, 105, 0.22) !important;

  transition: box-shadow 0.35s cubic-bezier(0.2, 0, 0, 1), border-color 0.35s ease, transform 0.35s ease !important;

  overflow: visible !important;

}



.page-hero--motion > .page-motion:hover {

  box-shadow: 0 14px 44px rgba(29, 107, 105, 0.12), 0 0 0 1px rgba(216, 244, 92, 0.55) inset !important;

  border-color: rgba(216, 244, 92, 0.5) !important;

}



.page-hero--motion > .page-motion:before {

  width: 28px !important;

  height: 28px !important;

  border-width: 2px !important;

  border-color: var(--orange) !important;

  border-top-left-radius: 12px !important;

  transition: transform 0.25s ease !important;

}



.page-hero--motion > .page-motion:after {

  width: 28px !important;

  height: 28px !important;

  border-width: 2px !important;

  border-color: var(--teal) !important;

  border-bottom-right-radius: 12px !important;

  transition: transform 0.25s ease !important;

}



.page-hero--motion > .page-motion:hover:before {

  transform: translate(-3px, -3px) !important;

}



.page-hero--motion > .page-motion:hover:after {

  transform: translate(3px, 3px) !important;

}



@media (max-width: 800px) {

  .page-hero--motion > .page-motion {

    min-height: 280px !important;

    max-width: 100% !important;

    aspect-ratio: 4 / 3 !important;

  }

}





/* 10. Accounts Area Cyber Refinement */

.account-back {

  display: inline-flex !important;

  align-items: center !important;

  height: 32px !important;

  min-height: 32px !important;

  padding: 0 16px !important;

  border-radius: 999px !important;

  border: 1px solid var(--line) !important;

  background: rgba(244, 238, 227, 0.72) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  color: var(--ink) !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 11.5px !important;

  font-weight: 500 !important;

  margin-bottom: 24px !important;

  text-decoration: none !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.account-back:hover {

  border-color: var(--teal) !important;

  color: var(--teal) !important;

  background: rgba(244, 238, 227, 0.98) !important;

  transform: translateX(-2px) !important;

}



.account-submit {

  border-radius: 999px !important;

  height: 44px !important;

  min-height: 44px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 0 24px !important;

  background: var(--ink) !important;

  color: var(--paper) !important;

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  letter-spacing: .03em !important;

  box-shadow: 0 2px 10px rgba(10, 20, 23, 0.1) !important;

  transition: all .2s cubic-bezier(.2, 0, 0, 1) !important;

}



.account-submit:hover:not(:disabled) {

  background: var(--teal) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 14px rgba(29, 107, 105, 0.25) !important;

}



.account-field input {

  border-radius: 8px !important;

  border: 1px solid var(--line) !important;

  background: rgba(244, 238, 227, 0.65) !important;

  transition: all .2s ease !important;

}



.account-field input:focus {

  outline: none !important;

  border-color: var(--teal) !important;

  box-shadow: 0 0 0 3px rgba(29, 107, 105, 0.15) !important;

  background: rgba(244, 238, 227, 0.98) !important;

}



.account-shell {

  border-radius: 12px !important;

  overflow: hidden !important;

  box-shadow: 0 8px 32px rgba(10, 20, 23, 0.06) !important;

}





/* --- 11. 读者账号已登录状态：圆角方框首字母示意图与下拉菜单 --- */

.dock-user-badge {

  position: relative;

  display: inline-flex;

  align-items: center;

}



.dock-user-btn {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  height: 28px;

  min-height: 28px;

  padding: 0 10px 0 4px;

  margin: 0;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: rgba(244, 238, 227, 0.92);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  cursor: pointer;

  transition: all .2s cubic-bezier(.2, 0, 0, 1);

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.04);

}



.dock-user-btn:hover,

.dock-user-btn:focus-visible {

  border-color: var(--teal);

  background: rgba(244, 238, 227, 0.98);

  box-shadow: 0 4px 14px rgba(29, 107, 105, 0.18);

  transform: translateY(-1px);

}



/* 圆角方框首字母示意图 */

.user-avatar-square {

  display: inline-grid;

  place-items: center;

  width: 20px;

  height: 20px;

  min-width: 20px;

  border-radius: 6px; /* 圆角方框 */

  background: linear-gradient(135deg, var(--teal) 0%, #114240 100%);

  color: var(--acid);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 11px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  box-shadow: 0 1px 4px rgba(10, 20, 23, 0.2), inset 0 0 0 1px rgba(216, 244, 92, 0.35);

}



.user-avatar-name {

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 11.5px;

  font-weight: 600;

  color: var(--ink);

  letter-spacing: .02em;

  max-width: 90px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



/* 展开下拉菜单 */

.dock-user-dropdown {

  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  min-width: 175px;

  padding: 10px;

  border-radius: 12px;

  border: 1px solid var(--line);

  background: rgba(244, 238, 227, 0.96);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  box-shadow: 0 12px 36px rgba(10, 20, 23, 0.16);

  z-index: 200;

  display: flex;

  flex-direction: column;

  gap: 8px;

  animation: userDropdownIn .2s cubic-bezier(.2, 0, 0, 1);

}



.dock-user-dropdown[hidden] {

  display: none !important;

}



@keyframes userDropdownIn {

  from { opacity: 0; transform: translateY(-6px) scale(0.96); }

  to { opacity: 1; transform: translateY(0) scale(1); }

}



.user-dropdown-header {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 4px 6px;

}



.user-dropdown-avatar {

  display: grid;

  place-items: center;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  background: linear-gradient(135deg, var(--teal) 0%, #114240 100%);

  color: var(--acid);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 15px;

  font-weight: 700;

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.25), inset 0 0 0 1px rgba(216, 244, 92, 0.35);

}



.user-dropdown-meta {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.user-dropdown-name {

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 13px;

  font-weight: 600;

  color: var(--ink);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.user-dropdown-role {

  font-family: var(--mono);

  font-size: 9.5px;

  color: var(--teal);

  letter-spacing: .06em;

}



.user-dropdown-divider {

  height: 1px;

  background: var(--line);

  margin: 2px 0;

}



.user-dropdown-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 28px;

  border-radius: 6px;

  border: 1px solid transparent;

  background: transparent;

  color: var(--muted);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 11.5px;

  font-weight: 500;

  cursor: pointer;

  transition: all .2s ease;

}



.user-dropdown-btn:hover {

  background: rgba(242, 123, 81, 0.12);

  color: var(--orange);

  border-color: rgba(242, 123, 81, 0.25);

}



/* 快捷体验登录按钮 */

.quick-demo-login-wrap {

  margin-top: 14px;

}



.quick-demo-login-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 38px;

  border: 1px dashed var(--teal);

  border-radius: 999px;

  background: rgba(29, 107, 105, 0.06);

  color: var(--teal);

  font-family: var(--sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 11.5px;

  font-weight: 500;

  cursor: pointer;

  transition: all .2s ease;

}



.quick-demo-login-btn:hover {

  background: var(--teal);

  color: var(--paper);

  border-style: solid;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(29, 107, 105, 0.2);

}



.login-success-card {

  padding: 18px;

  border-radius: 10px;

  border: 1px solid var(--teal);

  background: rgba(29, 107, 105, 0.08);

  margin-bottom: 22px;

}

.login-success-card h3 {

  margin: 0 0 4px;

  font-size: 16px;

  color: var(--teal);

}

.login-success-card p {

  margin: 0 0 12px;

  font-size: 12.5px;

  color: var(--ink);

}





/* --- 12. 扑克牌展开轮播展示 (Poker Slides Showcase) --- */

.poker-showcase-shell {

  padding: 38px 0 64px;

  border-bottom: 1px solid var(--line);

  position: relative;

  overflow: hidden;

}



.poker-controls-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 28px;

}



.poker-title-meta {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.poker-chip {

  display: inline-flex;

  align-items: center;

  padding: 4px 12px;

  border-radius: 999px;

  background: var(--ink);

  color: var(--acid);

  font-family: var(--mono);

  font-size: 10px;

  letter-spacing: .1em;

  font-weight: 700;

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.15);

}



.poker-hint {

  font-family: var(--sans);

  font-size: 12px;

  color: var(--muted);

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.poker-hint .hint-icon {

  color: var(--orange);

  font-weight: bold;

}



.poker-nav-actions {

  display: flex;

  align-items: center;

  gap: 8px;

}



.poker-nav-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  min-height: 32px;

  padding: 0 16px;

  border-radius: 999px;

  border: 1px solid var(--line);

  background: rgba(244, 238, 227, 0.85);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: var(--ink);

  font-family: var(--sans);

  font-size: 11.5px;

  font-weight: 500;

  cursor: pointer;

  transition: all .2s cubic-bezier(.2, 0, 0, 1);

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.04);

}



.poker-nav-btn:hover {

  border-color: var(--teal);

  background: var(--ink);

  color: var(--paper);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(10, 20, 23, 0.15);

}



.poker-next-btn {

  border-color: rgba(29, 107, 105, 0.4);

  color: var(--teal);

  background: rgba(29, 107, 105, 0.08);

}



.poker-next-btn:hover {

  background: var(--teal);

  border-color: var(--teal);

  color: var(--paper);

}



/* 扑克展开舞台 */

.poker-stage-wrap {

  width: 100%;

  display: flex;

  justify-content: center;

  padding: 30px 0 20px;

  overflow: visible;

}



.poker-stage {

  position: relative;

  width: 100%;

  max-width: 1040px;

  height: 520px;

  user-select: none;

  -webkit-user-select: none;

}



/* 扑克单卡 */

.poker-card {

  position: absolute;

  top: 25px;

  left: 25px;

  width: 340px;

  height: 465px;

  border-radius: 20px;

  border: 1.5px solid rgba(29, 107, 105, 0.28);

  background: rgba(244, 238, 227, 0.96);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  box-shadow: 0 12px 32px rgba(10, 20, 23, 0.12), 0 2px 6px rgba(10, 20, 23, 0.06);

  transform-origin: bottom left;

  overflow: hidden;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  transition: transform 0.42s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease, border-color 0.25s ease;

}



.poker-card:hover {

  border-color: var(--teal);

  box-shadow: 0 18px 46px rgba(29, 107, 105, 0.25), 0 4px 10px rgba(10, 20, 23, 0.08);

}



.poker-card.is-top-card {

  border-color: var(--teal);

  box-shadow: 0 18px 44px rgba(29, 107, 105, 0.22), 0 4px 12px rgba(10, 20, 23, 0.08);

}



/* 卡牌头部 (花色与芯片代号) */

.poker-card-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 14px 8px;

  background: rgba(29, 107, 105, 0.04);

  border-bottom: 1px solid rgba(29, 107, 105, 0.1);

}



.poker-suit {

  font-family: var(--mono);

  font-size: 11.5px;

  font-weight: 700;

  letter-spacing: .08em;

  color: var(--orange);

}



.poker-badge {

  font-family: var(--mono);

  font-size: 9.5px;

  font-weight: 500;

  padding: 2px 8px;

  border-radius: 999px;

  background: rgba(29, 107, 105, 0.12);

  color: var(--teal);

  letter-spacing: .04em;

}



/* 卡牌图片区 */

.poker-card-visual {

  position: relative;

  width: 100%;

  height: 185px;

  overflow: hidden;

  background: var(--ink);

}



.poker-card-visual img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;

}



.poker-card:hover .poker-card-visual img {

  transform: scale(1.04);

}



/* ROS 2 专属视觉卡面 */

.poker-ros-visual {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: radial-gradient(circle at 50% 45%, #267874 0%, #113634 100%);

  position: relative;

  overflow: hidden;

}



.poker-ros-visual .ros-dots {

  display: grid;

  grid-template-columns: repeat(3, 8px);

  gap: 6px;

  margin-bottom: 8px;

}



.poker-ros-visual .ros-dots i {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--acid);

}



.poker-ros-visual b {

  font: 700 15px var(--mono);

  color: #fff;

  letter-spacing: .1em;

}



/* 翻牌右上角悬浮提示徽章 */

.poker-flip-badge {

  position: absolute;

  top: 10px;

  right: 10px;

  display: none;

  align-items: center;

  gap: 4px;

  padding: 4px 11px;

  border-radius: 999px;

  background: rgba(10, 20, 23, 0.88);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(216, 244, 92, 0.4);

  color: var(--acid);

  font-family: var(--sans);

  font-size: 10.5px;

  font-weight: 600;

  cursor: pointer;

  z-index: 8;

  transition: all .2s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.poker-flip-badge:hover {

  background: var(--teal);

  color: var(--paper);

  border-color: var(--acid);

  transform: scale(1.05);

}



.poker-flip-badge .flip-icon {

  font-size: 12px;

  color: var(--orange);

}



/* 卡牌内容区 */

.poker-card-body {

  padding: 12px 14px 14px;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.poker-eyebrow {

  font-family: var(--mono);

  font-size: 9px;

  color: var(--orange);

  letter-spacing: .12em;

  margin: 0 0 4px;

}



.poker-card-title {

  margin: 0 0 6px;

  font-size: 18px;

  line-height: 1.3;

  letter-spacing: -.03em;

  font-weight: 600;

  color: var(--ink);

}



.poker-card-title a {

  color: inherit;

  text-decoration: none;

  transition: color .2s;

}



.poker-card-title a:hover {

  color: var(--teal);

}



.poker-card-desc {

  margin: 0 0 10px;

  font-size: 12.5px;

  line-height: 1.6;

  color: var(--muted);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.poker-card-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin-top: auto;

  margin-bottom: 12px;

}



.poker-card-tags span {

  font-family: var(--mono);

  font-size: 9px;

  padding: 2px 6px;

  border-radius: 4px;

  background: rgba(29, 107, 105, 0.08);

  color: var(--teal);

}



.poker-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  padding-top: 9px;

  border-top: 1px solid var(--line);

}



.poker-detail-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 28px;

  min-height: 28px;

  padding: 0 14px;

  border-radius: 999px;

  background: var(--ink);

  color: var(--paper);

  font-family: var(--sans);

  font-size: 11px;

  font-weight: 500;

  text-decoration: none;

  transition: all .2s ease;

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.1);

}



.poker-detail-btn:hover {

  background: var(--teal);

  color: var(--paper);

  transform: translateY(-1px);

}



.poker-repo-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 28px;

  min-height: 28px;

  padding: 0 12px;

  border-radius: 999px;

  border: 1px solid var(--line);

  background: transparent;

  color: var(--muted);

  font-family: var(--sans);

  font-size: 11px;

  font-weight: 500;

  text-decoration: none;

  transition: all .2s ease;

}



.poker-repo-btn:hover {

  border-color: var(--teal);

  color: var(--teal);

  background: rgba(244, 238, 227, 0.98);

}



/* 底部状态指示圆点 */

.poker-dots-bar {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

}



.poker-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--line);

  border: 0;

  padding: 0;

  cursor: pointer;

  transition: all .25s ease;

}



.poker-dot.is-active {

  width: 24px;

  border-radius: 999px;

  background: var(--teal);

  box-shadow: 0 2px 8px rgba(29, 107, 105, 0.3);

}



/* 响应式断点适配 */

@media (max-width: 960px) {

  .poker-stage {

    max-width: 820px;

    height: 460px;

  }

  .poker-card {

    width: 290px;

    height: 410px;

  }

  .poker-card-visual {

    height: 160px;

  }

}



@media (max-width: 680px) {

  .poker-stage-wrap {

    overflow-x: auto;

    justify-content: flex-start;

    padding-bottom: 24px;

  }

  .poker-stage {

    min-width: 680px;

    height: 430px;

  }

}



/* 13. Detail Pages In-Page Jump Buttons & Action Capsules Unified Styling */



/* 13.1 Return Navigation Capsule (e.g. ← 全部项目 / ← 全部教程 / ← 全部笔记) */

.article-back,

.text-link.article-back {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  height: 34px !important;

  padding: 0 18px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(29, 107, 105, 0.22) !important;

  background: rgba(244, 238, 227, 0.75) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  color: var(--teal) !important;

  font-family: var(--sans) !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  letter-spacing: 0.04em !important;

  text-decoration: none !important;

  text-transform: none !important;

  box-shadow: 0 2px 8px rgba(10, 20, 23, 0.04) !important;

  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;

}



.article-back:hover,

.text-link.article-back:hover {

  background: var(--teal) !important;

  color: var(--paper) !important;

  border-color: var(--teal) !important;

  transform: translateX(-3px) !important;

  box-shadow: 0 4px 16px rgba(29, 107, 105, 0.25) !important;

}



/* 13.2 Detail Hero Action Buttons (e.g. 查看仓库 / 查看在线演示) */

.detail-actions {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  margin-top: 24px !important;

}



.detail-actions .button,

.detail-actions .button-primary,

.project-detail .button-primary {

  display: inline-flex !important;

  align-items: center !important;

  gap: 10px !important;

  height: 40px !important;

  padding: 0 26px !important;

  border-radius: 999px !important;

  background: var(--ink) !important;

  color: var(--paper) !important;

  font-family: var(--sans) !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  letter-spacing: 0.04em !important;

  text-decoration: none !important;

  text-transform: none !important;

  border: 1px solid transparent !important;

  box-shadow: 0 4px 14px rgba(10, 20, 23, 0.14) !important;

  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;

}



.detail-actions .button-primary:hover,

.project-detail .button-primary:hover {

  background: var(--teal) !important;

  color: var(--paper) !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 22px rgba(29, 107, 105, 0.3) !important;

}



/* 13.3 Content Action Pills (问题反馈 ↓, 评论交流 ↓, 私密反馈) */

.content-actions {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  flex-wrap: wrap !important;

  margin: 24px 0 !important;

}



.content-actions .text-link {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  height: 30px !important;

  padding: 0 14px !important;

  border-radius: 999px !important;

  border: 1px solid var(--line) !important;

  background: rgba(244, 238, 227, 0.6) !important;

  backdrop-filter: blur(6px) !important;

  -webkit-backdrop-filter: blur(6px) !important;

  color: var(--muted) !important;

  font-family: var(--sans) !important;

  font-size: 11.5px !important;

  font-weight: 500 !important;

  letter-spacing: 0.02em !important;

  text-decoration: none !important;

  text-transform: none !important;

  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;

}



.content-actions .text-link:hover {

  color: var(--ink) !important;

  border-color: var(--teal) !important;

  background: rgba(216, 244, 92, 0.16) !important;

  transform: translateY(-1px) !important;

}



/* 13.4 Discussion Access Login & Action Buttons (登录后反馈 / 登录后评论) */

.discussion-access {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 16px 22px !important;

  border-radius: 12px !important;

  border: 1px solid rgba(29, 107, 105, 0.16) !important;

  background: rgba(244, 238, 227, 0.65) !important;

  margin-bottom: 24px !important;

}



.discussion-access p {

  margin: 0 !important;

  font-family: var(--sans) !important;

  font-size: 13px !important;

  color: var(--muted) !important;

}



.discussion-access .button,

.discussion-access .button-primary {

  display: inline-flex !important;

  align-items: center !important;

  height: 34px !important;

  padding: 0 20px !important;

  border-radius: 999px !important;

  background: var(--ink) !important;

  color: var(--paper) !important;

  font-family: var(--sans) !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  letter-spacing: 0.04em !important;

  text-decoration: none !important;

  text-transform: none !important;

  border: 1px solid transparent !important;

  box-shadow: 0 2px 10px rgba(10, 20, 23, 0.1) !important;

  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;

}



.discussion-access .button-primary:hover {

  background: var(--teal) !important;

  color: var(--paper) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 4px 16px rgba(29, 107, 105, 0.25) !important;

}



/* 13.5 Detail Resource Links (项目资源卡片) */

.detail-resource {

  border-radius: 12px !important;

  border: 1px solid rgba(29, 107, 105, 0.16) !important;

  background: rgba(244, 238, 227, 0.65) !important;

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

  padding: 16px 20px !important;

  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;

}



.detail-resource:hover {

  border-color: var(--teal) !important;

  background: var(--surface-hover) !important;

  box-shadow: 0 6px 24px rgba(29, 107, 105, 0.12) !important;

  transform: translateY(-2px) !important;

}