:root {
  color-scheme: dark;
  /* interaction-design: 缓动与时长 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-micro: 120ms;
  --duration-small: 220ms;
  --duration-medium: 320ms;
}
/* 首屏淡入（Purposeful Motion: Orientation + Continuity） */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-animate { opacity: 0; animation: heroFadeIn var(--duration-medium) var(--ease-out) forwards; }
.hero-animate-up { opacity: 0; animation: heroFadeInUp var(--duration-medium) var(--ease-out) forwards; }
/* 技能卡片底部：单行排版（ui-ux-pro-max） */
.skill-card-footer .link-chip { flex-shrink: 0; }
/* 技能卡片右上角类别标签：统一单行、清晰（ui-ux-pro-max） */
.skill-card-tag {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}
/* 社区大赛作品：与类型标签同一行、字号字重与 .skill-card-tag 一致（不依赖 Tailwind 是否命中） */
.skill-card-competition-badge {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(254 243 199);
  background: rgb(250 204 21 / 0.14);
  border: 1px solid rgb(250 204 21 / 0.45);
}
/* 卡片描述区铺满整卡：用 grid 让描述单独一行横跨全宽，不再被右侧标签挤缩 */
.skill-card-inner header {
  display: grid;
  /* 第二列用 max-content，避免「生活助手 + 大赛」被压成两行 */
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  gap: 0.25rem 0.75rem;
}
.skill-card-inner header > div:first-child {
  display: contents;
}
.skill-card-inner header > div:last-child {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: max-content;
  max-width: none;
}
.skill-card-inner header p.mt-1.text-xs.leading-relaxed {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 卡片内 flex 布局：footer 贴底，所有卡片「查看详情」行与底边距一致；统一最大高度使第一排与第二排一致 */
.skill-card-inner {
  display: flex;
  flex-direction: column;
  max-height: 18rem;
  overflow: hidden;
  padding-bottom: 0.5rem !important;
}
.skill-card-inner.transition-card {
  transition: transform var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out), border-color var(--duration-small) var(--ease-out);
}
.skill-card-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 0.5rem !important;
  padding-bottom: 0 !important;
}
.tag-chip-active {
  border-color: rgb(45 212 191 / 0.75) !important;
  background-color: rgb(20 184 166 / 0.22) !important;
  color: rgb(204 251 241) !important;
  box-shadow: 0 0 0 1px rgb(45 212 191 / 0.35) inset;
}
/* interaction-design: 标签按钮微反馈 */
.tag-chip {
  transition: transform var(--duration-micro) var(--ease-out), border-color var(--duration-small) var(--ease-out), background-color var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out), color var(--duration-small) var(--ease-out);
}
.tag-chip:active {
  transform: scale(0.98);
}
/* 安全标签：四级评估，ui-ux-pro-max 重设计（左强调条 + 盾形图标 + 字重对比，与类型标签区分） */
.skill-security-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.35rem 0.5rem;
  border: none; border-left: 4px solid; border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.25;
  text-transform: uppercase;
}
.skill-security-safe { background: rgba(16, 185, 129, 0.18); border-left-color: rgb(52, 211, 153); color: rgb(167, 243, 208); }
.skill-security-low { background: rgba(14, 165, 233, 0.18); border-left-color: rgb(56, 189, 248); color: rgb(186, 230, 253); }
.skill-security-mid { background: rgba(245, 158, 11, 0.2); border-left-color: rgb(251, 191, 36); color: rgb(253, 230, 138); }
.skill-security-high { background: rgba(244, 63, 94, 0.2); border-left-color: rgb(248, 113, 133); color: rgb(254, 205, 211); }
.skill-security-dot {
  width: 0.875rem; height: 0.875rem; flex-shrink: 0;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' fill='%23000'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' fill='%23000'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain; background-color: currentColor;
}
.skill-security-dot.safe { background-color: rgb(52, 211, 153); }
.skill-security-dot.low { background-color: rgb(56, 189, 248); }
.skill-security-dot.mid { background-color: rgb(251, 191, 36); }
.skill-security-dot.high { background-color: rgb(248, 113, 133); }
/* 开放技能详情模板：与 skill-*.html 一致，保证注入内容样式正确 */
.skill-prose { max-width: 72ch; line-height: 1.65; }
#official-skill-detail-panel main .skill-prose { max-width: none; }
#official-skill-detail-panel main .skill-prose table { border-collapse: collapse; }
#official-skill-detail-panel main .skill-prose th,
#official-skill-detail-panel main .skill-prose td { border: 1px solid rgba(71, 85, 105, 0.8); padding: 0.5rem 0.75rem; }
#official-skill-detail-panel main .skill-prose th { background: rgba(30, 41, 59, 0.8); color: rgb(226, 232, 240); font-weight: 600; }
#official-skill-detail-panel main .skill-prose td { color: rgb(203, 213, 225); }
/* 社区技能详情：与开放社区详情页共用一套模版与配色（参考 ui-ux-pro-max 深色 + 青绿强调） */
#community-skill-detail-panel { display: none; flex-direction: column; }
#community-skill-detail-panel.is-open { display: flex; }
#community-skill-detail-main .community-detail-file-btn { min-height: 44px; }
.community-detail-pill { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background: rgba(2, 6, 23, 0.7); border: 1px solid rgba(51, 65, 85, 0.8); padding: 0.375rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(203, 213, 225); }
.community-detail-pill-dot { width: 6px; height: 6px; border-radius: 9999px; background: rgb(34, 211, 238); flex-shrink: 0; }
.community-detail-action-btn { min-height: 44px; border-radius: 0.75rem; border: 1px solid rgba(71, 85, 105, 0.8); background: rgba(30, 41, 59, 0.8); color: rgb(226, 232, 240); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.community-detail-action-btn:hover { background: rgba(51, 65, 85, 0.9); border-color: rgba(100, 116, 139, 0.8); }
.skill-install-block code { word-break: break-word; overflow-wrap: break-word; }
.skill-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.skill-detail-sidebar .skill-stats-grid { grid-template-columns: 1fr; }
.skill-stats-item { border: 1px solid rgba(71, 85, 105, 0.6); border-radius: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(15, 23, 42, 0.6); }
.skill-audits-section { border: 1px solid rgba(71, 85, 105, 0.6); border-radius: 0.5rem; padding: 0.75rem 1rem; background: rgba(15, 23, 42, 0.6); }
.skill-audit-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(71, 85, 105, 0.4); }
.skill-audit-row:last-child { border-bottom: none; }
.skill-audit-row-link { text-decoration: none; color: inherit; border-radius: 0.375rem; margin: 0 -0.25rem; padding: 0.5rem 0.25rem; cursor: pointer; border: none; background: none; font: inherit; }
.skill-audit-badge { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.625rem; border-radius: 9999px; flex-shrink: 0; }
.skill-audit-pass { background: rgba(16, 185, 129, 0.25); color: rgb(167, 243, 208); }
.skill-audit-warn { background: rgba(194, 65, 12, 0.3); color: rgb(254, 215, 170); }
.skill-official-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 0.25rem; background: rgba(15, 23, 42, 0.95); color: rgb(248, 250, 252); }
.audit-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 23, 0.75); backdrop-blur: 4px; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
.audit-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.audit-modal-panel { width: 100%; max-width: 56rem; max-height: calc(100vh - 2rem); overflow: auto; background: linear-gradient(180deg, rgb(15, 23, 42) 0%, rgb(2, 6, 23) 100%); border: 1px solid rgba(71, 85, 105, 0.7); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.audit-modal-body h1, .audit-modal-body h2, .audit-modal-body h3 { color: rgb(248, 250, 252); font-weight: 600; margin-top: 1em; margin-bottom: 0.5em; }
.audit-modal-body a { color: rgb(125, 211, 252); text-decoration: underline; }
.audit-modal-body ul, .audit-modal-body ol { margin: 0.5em 0; padding-left: 1.5em; }
.audit-modal-body p { margin: 0.5em 0; line-height: 1.6; }
/* 参考知识库/智能体 自定义下拉：ui-ux-pro-max 深色、圆角、触控 44px、焦点环 */
.skill-creator-select-wrap { position: relative; display: block; flex: 1 1 0%; min-width: 0; }
.skill-creator-select-wrap .native-select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; overflow: hidden; }
.skill-creator-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; min-height: 44px; padding: 0.625rem 0.875rem; padding-right: 2.25rem;
  border: 1px solid rgb(71 85 105 / 0.8); border-radius: 0.75rem; background: rgb(30 41 59 / 0.9);
  color: rgb(248 250 252); font-size: 0.75rem; line-height: 1.4; text-align: left; cursor: pointer;
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.skill-creator-select-trigger:hover { border-color: rgb(100 116 139); background: rgb(51 65 85 / 0.6); }
.skill-creator-select-trigger:focus-visible { border-color: rgb(52 211 153); box-shadow: 0 0 0 2px rgb(52 211 153 / 0.35); }
.skill-creator-select-trigger[aria-expanded="true"] { border-color: rgb(52 211 153 / 0.8); box-shadow: 0 0 0 2px rgb(52 211 153 / 0.25); }
.skill-creator-select-trigger .trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-creator-select-trigger .trigger-text.placeholder { color: rgb(148 163 184); }
.skill-creator-select-trigger .trigger-chevron {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: rgb(148 163 184); flex-shrink: 0;
  transition: transform 0.2s ease;
}
.skill-creator-select-trigger[aria-expanded="true"] .trigger-chevron { transform: translateY(-50%) rotate(180deg); color: rgb(203 213 225); }
.find-skills-type-trigger.skill-creator-select-trigger {
  min-height: auto;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-right: 2rem;
}
.skill-creator-select-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 280px; overflow-y: auto;
  border: 1px solid rgb(71 85 105); border-radius: 0.75rem; background: rgb(15 23 42 / 0.98);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgb(51 65 85 / 0.5);
}
.skill-creator-select-option {
  display: block; width: 100%; padding: 0.625rem 0.875rem; min-height: 44px; box-sizing: border-box;
  border: none; background: transparent; color: rgb(226 232 240); font-size: 0.75rem; text-align: left; cursor: pointer;
  transition: background 0.1s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skill-creator-select-option:hover { background: rgb(51 65 85 / 0.8); }
.skill-creator-select-option:focus-visible { outline: none; background: rgb(51 65 85 / 0.9); box-shadow: inset 0 0 0 2px rgb(52 211 153 / 0.5); }
.skill-creator-select-option[data-value=""] { color: rgb(148 163 184); font-style: normal; }
/* 精选技能：一排 3 张、左右间距与卡片间距一致（与参考图一致） */
#featured-skills-strip { max-width: 1303px; margin-left: auto; margin-right: auto; } /* 16 + 413*3 + 16*2 + 16 = 1303，与开放技能卡尺寸一致 */
#featured-skills-scroll {
  scroll-behavior: smooth;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
#featured-skills-scroll .featured-skill-card { width: 85vw; max-width: 413px; flex-shrink: 0; }
@media (min-width: 640px) { #featured-skills-scroll .featured-skill-card { width: 413px; } }
#featured-skills-scroll .featured-skill-card-inner {
  height: 288px;
  max-height: 288px;
  display: flex;
  flex-direction: column;
  background: rgb(19, 23, 34) !important;
  border-color: rgb(51 65 85 / 0.9);
}
#featured-skills-scroll .featured-skill-card .skill-card-inner:not(.featured-skill-card-inner) { height: 288px; max-height: 288px; display: flex; flex-direction: column; }
#featured-skills-scroll .featured-skill-card-inner .featured-desc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#featured-skills-scroll .featured-skill-card-inner .featured-desc p { -webkit-line-clamp: 4; line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
/* 精选卡：顶部仅标题+副标题，描述单独一行；类型标签浅灰底深色字，与安全角标间竖线（与参考图一致） */
#featured-skills-scroll .featured-skill-card-inner header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.75rem;
}
#featured-skills-scroll .featured-skill-card-inner header .featured-header-left { grid-column: 1; grid-row: 1; }
#featured-skills-scroll .featured-skill-card-inner header .featured-header-right { grid-column: 2; grid-row: 1; align-self: start; flex-wrap: nowrap; }
#featured-skills-scroll .featured-skill-card-inner header .featured-desc { grid-column: 1 / -1; grid-row: 2; }
#featured-skills-scroll .featured-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  background: rgb(71 85 105 / 0.7);
  color: rgb(226 232 240);
  white-space: nowrap;
}
#featured-skills-scroll .featured-tag-divider {
  width: 1px;
  height: 0.875rem;
  background: rgb(71 85 105);
  margin: 0 0.35rem;
  flex-shrink: 0;
}
/* 图2 单卡尺寸：先只作用于第一张供确认（宽 448px、高 230px、内边距 24px、圆角 14px） */
#featured-skills-scroll .featured-skill-card.featured-card-fig2 { width: 85vw; max-width: 448px; flex-shrink: 0; }
@media (min-width: 640px) { #featured-skills-scroll .featured-skill-card.featured-card-fig2 { width: 448px; } }
#featured-skills-scroll .featured-skill-card.featured-card-fig2 .featured-skill-card-inner {
  height: 230px;
  padding: 24px;
  border-radius: 14px;
}
#featured-skills-scroll .featured-skill-card.featured-card-fig2 .featured-skill-card-inner h3 { font-size: 24px; font-weight: 700; }
#featured-skills-scroll .featured-skill-card.featured-card-fig2 .featured-skill-card-inner .featured-header-left > p { font-size: 14px; }
#featured-skills-scroll .featured-skill-card.featured-card-fig2 .featured-skill-card-inner .featured-desc p { font-size: 16px; line-height: 1.5; -webkit-line-clamp: 3; line-clamp: 3; }
#featured-skills-scroll .featured-skill-card.featured-card-fig2 .featured-skill-card-inner .pill { font-size: 14px; }
#featured-skills-scroll .featured-skill-card.featured-card-fig2 .featured-skill-card-inner .skill-card-footer { padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  #featured-skills-scroll { scroll-behavior: auto; }
}

/* 每周精选（Hero 右侧）：ui-ux-pro-max 层次、动效、触控 */
.hero-weekly-picks {
  background: linear-gradient(165deg, rgba(30,41,59,0.85) 0%, rgba(15,23,42,0.75) 100%);
  border: 1px solid rgba(71,85,105,0.6);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(56,189,248,0.06);
}
.hero-weekly-picks .weekly-picks-header {
  border-bottom: 1px solid rgba(71,85,105,0.5);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.hero-weekly-picks .weekly-picks-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hero-weekly-picks .weekly-picks-badge {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem; border-radius: 9999px;
  background: linear-gradient(135deg, rgba(56,189,248,0.25), rgba(52,211,153,0.2));
  color: rgb(165 243 252);
  border: 1px solid rgba(56,189,248,0.35);
}
.hero-weekly-picks .weekly-pick-item {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-weekly-picks .weekly-pick-item:hover {
  border-left-color: rgb(56 189 248);
  background-color: rgba(30,41,59,0.7);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,0.12);
}
.hero-weekly-picks .weekly-pick-item .weekly-pick-detail {
  transition: color 0.2s ease, transform 0.2s ease;
}
.hero-weekly-picks .weekly-pick-item:hover .weekly-pick-detail { color: rgb(165 243 252); transform: translateX(2px); }
.hero-weekly-picks .weekly-picks-cta {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-weekly-picks .weekly-picks-cta:hover {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.6);
  box-shadow: 0 0 20px -5px rgba(56,189,248,0.25);
}
@media (prefers-reduced-motion: reduce) {
  .hero-weekly-picks .weekly-pick-item .weekly-pick-detail { transition: none; }
  .hero-weekly-picks .weekly-pick-item:hover .weekly-pick-detail { transform: none; }
}

/* 每周精选轮播：使用开放技能卡片模版，仅加序号与轮播样式；interaction-design 缓动 + ui-ux-pro-max */
.hero-weekly-picks .weekly-carousel-track {
  display: flex;
  transition: transform var(--duration-medium) var(--ease-out);
  will-change: transform;
}
.hero-weekly-picks .weekly-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 2px;
}
.hero-weekly-picks .weekly-carousel-slide .skill-card {
  margin: 0;
  width: 100%;
}
.hero-weekly-picks .weekly-carousel-slide .skill-card-inner {
  position: relative;
}
/* 序号 1–8：右下角圆形徽章，不遮挡安全标签；前三名特殊样式 */
.hero-weekly-picks .weekly-pick-rank {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(30 41 59);
  background: rgba(148,163,184,0.5);
  border: 1px solid rgba(71,85,105,0.8);
}
.hero-weekly-picks .weekly-pick-slide-card.rank-1 .weekly-pick-rank {
  background: linear-gradient(145deg, #fbbf24, #f59e0b);
  border-color: rgba(251,191,36,0.6);
  color: rgb(30 27 24);
  box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}
.hero-weekly-picks .weekly-pick-slide-card.rank-2 .weekly-pick-rank {
  background: linear-gradient(145deg, #94a3b8, #64748b);
  border-color: rgba(148,163,184,0.6);
  color: rgb(248 250 252);
  box-shadow: 0 2px 8px rgba(100,116,139,0.4);
}
.hero-weekly-picks .weekly-pick-slide-card.rank-3 .weekly-pick-rank {
  background: linear-gradient(145deg, #d97706, #b45309);
  border-color: rgba(217,119,6,0.6);
  color: rgb(255 255 255);
  box-shadow: 0 2px 8px rgba(180,83,9,0.4);
}
.hero-weekly-picks .weekly-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.hero-weekly-picks .weekly-carousel-dot {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(71,85,105,0.8);
  background: rgba(51,65,85,0.8);
  cursor: pointer;
  font-size: 0.625rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(148 163 184);
  transition: transform var(--duration-micro) var(--ease-out), background var(--duration-small) var(--ease-out), border-color var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out);
}
.hero-weekly-picks .weekly-carousel-dot:hover {
  background: rgba(71,85,105,0.9);
  border-color: rgba(56,189,248,0.4);
  box-shadow: 0 0 12px rgba(56,189,248,0.25);
}
.hero-weekly-picks .weekly-carousel-dot.active {
  color: rgb(15 23 42);
  transform: scale(1.25);
  box-shadow: 0 0 16px rgba(56,189,248,0.5), 0 0 32px rgba(56,189,248,0.2);
}
.hero-weekly-picks .weekly-carousel-dot.active[data-rank="1"] {
  background: linear-gradient(145deg, #fbbf24, #f59e0b);
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(251,191,36,0.5), 0 0 32px rgba(245,158,11,0.2);
}
.hero-weekly-picks .weekly-carousel-dot.active[data-rank="2"] {
  background: linear-gradient(145deg, #94a3b8, #64748b);
  border-color: #64748b;
  box-shadow: 0 0 16px rgba(148,163,184,0.5), 0 0 32px rgba(100,116,139,0.2);
}
.hero-weekly-picks .weekly-carousel-dot.active[data-rank="3"] {
  background: linear-gradient(145deg, #d97706, #b45309);
  border-color: #b45309;
  box-shadow: 0 0 16px rgba(217,119,6,0.5), 0 0 32px rgba(180,83,9,0.2);
}
.hero-weekly-picks .weekly-carousel-dot.active:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) {
  background: rgb(56 189 248);
  border-color: rgb(56 189 248);
}
.hero-weekly-picks .weekly-carousel-dot[data-rank="1"]:not(.active) { border-color: rgba(251,191,36,0.6); }
.hero-weekly-picks .weekly-carousel-dot[data-rank="2"]:not(.active) { border-color: rgba(148,163,184,0.6); }
.hero-weekly-picks .weekly-carousel-dot[data-rank="3"]:not(.active) { border-color: rgba(217,119,6,0.6); }
@media (prefers-reduced-motion: reduce) {
  .hero-weekly-picks .weekly-carousel-track { transition: none; }
  .hero-weekly-picks .weekly-carousel-dot { transition: none; }
}

/* Banner 广告轮播卡（混在每周精选卡片中） */
.weekly-banner-card {
  display: flex; flex-direction: column; width: 100%;
  /* 固定卡片比例，强制触发裁剪（避免被原图尺寸撑高） */
  aspect-ratio: 702 / 320;
  height: auto;
  min-height: 0;
  border-radius: 1rem; overflow: hidden; position: relative;
  cursor: pointer;
}
.weekly-banner-card > a,
.weekly-banner-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.weekly-banner-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.weekly-banner-card .weekly-banner-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  padding: 0.75rem 1rem; pointer-events: none;
}
.weekly-banner-card .weekly-banner-label {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem; border-radius: 4px;
  background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9);
  display: inline-block; backdrop-filter: blur(4px);
}

/* 卡片右下角 GitHub Stars：ui-ux-pro-max 低调、可读、触控不遮挡 */
.skill-card-stars {
  display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
  padding: 0.2rem 0.5rem; border-radius: 9999px;
  background: rgb(30 41 59 / 0.6); border: 1px solid rgb(51 65 85 / 0.8);
  font-size: 0.6875rem; font-weight: 500; color: rgb(148 163 184);
  line-height: 1.2;
}
.skill-card-stars .star-icon { width: 0.75rem; height: 0.75rem; color: rgb(250 204 21 / 0.95); flex-shrink: 0; }
.skill-card-stars .star-count { color: rgb(203 213 225); }
.skill-card-stars.is-loading { color: rgb(100 116 139); }
.skill-card-stars.is-error { color: rgb(148 163 184); }
/* 首页技能 Tab 分类：ui-ux-pro-max 触控 44px、焦点环、层级 */
#skills-list-root[data-active="official"] .skill-card:not([data-category="official"]) { display: none !important; }
#skills-list-root[data-active="community"] .skill-card:not([data-category="community"]) { display: none !important; }
#skills-list-root[data-active="search"] .skill-card:not([data-category="search"]) { display: none !important; }
#skills-list-root[data-active="created"] .skill-card:not([data-category="created"]) { display: none !important; }
#skills-list-root[data-active="daily"] .skill-card { display: none !important; }
#skills-list-root[data-active="daily"] #daily-picks-panel { display: block !important; }
#skills-list-root:not([data-active="daily"]) #daily-picks-panel { display: none !important; }
.daily-tab-btn[aria-selected="true"] {
  background: linear-gradient(135deg, rgb(251 191 36 / 0.2), rgb(245 158 11 / 0.15)) !important;
  border-color: rgb(251 191 36 / 0.6) !important;
  color: rgb(253 230 138) !important;
}
.daily-pick-card {
  position: relative; overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgb(217 186 145 / 0.45);
  background: linear-gradient(160deg, #FFFCF7 0%, #FFF8EE 100%);
  padding: 1.5rem 1.5rem 1.25rem;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), border-color 220ms ease, box-shadow 220ms ease;
  display: flex; flex-direction: column;
}
.daily-pick-card:hover {
  transform: translateY(-4px);
  border-color: rgb(217 161 80 / 0.6);
  box-shadow: 0 12px 32px rgb(180 130 50 / 0.10), 0 2px 8px rgb(180 130 50 / 0.06);
}
.daily-pick-card .dp-rank {
  position: absolute; top: 0; left: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 0.5rem 0 0.625rem 0;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; font-weight: 800; color: #FFFBEB;
  letter-spacing: -0.02em;
}
.daily-pick-card .dp-section-label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.6875rem; font-weight: 600; color: #92400E;
  letter-spacing: 0.02em; margin-bottom: 0.3rem;
}
.daily-pick-card .dp-section-label svg { width: 0.875rem; height: 0.875rem; color: #B45309; flex-shrink: 0; }
.daily-pick-card .dp-reason-box {
  background: rgb(254 243 199 / 0.45);
  border: 1px solid rgb(253 224 136 / 0.5);
  border-radius: 0.75rem; padding: 0.625rem 0.75rem;
  margin-bottom: 0.75rem;
}
.daily-pick-card .dp-source-box {
  background: rgb(255 247 237 / 0.6);
  border: 1px solid rgb(234 214 180 / 0.5);
  border-radius: 0.75rem; padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.daily-pick-card .dp-source-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: #B45309; font-size: 0.6875rem; font-weight: 500;
  text-decoration: none; transition: color 150ms ease;
  cursor: pointer;
}
.daily-pick-card .dp-source-link:hover { color: #92400E; text-decoration: underline; }
.daily-pick-card .dp-stars-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: rgb(254 243 199 / 0.7); border: 1px solid rgb(253 224 136 / 0.6);
  border-radius: 9999px; padding: 0.15rem 0.5rem;
  font-size: 0.6875rem; font-weight: 600; color: #92400E;
}
.daily-pick-card .dp-stars-badge svg { width: 0.75rem; height: 0.75rem; color: #D97706; flex-shrink: 0; }
.daily-pick-card .dp-lang-badge {
  display: inline-flex; align-items: center;
  background: rgb(219 234 254 / 0.6); border: 1px solid rgb(147 197 253 / 0.5);
  border-radius: 9999px; padding: 0.15rem 0.5rem;
  font-size: 0.6875rem; font-weight: 500; color: #1E40AF;
}
.daily-pick-card .dp-tag {
  display: inline-flex; align-items: center;
  background: rgb(236 253 245 / 0.7); border: 1px solid rgb(167 243 208 / 0.5);
  border-radius: 9999px; padding: 0.15rem 0.5rem;
  font-size: 0.6875rem; font-weight: 500; color: #065F46;
}
.daily-pick-card .link-chip {
  background: rgb(255 255 255 / 0.8) !important; border-color: rgb(217 186 145 / 0.5) !important;
  color: #78716C !important; font-size: 0.6875rem !important;
}
.daily-pick-card .link-chip:hover {
  background: rgb(254 243 199 / 0.6) !important; border-color: rgb(217 161 80 / 0.6) !important;
  color: #92400E !important;
}
.skills-tab-btn {
  min-height: 40px; min-width: 40px; padding: 0.5rem 0.875rem;
  border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.25;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--duration-micro) var(--ease-out), border-color var(--duration-small) var(--ease-out), background-color var(--duration-small) var(--ease-out), color var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out);
  outline: none;
}
@media (min-width: 640px) {
  .skills-tab-btn { min-height: 44px; min-width: 44px; padding: 0.625rem 1.25rem; font-size: 0.875rem; }
}
.skills-tab-btn:hover { transform: translateY(-1px); }
.skills-tab-btn:active { transform: translateY(0) scale(0.98); }
.skills-tab-btn:hover { background: rgb(51 65 85 / 0.6); color: rgb(226 232 240); }
.skills-tab-btn:focus-visible { box-shadow: 0 0 0 2px rgb(52 211 153 / 0.5); border-color: rgb(52 211 153 / 0.6); }
.skills-tab-btn[aria-selected="true"] {
  background: rgb(52 211 153 / 0.18); border-color: rgb(52 211 153 / 0.6); color: rgb(167 243 208);
}
.skills-tab-btn[aria-selected="false"] { background: rgb(30 41 59 / 0.6); border-color: rgb(71 85 105 / 0.8); color: rgb(148 163 184); }
/* 标签+搜索筛选栏：仅「开放技能」和「社区技能」Tab 下显示 */
#skills-filter-bar { display: none; }
#skills-list-root[data-active="official"] #skills-filter-bar,
#skills-list-root[data-active="community"] #skills-filter-bar { display: block; }
/* 首页隐藏"搜索的技能 / 生成的技能"两个 Tab */
#skills-tab-search,
#skills-tab-created { display: none !important; }
/* 首页隐藏底部绿框（搜索更多技能 / 新技能创建） */
#skills-list-root[data-active="official"] #bottom-green-actions,
#skills-list-root[data-active="community"] #bottom-green-actions,
#skills-list-root[data-active="search"] #bottom-green-actions,
#skills-list-root[data-active="created"] #bottom-green-actions,
#skills-list-root[data-active="daily"] #bottom-green-actions,
#skills-list-root[data-active="daily"] #skills-load-more-wrap,
#skills-list-root[data-active="daily"] #empty-state { display: none !important; }
/* 搜索的技能 / 生成的技能 Tab 下底部留白，避免卡片与 footer 挤在一起 */
#skills-list-root[data-active="community"],
#skills-list-root[data-active="search"],
#skills-list-root[data-active="created"],
#skills-list-root[data-active="daily"] { padding-bottom: 4rem; }
/* interaction-design: 输入/筛选后平滑滚动到列表（Orientation + 300–500ms 中等过渡） */
#skills-list-root {
  scroll-margin-top: 5.5rem;
}
#skills-list-root .scroll-reveal {
  transition: opacity var(--duration-medium) var(--ease-out);
}
/* interaction-design: 主按钮微交互（100–150ms 微反馈） */
.btn-interaction {
  transition: transform var(--duration-micro) var(--ease-out), box-shadow var(--duration-small) var(--ease-out), border-color var(--duration-small) var(--ease-out), background-color var(--duration-small) var(--ease-out);
}
.btn-interaction:hover { transform: scale(1.02); }
.btn-interaction:active { transform: scale(0.98); }
/* 搜索框焦点与边框过渡 */
#search-input {
  transition: border-color var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out);
}
/* 卡片内链接芯片：hover 轻微上浮 */
.skill-card-footer .link-chip {
  transition: transform var(--duration-micro) var(--ease-out), border-color var(--duration-small) var(--ease-out), background-color var(--duration-small) var(--ease-out), color var(--duration-small) var(--ease-out);
}
.skill-card-footer .link-chip:hover { transform: translateY(-1px); }
.skill-card-footer .link-chip:active { transform: translateY(0) scale(0.98); }
/* 副标题/探索区标题框：hover 轻微反馈 */
.hero-subtitle-block, .explore-title-block {
  transition: transform var(--duration-small) var(--ease-out), box-shadow var(--duration-small) var(--ease-out), border-color var(--duration-small) var(--ease-out);
}
.hero-subtitle-block:hover, .explore-title-block:hover {
  transform: translateY(-2px);
}
/* 登录/注册弹窗：ui-ux-pro-max 可访问性、焦点环、触控 44px、错误反馈 */
.auth-modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(2, 6, 23, 0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-small) var(--ease-out), visibility var(--duration-small) var(--ease-out);
}
.auth-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.auth-modal-backdrop.auth-modal-closing { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
.auth-modal-box {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgb(30 41 59) 0%, rgb(15 23 42) 100%);
  border: 1px solid rgb(71 85 105 / 0.8);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
  padding: 1.5rem;
  transform: scale(0.98); opacity: 0;
  transition: transform var(--duration-small) var(--ease-out), opacity var(--duration-small) var(--ease-out);
}
.auth-modal-backdrop.is-open .auth-modal-box { transform: scale(1); opacity: 1; }
body.detail-url-require-login #main-home { display: none !important; }
body.detail-url-require-login #official-skill-detail-panel { display: none !important; }
body.detail-url-require-login .auth-modal-backdrop { z-index: 70; }
.auth-modal-body { margin-top: 0; }
.auth-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.auth-modal-box h2 { font-size: 1.25rem; font-weight: 600; color: rgb(248 250 252); margin: 0; }
.auth-modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; min-width: 44px; min-height: 44px;
  border: none; border-radius: 0.5rem; background: rgb(51 65 85 / 0.6);
  color: rgb(203 213 225); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth-modal-close:hover { background: rgb(71 85 105); color: rgb(248 250 252); }
.auth-modal-close:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(52 211 153 / 0.5); }
.effect-image-lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(2, 6, 23, 0.9); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: pointer; }
.effect-image-lightbox img { max-width: 95vw; max-height: 95vh; width: auto; height: auto; object-fit: contain; pointer-events: none; border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.auth-form-input {
  width: 100%; min-height: 44px; padding: 0.625rem 0.875rem;
  border: 1px solid rgb(71 85 105); border-radius: 0.5rem;
  background: rgb(15 23 42 / 0.9); color: rgb(248 250 252);
  font-size: 1rem; line-height: 1.5;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-form-input::placeholder { color: rgb(148 163 184); }
.auth-form-input:hover { border-color: rgb(100 116 139); }
.auth-form-input:focus { border-color: rgb(52 211 153); box-shadow: 0 0 0 2px rgb(52 211 153 / 0.35); }
.auth-form-input.has-error { border-color: rgb(248 113 133); }
.auth-form-label { display: block; font-size: 0.875rem; font-weight: 500; color: rgb(203 213 225); margin-bottom: 0.375rem; }
.auth-form-error { font-size: 0.8125rem; color: rgb(248 113 133); margin-top: 0.25rem; min-height: 1.25rem; }
.auth-form-group { margin-bottom: 1rem; }
.auth-submit-btn {
  width: 100%; min-height: 44px; margin-top: 0.5rem;
  border-radius: 0.5rem; font-size: 0.9375rem; font-weight: 600;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, rgb(14 165 233), rgb(6 182 212));
  color: white;
  transition: opacity 0.2s ease, transform var(--duration-micro) var(--ease-out);
}
.auth-submit-btn:hover:not(:disabled) { opacity: 0.95; transform: translateY(-1px); }
.auth-submit-btn:active:not(:disabled) { transform: translateY(0); }
.auth-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.auth-submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(52 211 153 / 0.6); }
.auth-tab-row { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.auth-tab-btn {
  flex: 1; min-height: 44px; border-radius: 0.5rem; font-weight: 500;
  border: 1px solid transparent; background: rgb(51 65 85 / 0.5); color: rgb(148 163 184);
  cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.auth-tab-btn:hover { background: rgb(51 65 85 / 0.8); color: rgb(226 232 240); }
.auth-tab-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(52 211 153 / 0.5); }
.auth-tab-btn.active { background: rgb(52 211 153 / 0.2); border-color: rgb(52 211 153 / 0.6); color: rgb(167 243 208); }
.auth-form-hint { line-height: 1.5; }
#auth-login-wrap { display: block; }
#auth-login-wrap.auth-hidden { display: none; }
.auth-register-wrap { display: none; }
.auth-register-wrap.is-open { display: block; }
.auth-reset-wrap { display: none; }
.auth-reset-wrap.is-open { display: block; }
.auth-switch-link { background: none; border: none; padding: 0; color: rgb(56 189 248); cursor: pointer; font-size: inherit; text-decoration: underline; }
.auth-switch-link:hover { color: rgb(125 211 252); }
.auth-switch-link:focus-visible { outline: none; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-animate, .hero-animate-up { animation: none; opacity: 1; transform: none; }
  .btn-interaction:hover, .btn-interaction:active { transform: none; }
  .tag-chip:active { transform: none; }
  .skills-tab-btn:hover, .skills-tab-btn:active { transform: none; }
  .skill-card-footer .link-chip:hover, .skill-card-footer .link-chip:active { transform: none; }
  .hero-subtitle-block:hover, .explore-title-block:hover { transform: none; }
  html { scroll-behavior: auto !important; }
}
/* 移动端适配（< 640px） */
@media (max-width: 639px) {
  .hero-title-block h1 { font-size: 1.625rem !important; }
  .hero-title-block h2 { font-size: 1.25rem !important; white-space: normal !important; }
  .hero-actions-grid { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .hero-actions-grid .hero-action-btn { padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; min-height: 40px !important; }
  .hero-weekly-picks { padding: 1rem 1.25rem !important; }
  .hero-weekly-picks h2 { font-size: 1rem !important; }
  #featured-skills-strip { overflow: hidden; }
  #featured-skills-scroll { padding-left: 8px !important; padding-right: 8px !important; }
  #skills-list-root .skill-card .skill-card-inner { padding: 1rem !important; }
  .skill-card-footer .link-chip { font-size: 0.6875rem !important; padding: 0.25rem 0.5rem !important; }
  .daily-pick-card { padding: 1rem 1rem 0.875rem !important; }
  .daily-pick-card .dp-rank { width: 1.25rem !important; height: 1.25rem !important; font-size: 0.5625rem !important; }
  #bottom-green-actions { margin-top: 2rem !important; margin-bottom: 3rem !important; }
  #bottom-green-actions > div { padding: 1.5rem !important; }
}
/* 超小屏幕（< 375px） */
@media (max-width: 374px) {
  .hero-title-block h1 { font-size: 1.375rem !important; }
  .hero-title-block h2 { font-size: 1.125rem !important; }
  .hero-actions-grid { grid-template-columns: 1fr !important; }
  .skills-tab-btn { padding: 0.375rem 0.625rem !important; font-size: 0.75rem !important; min-height: 36px !important; min-width: 36px !important; }
}

/* 字体 display=swap 异步加载，页面直接可见 */
body.sa-fonts-ready { opacity: 1; }