/*
 * LikeGirl v5.2.1-Stable 二次开发新增样式与动画
 * 本文件仅包含新增功能模块(纪念日/悄悄话/时间胶囊/恋爱时间轴/声音留言墙)的专属样式与新动画
 * 布局与通用样式全部沿用原项目 Index.css / Content.css / Leaving.css 等
 */

/* ========== 首页新功能卡片图标 ========== */
/* 新卡片沿用原项目 .card / .card-b 结构, 此处仅提供图标圆圈样式 */
.card .lg-card-ico,
.card-b .lg-card-ico{
    width: 3rem;
    height: 3rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: .85rem;
}
.card .lg-card-ico svg,
.card-b .lg-card-ico svg{
    width: 1.5rem;
    height: 1.5rem;
    stroke: #fff;
}
.lg-g1{ background: linear-gradient(135deg,#f77062 0%, #fe5196 100%); }
.lg-g2{ background: linear-gradient(135deg,#b06ab3 0%, #4568dc 100%); }
.lg-g3{ background: linear-gradient(135deg,#43e97b 0%, #38f9d7 100%); }
.lg-g4{ background: linear-gradient(135deg,#fa709a 0%, #fee140 100%); }
.lg-g5{ background: linear-gradient(135deg,#5ee7df 0%, #b490ca 100%); }

/* ========== 纪念日倒计时 ========== */
.anni-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}
.anni-item{
    flex: 1 1 240px;
    min-width: 240px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08);
    transition: transform .35s ease, box-shadow .35s ease;
    background: #fff;
    position: relative;
}
.anni-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.16);
}
.anni-topbar{
    padding: 1.1rem 1.3rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.anni-topbar .anni-name{
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.anni-topbar .anni-badge{
    font-size: .75rem;
    padding: .2rem .7rem;
    border-radius: 10rem;
    background: rgba(255,255,255,.25);
    white-space: nowrap;
}
.anni-body{
    padding: 1.2rem 1.3rem 1.4rem;
    text-align: center;
}
.anni-num{
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: #333;
}
.anni-num small{ font-size: 1.1rem; color:#999; margin-left: .3rem; }
.anni-count{
    margin-top: .6rem;
    font-size: .95rem;
    color: #888;
    font-variant-numeric: tabular-nums;
}
.anni-date{
    margin-top: .4rem;
    font-size: .85rem;
    color: #aaa;
}
.anni-note{
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px dashed #eee;
    font-size: .85rem;
    color: #999;
}
.anni-item.passed .anni-num{ color: #bbb; }

/* ========== 恋爱事件时间轴 ========== */
.tl-wrap{
    position: relative;
    padding: 1rem 0 .5rem;
    margin-left: .6rem;
}
.tl-wrap::before{
    content: "";
    position: absolute;
    left: .5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(233,30,99,.5), rgba(63,81,181,.5));
    border-radius: 2px;
}
.tl-year{
    position: relative;
    padding-left: 2.2rem;
    margin: 1.6rem 0 .8rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
}
.tl-year::before{
    content: "";
    position: absolute;
    left: .14rem;
    top: .45rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: #e91e63;
    box-shadow: 0 0 0 4px rgba(233,30,99,.15);
}
.tl-item{
    position: relative;
    padding: 0 0 1.1rem 2.2rem;
}
.tl-item::before{
    content: "";
    position: absolute;
    left: .3rem;
    top: .55rem;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3f51b5;
    box-shadow: 0 0 0 3px rgba(63,81,181,.12);
}
.tl-card{
    background: #fff;
    border-radius: .9rem;
    padding: 1rem 1.2rem;
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.06);
    transition: transform .3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tl-card:hover{ transform: translateX(6px); }
.tl-card img{
    width: 5.2rem;
    height: 5.2rem;
    object-fit: cover;
    border-radius: .6rem;
    flex-shrink: 0;
}
.tl-info{ min-width: 0; }
.tl-info .tl-name{ font-size: 1.05rem; font-weight: 600; color: #333; }
.tl-info .tl-time{ font-size: .82rem; color: #aaa; margin-top: .3rem; }
.tl-info .tl-num{ width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center; border-radius: 50%; background: #fdebed; color: #e91e63; font-size: .8rem; display: inline-block; margin-right: .4rem; }

/* ========== 悄悄话 ========== */
.secret-lock-box{
    max-width: 420px;
    margin: 2rem auto;
    background: #fff;
    border-radius: 1rem;
    padding: 2.2rem 2rem;
    text-align: center;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08);
}
.secret-lock-ico{
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg,#667eea,#764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.secret-lock-ico svg{ width: 2rem; height: 2rem; fill: #fff; }
.secret-lock-box p{ color: #999; margin-bottom: 1.2rem; }
.secret-form{ max-width: 560px; margin: 0 auto; }
.secret-form input[type="text"], .secret-form input[type="password"]{
    flex: 1;
}

/* ========== 时间胶囊 ========== */
.capsule-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.2rem;
}
.capsule-item{
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.07);
    transition: transform .3s ease;
}
.capsule-item:hover{ transform: translateY(-4px); }
.capsule-head{
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg,#f093fb,#f5576c);
}
.capsule-head.sealed{ background: linear-gradient(135deg,#4b6cb7,#182848); }
.capsule-head .capsule-title{ font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capsule-status{ font-size: .72rem; padding: .18rem .6rem; border-radius: 10rem; background: rgba(255,255,255,.22); white-space: nowrap; }
.capsule-body{ padding: 1.1rem 1.2rem; }
.capsule-meta{ font-size: .8rem; color: #aaa; margin-bottom: .7rem; }
.capsule-content{
    font-size: .95rem;
    color: #555;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}
.capsule-seal{
    border: 1.5px dashed #c3c9d9;
    color: #8b96ad;
    background: rgba(244,246,250,.6);
    text-align: center;
    padding: 1.4rem 1rem;
    border-radius: .5rem;
    font-size: .9rem;
    line-height: 2;
}
.capsule-seal .seal-big{ display:block; font-size: 1rem; color: #667eea; font-weight:600; }
@keyframes lg-seal-swing{
    0%{ transform: rotate(-2deg); }
    50%{ transform: rotate(2deg); }
    100%{ transform: rotate(-2deg); }
}
.capsule-seal .seal-stamp{
    display: inline-block;
    margin-top: .4rem;
    color: #f5576c;
    font-weight: 700;
    animation: lg-seal-swing 2.4s ease-in-out infinite;
}
@keyframes lg-capsule-open{
    0%{ opacity: 0; transform: translateY(12px) scale(.98); }
    100%{ opacity: 1; transform: translateY(0) scale(1); }
}
.capsule-open-anim{ animation: lg-capsule-open .6s ease both; }

/* ========== 声音留言墙 ========== */
.voice-item{
    background: #fff;
    border-radius: 1rem;
    padding: 1.2rem 1.3rem;
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.06);
    margin-bottom: 1rem;
}
.voice-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .8rem;
}
.voice-name{
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: #333;
}
.voice-name .voice-avatar{
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg,#f093fb,#f5576c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
}
.voice-time{ font-size: .78rem; color: #aaa; }
.voice-text{ font-size: .9rem; color: #666; margin: .7rem .1rem; line-height: 1.7; }
.voice-player{
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #f7f8fb;
    border-radius: .8rem;
    padding: .6rem;
}
.voice-play-btn{
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg,#667eea,#764ba2);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.voice-play-btn:hover{ transform: scale(1.08); box-shadow: 0 .3rem .8rem rgba(102,126,234,.4); }
.voice-play-btn svg{ width: 1.1rem; height: 1.1rem; fill: #fff; }
.voice-wave{
    flex: 1;
    height: 56px;
    cursor: pointer;
}
.voice-wave canvas{
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    background: #eef0f6;
    display: block;
}
.voice-dur{ font-size: .78rem; color: #999; flex-shrink: 0; width: 3rem; text-align: right; }

/* 录音区 */
.voice-recorder{
    background: #fff;
    border-radius: 1rem;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.06);
    margin-bottom: 1.4rem;
}
.rec-row{
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    margin-bottom: .8rem;
}
.rec-btn{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: none;
    border-radius: 10rem;
    padding: .55rem 1.4rem;
    font-size: .92rem;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg,#43e97b,#38f9d7);
    color: #1d5c3a;
    font-weight: 600;
    transition: transform .2s ease, filter .2s ease;
}
.rec-btn.stop{ background: linear-gradient(135deg,#f77062,#fe5196); color: #fff; }
.rec-btn:disabled{ filter: grayscale(.6); cursor: not-allowed; }
.rec-btn .rec-dot{
    width: .7rem; height: .7rem; border-radius: 50%; background: #e53935; display: inline-block;
}
.rec-btn:not(.stop) .rec-dot{ animation: lg-blink 1s ease infinite; }
@keyframes lg-blink{
    0%,100%{ opacity: 1; transform: scale(1); }
    50%{ opacity: .3; transform: scale(.8); }
}
@keyframes lg-rec-pulse{
    0%{ box-shadow: 0 0 0 0 rgba(229,57,53,.5); }
    100%{ box-shadow: 0 0 0 14px rgba(229,57,53,0); }
}
.rec-btn.recording{ animation: lg-rec-pulse 1.4s ease-out infinite; }
.rec-tip{ font-size: .8rem; color: #aaa; }

/* ========== 通用新动画 ========== */
@keyframes lg-float{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}
.lg-float{ animation: lg-float 4s ease-in-out infinite; }
@keyframes lg-fadeIn{
    from{ opacity: 0; transform: translateY(16px); }
    to{ opacity: 1; transform: translateY(0); }
}
.lg-fadeIn{ animation: lg-fadeIn .7s ease both; }
.lg-fadeIn.d1{ animation-delay: .1s; }
.lg-fadeIn.d2{ animation-delay: .2s; }
.lg-fadeIn.d3{ animation-delay: .3s; }
.lg-fadeIn.d4{ animation-delay: .4s; }

/* 响应式微调 */
@media (max-width: 767px){
    .tl-wrap{ margin-left: .2rem; }
    .tl-card img{ width: 4rem; height: 4rem; }
    .anni-num{ font-size: 2.4rem; }
}