* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #232526;
    background: -webkit-linear-gradient(to right, #414345, #232526); 
    background: linear-gradient(to right, #414345, #232526);

    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    color: #f0f0f0;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;

    padding: 15vh 15vw;


    
}

.longterm, .shortterm, .thoughts, .completed {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 12px;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: background-color 0.3s ease-in-out;
    transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1);

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.add-item-form {
    display: none;
}

.add-item-btn {
    /* 1. 布局与尺寸 */
    display: flex;
    align-items: center;
    width: 100%; /* 默认状态下是长条形 */
    height: 48px;
    padding: 0 18px; /* 左右内边距 */
    
    /* 2. 外观 (幽灵按钮风格) */
    background-color: transparent; /* 背景完全透明 */
    border: none; /* 移除所有边框 */
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.4); /* 文字颜色变淡 */
    cursor: pointer;
    text-align: left; /* 文字靠左 */

    /* 3. 动画 */
    transition: all 0.3s ease;
}

.add-item-btn .plus-icon {
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 12px;
}

.add-item-btn::after {
    content: '添加新条目';
    font-size: 1em;
}

.add-item-form.is-editing .add-item-btn::after {
    display: none;
}

.add-item-input {
    width: 0;
    opacity: 0;
    border: none;
    padding: 0;

}

.add-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
    color: white;
}

.is-focused .add-item-form {
    display: flex;
    gap: 10px;
    width: 100%;
}

.is-focused .add-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 当表单处于编辑状态时 展开输入框 */
.add-item-form.is-editing .add-item-input {
    flex-grow: 1;
    background-color: rgba(0,0,0,0.2);
    color: #f0f0f0;
    border-radius: 8px;
    font-size: 1em;

    width: 100%;
    opacity: 1;
    padding: 10px 15px;
    border: 2px solid #00aaff;

    transition: all 0.3s ease-in-out;
}

/* 按钮收缩成圆形 */
.add-item-form.is-editing .add-item-btn {
    width: 44px;
    border-radius: 50%;
    border-style: solid;
    background-color: #4A5568; /* 一个冷静的、带蓝调的灰色 */
    color: #E2E8F0; /* 配套使用一个柔和的亮灰色文字 */
    padding: 0;

    color: white;
}

.add-item-form.is-editing .add-item-btn .plus-icon {
    margin-right: 0; /* 居中时不需要外边距 */
}

.longterm::before, .shortterm::before, .thoughts::before, .completed::before {
    content: attr(data-title);
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);

    font-size: 8em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.05);

    pointer-events: none;

    white-space: nowrap;
}

.container:not(.focused-mode) .longterm:hover,
.container:not(.focused-mode) .shortterm:hover,
.container:not(.focused-mode) .thoughts:hover,
.container:not(.focused-mode) .completed:hover {
    
    /* 微微上浮效果 */
    transform: translateY(-5px);
    
    /* 边框变亮 */
    border-color: rgba(255, 255, 255, 0.5);

    /* 叠加两个背景 */
    background-size: 200% 100%, 100% 100%; /* 第一个给扫光用，第二个给金属底色用 */
    background-position: -100% 0, 0 0; /* 扫光的初始位置在左边屏幕外 */
    
    background-image: 
        /* 背景层1：扫光*/
        linear-gradient(110deg, 
            transparent 40%, 
            rgba(255, 255, 255, 0.2) 50%, 
            transparent 60%),
        
        /* 背景层2：金属质感底色 */
        linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.15), 
            rgba(255, 255, 255, 0.05));

    /* 触发扫光动画 */
    animation: metal-sweep 1s ease-out forwards;
}

@keyframes metal-sweep {
    /* 动画开始*/
    from {
        background-position: -100% 0, 0 0;
    }
    
    /* 动画结束 */
    to {
        /* 把扫光层移动到右边屏幕外 */
        background-position: 100% 0, 0 0;
    }
}

.container.focused-mode {
    display:block;
    padding:15vh 15vw;
}

.container.focused-mode .longterm,
.container.focused-mode .shortterm,
.container.focused-mode .thoughts,
.container.focused-mode .completed {
    display: none;
}

.container.focused-mode .is-focused {
    display: flex; 
    flex-direction: column; 
    width: 100%;
    height: 100%;
    
    /*视觉美化*/
    background-color: rgba(35, 37, 38, 0.8); /* 半透明的背景 */
    backdrop-filter: blur(20px); /* 毛玻璃效果，让背景更模糊 */
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px; 
    padding: 30px; 
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);

}

.content-list {
    display: flex;
    flex-direction: column;
}

/* 这是每个内容框上条目的样式 */
.goal-item {
    background-color: transparent; /* 背景透明，让它更融入 */
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 10px;

    display: flex; /* 使用 Flexbox 来对齐图标和文本 */
    align-items: center;
    gap: 12px;

    position: relative;
    
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.goal-item:hover {
    background-color: rgba(255, 255, 255, 0.05); /* 悬停时整个条目有淡淡的背景 */
}

/* 用伪元素 ::before 来创建一个“复选框” */
.goal-item::before {
    content: ''; /* 内容为空，我们自己画 */
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%; /* 圆形的复选框 */
    flex-shrink: 0; /* 防止它被压缩 */
    transition: all 0.2s ease;
}

.goal-item:hover::before {
    border-color: #00aaff;
}

/* (未来功能) 当条目被标记为完成时，可以给它加一个 .completed-item 类 */
.goal-item.is-completed {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through; /* 添加删除线 */
}

.goal-item.is-completed::before {
    background-color: #00aaff;
    border-color: #00aaff;
    /* 可以在中间再加一个对勾图标 */
}

.completed .goal-item {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: line-through;
    cursor: default; /* 已完成的条目不可再交互 */
}

.completed .goal-item:hover {
    background-color: transparent; /* 取消悬停效果 */
}

/* “已完成”状态的复选框样式 */
.completed .goal-item::before {
    background-color: #4CAF50; /* 填充为绿色 */
    border-color: #4CAF50;
    content: '✓'; /* 显示对勾 */
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 18px; /* 垂直居中对勾 */
}

/* 消除动画 */
.goal-item.is-disappearing {
    animation: fade-out 0.4s ease-out forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.85);
    }
}

/* 1. 晃动动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 2. 当条目进入“待删除”状态时的样式 */
.goal-item.is-deleting {
    /* 触发晃动动画 */
    animation: shake 0.5s ease-in-out;
    /* 让条目本身也带一点危险的红色提示 */
    background-color: rgba(231, 76, 60, 0.1);
}

/* 3. 创建“血条”伪元素 */
.goal-item.is-deleting::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* 血条的高度 */
    background-color: #e74c3c; /* 红色 */
    border-radius: 0 0 8px 8px; /* 底部圆角和父元素匹配 */
    
    /* 触发血条消退动画 */
    animation: health-bar-drain 2s linear forwards;
}

/* 4. 血条消退动画 */
@keyframes health-bar-drain {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}