/* ============================================================
   Sakurumii · skm-nav.css
   firefly 导航栏配套浮层：迷你播放器 / 搜索 / 用户 / 主题色相
   依赖 layout.css（firefly 组件与 Tailwind 工具类）
   ============================================================ */

/* ---------------- 固定导航下的内容偏移 ---------------- */
.layout { padding-top: calc(4.5rem + 2.25rem); }
.stats-wrap { padding-top: calc(4.5rem + 2.25rem); }

/* ---------------- 导航按钮通用 ---------------- */
.nav-actions .skm-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text, #333);
  transition: transform 0.15s, background-color 0.15s, color 0.15s;
}
.nav-actions .skm-nav-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--red); }
.dark .nav-actions .skm-nav-btn { color: #e5e5e5; }
.dark .nav-actions .skm-nav-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--red-2); }
.nav-actions .skm-nav-btn svg { width: 1.25rem; height: 1.25rem; }
.nav-actions .skm-nav-btn:active { transform: scale(0.9); }

/* 汉堡三条杠（与 www 同款结构） */
.skm-burger { display: flex; flex-direction: column; justify-content: center; gap: 0.28rem; }
.skm-burger span {
  display: block;
  width: 1.15rem;
  height: 0.125rem;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
}
#nav-menu-switch.active .skm-burger span:nth-child(1) { transform: translateY(0.405rem) rotate(45deg); }
#nav-menu-switch.active .skm-burger span:nth-child(2) { opacity: 0; }
#nav-menu-switch.active .skm-burger span:nth-child(3) { transform: translateY(-0.405rem) rotate(-45deg); }

/* ---------------- 品牌菜单 / 通用浮层选项 ---------------- */
.float-panel .skm-dd-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0.25rem;
  padding: 0 0.75rem;
  height: 2.5rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.float-panel .skm-dd-item svg { width: 1.05rem; height: 1.05rem; opacity: 0.7; flex: none; }
.float-panel .skm-dd-item:hover, .float-panel .skm-dd-item.active {
  background: color-mix(in srgb, var(--primary, #4b77be) 12%, transparent);
  color: var(--primary, #4b77be);
}
.float-panel .skm-dd-item.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.float-panel .skm-dd-sep { height: 1px; margin: 0.35rem 0.75rem; background: var(--border, #eee); }

/* ---------------- 用户区 ---------------- */
#skm-user-btn { max-width: 11rem; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
#skm-user-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skm-user-btn .skm-user-dot {
  width: 1.55rem; height: 1.55rem; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red-2), var(--red));
  color: #fff; font-size: 0.72rem; font-weight: 700;
}
#skm-user-btn .skm-user-dot svg { width: 0.9rem; height: 0.9rem; }

/* ---------------- 主题模式 / 色相面板 ---------------- */
.skm-panel-title {
  padding: 0.25rem 0.75rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted, #9aa0a6);
}
.skm-hue-row { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.75rem 0.4rem; }
#skm-hue { flex: 1; height: 1.1rem; accent-color: var(--primary, #4b77be); cursor: pointer; }
.skm-hue-val { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--text-2, #666); min-width: 2.6em; text-align: right; }
.skm-hue-presets { display: flex; gap: 0.5rem; padding: 0.35rem 0.75rem 0.55rem; }
.skm-hue-presets button {
  width: 1.5rem; height: 1.5rem;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.skm-hue-presets button:hover { transform: scale(1.15); }
.skm-hue-presets button.active { border-color: var(--text, #333); }

/* ---------------- 迷你音乐播放器（music-nav-panel） ---------------- */
.npm { width: 17.5rem; }
.npm-now { display: flex; align-items: center; gap: 0.7rem; }
.npm-cover {
  width: 3rem; height: 3rem; flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.dark .npm-cover { border-color: rgba(255, 255, 255, 0.18); }
.npm-cover.spinning { animation: skm-spin 9s linear infinite; }
@keyframes skm-spin { to { transform: rotate(360deg); } }
.npm-meta { min-width: 0; flex: 1; }
.npm-name { font-weight: 700; font-size: 0.92rem; color: var(--text, #333); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .npm-name { color: #e8e8ea; }
.npm-artist { font-size: 0.72rem; color: var(--muted, #9aa0a6); margin-top: 0.1rem; }
.npm-progress { margin-top: 0.7rem; height: 0.25rem; border-radius: 999px; background: rgba(120, 120, 130, 0.18); cursor: pointer; }
.npm-bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--red-2), var(--red)); }
.npm-time { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.68rem; font-variant-numeric: tabular-nums; color: var(--muted, #9aa0a6); }
.npm-ctrl { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.45rem; }
.npm-ctrl button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-2, #666);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.dark .npm-ctrl button { color: #b8bcc4; }
.npm-ctrl button:hover { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.npm-ctrl button:active { transform: scale(0.92); }
.npm-ctrl button svg { width: 1.05rem; height: 1.05rem; }
.npm-playbtn {
  width: 2.75rem !important; height: 2.75rem !important;
  background: linear-gradient(135deg, var(--red-2), var(--red)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--red) 38%, transparent);
}
.npm-playbtn:hover { filter: brightness(1.06); }
.npm-playbtn svg { width: 1.35rem !important; height: 1.35rem !important; }
.npm-playlist { margin-top: 0.55rem; border-top: 1px solid var(--border, #f0f0f2); padding-top: 0.45rem; max-height: 9.5rem; overflow-y: auto; }
.dark .npm-playlist { border-top-color: rgba(255, 255, 255, 0.08); }
.npm-pl-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-2, #666);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.dark .npm-pl-item { color: #b8bcc4; }
.npm-pl-item:hover { background: color-mix(in srgb, var(--red) 8%, transparent); }
.npm-pl-item.playing { color: var(--red); font-weight: 600; }
.npm-pl-item svg { width: 0.85rem; height: 0.85rem; flex: none; }

/* ---------------- 搜索浮层 ---------------- */
.skm-search-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding: 14vh 1rem 0; }
.skm-search-overlay[hidden] { display: none; }
.skm-search-mask { position: absolute; inset: 0; background: rgba(10, 14, 24, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.25s; }
.skm-search-box {
  position: relative;
  width: min(34rem, 100%);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--card, #fff) 94%, transparent);
  border: 1px solid var(--border, #f0f0f2);
  box-shadow: 0 24px 64px rgba(10, 16, 32, 0.22);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.8rem) scale(0.985);
  transition: opacity 0.22s, transform 0.22s;
}
.dark .skm-search-box { background: color-mix(in srgb, var(--card, #1f2127) 94%, transparent); border-color: rgba(255, 255, 255, 0.08); }
.skm-search-overlay.open .skm-search-mask { opacity: 1; }
.skm-search-overlay.open .skm-search-box { opacity: 1; transform: none; }
.skm-search-input-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--border, #f0f0f2); }
.dark .skm-search-input-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.skm-search-input-row > svg { width: 1.15rem; height: 1.15rem; color: var(--red); flex: none; }
#skm-search-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 0.98rem;
  color: var(--text, #333);
}
.dark #skm-search-input { color: #e6e6e9; }
#skm-search-input::placeholder { color: var(--muted, #9aa0a6); }
.skm-search-kbd {
  flex: none;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--border, #eee);
  border-radius: 0.4rem;
  font-size: 0.68rem;
  color: var(--muted, #9aa0a6);
}
.dark .skm-search-kbd { border-color: rgba(255, 255, 255, 0.1); }
.skm-search-results { max-height: 46vh; overflow-y: auto; padding: 0.45rem; }
.skm-search-item {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  transition: background-color 0.14s;
}
.skm-search-item:hover, .skm-search-item.cur { background: color-mix(in srgb, var(--red) 8%, transparent); }
.skm-search-item .si-title { font-size: 0.9rem; font-weight: 650; color: var(--text, #333); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .skm-search-item .si-title { color: #e6e6e9; }
.skm-search-item .si-sub { margin-top: 0.12rem; font-size: 0.72rem; color: var(--muted, #9aa0a6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skm-search-empty { padding: 1.6rem 0.75rem; text-align: center; font-size: 0.82rem; color: var(--muted, #9aa0a6); }

/* ---------------- firefly 抽屉内 skm 链接补充 ---------------- */
.mobile-links .mobile-link svg { color: var(--red); }

/* ---------------- 抽屉内主题模式（移动端明暗切换移入侧滑栏） ---------------- */
.mobile-theme { padding: 1.05rem 0.15rem 0.45rem; }
.mobile-theme .skm-panel-title { padding: 0 0 0.45rem; }
.mobile-theme-opts { display: flex; gap: 0.5rem; }
.mobile-theme-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--nav-fg-0, #333) 14%, transparent);
  border-radius: 0.65rem;
  background: transparent;
  color: var(--nav-fg-0, #333);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.mobile-theme-btn:active { transform: scale(0.95); }
.mobile-theme-btn.active {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 38%, transparent);
  color: var(--red);
}
.dark .mobile-theme-btn.active {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  border-color: color-mix(in srgb, var(--red-2) 45%, transparent);
  color: var(--red-2);
}

/* ---------------- 导航内「文章▾」下拉 ---------------- */
.nav-links .nav-dd { position: relative; display: flex; }
.nav-links .nav-dd > button.nav-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}
.nav-links .nav-dd .nav-dd-caret { margin-left: 0.1rem; opacity: 0.55; transition: transform 0.2s; }
#nav-posts-switch[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }

/* ---------------- 移动端隐藏导航栏明暗切换（已移入抽屉） ---------------- */
@media (max-width: 1023.98px) {
  #scheme-switch { display: none !important; }
}

/* ---------------- 内容页标题排版微调 ---------------- */
.col-main .card h1, .col-main .card h2, .col-main .card h3 { line-height: 1.35; }