:root{--color-primary: #5E35B1;--color-primary-dark: #311B92;--color-accent: #FFAB00;--color-accent-dark: #E69A00;--color-background-light: #f8f9fa;--color-background-dark: #121212;--color-surface-light: #ffffff;--color-surface-dark: #1e1e1e;--color-text-light: #212529;--color-text-dark: #e0e0e0;--color-text-muted-light: #6c757d;--color-text-muted-dark: #9e9e9e;--color-border-light: #dee2e6;--color-border-dark: #424242;--color-cloud-sync: #4FC3F7;--color-cloud-sync-dark: #29B6F6;--color-icon-light: #495057;--color-icon-dark: #bdbdbd;--color-difficulty-easy: #4CAF50;--color-difficulty-medium: #FFC107;--color-difficulty-hard: #F44336;--color-locked-overlay: rgba(0, 0, 0, .6);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--border-radius: 12px;--box-shadow-light: 0 5px 20px rgba(0, 0, 0, .08);--box-shadow-dark: 0 5px 20px rgba(0, 0, 0, .2);--transition-speed: .3s}body.dark{--color-primary: #9575CD;--color-primary-dark: #7E57C2;--color-accent: #FFD54F;--color-accent-dark: #FFA000;--color-background-light: var(--color-background-dark);--color-surface-light: var(--color-surface-dark);--color-text-light: var(--color-text-dark);--color-text-muted-light: var(--color-text-muted-dark);--color-border-light: var(--color-border-dark);--color-cloud-sync: var(--color-cloud-sync-dark);--color-icon-light: var(--color-icon-dark);--color-difficulty-easy: #81C784;--color-difficulty-medium: #FFD54F;--color-difficulty-hard: #EF5350}body{font-family:var(--font-family);margin:0;padding:0;background-color:var(--color-background-light);color:var(--color-text-light);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease;line-height:1.6;overflow-x:hidden}body.dark{background-color:var(--color-background-dark);color:var(--color-text-dark)}.app-container{display:flex;flex-direction:column;min-height:100vh;max-width:100%;overflow-x:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background-color:var(--color-surface-light);box-shadow:var(--box-shadow-light);border-bottom:1px solid var(--color-border-light);position:sticky;top:0;z-index:1000;transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .app-header{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark);border-bottom:1px solid var(--color-border-dark)}.app-header .header-icon{color:var(--color-primary);margin-right:10px;width:28px;height:28px}.app-header h1{margin:0;font-size:1.5em;color:var(--color-primary);font-weight:600;letter-spacing:.5px}.cloud-sync-status{font-size:.85em;color:var(--color-cloud-sync);background-color:#4fc3f726;padding:5px 10px;border-radius:8px;transition:color var(--transition-speed) ease}body.dark .cloud-sync-status{color:var(--color-cloud-sync-dark);background-color:#29b6f626}.loading-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:1.2em;color:var(--color-text-muted-light);transition:color var(--transition-speed) ease}body.dark .loading-screen{color:var(--color-text-muted-dark)}button{background:none;border:none;cursor:pointer;font-family:inherit;transition:all .2s ease}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-speed) ease}a:hover{color:var(--color-primary-dark)}input[type=text],input[type=date],input[type=time],textarea{width:100%;padding:12px 15px;margin-top:8px;border:1px solid var(--color-border-light);border-radius:var(--border-radius);box-sizing:border-box;font-size:1em;transition:border-color var(--transition-speed) ease,background-color var(--transition-speed) ease,color var(--transition-speed) ease}body.dark input[type=text],body.dark input[type=date],body.dark input[type=time],body.dark textarea{border-color:var(--color-border-dark);background-color:var(--color-surface-dark);color:var(--color-text-dark)}input:focus,textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #5e3bb14d}body.dark input:focus,body.dark textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #9575cd66}label{display:block;margin-bottom:5px;font-weight:500;color:var(--color-text-muted-light)}body.dark label{color:var(--color-text-muted-dark)}.home-page main{padding:20px;flex-grow:1;display:flex;flex-direction:column;align-items:center}.recommended-trip-card{background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:20px;margin-bottom:25px;width:100%;max-width:500px;cursor:pointer;transition:transform .2s ease,box-shadow var(--transition-speed) ease;border-left:5px solid var(--color-primary)}body.dark .recommended-trip-card{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark)}.recommended-trip-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}body.dark .recommended-trip-card:hover{box-shadow:0 8px 25px #00000059}.recommended-trip-card .card-header{display:flex;align-items:center;margin-bottom:10px}.recommended-trip-card .card-icon{color:var(--color-primary);margin-right:10px;width:24px;height:24px}.recommended-trip-card h2{margin:0;font-size:1.4em;color:var(--color-primary)}.recommended-trip-card p{margin:5px 0;font-size:.95em;color:var(--color-text-muted-light)}body.dark .recommended-trip-card p{color:var(--color-text-muted-dark)}.quick-actions{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;width:100%;max-width:500px}.action-button{background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:15px 25px;display:flex;align-items:center;gap:10px;font-size:1.1em;font-weight:500;color:var(--color-primary);border:1px solid var(--color-border-light);transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease,transform .2s ease}body.dark .action-button{background-color:var(--color-surface-dark);border-color:var(--color-border-dark)}.action-button:hover{background-color:var(--color-background-light);box-shadow:0 6px 20px #0000001f;transform:translateY(-3px)}body.dark .action-button:hover{background-color:var(--color-background-dark);box-shadow:0 6px 20px #0000004d}.action-button svg{color:var(--color-primary)}.trip-list-page main{padding:20px;flex-grow:1}.search-bar{display:flex;align-items:center;background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:10px 15px;margin:0 20px 20px;transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease}body.dark .search-bar{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark)}.search-bar svg{color:var(--color-text-muted-light);margin-right:10px}body.dark .search-bar svg{color:var(--color-text-muted-dark)}.search-bar input{flex-grow:1;border:none;background:none;font-size:1em;padding:0;margin:0}.search-bar input:focus{box-shadow:none}.sort-button{margin-left:10px;padding:8px 12px;background-color:var(--color-accent);color:#fff;border-radius:8px;font-weight:500;font-size:.9em;transition:background-color .2s ease}.sort-button:hover{background-color:var(--color-accent-dark)}.trip-card{background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);margin-bottom:15px;cursor:pointer;transition:transform .2s ease,box-shadow var(--transition-speed) ease}body.dark .trip-card{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark)}.trip-card:hover{transform:translateY(-5px);box-shadow:0 6px 20px #0000001f}body.dark .trip-card:hover{box-shadow:0 6px 20px #0000004d}.trip-card .card-content{display:flex;justify-content:space-between;align-items:center;padding:15px 20px}.trip-info h3{margin:0 0 5px;font-size:1.2em;color:var(--color-primary)}.trip-info p{margin:3px 0;font-size:.9em;color:var(--color-text-muted-light);display:flex;align-items:center;gap:5px}body.dark .trip-info p{color:var(--color-text-muted-dark)}.trip-info p svg{color:var(--color-accent)}.trip-actions button{background-color:var(--color-accent);color:#fff;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;box-shadow:var(--box-shadow-light);transition:background-color .2s ease,transform .2s ease}.trip-actions button:hover{background-color:var(--color-accent-dark);transform:scale(1.05)}.empty-state{text-align:center;padding:50px 20px;color:var(--color-text-muted-light)}body.dark .empty-state{color:var(--color-text-muted-dark)}.empty-state p{font-size:1.1em;margin-bottom:20px}.empty-state button{background-color:var(--color-primary);color:#fff;padding:12px 25px;border-radius:var(--border-radius);font-weight:500;font-size:1em}.empty-state button:hover{background-color:var(--color-primary-dark)}.add-edit-trip-page main{padding:20px;flex-grow:1}.form-group{margin-bottom:20px}.form-group label{margin-bottom:8px}.destination-card{background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:20px;margin-bottom:20px;border:1px solid var(--color-border-light);transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .destination-card{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark);border-color:var(--color-border-dark)}.destination-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px dashed var(--color-border-light)}body.dark .destination-header{border-bottom-color:var(--color-border-dark)}.destination-header h4{margin:0;font-size:1.2em;color:var(--color-primary)}.destination-card .remove-button{background-color:var(--color-accent);color:#fff;border-radius:50%;width:30px;height:30px;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease}.destination-card .remove-button:hover{background-color:var(--color-accent-dark)}.activities-list h5{margin-top:0;margin-bottom:15px;font-size:1.1em;color:var(--color-text-muted-light)}body.dark .activities-list h5{color:var(--color-text-muted-dark)}.activity-item{display:flex;align-items:center;gap:10px;margin-bottom:15px;padding:10px;background-color:var(--color-background-light);border-radius:8px;border:1px solid var(--color-border-light);transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .activity-item{background-color:var(--color-surface-dark);border-color:var(--color-border-dark)}.activity-item input[type=time]{width:80px;flex-shrink:0;border:1px solid var(--color-border-light)}body.dark .activity-item input[type=time]{border-color:var(--color-border-dark)}.activity-item input[type=text]{flex-grow:1;border:1px solid var(--color-border-light)}body.dark .activity-item input[type=text]{border-color:var(--color-border-dark)}.activity-item .activity-type-selector{display:flex;gap:5px;flex-shrink:0}.activity-type-selector .type-button{padding:5px 10px;border-radius:6px;font-size:.8em;border:1px solid var(--color-border-light);color:var(--color-text-muted-light);transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease,color var(--transition-speed) ease;display:flex;align-items:center;gap:4px}body.dark .activity-type-selector .type-button{border-color:var(--color-border-dark);color:var(--color-text-muted-dark)}.activity-type-selector .type-button.selected{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:500}.activity-type-selector .type-button svg{width:16px;height:16px}.activity-item .remove-button{background-color:var(--color-accent);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center;margin-left:5px;flex-shrink:0}.activity-item .remove-button:hover{background-color:var(--color-accent-dark)}.add-activity-button,.add-destination-button{background-color:var(--color-primary);color:#fff;padding:10px 15px;border-radius:var(--border-radius);font-weight:500;display:flex;align-items:center;gap:8px;width:fit-content;margin-top:10px;transition:background-color .2s ease}.add-activity-button:hover,.add-destination-button:hover{background-color:var(--color-primary-dark)}.add-activity-button svg,.add-destination-button svg{width:18px;height:18px}.recommended-spots-section{margin-top:30px;background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:20px;border:1px solid var(--color-border-light);transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .recommended-spots-section{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark);border-color:var(--color-border-dark)}.recommended-spots-section h4{color:var(--color-primary);margin-top:0;margin-bottom:15px;font-size:1.3em;display:flex;align-items:center;gap:10px}.recommended-spots-section h4 .lucide-lightbulb{color:var(--color-accent)}.recommended-spot-card{position:relative;background-color:var(--color-background-light);border-radius:var(--border-radius);padding:15px;margin-bottom:15px;border:1px solid var(--color-border-light);transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .recommended-spot-card{background-color:var(--color-surface-dark);border-color:var(--color-border-dark)}.recommended-spot-card.unlocked{border-left:5px solid var(--color-difficulty-easy)}.recommended-spot-card.locked{opacity:.7;filter:grayscale(30%)}.recommended-spot-card .spot-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.recommended-spot-card .spot-icon{color:var(--color-accent)}.recommended-spot-card h5{margin:0;font-size:1.1em;color:var(--color-primary);flex-grow:1}.recommended-spot-card .difficulty{font-weight:500;font-size:.85em;padding:4px 8px;border-radius:6px;color:#fff}.difficulty.easy{background-color:var(--color-difficulty-easy)}.difficulty.medium{background-color:var(--color-difficulty-medium)}.difficulty.hard{background-color:var(--color-difficulty-hard)}.recommended-spot-card .spot-type{font-size:.8em;color:var(--color-text-muted-light);margin-bottom:5px}body.dark .recommended-spot-card .spot-type{color:var(--color-text-muted-dark)}.recommended-spot-card .spot-description{font-size:.9em;color:var(--color-text-muted-light)}body.dark .recommended-spot-card .spot-description{color:var(--color-text-muted-dark)}.recommended-spot-card .locked-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--color-locked-overlay);border-radius:var(--border-radius);display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:1.2em}.trip-detail-page main{padding:20px;flex-grow:1}.trip-actions-header{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 15px}.edit-button,.delete-button{padding:8px 15px;border-radius:var(--border-radius);font-weight:500;font-size:.9em}.edit-button{background-color:var(--color-accent);color:#fff}.edit-button:hover{background-color:var(--color-accent-dark)}.delete-button{background-color:var(--color-text-muted-light);color:#fff}body.dark .delete-button{background-color:var(--color-text-muted-dark)}.delete-button:hover{background-color:#e74c3c}.destination-section{margin-bottom:30px;background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:20px;border-left:5px solid var(--color-accent);transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .destination-section{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark);border-left-color:var(--color-accent-dark)}.destination-section .destination-header{display:flex;align-items:center;gap:10px;margin-bottom:15px;padding-bottom:10px;border-bottom:1px dashed var(--color-border-light)}body.dark .destination-section .destination-header{border-bottom-color:var(--color-border-dark)}.destination-section .destination-header h3{margin:0;font-size:1.3em;color:var(--color-primary)}.destination-section .destination-header span{font-size:.9em;color:var(--color-text-muted-light)}body.dark .destination-section .destination-header span{color:var(--color-text-muted-dark)}.activities-timeline{position:relative;padding-left:30px}.activities-timeline:before{content:"";position:absolute;top:0;bottom:0;left:15px;width:2px;background-color:var(--color-accent);opacity:.7;border-radius:1px}.activity-item-detail{display:flex;align-items:flex-start;margin-bottom:20px;position:relative;padding-left:25px}.activity-item-detail:before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;background-color:var(--color-accent);border-radius:50%;z-index:1;border:2px solid white}body.dark .activity-item-detail:before{border-color:var(--color-surface-dark)}.activity-item-detail .activity-time{display:flex;align-items:center;gap:5px;font-weight:500;color:var(--color-primary);flex-shrink:0;width:90px;margin-top:2px}.activity-item-detail .activity-time svg{width:16px;height:16px;color:var(--color-accent)}.activity-item-detail .activity-content{display:flex;align-items:center;gap:10px;flex-grow:1}.activity-content .activity-icon{width:20px;height:20px;color:var(--color-primary)}.activity-content p{margin:0;font-size:.95em}.activity-item-detail .remove-button{background-color:var(--color-accent);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;justify-content:center;align-items:center;margin-left:10px;flex-shrink:0;opacity:0;transition:opacity .2s ease,background-color .2s ease}.activity-item-detail:hover .remove-button{opacity:1}.activity-item-detail .remove-button:hover{background-color:var(--color-accent-dark)}.no-activities{color:var(--color-text-muted-light);font-style:italic;padding-left:25px}body.dark .no-activities{color:var(--color-text-muted-dark)}.trip-recommendations-section{margin-top:30px;background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:20px;border:1px solid var(--color-border-light);transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .trip-recommendations-section{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark);border-color:var(--color-border-dark)}.trip-recommendations-section h4{color:var(--color-primary);margin-top:0;margin-bottom:15px;font-size:1.3em;display:flex;align-items:center;gap:10px}.trip-recommendations-section h4 .lucide-award{color:var(--color-accent)}.settings-page main{padding:20px;flex-grow:1}.setting-item{background-color:var(--color-surface-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-light);padding:15px 20px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;transition:background-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease}body.dark .setting-item{background-color:var(--color-surface-dark);box-shadow:var(--box-shadow-dark)}.setting-item span{font-size:1.1em;font-weight:500}.theme-toggle-button{display:flex;align-items:center;gap:10px;padding:8px 15px;background-color:var(--color-primary);color:#fff;border-radius:var(--border-radius);font-weight:500;font-size:.95em;transition:background-color .2s ease}.theme-toggle-button:hover{background-color:var(--color-primary-dark)}.theme-toggle-button svg{width:18px;height:18px}.app-footer{display:flex;justify-content:space-around;align-items:center;padding:10px 0;background-color:var(--color-surface-light);border-top:1px solid var(--color-border-light);box-shadow:0 -2px 5px #0000000d;position:sticky;bottom:0;z-index:1000;transition:background-color var(--transition-speed) ease,border-color var(--transition-speed) ease}body.dark .app-footer{background-color:var(--color-surface-dark);border-top:1px solid var(--color-border-dark)}.app-footer button{background:none;border:none;color:var(--color-text-muted-light);display:flex;flex-direction:column;align-items:center;font-size:.7em;padding:8px 10px;width:60px;transition:color var(--transition-speed) ease}body.dark .app-footer button{color:var(--color-text-muted-dark)}.app-footer button svg{width:24px;height:24px;margin-bottom:4px;color:var(--color-icon-light)}body.dark .app-footer button svg{color:var(--color-icon-dark)}.app-footer button.active,.app-footer button:hover{color:var(--color-primary)}.app-footer button.active svg,.app-footer button:hover svg{color:var(--color-primary)}.add-trip-button{background-color:var(--color-primary);color:#fff;border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin-top:-15px;box-shadow:0 5px 15px #5e3bb166;transition:background-color .2s ease,transform .2s ease}.add-trip-button:hover{background-color:var(--color-primary-dark);transform:scale(1.05)}.add-trip-button svg{width:28px;height:28px;color:#fff}@media (max-width: 768px){.app-header{padding:12px 15px}.app-header h1{font-size:1.3em}.recommended-trip-card{padding:15px}.action-button{padding:12px 20px;font-size:1em}.search-bar{margin:0 15px 15px;padding:8px 12px}.trip-card .card-content{padding:12px 15px}.trip-info h3{font-size:1.1em}.trip-info p{font-size:.85em}.activity-item,.activity-item-detail{flex-wrap:wrap}.activity-item input[type=text],.activity-item input[type=time]{width:calc(50% - 15px)}.activity-type-selector{width:100%;margin-top:10px;justify-content:center}.activity-item .remove-button{margin-left:auto}.form-footer{padding:15px;justify-content:center}.save-button,.cancel-button{padding:10px 20px;font-size:.95em}.app-footer{padding:8px 0}.add-trip-button{width:45px;height:45px;margin-top:-12px}.add-trip-button svg{width:24px;height:24px}.recommended-spots-section,.trip-recommendations-section{padding:15px}.recommended-spots-section h4,.trip-recommendations-section h4{font-size:1.15em}}.text-center{text-align:center}.flex-center{display:flex;justify-content:center;align-items:center}.shadow-light{box-shadow:var(--box-shadow-light)}.shadow-dark{box-shadow:var(--box-shadow-dark)}.rounded-lg{border-radius:var(--border-radius)}
