/* style.css */
body { background-color: #1a202c; color: #cbd5e0; font-family: 'Segoe UI', sans-serif; }

/* 输入框通用样式 */
.input-box { width: 100%; background-color: #2d3748; border: 1px solid #4a5568; color: white; padding: 0.5rem; border-radius: 0.25rem; transition: border-color 0.2s; }
.input-box:focus { border-color: #63b3ed; outline: none; box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.2); }

/* 移除 number input 的默认箭头 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* AI 建议框 (可编辑) */
.ai-feedback-box {
    width: 100%;
    min-height: 200px;
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 0.25rem;
    padding: 1rem;
    color: #e2e8f0;
    font-size: 0.875rem;
    line-height: 1.6;
    resize: vertical;
}
.ai-feedback-box:focus { border-color: #9f7aea; outline: none; }

/* 图片上传容器 */
.image-drop-zone {
    border: 2px dashed #4a5568;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    background-color: #2d3748;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.image-drop-zone:hover { border-color: #63b3ed; background-color: #374151; }
.image-drop-zone.dragover { border-color: #48bb78; background-color: #1f2937; box-shadow: 0 0 10px rgba(72, 187, 120, 0.3); }

/* 图片缩略图网格 */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.thumb-container {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.25rem;
    overflow: hidden;
    border: 1px solid #4a5568;
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fc8181;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}
.thumb-remove:hover { background-color: #fc8181; color: white; }

/* 调试面板 */
.debug-panel {
    background-color: #1a202c;
    border: 1px solid #4a5568;
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    max-height: 150px;
    overflow-y: auto;
    margin-top: 0.5rem;
    display: none;
}
.debug-panel.show { display: block; }

/* 按钮动画 */
.spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid #ffffff;
    width: 1rem;
    height: 1rem;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
    display: none;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading .spinner { display: inline-block; }
.btn-disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* 开关样式 */
.toggle-checkbox:checked { right: 0; border-color: #68D391; }
.toggle-checkbox:checked + .toggle-label { background-color: #68D391; }

/* --- V2.0 新增: 图片预览模态框 (Lightbox) --- */

/* 遮罩层背景 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* 深色半透明背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保在最上层 */
    opacity: 0;
    pointer-events: none; /* 隐藏时不阻挡点击 */
    transition: opacity 0.3s ease; /* 渐变动画 */
    cursor: zoom-out; /* 提示点击可关闭 */
}

/* 激活状态 */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 大图样式 */
.modal-img {
    max-width: 60%; /* 核心需求: 60% 宽度 */
    max-height: 90vh; /* 高度不能超过视口 */
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* 激活时图片放大回正常 */
.modal-overlay.active .modal-img {
    transform: scale(1);
}

/* 缩略图现在是可点击的 */
.thumb-img {
    cursor: zoom-in;
    transition: transform 0.2s;
}
.thumb-img:hover {
    transform: scale(1.05);
}

/* --- V2.1.0 新增: 日期锁定按钮特效 --- */
#btnDateLock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性动画 */
    background-color: rgba(0,0,0,0.2); /* 默认微深底色 */
}

#btnDateLock:hover {
    transform: scale(1.1); /* 悬停轻微放大 */
    background-color: rgba(0,0,0,0.4);
}

#btnDateLock i {
    transition: transform 0.3s ease;
}

/* 激活状态下的图标跳动 */
#btnDateLock.locked i {
    animation: lockShake 0.4s ease-in-out;
}

@keyframes lockShake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}