*{margin:0;padding:0;box-sizing:border-box}
:root{--purple:#8b5cf6;--purple-light:#c4b5fd;--purple-dark:#7c3aed;--bg:#09090b;--surface:#18181b;--surface2:rgba(255,255,255,.04);--border:rgba(255,255,255,.06);--text:#e4e4e7;--muted:#71717a;--muted2:#52525b;--radius:14px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Header ── */
#app-header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;background:rgba(9,9,11,.95);border-bottom:1px solid rgba(139,92,246,.1);backdrop-filter:blur(20px);z-index:2000;flex-shrink:0}
.header-brand{display:flex;align-items:center;gap:10px}
.header-logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--purple),#a78bfa);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.header-name{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;background:linear-gradient(135deg,#c4b5fd,#e9d5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-tabs{display:flex;gap:4px}
.tab-btn{background:none;border:1px solid transparent;border-radius:10px;padding:8px 16px;color:var(--muted);font-family:inherit;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:6px}
.tab-btn:hover{color:var(--text);background:rgba(139,92,246,.08)}
.tab-btn.active{color:var(--purple-light);background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.2)}
.tab-icon{font-size:1rem}
.header-badge{background:var(--purple);color:#fff;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:20px;min-width:18px;text-align:center}

/* ── Main Layout ── */
#main-container{display:flex;flex:1;overflow:hidden;position:relative}
#sidebar{width:440px;height:100%;overflow-y:auto;overflow-x:hidden;background:var(--bg);border-right:1px solid rgba(139,92,246,.08);display:flex;flex-direction:column;z-index:1000;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.3) transparent}
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(139,92,246,.3);border-radius:2px}

.tab-panel{display:none;padding:20px;flex-direction:column;gap:16px;animation:fadeSlideIn .35s ease}
.tab-panel.active-panel{display:flex}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Search ── */
#search-container{position:relative}
.search-icon{position:absolute;left:14px;top:13px;font-size:.9rem;z-index:1;pointer-events:none}
#search-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px 12px 40px;color:var(--text);font-family:inherit;font-size:.9rem;outline:none;transition:all .25s}
#search-input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.15),0 4px 20px rgba(139,92,246,.1)}
#search-input::placeholder{color:var(--muted2)}
#search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:12px;max-height:300px;overflow-y:auto;display:none;z-index:2000;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#search-results.active{display:block}
.search-item{padding:12px 16px;cursor:pointer;font-size:.85rem;border-bottom:1px solid var(--border);transition:background .15s;display:flex;align-items:center;gap:10px}
.search-item:hover{background:rgba(139,92,246,.1)}
.search-item:last-child{border-bottom:none}
.search-item .flag{font-size:1.2rem}
.search-item .curated-tag{color:var(--purple);font-size:.65rem;margin-left:auto;font-weight:600;letter-spacing:.5px}

/* ── Section Labels ── */
.section-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600}

/* ── City Cards Grid ── */
#quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.city-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;height:200px;transition:all .35s cubic-bezier(.2,.8,.2,1);border:1px solid transparent}
.city-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(139,92,246,.25);border-color:rgba(139,92,246,.2)}
.city-card:active{transform:translateY(-2px)}
.city-card-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.city-card:hover .city-card-img{transform:scale(1.08)}
.city-card .card-overlay{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.85));display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.city-card .card-name{font-weight:700;font-size:1rem;margin-bottom:2px}
.city-card .card-country{font-size:.75rem;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:4px}
.city-card .card-tagline{font-size:.7rem;color:rgba(255,255,255,.5);font-style:italic;margin-top:4px}
.city-card .card-weather{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);border-radius:20px;padding:4px 10px;font-size:.72rem;color:rgba(255,255,255,.85)}
/* Skeleton loading */
.city-card .skeleton{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;z-index:1}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.city-card img.loaded+.skeleton{display:none}

/* ── Glass Card ── */
.glass-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;backdrop-filter:blur(12px)}

/* ── Back btn ── */
.back-btn{background:none;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--muted);padding:10px 16px;font-family:inherit;font-size:.82rem;cursor:pointer;transition:all .25s;align-self:flex-start;display:flex;align-items:center;gap:6px}
.back-btn:hover{border-color:var(--purple);color:var(--text);background:rgba(139,92,246,.06)}
.back-arrow{transition:transform .2s}
.back-btn:hover .back-arrow{transform:translateX(-3px)}

/* ── City Hero ── */
#city-hero{border-radius:var(--radius);overflow:hidden;height:180px;position:relative}
#city-hero img{width:100%;height:100%;object-fit:cover}
#city-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(9,9,11,.9))}

/* ── City header ── */
#city-header{text-align:center;margin-top:-40px;position:relative;z-index:1}
#city-header h2{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;margin-bottom:2px}
#city-header .country{color:var(--muted);font-size:.85rem}
#city-header .city-weather{margin-top:6px;font-size:.85rem;color:var(--purple-light)}

/* ── POI Filters ── */
#poi-filters{display:flex;gap:6px;flex-wrap:wrap}
.filter-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:8px 14px;color:var(--muted);font-family:inherit;font-size:.78rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.filter-btn:hover{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.2);color:var(--purple-light)}
.filter-btn.active{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.35);color:var(--purple-light);box-shadow:0 0 12px rgba(139,92,246,.2)}

/* ── POI List ── */
#poi-list{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 520px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.3) transparent}

.poi-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.2,1);opacity:0;transform:translateY(20px)}
.poi-card.visible{opacity:1;transform:translateY(0)}
.poi-card:hover{border-color:rgba(139,92,246,.3);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.poi-card-img{width:100%;height:120px;object-fit:cover;background:rgba(255,255,255,.03)}
.poi-card-body{padding:14px}
.poi-card-body h4{font-size:.9rem;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.poi-card-body .cat-icon{font-size:1rem}
.poi-card-body .rating{color:#facc15;font-size:.78rem;margin-bottom:4px}
.poi-card-body .rating span{color:var(--muted);margin-left:4px}
.poi-card-body p{font-size:.78rem;color:var(--muted);line-height:1.5}

/* ── Buttons ── */
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-dark));border:none;border-radius:12px;padding:14px;color:#fff;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .25s;text-align:center;width:100%;position:relative;overflow:hidden}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.35)}
.btn-primary:active{transform:translateY(0)}
.btn-generate{margin-top:8px;font-size:.95rem;padding:16px}
.btn-generate::before{content:'';position:absolute;inset:-2px;border-radius:14px;background:linear-gradient(135deg,var(--purple),#a78bfa,var(--purple-dark));z-index:-1;filter:blur(8px);opacity:.4}
.btn-small{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.25);border-radius:8px;padding:6px 12px;color:var(--purple-light);font-family:inherit;font-size:.75rem;cursor:pointer;transition:all .2s}
.btn-small:hover{background:rgba(139,92,246,.25)}

/* ── Trip Panel ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--muted)}
.empty-icon{font-size:3rem;margin-bottom:16px;opacity:.6}
.empty-state h3{font-size:1.1rem;color:var(--text);margin-bottom:6px}
.empty-state p{font-size:.82rem}

/* Summary */
.summary-card{display:flex;gap:8px;justify-content:space-between}
.summary-item{display:flex;flex-direction:column;align-items:center;flex:1;gap:2px}
.summary-icon{font-size:1.1rem}
.summary-value{font-size:1.2rem;font-weight:700;color:var(--purple)}
.summary-label{font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

/* Budget */
.budget-card{display:flex;align-items:center;gap:12px;padding:12px 16px}
.budget-label{font-size:.75rem;color:var(--muted);font-weight:500;white-space:nowrap}
.budget-pills{display:flex;gap:6px;flex:1}
.budget-pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:6px 12px;color:var(--muted);font-family:inherit;font-size:.72rem;cursor:pointer;transition:all .25s;flex:1;text-align:center}
.budget-pill:hover{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.2)}
.budget-pill.active{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.35);color:var(--purple-light);box-shadow:0 0 10px rgba(139,92,246,.15)}

/* Trip stops */
.stop-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;transition:all .25s;cursor:pointer}
.stop-card:hover{border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.04)}
.stop-drag{color:var(--muted2);font-size:.9rem;cursor:grab;padding:0 2px;user-select:none}
.stop-drag:active{cursor:grabbing}
.stop-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.stop-num{width:28px;height:28px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0;color:#fff}
.stop-info{flex:1;min-width:0}
.stop-name{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop-meta{font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px}
.stop-budget{font-size:.65rem;color:var(--purple-light);margin-top:2px}
.stop-days{width:44px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px;color:var(--text);font-family:inherit;font-size:.8rem;text-align:center;outline:none;transition:border-color .2s}
.stop-days:focus{border-color:var(--purple)}
.stop-remove{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:1rem;padding:6px;border-radius:8px;transition:all .15s}
.stop-remove:hover{color:#ef4444;background:rgba(239,68,68,.1)}
.stop-travel{font-size:.72rem;color:var(--purple);text-align:center;padding:4px 0;display:flex;align-items:center;justify-content:center;gap:6px}

/* ── Itinerary Timeline ── */
.itin-header-bar{display:flex;justify-content:space-between;align-items:center}
.itin-header-bar h3{font-family:'Playfair Display',serif;font-size:1.1rem}
#itin-timeline{display:flex;flex-direction:column;position:relative;padding-left:24px}
#itin-timeline::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--purple),rgba(139,92,246,.2))}

.tl-node{position:relative;margin-bottom:16px}
.tl-dot{position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--purple);border:2px solid var(--bg);z-index:1;box-shadow:0 0 8px rgba(139,92,246,.4)}
.tl-dot.travel{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.4)}

.tl-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px;transition:all .2s}
.tl-card:hover{border-color:rgba(139,92,246,.2)}
.tl-day-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--purple-light);font-weight:600;margin-bottom:8px}
.tl-city-name{font-weight:700;font-size:1rem;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.tl-slot{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.tl-slot:last-child{border-bottom:none}
.tl-slot-time{color:var(--purple);font-weight:600;font-size:.75rem;min-width:70px}
.tl-slot-activity{font-size:.8rem;color:var(--text)}

.tl-travel-card{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.15);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:.82rem}
.tl-travel-icon{font-size:1.3rem}
.tl-travel-info{color:var(--muted)}
.tl-travel-info strong{color:var(--text)}

/* ── Map ── */
#map{flex:1;height:100%}
.leaflet-container{background:var(--bg)!important}
#map-vignette{position:absolute;inset:0;pointer-events:none;z-index:500;
  box-shadow:inset 0 0 80px 20px rgba(9,9,11,.5);
}

/* ── Leaflet overrides ── */
.leaflet-popup-content-wrapper{background:var(--surface)!important;color:var(--text)!important;border:1px solid rgba(139,92,246,.2)!important;border-radius:var(--radius)!important;box-shadow:0 12px 40px rgba(0,0,0,.5)!important}
.leaflet-popup-tip{background:var(--surface)!important}
.leaflet-popup-close-button{color:var(--muted)!important;font-size:18px!important}
.leaflet-popup-close-button:hover{color:var(--text)!important}
.popup-card{width:240px}
.popup-card img{width:100%;height:130px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.popup-card h3{font-size:.95rem;font-weight:600;margin-bottom:4px}
.popup-card .popup-rating{color:#facc15;font-size:.8rem;margin-bottom:6px}
.popup-card .popup-rating span{color:var(--muted)}
.popup-card p{font-size:.78rem;color:var(--muted);line-height:1.4;margin-bottom:8px}
.popup-card .popup-btn{display:block;background:linear-gradient(135deg,var(--purple),var(--purple-dark));border:none;border-radius:8px;padding:8px;color:#fff;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;text-align:center;width:100%;transition:opacity .2s}
.popup-card .popup-btn:hover{opacity:.85}

/* ── Marker tooltip ── */
.marker-tooltip{background:var(--surface)!important;color:var(--text)!important;border:1px solid rgba(139,92,246,.2)!important;border-radius:8px!important;font-family:Inter!important;font-size:.8rem!important;padding:6px 10px!important;box-shadow:0 4px 12px rgba(0,0,0,.4)!important}

/* ── Animations ── */
@keyframes dashAnim{to{stroke-dashoffset:-30}}
@keyframes dropIn{from{opacity:0;transform:translateY(-30px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(-20px)}50%{opacity:1;transform:scale(1.1)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.marker-drop{animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1) both}

/* ── Generic area state ── */
.generic-explore{text-align:center;padding:40px 20px;color:var(--muted)}
.generic-explore .ge-icon{font-size:2.5rem;margin-bottom:12px}
.generic-explore h3{color:var(--text);margin-bottom:6px;font-size:1rem}
.generic-explore p{font-size:.82rem}

/* ── Mobile ── */
#mobile-handle{display:none}
.handle-bar{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:0 auto}

@media(max-width:768px){
  #app-header{padding:0 12px;height:48px}
  .header-name{font-size:1rem}
  .tab-btn{padding:6px 10px;font-size:.75rem}
  .tab-icon{font-size:.85rem}

  #main-container{flex-direction:column}
  #sidebar{width:100%;height:50vh;border-right:none;border-top:1px solid rgba(139,92,246,.1);order:2}
  #map{width:100%;height:50vh;order:1}
  #map-vignette{display:none}

  #mobile-handle{display:block;padding:8px 0 4px;background:var(--bg);border-top:1px solid rgba(139,92,246,.1);order:2;z-index:1001;cursor:pointer}
  #sidebar{order:3}

  #quick-grid{grid-template-columns:1fr}
  .city-card{height:160px}
  .tab-panel{padding:14px}
}

/* ── Print ── */
@media print{
  #app-header,#map,#map-vignette,#mobile-handle,.back-btn,.btn-primary,.btn-small,.tab-btn{display:none!important}
  body{background:#fff;color:#111}
  #sidebar{width:100%;border:none;overflow:visible}
  .tab-panel{display:flex!important}
  .glass-card,.tl-card,.tl-travel-card{border:1px solid #ddd;background:#fafafa}
  .summary-value,.tl-day-label,.tl-slot-time{color:#7c3aed}
  #itin-timeline::before{background:#7c3aed}
  .tl-dot{background:#7c3aed;border-color:#fff}
}