/* ==========================================================================
   Typecho Note - components.css (Final Perfect Version)
   ========================================================================== */

/* 1. Main Content & Pagination */
.post { padding: 15px 0 0 0; border-bottom: 1px solid var(--border-color); }
.post-title { margin: .83em 0; font-size: 1.4em; color: var(--text-color); }
.post-meta { margin-top: -0.5em; padding: 0; color: var(--text-color); opacity: 0.6; font-size: .92857em; }
.post-meta li { display: inline-block; margin: 0 8px 0 0; padding-left: 12px; border-left: 1px solid var(--border-color); }
.post-meta li:first-child { margin-left: 0; padding-left: 0; border: none; }
.post-content { line-height: 1.8; color: var(--text-color); }
.post .tags { clear: both; }
.post-near { list-style: none; margin: 30px 0; padding: 0; color: var(--text-color); opacity: 0.6; font-size: 14px !important; line-height: 1.6 !important; }
.post-near li { margin: 10px 0; }
.post-near a { color: var(--accent-color) !important; font-size: 14px !important; }
.post-near a:hover { color: var(--text-color) !important; }
.archive-title { margin: 1em 0 -1em; padding-top: 20px; color: var(--text-color); opacity: 0.6; font-size: 1em; }
.more { text-align: center; }
.more a { border: none; }
.protected .text { width: 50%; }
.page-navigator { list-style: none; margin: 25px 0; padding: 0; text-align: center; }
.page-navigator li { display: inline-block; margin: 0 4px; }
.page-navigator a { display: inline-block; padding: 0 10px; height: 30px; line-height: 30px; color: var(--text-color); }
.page-navigator a:hover { background: var(--card-bg); text-decoration: none; }
.page-navigator .current a { color: var(--text-color); background: var(--card-bg); }

/* 2. Table */
table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; margin-bottom: 16px !important; border: none !important; box-shadow: 0 0 0 2px var(--table-border) !important; border-radius: 6px !important; font-size: 15px !important; display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
table th, table td { padding: 12px 16px !important; border: none !important; vertical-align: middle !important; box-shadow: 1px 0 0 0 var(--table-border), 0 1px 0 0 var(--table-border) !important; white-space: nowrap !important; word-break: keep-all !important; }
table tr > *:last-child { box-shadow: 0 1px 0 0 var(--table-border) !important; }
table th { background-color: var(--table-header-bg) !important; font-weight: 600 !important; text-align: center !important; color: var(--code-text) !important; }
table tbody tr:hover { background-color: var(--table-hover-bg) !important; }
table td code { background-color: var(--table-hover-bg) !important; color: var(--code-text) !important; padding: 3px 6px !important; border-radius: 6px !important; font-family: monospace !important; font-size: 85% !important; }
table tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.025) !important; }
html[data-mode="dark"] table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03) !important; }

/* 3. Code & Content */
pre { background-color: var(--code-bg) !important; padding: 16px !important; border-radius: 6px !important; overflow: auto !important; white-space: pre-wrap !important; word-wrap: break-word !important; }
pre code { background-color: transparent !important; padding: 0 !important; color: var(--code-text) !important; white-space: pre-wrap !important; word-wrap: break-word !important; font-size: .92857em !important; }
blockquote { margin: 1em 0; padding-left: 1.5em; border-left: 4px solid var(--border-color); color: var(--text-color); opacity: 0.85; }
h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif; color: var(--text-color); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { padding: 5px; border: 1px solid var(--border-color); width: 100%; border-radius: 2px; box-sizing: border-box; background: var(--bg-color); color: var(--text-color); }
textarea { resize: vertical; }
.post-meta a, .post-content a, .widget a, .comment-content a { border-bottom: 1px solid var(--border-color); }
.post-meta a:hover, .post-content a:hover, .widget a:hover, .comment-content a:hover { border-bottom-color: transparent; }
.post-content p, .post-content li, .post-content blockquote, .post-content h2, .post-content h3 { font-size: 16px !important; line-height: 1.8 !important; }
@media (max-width: 767px) { .post-content p, .post-content li { font-size: 16px !important; } }

/* 4. Details Panel */
details { position: relative; background-color: rgba(0, 0, 0, 0.025) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; padding: 12px 16px !important; margin-bottom: 16px !important; }
details::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background-color: var(--accent-color); border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
details details { background-color: rgba(0, 0, 0, 0.02) !important; border: 1px solid var(--border-color) !important; border-radius: 6px !important; padding: 10px 14px !important; margin-top: 15px !important; margin-bottom: 10px !important; }
details details::before { width: 3px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
html[data-mode="dark"] details { background-color: rgba(255, 255, 255, 0.03) !important; }
html[data-mode="dark"] details details { background-color: rgba(255, 255, 255, 0.02) !important; }
details summary { cursor: pointer; font-weight: 600 !important; color: var(--text-color) !important; outline: none; list-style: none; user-select: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "\25B6"; font-size: 0.7em; color: var(--accent-color) !important; display: inline-block; margin-right: 8px; transition: transform 0.2s ease; }
details[open] > summary::before { transform: rotate(90deg); }

.details-primary::before { background-color: var(--accent-color) !important; } .details-primary > summary::before { color: var(--accent-color) !important; }
.details-success::before { background-color: #198754 !important; } .details-success > summary::before { color: #198754 !important; } .details-success { background-color: rgba(25, 135, 84, 0.05) !important; } html[data-mode="dark"] .details-success::before { background-color: #34d399 !important; } html[data-mode="dark"] .details-success > summary::before { color: #34d399 !important; }
.details-danger::before { background-color: #dc3545 !important; } .details-danger > summary::before { color: #dc3545 !important; } .details-danger { background-color: rgba(220, 53, 69, 0.05) !important; } html[data-mode="dark"] .details-danger::before { background-color: #f87171 !important; } html[data-mode="dark"] .details-danger > summary::before { color: #f87171 !important; }
.details-warning::before { background-color: #ffc107 !important; } .details-warning > summary::before { color: #ffc107 !important; } .details-warning { background-color: rgba(255, 193, 7, 0.05) !important; } html[data-mode="dark"] .details-warning::before { background-color: #fbbf24 !important; } html[data-mode="dark"] .details-warning > summary::before { color: #fbbf24 !important; }
.details-info::before { background-color: #0dcaf0 !important; } .details-info > summary::before { color: #0dcaf0 !important; } .details-info { background-color: rgba(13, 202, 240, 0.05) !important; } html[data-mode="dark"] .details-info::before { background-color: #22d3ee !important; } html[data-mode="dark"] .details-info > summary::before { color: #22d3ee !important; }
.details-secondary::before { background-color: #6c757d !important; } .details-secondary > summary::before { color: #6c757d !important; } .details-secondary { background-color: rgba(108, 117, 125, 0.05) !important; } html[data-mode="dark"] .details-secondary::before { background-color: #94a3b8 !important; } html[data-mode="dark"] .details-secondary > summary::before { color: #94a3b8 !important; }
.details-dark::before { background-color: #212529 !important; } .details-dark > summary::before { color: #212529 !important; } .details-dark { background-color: rgba(33, 37, 41, 0.05) !important; } html[data-mode="dark"] .details-dark::before { background-color: #ffffff !important; } html[data-mode="dark"] .details-dark > summary::before { color: #ffffff !important; }
.details-purple::before { background-color: #7c3aed !important; } .details-purple > summary::before { color: #7c3aed !important; } .details-purple { background-color: rgba(124, 58, 237, 0.05) !important; } html[data-mode="dark"] .details-purple::before { background-color: #a78bfa !important; } html[data-mode="dark"] .details-purple > summary::before { color: #a78bfa !important; }
.details-pink::before { background-color: #db2777 !important; } .details-pink > summary::before { color: #db2777 !important; } .details-pink { background-color: rgba(219, 39, 119, 0.05) !important; } html[data-mode="dark"] .details-pink::before { background-color: #f472b6 !important; } html[data-mode="dark"] .details-pink > summary::before { color: #f472b6 !important; }
.details-orange::before { background-color: #ea580c !important; } .details-orange > summary::before { color: #ea580c !important; } .details-orange { background-color: rgba(234, 88, 12, 0.05) !important; } html[data-mode="dark"] .details-orange::before { background-color: #fb923c !important; } html[data-mode="dark"] .details-orange > summary::before { color: #fb923c !important; }

/* 5. LivePhoto */
.live-photo { position: relative; overflow: hidden; cursor: pointer; user-select: none !important; -webkit-user-select: none !important; -webkit-tap-highlight-color: transparent; touch-action: pan-y pinch-zoom; border-radius: 6px; }
.live-photo-img, .live-photo-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform-origin: center center; border-radius: 6px; user-select: none; }
.live-photo-img { z-index: 2; opacity: 1; transform: scale(1); transition: opacity 0.3s linear, transform 0.3s linear; }
.live-photo-video { z-index: 1; transform: scale(1); transition: transform 0.3s linear; }
.live-photo.is-playing .live-photo-img { opacity: 0; transform: scale(1.08); }
.live-photo.is-playing .live-photo-video { transform: scale(1.08); }
.live-photo-badge { position: absolute; top: 12px; left: 12px; z-index: 20; display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); padding: 2px 8px 2px 2px; border-radius: 5px; pointer-events: none; }
.live-photo-icon { width: 20px; height: 20px; position: relative; }
.live-photo-icon-svg { width: 100%; height: 100%; display: block; }
.live-photo-text { font-size: 12px; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 500; letter-spacing: 0.5px; color: #000; line-height: 1; margin-top: 1px; }
.post-list .live-photo-wrapper, .archive-list .live-photo-wrapper { display: block; width: 100%; height: auto; overflow: hidden; background: #000; }
.post-list .live-photo-wrapper img, .post-list .live-photo-wrapper video, .archive-list .live-photo-wrapper img, .archive-list .live-photo-wrapper video { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; }

/* 6. Index Grid */
.card-overlay { z-index: 1; }
.post-author a, .post-meta-details a, .post-meta-details span a { position: relative; z-index: 3; }
.post-images[data-count="1"] { grid-template-columns: 1fr; }
.post-images[data-count="1"] img { max-height: 300px; width: auto; margin: 0 auto; }
.post-images[data-count="1"] .live-photo { width: 100%; height: auto; }
.post-images[data-count="2"] { grid-template-columns: 1fr 1fr; }
.post-images[data-count="2"] img, .post-images[data-count="2"] .live-photo { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.post-images[data-count="3"], .post-images[data-count="5"], .post-images[data-count="6"], .post-images[data-count="7"], .post-images[data-count="8"], .post-images[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
.post-images[data-count="3"] img, .post-images[data-count="3"] .live-photo, .post-images[data-count="5"] img, .post-images[data-count="5"] .live-photo, .post-images[data-count="6"] img, .post-images[data-count="6"] .live-photo, .post-images[data-count="7"] img, .post-images[data-count="7"] .live-photo, .post-images[data-count="8"] img, .post-images[data-count="8"] .live-photo, .post-images[data-count="9"] img, .post-images[data-count="9"] .live-photo { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.post-images[data-count="4"] { grid-template-columns: 1fr 1fr; }
.post-images[data-count="4"] img, .post-images[data-count="4"] .live-photo { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .post-images { max-width: 100% !important; margin-left: 0 !important; }
  .post-excerpt { padding: 0 16px 0 16px !important; }
  .post-header { flex-wrap: wrap; }
}

/* ==========================================================================
   7. Header Layout (Ultimate Compact Version)
   ========================================================================== */

/* --- PC端整体布局 --- */
#header {
  padding: 25px 0 0 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-color);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; 
  position: relative;
}

.header-left {
  display: flex;
  flex-direction: column;
}

/* --- 单行排列：Logo + 标题 + 导航 --- */
.nav-row {
  display: flex;
  align-items: baseline; 
  gap: 30px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-color);
}

.site-logo img {
  max-height: 32px !important;
  width: auto !important;
}

.site-title {
  font-size: 1.3em;
  font-weight: 600;
}

#nav-menu {
  display: flex;
  gap: 20px;
}

#nav-menu a {
  float: none !important;
  padding: 5px 0 !important;
  border: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  color: var(--text-color) !important;
  opacity: 0.7;
  font-size: 15px;
  transition: opacity 0.2s;
}

#nav-menu a:hover, #nav-menu a.current {
  opacity: 1;
  background: transparent !important;
  font-weight: bold;
  border-bottom: 2px solid var(--accent-color) !important;
}

/* 描述 */
.description {
  margin: 12px 0 15px 0 !important;
  font-size: 13px !important; 
  color: var(--text-color) !important;
  opacity: 0.6 !important;
  line-height: 1.5;
}

/* --- 右侧搜索和按钮 --- */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 18px;
}

#search { width: 240px; margin: 0 0 10px 0; }
#search input {
  width: 100%; height: 32px; padding: 0 12px;
  border: 1px solid var(--border-color); border-radius: 6px;
  background: var(--bg-color); color: var(--text-color);
  font-size: 13px; box-sizing: border-box;
}

.desktop-theme-switcher { display: flex; gap: 8px; }

.theme-opt {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; opacity: 0.6; transition: opacity 0.2s; padding: 0;
}
.theme-opt:hover, .theme-opt.active { opacity: 1; }


/* ==========================================================================
 * Mobile (<=768px)
 * ========================================================================== */
@media (max-width: 768px) {
  
  /* 隐藏电脑端元素 */
  .desktop-search-box, .description { 
    display: none !important; 
  }

  /* 头部吸顶 */
  #header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; width: 100% !important;
    z-index: 99999 !important;
    padding: 12px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  body { padding-top: 60px !important; }

  /* 整个头部的容器 */
  .header-container {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    position: relative;
  }

  /* 左侧区域：取消撑满 */
  .header-left {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    flex: none !important;
  }

  /* 第一行：图标和导航在一行 */
  .nav-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 隐藏文字 HB，只留图标 */
  .site-title { display: none !important; }
  .site-logo img { max-height: 24px !important; display: block !important; }

  /* 🌟 导航菜单：靠左，16px，加粗 */
  #nav-menu {
    display: flex !important;
    justify-content: flex-start !important; 
    gap: 15px !important; 
    width: auto !important; 
    margin: 0 !important; 
    padding: 0 !important;
    float: none !important;
  }

  #nav-menu a {
    font-size: 16px !important; /* 正文字号 */
    font-weight: 500 !important; /* 中等字重 */
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    color: var(--text-color) !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
  }
  
  /* 🌟 选中和悬浮状态：强制加粗 */
  #nav-menu a:hover, #nav-menu a.current {
    font-weight: 700 !important;
    opacity: 1 !important;
    color: var(--accent-color) !important;
    border-bottom: none !important;
  }

  /* 移动端主题球：绝对定位在右上角 */
  .mobile-theme-switcher {
    display: block !important;
    position: absolute !important;
    right: 15px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
  }
  
  .mobile-theme-toggle {
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
  }

  /* 移动端下拉菜单 */
  .mobile-theme-menu {
    display: none;
    position: absolute !important;
    top: 100% !important; right: 0 !important;
    margin-top: 10px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    width: 110px !important;
    padding: 4px 0 !important;
  }
  .mobile-theme-menu.open { display: block !important; }
  
  .theme-opt-mobile {
    display: block !important; width: 100% !important;
    padding: 10px 16px !important; text-align: left !important;
    background: transparent !important; border: none !important;
    color: var(--text-color) !important; cursor: pointer !important;
    font-size: 14px !important; white-space: nowrap !important;
  }
}

/* 桌面端隐藏移动端专属球 */
@media (min-width: 769px) {
  .mobile-theme-switcher, .mobile-theme-menu { 
    display: none !important; 
  }
}