:root{--primary-color-yellow: #FFF5E6;--primary-color-pink: #FCE4EC;--primary-color-darkblue: #1E3A8A;--primary-color-teal: #008080;--primary-color-skyblue: #87CEEB;--secondary-color-text: #333;--accent-color-button-pink: #FFB6C1;--accent-color-hover-pink: #FF8C9E;--accent-color-button-blue: #4682B4;--accent-color-hover-blue: #5A9BD4;--border-color: #d0d0d0;--done-color: #4CAF50;--pending-color: #FFA000;--delete-color: #F44336;--shadow-light: rgba(0, 0, 0, .05);--shadow-medium: rgba(0, 0, 0, .1);--card-shadow: 0 4px 12px var(--shadow-light);--button-shadow: 0 2px 6px var(--shadow-medium);--transition-fast: all .3s ease;--font-family-main: "Nunito", sans-serif;--font-family-handwriting: "Caveat", cursive}body{margin:0;font-family:var(--font-family-main);background-color:var(--primary-color-yellow);color:var(--secondary-color-text);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}.app-container{width:100%;max-width:420px;height:100vh;display:flex;flex-direction:column;background-color:var(--primary-color-yellow);box-shadow:0 0 20px var(--shadow-medium);position:relative;overflow:hidden}.loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#ffffffe6;z-index:1000;font-size:1.1em;color:var(--secondary-color-text)}.spinner{border:4px solid rgba(0,0,0,.1);width:36px;height:36px;border-radius:50%;border-left-color:var(--accent-color-button-pink);animation:spin 1s ease infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-content{flex-grow:1;padding:20px 20px 80px;overflow-y:auto;position:relative}.tab-content{display:flex;flex-direction:column;align-items:center;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.main-title{font-family:var(--font-family-handwriting);font-size:2.5em;color:var(--secondary-color-text);margin-bottom:20px;text-align:center;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.main-title .cloud-badge{font-size:.6em;background-color:#ffffffb3;padding:4px 8px;border-radius:10px;color:#666;font-family:var(--font-family-main);font-weight:700}.tab-title{font-family:var(--font-family-handwriting);font-size:2em;color:var(--secondary-color-text);margin-bottom:20px;text-align:center;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.tab-title .cloud-badge{font-size:.5em;background-color:#ffffffb3;padding:3px 7px;border-radius:8px;color:#666;font-family:var(--font-family-main);font-weight:700}.custom-icon{width:24px;height:24px;vertical-align:middle}.countdown-section{background:linear-gradient(135deg,var(--primary-color-yellow) 0%,var(--primary-color-pink) 100%);padding:25px;border-radius:15px;text-align:center;margin-bottom:30px;box-shadow:var(--card-shadow);width:90%;max-width:350px}.countdown-section h2{font-size:1.4em;margin-bottom:15px;color:var(--secondary-color-text);font-family:var(--font-family-main)}.countdown-timer{display:flex;justify-content:space-around;font-size:2.5em;font-weight:700;color:var(--secondary-color-text)}.countdown-timer div{display:flex;flex-direction:column;align-items:center;line-height:1.1}.countdown-timer span{font-size:.4em;font-weight:400;color:#777}.birthday-date-display{margin-top:15px;font-size:1.1em;color:#666}.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:20px}.action-button,.add-button{background-color:var(--accent-color-button-pink);color:var(--secondary-color-text);border:none;padding:12px 18px;border-radius:12px;font-size:1em;font-weight:700;cursor:pointer;transition:var(--transition-fast);box-shadow:var(--button-shadow);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-family-main)}.action-button:hover,.add-button:hover{background-color:var(--accent-color-hover-pink);transform:translateY(-2px)}.action-button.confetti-button{background-color:var(--accent-color-button-pink);grid-column:1 / -1;margin-top:10px}.add-item-form,.add-photo-section{display:flex;width:100%;margin-bottom:20px;gap:10px;background-color:#ffffff80;padding:10px;border-radius:12px}.add-item-form input,.add-item-form textarea,.photo-caption-input{flex-grow:1;border:1px solid var(--border-color);padding:10px 12px;border-radius:10px;font-size:1em;font-family:var(--font-family-main);transition:border-color .3s ease}.add-item-form input:focus,.add-item-form textarea:focus,.photo-caption-input:focus{outline:none;border-color:var(--accent-color-button-pink)}.add-item-form textarea{resize:vertical;min-height:40px}.add-button{background-color:var(--accent-color-button-pink);flex-shrink:0;width:40px;height:40px;padding:0}.add-button:hover{background-color:var(--accent-color-hover-pink)}.upload-button{background-color:var(--accent-color-button-pink);flex-shrink:0;padding:10px 15px}.upload-button:hover{background-color:var(--accent-color-hover-pink)}.photo-caption-input{max-width:150px}.item-list{list-style:none;padding:0;width:100%}.list-item{background-color:#fff;padding:12px 15px;margin-bottom:10px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--card-shadow);transition:var(--transition-fast);word-break:break-word}.list-item:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow-medium)}.list-item.done{text-decoration:line-through;color:#999;background-color:#f0f0f0}.list-item.received{background-color:var(--primary-color-pink);opacity:.8}.item-text{flex-grow:1;margin-right:10px;cursor:pointer;padding:5px 0}.item-actions{display:flex;gap:8px;flex-shrink:0}.toggle-button,.delete-button{background:none;border:none;cursor:pointer;padding:5px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:var(--transition-fast)}.toggle-button{color:var(--pending-color)}.list-item.done .toggle-button,.list-item.received .toggle-button{color:var(--done-color)}.delete-button{color:var(--delete-color);opacity:.7}.toggle-button:hover,.list-item.done .toggle-button:hover,.list-item.received .toggle-button:hover{background-color:#4caf501a}.delete-button:hover{background-color:#f443361a}.gift-details{display:flex;flex-direction:column;flex-grow:1;margin-right:10px}.gift-details strong{font-weight:600}.gift-details span{font-size:.9em;color:#777}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;width:100%}.card-item{background-color:#fff;padding:15px;border-radius:12px;box-shadow:var(--card-shadow);position:relative;transition:var(--transition-fast);display:flex;flex-direction:column;justify-content:space-between;min-height:150px}.card-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow-medium)}.card-header{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.9em;color:#666}.card-header .sender{font-weight:700;color:var(--secondary-color-text)}.card-item .message{font-family:var(--font-family-handwriting);font-size:1.1em;color:var(--secondary-color-text);line-height:1.4;flex-grow:1;margin-bottom:10px}.card-delete{position:absolute;top:10px;right:10px;opacity:.6}.card-delete:hover{opacity:1}.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;width:100%}.photo-item{background-color:#fff;padding:10px;border-radius:12px;box-shadow:var(--card-shadow);text-align:center;transition:var(--transition-fast);position:relative}.photo-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px var(--shadow-medium)}.photo-wrapper{width:100%;aspect-ratio:1 / 1;background-color:var(--primary-color-pink);border-radius:8px;margin-bottom:8px;display:flex;justify-content:center;align-items:center;overflow:hidden}.photo-img{width:100%;height:100%;object-fit:cover;display:block}.photo-emoji{font-size:2.5em}.caption{font-size:.85em;color:#666;word-break:break-word}.photo-delete{position:absolute;top:5px;right:5px;opacity:.6;background-color:#ffffffb3}.photo-delete:hover{opacity:1}.settings-tab{width:100%;padding:10px 0}.setting-item{background-color:#fff;padding:15px 20px;margin-bottom:15px;border-radius:12px;box-shadow:var(--card-shadow);display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.setting-item label{font-weight:700;color:var(--secondary-color-text);flex-shrink:0}.setting-item input[type=date]{border:none;padding:8px 12px;border-radius:8px;font-size:1em;font-family:var(--font-family-main);cursor:pointer;background-color:var(--primary-color-yellow);color:var(--secondary-color-text);box-shadow:inset 0 1px 3px var(--shadow-light)}.setting-item input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6)}.theme-selector span,.reminder-toggle span{font-weight:700;color:var(--secondary-color-text)}.color-options{display:flex;gap:10px}.color-swatch{width:30px;height:30px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:var(--transition-fast);box-shadow:var(--button-shadow)}.color-swatch.active{border-color:var(--secondary-color-text);transform:scale(1.1)}.toggle-switch{width:50px;height:26px;background-color:#ccc;border-radius:13px;position:relative;cursor:pointer;transition:var(--transition-fast);box-shadow:inset 0 1px 3px var(--shadow-light)}.toggle-switch.on{background-color:var(--done-color)}.toggle-handle{width:22px;height:22px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:var(--transition-fast)}.toggle-switch.on .toggle-handle{left:26px}.confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.bottom-nav{display:flex;justify-content:space-around;align-items:center;background:#fffc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.3);padding:10px 0;position:sticky;bottom:0;width:100%;z-index:100;border-radius:20px 20px 0 0;box-shadow:0 -2px 10px var(--shadow-light)}.bottom-nav button{background:none;border:none;color:var(--secondary-color-text);font-size:.75em;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 5px;cursor:pointer;transition:var(--transition-fast);flex:1;text-align:center}.bottom-nav button.active{color:var(--primary-color-darkblue);font-weight:700}.bottom-nav svg{width:24px;height:24px;margin-bottom:4px}.bottom-nav .custom-icon.nav-icon{width:20px;height:20px;margin-bottom:6px}.bottom-nav button.active .custom-icon.nav-icon{filter:brightness(.5)}.app-container[style*="background-color: #1E3A8A"] .action-button,.app-container[style*="background-color: #1E3A8A"] .add-button,.app-container[style*="background-color: #1E3A8A"] .upload-button,.app-container[style*="background-color: #1E3A8A"] .confetti-button{background-color:var(--accent-color-button-blue)}.app-container[style*="background-color: #1E3A8A"] .action-button:hover,.app-container[style*="background-color: #1E3A8A"] .add-button:hover,.app-container[style*="background-color: #1E3A8A"] .upload-button:hover{background-color:var(--accent-color-hover-blue)}.app-container[style*="background-color: #1E3A8A"] .bottom-nav button.active{color:var(--primary-color-darkblue)}.app-container[style*="background-color: #008080"] .action-button,.app-container[style*="background-color: #008080"] .add-button,.app-container[style*="background-color: #008080"] .upload-button,.app-container[style*="background-color: #008080"] .confetti-button{background-color:var(--accent-color-button-blue)}.app-container[style*="background-color: #008080"] .action-button:hover,.app-container[style*="background-color: #008080"] .add-button:hover,.app-container[style*="background-color: #008080"] .upload-button:hover{background-color:var(--accent-color-hover-blue)}.app-container[style*="background-color: #008080"] .bottom-nav button.active{color:var(--primary-color-teal)}.app-container[style*="background-color: #87CEEB"] .action-button,.app-container[style*="background-color: #87CEEB"] .add-button,.app-container[style*="background-color: #87CEEB"] .upload-button,.app-container[style*="background-color: #87CEEB"] .confetti-button{background-color:var(--accent-color-button-pink)}.app-container[style*="background-color: #87CEEB"] .action-button:hover,.app-container[style*="background-color: #87CEEB"] .add-button:hover,.app-container[style*="background-color: #87CEEB"] .upload-button:hover{background-color:var(--accent-color-hover-pink)}.app-container[style*="background-color: #87CEEB"] .bottom-nav button.active{color:var(--primary-color-skyblue)}.home-tab .quick-actions{grid-template-columns:repeat(2,1fr)}.wishlist-tab .item-list .list-item.done .item-text{color:#aaa;text-decoration:line-through}.giftlist-tab .gift-details span{font-size:.85em;color:#888}.photos-tab .add-photo-section{flex-wrap:wrap;justify-content:center}.photos-tab .upload-button{width:auto}.photo-caption-input{flex-grow:1;min-width:120px}@media (max-width: 375px){.main-title{font-size:2em}.tab-title{font-size:1.7em}.countdown-timer{font-size:2em}.action-button,.add-button{font-size:.9em;padding:10px 15px}.bottom-nav button{font-size:.7em}.bottom-nav svg{width:22px;height:22px}.add-item-form input,.add-item-form textarea{padding:8px 10px;font-size:.9em}}.bottom-nav svg,.action-button svg,.add-button svg,.tab-title svg,.main-title svg,.custom-icon{width:20px;height:20px}.bottom-nav button.active svg,.bottom-nav button.active .custom-icon.nav-icon{filter:brightness(.3)}.app-container[style*="background-color: #1E3A8A"] .main-title,.app-container[style*="background-color: #1E3A8A"] .tab-title,.app-container[style*="background-color: #1E3A8A"] .countdown-section h2,.app-container[style*="background-color: #1E3A8A"] .birthday-date-display,.app-container[style*="background-color: #1E3A8A"] .setting-item label,.app-container[style*="background-color: #1E3A8A"] .theme-selector span,.app-container[style*="background-color: #1E3A8A"] .reminder-toggle span,.app-container[style*="background-color: #1E3A8A"] .countdown-timer,.app-container[style*="background-color: #1E3A8A"] .countdown-timer span,.app-container[style*="background-color: #1E3A8A"] .card-header .sender,.app-container[style*="background-color: #1E3A8A"] .gift-details strong{color:#fff}.app-container[style*="background-color: #1E3A8A"] .countdown-timer span,.app-container[style*="background-color: #1E3A8A"] .card-header .date,.app-container[style*="background-color: #1E3A8A"] .gift-details span{color:#ffffffb3}.app-container[style*="background-color: #1E3A8A"] .card-item,.app-container[style*="background-color: #1E3A8A"] .list-item,.app-container[style*="background-color: #1E3A8A"] .photo-item,.app-container[style*="background-color: #1E3A8A"] .setting-item{background-color:#fff3;box-shadow:0 4px 12px #0003}.app-container[style*="background-color: #1E3A8A"] .card-item .message{color:#fff}.app-container[style*="background-color: #1E3A8A"] .bottom-nav{background:#1e3a8ab3;border-top:1px solid rgba(255,255,255,.1)}.app-container[style*="background-color: #1E3A8A"] .bottom-nav button.active{color:#87ceeb}.app-container[style*="background-color: #008080"] .main-title,.app-container[style*="background-color: #008080"] .tab-title,.app-container[style*="background-color: #008080"] .countdown-section h2,.app-container[style*="background-color: #008080"] .birthday-date-display,.app-container[style*="background-color: #008080"] .setting-item label,.app-container[style*="background-color: #008080"] .theme-selector span,.app-container[style*="background-color: #008080"] .reminder-toggle span,.app-container[style*="background-color: #008080"] .countdown-timer,.app-container[style*="background-color: #008080"] .card-header .sender,.app-container[style*="background-color: #008080"] .gift-details strong{color:#fff}.app-container[style*="background-color: #008080"] .countdown-timer span,.app-container[style*="background-color: #008080"] .card-header .date,.app-container[style*="background-color: #008080"] .gift-details span{color:#ffffffb3}.app-container[style*="background-color: #008080"] .card-item,.app-container[style*="background-color: #008080"] .list-item,.app-container[style*="background-color: #008080"] .photo-item,.app-container[style*="background-color: #008080"] .setting-item{background-color:#fff3;box-shadow:0 4px 12px #0003}.app-container[style*="background-color: #008080"] .card-item .message{color:#fff}.app-container[style*="background-color: #008080"] .bottom-nav{background:#008080b3;border-top:1px solid rgba(255,255,255,.1)}.app-container[style*="background-color: #008080"] .bottom-nav button.active{color:#87ceeb}.app-container[style*="background-color: #87CEEB"] .main-title,.app-container[style*="background-color: #87CEEB"] .tab-title,.app-container[style*="background-color: #87CEEB"] .countdown-section h2,.app-container[style*="background-color: #87CEEB"] .birthday-date-display,.app-container[style*="background-color: #87CEEB"] .setting-item label,.app-container[style*="background-color: #87CEEB"] .theme-selector span,.app-container[style*="background-color: #87CEEB"] .reminder-toggle span,.app-container[style*="background-color: #87CEEB"] .countdown-timer,.app-container[style*="background-color: #87CEEB"] .card-header .sender,.app-container[style*="background-color: #87CEEB"] .gift-details strong{color:var(--secondary-color-text)}.app-container[style*="background-color: #87CEEB"] .countdown-timer span,.app-container[style*="background-color: #87CEEB"] .card-header .date,.app-container[style*="background-color: #87CEEB"] .gift-details span{color:#555}.app-container[style*="background-color: #87CEEB"] .card-item,.app-container[style*="background-color: #87CEEB"] .list-item,.app-container[style*="background-color: #87CEEB"] .photo-item,.app-container[style*="background-color: #87CEEB"] .setting-item{background-color:#fff;box-shadow:var(--card-shadow)}.app-container[style*="background-color: #87CEEB"] .card-item .message{color:var(--secondary-color-text)}.app-container[style*="background-color: #87CEEB"] .bottom-nav{background:#87ceebb3;border-top:1px solid rgba(0,0,0,.1)}.app-container[style*="background-color: #87CEEB"] .bottom-nav button.active{color:var(--primary-color-darkblue)}