/* base.css */

/* --- 全局重置与基础样式 --- */
:root {
    /* 全新色板 - 示例 (精致卡通，偏明亮活泼，同时保持高级感) */
    --theme-primary: #6A5ACD; /* 精致紫罗兰 */
    --theme-primary-rgb: 106, 90, 205;
    --theme-primary-dark: #483D8B; /* 深紫罗兰 */
    --theme-primary-light: #E6E6FA; /* 淡紫 */

    --theme-secondary: #FFD700; /* 金色点缀 (卡通感) */
    --theme-secondary-dark: #DAA520; /* 暗金 */
    --theme-secondary-light: #FFFACD; /* 柠檬绸色 (淡金) */

    --theme-accent: #FF69B4; /* 活泼粉 (卡通感) */
    --theme-accent-dark: #C71585; /* 深粉 */
    --theme-accent-light: #FFB6C1; /* 浅粉红 */

    --success-color: #32CD32; /* 青柠绿 */
    --success-color-dark: #228B22; /* 森林绿 */
    --success-color-light: #E0FFEF; /* 非常浅的成功背景 */

    --error-color: #FF6347;   /* 番茄红 */
    --error-color-dark: #CD5C5C; /* 印度红 */
    --error-color-light: #FFEBEB; /* 非常浅的错误背景 */

    --warning-color: #FFC107; /* Amber (原先的FFDA63太浅了) */
    --warning-color-dark: #FFA000; /* Darker Amber */
    --warning-color-light: #FFF8E1; /* Amber Light */

    --info-color: #17A2B8; /* 信息蓝 */
    --info-color-dark: #117A8B; /* 深信息蓝 */
    --info-color-light: #E0F7FA; /* 信息蓝浅色 */


    --neutral-lightest: #FFFFFF; /* 纯白，用于卡片等背景 */
    --neutral-lighter: #F7F9FC;  /* 非常浅的灰蓝，用作页面背景 */
    --neutral-light: #E9ECEF;   /* 边框、分隔线 (原E0E0E0在白色背景上可能不够突出) */
    --neutral-medium: #6C757D;  /* 次要文本 (原9E9E9E在白色背景上对比度可能不足) */
    --neutral-dark: #343A40;    /* 主要文本 (原424242) */
    --neutral-darkest: #212529; /* 标题 (原212121) */

    --font-family-main: 'Poppins', 'Noto Sans SC', sans-serif; /* Poppins 是一款圆润友好的字体 */
    --font-family-headings: 'Fredoka One', 'Noto Sans SC', cursive; /* Fredoka One 是一款卡通风格字体 (需要引入) */
    --font-family-code: 'Fira Code', 'Consolas', 'Liberation Mono', Menlo, Courier, monospace; /* Fira Code 用于代码显示 (需要引入) */

    --border-radius-sm: 4px;
    --border-radius-base: 8px;
    --border-radius-large: 16px;
    --border-radius-xl: 24px;
    --border-radius-round: 50%;
    --border-radius-pill: 9999px;

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 12px 30px rgba(0, 0, 0, 0.1);

    --transition-main: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的过渡 */
    --transition-fast: 0.15s ease-in-out;

    --spacing-unit: 8px; /* 统一间距单位 */
    --container-max-width: 1280px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* 或者根据设计稿调整 */
}

body {
    font-family: var(--font-family-main);
    background-color: var(--neutral-lighter); /* 更明亮的页面背景 */
    color: var(--neutral-dark);
    line-height: 1.7; /* 增加行高以提高可读性 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 90%;
    max-width: var(--container-max-width); /* 可以适当增大最大宽度 */
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--spacing-unit) * 2.5); /* 20px */
    padding-right: calc(var(--spacing-unit) * 2.5);
}

/* --- Typography Enhancements --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    color: var(--neutral-darkest);
    font-weight: 500; /* Fredoka One 本身较粗，500即可 */
    line-height: 1.3;
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

h1 { font-size: 2.8rem; } /* Base h1, can be overridden by .hero h1 etc. */
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }

p {
    color: var(--neutral-dark);
    margin-bottom: calc(var(--spacing-unit) * 2);
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--theme-primary);
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
a:hover {
    color: var(--theme-primary-dark);
    opacity: 0.85;
    /* text-decoration: underline; (可选，现代设计中常省略) */
}

hr {
    margin-top: calc(var(--spacing-unit) * 4); /* 32px */
    margin-bottom: calc(var(--spacing-unit) * 4);
    border: 0;
    border-top: 2px dashed var(--neutral-light); /* 虚线分隔 */
}

/* 卡片基础样式 */
.card {
    background-color: var(--neutral-lightest);
    border-radius: var(--border-radius-large); /* 16px */
    box-shadow: var(--shadow-medium);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3.5); /* 24px 28px */
    transition: transform var(--transition-main), box-shadow var(--transition-main);
    border: 1px solid var(--neutral-light);
    overflow: hidden; /* 为可能的内部装饰元素做准备 */
}
.card:hover {
    transform: translateY(-6px) scale(1.01); /* 稍微活泼一点的悬停 */
    box-shadow: var(--shadow-strong);
}
.card-header {
    font-family: var(--font-family-headings);
    font-size: 1.6rem; /* 调整卡片标题大小 */
    color: var(--theme-primary-dark); /* 卡片头文字颜色加深一点 */
    margin: calc(var(--spacing-unit) * -3) calc(var(--spacing-unit) * -3.5) calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * -3.5); /* 扩展到卡片边缘 */
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    border-bottom: 1px solid var(--neutral-light);
    background-color: var(--theme-primary-light); /* 给头部一个淡色背景 */
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; /* 匹配卡片顶部圆角 */
}
.card-header i {
    font-size: 1.2em; /* 图标稍大 */
    color: var(--theme-primary-dark);
}
.card-body {
    padding-top: var(--spacing-unit); /* 如果有.card-header, body内可能需要一点上边距 */
}

/* --- 按钮 (Buttons) 增强 --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-unit); /* 8px */
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.5); /* 12px 28px - 默认padding */
    font-family: var(--font-family-main); /* 主字体，如果按钮文字希望更卡通，可以换成 headings 字体 */
    font-size: 1rem;
    font-weight: 600; /* 按钮文字加粗一些 */
    text-decoration: none;
    border: 2px solid transparent; /* 加一点边框厚度 */
    border-radius: var(--border-radius-pill); /* 胶囊按钮，更卡通 */
    cursor: pointer;
    transition: all var(--transition-main);
    box-shadow: var(--shadow-soft);
    letter-spacing: 0.5px;
    line-height: 1.5; /* Ensure consistent height */
    outline: none; /* 移除默认轮廓 */
    text-transform: none; /* 避免默认大写 */
}
.btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-medium);
}
.btn:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: var(--shadow-soft);
}
.btn i {
    font-size: 1.1em; /* 按钮内图标大小 */
    line-height: 1;
}
.btn-primary {
    background: linear-gradient(45deg, var(--theme-primary), var(--theme-accent)); /* 按钮渐变 */
    color: var(--neutral-lightest);
    border-color: transparent; /* 渐变背景不需要边框 */
}
.btn-primary:hover {
    background: linear-gradient(45deg, var(--theme-primary-dark), var(--theme-accent-dark));
    box-shadow: 0 6px 15px rgba(var(--theme-primary-rgb), 0.3); /* 更明显的阴影 */
}
.btn-secondary {
    background-color: var(--theme-secondary);
    color: var(--neutral-darkest); /* 金色背景配深色文字 */
    border-color: var(--theme-secondary-dark); /* 给一个略深的边框增加对比 */
}
.btn-secondary:hover {
    background-color: var(--theme-secondary-dark);
    border-color: var(--theme-secondary-dark);
    color: var(--neutral-lightest);
}
.btn-accent { /* 新增 Accent 按钮 */
    background-color: var(--theme-accent);
    color: var(--neutral-lightest);
    border-color: var(--theme-accent-dark);
}
.btn-accent:hover {
    background-color: var(--theme-accent-dark);
    border-color: var(--theme-accent-dark);
}
.btn-success {
    background-color: var(--success-color);
    color: var(--neutral-lightest);
    border-color: var(--success-color-dark);
}
.btn-success:hover {
    background-color: var(--success-color-dark);
}
.btn-warning {
    background-color: var(--warning-color);
    color: var(--neutral-darkest);
    border-color: var(--warning-color-dark);
}
.btn-warning:hover {
    background-color: var(--warning-color-dark);
    color: var(--neutral-lightest);
}
.btn-danger {
    background-color: var(--error-color);
    color: var(--neutral-lightest);
    border-color: var(--error-color-dark);
}
.btn-danger:hover {
    background-color: var(--error-color-dark);
}
.btn-info { /* For toggle admin, not currently admin */
    background-color: var(--info-color);
    color: var(--neutral-lightest);
    border-color: var(--info-color-dark);
}
.btn-info:hover {
    background-color: var(--info-color-dark);
}
.btn-dark { /* For delete type actions in admin */
    background-color: var(--neutral-dark);
    color: var(--neutral-lightest);
    border-color: var(--neutral-darkest);
}
.btn-dark:hover {
    background-color: var(--neutral-darkest);
}

.btn-lg {
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 4.5); /* 14.4px 36px */
    font-size: 1.1rem;
    font-weight: 600;
}
.btn-sm {
    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 2); /* 6.4px 16px */
    font-size: 0.875rem;
}
.btn-xs {
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5); /* 4px 12px */
    font-size: 0.75rem;
    gap: calc(var(--spacing-unit) * 0.5); /* 4px - Smaller gap for xs buttons */
    border-radius: var(--border-radius-base); /* 小按钮可以不用胶囊型 */
    font-weight: 500;
}
.btn-block {
    width: 100%;
    display: flex; /* 保证图标和文字居中 */
}
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    background-image: none; /* 移除渐变 */
    background-color: var(--neutral-light);
    color: var(--neutral-medium);
    border-color: var(--neutral-light);
}
.btn[disabled]:hover {
    transform: none;
    box-shadow: none;
}


/* --- 认证页面与通用表单控件 --- */
.auth-form .form-group { /* Also applied in admin settings/edit user context */
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    text-align: left;
}
.auth-form label,
.form-group label { /* General form group label */
    display: block;
    font-weight: 600; /* 标签加粗 */
    margin-bottom: var(--spacing-unit); /* 8px */
    color: var(--neutral-dark);
    font-size: 0.95rem;
    display: flex; /* 让图标和文字对齐 */
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.75); /* 6px */
}
.auth-form label i,
.form-group label i {
    color: var(--theme-primary);
    font-size: 1.2em;
    width: 1.2em; /* 固定宽度 */
    text-align: center;
    transition: transform 0.2s ease;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.form-control /* 通用表单控件 */
{
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); /* 12px 16px */
    border: 2px solid var(--neutral-light); /* 边框加粗一点 */
    border-radius: var(--border-radius-base);
    font-family: var(--font-family-main);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    background-color: var(--neutral-lightest);
    color: var(--neutral-dark);
}
.auth-form input:focus,
.form-control:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.15); /* 更柔和的焦点阴影 */
    background-color: var(--neutral-lightest);
}
.auth-form .form-text,
.form-group .form-text { /* General form help text */
    font-size: 0.85rem;
    color: var(--neutral-medium);
    margin-top: var(--spacing-unit);
    display: block;
}
.form-control-plaintext { /* 用于只读字段 */
    display: block;
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--neutral-dark);
    background-color: var(--neutral-lighter);
    border: 2px solid var(--neutral-light);
    border-radius: var(--border-radius-base);
}

/* 消息提示 (错误, 成功, 信息) - 优化版 */
.message {
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 2); /* 调整padding，左右可以稍小 */
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-base);
    font-size: 0.95rem; /* 消息文字大小 */
    font-weight: 500;
    display: flex; /* 使用 Flexbox 布局 */
    align-items: flex-start; /* 图标和文本顶部对齐，允许多行文本 */
    gap: calc(var(--spacing-unit) * 1.5); /* 图标和文本之间的间距 */
    text-align: left;
    border-left-width: 5px; /* 左边框保持 */
    border-left-style: solid;
    box-shadow: var(--shadow-soft);
    line-height: 1.6; /* 确保行高 */
}
.message.card { /* 如果消息本身也作为卡片显示，调整内外边距 */
    margin-left: 0;
    margin-right: 0;
}

.message i.fas, .message i.fab { /* 针对 FontAwesome 图标 */
    font-size: 1.5em; /* 图标大小 */
    line-height: 1.3; /* 调整行高以更好地垂直对齐第一行文本 */
    flex-shrink: 0; /* 防止图标在空间不足时被压缩 */
    margin-top: 1px; /* 微调图标垂直位置，根据实际效果调整 */
    width: 24px; /* 给图标一个固定宽度，方便对齐 */
    text-align: center;
}

.message > div { /* 消息文本包裹在div中 */
    flex-grow: 1; /* 让文本区域占据剩余空间 */
    word-break: break-word; /* 允许长单词换行 */
    overflow-wrap: break-word; /* 同上，更现代的属性 */
}
.message strong { /* 消息中的strong标签 */
    font-weight: 700; /* 加粗强调 */
    color: inherit; /* 继承父元素的颜色 */
}

.error-message {
    background-color: var(--error-color-light);
    color: var(--error-color-dark);
    border-color: var(--error-color);
}
.error-message i { color: var(--error-color); }

.success-message {
    background-color: var(--success-color-light);
    color: var(--success-color-dark);
    border-color: var(--success-color);
}
.success-message i { color: var(--success-color); }

.info-message {
    background-color: var(--info-color-light);
    color: var(--info-color-dark);
    border-color: var(--info-color);
}
.info-message i { color: var(--info-color); }

.warning-message { /* 新增 warning 消息类型 */
    background-color: var(--warning-color-light);
    color: var(--warning-color-dark);
    border-color: var(--warning-color);
}
.warning-message i { color: var(--warning-color); }


/* --- Global Confirm Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 更深的遮罩 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* 确保在最上层 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-overlay:target,
.modal-overlay.active { /* 用于JS控制显示 */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal-dialog.card {
    background-color: var(--neutral-lightest);
    padding: 0; /* card-header 和 card-body 会处理内边距 */
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-strong);
    width: 90%;
    max-width: 500px; /* 模态框最大宽度 */
    transform: scale(0.9);
    transition: transform 0.3s ease;
    overflow: hidden; /* 确保 card-header 圆角生效 */
}

.modal-overlay:target .modal-dialog.card,
.modal-overlay.active .modal-dialog.card {
    transform: scale(1);
}

.modal-dialog .card-header {
    font-family: var(--font-family-headings);
    font-size: 1.4rem; /* 调整标题大小 */
    color: var(--theme-primary-dark);
    background-color: var(--theme-primary-light);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    margin: 0; /* 重置卡片头的外边距 */
    border-bottom: 1px solid var(--neutral-light);
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; /* 仅顶部圆角 */
}
.modal-dialog .card-header i { /* 如果标题里有图标 */
    margin-right: var(--spacing-unit);
}

.modal-dialog .card-body {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3); /* 调整内边距 */
    text-align: left; /* 消息文本左对齐 */
    font-size: 1rem;
    line-height: 1.7;
    color: var(--neutral-dark);
}
.modal-dialog .card-body p {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    word-break: break-word;
}
.modal-dialog .card-body p:last-child {
    margin-bottom: 0;
}
.modal-dialog .card-body pre { /* 用于显示更新日志等格式化文本 */
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px; /* 限制最大高度，超出则滚动 */
    overflow-y: auto;
    background-color: var(--neutral-lighter);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--neutral-light);
    font-family: var(--font-family-code);
    font-size: 0.9em;
    margin-top: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.modal-actions {
    margin-top: calc(var(--spacing-unit) * 3);
    display: flex;
    justify-content: flex-end; /* 按钮靠右 */
    gap: var(--spacing-unit);
}

.modal-actions .btn {
    min-width: 100px; /* 给按钮一个最小宽度 */
    padding-left: calc(var(--spacing-unit) * 2.5);
    padding-right: calc(var(--spacing-unit) * 2.5);
}
/* --- End Global Confirm Modal Styles --- */

/* --- Copy API Key Feedback --- */
.copy-feedback {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background-color: var(--success-color-dark); /* 默认成功背景 */
    color: white;
    padding: calc(var(--spacing-unit)*1.25) calc(var(--spacing-unit)*2.5); /* 10px 20px */
    border-radius: var(--border-radius-base);
    font-size: 0.9em;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    pointer-events: none;
    z-index: 9999;
    box-shadow: var(--shadow-strong);
    display: flex; /* 用于图标和文字对齐 */
    align-items: center;
    gap: var(--spacing-unit);
}
.copy-feedback.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}