:root{--primary:#6c63ff;--primary-dark:#5a52d5;--primary-light:#8b85ff;--secondary:#ff6584;--accent:#43e97b;--accent-alt:#38f9d7;--bg-base:#0d0f1a;--bg-surface:#141624;--bg-card:#1a1d2e;--bg-card-hover:#1f2236;--bg-glass:#1a1d2e99;--text-primary:#f0f1ff;--text-secondary:#a0a8d0;--text-muted:#5a607a;--border:#6c63ff26;--border-hover:#6c63ff66;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 24px #0006;--shadow-lg:0 8px 48px #00000080;--shadow-glow:0 0 30px #6c63ff33;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--transition:.25s cubic-bezier(.4, 0, .2, 1);--font-body:"Inter", system-ui, sans-serif;--font-display:"Outfit", system-ui, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background-color:var(--bg-base);color:var(--text-primary);background-image:radial-gradient(at 20%,#6c63ff12 0%,#0000 60%),radial-gradient(at 80% 20%,#ff65840d 0%,#0000 50%),radial-gradient(at 60% 80%,#43e97b0a 0%,#0000 50%);background-attachment:fixed;min-height:100dvh;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}:focus-visible{outline:2px solid var(--primary);outline-offset:3px}::selection{color:var(--text-primary);background:#6c63ff59}.app-wrapper{max-width:480px;min-height:100dvh;margin:0 auto;padding:0 16px 40px}.app-header{text-align:center;padding:36px 0 20px;position:relative}.app-header .logo-icon{margin-bottom:8px;font-size:2.8rem;animation:3s ease-in-out infinite float;display:block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.app-header h1{font-family:var(--font-display);background:linear-gradient(135deg, #fff 0%, var(--primary-light) 50%, var(--accent-alt) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:1.85rem;font-weight:800}.app-header p{color:var(--text-secondary);margin-top:4px;font-size:.85rem}.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:20px;padding:24px;position:relative;overflow:hidden}.form-card:before{content:"";background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));border-radius:var(--radius-xl) var(--radius-xl) 0 0;height:2px;position:absolute;top:-1px;left:-1px;right:-1px}.form-card h2{font-family:var(--font-display);color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase;margin-bottom:18px;font-size:.78rem;font-weight:600}.field-group{margin-bottom:16px}.field-group label{color:var(--text-secondary);letter-spacing:.3px;margin-bottom:6px;font-size:.8rem;font-weight:500;display:block}.field-group label .label-icon{margin-right:5px}.input-wrap{position:relative}.field-group input,.field-group select{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-body);transition:border-color var(--transition), box-shadow var(--transition);appearance:none;padding:11px 14px;font-size:.92rem}.field-group input:focus,.field-group select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #6c63ff26}.field-group input::placeholder{color:var(--text-muted)}.field-group select option{background:var(--bg-card);color:var(--text-primary)}.date-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.input-icon{pointer-events:none;font-size:1rem;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.trip-type-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.trip-type-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;text-align:center;transition:all var(--transition);color:var(--text-secondary);flex-direction:column;align-items:center;gap:4px;padding:10px 4px;display:flex}.trip-type-btn .type-icon{font-size:1.5rem;line-height:1}.trip-type-btn .type-label{letter-spacing:.3px;text-transform:uppercase;font-size:.65rem;font-weight:600}.trip-type-btn:hover,.trip-type-btn.active{border-color:var(--primary);color:var(--text-primary);background:#6c63ff1f;box-shadow:0 0 12px #6c63ff26}.trip-type-btn.active .type-icon{filter:drop-shadow(0 0 4px #6c63ff99)}.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);border-radius:var(--radius-md);color:#fff;width:100%;font-family:var(--font-display);cursor:pointer;transition:all var(--transition);letter-spacing:.3px;border:none;margin-top:4px;padding:14px;font-size:1rem;font-weight:700;position:relative;overflow:hidden;box-shadow:0 4px 20px #6c63ff59}.btn-primary:after{content:"";opacity:0;transition:opacity var(--transition);background:linear-gradient(135deg,#ffffff1f 0%,#0000 100%);position:absolute;inset:0}.btn-primary:hover:after{opacity:1}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 28px #6c63ff80}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary .btn-spinner{vertical-align:middle;border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;margin-right:8px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{border-radius:var(--radius-md);color:#ff8fa5;background:#ff65841a;border:1px solid #ff65844d;align-items:center;gap:8px;margin-bottom:16px;padding:12px 16px;font-size:.88rem;display:flex}.weather-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md), var(--shadow-glow);margin-bottom:20px;padding:22px;animation:.4s slideUp;position:relative;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.weather-card:after{content:"";pointer-events:none;background:radial-gradient(circle,#6c63ff1f 0%,#0000 70%);width:180px;height:180px;position:absolute;top:-40px;right:-40px}.weather-header{justify-content:space-between;align-items:flex-start;margin-bottom:18px;display:flex}.weather-location h3{font-family:var(--font-display);color:var(--text-primary);font-size:1.2rem;font-weight:700}.weather-location p{color:var(--text-secondary);margin-top:2px;font-size:.78rem}.weather-icon-big{filter:drop-shadow(0 4px 12px #6c63ff4d);font-size:3.2rem;line-height:1}.weather-stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.weather-stat{background:var(--bg-surface);border-radius:var(--radius-md);text-align:center;border:1px solid var(--border);padding:12px}.weather-stat .stat-val{font-family:var(--font-display);color:var(--text-primary);font-size:1.35rem;font-weight:700;display:block}.weather-stat .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;font-size:.68rem}.temp-hot{color:#ff9a5c!important}.temp-warm{color:#ffe066!important}.temp-mild{color:#43e97b!important}.temp-cold{color:#56cef7!important}.temp-freeze{color:#a5c8f0!important}.forecast-strip{scrollbar-width:thin;scrollbar-color:var(--primary) transparent;gap:8px;margin-top:16px;padding-bottom:4px;display:flex;overflow-x:auto}.forecast-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;flex:none;min-width:64px;padding:8px 10px}.forecast-item .fc-day{color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-size:.68rem}.forecast-item .fc-icon{margin:4px 0;font-size:1.3rem;display:block}.forecast-item .fc-temp{color:var(--text-primary);font-size:.78rem;font-weight:600}.pack-score-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);margin-bottom:20px;padding:20px 22px;animation:.5s slideUp}.pack-score-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.pack-score-header h3{font-family:var(--font-display);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.9rem;font-weight:700}.pack-score-value{font-family:var(--font-display);background:linear-gradient(135deg, var(--accent), var(--accent-alt));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.3rem;font-weight:800}.score-bar-track{background:var(--bg-surface);border-radius:999px;height:8px;overflow:hidden}.score-bar-fill{background:linear-gradient(90deg, var(--primary), var(--accent-alt));border-radius:999px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px #43e97b4d}.score-message{color:var(--text-secondary);text-align:center;margin-top:8px;font-size:.8rem}.packing-section{animation:.6s slideUp}.packing-section h2{font-family:var(--font-display);color:var(--text-primary);align-items:center;gap:8px;margin-bottom:14px;font-size:1.1rem;font-weight:700;display:flex}.packing-section h2 span{color:var(--primary-light);background:#6c63ff26;border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:600}.category-group{margin-bottom:16px}.category-header{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;margin-bottom:8px;padding:10px 14px;display:flex}.category-header:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.category-header .cat-icon{font-size:1.2rem}.category-header .cat-name{color:var(--text-primary);flex:1;font-size:.88rem;font-weight:600}.category-header .cat-count{color:var(--text-muted);background:var(--bg-card);border-radius:999px;padding:2px 8px;font-size:.75rem}.category-header .cat-chevron{color:var(--text-muted);transition:transform var(--transition);font-size:.75rem}.category-header.open .cat-chevron{transform:rotate(180deg)}.items-list{opacity:0;flex-direction:column;gap:6px;max-height:0;padding-left:4px;transition:max-height .35s,opacity .25s;display:flex;overflow:hidden}.items-list.expanded{opacity:1;max-height:600px}.pack-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);-webkit-user-select:none;user-select:none;align-items:center;gap:12px;padding:11px 14px;display:flex}.pack-item:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.pack-item.checked{background:#43e97b0d;border-color:#43e97b40}.item-checkbox{border:2px solid var(--border-hover);width:20px;height:20px;transition:all var(--transition);background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.pack-item.checked .item-checkbox{background:linear-gradient(135deg, var(--accent), var(--accent-alt));border-color:#0000}.item-checkbox:after{content:"";border:2px solid #fff;border-top:none;border-left:none;width:5px;height:9px;margin-top:-2px;transition:transform .15s;transform:rotate(45deg)scale(0)}.pack-item.checked .item-checkbox:after{transform:rotate(45deg)scale(1)}.item-emoji{font-size:1.2rem}.item-text{color:var(--text-primary);transition:color var(--transition);flex:1;font-size:.88rem}.pack-item.checked .item-text{color:var(--text-muted);text-decoration:line-through}.item-tag{text-transform:uppercase;letter-spacing:.3px;border-radius:999px;padding:2px 7px;font-size:.62rem;font-weight:600}.item-tag.essential{color:#ff8fa5;background:#ff658421}.item-tag.weather{color:var(--primary-light);background:#6c63ff21}.item-tag.trip{color:#43e97b;background:#43e97b1a}.saved-trips-section{margin-top:28px;animation:.5s slideUp}.saved-trips-section h2{font-family:var(--font-display);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:6px;margin-bottom:12px;font-size:.78rem;font-weight:700;display:flex}.saved-trip-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition);align-items:center;gap:12px;margin-bottom:10px;padding:14px 16px;display:flex}.saved-trip-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translate(3px)}.saved-trip-icon{font-size:1.6rem}.saved-trip-info{flex:1}.saved-trip-info h4{color:var(--text-primary);font-size:.9rem;font-weight:600}.saved-trip-info p{color:var(--text-muted);margin-top:2px;font-size:.75rem}.saved-trip-delete{cursor:pointer;color:var(--text-muted);transition:color var(--transition);background:0 0;border:none;border-radius:4px;padding:4px;font-size:1rem}.saved-trip-delete:hover{color:var(--secondary)}.btn-secondary{border:1px solid var(--border-hover);border-radius:var(--radius-md);width:100%;color:var(--primary-light);font-family:var(--font-display);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;gap:6px;margin-bottom:16px;padding:12px;font-size:.9rem;font-weight:600;display:flex}.btn-secondary:hover{border-color:var(--primary);background:#6c63ff1a;box-shadow:0 0 20px #6c63ff1a}.empty-state{text-align:center;color:var(--text-muted);padding:48px 24px}.empty-state .empty-icon{margin-bottom:12px;font-size:3rem}.empty-state p{color:var(--text-secondary);font-size:.88rem;line-height:1.7}.skeleton{background:linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-card-hover) 50%, var(--bg-surface) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (width<=380px){.trip-type-grid{grid-template-columns:repeat(2,1fr)}.app-header h1{font-size:1.5rem}.weather-stats{grid-template-columns:repeat(3,1fr);gap:8px}}@media (width>=520px){.app-wrapper{padding:0 24px 48px}}.divider{border:none;border-top:1px solid var(--border);margin:20px 0}.badge-new{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle;border-radius:999px;padding:2px 6px;font-size:.58rem;font-weight:700}.api-key-banner{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid #ffc83c33;margin-bottom:18px;overflow:hidden}.api-key-toggle{cursor:pointer;color:#ffe066;width:100%;font-family:var(--font-body);text-align:left;transition:background var(--transition);background:0 0;border:none;justify-content:space-between;align-items:center;padding:13px 18px;font-size:.85rem;font-weight:600;display:flex}.api-key-toggle:hover{background:#ffc83c0d}.api-chevron{transition:transform var(--transition);color:var(--text-muted);font-size:.7rem}.api-chevron.open{transform:rotate(180deg)}.api-key-body{border-top:1px solid #ffc83c1a;padding:0 18px 16px;animation:.2s slideUp}.api-key-hint{color:var(--text-secondary);margin:12px 0 10px;font-size:.78rem;line-height:1.6}.api-key-hint a{color:var(--primary-light);text-decoration:none}.api-key-hint a:hover{text-decoration:underline}.api-key-row{gap:8px;display:flex}.api-key-row input{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);transition:border-color var(--transition);flex:1;padding:10px 14px;font-size:.88rem}.api-key-row input:focus{border-color:#ffe066;outline:none;box-shadow:0 0 0 3px #ffe0661a}.api-key-save-btn{border-radius:var(--radius-md);color:#1a1200;font-family:var(--font-display);cursor:pointer;transition:all var(--transition);white-space:nowrap;background:linear-gradient(135deg,#ffe066,#ffb830);border:none;padding:10px 20px;font-size:.88rem;font-weight:700}.api-key-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px #ffc83c4d}.api-key-save-btn:disabled{opacity:.4;cursor:not-allowed}.api-key-saved-msg{color:var(--accent);margin-top:10px;font-size:.78rem}.demo-banner{border-radius:var(--radius-md);color:#ffd27a;background:#ffb73014;border:1px solid #ffb7304d;margin-bottom:16px;padding:12px 16px;font-size:.83rem;line-height:1.6;animation:.3s slideUp}.demo-banner strong{color:#ffe066}