.login-screen{height:100vh;display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:linear-gradient(135deg,var(--secondary-color),var(--bg-color))}.login-card{background:var(--card-bg);padding:40px;border-radius:var(--border-radius);box-shadow:var(--shadow);text-align:center;width:90%;max-width:400px}.login-card h1{margin-bottom:10px;font-size:24px;color:var(--text-main)}.subtitle{color:var(--text-light);margin-bottom:30px;font-size:14px}.input-group{display:flex;margin-bottom:10px;border:1px solid #ddd;border-radius:8px;overflow:hidden}.input-group input{flex:1;padding:12px;border:none;outline:none;background:transparent;color:var(--text-main)}.input-group button{padding:0 15px;background:#eee;color:#555}.timers-panel{max-height:0;overflow:hidden;opacity:0;transform:translateY(-15px) scale(.97);transform-origin:top center;background:linear-gradient(135deg,#fffffff2,#ffffffd9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:16px;margin-top:0;box-shadow:0 8px 32px #ff8ab51f,inset 0 1px #fffc;border:1px solid rgba(255,138,181,.15);transition:opacity .3s cubic-bezier(.34,1.56,.64,1),transform .3s cubic-bezier(.34,1.56,.64,1),max-height .35s cubic-bezier(.4,0,.2,1),margin-top .3s cubic-bezier(.4,0,.2,1)}.dark-mode .timers-panel{background:linear-gradient(135deg,#252541f2,#2a2a4ae6);border-color:#ff8ab533;box-shadow:0 8px 32px #00000040,inset 0 1px #ffffff0d}.timers-panel.expanded{opacity:1;transform:translateY(0) scale(1);max-height:700px;margin-top:16px;box-shadow:0 12px 40px #ff8ab52e,inset 0 1px #fffc}.timers-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,138,181,.15);background:#ff8ab508}.dark-mode .timers-panel-header{border-bottom-color:#ff8ab533;background:#ff8ab50d}.timers-panel-title{font-size:16px;font-weight:600;color:var(--text-main);display:flex;align-items:center;gap:8px}.timers-panel-title svg{color:var(--primary-color);width:20px;height:20px;flex-shrink:0}.timers-panel-actions{display:flex;gap:8px}.timers-panel-actions button{width:auto;padding:8px 14px;font-size:12px;border-radius:10px;background:#ff8ab51a;border:1px solid rgba(255,138,181,.2);color:var(--primary-color);transition:all .3s ease}.timers-panel-actions button:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.timers-list{padding:16px 20px;max-height:450px;overflow-y:auto}.timers-empty{text-align:center;padding:40px 20px;color:var(--text-light)}.timers-empty svg{font-size:36px;margin-bottom:12px;color:var(--primary-color);opacity:.4}.timer-item{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(135deg,#fffc,#fff9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;margin-bottom:10px;border:1px solid rgba(255,138,181,.12);box-shadow:0 4px 16px #ff8ab514,inset 0 1px #fff9;transition:all .35s cubic-bezier(.4,0,.2,1)}.dark-mode .timer-item{background:linear-gradient(135deg,#ffffff14,#ffffff0a);border-color:#ff8ab526;box-shadow:0 4px 16px #00000026,inset 0 1px #ffffff0d}.timer-item:hover{border-color:#ff8ab559;background:linear-gradient(135deg,#fffffff2,#fffc);transform:translateY(-2px);box-shadow:0 8px 24px #ff8ab526,inset 0 1px #ffffffb3}.dark-mode .timer-item:hover{background:linear-gradient(135deg,#ffffff1f,#ffffff0f)}.timer-item.pinned{border-color:var(--primary-color);background:linear-gradient(135deg,#ff8ab51f,#ff8ab50f);box-shadow:0 4px 16px #ff8ab526,inset 0 1px #ffffff80}.timer-item-info{flex:1;min-width:0}.timer-item-name{font-size:14px;font-weight:600;color:var(--text-main);margin-bottom:6px;display:flex;align-items:center;gap:8px}.timer-item-name input{font-size:14px;font-weight:600;color:var(--text-main);border:1px solid rgba(255,138,181,.25);border-radius:8px;padding:6px 10px;background:linear-gradient(135deg,#ffffffe6,#ffffffb3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:140px;transition:all .3s ease;box-shadow:0 2px 8px #ff8ab514,inset 0 1px #ffffff80;vertical-align:middle;line-height:1.5;height:auto;box-sizing:border-box}.dark-mode .timer-item-name input{background:linear-gradient(135deg,#1a1a2ee6,#252541cc);border-color:#ff8ab54d;color:var(--text-main)}.timer-item-name input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #ff8ab533,0 4px 12px #ff8ab526}.timer-item-type{font-size:11px;color:var(--text-light);display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:linear-gradient(135deg,#ff8ab51f,#ff8ab514);border-radius:20px;border:1px solid rgba(255,138,181,.15);transition:all .3s ease}.timer-item-type svg{width:10px;height:10px}.timer-item-type.countdown{color:var(--primary-color);background:linear-gradient(135deg,#ff8ab52e,#ff8ab51a);border-color:#ff8ab54d}.timer-item-type.countup{color:#6ab04c;background:linear-gradient(135deg,#6ab04c2e,#6ab04c1a);border-color:#6ab04c4d}.timer-item-display{font-size:22px;font-weight:800;color:var(--text-main);font-variant-numeric:tabular-nums;letter-spacing:1px;background:linear-gradient(135deg,var(--primary-color) 0%,#ff8fab 50%,var(--primary-color) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:timeShimmer 3s ease-in-out infinite}@keyframes timeShimmer{0%,to{background-position:0% center}50%{background-position:100% center}}.dark-mode .timer-item-display{background:linear-gradient(135deg,#ffb8d0,#ff8fab,#ffb8d0);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.timer-item-actions{display:flex;gap:6px}.timer-item-actions button{width:auto;padding:8px 10px;font-size:12px;border-radius:10px;background:#ff8ab514;border:1px solid rgba(255,138,181,.15);color:var(--text-light);transition:all .3s ease}.timer-item-actions button:hover{opacity:1;transform:translateY(-2px)}.timer-item-actions .pin-btn{color:var(--primary-color);background:#ff8ab51a;border-color:#ff8ab533}.timer-item-actions .pin-btn:hover,.timer-item-actions .pin-btn.pinned{background:var(--primary-color);color:#fff}.timer-item-actions .tl-danger{color:#e74c3c;background:#e74c3c14;border-color:#e74c3c26}.timer-item-actions .tl-danger:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}.timers-add-form{padding:16px 20px;border-top:1px solid rgba(255,138,181,.15);background:linear-gradient(180deg,#ff8ab508,#ff8ab50f);border-radius:0 0 16px 16px}.dark-mode .timers-add-form{border-top-color:#ff8ab533;background:linear-gradient(180deg,#ff8ab50d,#ff8ab514)}.timers-add-form-single-row{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}.timers-add-form-single-row input,.timers-add-form-single-row select{height:38px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,138,181,.25);background:linear-gradient(135deg,#fffffff2,#ffffffd9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--text-main);font-size:13px;transition:all .3s ease;box-shadow:0 2px 8px #ff8ab514,inset 0 1px #ffffff80;box-sizing:border-box;line-height:38px}.dark-mode .timers-add-form-single-row input,.dark-mode .timers-add-form-single-row select{background:linear-gradient(135deg,#1a1a2ef2,#252541e6);border-color:#ff8ab540;color:var(--text-main)}.timers-add-form-single-row input:focus,.timers-add-form-single-row select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #ff8ab526,0 4px 12px #ff8ab51a}.timer-input-name{flex:1.5;min-width:60px;max-width:120px;height:38px;padding:0 12px;box-sizing:border-box}.timer-input-date{flex:2;min-width:140px;max-width:180px;height:38px;padding:0 12px;box-sizing:border-box}.timer-type-toggle{width:38px;min-width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,138,181,.25);background:linear-gradient(135deg,#fffffff2,#ffffffd9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--primary-color);font-size:14px;flex-shrink:0;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #ff8ab514,inset 0 1px #ffffff80;line-height:38px;overflow:hidden}.dark-mode .timer-type-toggle{background:linear-gradient(135deg,#1a1a2ef2,#252541e6)}.timer-type-toggle svg,.timer-type-toggle i{width:16px;height:16px;display:block;line-height:38px}.timer-type-toggle:hover{border-color:var(--primary-color);transform:scale(1.05);box-shadow:0 4px 12px #ff8ab533}.timer-type-toggle:active{transform:scale(.95)}.timer-type-toggle.countdown,.timer-type-toggle.countup{color:inherit}.timer-type-toggle.countdown{color:var(--primary-color);background:linear-gradient(135deg,#ff8ab526,#ff8ab514);border-color:#ff8ab566}.timer-type-toggle.countup{color:#6ab04c;background:linear-gradient(135deg,#6ab04c26,#6ab04c14);border-color:#6ab04c66}.timer-add-btn{width:38px;min-width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px!important;font-size:16px;flex-shrink:0;box-shadow:0 4px 12px #ff8ab54d,inset 0 1px #ffffff4d}.timer-add-btn.square-btn{aspect-ratio:1}.timer-add-btn svg{width:18px;height:18px;display:block}.timer-add-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #ff8ab566,inset 0 1px #fff6}.timer-add-btn:active{transform:scale(.95)}.pinned-timers-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;justify-content:center;opacity:1;max-height:200px;transition:opacity .3s ease,max-height .3s ease,transform .3s ease;transform:translateY(0)}.pinned-timers-bar.scrolled-hide{opacity:0;max-height:0;transform:translateY(-10px);pointer-events:none}.pinned-timers-bar.hidden-when-panel-open{opacity:0;max-height:0;transform:translateY(-10px);pointer-events:none;transition:opacity .35s ease,max-height .35s ease,transform .35s ease}@keyframes slideDownFade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.pinned-timer-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(135deg,#ff8ab51f,#ff8ab50f);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,138,181,.25);border-radius:28px;font-size:13px;color:var(--text-main);box-shadow:0 4px 16px #ff8ab51a,inset 0 1px #fff6;transition:all .3s cubic-bezier(.4,0,.2,1);animation:chipSlideIn .4s cubic-bezier(.4,0,.2,1) forwards;opacity:0}.pinned-timer-chip:nth-child(1){animation-delay:0ms}.pinned-timer-chip:nth-child(2){animation-delay:70ms}.pinned-timer-chip:nth-child(3){animation-delay:.14s}.pinned-timer-chip:nth-child(4){animation-delay:.21s}.pinned-timer-chip:nth-child(5){animation-delay:.28s}.pinned-timer-chip:nth-child(n+6){animation-delay:.35s}@keyframes chipSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.pinned-timer-chip:hover{background:linear-gradient(135deg,#ff8ab533,#ff8ab51a);transform:translateY(-2px);box-shadow:0 6px 20px #ff8ab52e,inset 0 1px #ffffff80}.pinned-timer-chip svg{width:16px;height:16px;color:var(--primary-color);flex-shrink:0}.pinned-timer-chip .timer-label{color:var(--text-light);font-weight:500}.pinned-timer-chip .timer-value{font-weight:700;color:var(--primary-color);font-variant-numeric:tabular-nums;font-family:SF Mono,Consolas,Roboto Mono,monospace;letter-spacing:.5px;font-size:15px}@media (max-width: 768px){.timers-panel.expanded{max-height:450px;margin-top:12px}.timers-panel-header{padding:12px 14px}.timers-panel-title{font-size:14px}.timers-list{padding:12px 14px;max-height:280px}.timer-item{padding:12px;gap:8px;border-radius:12px}.timer-item-name{font-size:13px}.timer-item-name input{font-size:13px;width:100px;padding:4px 8px}.timer-item-display{font-size:18px}.timer-item-actions button{padding:6px 8px;font-size:10px}.timers-add-form{padding:12px 14px}.timers-add-form-single-row{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.timers-add-form-single-row::-webkit-scrollbar{display:none}.timer-input-name{flex:1.5;min-width:60px;width:auto}.timer-input-date{flex:1.5;min-width:80px;width:auto}.timer-type-toggle{width:44px;min-width:44px;height:44px;flex-shrink:0}.timer-type-toggle svg{width:16px;height:16px}.timer-add-btn{width:44px;min-width:44px;height:44px;border-radius:12px!important;padding:0;flex-shrink:0}.timer-add-btn svg{width:20px;height:20px}.pinned-timers-bar{gap:8px;margin-top:10px}.pinned-timer-chip{padding:8px 12px;font-size:11px}.pinned-timer-chip svg{width:14px;height:14px}.pinned-timer-chip .timer-value{font-size:13px}}@media (max-width: 380px){.timers-add-form-single-row{grid-template-columns:1fr}.timer-input-name,.timer-input-type,.timer-input-date{grid-column:1 / 2;width:100%}.timer-add-btn{grid-column:1 / 2}.timer-item{flex-wrap:wrap;border-radius:10px}.timer-item-display{width:100%;margin-top:8px;font-size:16px}}header{background:var(--card-bg);padding:clamp(14px,2.2vw,20px);box-shadow:var(--shadow);position:sticky;top:0;z-index:1000;margin-bottom:24px;background:linear-gradient(180deg,rgba(255,138,181,.08) 0%,var(--card-bg) 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow .5s ease,background .5s ease}header.scroll-level-2,header.scroll-level-3,header.scroll-level-4{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--card-bg)}header.header-scrolled{box-shadow:0 8px 30px #00000026}header.header-scrolled nav{opacity:1;margin-top:0;padding-top:8px}.countdown-wrapper{text-align:center;max-width:800px;margin:20px auto;position:relative}.timers-wrapper{width:100%}.scrolled-hide{opacity:0;max-height:0;overflow:hidden;margin:0;padding:0;pointer-events:none;transition:opacity .3s ease,max-height .35s ease,margin .35s ease,padding .35s ease}.logo.scrolled-hide{opacity:0;max-height:0;overflow:hidden;margin:0;padding:0;pointer-events:none}.header-top,.countdown-container,.logo{transition:opacity .3s ease}header.scrolled-shadow .header-actions{opacity:1;max-height:none;overflow:visible;margin:0;padding:0}.header-top{display:flex;justify-content:space-between;align-items:center;max-width:800px;margin-left:auto;margin-right:auto;gap:12px;flex-wrap:wrap}.logo{font-size:clamp(18px,3vw,22px);font-weight:700;color:var(--primary-color);max-width:100%;white-space:nowrap;overflow:visible;text-overflow:ellipsis;padding:8px;margin:-8px;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--primary-color) 0%,#ff8fab 50%,var(--primary-color) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logoShimmer 3s ease-in-out infinite}@keyframes logoShimmer{0%,to{background-position:0% center}50%{background-position:100% center}}.logo .heart-pulse{color:var(--primary-color);font-size:1.1em;animation:heartBeat 1.5s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(255,138,181,.4))}@keyframes heartBeat{0%,to{transform:scale(1)}10%{transform:scale(1.15)}20%{transform:scale(1)}30%{transform:scale(1.1)}40%{transform:scale(1)}}.logo svg,.logo .fa-icon{display:inline-block;vertical-align:middle}.header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.header-actions button{font-size:16px;margin-left:0;color:var(--text-light);background:none;border:none;cursor:pointer;padding:8px 10px;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.header-actions button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#ff8ab526,#ffb7c51a);opacity:0;transition:opacity .3s ease;border-radius:8px}.header-actions button:hover:before{opacity:1}.header-actions button:hover{color:var(--primary-color);transform:translateY(-2px)}.header-actions button:active{transform:scale(.95)}.account-badge{display:inline-flex;align-items:center;justify-content:center;min-height:32px;min-width:88px;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,183,197,.65);background:#ffb7c524;color:var(--text-main);font-size:13px;font-weight:600;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 8px #ff8ab526,inset 0 1px #ffffff4d;transition:all .3s cubic-bezier(.4,0,.2,1)}.account-badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff8ab540,inset 0 1px #ffffff4d}.account-badge #current-account-text{display:block;text-align:center;line-height:1.2;white-space:nowrap}.account-badge.account-badge-xiaoyu{border-color:#b9defa;background:linear-gradient(135deg,#b9defa4d,#e8f5ff33);color:#2e5f83;box-shadow:0 2px 8px #b9defa4d,inset 0 1px #fff6}.account-badge.account-badge-xiaoyu i,.account-badge.account-badge-xiaoyu svg{color:#b9defa}.account-badge.account-badge-xiaoqi{border-color:#ffc7da;background:linear-gradient(135deg,#ffc7da66,#fff0f64d);color:#8b4f68;box-shadow:0 2px 8px #ffc7da59,inset 0 1px #fff6}.account-badge.account-badge-xiaoqi i,.account-badge.account-badge-xiaoqi svg{color:#ffc7da}.dark-mode .account-badge{border-color:#fff3;background:#ffffff0f}.dark-mode .account-badge.account-badge-xiaoyu{border-color:#a8ddffb3;background:#6ab0dd33;color:#dcefff}.dark-mode .account-badge.account-badge-xiaoqi{border-color:#ffc7dab3;background:#d287a838;color:#ffe7f1}.countdown-container{text-align:center;max-width:800px;margin:20px auto;position:relative}.countdown-container:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px;height:140px;background:linear-gradient(135deg,#ff8ab526,#ffb7c51a,#ff8fb826);border-radius:50%;filter:blur(30px);pointer-events:none;z-index:-1}.countdown-container>p{font-size:clamp(16px,3vw,20px);color:var(--text-light);margin-bottom:8px;font-weight:500;letter-spacing:.5px;position:relative}.countdown-container>p:before,.countdown-container>p:after{content:'"';color:var(--primary-color);font-size:24px;font-weight:700;opacity:.6}.countdown-container>p:before{margin-right:4px}.countdown-container>p:after{margin-left:4px}.countdown{display:flex;justify-content:center;gap:clamp(8px,2vw,16px);margin-top:16px;flex-wrap:wrap;perspective:1000px}.time-block{background:linear-gradient(135deg,#ffffff40,#ffffff1a);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:var(--primary-color);padding:clamp(12px,2vw,18px);border-radius:16px;min-width:clamp(65px,14vw,85px);display:flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 4px 15px #ff8ab526,inset 0 1px #fff6}.time-block:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);border-radius:16px 16px 0 0;pointer-events:none}.time-block:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 15px 35px #ff8ab540,inset 0 1px #ffffff80;border-color:#ff8ab580}.time-block:active{transform:scale(.96)}.time-block span{font-size:clamp(22px,5vw,32px);font-weight:800;line-height:1.1;text-shadow:0 2px 4px rgba(255,138,181,.2);transition:transform .2s ease}.time-block span.flip{animation:numberFlip .3s ease-out}@keyframes numberFlip{0%{transform:translateY(0);opacity:1}50%{transform:translateY(-5px);opacity:.5}to{transform:translateY(0);opacity:1}}.time-block small{font-size:11px;opacity:.85;font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:4px}.time-block:not(:last-child):after{content:":";position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-size:clamp(18px,4vw,26px);font-weight:700;color:var(--primary-color);opacity:.4}.time-block.timer-toggle-btn{background:linear-gradient(135deg,#ff8ab533,#ffb7c526);border:1px solid rgba(255,138,181,.3);min-width:clamp(50px,12vw,65px);padding:0;justify-content:center;align-items:center}.time-block.timer-toggle-btn svg,.time-block.timer-toggle-btn i{font-size:clamp(22px,5vw,28px);width:clamp(22px,5vw,28px);height:clamp(22px,5vw,28px);line-height:1;display:flex;align-items:center;justify-content:center;color:var(--primary-color);transition:color .3s ease}.time-block.timer-toggle-btn:hover{background:linear-gradient(135deg,#ff8ab559,#ffb7c540)}.time-block.timer-toggle-btn.active{background:linear-gradient(135deg,var(--primary-color) 0%,#ff8fab 100%);border-color:transparent;box-shadow:0 8px 25px #ff8ab559,inset 0 1px #ffffff4d}.time-block.timer-toggle-btn.active svg,.time-block.timer-toggle-btn.active i{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.5vw,14px);max-width:900px;margin:0 auto;padding:12px 16px;position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#ffffffa6;backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);border-radius:28px 28px 0 0;border:1px solid rgba(255,255,255,.5);border-bottom:none;box-shadow:0 -8px 32px #ff8ab51a,inset 0 1px #fffc;transition:transform .25s ease}body.keyboard-open nav{transform:translateY(110%)}.dark-mode nav{background:#282846bf;border-color:#ffffff1a;box-shadow:0 -8px 32px #00000040,inset 0 1px #ffffff0d}body.keyboard-open .dark-mode nav{transform:translateY(110%)}.nav-btn{width:auto;min-width:44px;flex:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:clamp(8px,1.5vw,12px) 4px;border-radius:16px;font-size:0;color:var(--text-light);background:linear-gradient(145deg,#ffffff80,#ffffff40);border:1px solid rgba(255,255,255,.4);text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 15px #00000014,inset 0 1px #fffc}.nav-btn:hover{color:var(--primary-color);background:linear-gradient(145deg,#ffffffbf,#ffffff80);transform:translateY(-4px) scale(1.05);box-shadow:0 8px 25px #ff8ab540,inset 0 1px #ffffffe6;border-color:#ff8ab566}.nav-btn:active{transform:translateY(-1px) scale(.98);transition:transform .1s ease}.nav-btn.active{color:#fff;background:linear-gradient(145deg,var(--primary-color) 0%,#ff8fab 100%);border-color:transparent;box-shadow:0 6px 20px #ff8ab566,inset 0 2px #ffffff4d;animation:navBtnActiveIn .4s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes navBtnActiveIn{0%{transform:scale(.9);opacity:.5}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.nav-btn.active:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 10px 30px #ff8ab580,inset 0 2px #fff6;animation:none}.nav-btn svg,.nav-btn .fa-icon{font-size:1.25em;width:22px;height:22px;flex-shrink:0;transition:transform .3s ease}.nav-btn:hover svg,.nav-btn:hover .fa-icon{transform:scale(1.15)}.nav-btn.active svg,.nav-btn.active .fa-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:3000}.modal-card{background:var(--card-bg);padding:24px;border-radius:var(--border-radius);width:90%;max-width:400px;display:flex;flex-direction:column;gap:12px}.modal-card h3{text-align:center;color:var(--text-main);margin-bottom:8px}.modal-card input{padding:12px;border-radius:8px;border:1px solid #ccc;background:var(--card-bg);color:var(--text-main)}.modal-actions{display:flex;gap:10px;margin-top:8px}.modal-actions button{flex:1}.dark-mode nav{border-top-color:#333}.dark-mode .nav-btn{color:var(--text-light)}.dark-mode .nav-btn:hover{background:#ffffff1a}.main-content{padding-bottom:80px}@media (max-width: 768px){header{padding:8px 10px;margin-bottom:8px;overflow:hidden}.header-top{padding:0;gap:6px;flex-wrap:nowrap!important;overflow:visible}.logo{font-size:13px;padding:2px;margin:0;flex-shrink:0}.header-actions{display:flex;align-items:center;gap:3px;flex-shrink:0;flex-wrap:nowrap!important;overflow:visible}.account-badge{min-width:40px;min-height:24px;padding:4px 5px;font-size:9px;flex-shrink:0}.account-badge #current-account-text{padding:0 3px}.header-actions button{font-size:12px;padding:4px 6px;flex-shrink:0}.header-actions button span{display:none}.countdown-container{margin:12px 0}.countdown{gap:8px;margin-top:10px}.time-block{padding:10px 8px;min-width:clamp(48px,20vw,60px);border-radius:12px}.time-block span{font-size:18px}.time-block small{font-size:10px}.time-block.timer-toggle-btn{min-width:clamp(48px,20vw,60px)}.time-block.timer-toggle-btn svg,.time-block.timer-toggle-btn i{font-size:22px;width:22px;height:22px}nav{margin:0;padding:14px 18px;gap:8px;background:linear-gradient(180deg,#fffc,#fffffff2);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-radius:24px 24px 0 0;border:1px solid rgba(255,255,255,.6);border-bottom:none;box-shadow:0 -10px 40px #ff8ab51f,0 -2px 6px #ff8ab50f}.nav-btn{padding:10px 2px;font-size:0;border-radius:14px;min-width:48px}.nav-btn svg,.nav-btn .fa-icon{font-size:22px;width:22px;height:22px}}@media (max-width: 380px){header{padding:8px 10px}.logo{font-size:14px}.account-badge{min-width:50px;font-size:10px}.time-block{padding:8px 6px;min-width:42px;border-radius:10px}.time-block span{font-size:16px}}.timeline-wrapper{flex:1;min-height:0;display:flex;flex-direction:column}.timeline-container{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;isolation:isolate}.timeline{flex:1;min-height:0;overflow-y:auto;position:relative;padding:20px 0}.timeline-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:nowrap;max-width:100%;width:100%;box-sizing:border-box;background:transparent;position:relative;z-index:1}.timeline-order-toggle-btn{width:44px!important;height:44px;min-width:44px!important;padding:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,138,181,.4);background:#ffffff80;color:var(--text-main);transition:all .25s ease;cursor:pointer;flex-shrink:0}.timeline-order-toggle-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background:#ff8ab51a;transform:scale(1.05)}.timeline-order-toggle-btn:active{transform:scale(.95)}.timeline-order-toggle-btn svg{width:18px;height:18px}.timeline-controls .primary-btn{width:auto!important;max-width:140px!important;min-width:auto!important;padding:10px 18px;font-size:14px;border-radius:10px;background:linear-gradient(135deg,var(--primary-color),#ff6b9d);color:#fff;box-shadow:0 4px 15px #ff8ab54d;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .25s ease;white-space:nowrap;flex-shrink:0}.timeline-controls .primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff8ab566}.timeline-controls .primary-btn:active{transform:scale(.97)}.timeline-controls .primary-btn svg{width:16px;height:16px}.add-milestone-form{background:var(--card-bg);padding:20px;border-radius:14px;box-shadow:var(--shadow),0 0 0 1px #ff8ab51a;animation:formSlideDown .3s cubic-bezier(.34,1.56,.64,1);transform-origin:top center;border:1px solid rgba(255,138,181,.15);position:relative;z-index:100;margin-bottom:100px}.add-milestone-form.collapsing{animation:formSlideUp .25s cubic-bezier(.4,0,.2,1) forwards}@keyframes formSlideDown{0%{opacity:0;transform:translateY(-15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes formSlideUp{0%{opacity:1;transform:scaleY(1);max-height:500px}to{opacity:0;transform:scaleY(0);max-height:0;margin-bottom:0;padding:0}}.form-mode-title{font-weight:600;font-size:16px;margin-bottom:16px;color:var(--text-main);display:flex;align-items:center;gap:8px}.form-mode-title:before{content:"";width:4px;height:18px;background:linear-gradient(to bottom,var(--primary-color),#ff6b9d);border-radius:2px}.form-grid{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:12px}.timeline-time-wheel{display:flex;align-items:center;gap:6px}.timeline-time-wheel select{padding:10px 12px;border-radius:8px;border:1px solid rgba(255,138,181,.25);background:linear-gradient(135deg,#fffffff2,#ffffffd9);color:var(--text-main);font-size:13px;transition:all .2s ease}.timeline-time-wheel select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #ff8ab526;outline:none}.timeline-time-wheel span{font-weight:600;color:var(--text-main)}.add-milestone-form input[type=text],.add-milestone-form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,138,181,.2);background:linear-gradient(135deg,#fffffff2,#ffffffd9);color:var(--text-main);margin-bottom:12px;font-size:14px;transition:all .2s ease}.add-milestone-form input[type=text]:focus,.add-milestone-form textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #ff8ab526;outline:none}.add-milestone-form input[type=date]{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,138,181,.2);background:linear-gradient(135deg,#fffffff2,#ffffffd9);color:var(--text-main);font-size:14px;transition:all .2s ease}.add-milestone-form input[type=date]:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #ff8ab526;outline:none}.form-actions{display:flex;gap:12px;margin-top:16px}.form-actions button{flex:1;padding:12px 20px;border-radius:10px;font-size:14px}.timeline{position:relative;padding:20px 0;min-height:100px}.timeline:before{display:none}.timeline-line{position:fixed;left:50%;top:0;bottom:0;width:3px;background:var(--primary-color);transform:translate(-50%);border-radius:2px;box-shadow:0 0 6px #ff8ab566,0 0 12px #ff8ab533;z-index:1;opacity:1}.timeline{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:20px 0 80px;overflow-y:auto}.timeline-item .tl-dot{z-index:10}.timeline-item{position:relative;width:45%;margin-bottom:30px;opacity:0;overflow:visible;animation:itemSlideIn .5s cubic-bezier(.4,0,.2,1) forwards;transition:margin-bottom .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1);z-index:1}.timeline>.timeline-item:nth-of-type(1){animation-delay:0ms}.timeline>.timeline-item:nth-of-type(2){animation-delay:80ms}.timeline>.timeline-item:nth-of-type(3){animation-delay:.16s}.timeline>.timeline-item:nth-of-type(4){animation-delay:.24s}.timeline>.timeline-item:nth-of-type(5){animation-delay:.32s}.timeline>.timeline-item:nth-of-type(6){animation-delay:.4s}.timeline>.timeline-item:nth-of-type(7){animation-delay:.48s}.timeline>.timeline-item:nth-of-type(8){animation-delay:.56s}.timeline>.timeline-item:nth-of-type(n+9){animation-delay:.64s}.tl-dot{position:absolute;top:20px;width:16px;height:16px;border-radius:50%;border:3px solid var(--card-bg);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;animation:dotAppear .4s cubic-bezier(.4,0,.2,1) forwards;opacity:0;transform:scale(0);z-index:10}.timeline>.timeline-item:nth-of-type(1) .tl-dot,.timeline>.timeline-item:nth-of-type(2) .tl-dot,.timeline>.timeline-item:nth-of-type(3) .tl-dot,.timeline>.timeline-item:nth-of-type(4) .tl-dot,.timeline>.timeline-item:nth-of-type(5) .tl-dot,.timeline>.timeline-item:nth-of-type(6) .tl-dot,.timeline>.timeline-item:nth-of-type(7) .tl-dot,.timeline>.timeline-item:nth-of-type(8) .tl-dot,.timeline>.timeline-item:nth-of-type(n+9) .tl-dot{animation-delay:.25s;animation-duration:.4s}@keyframes dotAppear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.tl-dot.dot-blue{background:#b9defa;box-shadow:0 0 0 2px #b9defa}.tl-dot.dot-blue:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--card-bg);border-radius:50%;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease,opacity .2s ease}.tl-dot.dot-pink{background:#ffc7da;box-shadow:0 0 0 2px #ffc7da}.tl-dot.dot-pink:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--card-bg);border-radius:50%;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease,opacity .2s ease}.tl-dot.dot-default{background:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color)}.tl-dot.dot-default:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--card-bg);border-radius:50%;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease,opacity .2s ease}.tl-dot.expanded{transform:scale(1.1)}.tl-dot.expanded:after{width:0;height:0;opacity:0}.tl-dot:hover:not(.expanded){transform:scale(1.15)}.timeline-item.left .tl-dot{right:-8px}.timeline-item.right .tl-dot{left:-8px}.timeline-item.left{margin-right:auto;padding-right:40px}.timeline-item.right{margin-left:auto;padding-left:40px}.tl-content{background:var(--card-bg);padding:16px;border-radius:var(--border-radius);box-shadow:var(--shadow);cursor:pointer;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}.timeline-item.left .tl-content{text-align:right}.tl-content:hover{transform:translateY(-3px);box-shadow:0 8px 25px #ffb7c540}.timeline-item.author-xiaoyu .tl-content{border-left:3px solid #b9defa}.timeline-item.author-xiaoqi .tl-content{border-left:3px solid #ffc7da}.timeline-item.author-xiaoyu.right .tl-content{border-left:none;border-right:3px solid #b9defa}.timeline-item.author-xiaoqi.right .tl-content{border-left:none;border-right:3px solid #ffc7da}.tl-card-panel{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,183,197,.3);display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out;position:relative;z-index:10}.timeline-item.expanded .tl-card-panel{grid-template-rows:1fr}.timeline-item.collapsing .tl-card-panel{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in}.tl-card-panel>div{overflow:hidden}.tl-date{font-size:12px;color:var(--text-light);margin-bottom:6px}.tl-title{font-size:16px;font-weight:700;color:var(--text-main);margin-bottom:8px}.tl-desc-box{text-align:left}.tl-desc-preview{font-size:13px;color:var(--text-light);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.timeline-item.expanded .tl-desc-preview{display:none}.tl-full-desc{text-align:left}.tl-full-paragraph{margin-bottom:8px;line-height:1.6}.tl-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.timeline-item.left .tl-actions{justify-content:flex-start}.tl-actions button{width:auto;padding:6px 12px;font-size:12px;transition:all .2s ease}.tl-actions button:hover{transform:scale(1.05)}.tl-author{font-size:11px;color:var(--text-light);margin-top:8px;text-align:right}.timeline-item.left .tl-author{text-align:left}.load-more-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:20px 0;padding:16px 16px 80px;color:var(--text-light);font-size:13px}.load-more-wrap button{width:auto;padding:8px 24px}@media (max-width: 768px){.timeline-controls{justify-content:space-between;margin-bottom:12px;gap:6px}.timeline-order-toggle-btn{width:40px!important;min-width:40px!important;height:40px}.timeline-controls .primary-btn{width:auto!important;max-width:120px!important;padding:8px 14px;font-size:13px}.timeline{padding:12px 0}.timeline-line{left:50%}.timeline-item{width:calc(50% - 24px);margin-bottom:16px}.timeline-item.left{margin-right:calc(50% + 16px);margin-left:0;padding-right:20px;padding-left:0}.timeline-item.left .tl-dot{left:auto!important;right:-6px!important}.timeline-item.right{margin-left:calc(50% + 16px);margin-right:0;padding-left:20px;padding-right:0}.timeline-item.right .tl-dot{left:-6px!important;right:auto!important}.timeline-item .tl-dot{width:12px;height:12px;top:16px}.tl-content{padding:10px 12px;border-radius:10px}.tl-title{font-size:13px;margin-bottom:4px}.tl-date{font-size:11px}.tl-desc-preview{font-size:11px;-webkit-line-clamp:2;line-clamp:2}.timeline-item.left .tl-content{text-align:right}.timeline-item.right .tl-content,.tl-desc-box{text-align:left}.timeline-item.left .tl-actions{justify-content:flex-start}.timeline-item.left .tl-author{text-align:left}.timeline-item.right .tl-actions{justify-content:flex-end}.timeline-item.right .tl-author{text-align:right}.timeline-item.author-xiaoyu.left .tl-content{border-left:none;border-right:3px solid #b9defa}.timeline-item.author-xiaoyu.right .tl-content{border-right:none;border-left:3px solid #b9defa}.timeline-item.author-xiaoqi.left .tl-content{border-left:none;border-right:3px solid #ffc7da}.timeline-item.author-xiaoqi.right .tl-content{border-right:none;border-left:3px solid #ffc7da}.tl-actions button{padding:4px 8px;font-size:10px}.tl-author{font-size:10px}.form-grid{grid-template-columns:1fr}.add-milestone-form{padding:12px;margin-bottom:12px}.form-mode-title{font-size:14px;margin-bottom:10px}.timeline>.timeline-item:nth-of-type(n) .tl-dot{animation-delay:.4s}}@media (max-width: 500px){.timeline-item{width:calc(50% - 16px);margin-bottom:12px}.timeline-item.left{margin-right:calc(50% + 12px);padding-right:16px}.timeline-item.right{margin-left:calc(50% + 12px);padding-left:16px}.timeline-item .tl-dot{width:10px;height:10px}.timeline-item.left .tl-dot{right:-5px!important}.timeline-item.right .tl-dot{left:-5px!important}.tl-content{padding:8px 10px}.tl-title{font-size:12px}}.timeline-empty{text-align:center;padding:60px 20px 80px;color:var(--text-light);background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);margin-top:20px;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.timeline-empty i{font-size:48px;margin-bottom:16px;opacity:.5;color:var(--primary-color)}.timeline-empty p{font-size:16px}.capsules-wrapper{flex:1;min-height:0;display:flex;flex-direction:column}.capsules{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:80px}.capsule-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}.capsule-controls .primary-btn{width:auto;padding:10px 18px;font-size:14px;border-radius:10px;background:linear-gradient(135deg,var(--primary-color),#ff6b9d);color:#fff;box-shadow:0 4px 15px #ff8ab54d;border:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s ease}.capsule-controls .primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff8ab566}.capsule-controls .primary-btn:active{transform:scale(.97)}.capsule-form-card{background:var(--card-bg);padding:20px;border-radius:14px;box-shadow:var(--shadow),0 0 0 1px #ff8ab51a;margin-bottom:20px;animation:capsuleFormSlideDown .3s cubic-bezier(.34,1.56,.64,1);transform-origin:top center;border:1px solid rgba(255,138,181,.15)}@keyframes capsuleFormSlideDown{0%{opacity:0;transform:translateY(-15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.capsule-form-card.collapsing{animation:slideUp .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideUp{0%{opacity:1;transform:scaleY(1);max-height:500px}to{opacity:0;transform:scaleY(0);max-height:0;margin-bottom:0;padding:0}}.capsule-form-card .form-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px}.form-date-time{display:flex;gap:10px}.form-date-time input,.form-date-time select{flex:1;padding:10px;border-radius:8px;border:1px solid #ddd;background:var(--card-bg);color:var(--text-main)}.capsule-form-card input,.capsule-form-card textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;background:var(--card-bg);color:var(--text-main)}.capsule-form-card textarea{margin-bottom:10px;resize:vertical}.capsule-image-panel{display:flex;align-items:center;gap:10px;margin-bottom:10px}.capsule-image-panel label{width:auto;padding:8px 16px}.capsule-image-panel input[type=file]{display:none}.capsules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.capsule-card{background:var(--card-bg);border-radius:var(--border-radius);padding:16px;box-shadow:var(--shadow);cursor:pointer;position:relative;overflow:visible;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent;opacity:0;animation:capsuleSlideIn .5s cubic-bezier(.34,1.56,.64,1) forwards;will-change:transform,opacity;z-index:1}.capsule-card:nth-child(1){animation-delay:0ms}.capsule-card:nth-child(2){animation-delay:60ms}.capsule-card:nth-child(3){animation-delay:.12s}.capsule-card:nth-child(4){animation-delay:.18s}.capsule-card:nth-child(5){animation-delay:.24s}.capsule-card:nth-child(6){animation-delay:.3s}.capsule-card:nth-child(n+7){animation-delay:.36s}@keyframes capsuleSlideIn{0%{opacity:0;transform:translateY(25px) rotateX(10deg) scale(.92)}50%{opacity:1;transform:translateY(-8px) rotateX(-5deg) scale(1.03)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}.capsule-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ff8ab51a,#ffc8dc0d);opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.capsule-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #ff8ab533;border-color:#ff8ab54d}.capsule-card:hover:before{opacity:1}.capsule-card:active{transform:translateY(-2px)}.capsule-card.expanded{border-color:var(--primary-color);box-shadow:0 8px 24px #ff8ab526}.capsule-card.locked{border:2px dashed rgba(255,138,181,.4)}.capsule-card.locked:hover{border-color:#ff8ab599;box-shadow:0 12px 28px #ff8ab526}.capsule-card.unlocked{border:2px solid rgba(255,138,181,.2)}.capsule-title{font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:12px;line-height:1.4;position:relative;z-index:1}.capsule-compact-hint{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--primary-color);padding:8px 12px;background:#ff8ab514;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.capsule-compact-hint .fa-chevron-down,.capsule-compact-hint .fa-chevron-up{transition:transform .35s cubic-bezier(.4,0,.2,1)}.capsule-card.expanded .capsule-compact-hint .fa-chevron-down{transform:rotate(180deg)}.capsule-card:hover .capsule-compact-hint{background:#ff8ab526}.capsule-lock-panel{text-align:center;padding:20px 12px;border-radius:10px;background:linear-gradient(135deg,#ffb7c526,#ffc8dc1a);border:1px dashed rgba(255,138,181,.5);position:relative;z-index:1}.capsule-lock-icon{font-size:28px;color:var(--primary-color);margin-bottom:10px;animation:lockBounce 2s ease-in-out infinite}@keyframes lockBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.capsule-countdown-label{display:block;font-size:12px;color:var(--text-light);margin-bottom:8px}.capsule-countdown{font-size:22px;font-weight:700;color:var(--text-main);letter-spacing:1px;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px rgba(0,0,0,.1)}.capsule-detail-panel{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,138,181,.2);position:relative;z-index:10;overflow:visible;animation:capsuleDetailExpand .4s cubic-bezier(.4,0,.2,1)}.capsule-detail-panel.collapsing{animation:capsuleDetailCollapse .35s cubic-bezier(.4,0,.2,1) forwards}.capsule-unlock-at{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-light);padding:8px 10px;background:#ff8ab514;border-radius:6px}.capsule-unlock-at i{color:var(--primary-color)}.capsule-time-info{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.capsule-created-at{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-light);padding:6px 10px;background:#ffb7c50f;border-radius:6px}.capsule-created-at i{color:#aaa}.capsule-content-text{font-size:14px;line-height:1.8;white-space:pre-wrap;word-break:break-word;margin-bottom:16px;color:var(--text-main)}.capsule-content-image{border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:0 4px 15px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.capsule-content-image:hover{transform:scale(1.02);box-shadow:0 8px 25px #00000026}.capsule-content-image img{width:100%;height:auto;display:block}.capsule-author{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-light);margin-bottom:12px;padding:6px 10px;background:#00000008;border-radius:6px}.capsule-author i{font-size:10px;color:var(--primary-color)}.capsule-delete-btn{width:100%;padding:10px 16px;font-size:13px;margin-top:8px;background:#d9534f14;border-color:#d9534f4d;color:#d9534f}.capsule-delete-btn:hover{background:#d9534f26;border-color:#d9534f}.capsule-empty{text-align:center;padding:60px 20px;color:var(--text-light);background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow)}.capsule-empty i{font-size:48px;margin-bottom:16px;opacity:.5;color:var(--primary-color)}.capsule-empty p{font-size:16px}.form-actions{display:flex;gap:10px;margin-top:10px}@keyframes capsuleDetailExpand{0%{opacity:0;max-height:0;padding-top:0;margin-top:0;transform:translateY(-10px)}20%{opacity:0}to{opacity:1;max-height:600px;padding-top:16px;margin-top:16px;transform:translateY(0)}}@keyframes capsuleDetailCollapse{0%{opacity:1;max-height:600px;padding-top:16px;margin-top:16px;transform:translateY(0)}60%{opacity:0}to{opacity:0;max-height:0;padding-top:0;margin-top:0;transform:translateY(-10px)}}.capsule-detail-content{animation:capsuleContentFadeIn .3s ease-out .15s both}@keyframes capsuleContentFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.capsules-grid{grid-template-columns:1fr}.form-date-time{flex-direction:column}}.messages-wrapper{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.messages{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:80px}@keyframes pageContentFadeIn{0%{opacity:0}to{opacity:1}}.message-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}.message-controls .primary-btn{width:auto;padding:10px 18px;font-size:14px;border-radius:10px;background:linear-gradient(135deg,var(--primary-color),#ff6b9d);color:#fff;box-shadow:0 4px 15px #ff8ab54d;border:none;display:inline-flex;align-items:center;gap:8px;transition:all .25s ease}.message-controls .primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff8ab566}.message-controls .primary-btn:active{transform:scale(.97)}.message-controls .secondary-btn{width:auto;padding:8px 14px;font-size:13px;border-radius:8px}.add-msg-form{background:var(--card-bg);padding:20px;border-radius:14px;box-shadow:var(--shadow),0 0 0 1px #ff8ab51a;margin-bottom:16px;animation:msgFormSlideDown .3s cubic-bezier(.34,1.56,.64,1);transform-origin:top center;border:1px solid rgba(255,138,181,.15)}@keyframes msgFormSlideDown{0%{opacity:0;transform:translateY(-15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.add-msg-form.collapsing{animation:slideUp .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideUp{0%{opacity:1;transform:scaleY(1);max-height:200px}to{opacity:0;transform:scaleY(0);max-height:0;margin-bottom:0;padding:0}}.add-msg-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #ddd;background:var(--card-bg);color:var(--text-main);margin-bottom:10px;resize:vertical;font-family:inherit}.messages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.msg-card{background:var(--card-bg);border-radius:var(--border-radius);padding:16px;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease;border:2px solid transparent;position:relative;overflow:visible;opacity:0;animation:itemSlideIn .5s cubic-bezier(.4,0,.2,1) forwards;will-change:transform,opacity;z-index:1}.msg-card:nth-child(1){animation-delay:0ms}.msg-card:nth-child(2){animation-delay:80ms}.msg-card:nth-child(3){animation-delay:.16s}.msg-card:nth-child(4){animation-delay:.24s}.msg-card:nth-child(5){animation-delay:.32s}.msg-card:nth-child(6){animation-delay:.4s}.msg-card:nth-child(7){animation-delay:.48s}.msg-card:nth-child(8){animation-delay:.56s}.msg-card:nth-child(n+9){animation-delay:.64s}.msg-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#ff8ab514,#ffc8dc0d);opacity:0;transition:opacity .2s ease;pointer-events:none}.msg-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #ff8ab526}.msg-card:hover:before{opacity:1}.msg-card:active{transform:translateY(-2px)}.msg-date{font-size:12px;color:var(--text-light);margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed rgba(255,138,181,.2)}.msg-text{font-size:14px;line-height:1.7;color:var(--text-main);white-space:pre-wrap;word-break:break-word;position:relative;z-index:1;margin-bottom:12px}.msg-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid rgba(0,0,0,.05);position:relative;z-index:1}.msg-author{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-light)}.msg-author i{font-size:10px;color:var(--primary-color)}.msg-delete-btn{padding:6px 10px;background:#d9534f14;border:1px solid rgba(217,83,79,.2);border-radius:6px;color:#d9534f;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.msg-delete-btn:hover{background:#d9534f26;border-color:#d9534f;transform:scale(1.1)}.msg-delete-btn i{font-size:12px}.empty-state{text-align:center;padding:60px 20px;color:var(--text-light);background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow)}.empty-state i{font-size:48px;margin-bottom:16px;opacity:.5;color:var(--primary-color)}.empty-state p{font-size:16px}.form-actions{display:flex;gap:10px}.form-actions button{flex:1}@media (max-width: 600px){.messages-grid{grid-template-columns:1fr}.message-controls{flex-direction:column;align-items:stretch}.message-controls .secondary-btn,.message-controls .primary-btn{width:100%}}.future-wrapper{max-width:700px;margin:0 auto;padding:24px;flex:1;min-height:0;display:flex;flex-direction:column}.future-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:80px}.future-header{display:flex;justify-content:flex-end;align-items:center;margin-bottom:20px}.add-todo-btn{display:inline-flex;align-items:center;gap:8px;position:relative}.add-todo-btn .btn-text{margin-left:4px}.todo-badge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border-radius:11px;box-shadow:0 2px 8px #ff6b6b80;display:flex;align-items:center;justify-content:center;animation:badgePop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes badgePop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.add-todo-form{background:var(--card-bg);border-radius:var(--border-radius, 12px);border:1px solid rgba(255,138,181,.2);box-shadow:0 4px 16px #ff8ab51a;padding:16px;margin-bottom:20px;animation:slideDown .3s cubic-bezier(.34,1.56,.64,1);width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}@media (min-width: 900px){.add-todo-form{max-width:700px;margin-left:auto;margin-right:auto}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.todo-form-row{display:flex;gap:10px;align-items:center;width:100%;box-sizing:border-box}.todo-input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:10px;border:2px solid rgba(255,138,181,.2);background:#ffffffe6;color:var(--text-main);font-size:14px;transition:all .3s ease;box-sizing:border-box}.dark-mode .todo-input{background:#ffffff14;border-color:#ff8ab54d;color:var(--text-main)}.todo-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #ff8ab526}.add-btn{width:44px!important;min-width:44px!important;max-width:44px!important;height:44px;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:10px;flex-shrink:0;box-sizing:border-box}.add-btn svg{width:16px;height:16px;flex-shrink:0}.future-list{display:flex;flex-direction:column;gap:10px}@media (min-width: 900px){.future-wrapper{max-width:900px}.future-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.todo-card{padding:12px 14px}.todo-text{font-size:13px}}@media (min-width: 1200px){.future-wrapper{max-width:1100px}.future-list{grid-template-columns:repeat(3,1fr)}.todo-card{padding:14px 16px}.todo-text{font-size:14px}}.future-empty{text-align:center;padding:50px 20px;background:linear-gradient(135deg,#fffc,#fff9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;border:1px solid rgba(255,138,181,.12)}.dark-mode .future-empty{background:linear-gradient(135deg,#ffffff0f,#ffffff08);border-color:#ff8ab526}.future-empty svg{font-size:42px;color:var(--primary-color);opacity:.4;margin-bottom:14px}.future-empty p{font-size:15px;color:var(--text-main);margin:0}.future-empty-hint{font-size:12px!important;color:var(--text-light)!important;margin-top:8px!important}.future-loading{text-align:center;padding:50px 20px}.future-loading svg{font-size:28px;color:var(--primary-color);margin-bottom:10px}.todo-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffffb3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--border-radius, 12px);border:1px solid rgba(255,138,181,.15);box-shadow:0 2px 12px #ff8ab514;transition:all .35s cubic-bezier(.4,0,.2,1);transform-origin:center center;animation:itemSlideIn .5s cubic-bezier(.4,0,.2,1) backwards;will-change:transform,opacity}.todo-card:nth-child(1){animation-delay:0ms}.todo-card:nth-child(2){animation-delay:80ms}.todo-card:nth-child(3){animation-delay:.16s}.todo-card:nth-child(4){animation-delay:.24s}.todo-card:nth-child(5){animation-delay:.32s}.todo-card:nth-child(6){animation-delay:.4s}.todo-card:nth-child(7){animation-delay:.48s}.todo-card:nth-child(8){animation-delay:.56s}.todo-card:nth-child(n+9){animation-delay:.64s}@keyframes itemSlideIn{0%{opacity:0;transform:translateY(25px) scale(.95)}50%{opacity:1;transform:translateY(-8px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInSlide{0%{opacity:0}to{opacity:1}}@keyframes checkPop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes cardClickBounce{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.dark-mode .todo-card{background:#ffffff14;border-color:#ff8ab533}.todo-card:hover{border-color:#ff8ab566;transform:scale(1.02);box-shadow:0 8px 24px #ff8ab526}.todo-card:active{transform:scale(.98);transition:transform .1s ease}.todo-card.completed{opacity:.45;background:linear-gradient(135deg,#fff6,#fff3);transform:scale(.98)}.todo-card.completed:hover{opacity:.6}.dark-mode .todo-card.completed{background:linear-gradient(135deg,#ffffff08,#ffffff05)}.todo-card.bounce{animation:cardClickBounce .4s cubic-bezier(.25,.46,.45,.94);animation-fill-mode:forwards}.todo-card.expanded{transform:scale(1.03);box-shadow:0 10px 30px #ff8ab540}.todo-text-wrapper{flex:1;min-width:0;display:flex;align-items:center}.todo-text{flex:1;font-size:14px;font-weight:500;color:var(--text-main);min-width:0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .3s ease}.todo-text.done{text-decoration:line-through;color:var(--text-light)}.todo-text.expanded-text{white-space:normal;word-break:break-word}.todo-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.todo-author-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;cursor:help;transition:transform .2s ease}.todo-author-dot:hover{transform:scale(1.2)}.todo-delete-btn{width:auto;padding:5px 9px;font-size:11px;border-radius:6px;background:#e74c3c0f;border:1px solid rgba(231,76,60,.1);color:#e74c3c;cursor:pointer;transition:all .3s ease}.todo-delete-btn:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}.completed-section{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,138,181,.1)}.dark-mode .completed-section{border-top-color:#ff8ab526}.completed-title{font-size:14px;font-weight:600;color:var(--text-light);display:flex;align-items:center;gap:8px;margin-bottom:14px}.completed-title svg{color:#6ab04c}.completed-list{display:flex;flex-direction:column;gap:8px}@media (min-width: 481px){.future-header .btn-text{display:inline}}@media (max-width: 480px){.future-header .btn-text{display:none}.future-header .primary-btn{justify-content:center}}@media (min-width: 769px){.future-wrapper{max-width:700px;padding:32px 24px}.add-todo-form{max-width:520px}.todo-card{padding:16px 18px}.todo-text{font-size:15px}.todo-check-btn{width:26px;height:26px}.check-circle-outer{width:24px;height:24px}.todo-delete-btn{padding:6px 10px;font-size:12px}.add-btn{width:46px!important;min-width:46px!important;max-width:46px!important;height:46px}.add-btn svg{width:18px;height:18px}}@media (max-width: 768px) and (min-width: 481px){.future-wrapper{max-width:100%;padding:20px 16px}.add-todo-form{padding:14px}.todo-form-row{gap:10px}.todo-input{height:42px;font-size:14px;padding:0 12px}.add-btn{width:42px!important;min-width:42px!important;max-width:42px!important;height:42px}.add-btn svg{width:16px;height:16px}.todo-card{padding:14px;gap:12px}.todo-text{font-size:14px}.todo-actions{gap:10px}.todo-author-dot{width:9px;height:9px}.todo-delete-btn{padding:5px 8px;font-size:11px}.check-circle-outer{width:22px;height:22px}}@media (max-width: 480px){.future-wrapper{max-width:100%;padding:0;margin:0}.future-header{padding:12px 16px;margin-bottom:0}.add-todo-form{margin:0 16px 16px;padding:14px;border-radius:10px}.todo-form-row{gap:8px}.todo-input{height:40px;font-size:14px;padding:0 10px;border-radius:8px}.add-btn{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px;border-radius:8px}.add-btn svg{width:14px;height:14px}.future-list{padding:0 16px;gap:8px}.todo-card{padding:12px 14px;gap:10px;border-radius:10px}.todo-text{font-size:14px}.todo-actions{flex-shrink:0;gap:8px}.todo-author-dot{width:8px;height:8px}.todo-delete-btn{padding:4px 8px;font-size:10px;border-radius:4px}.check-circle-outer{width:20px;height:20px}.check-circle-inner,.todo-check-btn.checked .check-circle-inner{width:10px;height:10px}.future-empty{margin:0 16px;padding:40px 20px;border-radius:10px}.future-empty svg{font-size:40px}.future-empty p{font-size:14px}.completed-section{margin-top:24px;padding-top:16px}.completed-title{font-size:13px;margin-bottom:10px}.completed-list{gap:0}}@media (max-width: 380px){.future-wrapper{padding:0;margin:0}.add-todo-form{margin:0 12px 12px;padding:12px}.todo-form-row{gap:6px}.todo-input{height:38px;font-size:13px;padding:0 8px}.add-btn{width:38px!important;min-width:38px!important;max-width:38px!important;height:38px}.add-btn svg{width:14px;height:14px}.todo-card{padding:10px 12px;gap:8px}.todo-text{font-size:13px}.check-circle-outer{width:18px;height:18px}.check-circle-inner,.todo-check-btn.checked .check-circle-inner{width:8px;height:8px}.todo-delete-btn{padding:3px 6px;font-size:9px}.todo-author-dot{width:7px;height:7px}.future-empty{padding:30px 14px}.future-empty svg{font-size:36px}}.todo-check-btn{width:24px;height:24px;border:none;background:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.check-circle-outer{width:22px;height:22px;border:2.5px solid #ff8ab5;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}.check-circle-inner{width:0;height:0;background:linear-gradient(135deg,var(--primary-color) 0%,#ff8fab 100%);border-radius:50%;transition:all .3s cubic-bezier(.34,1.56,.64,1);transform-origin:center}.todo-check-btn:hover .check-circle-outer{border-color:var(--primary-color);transform:scale(1.08);box-shadow:0 0 10px #ff8ab559}.todo-check-btn:active .check-circle-outer{transform:scale(.92);transition:transform .1s ease}.todo-check-btn.checked .check-circle-outer{border-color:var(--primary-color);transform:scale(1.05);box-shadow:0 0 8px #ff8ab54d}.todo-check-btn.checked .check-circle-inner{width:12px;height:12px;transition:all .35s cubic-bezier(.34,1.56,.64,1)}@keyframes checkFill{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}@keyframes checkPop{0%{transform:scale(1)}40%{transform:scale(1.15)}to{transform:scale(1.05)}}.todo-check-btn.checked .check-circle-outer{animation:checkPop .35s cubic-bezier(.34,1.56,.64,1)}.particles-canvas{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;width:100vw;height:100vh;touch-action:pan-y}.particle-control-toggle{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:var(--primary-color);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 16px #ff8ab566;z-index:1000;transition:all .3s ease}.particle-control-toggle:hover{transform:scale(1.1);box-shadow:0 6px 24px #ff8ab580}.particle-control-panel{position:fixed;bottom:80px;right:20px;width:280px;background:var(--card-bg);border-radius:16px;box-shadow:0 8px 32px #00000026;z-index:1000;overflow:hidden;animation:slideUpFade .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.particle-control-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:linear-gradient(135deg,var(--primary-color),#ff6b9d);color:#fff}.particle-control-header h4{margin:0;font-size:14px;font-weight:600}.particle-control-close{width:28px;height:28px;border-radius:50%;background:#fff3;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.particle-control-close:hover{background:#ffffff4d}.particle-control-body{padding:16px}.control-item{margin-bottom:20px}.control-item:last-child{margin-bottom:0}.control-item label{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;color:var(--text-main);margin-bottom:8px}.control-value{font-size:12px;color:var(--primary-color);font-weight:600;background:#ff8ab51a;padding:2px 8px;border-radius:4px}.control-item input[type=range]{width:100%;height:6px;border-radius:3px;background:#ff8ab533;outline:none;-webkit-appearance:none;margin-bottom:6px}.control-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary-color);cursor:pointer;box-shadow:0 2px 8px #ff8ab566;transition:transform .2s}.control-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:none;box-shadow:0 2px 8px #ff8ab566}@media (max-width: 768px){.particle-control-toggle{bottom:16px;right:16px;width:44px;height:44px;font-size:18px}.particle-control-panel{bottom:72px;right:16px;left:16px;width:auto}}:root{--primary-color: #ff8ab5;--secondary-color: #ffe6ee;--bg-color: #fff0f6;--card-bg: #ffffff;--text-main: #333;--text-light: #888;--border-radius: 12px;--shadow: 0 4px 16px rgba(255, 138, 181, .12);--transition: all .2s ease;--c-sweet: rgba(255, 138, 181, .1);--c-encourage: rgba(255, 200, 100, .1);--c-funny: rgba(100, 200, 255, .1);--c-promise: rgba(200, 150, 255, .1)}.bg-animation{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:-1;transform:translateZ(0);backface-visibility:hidden;touch-action:pan-y}#app-root{position:relative;min-height:100vh;z-index:1}.bg-animation:before{content:"";position:absolute;width:300%;height:300%;top:-100%;left:-100%;background:radial-gradient(ellipse at 15% 85%,rgba(255,138,181,.15) 0%,transparent 50%),radial-gradient(ellipse at 85% 15%,rgba(255,160,200,.12) 0%,transparent 45%),radial-gradient(ellipse at 45% 35%,rgba(255,190,210,.08) 0%,transparent 55%),radial-gradient(ellipse at 70% 80%,rgba(220,180,255,.06) 0%,transparent 40%),radial-gradient(ellipse at 30% 60%,rgba(255,150,190,.1) 0%,transparent 50%);animation:bgFloat 25s ease-in-out infinite;filter:blur(60px);will-change:transform;transform:translateZ(0)}.bg-animation:after{content:"";position:absolute;width:250%;height:250%;top:-75%;left:-75%;background:radial-gradient(ellipse at 55% 65%,rgba(255,138,181,.1) 0%,transparent 45%),radial-gradient(ellipse at 25% 25%,rgba(200,150,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(255,180,200,.07) 0%,transparent 40%),radial-gradient(ellipse at 40% 90%,rgba(255,160,190,.09) 0%,transparent 45%);animation:bgFloat2 30s ease-in-out infinite reverse;filter:blur(80px);will-change:transform;transform:translateZ(0)}.bg-animation{background:radial-gradient(circle at 10% 20%,rgba(255,200,220,.03) 0%,transparent 2%),radial-gradient(circle at 90% 80%,rgba(255,180,200,.03) 0%,transparent 2%),radial-gradient(circle at 50% 50%,rgba(255,190,210,.02) 0%,transparent 1.5%);background-size:100px 100px}@keyframes bgFloat{0%,to{transform:translateZ(0)}50%{transform:translate3d(1%,1%,0)}}@keyframes bgFloat2{0%,to{transform:translateZ(0)}50%{transform:translate3d(-1%,1%,0)}}.dark-mode .bg-animation:before{background:radial-gradient(circle at 20% 80%,rgba(255,138,181,.06) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(100,80,150,.08) 0%,transparent 40%);animation:bgFloat 20s ease-in-out infinite}.dark-mode .bg-animation:after{background:radial-gradient(circle at 60% 70%,rgba(138,100,180,.04) 0%,transparent 40%)}.page-wrapper{position:relative;width:100%;min-height:100%;contain:layout style;overflow:visible}.page-container{width:100%;animation-duration:.25s;animation-fill-mode:both}.page-wrapper.fade-in .page-container{animation-name:pageFadeIn;will-change:opacity}.page-wrapper.fade-out .page-container{animation-name:pageFadeOut;will-change:opacity}@keyframes pageFadeOut{0%{opacity:1}to{opacity:0}}.dark-mode{--bg-color: #1a1a2e;--card-bg: #252541;--text-main: #e8e8f0;--text-light: #9999b8;--shadow: 0 4px 16px rgba(0, 0, 0, .3)}.dark-mode .form-mode-title,.dark-mode .category-manager-title,.dark-mode .photo-album-manager-title,.dark-mode .login-card h1{color:#e8e8f0}.dark-mode .add-milestone-form,.dark-mode .capsule-form-card,.dark-mode .add-msg-form,.dark-mode .category-manager,.dark-mode .photo-album-manager,.dark-mode .capsule-empty,.dark-mode .empty-state,.dark-mode .modal-card{background:#2a2a4a;border-color:#ff8ab533}.dark-mode .add-milestone-form input,.dark-mode .add-milestone-form textarea,.dark-mode .capsule-form-card input,.dark-mode .capsule-form-card textarea,.dark-mode .add-msg-form textarea,.dark-mode .modal-card input,.dark-mode .category-row input,.dark-mode .photo-album-add-row input{border-color:#444;background:#1a1a2e;color:#e8e8f0}.dark-mode .time-block{box-shadow:0 4px 12px #0000004d}.dark-mode .tl-content,.dark-mode .msg-card,.dark-mode .capsule-card,.dark-mode .album-box{box-shadow:0 4px 16px #0003}.dark-mode .timeline:before,.dark-mode nav{border-top-color:#333}.dark-mode .nav-btn:hover{background:#ffffff14}.dark-mode .album-content{border-top-color:#333}.dark-mode .tl-card-panel,.dark-mode .capsule-detail-panel{border-top-color:#ff8ab533}.dark-mode .timeline-order-toggle-btn,.dark-mode .controls .secondary-btn,.dark-mode .photo-view-toggle-btn{border-color:#fff3;color:#e8e8f0}.dark-mode .timeline-order-toggle-btn:hover,.dark-mode .controls .secondary-btn:hover,.dark-mode .photo-view-toggle-btn:hover{background:#ffffff14}.dark-mode .primary-btn{background:linear-gradient(135deg,#ff8ab5,#ff6b9d);box-shadow:0 2px 12px #ff8ab559}.dark-mode .primary-btn:hover{background:linear-gradient(135deg,#ffa0c0,#ff8ab5);box-shadow:0 6px 24px #ff8ab580}.dark-mode .secondary-btn{border-color:#ff8ab580;background:#ff8ab514;color:#e8e8f0}.dark-mode .secondary-btn:hover{border-color:#ff8ab5;color:#ff8ab5;background:#ff8ab526}.dark-mode .secondary-btn svg{color:inherit}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-color);color:var(--text-main);min-height:100vh;min-height:100dvh;transition:background .3s,color .3s;overscroll-behavior:none;touch-action:manipulation}html{overflow-y:scroll;overscroll-behavior:none}@supports (scrollbar-gutter: stable){html{scrollbar-gutter:stable}}#root,#app-root{min-height:100vh;min-height:100dvh}button{cursor:pointer;font-family:inherit}button svg{flex-shrink:0;width:16px;height:16px}button svg+span,button span+svg,button>svg{flex-shrink:0}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--border-radius);border:none;background:var(--primary-color);color:#fff;font-size:14px;font-weight:600;width:100%;transition:var(--transition);box-shadow:0 2px 8px #ff8ab540}.primary-btn:hover{background:#ff6b9d;box-shadow:0 6px 20px #f983af66;transform:translateY(-2px)}.primary-btn:active{transform:scale(.97);box-shadow:0 2px 6px #ff8ab533}.primary-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--border-radius);border:1.5px solid rgba(255,138,181,.4);background:#ffffff80;color:var(--text-main);font-size:14px;font-weight:500;width:100%;transition:var(--transition);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.secondary-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background:#ff8ab51a;transform:translateY(-1px)}.secondary-btn:active{transform:scale(.97)}.secondary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.tl-danger{color:#d9534f!important;border-color:#d9534f!important}.tl-danger:hover{background:#d9534f14!important;border-color:#d9534f!important;color:#d9534f!important}.view{display:none;max-width:1000px;margin:0 auto;padding:24px 16px}.view.active{display:block;animation:viewFadeIn .35s cubic-bezier(.22,.61,.36,1)}@keyframes viewFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.main-content{padding:0 16px;max-height:var(--main-content-height, calc(100vh - 200px) );overflow-y:auto;display:flex;flex-direction:column;flex:1;min-height:0}.main-content>.page-wrapper{flex:1;min-height:0;display:flex;flex-direction:column}.main-content>.page-wrapper>.timeline-wrapper,.main-content>.page-wrapper>.capsules-wrapper,.main-content>.page-wrapper>.messages-wrapper,.main-content>.page-wrapper>.future-wrapper,.main-content>.page-wrapper>.photos-wrapper{flex:1;min-height:0;display:flex;flex-direction:column}@media (min-width: 769px){.page-wrapper{max-width:900px;left:50%;transform:translate(-50%)}}.page-wrapper{width:100%;position:relative;box-sizing:border-box}.page-wrapper.fade-in{animation:pageFadeIn .3s ease-out forwards}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}.loading-screen{height:100vh;display:flex;justify-content:center;align-items:center}.loading-content{text-align:center;color:var(--primary-color)}.loading-content i{font-size:48px;animation:heartPulse 1s infinite}.loading-content p{margin-top:16px;font-size:16px}@keyframes heartPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.heart-pulse{display:inline-block;animation:heartBeat 1s infinite;color:var(--primary-color)}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}input,select,textarea{font-family:inherit;font-size:14px}input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-color);outline-offset:2px}@keyframes capsuleDetailReveal{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes lightboxIn{0%{opacity:0}to{opacity:1}}.photos-loading{display:flex;align-items:center;justify-content:center;min-height:400px;padding:20px}.photos-loading-content{text-align:center;width:100%;max-width:680px}.photos-loading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.photos-loading-item{aspect-ratio:1;border-radius:var(--border-radius);overflow:hidden;background:var(--card-bg);box-shadow:var(--shadow)}.photos-loading-shimmer{width:100%;height:100%;background:linear-gradient(90deg,var(--card-bg) 0%,rgba(255,183,197,.3) 50%,var(--card-bg) 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.photos-loading-text{color:var(--text-light);font-size:14px}.photos-loading-text i{margin-right:8px;color:var(--primary-color)}@media (max-width: 600px){.photos-loading-grid{grid-template-columns:repeat(2,1fr)}}.error{color:#d9534f;font-size:13px;margin:6px 0}@media (max-width: 768px){.view{padding:12px 8px}.primary-btn,.secondary-btn{padding:10px 16px;font-size:13px}}@media (hover: none) and (pointer: coarse){.page-container{-webkit-overflow-scrolling:touch}}.photo-item{transition:transform .2s ease,box-shadow .2s ease}.photo-item:hover{transform:scale(1.05);z-index:10}