:root{
  --bg: #07080f;
  --bg-alt: #0b0d18;
  --surface: rgba(255,255,255,0.045);
  --surface-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --text: #eef0fb;
  --text-dim: #9aa0c0;
  --text-faint: #6b7094;
  --accent-a: #7c8cff;
  --accent-b: #5eead4;
  --accent-c: #ff8fb1;
  --grad: linear-gradient(120deg, var(--accent-a), var(--accent-b));
  --radius: 20px;
  --maxw: 1180px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2{
  font-family: "Fraunces", "Inter", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
h1{ font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.05; font-weight: 500;}
h2{ font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; margin-bottom: 18px; }
h3{ margin: 0 0 6px; font-size: 1.05rem; color:#fff; }
p{ color: var(--text-dim); }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
em{ font-style: normal; color: var(--text); }

.grad-text{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* background fx */
.bg-fx{ position: fixed; inset:0; z-index:-1; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter: blur(90px); opacity:0.35; }
.blob-a{ width:520px; height:520px; background: var(--accent-a); top:-120px; left:-140px; animation: float1 22s ease-in-out infinite; }
.blob-b{ width:460px; height:460px; background: var(--accent-b); top:20%; right:-160px; animation: float2 26s ease-in-out infinite; }
.blob-c{ width:420px; height:420px; background: var(--accent-c); bottom:-160px; left:30%; opacity:0.2; animation: float3 30s ease-in-out infinite; }
.grid-overlay{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 75%);
}
@keyframes float1{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(60px, 40px); } }
@keyframes float2{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-50px, 60px); } }
@keyframes float3{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(40px, -40px); } }

/* nav */
.nav{
  position: fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter: blur(14px);
  background: rgba(7,8,15,0.55);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled{ border-color: var(--border); background: rgba(7,8,15,0.85); }
.nav-inner{
  max-width: var(--maxw); margin:0 auto; padding: 16px 28px;
  display:flex; align-items:center; gap: 20px;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.15rem; margin-right:auto; flex-shrink:0; }
.brand-mark{ display:inline-flex; }
.brand-mark.small svg{ width:16px; height:16px; }
.nav-links{ display:flex; gap: 18px; flex-shrink:0; }
.nav-links a{ font-size: 0.9rem; color: var(--text-dim); transition: color .2s; white-space:nowrap; }
.nav-links a:hover{ color: #fff; }
.nav-burger{ display:none; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600;
  border: 1px solid transparent; cursor:pointer;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.btn-primary{ background: var(--grad); color: #06070d; box-shadow: 0 8px 30px -8px rgba(124,140,255,0.6); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(124,140,255,0.75); }
.btn-ghost{ background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-strong); border-color: rgba(255,255,255,0.2); }
.nav-cta{ padding: 10px 18px; font-size: 0.88rem; flex-shrink:0; }

.nav-auth{ display:flex; align-items:center; flex-shrink:1; min-width:0; }
.nav-account{
  display:flex; align-items:center; gap:10px; min-width:0;
  background: var(--surface); border:1px solid var(--border); border-radius:999px;
  padding: 6px 8px 6px 16px;
}
.nav-account-name{ font-size:0.84rem; color: var(--text); font-weight:600; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-account-name:hover{ color: var(--accent-b); }
.nav-account-logout{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background: rgba(255,255,255,0.03); color: var(--text-dim); cursor:pointer; transition: background .2s, color .2s;
}
.nav-account-logout:hover{ background: rgba(255,90,90,0.15); color:#ff9a9a; }

/* hero */
.hero{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 140px 28px 80px;
  text-align:center;
  position:relative;
}
.hero-inner{ max-width: 880px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 16px; border-radius:999px;
  background: var(--surface); border:1px solid var(--border);
  font-size:0.82rem; color: var(--text-dim); margin-bottom: 26px;
}
.pill-dot{ width:7px; height:7px; border-radius:50%; background: var(--accent-b); box-shadow: 0 0 10px var(--accent-b); }
.hero-sub{ max-width: 620px; margin: 22px auto 0; font-size: 1.08rem; }
.hero-prompt{
  margin: 40px auto 0; max-width: 560px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 20px;
  text-align:left;
}
.hero-prompt-row{ display:flex; align-items:center; gap:10px; color: var(--text); font-size:0.98rem; }
.hero-prompt-row svg{ flex-shrink:0; color: var(--text-faint); }
.caret{ animation: blink 1s step-start infinite; color: var(--accent-b); }
@keyframes blink{ 50%{ opacity:0; } }
.hero-prompt-hint{ margin-top:10px; font-size:0.78rem; color: var(--text-faint); padding-left: 28px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; margin-top: 34px; flex-wrap: wrap; }
.hero-stats{
  display:flex; gap: 40px; justify-content:center; margin-top: 60px; flex-wrap: wrap;
}
.hero-stats div{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero-stats strong{ font-size:1.5rem; font-family:"Fraunces",serif; color:#fff; }
.hero-stats span{ font-size:0.78rem; color: var(--text-faint); }

.scroll-cue{ position:absolute; bottom: 34px; left:50%; transform: translateX(-50%); }
.scroll-cue span{ display:block; width:1px; height:40px; background: linear-gradient(var(--accent-a), transparent); animation: scrolldown 2s ease-in-out infinite; }
@keyframes scrolldown{ 0%{ transform: translateY(0); opacity:1;} 100%{ transform: translateY(20px); opacity:0;} }

/* sections */
.section{ padding: 120px 28px; position: relative; }
.section.alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02), transparent); }
.section-inner{ max-width: var(--maxw); margin: 0 auto; }
.section-inner.center{ text-align:center; }
.eyebrow{ text-transform:uppercase; letter-spacing:0.14em; font-size:0.76rem; color: var(--accent-b); font-weight:600; margin: 0 0 12px; }
.eyebrow.center{ text-align:center; }
.section-lead{ max-width: 600px; font-size:1.05rem; margin-bottom: 10px; }
.section-inner.center .section-lead{ margin: 0 auto 40px; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.two-col.reverse{ direction: rtl; }
.two-col.reverse > *{ direction: ltr; }

/* problem scatter */
.scatter{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top: 46px; }
.chip{
  background: var(--surface); border:1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; font-size:0.92rem; font-weight:600; color:#fff;
  display:flex; flex-direction:column; gap:2px;
  transform: translateY(0);
}
.chip small{ font-size:0.72rem; font-weight:400; color: var(--text-faint); }
.chip-final{
  background: linear-gradient(135deg, rgba(124,140,255,0.18), rgba(94,234,212,0.12));
  border-color: rgba(124,140,255,0.4);
  flex-direction: row; align-items:center; gap:10px;
}
.chip-final small{ display:block; }
.merge-arrow{ color: var(--text-faint); display:flex; align-items:center; }

/* planner */
.planner-grid{ display:grid; grid-template-columns: 300px 1fr; gap: 40px; margin-top: 46px; align-items:start; }
.planner-inputs{ display:flex; flex-direction:column; gap:12px; position:sticky; top:110px; }
.input-card{
  background: var(--surface); border:1px solid var(--border); border-radius:14px;
  padding: 14px 18px; display:flex; justify-content:space-between; align-items:center;
}
.input-label{ font-size:0.78rem; color: var(--text-faint); }
.input-value{ font-weight:600; color:#fff; }
.planner-signal{
  display:flex; align-items:center; gap:10px; font-size:0.8rem; color: var(--text-faint);
  margin-top: 6px; padding: 10px 14px; border-radius: 12px; background: rgba(94,234,212,0.06);
}
.planner-signal svg{ color: var(--accent-b); flex-shrink:0; }

.itinerary{ display:flex; flex-direction:column; gap:16px; }
.day-card{
  background: var(--surface); border:1px solid var(--border); border-radius: 16px; padding: 20px 24px;
}
.day-head{ display:flex; align-items:center; gap:12px; font-weight:700; color:#fff; margin-bottom:12px; }
.day-num{
  background: var(--grad); color:#06070d; font-size:0.72rem; font-weight:700;
  padding: 4px 10px; border-radius:999px;
}
.day-card ul{ display:flex; flex-direction:column; gap:8px; }
.day-card li{ font-size:0.92rem; color: var(--text-dim); }
.day-card-more{ text-align:center; color: var(--text-faint); font-size:0.85rem; padding: 16px; border-style:dashed; }

/* feature grid */
.feature-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; }
.feature-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px 22px; transition: transform .25s, border-color .25s, background .25s;
}
.feature-card:hover{ transform: translateY(-6px); border-color: rgba(124,140,255,0.35); background: var(--surface-strong); }
.feature-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(124,140,255,0.18), rgba(94,234,212,0.1));
  color: var(--accent-b); margin-bottom: 16px;
}
.feature-card p{ font-size:0.88rem; margin:0; }

/* mobility */
.check-list{ display:flex; flex-direction:column; gap:12px; margin-top: 22px; }
.check-list li{ display:flex; align-items:center; gap:10px; font-size:0.95rem; color: var(--text); }
.check-list li::before{
  content:""; width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background: var(--grad);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.mobility-visual{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 40px 30px; }
.route-line{ display:flex; flex-direction:column; gap:0; }
.route-stop{ display:flex; align-items:center; gap:12px; font-weight:600; color:#fff; font-size:0.95rem; }
.route-stop .dot{ width:12px; height:12px; border-radius:50%; background: var(--accent-a); box-shadow: 0 0 0 4px rgba(124,140,255,0.15); }
.route-stop .dot-end{ background: var(--accent-b); box-shadow: 0 0 0 4px rgba(94,234,212,0.15); }
.route-seg{ margin: 8px 0 8px 5px; padding-left: 25px; border-left: 2px dashed var(--border); font-size:0.85rem; color: var(--text-faint); }

/* social */
.social-grid{ display:grid; grid-template-columns: 280px 1fr; gap: 40px; margin-top: 46px; align-items:center; }
.phone-card{
  background: linear-gradient(160deg, #12142a, #0a0b16);
  border: 1px solid var(--border); border-radius: 32px; padding: 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.phone-notch{ width:60px; height:6px; border-radius:4px; background: rgba(255,255,255,0.15); margin: 0 auto 14px; }
.phone-map{
  height:150px; border-radius:18px; margin-bottom:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,140,255,0.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(94,234,212,0.3), transparent 60%),
    #0f1120;
  position: relative;
}
.phone-map::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}
.phone-row{ display:flex; align-items:center; gap:10px; font-size:0.8rem; color: var(--text-dim); padding: 6px 2px; }
.avatar{ width:26px; height:26px; border-radius:50%; background: var(--grad); flex-shrink:0; display:inline-block; }
.avatar-b{ background: linear-gradient(135deg, var(--accent-c), var(--accent-a)); }
.avatar-c{ background: linear-gradient(135deg, var(--accent-b), var(--accent-c)); }
.feed-list{ display:flex; flex-direction:column; gap:18px; }
.feed-item{ display:flex; gap:14px; align-items:flex-start; background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.feed-item strong{ color:#fff; font-size:0.92rem; }
.feed-item p{ margin: 4px 0 0; font-size:0.88rem; }

/* book */
.book-visual{ display:flex; justify-content:center; }
.book-cover{
  width: 260px; height: 340px; border-radius: 10px 16px 16px 10px;
  background: linear-gradient(155deg, #1a1c38, #0b0c1a);
  border: 1px solid var(--border);
  box-shadow: 0 40px 70px -25px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03);
  position: relative; display:flex; flex-direction:column; justify-content: space-between; padding: 30px 24px;
  transform: perspective(800px) rotateY(-8deg);
}
.book-spine{ position:absolute; left:0; top:0; bottom:0; width:10px; background: rgba(0,0,0,0.35); border-radius: 10px 0 0 10px; }
.book-title{ font-family:"Fraunces",serif; font-size:1.6rem; color:#fff; line-height:1.2; }
.book-title span{ font-size:0.9rem; color: var(--accent-b); font-family:"Inter",sans-serif; }
.book-qr{
  width:56px; height:56px; align-self:flex-end; border-radius:6px;
  background:
    repeating-linear-gradient(0deg, #fff 0 3px, transparent 3px 6px),
    repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px);
  background-blend-mode: screen; opacity:0.8;
}

/* vision */
.vision-statement{
  padding: 140px 28px; text-align:center;
  background: radial-gradient(circle at 50% 30%, rgba(124,140,255,0.1), transparent 60%);
}
.vision-statement blockquote{
  max-width: 780px; margin: 0 auto; font-family:"Fraunces",serif;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight:500; color:#fff; line-height:1.35;
}
.vision-sub{ display:block; margin-top: 20px; font-size: 1.1rem; color: var(--text-dim); font-family:"Inter",sans-serif; font-weight:400; }

/* waitlist */
.waitlist-form{ display:flex; gap:12px; justify-content:center; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.waitlist-form input{
  flex:1; min-width: 220px; padding: 13px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color:#fff; font-size:0.95rem;
  outline: none; transition: border-color .2s;
}
.waitlist-form input:focus{ border-color: var(--accent-a); }
.waitlist-note{ margin-top: 16px; font-size:0.8rem; color: var(--text-faint); }

/* chat widget */
.chat-widget{
  max-width: 640px; margin: 46px auto 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display:flex; flex-direction:column;
}
.chat-header{
  display:flex; align-items:center; gap:8px; font-weight:700; color:#fff;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.chat-filter-toggle{
  display:flex; align-items:center; gap:6px; margin-left:auto;
  background: var(--surface); border:1px solid var(--border); border-radius:999px;
  color: var(--text-dim); font-size:0.8rem; font-weight:600;
  padding: 6px 14px; cursor:pointer; transition: background .2s, border-color .2s, color .2s;
}
.chat-filter-toggle:hover{ background: var(--surface-strong); color:#fff; }
.chat-filter-toggle[aria-expanded="true"]{ background: rgba(124,140,255,0.16); border-color: rgba(124,140,255,0.4); color:#fff; }

.chat-filters{
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  display:flex; flex-direction:column; gap:16px;
  background: rgba(255,255,255,0.015);
}
.chat-filters-hint{ font-size:0.8rem; color: var(--text-faint); margin:0; }
.filter-group{ display:flex; flex-direction:column; gap:8px; }
.filter-label{ font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); }
.filter-options{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-chip{
  background: rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:999px;
  color: var(--text-dim); font-size:0.82rem; font-weight:500;
  padding: 7px 14px; cursor:pointer; transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.filter-chip:hover{ border-color: rgba(255,255,255,0.22); color:#fff; }
.filter-chip.active{
  background: var(--grad); border-color: transparent; color:#06070d; font-weight:700;
}
.filter-active-summary{ font-size:0.78rem; color: var(--accent-b); margin:0; min-height:1em; }

/* trip fields (Reiseziel / Zeitraum / Budget) */
.trip-fields{
  display:flex; flex-wrap:wrap; gap:14px;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.trip-field{ display:flex; flex-direction:column; gap:8px; flex:1 1 180px; position:relative; }
.trip-field .filter-label{ margin:0; }
.trip-field input[type="text"],
.trip-field input[type="number"]{
  padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color:#fff; font-size:0.9rem;
  outline:none; transition: border-color .2s; width:100%;
}
.trip-field input:focus{ border-color: var(--accent-a); }
.trip-field.invalid input,
.trip-field.invalid .date-field{ border-color: rgba(255,90,90,0.6); }

.budget-field-wrap{ position:relative; }
.budget-field-wrap input{ padding-right: 34px; }
.budget-suffix{
  position:absolute; right:14px; top:50%; transform: translateY(-50%);
  color: var(--text-faint); font-size:0.85rem; pointer-events:none;
}

.date-field-wrap{ position:relative; }
.date-field{
  display:flex; align-items:center; gap:8px; width:100%;
  padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color:#fff; font-size:0.9rem;
  cursor:pointer; transition: border-color .2s; text-align:left;
}
.date-field:hover{ border-color: rgba(255,255,255,0.22); }
.date-field svg{ color: var(--text-faint); flex-shrink:0; }

.calendar-popup{
  position:absolute; top: calc(100% + 8px); left:0; z-index:20; width:280px;
  background: #10121f; border:1px solid var(--border); border-radius:16px;
  padding: 16px; box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
}
.calendar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.calendar-head span{ font-weight:700; color:#fff; font-size:0.88rem; }
.calendar-nav{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; border:1px solid var(--border);
  background: var(--surface); color: var(--text-dim); cursor:pointer; transition: background .2s, color .2s;
}
.calendar-nav:hover{ background: var(--surface-strong); color:#fff; }
.calendar-weekdays{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:4px;
  font-size:0.68rem; color: var(--text-faint); text-align:center; margin-bottom:4px;
}
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.calendar-day{
  aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:0.8rem; color: var(--text); background:transparent; border:none;
  cursor:pointer; transition: background .15s, color .15s;
}
.calendar-day:hover:not(:disabled):not(.empty){ background: var(--surface-strong); }
.calendar-day:disabled{ color: var(--text-faint); opacity:0.35; cursor:not-allowed; }
.calendar-day.empty{ visibility:hidden; cursor:default; }
.calendar-day.in-range{ background: rgba(124,140,255,0.16); border-radius:0; }
.calendar-day.range-start{ background: var(--grad); color:#06070d; font-weight:700; border-radius: 8px 0 0 8px; }
.calendar-day.range-end{ background: var(--grad); color:#06070d; font-weight:700; border-radius: 0 8px 8px 0; }
.calendar-day.range-start.range-end{ border-radius:8px; }
.calendar-hint{ margin: 10px 0 0; font-size:0.74rem; color: var(--text-faint); text-align:center; }

/* trip summary (after first generated plan) */
.trip-summary{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.trip-summary .input-card{ flex:1 1 160px; padding: 10px 14px; flex-direction:column; align-items:flex-start; gap:4px; }
.trip-summary-actions{ display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.trip-summary-save,
.trip-summary-reset{ padding: 9px 16px; font-size:0.82rem; flex-shrink:0; }
.trip-save-note{ width:100%; font-size:0.78rem; margin:0; color: var(--accent-b); }
.trip-save-note.error{ color:#ff9a9a; }

/* itinerary rendered inside a chat message */
.chat-msg-itinerary{
  max-width:100%; width:100%; background:none; border:none; padding:0; border-radius:0;
}
.chat-msg-itinerary .itinerary{ margin-top:4px; }
.chat-msg-itinerary .day-card{ padding: 16px 18px; border-radius:14px; }
.chat-msg-itinerary .chat-msg-content{ margin-bottom: 14px; }
.chat-messages{
  display:flex; flex-direction:column; gap:14px;
  padding: 22px 20px; min-height: 220px; max-height: 420px; overflow-y:auto;
}
.chat-msg{
  max-width: 88%; padding: 12px 16px; border-radius: 14px; font-size:0.92rem; line-height:1.55;
  white-space: pre-wrap;
}
.chat-msg p{ margin:0; color:inherit; }
.chat-msg-ai{
  align-self:flex-start; background: rgba(124,140,255,0.1); border: 1px solid rgba(124,140,255,0.2);
  color: var(--text); border-bottom-left-radius: 4px;
}
.chat-msg-user{
  align-self:flex-end; background: var(--grad); color:#06070d; font-weight:500;
  border-bottom-right-radius: 4px;
}
.chat-msg-error{
  align-self:flex-start; background: rgba(255,90,90,0.12); border: 1px solid rgba(255,90,90,0.3);
  color:#ffb4b4; border-bottom-left-radius:4px;
}
.chat-msg-typing{ display:flex; gap:4px; align-items:center; padding: 14px 16px; }
.chat-msg-typing span{
  width:6px; height:6px; border-radius:50%; background: var(--text-faint);
  animation: typingDot 1.2s infinite ease-in-out;
}
.chat-msg-typing span:nth-child(2){ animation-delay: .15s; }
.chat-msg-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes typingDot{ 0%,60%,100%{ opacity:0.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }

/* chat message markdown content */
.chat-msg-content h3, .chat-msg-content h4{
  color:#fff; font-family:"Fraunces",serif; font-weight:600; margin: 14px 0 8px; line-height:1.3;
}
.chat-msg-content h3{ font-size:1.05rem; }
.chat-msg-content h4{ font-size:0.98rem; color: var(--accent-b); }
.chat-msg-content h3:first-child, .chat-msg-content h4:first-child{ margin-top:0; }
.chat-msg-content p{ margin: 0 0 10px; }
.chat-msg-content p:last-child{ margin-bottom:0; }
.chat-msg-content ul{ margin: 0 0 12px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.chat-msg-content li{ padding-left:18px; position:relative; }
.chat-msg-content li::before{
  content:""; position:absolute; left:0; top:0.55em; width:6px; height:6px; border-radius:50%;
  background: var(--grad);
}
.chat-msg-content hr{ border:none; border-top:1px solid rgba(255,255,255,0.12); margin: 14px 0; }
.chat-msg-content strong{ color:#fff; }
.chat-msg-ai, .chat-msg-user{ max-width: 92%; }

/* chat access gate */
.chat-gate{ padding: 18px 20px; border-top: 1px solid var(--border); }
.chat-gate-text{ font-size:0.86rem; color: var(--text-dim); margin: 0 0 12px; }
.chat-gate-form{ display:flex; gap:10px; flex-wrap:wrap; }
.chat-gate-form input{
  flex:1; min-width:180px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color:#fff; font-size:0.9rem;
  outline:none; transition: border-color .2s;
}
.chat-gate-form input:focus{ border-color: var(--accent-a); }
.chat-gate-note{ font-size:0.78rem; color: var(--text-faint); margin: 10px 0 0; }
.chat-gate-note a{ color: var(--accent-b); text-decoration: underline; }

.chat-input-row{
  display:flex; gap:10px; padding: 16px 20px; border-top: 1px solid var(--border);
}
.chat-input-row input{
  flex:1; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color:#fff; font-size:0.92rem;
  outline:none; transition: border-color .2s;
}
.chat-input-row input:focus{ border-color: var(--accent-a); }
.chat-input-row button{ padding: 12px 16px; flex-shrink:0; }
.chat-note{ text-align:center; font-size:0.74rem; color: var(--text-faint); padding: 0 20px 16px; }

/* footer */
.footer{ padding: 60px 28px 40px; border-top: 1px solid var(--border); text-align:center; }
.footer-brand{ justify-content:center; font-size:1.1rem; }
.footer-tag{ margin: 10px 0 20px; color: var(--text-dim); font-size:0.9rem; }
.footer-copy{ font-size:0.78rem; color: var(--text-faint); }

/* admin page */
.admin-card{
  max-width: 900px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
}
.admin-login-form{ display:flex; gap:10px; flex-wrap:wrap; }
.admin-login-form input{
  flex:1; min-width:220px; padding: 12px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.03); color:#fff; font-size:0.92rem;
  outline:none;
}
.admin-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom: 22px; }
.btn-sm{ padding: 7px 14px; font-size:0.8rem; }
.admin-table-scroll{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse: collapse; font-size:0.88rem; }
.admin-table th{
  text-align:left; padding: 10px 14px; color: var(--text-faint); font-weight:600;
  border-bottom: 1px solid var(--border); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em;
}
.admin-table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align:middle; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{ display:inline-block; padding: 3px 10px; border-radius:999px; font-size:0.74rem; font-weight:600; }
.badge-pending{ background: rgba(255,200,80,0.15); color:#ffcf6b; }
.badge-approved{ background: rgba(94,234,212,0.15); color: var(--accent-b); }
.badge-rejected{ background: rgba(255,90,90,0.15); color:#ff9a9a; }

/* auth modal (Anmelden / Registrieren) */
.modal-overlay{
  position: fixed; inset:0; z-index:200;
  background: rgba(4,5,10,0.7); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
}
.modal{
  position:relative; width:100%; max-width: 380px;
  background: #10121f; border:1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px 26px; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
}
.modal-close{
  position:absolute; top:16px; right:16px;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  background: var(--surface); color: var(--text-dim); cursor:pointer; transition: background .2s, color .2s;
}
.modal-close:hover{ background: var(--surface-strong); color:#fff; }
.modal-tabs{ display:flex; gap:6px; background: rgba(255,255,255,0.03); border-radius:999px; padding:4px; margin-bottom:20px; }
.modal-tab{
  flex:1; padding: 8px 14px; border-radius:999px; border:none; background:transparent;
  color: var(--text-dim); font-size:0.86rem; font-weight:600; cursor:pointer; transition: background .2s, color .2s;
}
.modal-tab.active{ background: var(--grad); color:#06070d; }
.modal-title{ font-size:1.3rem; margin-bottom:6px; }
.modal-hint{ font-size:0.84rem; margin: 0 0 20px; }
.modal-form{ display:flex; flex-direction:column; gap:12px; }
.modal-form input{
  padding: 12px 16px; border-radius:12px; border:1px solid var(--border);
  background: rgba(255,255,255,0.03); color:#fff; font-size:0.92rem; outline:none; transition: border-color .2s;
}
.modal-form input:focus{ border-color: var(--accent-a); }
.modal-form button{ justify-content:center; margin-top:4px; }
.modal-error{ margin:0; font-size:0.8rem; color:#ff9a9a; min-height:1em; }

/* saved trips */
.saved-trips{ display:flex; flex-direction:column; gap:16px; margin-top:46px; }
.saved-trips-empty{ font-size:0.92rem; color: var(--text-faint); }
.saved-trip-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.saved-trip-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding: 20px 24px; }
.saved-trip-info strong{ color:#fff; font-size:1.05rem; display:block; margin-bottom:4px; }
.saved-trip-info span{ font-size:0.84rem; color: var(--text-faint); }
.saved-trip-actions{ display:flex; gap:8px; flex-shrink:0; }
.saved-trip-body{ padding: 0 24px 24px; }

/* reveal animation */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* responsive */
@media (max-width: 1180px){
  .nav-links{ display:none; }
}
@media (max-width: 900px){
  .planner-grid, .social-grid, .two-col{ grid-template-columns: 1fr; }
  .planner-inputs{ position:static; flex-direction:row; flex-wrap:wrap; }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .two-col.reverse{ direction: ltr; }
  .book-cover{ transform:none; }
}
@media (max-width: 560px){
  .feature-grid{ grid-template-columns: 1fr; }
  .hero-stats{ gap: 24px; }
  .nav-cta{ display:none; }
  .nav-account-name{ max-width:90px; }
}