html,body,#root{margin:0;height:100%;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}html{zoom:.75}*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}:root{--primary-dark: #1f2937;--primary-dark-hover: #111827;--primary-light: #f1f5f9;--accent: #4f46e5;--accent-hover: #4338ca;--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .15)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8fafc;color:#1f2937;line-height:1.5;width:min(100%,1300px);height:min(100%,1500px);margin-left:auto;margin-right:auto}.app{min-height:100vh;padding:24px;position:relative;overflow:hidden}.flying-particles-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1000}.flying-particle{position:absolute;font-size:34px;animation:flyAcrossScreen 2.5s cubic-bezier(.25,.46,.45,.94) forwards;pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));will-change:transform,opacity;backface-visibility:hidden;perspective:1000px}@keyframes flyAcrossScreen{0%{opacity:1;transform:translateZ(0) rotate(0) scale(1)}to{opacity:0;transform:translate3d(calc(var(--vx) * 100px),calc(var(--vy) * 100px + 350px),0) rotate(360deg) scale(.3)}}.container{max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.input-section{background:#fff;border-radius:20px;padding:28px 32px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e5e7eb}.input-row{display:grid;grid-template-columns:2fr 1fr auto auto;gap:20px;align-items:center}.input-group{display:flex;flex-direction:column}.country-group{flex:2}.date-group{flex:1}.love-group{flex:0 0 auto}.country-select .select__control{border:2px solid #e5e7eb;border-radius:16px;padding:8px 12px;box-shadow:none;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:56px;background:#fafbfc}.country-select .select__control:hover{border-color:#d1d5db;background:#fff}.country-select .select__control--is-focused{border-color:#374151;background:#fff;box-shadow:0 0 0 3px #3741511a}.country-select .select__placeholder{color:#9ca3af;font-weight:500}.country-select .select__single-value{color:#1f2937;font-weight:500}.country-select .select__menu{border-radius:16px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid #e5e7eb;overflow:hidden}.country-select .select__menu-list{padding:8px}.country-select .select__option{padding:12px 16px;border-radius:12px;margin-bottom:2px;font-weight:500}.country-select .select__option--is-focused{background-color:#f9fafb;color:#1f2937}.country-select .select__option--is-selected{background-color:#1f2937;color:#fff}.country-select .select__indicator-separator{display:none}.country-select .select__dropdown-indicator{color:#6b7280}.date-input{padding:16px 20px;border:2px solid #e5e7eb;border-radius:16px;font-size:16px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);background:#fafbfc;color:#1f2937;height:56px}.date-input:hover{border-color:#d1d5db;background:#fff}.date-input:focus{outline:none;border-color:#374151;background:#fff;box-shadow:0 0 0 3px #3741511a}.add-button{background:var(--accent);box-shadow:var(--shadow-sm);color:#fff;border:none;border-radius:16px;padding:0 32px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);height:56px;white-space:nowrap}.add-button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.add-button:active:not(:disabled){transform:translateY(0)}.add-button:disabled{background:#d1d5db;color:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.love-rating-container{display:flex;align-items:center;gap:12px;padding-right:16px;background:#f9fafb;border-radius:12px;border:2px solid #e5e7eb;transition:all .2s cubic-bezier(.4,0,.2,1)}.heart-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px}.love-rating-container:hover{border-color:#d1d5db;background:#fff}.heart-button{background:none;border:none;font-size:32px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.heart-button:hover{transform:scale(1.5)}.heart-button.animating{animation:heartPulse .3s ease-out}.love-counter{display:flex;flex-direction:column;align-items:center;gap:2px}.love-number{font-size:18px;font-weight:700;color:#1f2937;line-height:1}.love-label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}@keyframes heartPulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.heart-button[style*="rgb(251, 191, 36)"]{filter:drop-shadow(0 0 10px rgba(251,191,36,.6))}.heart-button[style*="rgb(255, 107, 157)"]{filter:drop-shadow(0 0 15px rgba(255,107,157,.8));animation:infiniteGlow 2s ease-in-out infinite}@keyframes infiniteGlow{0%,to{filter:drop-shadow(0 0 15px rgba(255,107,157,.8))}50%{filter:drop-shadow(0 0 25px rgba(255,107,157,1))}}.main-layout{display:flex;gap:24px;align-items:flex-start;min-height:70vh}.globe-section{flex:2.2;background:transparent;display:flex;justify-content:center;align-items:center;min-height:70vh;padding:0}.map-container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center;background:#fff!important;overflow:visible;position:relative;border-radius:20px;box-shadow:0 4px 20px #0000001a;animation:zoomFadeIn .9s ease both;transition:all .3s cubic-bezier(.4,0,.2,1);max-width:100%}.map-container>div,.map-container .js-plotly-plot,.map-container .plotly{width:100%!important;height:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;background:#fff!important;border-radius:20px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e5e7eb}.map-container .plotly{border-radius:20px;padding:0;box-shadow:none;border:none;max-height:none;overflow:visible;position:static;width:100%!important;height:100%!important}.map-loading{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;width:100%;border-radius:20px}.countries-sidebar{background:#fff;border-radius:20px;padding:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e5e7eb;overflow:hidden;position:sticky;top:auto;display:flex;flex-direction:column;height:fit-content;max-height:70vh;min-width:40%}.sidebar-title{font-size:20px;font-weight:700;color:#1f2937;margin-bottom:20px;text-align:center}.trips-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 4px}.trips-title{font-size:14px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.scroll-indicator{display:flex;align-items:center;gap:4px;color:#9ca3af;font-size:12px}.scroll-indicator span:first-child{font-size:14px;animation:bounce 2s infinite}.scroll-text{font-size:11px;font-weight:500}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-2px)}}.countries-list{display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:12px 20px 12px 12px;margin-right:-20px;max-height:50vh;position:relative;scroll-behavior:smooth;flex:1}.countries-list::-webkit-scrollbar{width:4px}.countries-list::-webkit-scrollbar-track{background:transparent}.countries-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}@media (max-width: 768px){.app{padding:16px}.fancy-title-container{margin-bottom:30px}.fancy-title{font-size:clamp(2rem,6vw,3rem);padding:15px 0}.sparkle-1{left:-40px;top:-5px}.sparkle-2{right:-40px;top:-5px}.container{gap:16px}.main-layout{flex-direction:column;gap:20px;min-height:auto;width:100%}.globe-section{min-height:auto;width:100%;padding:0}.map-container{width:100%;height:50vh;border-radius:20px}.countries-sidebar{width:100%;height:auto;max-height:120vh;position:static;padding:24px;border-radius:20px}.sidebar-title{font-size:18px;margin-bottom:16px}.buttons-section{flex-direction:column;gap:12px;margin-bottom:20px;padding:0}.play-button,.export-button{width:100%;padding:12px 16px;font-size:12px;border-radius:12px}.countries-list{max-height:30vh;gap:8px;padding:8px 16px 8px 8px;margin-right:-16px}.country-card{padding:8px;border-radius:8px;gap:8px}.country-flag{width:20px;height:15px}.visit-country{font-size:12px}.visit-date{font-size:10px}.remove-button{width:24px;height:24px;font-size:14px;padding:4px}.current-location-card{padding:12px;margin-bottom:10px;border-radius:10px}.location-header{font-size:10px;margin-bottom:6px}.input-section{padding:16px;border-radius:12px}.input-row{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:12px}.country-select .select__control,.date-input{min-height:44px;font-size:14px;border-radius:12px;padding:8px 12px}.love-rating-container{padding:6px;border-radius:10px;justify-content:center}.heart-button{font-size:24px}.love-counter{gap:1px}.love-number{font-size:14px}.love-label{font-size:9px}.add-button{height:44px;font-size:14px;border-radius:12px;padding:0 24px}.stats-section{padding:24px;overflow-x:scroll}.stats-grid{grid-template-columns:1fr;gap:16px}.stat-card{padding:16px;border-radius:12px}.stat-number{font-size:32px;margin-bottom:6px}.stat-country{font-size:20px;margin-bottom:6px}.stat-label{font-size:12px}.trips-header{margin-bottom:8px;padding:0 2px}.trips-title{font-size:12px}.scroll-indicator{gap:3px;font-size:10px}.scroll-text{font-size:9px}.empty-state{padding:20px 10px;min-height:120px}.empty-text{font-size:16px;margin-bottom:6px}.empty-subtext{font-size:12px}}@media (max-width: 480px){.app{padding:12px}.fancy-title-container{margin-bottom:20px}.fancy-title{font-size:clamp(1.8rem,7vw,2.5rem);padding:10px 0}.sparkle{font-size:1.2em}.sparkle-1{left:-30px;top:0}.sparkle-2{right:-30px;top:0}.container{gap:12px}.map-container{height:40vh}.countries-sidebar{padding:20px;max-height:120vh}.sidebar-title{font-size:16px;margin-bottom:12px}.play-button,.export-button{padding:10px 14px;font-size:11px;border-radius:10px}.countries-list{max-height:25vh;gap:6px}.country-card{padding:8px;gap:8px}.country-flag{width:24px;height:18px}.visit-country{font-size:11px}.visit-date{font-size:9px}.input-section{padding:20px}.input-row{gap:12px}.love-rating-container{gap:6px}.heart-button{font-size:14px}.love-number{font-size:11px}.love-label{font-size:9px}.stats-section{padding:20px}.stat-card{padding:12px}.stat-number{font-size:18px}.stat-country{font-size:11px}}.countries-list:after{content:"";position:sticky;bottom:-8px;left:0;right:0;height:16px;background:linear-gradient(to top,#fff,#fffc,#fff0);z-index:10;pointer-events:none;margin-top:-8px}.country-card{background:#f9fafb;border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;border:1px solid #e5e7eb;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);animation:fadeInUp .45s ease both;cursor:pointer;flex-shrink:0;position:relative}.country-card:hover{background:#fff;transform:scale(1.04);box-shadow:var(--shadow-sm);border-color:#d1d5db}.country-flag{width:32px;height:24px;border-radius:4px;object-fit:cover;flex-shrink:0;box-shadow:0 1px 3px #0003}.loading-spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top:3px solid #1f2937;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.stats-section{background:#fff;border-radius:20px;padding:32px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e5e7eb}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.stat-card{background:#fff;border-radius:20px;padding:32px;text-align:center;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid #f3f4f6;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);animation:fadeInUp .45s ease both;display:flex;flex-direction:column;justify-content:center;align-items:center}.stat-card:hover{transform:scale(1.04);box-shadow:var(--shadow-lg)}.stat-number{font-size:48px;font-weight:800;color:#1f2937;line-height:1;margin-bottom:8px}.stat-text{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-country{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.stat-label{font-size:14px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.visits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.visit-card{background:#fff;border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid #f3f4f6;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);animation:fadeInUp .45s ease both}.visit-card:hover{transform:scale(1.04);box-shadow:var(--shadow-lg)}.visit-color{width:16px;height:16px;border-radius:8px;flex-shrink:0;box-shadow:0 2px 4px #0000001a}.visit-info{flex:1;min-width:0;margin-left:4px}.visit-country{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.visit-date{font-size:14px;color:#6b7280;font-weight:500}.visit-love{display:flex;align-items:center;gap:8px;margin-top:4px}.love-hearts{display:flex;gap:2px}.mini-heart{font-size:10px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.remove-button{background:none;border:none;font-size:20px;color:#d1d5db;cursor:pointer;padding:8px;border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.remove-button:hover{background:#fef2f2;color:#ef4444;transform:scale(1.1)}.current-location-card{background:linear-gradient(135deg,#4f46e514,#4f46e50a);border-radius:12px;padding:16px;margin-bottom:16px;border:2px solid rgba(79,70,229,.2);box-shadow:0 4px 6px -1px #4f46e526,0 2px 20px -5px #4f46e51a;animation:fadeInUp .45s ease both;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.location-header{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}.country-card-content{display:flex;align-items:center;gap:12px}.current-location-card .visit-country{color:#1f2937;font-weight:700}.current-location-card .visit-date{color:#6b7280}.buttons-section{margin-bottom:24px;display:flex;gap:16px;flex-shrink:0;padding:0 4px}.play-button{background:#fff;color:#1f2937;border:2px solid #e5e7eb;border-radius:16px;padding:16px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px;justify-content:center;flex:1;box-shadow:0 1px 3px #0000001a}.play-button:hover:not(:disabled){background:#f9fafb;border-color:#d1d5db;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a}.play-button:active:not(:disabled){transform:translateY(0)}.play-button:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.export-button{background:#fff;color:#1f2937;border:2px solid #e5e7eb;border-radius:16px;padding:16px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px;justify-content:center;flex:1;box-shadow:0 1px 3px #0000001a}.export-button:hover:not(:disabled){background:#f9fafb;border-color:#d1d5db;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a}.export-button:active:not(:disabled){transform:translateY(0)}.export-button:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.country-card.playing{background:#fef3c7;border:2px solid #f59e0b;transform:scale(1.01);animation:playingPulse 1s ease-in-out infinite alternate}@keyframes playingPulse{0%{box-shadow:0 0 #f59e0b66}to{box-shadow:0 0 0 8px #f59e0b00}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#6b7280;flex:1;min-height:200px}.empty-doodle{margin-bottom:16px;opacity:.6;animation:float 3s ease-in-out infinite}.empty-text{font-size:20px;font-weight:600;margin-bottom:12px;color:#4b5563}.empty-subtext{font-size:14px;color:#d1d5db;font-weight:500}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes zoomFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f9fafb;border-radius:10px}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}