/* components.css */

/* Hero Section */
.hero {
    color: var(--neutral-lightest);
    padding: calc(var(--spacing-unit) * 10) 0; /* 80px */
    text-align: center;
    position: relative;
    margin-bottom: calc(var(--spacing-unit) * 5); /* 40px */
    border-radius: var(--border-radius-xl); /* 24px */
    overflow: hidden; /* 重要，用于内部元素和伪元素定位 */
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    /* 或使用背景图片: background: url('images/hero-bg-cartoon.jpg') no-repeat center center/cover; */
}
.hero-overlay { /* 如果使用背景图，这个叠加层可以增加文字可读性 */
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.75), rgba(var(--theme-accent-dark), 0.75));
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.hero h1 {
    font-size: 4.5rem; /* 更大的英雄标题 */
    font-weight: 500;
    color: var(--neutral-lightest);
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    text-shadow: 3px 3px 0 var(--theme-primary-dark), 0 0 15px rgba(0,0,0,0.2); /* 卡通描边和阴影 */
    letter-spacing: 1px;
    animation: fadeInDown 0.8s var(--transition-main) both;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero .subtitle {
    font-family: var(--font-family-main);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--neutral-lightest);
    margin-bottom: calc(var(--spacing-unit) * 4); /* 32px */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    line-height: 1.7;
    animation: fadeInUp 0.8s 0.2s var(--transition-main) both;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero .subtitle .highlight-text {
    color: var(--theme-secondary); /* 用点缀色高亮 */
    font-weight: 600;
    padding: 0 5px;
    border-radius: var(--border-radius-sm);
    background-color: rgba(255,255,255,0.1);
}
.hero-buttons {
    animation: fadeInUp 0.8s 0.4s var(--transition-main) both;
}
.hero-buttons .btn {
    margin: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4.5); /* 16px 36px */
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}
.hero-buttons .btn-primary {
    animation: pulseAnimation 2s infinite ease-in-out;
}
@keyframes pulseAnimation {
    0% { transform: scale(1); box-shadow: var(--shadow-medium); }
    50% { transform: scale(1.05); box-shadow: var(--shadow-strong); }
    100% { transform: scale(1); box-shadow: var(--shadow-medium); }
}

/* Content Section (通用内容区域) */
.content-section {
    padding: calc(var(--spacing-unit) * 5) 0; /* 40px */
}
.content-section.alt-bg {
    background-color: var(--neutral-lightest);
    /* border-top: 1px solid var(--neutral-light); */
    /* border-bottom: 1px solid var(--neutral-light); */
    padding-top: calc(var(--spacing-unit) * 6); /* 48px */
    padding-bottom: calc(var(--spacing-unit) * 6);
    border-radius: var(--border-radius-xl); /* 给alt-bg区域也加上圆角 */
    margin: calc(var(--spacing-unit) * 3) 0;
    box-shadow: var(--shadow-soft);
}
.section-title {
    font-size: 2.8rem; /* 更大的区域标题 */
    font-weight: 500;
    color: var(--neutral-darkest);
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px */
    position: relative;
    padding-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}
.section-title span { /* 针对标题内联span, 如果有的话 */
    position: relative;
    z-index: 1;
    /* background: var(--neutral-lighter);  match body background for underline effect */
    /* padding: 0 calc(var(--spacing-unit) * 2); */
}
.content-section.alt-bg .section-title span {
    /* background: var(--neutral-lightest); */
}
.section-title::after {
    content: '';
    position: absolute;
    width: 100px; /* 装饰线宽度 */
    height: 5px; /* 装饰线厚度 */
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent)); /* 渐变色装饰线 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--border-radius-pill);
    z-index: 0;
}
.section-subtitle {
    text-align: center;
    font-family: var(--font-family-main);
    font-size: 1.15rem;
    color: var(--neutral-medium);
    max-width: 750px;
    margin: 0 auto calc(var(--spacing-unit) * 4) auto; /* 32px */
    line-height: 1.8;
}

/* About Section Specifics */
.about-content {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 5); /* 40px */
}
.about-text {
    flex: 1.2; /* 文本区域稍宽 */
}
.about-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
}
.about-image {
    flex: 0.8;
    text-align: center;
}
.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-xl); /* 24px */
    box-shadow: var(--shadow-strong);
    transition: transform 0.4s var(--transition-main), box-shadow 0.4s var(--transition-main);
    transform: rotate(-3deg); /* 给图片一点倾斜的卡通感 */
}
.about-image img:hover {
    transform: scale(1.05) rotate(2deg) translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.img-placeholder { /* For image load error */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 250px;
    background-color: var(--neutral-lighter);
    border: 3px dashed var(--neutral-light); /* 虚线边框 */
    color: var(--neutral-medium);
    font-family: var(--font-family-headings);
    font-size: 1.5rem;
    border-radius: var(--border-radius-large);
    text-transform: uppercase;
}

/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 卡片最小宽度 */
    gap: calc(var(--spacing-unit) * 3.5); /* 28px */
}
.feature-item.card { /* 继承.card, 再定制 */
    text-align: center;
    padding: calc(var(--spacing-unit) * 3.5) calc(var(--spacing-unit) * 3); /* 28px 24px */
    /* border-top: 6px solid var(--theme-accent); /* 卡片顶部装饰线 */
    position: relative; /* 用于装饰元素 */
}
.feature-item.card::before { /* 卡片顶部装饰 */
    content: '';
    position: absolute;
    top: -10px; /* 微妙的装饰 */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    background-color: var(--theme-secondary); /* 使用辅助色 */
    border-radius: var(--border-radius-sm);
    opacity: 0.8;
}

.feature-item .feature-icon {
    font-size: 3.2rem; /* 更大的图标 */
    color: var(--theme-primary);
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-accent-light));
    width: 88px; /* 图标背景尺寸 */
    height: 88px;
    border-radius: var(--border-radius-round);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    box-shadow: 0 0 0 6px var(--neutral-lightest), var(--shadow-medium); /* 模拟一个内边框效果 */
    transition: transform 0.3s var(--transition-main);
}
.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(10deg);
}
.feature-item h3 {
    font-size: 1.5rem;
    color: var(--theme-primary-dark);
    margin-bottom: var(--spacing-unit);
}
.feature-item p {
    font-size: 0.95rem;
    color: var(--neutral-medium);
    line-height: 1.7;
    flex-grow: 1;
}

/* Download Section Components */
.download-icon-main i {
    font-size: 4rem; /* 更大的下载图标 */
    color: var(--neutral-lightest);
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-accent));
    padding: calc(var(--spacing-unit) * 3); /* 24px */
    border-radius: var(--border-radius-round);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    box-shadow: var(--shadow-strong);
    transition: transform 0.3s var(--transition-main);
}
.download-page .card:hover .download-icon-main i,
.download-section .card:hover .download-icon-main i {
    transform: scale(1.1) rotate(-5deg);
}
.download-info {
    flex-grow: 1;
}
.download-info h3 {
    font-size: 1.8rem;
    color: var(--neutral-darkest);
    margin-bottom: var(--spacing-unit);
}
.download-info p {
    margin-bottom: calc(var(--spacing-unit) * 0.75); /* 6px */
    color: var(--neutral-medium);
    font-size: 1rem;
}
.version-info strong, .file-size-info strong {
    color: var(--theme-primary-dark);
    font-weight: 600;
}
.download-button { /* Specific styling for the main download button if needed */
    margin-top: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 4) !important; /* 14.4px 32px */
    font-size: 1.1rem !important;
}
.download-button i {
    animation: bounceHorizontal 1.5s infinite;
}
@keyframes bounceHorizontal {
  0%, 20%, 50%, 80%, 100% {transform: translateX(0);}
  40% {transform: translateX(-8px);}
  60% {transform: translateX(5px);}
}

/* Setup Instructions Components */
.setup-instructions ul > li::before { /* Custom bullet for ul */
    content: "🐾"; /* 卡通爪印或星星等 ✨ ❖ ➜ */
    color: var(--theme-accent);
    font-weight: normal;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.8em; /* Adjust for custom bullet */
    font-size: 1.1em;
    position: relative;
    top: -1px;
}
.setup-instructions ol {
    list-style: none; /* Remove default ol numbering */
    counter-reset: step-counter;
}
.setup-instructions ol > li::before { /* Custom number for ol */
    counter-increment: step-counter;
    content: counter(step-counter);
    background: linear-gradient(45deg, var(--theme-secondary), var(--warning-color));
    color: var(--neutral-darkest);
    font-weight: 600;
    font-family: var(--font-family-headings);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: var(--border-radius-round);
    margin-right: var(--spacing-unit);
    margin-left: -3em; /* Adjust for custom number */
    font-size: 0.9em;
    line-height: 1;
    box-shadow: var(--shadow-soft);
    border: 2px solid var(--neutral-lightest);
}
.setup-instructions strong {
    color: var(--theme-primary-dark);
    font-weight: 600;
}
.setup-instructions code {
    background-color: var(--neutral-light);
    color: var(--theme-accent-dark);
    padding: 0.25em 0.5em; /* 调整padding */
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-code);
    font-size: 0.9em;
    border: 1px solid var(--neutral-medium);
}

/* Contact Section Components */
.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 2.5); /* 20px */
    margin-top: calc(var(--spacing-unit) * 3); /* 24px */
}
.social-link {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); /* 12px 24px */
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    font-family: var(--font-family-main);
    font-weight: 600;
    transition: all var(--transition-main);
    background-color: var(--neutral-lightest);
    color: var(--theme-primary);
    border: 2px solid var(--theme-primary-light);
    box-shadow: var(--shadow-soft);
}
.social-link:hover {
    background-color: var(--theme-primary);
    color: var(--neutral-lightest);
    transform: translateY(-5px) scale(1.05); /* Enhanced hover */
    box-shadow: var(--shadow-medium);
    border-color: var(--theme-primary);
}
.social-link i {
    margin-right: var(--spacing-unit);
    font-size: 1.5em;
    transition: transform 0.3s ease;
}
.social-link:hover i {
    transform: rotate(360deg) scale(1.2); /* 图标旋转效果 */
}

/* Dashboard Components */
.api-key-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px */
}
.api-key-display input[type="text"].form-control { /* 确保应用 form-control 样式 */
    flex-grow: 1;
    /* padding, border, radius等已由 .form-control 定义 */
    font-family: var(--font-family-code);
    font-size: 0.95rem;
    background-color: var(--neutral-lighter); /* Readonly field bg */
    color: var(--neutral-dark);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    cursor: default;
}
.api-key-display .btn.copy-api-key-btn {
    padding: calc(var(--spacing-unit) * 1.1) calc(var(--spacing-unit) * 2); /* 8.8px 16px - 按钮略小 */
    flex-shrink: 0;
    font-size: 0.9rem;
    border-radius: var(--border-radius-base); /* API Key 旁边的按钮可以不用胶囊 */
}
.api-key-info {
    font-size: 0.9rem;
    color: var(--neutral-medium);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    line-height: 1.6;
}
.regenerate-warning.message.warning-message { /* 使用 message 组件的样式 */
    margin-top: var(--spacing-unit);
    font-size: 0.9rem;
}
.user-info-card p {
    font-size: 1rem;
    color: var(--neutral-dark);
    margin-bottom: var(--spacing-unit);
    line-height: 1.7;
    display: flex; /* 用于图标和文字对齐 */
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75);
}
.user-info-card p > strong { /* strong 标签直接作为 flex item */
    color: var(--neutral-darkest);
    font-weight: 600; /* 加强 */
    display: inline-flex; /* 让strong内部的图标也对齐 */
    align-items: center;
    gap: inherit; /* 与父级p的gap一致 */
}

/* 状态徽章 (用于用户状态、管理员角色等) */
.status-badge, .admin-role-badge {
    padding: calc(var(--spacing-unit)*0.5) calc(var(--spacing-unit)*1.25); /* 4px 10px */
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem; /* 徽章字体略小 */
    font-weight: 600; /* 加粗 */
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing-unit)*0.5); /* 4px */
    line-height: 1.4;
    text-transform: uppercase; /* 状态大写，更醒目 */
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    vertical-align: middle; /* 使其与文本更好地对齐 */
}
.status-badge i, .admin-role-badge i {
    font-size: 0.9em;
    line-height: 1;
}

.status-active { /* (邮箱已验证且账户激活) */
    background-color: var(--success-color-light);
    color: var(--success-color-dark);
    border-color: var(--success-color);
}
.status-active i { color: var(--success-color-dark) !important; }

.status-disabled { /* (账户被禁用) */
    background-color: var(--error-color-light);
    color: var(--error-color-dark);
    border-color: var(--error-color);
}
.status-disabled i { color: var(--error-color-dark) !important; }

.status-unverified { /* (邮箱未验证) */
    background-color: var(--warning-color-light);
    color: var(--warning-color-dark);
    border-color: var(--warning-color);
}
.status-unverified i { color: var(--warning-color-dark) !important; }

.admin-role-badge.admin-true {
    background-color: var(--theme-primary-light);
    color: var(--theme-primary-dark);
    border-color: var(--theme-primary);
}
.admin-role-badge.admin-true i { color: var(--theme-primary-dark) !important; }

.admin-role-badge.admin-false {
    background-color: var(--neutral-lighter);
    color: var(--neutral-medium);
    border-color: var(--neutral-light);
}
.admin-role-badge.admin-false i { color: var(--neutral-medium) !important; }


/* 表格美化 */
.table-responsive {
    overflow-x: auto;
    background-color: var(--neutral-lightest);
    border-radius: var(--border-radius-large); /* 表格外层圆角 */
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--neutral-light);
    margin-top: calc(var(--spacing-unit) * 2.5); /* 20px */
}
.table-responsive.card { /* 如果表格本身就是卡片 */
    padding: 0; /* 卡片padding会干扰表格 */
    border: none; /* 卡片已有边框 */
    box-shadow: var(--shadow-medium); /* 卡片已有阴影 */
}
.admin-user-table {
    width: 100%;
    border-collapse: collapse; /* 改为 collapse 以便更好控制边框 */
    font-size: 0.9rem;
}
.admin-user-table th,
.admin-user-table td {
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 2.5); /* 14.4px 20px */
    text-align: left;
    border-bottom: 1px solid var(--neutral-light);
    vertical-align: middle;
}
.admin-user-table thead th { /* thead th for specificity */
    background-color: var(--neutral-lighter); /* 表头背景色 */
    font-family: var(--font-family-main); /* 表头也用主字体 */
    font-weight: 600; /* 表头加粗 */
    color: var(--neutral-darkest);
    text-transform: none; /* 取消大写 */
    letter-spacing: 0.3px;
    font-size: 0.95rem;
    position: sticky; /* 表头粘性定位 (如果需要) */
    top: 0; /* 配合粘性定位 */
    z-index: 10; /* 确保在滚动时位于上层 */
}
.admin-user-table tbody tr {
    transition: background-color var(--transition-fast);
}
.admin-user-table tbody tr:nth-child(even) { /* 斑马条纹 */
    background-color: rgba(var(--theme-primary-rgb), 0.025);
}
.admin-user-table tbody tr:hover {
    background-color: var(--theme-primary-light) !important; /* 更明显的悬停效果, !important 覆盖斑马条纹 */
}
.admin-user-table td.api-key-cell {
    font-family: var(--font-family-code);
    font-size: 0.85em;
    word-break: break-all;
    max-width: 180px; /* 调整最大宽度 */
    color: var(--theme-accent-dark); /* API Key 用特殊颜色 */
}
.admin-user-table .actions-cell {
    white-space: nowrap;
}
.admin-user-table .actions-cell .btn-xs {
    margin-right: calc(var(--spacing-unit) * 0.75); /* 6px */
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* 4px */
}
.admin-user-table .actions-cell .btn-xs:last-child {
    margin-right: 0;
}
.admin-user-table .actions-cell .btn[title] {
    position: relative; /* 为了tooltip定位 */
}

/* Admin Stats Page Components */
.stat-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-unit); /* 8px */
    line-height: 1;
    background: -webkit-linear-gradient(45deg, var(--theme-primary), var(--theme-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* 让渐变生效 */
}
.stat-value {
    font-family: var(--font-family-headings); /* 统计数字用标题字体 */
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--neutral-darkest);
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* 4px */
    line-height: 1.1;
}
.stat-label {
    font-family: var(--font-family-main);
    font-size: 0.9rem;
    color: var(--neutral-medium);
    font-weight: 500;
}
.recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recent-list li {
    padding: calc(var(--spacing-unit) * 1.5) 0; /* 12px */
    border-bottom: 1px dashed var(--neutral-light);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column; /* Stack username and timestamp */
    gap: calc(var(--spacing-unit) * 0.5); /* 4px */
}
.recent-list li:last-child {
    border-bottom: none;
}
.recent-list li strong {
    color: var(--neutral-darkest);
    font-weight: 600;
}
.recent-list li .timestamp {
    display: block;
    font-size: 0.8rem;
    color: var(--neutral-medium);
}

/* Admin Settings Specific Components */
.admin-settings-page .form-group label code {
    font-size: 0.8em;
    color: var(--neutral-medium);
    background-color: var(--neutral-lighter);
    padding: 2px 5px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--neutral-light);
    font-family: var(--font-family-code);
}


/* --- [美化后] 更新日志时间线样式 (Changelog Timeline) --- */
.changelog-timeline {
    position: relative;
    max-width: 900px;
    margin: calc(var(--spacing-unit) * 5) auto; /* 增加上下边距 */
    padding: calc(var(--spacing-unit) * 2) 0;
}

/* 时间线中轴线 */
.changelog-timeline::before {
    content: '';
    position: absolute;
    width: 4px; /* 加粗中轴线 */
    /* 使用主题色渐变作为中轴线背景 */
    background-image: linear-gradient(to bottom, var(--theme-primary), var(--theme-accent), var(--theme-secondary));
    top: 0;
    bottom: 0;
    left: 20px;
    margin-left: -2px;
    border-radius: var(--border-radius-pill);
    box-shadow: 0 0 10px rgba(var(--theme-primary-rgb), 0.3);
}

.timeline-item-container {
    padding: calc(var(--spacing-unit) * 2) 0; /* 调整上下间距 */
    padding-left: calc(var(--spacing-unit) * 8); /* 64px, 为 marker 留出更多空间 */
    position: relative;
    opacity: 0; /* 为动画准备 */
    animation: timeline-fade-in 0.6s ease-out forwards;
    animation-delay: calc(var(--animation-order) * 150ms); /* JS需要设置此变量来实现依次加载 */
}

@keyframes timeline-fade-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 时间点标记 */
.timeline-marker {
    position: absolute;
    left: 0;
    top: calc(var(--spacing-unit) * 3.5);
    width: 44px; /* 增大标记尺寸 */
    height: 44px;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem; /* 增大图标尺寸 */
    border: 4px solid var(--neutral-lighter); /* 增加边框厚度 */
    box-shadow: var(--shadow-medium);
    transition: transform 0.3s ease;
}

.timeline-item-container:hover .timeline-marker {
    transform: scale(1.1); /* 悬停时标记放大 */
}


/* 日志卡片 */
.timeline-item.card {
    margin: 0;
    width: 100%;
    border: 1px solid var(--neutral-light);
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* 为 "小箭头" 伪元素定位 */
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
}

.timeline-item.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-strong);
}

/* 指向时间轴的小箭头 */
.timeline-item.card::before {
    content: '';
    position: absolute;
    top: 22px; /* 调整位置使其对准 marker */
    left: -11px; /* 指向左侧 */
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 11px solid var(--neutral-lightest); /* 箭头颜色与卡片背景一致 */
    z-index: 1;
    transition: border-right-color 0.3s ease;
}
.timeline-item.card::after {
    content: '';
    position: absolute;
    top: 21px; /* 偏移1px制造边框效果 */
    left: -14px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid var(--neutral-light); /* 箭头边框颜色与卡片边框一致 */
    z-index: 0;
    transition: border-right-color 0.3s ease;
}

/* 卡片头部 */
.timeline-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--neutral-light); /* 实线边框 */
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 1.5);
}

.timeline-date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-dark);
}

.timeline-version-tag {
    color: white;
    font-weight: 600;
    padding: calc(var(--spacing-unit)*0.5) calc(var(--spacing-unit)*1.5); /* 调整padding */
    border-radius: var(--border-radius-pill);
    font-size: 0.85rem; /* 调整字号 */
    letter-spacing: 0.5px;
}

/* 卡片标题 */
.timeline-title {
    font-size: 1.5rem; /* 加大标题 */
    font-family: var(--font-family-headings);
    color: var(--theme-primary-dark);
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

/* 卡片内容列表 */
.timeline-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.timeline-content li {
    padding-left: calc(var(--spacing-unit) * 3); /* 24px */
    position: relative;
    margin-bottom: calc(var(--spacing-unit) * 1.25); /* 10px */
    color: var(--neutral-dark);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* 内容列表项的自定义图标 */
.timeline-content li::before {
    font-family: 'Font Awesome 6 Free'; /* 使用 FontAwesome */
    content: '\f058'; /* fa-check-circle */
    font-weight: 900; /* Solid icon */
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--success-color); /* 使用成功颜色 */
    font-size: 1.1em;
}


/* --- 响应式设计 (Components Specific) --- */
@media (max-width: 992px) { /* Tablet and below */
    .hero h1 { font-size: 3.5rem; }
    .hero .subtitle { font-size: 1.3rem; }

    .about-content {
        flex-direction: column;
        gap: calc(var(--spacing-unit) * 3); /* 24px */
    }
    .about-image { margin-top: calc(var(--spacing-unit) * 3); }
    .about-image img { transform: rotate(0deg); } /* 平板上可能不需要倾斜 */
    .about-image img:hover { transform: scale(1.03) translateY(-5px); }
}

@media (max-width: 768px) { /* Mobile */
    html { font-size: 15px; } /* 手机上基础字体略小 */

    .hero {
        padding: calc(var(--spacing-unit) * 8) 0; /* 64px */
        border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); /* 底部圆角 */
    }
    .hero h1 { font-size: 2.8rem; }
    .hero .subtitle { font-size: 1.2rem; }
    .section-title { font-size: 2rem; }

    .download-icon-main i { font-size: 3.5rem; width: 100px; height: 100px; }
    .download-info h3 { font-size: 1.6rem; }

    .table-responsive { border-radius: var(--border-radius-base); }
    .admin-user-table th,
    .admin-user-table td {
        padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit); /* 12px 8px */
        font-size: 0.85rem;
    }
    .admin-user-table td.api-key-cell { max-width: 100px; }
    .admin-user-table .actions-cell { white-space: normal; } /* 允许按钮换行 */
    .admin-user-table .actions-cell .btn-xs {
        display: inline-flex;
        width: auto;
        margin-bottom: calc(var(--spacing-unit) * 0.75); /* 6px */
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: calc(var(--spacing-unit) * 2); /* 16px */
    }
    .changelog-timeline::before {
        left: 20px;
    }
    .timeline-item-container {
        padding-left: 60px; /* 调整手机端左边距 */
    }
    .timeline-marker {
        left: 0;
    }
    .timeline-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) { /* Small Mobile */
    .hero h1 { font-size: 2.2rem; }
    .hero .subtitle { font-size: 1.05rem; }
    .hero-buttons .btn {
        font-size: 1rem;
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); /* 12px 24px */
        width: calc(100% - var(--spacing-unit)*2);
        margin-left: var(--spacing-unit);
        margin-right: var(--spacing-unit);
    }
    .hero-buttons .btn + .btn {
        margin-top: calc(var(--spacing-unit) * 1.5); /* 12px */
    }

    .stat-card.card { padding: calc(var(--spacing-unit) * 2); } /* 16px */
    .stat-value { font-size: 2.2rem; }
    .stat-icon { font-size: 2.5rem; }

    .social-links { gap: var(--spacing-unit); } /* 8px */
    .social-link {
        padding: calc(var(--spacing-unit)*1.25) calc(var(--spacing-unit)*2); /* 10px 16px */
        width: 100%;
        justify-content: center;
    }
    
    .admin-user-table .actions-cell .btn-text-xs {
        display: none; /* 在最小屏幕上隐藏按钮文字，只留图标 */
    }
    .admin-user-table .actions-cell .btn-xs {
        padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.25); /* 调整小图标按钮的padding */
    }
}

/* Admin Dashboard specific components */
.admin-dashboard-page .dashboard-welcome-message {
    margin-bottom: calc(var(--spacing-unit)*3);
    padding: calc(var(--spacing-unit)*2.5);
}
.admin-dashboard-page .dashboard-welcome-message h3 {
    margin-top:0; font-size: 1.5rem; color: var(--theme-primary-dark);
}
.admin-dashboard-page .dashboard-welcome-message p {
    color:var(--neutral-medium); font-size:1rem;
}
.admin-dashboard-page .section-subtitle {
    text-align:left; font-size:1.6rem; margin-top:calc(var(--spacing-unit)*3); margin-bottom:calc(var(--spacing-unit)*2);
}
.admin-dashboard-page .stats-grid {
    margin-bottom: calc(var(--spacing-unit)*3);
}
.admin-dashboard-page .quick-link-card {
    text-decoration:none; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:var(--theme-primary-light);
}
.admin-dashboard-page .quick-link-card:hover {
    background-color: var(--theme-primary) !important;
}
.admin-dashboard-page .quick-link-card:hover .stat-label,
.admin-dashboard-page .quick-link-card:hover .stat-icon {
    color: var(--neutral-lightest) !important;
}
.admin-dashboard-page .admin-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 减小最小宽度 */
    gap: calc(var(--spacing-unit) * 2.5);
}
.admin-dashboard-page .quick-action-card {
    text-decoration: none;
    color: var(--neutral-dark);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    padding: calc(var(--spacing-unit)*2.5);
}
.admin-dashboard-page .quick-action-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
    border-color: var(--theme-primary);
}
.admin-dashboard-page .quick-action-card i {
    font-size: 2.5rem;
    color: var(--theme-primary);
    margin-bottom: var(--spacing-unit);
    display: block;
    text-align: center;
}
.admin-dashboard-page .quick-action-card h4 {
    font-size: 1.3rem;
    color: var(--neutral-darkest);
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit)*0.75);
    text-align: center;
}
.admin-dashboard-page .quick-action-card p {
    font-size: 0.9rem;
    color: var(--neutral-medium);
    line-height: 1.5;
    text-align: center;
    margin-bottom:0;
}
.admin-dashboard-page .quick-action-card.placeholder-card {
    background-color: var(--neutral-lighter);
    opacity: 0.7;
    cursor: not-allowed;
}
.admin-dashboard-page .quick-action-card.placeholder-card:hover {
    transform: none;
    box-shadow: var(--shadow-medium);
    border-color: var(--neutral-light);
}

/* 验证码相关样式 */
.captcha-container {
    margin-top: calc(var(--spacing-unit) * 0.5);
}

.captcha-image-wrapper {
    position: relative;
    min-width: 120px;
}

.captcha-image-wrapper img {
    width: 120px;
    height: 40px;
    border: 2px solid var(--neutral-light);
    border-radius: var(--border-radius-base);
    cursor: pointer;
    transition: border-color 0.3s var(--transition-main), transform 0.2s var(--transition-main);
    background-color: var(--neutral-lightest);
}

.captcha-image-wrapper img:hover {
    border-color: var(--theme-primary);
    transform: scale(1.05);
}

.captcha-image-wrapper small {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 11px;
    color: var(--neutral-medium);
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

/* 验证码输入框样式优化 */
#reg_captcha {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--font-family-code);
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

#reg_captcha:focus {
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
    border-color: var(--theme-primary);
}

/* 响应式优化 */
@media (max-width: 768px) {
    .captcha-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-unit);
    }
    
    .captcha-image-wrapper {
        align-self: center;
        min-width: auto;
    }
    
    .captcha-image-wrapper small {
        position: static;
        margin-top: calc(var(--spacing-unit) * 0.5);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .captcha-image-wrapper img {
        width: 100px;
        height: 34px;
    }
    
    #reg_captcha {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}