/* 全局字体体系优化：针对 Windows、macOS 及多端中西文混排与清晰度优化 */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "Cascadia Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

pre,
code,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", "Cascadia Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* -------- calendar ------ */
.calendartop,
.calendar {
    width: 100%;
    text-align: center;
}

.calendartop {
    line-height: 1.6;
}

.calendar {
    line-height: 2;
}

.calendartop tbody tr:first-child td a {
    padding: .25em .65em;
}

.calendar tbody tr:first-child td {
    background-color: var(--color-text-1-light);
}

.calendar tbody tr:first-child td:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.calendar tbody tr:first-child td:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.calendar .day,
.calendar td a {
    position: relative;
    color: var(--color-theme-light);
}

.calendar td a {
    text-decoration: underline;
}

.calendar .day::after,
.calendar td a:hover::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
    border: 1px solid var(--color-theme-light);
    border-radius: 100%;
}

/* Captcha styles */
  .captcha-container {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .captcha {
    width: 6rem;
    height: 2.4rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .captcha_input {
    width: 8rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  
  .captcha_input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
  }

  html.dark .captcha_input {
    background-color: rgba(55, 65, 81, 0.8);
    border-color: #4b5563;
    color: #f3f4f6;
    caret-color: #f3f4f6;
  }

  html.dark .captcha_input::placeholder {
    color: #9ca3af;
  }

.icon-eye {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: no-repeat center/contain;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-comment {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: no-repeat center/contain;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.0001 8.517C8.58589 8.517 8.2501 8.85279 8.2501 9.267C8.2501 9.68121 8.58589 10.017 9.0001 10.017V8.517ZM16.0001 10.017C16.4143 10.017 16.7501 9.68121 16.7501 9.267C16.7501 8.85279 16.4143 8.517 16.0001 8.517V10.017ZM9.8751 11.076C9.46089 11.076 9.1251 11.4118 9.1251 11.826C9.1251 12.2402 9.46089 12.576 9.8751 12.576V11.076ZM15.1251 12.576C15.5393 12.576 15.8751 12.2402 15.8751 11.826C15.8751 11.4118 15.5393 11.076 15.1251 11.076V12.576ZM9.1631 5V4.24998L9.15763 4.25002L9.1631 5ZM15.8381 5L15.8438 4.25H15.8381V5ZM19.5001 8.717L18.7501 8.71149V8.717H19.5001ZM19.5001 13.23H18.7501L18.7501 13.2355L19.5001 13.23ZM18.4384 15.8472L17.9042 15.3207L17.9042 15.3207L18.4384 15.8472ZM15.8371 16.947V17.697L15.8426 17.697L15.8371 16.947ZM9.1631 16.947V16.197C9.03469 16.197 8.90843 16.23 8.79641 16.2928L9.1631 16.947ZM5.5001 19H4.7501C4.7501 19.2662 4.89125 19.5125 5.12097 19.6471C5.35068 19.7817 5.63454 19.7844 5.86679 19.6542L5.5001 19ZM5.5001 8.717H6.25012L6.25008 8.71149L5.5001 8.717ZM6.56175 6.09984L6.02756 5.5734H6.02756L6.56175 6.09984ZM9.0001 10.017H16.0001V8.517H9.0001V10.017ZM9.8751 12.576H15.1251V11.076H9.8751V12.576ZM9.1631 5.75H15.8381V4.25H9.1631V5.75ZM15.8324 5.74998C17.4559 5.76225 18.762 7.08806 18.7501 8.71149L20.2501 8.72251C20.2681 6.2708 18.2955 4.26856 15.8438 4.25002L15.8324 5.74998ZM18.7501 8.717V13.23H20.2501V8.717H18.7501ZM18.7501 13.2355C18.7558 14.0153 18.4516 14.7653 17.9042 15.3207L18.9726 16.3736C19.7992 15.5348 20.2587 14.4021 20.2501 13.2245L18.7501 13.2355ZM17.9042 15.3207C17.3569 15.8761 16.6114 16.1913 15.8316 16.197L15.8426 17.697C17.0201 17.6884 18.1461 17.2124 18.9726 16.3736L17.9042 15.3207ZM15.8371 16.197H9.1631V17.697H15.8371V16.197ZM8.79641 16.2928L5.13341 18.3458L5.86679 19.6542L9.52979 17.6012L8.79641 16.2928ZM6.2501 19V8.717H4.7501V19H6.2501ZM6.25008 8.71149C6.24435 7.93175 6.54862 7.18167 7.09595 6.62627L6.02756 5.5734C5.20098 6.41216 4.74147 7.54494 4.75012 8.72251L6.25008 8.71149ZM7.09595 6.62627C7.64328 6.07088 8.38882 5.75566 9.16857 5.74998L9.15763 4.25002C7.98006 4.2586 6.85413 4.73464 6.02756 5.5734L7.09595 6.62627Z" fill="black"/></svg>');
}
.icon-like {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: no-repeat center/contain;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 32" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10.5,8v2C9.122,10,8,11.121,8,12.5H6C6,10.019,8.019,8,10.5,8z"/><path d="M21.5,5c-2.116,0-4.093,0.881-5.5,2.406C14.593,5.881,12.616,5,10.5,5C6.364,5,3,8.333,3,12.5 C3,21.542,16,27,16,27s13-5.458,13-14.5C29,8.333,25.636,5,21.5,5z M16,24.797C13.378,23.521,5,18.938,5,12.5 C5,9.467,7.467,7,10.5,7c1.55,0,2.982,0.626,4.03,1.762l0.735,0.797h1.47l0.735-0.797C18.518,7.626,19.95,7,21.5,7 c3.033,0,5.5,2.467,5.5,5.5C27,18.938,18.622,23.521,16,24.797z"/></svg>');
}

#auth-modal button,
#auth-modal a,
#auth-modal [role="button"] {
    cursor: pointer;
}

#auth-modal button:disabled,
#auth-modal [role="button"][aria-disabled="true"] {
    cursor: not-allowed;
}

#auth-modal .auth-ext-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#auth-modal .auth-ext-container > * {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

#auth-modal .auth-ext-container img,
#auth-modal .auth-ext-container svg {
    display: inline-block;
    vertical-align: middle;
}

/* 文章内容行内代码高亮样式 */
.prose :not(pre) > code {
    background-color: rgba(244, 63, 94, 0.08) !important;
    color: #e11d48 !important;
    padding: 0.15em 0.4em !important;
    font-size: 0.875em !important;
    border-radius: 0.375rem !important;
    border: 1px solid rgba(244, 63, 94, 0.15) !important;
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", "Cascadia Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    word-break: break-word !important;
}

/* 去除 Tailwind Typography 默认行内代码的前后反引号 */
.prose :not(pre) > code::before,
.prose :not(pre) > code::after {
    content: "" !important;
}

/* 暗色模式下文章内容行内代码高亮样式 */
.dark .prose :not(pre) > code {
    background-color: rgba(251, 113, 133, 0.15) !important;
    color: #fda4af !important;
    border: 1px solid rgba(251, 113, 133, 0.25) !important;
}

/* 文章代码块样式优化 */
.prose pre {
    background-color: #0f172a !important; /* 经典深蓝黑背景 */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1rem !important;
    padding: 1.25rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

.prose pre code {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.875em !important;
    border-radius: 0 !important;
}

/* 优化文章内容 Markdown 中的 H1 到 H6 标题字体大小与间距，使其比例协调、依次递减 */
.prose h1 {
    font-size: 1.625rem !important; /* 26px */
    line-height: 1.35 !important;
    margin-top: 1.8em !important;
    margin-bottom: 0.8em !important;
    font-weight: 700 !important;
}
.prose h2 {
    font-size: 1.375rem !important; /* 22px */
    line-height: 1.4 !important;
    margin-top: 1.6em !important;
    margin-bottom: 0.7em !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    padding-bottom: 0.3em;
}
.dark .prose h2 {
    border-bottom-color: rgba(51, 65, 85, 0.6);
}
.prose h3 {
    font-size: 1.2rem !important; /* 19.2px */
    line-height: 1.45 !important;
    margin-top: 1.4em !important;
    margin-bottom: 0.6em !important;
    font-weight: 600 !important;
}
.prose h4 {
    font-size: 1.075rem !important; /* 17.2px */
    line-height: 1.45 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.5em !important;
    font-weight: 600 !important;
}
.prose h5 {
    font-size: 1.0rem !important; /* 16px */
    line-height: 1.5 !important;
    margin-top: 1.1em !important;
    margin-bottom: 0.4em !important;
    font-weight: 600 !important;
}
.prose h6 {
    font-size: 0.9rem !important; /* 14.4px */
    line-height: 1.5 !important;
    margin-top: 1.0em !important;
    margin-bottom: 0.4em !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

@media (max-width: 768px) {
    .prose h1 { font-size: 1.4rem !important; }
    .prose h2 { font-size: 1.25rem !important; }
    .prose h3 { font-size: 1.125rem !important; }
    .prose h4 { font-size: 1.05rem !important; }
    .prose h5 { font-size: 0.975rem !important; }
    .prose h6 { font-size: 0.875rem !important; }
}

/* 搜索背景容器：采用 CSS mask-image 透明度掩模，使背景图片直接从上至下平滑淡出，无任何脏色断层 */
.search-bg-container {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0) 100%);
}

.search-bg-gradient-bottom {
    display: none;
}

/* 收藏按钮组件及浅色/深色模式适配（极简中性克制配色） */
.btn-like {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 1.05rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    outline: none;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #334155;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.btn-like:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-like:active {
    transform: translateY(0);
}

.btn-like .like-icon {
    font-size: 0.95rem;
    color: #94a3b8;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

.btn-like:hover .like-icon {
    transform: scale(1.12);
    color: #ef4444;
}

.btn-like .like-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    border-radius: 9999px;
    font-size: 0.725rem;
    font-weight: 600;
    background-color: #f1f5f9;
    color: #64748b;
    transition: all 0.2s ease;
}

.btn-like:hover .like-badge {
    background-color: #e2e8f0;
    color: #334155;
}

/* 已收藏状态 (is-liked) */
.btn-like.is-liked {
    background-color: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a;
}

.btn-like.is-liked:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.btn-like.is-liked .like-icon {
    color: #ef4444;
}

.btn-like.is-liked .like-badge {
    background-color: #f1f5f9;
    color: #475569;
}

/* 深色模式适配 (.dark) */
.dark .btn-like {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.dark .btn-like:hover {
    background-color: #273549;
    border-color: #475569;
    color: #ffffff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

.dark .btn-like .like-icon {
    color: #64748b;
}

.dark .btn-like:hover .like-icon {
    color: #ef4444;
}

.dark .btn-like .like-badge {
    background-color: #334155;
    color: #94a3b8;
}

.dark .btn-like:hover .like-badge {
    background-color: #475569;
    color: #e2e8f0;
}

.dark .btn-like.is-liked {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.dark .btn-like.is-liked:hover {
    background-color: #273549;
    border-color: #475569;
}

.dark .btn-like.is-liked .like-icon {
    color: #ef4444;
}

.dark .btn-like.is-liked .like-badge {
    background-color: #334155;
    color: #cbd5e1;
}

/* 收藏心跳微动效 */
@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.25); }
    50% { transform: scale(0.96); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.btn-like.animate-heart .like-icon {
    animation: heartBeat 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 精致的文章页 Markdown 表格样式定制 */
/* 表格外部自适应横向滚动容器 */
.prose .table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
    background-color: transparent;
    -webkit-overflow-scrolling: touch;
}

:where(.dark) .prose .table-responsive,
.dark .prose .table-responsive {
    border-color: rgba(51, 65, 85, 0.7);
    background-color: rgba(15, 23, 42, 0.35);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

.prose .table-responsive table {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 基础表格样式（兼容直接输出或已包裹容器的表格） */
.prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0; /* 使用轻柔现代的浅灰边框 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02);
    overflow: hidden;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

:where(.dark) .prose table,
.dark .prose table {
    border-color: rgba(51, 65, 85, 0.7);
    background-color: rgba(15, 23, 42, 0.35);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

/* 表头样式 (Thead & Th) */
.prose thead {
    background-color: #f8fafc !important; /* 浅色模式优雅板岩浅灰背景 */
}

:where(.dark) .prose thead,
.dark .prose thead {
    background-color: rgba(30, 41, 59, 0.85) !important; /* 深色模式沉稳磨砂质感背景 */
}

.prose thead th {
    color: #1e3a8a !important; /* 浅色模式经典深蓝表头文字 */
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.875rem 1rem !important; /* 充裕舒适的内边距 */
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: center !important;
    letter-spacing: 0.02em;
}

:where(.dark) .prose thead th,
.dark .prose thead th {
    color: #93c5fd !important; /* 深色模式清爽浅蓝文字，呼应主题色系 */
    border-bottom-color: rgba(51, 65, 85, 0.8) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* 内容单元格样式 (Tbody & Td) */
.prose tbody td {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    text-align: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: #ffffff;
    transition: background-color 0.15s ease, color 0.15s ease;
}

:where(.dark) .prose tbody td,
.dark .prose tbody td {
    color: #cbd5e1 !important; /* 柔和浅白灰，长时间阅读不眩目 */
    border-bottom-color: rgba(51, 65, 85, 0.5) !important; /* 柔和暗色细线，告别刺眼白线 */
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: rgba(30, 41, 59, 0.35);
}

/* 移除最后一行 td 的底部边框，保持底部边缘干净 */
.prose tbody tr:last-child td {
    border-bottom: none !important;
}

/* 斑马纹交替背景 */
.prose tbody tr:nth-child(even) td {
    background-color: #f8fafc !important; /* 浅色模式偶数行冷灰背景 */
}

:where(.dark) .prose tbody tr:nth-child(even) td,
.dark .prose tbody tr:nth-child(even) td {
    background-color: rgba(15, 23, 42, 0.25) !important; /* 深色模式细腻交替深色 */
}

/* 鼠标悬停高亮效果 */
.prose tbody tr:hover td {
    background-color: #f1f5f9 !important;
}

:where(.dark) .prose tbody tr:hover td,
.dark .prose tbody tr:hover td {
    background-color: rgba(59, 130, 246, 0.08) !important; /* 深色模式下细腻的品牌蓝透光悬停 */
    color: #f8fafc !important;
}