/* 默认字体 */
@font-face {
    font-family: 'simhei';
    src: url('ziti/simhei.ttf') format('truetype');
}

@font-face {
    font-family: 'simsun';
    src: url('ziti/simhei.ttf') format('truetype');
}

@font-face {
    font-family: 'simkai';
    src: url('ziti/simkai.ttf') format('truetype');
}

@font-face {
    font-family: 'simfang';
    src: url('ziti/simfang.ttf') format('truetype');
}

/* ziti文件夹中的字体 */
@font-face {
    font-family: '2.5 胡晓波男神体';
    src: url('ziti/2.5 胡晓波男神体.otf') format('opentype');
}

@font-face {
    font-family: '3.3 胡晓波骚包体';
    src: url('ziti/3.3 胡晓波骚包体.otf') format('opentype');
}

@font-face {
    font-family: '4.2 胡晓波真帅体';
    src: url('ziti/4.2 胡晓波真帅体.otf') format('opentype');
}

@font-face {
    font-family: '4.3 江西拙楷2.0';
    src: url('ziti/4.3 江西拙楷2.0.ttf') format('truetype');
}

@font-face {
    font-family: 'HongLeiXingShuJianTi-2';
    src: url('ziti/HongLeiXingShuJianTi-2.otf') format('opentype');
}

@font-face {
    font-family: 'LXGWZhenKai-Regular';
    src: url('ziti/LXGWZhenKai-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'LXGWZhenKaiGB-Regular';
    src: url('ziti/LXGWZhenKaiGB-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'PingFang Medium';
    src: url('ziti/PingFang Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'RuiZiChaoPaiKeBianZhenYan2.0Jian';
    src: url('ziti/RuiZiChaoPaiKeBianZhenYan2.0Jian.ttf') format('truetype');
}

@font-face {
    font-family: 'SIMLI';
    src: url('ziti/SIMLI.TTF') format('truetype');
}

@font-face {
    font-family: 'SIMYOU';
    src: url('ziti/SIMYOU.TTF') format('truetype');
}

@font-face {
    font-family: '也字工厂柳叶体';
    src: url('ziti/也字工厂柳叶体.ttf') format('truetype');
}

@font-face {
    font-family: '仿宋_GB2312';
    src: url('ziti/仿宋_GB2312.TTF') format('truetype');
}

@font-face {
    font-family: '优设好身体';
    src: url('ziti/优设好身体.ttf') format('truetype');
}

@font-face {
    font-family: '优设标题圆';
    src: url('ziti/优设标题圆.ttf') format('truetype');
}

@font-face {
    font-family: '优设鲨鱼菲特健康体';
    src: url('ziti/优设鲨鱼菲特健康体.ttf') format('truetype');
}

@font-face {
    font-family: '体坛超黑简体';
    src: url('ziti/体坛超黑简体.ttf') format('truetype');
}

@font-face {
    font-family: '全新硬笔行书简';
    src: url('ziti/全新硬笔行书简.ttf') format('truetype');
}

@font-face {
    font-family: '华康少女字体W5(P)';
    src: url('ziti/华康少女字体W5(P).ttf') format('truetype');
}

@font-face {
    font-family: '华康海报体W12';
    src: url('ziti/华康海报体W12.ttc') format('truetype');
}

@font-face {
    font-family: '华文琥珀';
    src: url('ziti/华文琥珀.ttf') format('truetype');
}

@font-face {
    font-family: '大明宋（怀旧版）';
    src: url('ziti/大明宋（怀旧版）.ttf') format('truetype');
}

@font-face {
    font-family: '字体家AI造字霸行';
    src: url('ziti/字体家AI造字霸行.ttf') format('truetype');
}

@font-face {
    font-family: '字魂103号-海棠手书';
    src: url('ziti/字魂103号-海棠手书.ttf') format('truetype');
}

@font-face {
    font-family: '字魂105号-简雅黑';
    src: url('ziti/字魂105号-简雅黑.ttf') format('truetype');
}

@font-face {
    font-family: '字魂149号-扁鹊黑';
    src: url('ziti/字魂149号-扁鹊黑.ttf') format('truetype');
}

@font-face {
    font-family: '字魂210号-国风少年体';
    src: url('ziti/字魂210号-国风少年体.ttf') format('truetype');
}

@font-face {
    font-family: '字魂扁桃体';
    src: url('ziti/字魂扁桃体.ttf') format('truetype');
}

@font-face {
    font-family: '庞门正道标题体';
    src: url('ziti/庞门正道标题体.ttf') format('truetype');
}

@font-face {
    font-family: '快看世界体';
    src: url('ziti/快看世界体.ttf') format('truetype');
}

@font-face {
    font-family: '思源黑体 CN-Bold';
    src: url('ziti/思源黑体 CN-Bold.otf') format('opentype');
}

@font-face {
    font-family: '思源黑体 CN-ExtraLight';
    src: url('ziti/思源黑体 CN-ExtraLight.otf') format('opentype');
}

@font-face {
    font-family: '思源黑体 CN-Heavy';
    src: url('ziti/思源黑体 CN-Heavy.otf') format('opentype');
}

@font-face {
    font-family: '思源黑体 CN-Light';
    src: url('ziti/思源黑体 CN-Light.otf') format('opentype');
}

@font-face {
    font-family: '思源黑体 CN-Medium';
    src: url('ziti/思源黑体 CN-Medium.otf') format('opentype');
}

@font-face {
    font-family: '思源黑体 CN-Normal';
    src: url('ziti/思源黑体 CN-Normal.otf') format('opentype');
}

@font-face {
    font-family: '思源黑体 CN-Regular';
    src: url('ziti/思源黑体 CN-Regular.otf') format('opentype');
}

@font-face {
    font-family: '文正姚体';
    src: url('ziti/文正姚体.ttf') format('truetype');
}

@font-face {
    font-family: '文泉驿正黑';
    src: url('ziti/文泉驿正黑.TTF') format('truetype');
}

@font-face {
    font-family: '文泉驿等宽正黑';
    src: url('ziti/文泉驿等宽正黑.TTF') format('truetype');
}

@font-face {
    font-family: '文鼎POP-4';
    src: url('ziti/文鼎POP-4.ttf') format('truetype');
}

@font-face {
    font-family: '文鼎中特广告体';
    src: url('ziti/文鼎中特广告体.ttf') format('truetype');
}

@font-face {
    font-family: '方正小标宋_GBK';
    src: url('ziti/方正小标宋_GBK.TTF') format('truetype');
}

@font-face {
    font-family: '方正小标宋简';
    src: url('ziti/方正小标宋简.TTF') format('truetype');
}

@font-face {
    font-family: '汉仪尚巍手书W';
    src: url('ziti/汉仪尚巍手书W.ttf') format('truetype');
}

@font-face {
    font-family: '江汉手书';
    src: url('ziti/江汉手书.ttf') format('truetype');
}

@font-face {
    font-family: '碳化硅叠黑体';
    src: url('ziti/碳化硅叠黑体.ttf') format('truetype');
}

@font-face {
    font-family: '站酷小薇LOGO体';
    src: url('ziti/站酷小薇LOGO体.otf') format('opentype');
}

@font-face {
    font-family: '站酷庆科黄油体';
    src: url('ziti/站酷庆科黄油体.ttf') format('truetype');
}

@font-face {
    font-family: '站酷快乐体';
    src: url('ziti/站酷快乐体.TTF') format('truetype');
}

@font-face {
    font-family: '站酷文艺体';
    src: url('ziti/站酷文艺体.ttf') format('truetype');
}

@font-face {
    font-family: '站酷酷黑';
    src: url('ziti/站酷酷黑.TTF') format('truetype');
}

@font-face {
    font-family: '站酷高端黑';
    src: url('ziti/站酷高端黑.TTF') format('truetype');
}

@font-face {
    font-family: '豪正黑简体';
    src: url('ziti/豪正黑简体.ttf') format('truetype');
}

@font-face {
    font-family: '迷你简太极';
    src: url('ziti/迷你简太极.ttf') format('truetype');
}

@font-face {
    font-family: '迷你简超粗圆';
    src: url('ziti/迷你简超粗圆.ttf') format('truetype');
}

@font-face {
    font-family: '黄凯桦律师手写体';
    src: url('ziti/黄凯桦律师手写体.ttf') format('truetype');
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header 样式 */
header {
    margin-bottom: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    font-family: '优设鲨鱼菲特健康体', sans-serif; /* 使用优设鲨鱼菲特健康体字体 */
    color: #ff9900; /* 橙色 */
}

.current-date {
    font-size: 1.2rem;
    white-space: nowrap;
    font-family: '字魂扁桃体', sans-serif; /* 使用字魂扁桃体字体 */
}

.current-date .date-part {
    color: rgb(243, 37, 37);
}

.current-date .weekday-part {
    color: rgb(44, 44, 252);
}

/* 日期筛选按钮 */
.date-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.date-filter-btn {
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.date-filter-btn:hover {
    background: #e0e0e0;
}

.date-filter-btn.active {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

/* 月份和年份标签样式 */
.date-filter-btn span {
    margin-left: 4px;
    font-weight: bold;
}

/* 日期选择器容器 */
.date-selector-container {
    margin-bottom: 20px;
}

.date-selector {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 周选择器 */
.week-days {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.week-day-btn {
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.week-day-btn:hover {
    background: #e0e0e0;
}

.week-day-btn.active {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

/* 月选择器 */
.weeks-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.week-btn {
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.week-btn:hover {
    background: #e0e0e0;
}

.week-btn.active {
    background: #FF9800;
    color: white;
    border-color: #FF9800;
}

/* 年选择器 */
.months-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.month-btn {
    padding: 8px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.month-btn:hover {
    background: #e0e0e0;
}

.month-btn.active {
    background: #9C27B0;
    color: white;
    border-color: #9C27B0;
}

/* 笔记容器样式 */
.notes-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.note-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    height: 200px;
}

.note-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.note-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0; /* 防止标题被压缩 */
}

.note-card .note-preview {
    flex-grow: 1;
    overflow: hidden;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    max-height: 120px; /* 限制预览内容的最大高度 */
    position: relative;
}

.note-card .note-preview::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.note-card .note-preview * {
    /* 保留原有样式 */
}

/* 确保预览中的样式能正确显示 */
.note-card .note-preview span[style] {
    display: inline-block;
}

.note-card .note-preview font {
    display: inline-block;
}

.note-card .date {
    font-size: 0.8rem;
    color: #999;
    text-align: right;
    flex-shrink: 0; /* 防止日期被压缩 */
}

.empty-state {
    text-align: center;
    grid-column: 1 / -1;
    padding: 40px;
}

.empty-state p {
    font-size: 1.2rem;
    color: #999;
    margin-bottom: 20px;
}

/* Modal 样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header input {
    border: none;
    font-size: 1.3rem;
    font-weight: bold;
    width: calc(100% - 30px);
    outline: none;
}

.close {
    color: #aaa;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #333;
}

.modal-body {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
}

#note-content {
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    font-size: 1rem;
    resize: none;
    outline: none;
    margin-top: 10px;
    overflow-y: auto;
    background: white;
}

#note-content:focus {
    border-color: #4CAF50;
}

.editor {
    width: 100%;
    height: 250px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    font-size: 1rem;
    outline: none;
    margin-top: 10px;
    overflow-y: auto;
    background: white;
}

.editor:empty:before {
    content: attr(placeholder);
    color: #999;
    font-style: italic;
}

.toolbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
    position: relative;
}

.toolbar-group {
    position: relative;
    display: inline-block;
}

.toolbar-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.toolbar-btn:hover {
    background: #e0e0e0;
}

.toolbar-btn.active {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

/* 工具栏输入框样式 */
.toolbar-input {
    width: 40px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
    font-size: 0.9rem;
    outline: none;
    text-align: center;
}

.toolbar-input:focus {
    border-color: #4CAF50;
}

/* 工具栏选择器样式 */
.toolbar-select {
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
    font-size: 0.9rem;
    outline: none;
    max-width: 150px;
}

.toolbar-select:focus {
    border-color: #4CAF50;
}

.note-date-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 10px;
    outline: none;
}

/* 表格控制按钮 */
.table-control {
    position: absolute;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    font-weight: bold;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.table-column-insert {
    background-color: #4CAF50;
    color: white;
    top: -9px;
    right: 10px;
}

.table-column-delete {
    background-color: #f44336;
    color: white;
    top: -9px;
    right: -9px;
}

.table-row-insert {
    background-color: #2196F3;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    left: -27px;
}

.table-row-delete {
    background-color: #f44336;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    left: -9px;
}

.table-control:hover {
    opacity: 0.9;
    transform: scale(1.15);
}

/* 表格样式 */
.editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    position: relative;
}

.editor table td,
.editor table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    position: relative;
}

.editor table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.editor table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* 预览表格样式 */
.preview-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.preview-editor table td,
.preview-editor table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.preview-editor table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.preview-editor table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* 按钮样式 */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    outline: none;
}

.btn:focus {
    outline: 2px solid rgba(0, 0, 0, 0.1);
}

/* 保存按钮 */
.save-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.save-btn:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.save-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 删除按钮 */
.delete-btn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.delete-btn:hover {
    background: linear-gradient(135deg, #e083eb 0%, #e5475c 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.delete-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 编辑按钮 */
.edit-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.edit-btn:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.edit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 模态框底部按钮容器 */
.modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* 简化的悬浮加号按钮 */
.floating-add-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.floating-add-btn:hover {
    background: #45a049;
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* 预览模态框样式 */
.preview-content {
    max-width: 800px;
}

.preview-content .modal-header {
    border-bottom: none;
}

.preview-content .modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}

.preview-content .modal-body {
    padding: 0 20px 20px;
}

.preview-date {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 15px;
}

.preview-editor {
    border: none;
    padding: 15px 0;
    font-size: 1rem;
    background: white;
    min-height: 300px;
}

.preview-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.preview-editor table td,
.preview-editor table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.preview-editor table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.preview-editor table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.close-preview {
    color: #aaa;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
}

.close-preview:hover {
    color: #333;
}

/* 登录/注册页面样式 */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #87CEEB, #ADD8E6);
}

.auth-form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #666;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group input:focus {
    border-color: #4CAF50;
    outline: none;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    transition: background-color 0.3s;
}

.login-btn {
    background-color: #4CAF50;
    color: white;
}

.login-btn:hover {
    background-color: #45a049;
}

.register-btn {
    background-color: #2196F3;
    color: white;
}

.register-btn:hover {
    background-color: #1976D2;
}

.auth-link {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

.auth-link a {
    color: #4CAF50;
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* 退出按钮样式 */
.logout-btn {
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-left: 10px;
}

.logout-btn:hover {
    background-color: #d32f2f;
}

.header-actions {
    display: flex;
    align-items: center;
}

/* 响应式按钮 */
@media screen and (max-width: 480px) {
    .btn {
        padding: 10px 15px;
        font-size: 1rem;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    .months-container {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .current-date {
        align-self: flex-end;
    }
    
    .preview-content {
        max-width: 95%;
    }
    
    .note-card {
        height: 180px; /* 在小屏幕上稍微减小高度 */
    }
}