/*
 * 设计语言参考 base.md 中的 "html模板"
 * 第1次美化：极客风+简约，增加网格装饰、搜索、徽章、SVG箭头与微交互
 */

.container { width: 100%; max-width: 100%; margin: 0 auto; padding: 8px 4px 16px 4px; box-sizing: border-box; position: relative; z-index: 1; }

/* 顶部大标题与网站目的（Masthead） */
.masthead {
  position: relative; z-index: 1; margin: 8px 0 12px 0; 
  padding: 16px 16px 14px 90px;
  border-radius: 14px; border: 1px solid transparent; overflow: hidden;
  background-image:
    var(--masthead-overlay),
    var(--masthead-radial),
    var(--masthead-bg);
  background-clip: padding-box, padding-box, padding-box;
  box-shadow: var(--masthead-shadow);
}
.masthead .site-title {
  font-size: 26px; font-weight: 800; letter-spacing: .6px;
  margin: 0 0 6px 0; display:flex; align-items:center; gap:10px;
  position: relative; padding-left: 28px;
  min-height: 34px;
}
.masthead .site-title .github-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--interactive-hover-bg); color: var(--site-subtitle);
  transition: all 0.2s ease; text-decoration: none;
}
[data-theme="light"] .masthead .site-title .github-link {
  background: var(--interactive-hover-bg); color: var(--site-subtitle);
}
.masthead .site-title .github-link:hover {
  background: var(--brand-primary-strong); color: var(--interactive-hover-text);
  transform: translateY(-1px);
}
[data-theme="light"] .masthead .site-title .github-link:hover {
  background: var(--interactive-hover-bg); color: var(--interactive-hover-text);
}
.masthead .site-title .github-link svg {
  width: 20px; height: 20px;
}
/* 导览页 brand 图标 */
.masthead .site-title::before {
  content: "";
  position: absolute; left: -78px; top: 0; bottom: 0; width: 32px;
  border-radius: 8px;
  background-image: url('brand/cheatsheet.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.18));
  width: 90px;
  height: 90px;
}

@media (max-width: 650px) {
 .masthead .site-title::before { display: none; }

 .masthead{
  padding: 6px; 
  margin: 0;
  margin-bottom: 12px;
  display: flex; flex-direction: column;
  gap: 8px;
 }
 .site-title,.subtitle,.shortcuts{
    margin: 0 !important;
    padding-left: 0px !important;
 }
}
.masthead .site-title .grad-text { background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .masthead .site-title .grad-text { background: var(--title-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.masthead .subtitle { font-size: 13px; color: var(--masthead-subtitle); opacity: .95; margin: 0 0 10px 28px; }
.masthead .purpose { display:flex; flex-wrap:wrap; gap: 8px 10px; margin-left: 28px; }
/* 快捷键说明 Banner */
.shortcuts { display:flex; flex-wrap:wrap; gap: 4px; margin-left: 28px; align-items: center; }
.key-chip { 
  display:inline-flex; align-items:center; gap:6px; padding: 4px;
  border-radius: 6px; 
  background: color-mix(in srgb, var(--brand-secondary) 12%, transparent);
  color: var(--brand-secondary);
  font-weight: 600; font-size: 13px; 
}
[data-theme="light"] .key-chip {
  background: color-mix(in srgb, var(--brand-secondary) 10%, white);
  color: var(--brand-secondary);
}
.key-chip kbd {
  background: var(--interactive-muted-bg-strong); color: var(--interactive-hover-text); padding: 2px; border-radius: 4px;
  font-family: Consolas, monospace; font-size: 12px; border: 1px solid color-mix(in srgb, var(--brand-secondary) 42%, transparent);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
[data-theme="light"] .key-chip kbd {
  background: var(--interactive-muted-bg-strong); color: var(--interactive-hover-text); border: 1px solid color-mix(in srgb, var(--brand-secondary) 30%, transparent);
}
.chip { display:inline-flex; align-items:center; gap:6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--interactive-muted-border); background: var(--interactive-muted-bg); color: var(--interactive-muted-text); font-weight: 600; font-size: 12px; }
/* 版本号徽标：紧随站点名显示 */
.ver-chip { display:inline-flex; align-items:center; margin-left: auto; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--interactive-muted-border); background:var(--interactive-muted-bg); color:var(--site-subtitle); font-weight:600; font-size:12px; line-height:1; }
[data-theme="light"] .ver-chip {
  background: var(--interactive-muted-bg); color: var(--brand-primary); border: 1px solid var(--interactive-muted-border);
}
.chip svg { width: 14px; height: 14px; }
.masthead .decor { position:absolute; right: -40px; top: -40px; width: 220px; height: 220px; opacity:.18; filter: blur(0.2px); }

.panel {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border-radius: 12px;
  /* Flat 风格：无边框无阴影 */
  border: none; box-shadow: none;
  padding: 10px 14px; margin-bottom: 12px;
  backdrop-filter: blur(6px);
}
.brand { display:flex; align-items:center; gap:8px; margin-right:auto; }
.brand svg { width: 18px; height: 18px; filter: drop-shadow(0 0 6px var(--glow)); }
.brand .title { color: var(--accent); font-size: 16px; letter-spacing: 0.2px; font-weight: 600; }
.brand .note { color: var(--site-subtitle); font-size: 12px; opacity: .9; }
[data-theme="light"] .brand .note { color: var(--site-subtitle); }

.panel label { font-size: 1em; color: var(--panel-text); font-weight: 700; letter-spacing: 0.2px; }
.panel .sep { width:1px; height:20px; background: var(--line-muted); opacity:.9; }
[data-theme="light"] .panel .sep { background: var(--line-muted); }
.slider-bar { min-width: 120px; margin-right: 4px; }
.slider-val { color: var(--accent-2); font-size: 1em; margin-left: 4px; min-width: 28px; display: inline-block; font-weight: 600; }
.search { min-width: 200px; max-width: 320px; width: 22vw; padding: 6px 10px; border-radius: 8px; border: none; background:var(--input-bg); color:var(--input-text); }
.search::placeholder { color:var(--input-placeholder) }
.btn { cursor: pointer; padding: 6px 10px; border-radius: 8px; border: none; background:var(--input-bg); color:var(--input-text); }
.toggle { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); font-weight:600; }
.toggle-group { gap: 8px; }
.toggle input { accent-color: var(--text-link); }
.stats { color:var(--text-link); font-weight:600; }
.presets { display:inline-flex; gap:6px; }
.preset { cursor:pointer; padding:4px 8px; border-radius:999px; border:1px solid var(--interactive-muted-border); background:var(--input-bg); color:var(--text-primary); }
[data-theme="light"] .preset { border: 1px solid var(--interactive-muted-border); }
.preset:hover { border-color:var(--text-link); }
.segmented-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--input-bg);
}
.segmented-toggle__btn {
  cursor: pointer;
  padding: 5px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--input-text);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.segmented-toggle__btn:hover {
  background: var(--interactive-hover-bg);
  color: var(--interactive-hover-text);
}
.segmented-toggle__btn.is-active {
  background: var(--brand-primary-strong);
  color: var(--interactive-hover-text);
}

/* 导览页瀑布流：保持从左到右、从上到下的阅读顺序 */
.cheat-columns {
  --col-width: 340px;
  --masonry-row: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-width)), 1fr));
  grid-auto-flow: row;
  grid-auto-rows: var(--masonry-row);
  gap: 16px;
  margin-top: 12px;
  align-items: start;
  transition: grid-template-columns 0.2s ease;
}
@media (max-width: 1100px) {
  .cheat-columns {
    gap: 12px;
  }
}

.card {
  position: relative;
  background: var(--card); border-radius: 12px;
  /* Flat 风格：无边框无阴影 */
  border: 1px solid var(--card-border); 
  box-shadow: var(--card-shadow); 
  backdrop-filter: blur(2px);
  margin: 0;
  padding: 14px 14px 10px 14px;
  box-sizing: border-box;
  /* 确保底部 bar 不溢出圆角 */
  overflow: hidden;
  height: max-content;
}
.card-layout {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.card-icon-slot {
  width: 88px;
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.card-content {
  min-width: 0;
}

/* --- 卡片新旧程度指示器 (Recency Indicator) --- */
:root {
  --recency-old-color: #475569; /* slate-600 */
  --recency-new-color: var(--brand-secondary); /* #2dd4bf - teal */
}
[data-theme="light"] {
  --recency-old-color: #94a3b8; /* slate-400 */
  --recency-new-color: var(--brand-secondary); /* #0f766e - dark teal */
}

.card-recency-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--recency-progress, 18%);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--brand-primary) 90%, white 10%) 0%,
      color-mix(in srgb, var(--brand-secondary) 82%, white 18%) 52%,
      color-mix(in srgb, var(--accent) 88%, white 12%) 100%
    );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--brand-secondary) 38%, transparent),
    0 0 18px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  transition: width 0.3s ease, opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  filter: saturate(calc(0.8 + var(--recency-ratio, 0) * 0.5));
}

[data-theme="light"] .card-recency-bar {
  background:
    linear-gradient(
      90deg,
      #2563eb 0%,
      #0ea5e9 38%,
      #06b6d4 68%,
      #14b8a6 100%
    );
  box-shadow:
    0 0 8px rgba(14, 165, 233, 0.18),
    0 0 14px rgba(20, 184, 166, 0.12);
}

.card-recency-track {
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--recency-old-color) 55%, transparent),
      color-mix(in srgb, var(--recency-old-color) 18%, transparent)
    );
  border: 1px solid color-mix(in srgb, var(--brand-secondary) 14%, transparent);
}

[data-theme="light"] .card-recency-track {
  background:
    linear-gradient(
      90deg,
      rgba(37, 99, 235, 0.12),
      rgba(6, 182, 212, 0.06)
    );
  border-color: rgba(14, 165, 233, 0.14);
}

.card[data-recency="unknown"] .card-recency-track {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--recency-old-color) 38%, transparent),
      color-mix(in srgb, var(--recency-old-color) 12%, transparent)
    );
}

.card[data-recency="unknown"] .card-recency-bar {
  width: 18%;
  opacity: 0.24;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--recency-old-color) 85%, transparent),
      color-mix(in srgb, var(--brand-secondary) 18%, transparent)
    );
  box-shadow: none;
}

[data-theme="light"] .card[data-recency="unknown"] .card-recency-bar {
  background:
    linear-gradient(
      90deg,
      rgba(37, 99, 235, 0.38),
      rgba(20, 184, 166, 0.18)
    );
}

.card[data-recency="valid"] .card-recency-bar {
  opacity: 0.96;
}

.card:hover .card-recency-track {
  height: 8px;
}

.card:hover .card-recency-bar {
  opacity: 1;
  transform: translateZ(0);
  filter: saturate(calc(1 + var(--recency-ratio, 0) * 0.6));
}
/* 取消左侧高亮条，保留纯平整洁 */
.card::before{ display:none; }
.card:hover { box-shadow: var(--card-shadow); }
.card h2 { margin: -2px 0 6px 0; padding-right: 58px; font-size: 15px; font-weight: 700; color: var(--title); letter-spacing: 0.6px; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.card h2 .link { color: var(--link); font-weight: 700; display: inline-flex; align-items:center; gap:4px; }
/* 标题可点击：淡淡下划线，悬停更明显 */
.card h2 .title-link { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 34%, transparent); text-underline-offset: 2px; }
[data-theme="light"] .card h2 .title-link { text-decoration-color: color-mix(in srgb, var(--link) 20%, transparent); }
.card h2 .title-link:hover { text-decoration-color: color-mix(in srgb, var(--link) 70%, transparent); }
[data-theme="light"] .card h2 .title-link:hover { text-decoration-color: color-mix(in srgb, var(--link) 58%, transparent); }
.card .desc { color: var(--desc); margin: 2px 0 2px 0; font-size: 1em; line-height: 1.2; }
.icon { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; display: block; flex: 0 0 auto; }
.card-icon-slot .icon,
.card-icon-slot svg.icon {
  width: 72px;
  height: 72px;
}
/* 元信息（版本/更新日志/GitHub） */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 4px 0 6px 0;
  font-size: 12px;
  color: var(--desc);
}
.card-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
}
.card-meta .meta-chip b {
  color: var(--meta-text);
  font-weight: 700;
}
.card-meta .meta-link { color: var(--link); text-decoration: none; }
.card-meta .meta-link:hover { text-decoration: underline; }
/* 移除本地/导入标签（不再使用） */
.copy { position:absolute; right:8px; top:8px; opacity:.85; }
.copy button { background:transparent; border:none; color:var(--input-placeholder); border-radius:8px; padding:4px 6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.copy button:hover { color:var(--text-link); }

@media (max-width: 560px) {
  .card-layout {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }
  .card-icon-slot {
    width: 64px;
    min-height: 64px;
  }
  .icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }
  .card-icon-slot .icon,
  .card-icon-slot svg.icon {
    width: 56px;
    height: 56px;
  }
}

/* 返回顶部按钮 */
#backTop { position: fixed; right: 18px; bottom: 18px; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
#backTop button { background:var(--input-bg); color:var(--text-primary); border:none; border-radius:999px; padding:10px; display:flex; align-items:center; justify-content:center; box-shadow: none; border: 1px solid var(--card-border); }
#backTop.show { opacity: 0.95; pointer-events: auto; }

/* 卡片高亮样式 */
.card-highlight {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--glow);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition: all 0.2s ease;
}
[data-theme="light"] .card-highlight {
  background: color-mix(in srgb, var(--accent) 6%, white);
}

/* 降噪：动效可选 */
@media (prefers-reduced-motion: reduce) {
  .cheat-columns { transition: none; }
  .card:hover { box-shadow: 0 2px 12px 1px rgba(0,0,0,0.18); }
}