:root {
  --ink: #20333a;
  --navy: #173f48;
  --navy-2: #215967;
  --paper: #fffdf7;
  --cream: #f3f3e7;
  --line: #ced9ce;
  --muted: #7f8e88;
  --coral: #ee7864;
  --coral-light: #ffebe4;
  --teal: #3aa99a;
  --teal-light: #dff4ed;
  --blue: #4e9eb6;
  --blue-light: #e0f2f6;
  --sun: #edbe5a;
  --sun-light: #fff1c8;
  --lilac: #8a75a8;
  --lilac-light: #eee7f6;
  --pink: #d88792;
  --pink-light: #f8e6e8;
  --danger: #bd4f45;
  --shadow: rgba(72, 91, 77, .15);
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.icon-sprite { width: 0; height: 0; position: absolute; overflow: hidden; pointer-events: none; }
.ui-icon { width: 1.35em; height: 1.35em; display: inline-block; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.26em; }
.page-noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: radial-gradient(#b6c9b7 1px, transparent 1px); background-size: 18px 18px; }
.page-noise:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0, rgba(237,190,90,.18), transparent 26%), radial-gradient(circle at 0 60%, rgba(58,169,154,.1), transparent 25%); }

/* Navigation */
.app-nav { width: min(1560px, calc(100% - 36px)); min-height: 68px; padding: 8px 12px 8px 13px; margin: 16px auto 0; display: flex; align-items: center; gap: 14px; position: sticky; top: 10px; z-index: 30; overflow: visible; color: #fff; background: linear-gradient(112deg, rgba(14,55,66,.98), rgba(22,91,99,.98) 65%, rgba(31,119,105,.97)); border: 1px solid rgba(209,247,236,.2); border-radius: 20px 12px 20px 20px; box-shadow: 0 11px 0 rgba(20,82,83,.06), 0 16px 34px rgba(23,63,72,.16); backdrop-filter: blur(15px); transition: background .25s ease, border-radius .25s ease; }
.app-nav:before { content: ""; height: 19px; position: absolute; z-index: 0; right: -18px; bottom: -8px; left: -18px; opacity: .5; background: radial-gradient(26px 13px at 26px 0, transparent 23px, rgba(184,246,231,.62) 24px 25px, transparent 26px) 0 0 / 52px 18px repeat-x; pointer-events: none; transition: opacity .25s ease; }
.app-nav:after { content: ""; width: 165px; height: 165px; position: absolute; z-index: 0; top: -112px; right: -43px; background: radial-gradient(circle, rgba(255,222,132,.28) 0 28%, rgba(255,222,132,.08) 29% 48%, transparent 49%); border-radius: 50%; pointer-events: none; transition: opacity .25s ease; }
.app-nav > :not(.nav-holiday-art) { position: relative; z-index: 2; }
.brand { min-width: max-content; display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--display); font-weight: 800; text-decoration: none; }
.brand-copy { display: grid; gap: 1px; line-height: 1; }
.brand-copy > span { font-size: 18px; letter-spacing: -.055em; }
.brand-copy small { color: #a9ddd3; font-family: var(--body); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.brand em { color: #ffda7d; font-style: normal; }
.brand-mark { width: 46px; height: 46px; display: block; position: relative; overflow: hidden; color: var(--navy); background: linear-gradient(180deg, #ffe9a7 0 47%, #74d1c4 48% 72%, #248b89 73% 100%); border: 1px solid rgba(255,255,255,.68); border-radius: 15px 50% 50% 50%; box-shadow: 0 4px 0 rgba(5,48,55,.24), inset 0 0 0 2px rgba(255,255,255,.16); transform: rotate(-2deg); }
.brand-sun { width: 13px; height: 13px; position: absolute; z-index: 1; top: 6px; right: 6px; background: #ffbd58; border: 2px solid rgba(255,255,255,.68); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,211,115,.2); }
.brand-mark .brand-palm { width: 31px; height: 31px; position: absolute; z-index: 3; left: 5px; bottom: 3px; color: #144b51; stroke-width: 2; filter: drop-shadow(0 1px rgba(255,255,255,.25)); }
.brand-wave { width: 48px; height: 13px; position: absolute; z-index: 2; left: -2px; bottom: -4px; border-top: 2px solid rgba(236,255,249,.86); border-radius: 50%; }
.brand-wave.two { bottom: -8px; left: 8px; opacity: .65; }
.brand-mark-image { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.brand-mark-image img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(2,31,37,.3)); }
.save-indicator { min-height: 32px; padding: 7px 10px; display: flex; align-items: center; gap: 7px; color: #d8efeb; background: rgba(255,255,255,.065); border: 1px solid rgba(224,255,247,.12); border-radius: 100px; font-size: 10.9px; }
.save-indicator > span { width: 7px; height: 7px; background: #78d49f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(120,212,159,.1); }
.save-indicator.syncing > span { background: var(--sun); animation: pulse 1s infinite; }
.nav-holiday-art { width: 225px; height: 70px; position: absolute; z-index: 1; top: 0; left: 43%; opacity: .5; pointer-events: none; transition: opacity .25s ease; }
.nav-art-sun { width: 24px; height: 24px; position: absolute; top: 10px; right: 24px; background: #ffd77d; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 0 0 7px rgba(255,220,134,.09); }
.nav-art-palm { width: 53px; height: 53px; position: absolute; z-index: 2; bottom: -1px; left: 78px; color: #b6eee0; stroke-width: 1.45; transform: rotate(-5deg); }
.nav-art-wave { height: 21px; position: absolute; right: 0; bottom: -8px; left: 0; border-top: 2px solid rgba(191,244,231,.66); border-radius: 50%; }
.nav-art-wave.two { right: 28px; bottom: -14px; left: 35px; opacity: .55; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.nav-button { min-height: 40px; padding: 8px 13px; color: #d9efeb; background: rgba(197,245,232,.075); border: 1px solid rgba(222,255,246,.14); border-radius: 13px; font-size: 11.5px; font-weight: 700; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.nav-new-plan { color: var(--navy); background: var(--sun); border-color: #ffe8a7; box-shadow: 0 3px 0 #bf8a35; }
.nav-new-plan:hover { color: var(--navy); background: #ffe5a0; border-color: #fff4ca; }
.nav-new-plan > span { margin-right: 2px; font-size: 15px; line-height: 0; }
.map-nav-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.nav-button:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.nav-more { position: relative; }
.nav-more > summary { min-width: 42px; height: 40px; padding: 0 11px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #d9efeb; background: rgba(197,245,232,.075); border: 1px solid rgba(222,255,246,.14); border-radius: 13px; cursor: pointer; font-size: 11.5px; font-weight: 800; list-style: none; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary > span:first-child { color: #a9ddd3; font-size: 13px; letter-spacing: 1px; transform: translateY(-3px); }
.nav-more[open] > summary { color: var(--navy); background: #e7f6ef; border-color: #fff; }
.nav-more-panel { width: 204px; padding: 7px; display: grid; gap: 3px; position: absolute; top: calc(100% + 10px); right: 0; color: var(--navy); background: #fffef9; border: 1px solid #d6e4dc; border-radius: 15px 5px 15px 15px; box-shadow: 0 16px 35px rgba(12,57,65,.22); }
.nav-more-panel a,.nav-more-panel button { min-height: 39px; padding: 0 10px; display: flex; align-items: center; gap: 9px; color: var(--navy); background: transparent; border: 0; border-radius: 9px; font: 800 11px var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.nav-more-panel a:hover,.nav-more-panel button:hover { background: #edf7f2; }
.nav-more-panel .ui-icon { width: 18px; height: 18px; color: #258b82; }
.nav-more-panel hr { width: calc(100% - 12px); height: 1px; margin: 3px 6px; border: 0; background: #dfe9e2; }
.free-nav-badge { min-height: 40px; padding: 7px 13px; display: flex; align-items: center; gap: 5px; color: #e7fff0; background: rgba(113,220,159,.15); border: 1px solid rgba(152,235,187,.36); border-radius: 13px 13px 13px 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.free-nav-badge b { color: #99e7b8; font-size: 11.5px; letter-spacing: 0; }
.account-button { width: 42px; min-height: 42px; padding: 5px; display: grid; place-items: center; color: var(--navy); background: linear-gradient(135deg, #ffe493, #efbb55); border: 1px solid rgba(255,241,197,.7); border-radius: 14px 14px 14px 6px; box-shadow: 0 3px 0 #ba8532; }
.account-button:hover { background: linear-gradient(135deg, #fff0b8, #f6c76b); transform: translateY(-1px); }
.account-button #authBtnLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.account-avatar { width: 29px; height: 29px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #174c57, #228679); border-radius: 50% 50% 50% 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }

main { width: min(1560px, calc(100% - 36px)); margin: 22px auto 55px; }
.eyebrow, .chapter-label, .step-kicker { color: var(--coral); font-size: 12.4px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.button { min-height: 44px; padding: 11px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; font-size: 12.5px; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button .ui-icon { width: 19px; height: 19px; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--navy); background: var(--sun); box-shadow: 0 5px 0 #cf9d3d; }
.button-primary:hover { background: #f6cc76; box-shadow: 0 7px 0 #cf9d3d; }
.button-coral { color: #fff; background: var(--coral); box-shadow: 0 5px 0 #c75e4d; }
.button-soft { color: var(--navy); background: var(--teal-light); border: 1px solid #bddfd5; }
.button-ghost { color: var(--muted); background: #eef1ea; border: 1px solid #d9e0d7; box-shadow: none; }

/* Landing page */
.landing { padding: 30px 0 24px; }
.landing-hero { min-height: 760px; padding: 62px clamp(34px, 5vw, 78px); display: grid; grid-template-columns: minmax(380px, .88fr) minmax(610px, 1.25fr); align-items: center; gap: clamp(34px, 5vw, 88px); position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 4%, rgba(255,197,91,.24), transparent 23%), radial-gradient(circle at 73% 88%, rgba(45,197,184,.32), transparent 33%), linear-gradient(145deg, #0e3543 0%, #145766 45%, #168178 100%); border: 1px solid rgba(255,255,255,.16); border-radius: 32px 9px 74px 32px; box-shadow: 0 28px 80px rgba(23,63,72,.24); transition: background .25s ease; }
.landing-hero:before { content: ""; width: 560px; height: 560px; position: absolute; top: -310px; left: -235px; border: 1px solid rgba(255,232,170,.14); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018), 0 0 0 128px rgba(255,218,135,.013); }
.landing-hero:after { content: ""; width: 580px; height: 270px; position: absolute; right: -110px; bottom: -185px; background: linear-gradient(135deg, var(--sun), #f58a68); border-radius: 50%; opacity: .24; filter: blur(2px); }
.vacation-horizon { position: absolute; z-index: 1; inset: 0; overflow: hidden; color: #dff7ef; opacity: 1; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.vacation-horizon:before, .vacation-horizon:after { content: ""; width: 118%; position: absolute; left: -9%; border-radius: 50% 50% 0 0; transform-origin: center; }
.vacation-horizon:before { height: 430px; bottom: -112px; background: linear-gradient(180deg, rgba(81,211,197,.11), rgba(40,151,157,.3)); transform: rotate(-2.6deg); }
.vacation-horizon:after { height: 330px; bottom: -126px; background: linear-gradient(180deg, rgba(120,229,213,.12), rgba(13,96,116,.3)); transform: rotate(3.2deg); }
.vacation-horizon .ui-icon { position: absolute; z-index: 2; fill: none; stroke: currentColor; }
.horizon-sun { width: 124px; height: 124px; position: absolute; z-index: 1; top: 39px; right: 3.8%; background: radial-gradient(circle at 36% 32%, #fff4c9 0 10%, #ffd56f 11% 43%, #f6a866 72%, #ee7864 100%); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 0 0 17px rgba(255,213,111,.11), 0 0 65px rgba(255,180,95,.32); animation: vacationSunFloat 7s ease-in-out infinite; }
.horizon-sun:before { content: ""; position: absolute; inset: -29px; border: 1px dashed rgba(255,231,170,.28); border-radius: 50%; }
.horizon-sun i { position: absolute; inset: 21px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.horizon-cloud { width: 65px; height: 15px; position: absolute; z-index: 1; background: rgba(236,255,250,.19); border-radius: 100px; filter: blur(.2px); animation: vacationCloudFloat 9s ease-in-out infinite; }
.horizon-cloud:before, .horizon-cloud:after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.horizon-cloud:before { width: 28px; height: 28px; left: 12px; bottom: 3px; }
.horizon-cloud:after { width: 20px; height: 20px; right: 11px; bottom: 2px; }
.horizon-cloud.cloud-one { top: 74px; left: 37%; }
.horizon-cloud.cloud-two { top: 174px; right: 2%; opacity: .7; animation-delay: -4s; }
.horizon-flight-path { width: 300px; height: 92px; position: absolute; z-index: 1; top: 61px; left: 45%; border-top: 2px dashed rgba(255,241,199,.4); border-radius: 52% 52% 0 0; transform: rotate(-4deg); }
.horizon-plane { width: 43px; height: 43px; top: 61px; left: calc(45% + 263px); color: #ffe193; stroke-width: 1.8 !important; filter: drop-shadow(0 5px 8px rgba(9,51,59,.23)); transform: rotate(16deg); animation: vacationPlaneFloat 5.5s ease-in-out infinite; }
.horizon-island { height: 82px; position: absolute; z-index: 1; bottom: 77px; background: linear-gradient(180deg, rgba(246,202,108,.3), rgba(72,155,115,.25)); border-radius: 72% 42% 0 0; filter: blur(.2px); }
.horizon-island.island-one { width: 270px; left: 25%; bottom: 235px; transform: rotate(-4deg); }
.horizon-island.island-two { width: 205px; right: 1%; bottom: 219px; transform: rotate(5deg); opacity: .7; }
.horizon-palm { width: 185px; height: 185px; left: 34.5%; bottom: 245px; color: #ffda80; stroke-width: 1.65 !important; opacity: .78; filter: drop-shadow(0 8px 12px rgba(7,48,56,.24)); transform: rotate(-7deg); }
.horizon-city { width: 215px; height: 177px; right: -31px; bottom: 183px; color: #ffe5a7; stroke-width: 1.45 !important; opacity: .53; }
.horizon-attraction { width: 118px; height: 118px; right: 7.5%; bottom: 212px; color: #ff9985; stroke-width: 1.5 !important; opacity: .68; }
.horizon-wave { width: 78%; height: 92px; position: absolute; z-index: 2; right: -8%; bottom: 265px; border-top: 2px solid rgba(221,255,249,.32); border-radius: 50%; animation: vacationWaveDrift 8s ease-in-out infinite; }
.horizon-wave.wave-two { width: 72%; right: 16%; bottom: 220px; opacity: .68; animation-delay: -2.5s; }
.horizon-wave.wave-three { width: 64%; right: -3%; bottom: 176px; opacity: .42; animation-delay: -5s; }
.landing-copy { position: relative; z-index: 2; }
.landing-mascot { width: min(369px, 32.4vw); margin: 0; position: absolute; z-index: 3; right: clamp(-28px, calc(3.4vw - 50px), 8px); bottom: 18px; display: grid; justify-items: center; pointer-events: none; transform: rotate(2deg); }
.landing-mascot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 19px rgba(4,37,43,.32)); }
.landing-mascot p { width: max-content; max-width: 220px; margin: -10px 0 0; padding: 9px 12px; display: grid; gap: 2px; color: var(--navy); background: rgba(255,253,247,.97); border: 1px solid rgba(255,255,255,.9); border-radius: 14px 14px 4px 14px; box-shadow: 0 10px 25px rgba(6,36,43,.19); font-family: var(--body); line-height: 1.2; text-align: center; transform: rotate(-2deg); }
.landing-mascot strong { color: #176d73; font-size: 12.1px; }
.landing-mascot span { color: #627973; font-size: 9.8px; font-weight: 700; }
.landing-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.landing-badge { width: max-content; padding: 7px 12px 7px 8px; display: flex; align-items: center; gap: 8px; color: #fff3cc; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; font-size: 12.4px; font-weight: 800; letter-spacing: .14em; }
.landing-badge .ui-icon { width: 25px; height: 25px; padding: 5px; color: var(--navy); background: var(--sun); border-radius: 50%; stroke-width: 2.2; }
.landing-free-badge { min-height: 41px; padding: 6px 12px; display: flex; align-items: center; gap: 7px; color: var(--navy); background: #8bdfae; border: 1px solid #b8edcf; border-radius: 100px 100px 100px 12px; box-shadow: 0 4px 0 rgba(28,111,88,.35); transform: rotate(-1.5deg); }
.landing-free-badge strong { font-size: 12.4px; letter-spacing: .08em; }
.landing-free-badge span { padding: 3px 6px; color: #fff; background: var(--navy); border-radius: 100px; font-size: 9.7px; font-weight: 800; }
.landing-copy h1 { max-width: 610px; margin: 25px 0 21px; font-family: var(--display); font-size: clamp(49px, 4.55vw, 75px); line-height: .91; letter-spacing: -.078em; }
.landing-copy h1 em { color: var(--sun); font-style: normal; }
.landing-copy > p { max-width: 575px; margin: 0; color: #c7dedd; font-size: 17px; line-height: 1.7; }
.landing-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.landing-primary { min-height: 57px; padding: 14px 22px; color: var(--navy); background: var(--sun); border-radius: 15px; box-shadow: 0 6px 0 #c79334; font-size: 14px; }
.landing-primary span { font-size: 20px; transition: transform .15s ease; }
.landing-primary:hover { background: #f8ca6c; box-shadow: 0 8px 0 #c79334; }
.landing-primary:hover span { transform: translateX(3px); }
.landing-secondary { min-height: 57px; padding: 14px 19px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 15px; }
.landing-secondary:hover { background: rgba(255,255,255,.14); }
.map-landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.landing-trust { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 17px; color: #afccca; font-size: 11.5px; font-weight: 600; }
.landing-trust span { display: flex; align-items: center; gap: 6px; }
.landing-trust b { width: 17px; height: 17px; display: grid; place-items: center; color: var(--navy); background: #7ed4a3; border-radius: 50%; font-size: 12.4px; }
.vacation-motif-pills { max-width: 560px; margin-top: 22px; display: grid; grid-template-columns: 1.08fr .86fr 1.06fr; gap: 8px; }
.vacation-motif-pills > span { min-width: 0; min-height: 58px; padding: 8px 9px; display: flex; align-items: center; gap: 9px; color: #f7fffd; background: rgba(255,255,255,.105); border: 1px solid rgba(255,255,255,.18); border-radius: 16px 16px 16px 5px; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(5,42,49,.12); backdrop-filter: blur(8px); }
.vacation-motif-pills > span:nth-child(2) { border-radius: 16px 5px 16px 16px; }
.vacation-motif-pills > span:nth-child(3) { border-radius: 5px 16px 16px 16px; }
.vacation-motif-pills b, .vacation-motif-pills strong, .vacation-motif-pills small { min-width: 0; display: block; }
.vacation-motif-pills b { font-weight: 400; }
.vacation-motif-pills strong { overflow: hidden; font-size: 12.1px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.vacation-motif-pills small { margin-top: 3px; overflow: hidden; color: #b9d9d5; font-size: 10.3px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.vacation-motif-pills .ui-icon { width: 35px; height: 35px; padding: 7px; color: var(--navy); background: linear-gradient(145deg, #ffe7a4, var(--sun)); border-radius: 50% 50% 50% 10px; stroke-width: 2; box-shadow: 0 4px 0 rgba(157,104,22,.25); }
.vacation-motif-pills > span:nth-child(2) .ui-icon { color: #fff; background: linear-gradient(145deg, #62d0c0, var(--teal)); box-shadow: 0 4px 0 rgba(11,91,81,.25); }
.vacation-motif-pills > span:nth-child(3) .ui-icon { color: #fff; background: linear-gradient(145deg, #ff9a85, var(--coral)); box-shadow: 0 4px 0 rgba(145,55,40,.25); }
.free-promise { width: min(470px,100%); min-height: 58px; padding: 9px 12px; margin-top: 17px; display: grid; grid-template-columns: 41px minmax(0,1fr); align-items: center; gap: 11px; color: #d8ebe7; background: rgba(7,38,44,.26); border: 1px solid rgba(126,212,163,.24); border-radius: 14px 14px 4px 14px; }
.free-promise > span { width: 41px; height: 41px; display: grid; place-items: center; color: var(--navy); background: #8bdfae; border-radius: 50% 50% 50% 11px; font-family: var(--display); font-size: 13px; font-weight: 800; }
.free-promise strong, .free-promise small { display: block; }
.free-promise strong { color: #fff; font-size: 11.5px; }
.free-promise small { margin-top: 3px; color: #b8d1ce; font-size: 11px; line-height: 1.35; }

.landing-demo { min-width: 0; padding: 27px 28px 19px; position: relative; z-index: 2; color: var(--ink); background: rgba(255,253,247,.97); border: 1px solid rgba(255,255,255,.55); border-radius: 25px 7px 25px 25px; box-shadow: 19px 25px 0 rgba(9,42,48,.17), 0 30px 80px rgba(6,36,43,.32); transform: rotate(1.1deg); }
.demo-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.demo-glow.one { width: 86px; height: 86px; top: -24px; right: -21px; background: var(--coral); }
.demo-glow.two { width: 55px; height: 55px; bottom: -22px; left: -21px; background: var(--sun); }
.demo-postcard-stamp { min-height: 39px; padding: 6px 10px 6px 7px; display: flex; align-items: center; gap: 6px; position: absolute; z-index: 4; top: -22px; right: 135px; color: #795c22; background: #fff0bc; border: 1px dashed #d7a947; border-radius: 7px 7px 7px 2px; box-shadow: 0 5px 0 rgba(118,82,18,.18); font-size: 9.7px; font-weight: 800; letter-spacing: .12em; transform: rotate(-3deg); }
.demo-postcard-stamp .ui-icon { width: 23px; height: 23px; padding: 4px; color: #fff; background: var(--coral); border-radius: 50%; stroke-width: 2.1; }
.demo-postcard-stamp b { padding-left: 6px; color: var(--navy); border-left: 1px dashed #d7a947; font-family: var(--display); font-size: 12px; letter-spacing: -.03em; }
.demo-add-preview { position: absolute; z-index: 20; inset: 0; padding: 24px; display: grid; place-items: center; visibility: hidden; opacity: 0; background: rgba(18,53,61,.58); border-radius: inherit; backdrop-filter: blur(4px); transform: translateY(8px) scale(.985); transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.demo-add-preview.manual-open, .demo-add-preview.auto-open { visibility: visible; opacity: 1; transform: none; }
.demo-add-preview.demo-dismissed { visibility: hidden; opacity: 0; transform: translateY(-7px) scale(.99); }
.demo-add-window { width: min(430px, 100%); padding: 21px; color: var(--ink); background: var(--paper); border: 1px solid rgba(255,255,255,.85); border-radius: 18px 5px 18px 18px; box-shadow: 0 24px 60px rgba(8,35,41,.35), 8px 10px 0 rgba(58,169,154,.18); transform: rotate(-.5deg); }
.demo-add-window > header { padding-bottom: 13px; margin-bottom: 13px; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px dashed #d3ddd2; }
.demo-add-window > header span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.demo-add-window > header h3 { margin: 4px 0 0; color: var(--navy); font-family: var(--display); font-size: 22px; letter-spacing: -.05em; }
.demo-add-window > header button { width: 31px; height: 31px; color: #77877f; background: #edf1e9; border: 1px solid #d8e0d6; border-radius: 50%; font-size: 18px; line-height: 1; }
.demo-form-type { padding: 10px; margin-bottom: 9px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; background: var(--coral-light); border: 1px solid #efb2a5; border-radius: 11px; }
.demo-form-type > span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 10px; }
.demo-form-type .ui-icon { width: 23px; height: 23px; }
.demo-form-type small, .demo-form-type strong { display: block; }
.demo-form-type small, .demo-form-field small { color: #8b9992; font-size: 9.7px; font-weight: 800; letter-spacing: .08em; }
.demo-form-type strong { margin-top: 2px; color: var(--navy); font-size: 11px; }
.demo-form-type b { padding: 5px 7px; color: #277767; background: #dff4ed; border-radius: 100px; font-size: 9.7px; }
.demo-form-field { min-width: 0; padding: 10px 11px; display: grid; gap: 4px; background: #fff; border: 1px solid #d7dfd5; border-radius: 10px; }
.demo-form-field > strong { overflow: hidden; color: var(--navy); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.demo-form-row { margin-top: 7px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.demo-save-example { width: 100%; min-height: 43px; padding: 10px 13px; margin-top: 11px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--navy); background: var(--sun); border: 0; border-radius: 10px; box-shadow: 0 4px 0 #ca9737; font-size: 11.5px; font-weight: 800; }
.demo-save-example span { font-size: 15px; }
.demo-add-window > p { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #829189; font-size: 10.3px; }
.demo-add-window > p i { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50%; font-style: normal; font-weight: 800; }
.demo-add-window > p b { color: #b6c1ba; }
.demo-trip-header { padding-bottom: 17px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px dashed #cfdbd0; }
.demo-trip-header > div:first-child > span, .demo-budget > span { color: var(--coral); font-size: 12.4px; font-weight: 800; letter-spacing: .17em; }
.demo-trip-header h2 { margin: 5px 0 4px; color: var(--navy); font-family: var(--display); font-size: 30px; letter-spacing: -.055em; }
.demo-trip-header p { margin: 0; color: var(--muted); font-size: 12px; }
.demo-budget { min-width: 120px; padding: 10px 13px; text-align: right; background: var(--sun-light); border: 1px solid #ead7a1; border-radius: 12px 4px 12px 12px; }
.demo-budget span, .demo-budget strong, .demo-budget small { display: block; }
.demo-budget strong { margin: 2px 0; color: var(--navy); font-family: var(--display); font-size: 17px; }
.demo-budget small { color: #897b57; font-size: 12.4px; }
.demo-route { height: 45px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--navy); font-family: var(--display); font-size: 12.4px; }
.demo-route i { width: 38px; border-top: 1px dashed #a8bbb0; }
.demo-route b { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 9px; transform: rotate(-6deg); }
.demo-route .ui-icon { width: 18px; height: 18px; }
.demo-scroll-label { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #82918a; font-size: 11px; }
.demo-scroll-label > span { display: flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 800; letter-spacing: .1em; }
.demo-scroll-label i { width: 7px; height: 7px; display: block; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 3px rgba(58,169,154,.13); }
.demo-scroll-label button { padding: 5px 8px; color: #fff; background: var(--coral); border: 0; border-radius: 100px; font-size: 11px; font-weight: 800; box-shadow: 0 3px 0 #c95d4d; }
.demo-scroll-label button:hover { background: #d76451; }
.demo-scroll-label button.saved { color: #236f61; background: #dff4ed; box-shadow: 0 3px 0 #afd9cd; }
.demo-timeline-window { height: 420px; position: relative; overflow: hidden; border-top: 1px solid rgba(206,217,206,.7); border-bottom: 1px solid rgba(206,217,206,.7); }
.demo-timeline-window:before, .demo-timeline-window:after { content: ""; height: 28px; position: absolute; z-index: 5; right: 0; left: 0; pointer-events: none; }
.demo-timeline-window:before { top: 0; background: linear-gradient(180deg, var(--paper), transparent); }
.demo-timeline-window:after { bottom: 0; background: linear-gradient(0deg, var(--paper), transparent); }
.demo-timeline { padding: 18px 4px 20px; position: relative; animation: demoTimelineScroll 24s linear 1.5s infinite alternate both; will-change: transform; }
.landing-demo:hover .demo-timeline { animation-play-state: paused; }
.demo-spine { width: 2px; position: absolute; top: 7px; bottom: 6px; left: 50%; background: repeating-linear-gradient(180deg, #a5bbaa 0 8px, transparent 8px 14px); transform: translateX(-50%); }
.demo-day { width: calc(50% - 24px); margin-bottom: 9px; position: relative; }
.demo-day.left { margin-right: auto; }
.demo-day.right { margin-left: auto; }
.demo-day-number { width: 28px; height: 28px; display: grid; place-items: center; position: absolute; z-index: 3; top: 15px; color: #fff; background: var(--coral); border: 4px solid #f7f8f0; border-radius: 50%; font-size: 9.7px; font-weight: 800; line-height: 1; }
.demo-day.left .demo-day-number { right: -38px; }
.demo-day.right .demo-day-number { left: -38px; background: var(--teal); }
.demo-day-number:after { content: ""; width: 13px; position: absolute; top: 50%; border-top: 1px solid #a8bbb0; }
.demo-day.left .demo-day-number:after { right: 22px; }
.demo-day.right .demo-day-number:after { left: 22px; }
.demo-day-card { min-height: 98px; padding: 11px 12px; background: #eef7f9; border: 1px solid #9fc8d1; border-left: 4px solid var(--blue); border-radius: 11px 11px 11px 4px; box-shadow: 2px 3px 0 rgba(78,158,182,.12); }
.demo-day.right .demo-day-card { border-radius: 11px 11px 4px 11px; }
.demo-day-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.demo-day-card header span { color: #82918a; font-size: 12.4px; font-weight: 800; letter-spacing: .06em; }
.demo-day-card header b { padding: 4px 6px; color: #257a66; background: #dbf1e7; border-radius: 100px; font-size: 11.7px; }
.demo-day-card h3 { margin: 9px 0 4px; display: flex; align-items: center; gap: 7px; color: var(--navy); font-size: 14px; line-height: 1.2; }
.demo-day-card h3 .ui-icon { width: 20px; height: 20px; color: var(--blue); stroke-width: 2; }
.demo-day-card p, .demo-day-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-day-card p { margin: 0; color: #60756f; font-size: 11px; }
.demo-day-card small { margin-top: 7px; color: #8a9791; font-size: 11.5px; }
.demo-day-card.coral-card { background: #fff0eb; border-color: #efad9f; border-left-color: var(--coral); }
.demo-day-card.coral-card h3 .ui-icon { color: var(--coral); }
.demo-day-card.green-card { background: #eaf7f2; border-color: #9bd2c2; border-left-color: var(--teal); }
.demo-day-card.green-card h3 .ui-icon { color: var(--teal); }
.demo-day-card.pink-card { background: #faedf2; border-color: #e2aec0; border-left-color: var(--pink); }
.demo-day-card.pink-card h3 .ui-icon { color: var(--pink); }
.demo-day-card.orange-card { background: #fff4e5; border-color: #edc18e; border-left-color: #e89a48; }
.demo-day-card.orange-card h3 .ui-icon { color: #d88632; }
.demo-day-card.multi-card { padding-bottom: 8px; }
.demo-plan-points { margin-top: 7px; display: grid; gap: 4px; }
.demo-plan-points > div { min-width: 0; padding: 6px 7px; display: grid; grid-template-columns: 34px 24px minmax(0,1fr); align-items: center; gap: 6px; background: rgba(255,255,255,.72); border: 1px solid rgba(226,160,145,.42); border-radius: 8px; }
.demo-plan-points time { color: var(--coral); font-size: 11px; font-weight: 800; }
.demo-plan-points > div > span { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 7px; }
.flight-card .demo-plan-points > div > span { background: var(--blue); }
.flight-card .demo-plan-points time { color: #3f8ba2; }
.green-card .demo-plan-points > div > span { background: var(--teal); }
.green-card .demo-plan-points time { color: #2b897b; }
.pink-card .demo-plan-points > div > span { background: var(--pink); }
.pink-card .demo-plan-points time { color: #b36376; }
.blue-card .demo-plan-points > div > span { background: var(--blue); }
.blue-card .demo-plan-points time { color: #3f8ba2; }
.orange-card .demo-plan-points > div > span { background: #e89a48; }
.orange-card .demo-plan-points time { color: #bd6f23; }
.demo-plan-points .ui-icon { width: 14px; height: 14px; }
.demo-plan-points p { min-width: 0; margin: 0; }
.demo-plan-points strong, .demo-plan-points small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-plan-points strong { color: var(--navy); font-size: 12.2px; }
.demo-plan-points small { margin-top: 2px; color: #8a9791; font-size: 10.3px; }
.demo-hotel-pill { min-height: 29px; padding: 6px 8px; margin-bottom: 5px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; color: #317d70; background: #e2f5ed; border: 1px solid #a8d6c8; border-radius: 8px; font-size: 11px; }
.demo-hotel-pill .ui-icon { width: 15px; height: 15px; }
.demo-hotel-pill span { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.demo-hotel-pill b { color: #6f867f; font-size: 9.7px; }
.demo-footer { padding-top: 13px; display: flex; justify-content: space-between; gap: 15px; color: #84938c; border-top: 1px dashed #d2ddd2; font-size: 9.7px; }
.demo-footer span { display: flex; align-items: center; gap: 5px; color: #3c917f; font-weight: 800; }
.demo-footer i { width: 7px; height: 7px; background: #74d09b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(116,208,155,.15); }
.demo-footer b { font-weight: 700; }
.landing-feature-strip { margin: 22px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,253,247,.82); border: 1px solid #d4ddd2; border-radius: 20px 6px 20px 20px; box-shadow: 0 14px 35px rgba(72,91,77,.08); }
.landing-feature-strip > div { min-width: 0; padding: 21px 22px; display: grid; grid-template-columns: 44px minmax(0,1fr); column-gap: 12px; }
.landing-feature-strip > div:not(:last-child) { border-right: 1px dashed #d2dbd1; }
.landing-feature-strip > div > span { width: 44px; height: 44px; grid-row: 1 / 3; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 12px; }
.landing-feature-strip > div:nth-child(2) > span { background: var(--blue); }
.landing-feature-strip > div:nth-child(3) > span { background: var(--coral); }
.landing-feature-strip > div:nth-child(4) > span { background: var(--pink); }
.landing-feature-strip .ui-icon { width: 25px; height: 25px; }
.landing-feature-strip strong { align-self: end; color: var(--navy); font-size: 11px; }
.landing-feature-strip small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.landing-seo { margin-top: 24px; padding: clamp(35px, 5vw, 72px); display: grid; grid-template-columns: minmax(0,1.12fr) minmax(390px,.72fr); align-items: center; gap: clamp(38px, 6vw, 96px); position: relative; overflow: hidden; background: var(--paper); border: 1px solid #d4ded3; border-radius: 28px 28px 8px 28px; box-shadow: 0 18px 50px rgba(72,91,77,.09); }
.landing-seo:before { content: ""; width: 420px; height: 420px; position: absolute; right: -270px; bottom: -285px; border: 1px solid rgba(58,169,154,.14); border-radius: 50%; box-shadow: 0 0 0 34px rgba(58,169,154,.035), 0 0 0 68px rgba(58,169,154,.025); }
.seo-intro { position: relative; z-index: 2; }
.seo-intro h2, .landing-faq h2 { max-width: 810px; margin: 12px 0 19px; color: var(--navy); font-family: var(--display); font-size: clamp(35px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.068em; }
.seo-intro > p { max-width: 840px; margin: 0 0 13px; color: #6f8078; font-size: 13.5px; line-height: 1.78; }
.seo-benefits { margin-top: 27px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.seo-benefits span { min-height: 47px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; color: #536b64; background: #f2f5ed; border: 1px solid #dce4d9; border-radius: 11px; font-size: 12.4px; font-weight: 700; }
.seo-benefits b { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 29px; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 8px; font-size: 11px; }
.seo-benefits span:nth-child(2) b { background: var(--coral); }
.seo-benefits span:nth-child(3) b { background: var(--blue); }
.seo-benefits span:nth-child(4) b { background: var(--pink); }
.seo-explainer { padding: 31px; position: relative; z-index: 2; color: #fff; background: linear-gradient(150deg, var(--navy), #23666b); border-radius: 22px 6px 22px 22px; box-shadow: 11px 13px 0 var(--teal-light); }
.seo-sun { width: 58px; height: 58px; display: grid; place-items: center; color: var(--navy); background: var(--sun); border: 5px solid rgba(255,255,255,.14); border-radius: 50% 50% 50% 15px; }
.seo-sun .ui-icon { width: 30px; height: 30px; stroke-width: 2; }
.seo-explainer h3 { margin: 18px 0 16px; font-family: var(--display); font-size: 24px; letter-spacing: -.05em; }
.seo-explainer ul { padding: 0; margin: 0 0 25px; display: grid; gap: 7px; list-style: none; }
.seo-explainer li { padding: 10px; display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 10px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; }
.seo-explainer li > .ui-icon { width: 27px; height: 27px; color: var(--sun); }
.seo-explainer li strong, .seo-explainer li small { display: block; }
.seo-explainer li strong { font-size: 11.5px; }
.seo-explainer li small { margin-top: 3px; color: #b7d0ce; font-size: 11px; line-height: 1.45; }
.seo-explainer .landing-primary { width: 100%; font-size: 12px; }
.landing-coast { margin-top: 24px; padding: clamp(34px,5vw,72px) clamp(24px,5vw,72px) 25px; position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(circle at 87% 9%, rgba(255,215,116,.24), transparent 20%), linear-gradient(153deg,#103a49 0%,#176775 48%,#1c998c 100%); border: 1px solid rgba(218,255,246,.22); border-radius: 34px 10px 76px 34px; box-shadow: 0 26px 70px rgba(22,72,78,.21); }
.coast-scenery { position: absolute; z-index: -1; inset: 0; overflow: hidden; opacity: .82; pointer-events: none; transition: opacity .25s ease; }
.coast-sun { width: 150px; height: 150px; position: absolute; top: 38px; right: 6%; background: #ffd36e; border: 8px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 23px rgba(255,216,115,.08),0 0 0 47px rgba(255,216,115,.04); animation: vacationSunFloat 7s ease-in-out infinite; }
.coast-cloud { width: 105px; height: 23px; position: absolute; top: 92px; left: 9%; background: rgba(229,255,249,.18); border-radius: 50px; animation: vacationCloudFloat 10s ease-in-out infinite; }
.coast-cloud:before,.coast-cloud:after { content: ""; position: absolute; bottom: 0; background: inherit; border-radius: 50%; }
.coast-cloud:before { width: 43px; height: 43px; left: 17px; }
.coast-cloud:after { width: 58px; height: 58px; right: 12px; }
.coast-cloud.two { top: 210px; left: auto; right: 24%; opacity: .58; transform: scale(.7); animation-delay: -4s; }
.coast-plane { width: 52px; height: 52px; position: absolute; top: 160px; left: 29%; color: #ffe8ac; stroke-width: 1.4; transform: rotate(16deg); animation: vacationPlaneFloat 6s ease-in-out infinite; }
.coast-palm { width: 265px; height: 265px; position: absolute; right: -54px; bottom: 55px; color: rgba(213,255,236,.24); stroke-width: 1.25; transform: rotate(4deg); }
.coast-city { width: 230px; height: 230px; position: absolute; bottom: 31px; left: -50px; color: rgba(207,248,239,.14); stroke-width: 1.15; }
.coast-wave { width: 120%; height: 145px; position: absolute; right: -10%; bottom: -100px; left: -10%; border-top: 3px solid rgba(216,255,246,.38); border-radius: 50%; animation: vacationWaveDrift 9s ease-in-out infinite; }
.coast-wave.two { bottom: -78px; left: -17%; opacity: .63; animation-delay: -3s; }
.coast-wave.three { bottom: -56px; left: -5%; opacity: .32; animation-delay: -5s; }
.landing-faq { padding: clamp(29px,4vw,51px); display: grid; grid-template-columns: minmax(280px,.67fr) minmax(0,1.33fr); gap: clamp(30px,5vw,78px); position: relative; z-index: 1; color: var(--ink); background: rgba(255,253,247,.95); border: 1px solid rgba(255,255,255,.66); border-radius: 9px 28px 28px 28px; box-shadow: 14px 17px 0 rgba(7,52,58,.13); backdrop-filter: blur(7px); }
.landing-faq h2 { margin-bottom: 13px; font-size: clamp(31px,3vw,46px); }
.landing-faq > div:first-child > p { max-width: 380px; margin: 0; color: #74867e; font-size: 11px; line-height: 1.65; }
.faq-list { display: grid; gap: 8px; }
.faq-list details { padding: 0 17px; background: rgba(255,255,255,.82); border: 1px solid #d7e1d7; border-radius: 12px; }
.faq-list summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--navy); cursor: pointer; font-size: 12.1px; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: "+"; width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 8px; font-size: 17px; font-weight: 500; }
.faq-list details[open] summary:after { content: "−"; background: var(--coral); }
.faq-list details p { padding: 0 35px 16px 0; margin: -2px 0 0; color: #73847c; font-size: 11.5px; line-height: 1.65; }
.landing-contact { padding: clamp(40px,5vw,72px) 0 48px; display: grid; grid-template-columns: minmax(300px,.76fr) minmax(510px,1.24fr); align-items: center; gap: clamp(35px,6vw,96px); position: relative; z-index: 2; }
.contact-copy .eyebrow { color: #ffda7d; }
.contact-copy h2 { max-width: 610px; margin: 14px 0 17px; color: #fff; font-family: var(--display); font-size: clamp(38px,4.3vw,65px); line-height: .98; letter-spacing: -.068em; }
.contact-copy > p { max-width: 590px; margin: 0; color: #c4e2df; font-size: 13px; line-height: 1.75; }
.contact-route { margin: 31px 0 25px; display: flex; align-items: center; gap: 9px; }
.contact-route span { width: 70px; height: 70px; display: grid; place-items: center; flex: 0 0 70px; color: var(--navy); background: var(--sun); border: 6px solid rgba(255,255,255,.13); border-radius: 50%; font-family: var(--display); font-size: 12.4px; font-weight: 800; text-align: center; }
.contact-route span:last-child { color: #fff; background: var(--coral); }
.contact-route i { max-width: 63px; flex: 1; border-top: 2px dashed rgba(219,255,246,.4); }
.contact-route b { width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 41px; color: #ffdb80; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
.contact-route .ui-icon { width: 23px; height: 23px; transform: rotate(12deg); }
.contact-promises { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-promises span { padding: 7px 10px; display: flex; align-items: center; gap: 6px; color: #d8efeb; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 100px; font-size: 11px; font-weight: 800; }
.contact-promises b { color: #8be0ad; }
.contact-postcard { min-width: 0; padding: clamp(26px,3vw,40px); position: relative; color: var(--ink); background: linear-gradient(145deg,#fffdf7,#fff9e9); border: 1px solid rgba(255,255,255,.73); border-radius: 25px 7px 25px 25px; box-shadow: 17px 22px 0 rgba(7,49,57,.16),0 28px 70px rgba(4,42,50,.23); transform: rotate(.65deg); }
.contact-postcard:before { content: ""; position: absolute; top: 25px; right: 34%; bottom: 27px; border-left: 1px dashed #ddd9c9; pointer-events: none; opacity: .58; }
.contact-postcard > header { padding-right: 145px; margin-bottom: 24px; }
.contact-postcard > header span,.contact-postcard > header strong { display: block; }
.contact-postcard > header span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.contact-postcard > header strong { margin-top: 5px; color: var(--navy); font-family: var(--display); font-size: 24px; letter-spacing: -.045em; }
.postcard-stamp { width: 106px; height: 91px; padding: 9px; display: grid; place-items: center; position: absolute; top: 24px; right: 27px; color: var(--navy); background: #ffe29a; border: 2px dashed #d39e3d; box-shadow: 0 0 0 4px #fff5d9; text-align: center; transform: rotate(3deg); }
.postcard-stamp .ui-icon { width: 34px; height: 34px; color: #238277; }
.postcard-stamp strong { font-size: 9.7px; letter-spacing: .1em; }
.postcard-stamp small { font-size: 8.3px; font-weight: 800; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; position: relative; z-index: 1; }
.contact-form-grid label { min-width: 0; display: grid; gap: 6px; }
.contact-form-grid label > span { color: #6c7c75; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.contact-form-grid .full { grid-column: 1 / -1; }
.contact-form-grid input,.contact-form-grid select,.contact-form-grid textarea { width: 100%; color: var(--navy); background: rgba(255,255,255,.9); border: 1px solid #d9dfd5; border-radius: 11px; outline: 0; font-size: 11px; font-weight: 600; transition: border-color .15s ease,box-shadow .15s ease; }
.contact-form-grid input,.contact-form-grid select { min-height: 46px; padding: 0 12px; }
.contact-form-grid textarea { min-height: 142px; padding: 12px; resize: vertical; line-height: 1.55; }
.contact-form-grid input:focus,.contact-form-grid select:focus,.contact-form-grid textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(58,169,154,.12); }
.contact-form-grid label > small { color: #98a39d; font-size: 10.3px; text-align: right; }
.contact-form-grid label > small b { color: var(--teal); }
.contact-honeypot { width: 1px !important; height: 1px !important; position: fixed !important; left: -10000px !important; overflow: hidden !important; }
.contact-consent { margin-top: 15px; display: flex; align-items: flex-start; gap: 9px; color: #77867f; font-size: 11.7px; line-height: 1.5; }
.contact-consent input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--teal); }
.contact-submit-row { min-height: 55px; margin-top: 18px; display: flex; align-items: center; gap: 15px; }
.contact-submit { min-width: 180px; color: #fff; background: linear-gradient(135deg,var(--coral),#ef9a68); box-shadow: 0 5px 0 #bf594a; }
.contact-submit .ui-icon { transform: rotate(10deg); }
.contact-submit:disabled { opacity: .62; cursor: wait; transform: none; }
.contact-submit-row p { margin: 0; color: #77867f; font-size: 12.4px; line-height: 1.4; }
.contact-submit-row p.success { color: #247a68; font-weight: 800; }
.contact-submit-row p.error { color: var(--danger); font-weight: 800; }
.landing-footer { min-height: 87px; padding: 20px 4px 0; display: grid; grid-template-columns: auto minmax(200px,1fr) auto; align-items: center; gap: 25px; position: relative; z-index: 2; color: #cce5e1; border-top: 1px solid rgba(220,255,247,.18); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-mark { width: 48px; height: 48px; display: grid; place-items: center; color: var(--navy); background: linear-gradient(#ffe49a 0 48%,#67caba 49% 72%,#258984 73%); border: 2px solid rgba(255,255,255,.4); border-radius: 15px 50% 50% 50%; }
.footer-mark .ui-icon { width: 34px; height: 34px; }
.footer-mark-image { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.footer-mark-image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.25)); }

/* Tripocrates – dobrovoľný asistent pre nápady a problémy */
.travel-assistant { position: fixed; z-index: 90; right: clamp(14px, 2vw, 30px); bottom: 18px; width: min(378px, calc(100vw - 28px)); color: var(--navy); font-family: var(--body); }
.travel-assistant.is-hidden { visibility: hidden; }
.travel-assistant-launch { min-height: 72px; padding: 7px 15px 7px 7px; display: flex; align-items: center; gap: 9px; position: relative; margin-left: auto; color: var(--navy); background: #fffdf7; border: 1px solid #d5e4d8; border-radius: 23px 23px 7px 23px; box-shadow: 0 14px 36px rgba(6,45,51,.23), 0 5px 0 rgba(10,72,75,.12); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.travel-assistant-launch:hover { box-shadow: 0 18px 42px rgba(6,45,51,.28), 0 5px 0 rgba(10,72,75,.12); transform: translateY(-3px); }
.travel-assistant-launch > img { width: 66px; height: 76px; margin-top: -23px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 7px rgba(5,44,50,.22)); }
.assistant-launch-copy { min-width: 106px; display: grid; gap: 3px; text-align: left; }
.assistant-launch-copy strong { color: #176d73; font-family: var(--display); font-size: 16px; letter-spacing: -.045em; }
.assistant-launch-copy small { color: #71827d; font-size: 10.3px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.assistant-wave { position: absolute; top: -13px; left: 41px; z-index: 2; font-size: 22px; transform-origin: bottom center; animation: assistant-wave 1s 1.15s ease-in-out 2; }
.travel-assistant-panel { max-height: 0; margin: 0 0 10px auto; overflow: hidden; opacity: 0; pointer-events: none; background: #fffdf7; border: 1px solid #d4e2d7; border-radius: 25px 25px 7px 25px; box-shadow: 0 22px 55px rgba(6,45,51,.28); transform: translateY(14px) scale(.97); transform-origin: right bottom; transition: max-height .34s ease, margin .34s ease, opacity .22s ease, transform .34s ease; }
.travel-assistant.open .travel-assistant-panel { max-height: 610px; padding: 17px; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.travel-assistant.open .travel-assistant-launch { opacity: 0; pointer-events: none; transform: scale(.82); }
.travel-assistant-panel header { display: grid; grid-template-columns: 53px 1fr auto; align-items: center; gap: 10px; }
.travel-assistant-panel header > img { width: 53px; height: 59px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 4px rgba(4,41,46,.17)); }
.travel-assistant-panel header span,.travel-assistant-panel header strong { display: block; }
.travel-assistant-panel header span { color: var(--coral); font-size: 9.2px; font-weight: 900; letter-spacing: .13em; }
.travel-assistant-panel header strong { margin-top: 3px; font-family: var(--display); font-size: 17px; line-height: 1.04; letter-spacing: -.045em; }
.assistant-close { width: 31px; height: 31px; display: grid; place-items: center; align-self: start; color: #6d817a; background: #eef3ed; border: 0; border-radius: 50%; font-size: 20px; cursor: pointer; }
.travel-assistant-panel > p { margin: 11px 0; color: #647871; font-size: 11px; line-height: 1.5; }
.assistant-topic { display: flex; gap: 5px; margin-bottom: 9px; }
.assistant-topic button { padding: 7px 9px; color: #71827d; background: #edf3ed; border: 1px solid transparent; border-radius: 9px; font-size: 10.3px; font-weight: 800; cursor: pointer; }
.assistant-topic button.active { color: #fff; background: #27877e; box-shadow: 0 3px 0 #17655e; }
.travel-assistant-panel form { display: grid; gap: 8px; }
.travel-assistant-panel input:not([type="checkbox"]),.travel-assistant-panel textarea { width: 100%; padding: 10px 11px; color: var(--navy); background: #fff; border: 1px solid #d8e3d9; border-radius: 10px; outline: 0; font-size: 11px; }
.travel-assistant-panel textarea { min-height: 83px; resize: vertical; line-height: 1.45; }
.travel-assistant-panel input:focus,.travel-assistant-panel textarea:focus { border-color: #37a99d; box-shadow: 0 0 0 3px rgba(55,169,157,.14); }
.assistant-honeypot { width: 1px; height: 1px; position: fixed; left: -9999px; overflow: hidden; }
.assistant-consent { display: flex; align-items: flex-start; gap: 7px; color: #73857f; font-size: 9.9px; line-height: 1.4; }
.assistant-consent input { width: 14px; height: 14px; margin: 0; flex: 0 0 14px; accent-color: #27877e; }
.assistant-send { min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #fff; background: linear-gradient(135deg,#f07863,#ed9d68); border: 0; border-radius: 11px; box-shadow: 0 4px 0 #bf594a; font-size: 11px; font-weight: 800; cursor: pointer; }
.assistant-send:disabled { opacity: .65; cursor: wait; }
.assistant-send b { font-size: 16px; line-height: 1; }
.assistant-status { min-height: 15px; margin: 0; color: #687c74; font-size: 10.9px; font-weight: 700; text-align: center; }
.assistant-status.error { color: #b45143; }
.assistant-status.success { color: #1e7665; }
.assistant-security { margin-top: 10px; display: block; color: #94a39d; font-size: 9.2px; line-height: 1.35; text-align: center; }
.travel-assistant-restore { display: none; width: 63px; height: 63px; align-items: center; justify-content: center; position: relative; margin-left: auto; padding: 0; color: #fff; background: #176d73; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; box-shadow: 0 11px 27px rgba(6,45,51,.27); cursor: pointer; }
.travel-assistant-restore img { width: 51px; height: 58px; position: absolute; bottom: 0; object-fit: contain; object-position: center bottom; }
.travel-assistant-restore span { position: absolute; right: -12px; bottom: -7px; padding: 3px 6px; color: var(--navy); background: #fffdf7; border-radius: 8px; font-size: 9.2px; font-weight: 900; }
.travel-assistant.dismissed .travel-assistant-launch,.travel-assistant.dismissed .travel-assistant-panel { display: none; }
.travel-assistant.dismissed .travel-assistant-restore { display: flex; }
@keyframes assistant-wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } 75% { transform: rotate(-10deg); } }
@media (max-width: 620px) {
  .travel-assistant { right: 10px; bottom: 10px; width: min(355px, calc(100vw - 20px)); }
  .travel-assistant-launch { min-height: 62px; padding-right: 12px; border-radius: 20px 20px 6px 20px; }
  .travel-assistant-launch > img { width: 57px; height: 67px; margin-top: -20px; }
  .assistant-launch-copy { min-width: 91px; }
  .travel-assistant.open .travel-assistant-panel { max-height: min(610px, calc(100vh - 28px)); overflow-y: auto; }
  .travel-assistant-panel { border-radius: 21px 21px 6px 21px; }
}
.footer-brand strong,.footer-brand small { display: block; }
.footer-brand strong { color: #fff; font-family: var(--display); font-size: 17px; letter-spacing: -.045em; }
.footer-brand strong em { color: var(--sun); font-style: normal; }
.footer-brand small { margin-top: 3px; color: #9fc9c2; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.landing-footer > p { max-width: 510px; justify-self: center; margin: 0; font-size: 12.4px; line-height: 1.55; text-align: center; }
.landing-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.landing-footer a { padding: 8px 10px; color: #e5f5f2; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; font-size: 11px; font-weight: 800; text-decoration: none; }
.landing-footer a:hover { color: var(--navy); background: var(--sun); }

/* Onboarding */
.onboarding { min-height: calc(100vh - 125px); display: grid; place-items: center; }
.wizard-shell { width: min(1240px, 100%); min-height: 700px; display: grid; grid-template-columns: 360px minmax(0, 1fr); overflow: visible; background: var(--paper); border: 1px solid #d6dfd4; border-radius: 30px 8px 30px 30px; box-shadow: 0 25px 70px rgba(63,83,69,.14); }
.wizard-aside { padding: 54px 42px; overflow: hidden; position: relative; color: #fff; background: linear-gradient(155deg, var(--navy), #266d71); border-radius: 29px 0 0 29px; }
.wizard-aside:before { content: ""; width: 330px; height: 330px; position: absolute; right: -170px; top: -145px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 56px rgba(255,255,255,.018); }
.wizard-aside .eyebrow { color: var(--sun); }
.wizard-aside h1 { max-width: 280px; margin: 15px 0; font-family: var(--display); font-size: 43px; line-height: .96; letter-spacing: -.07em; }
.wizard-aside > p { max-width: 280px; color: #bdd5d3; font-size: 11px; line-height: 1.65; }
.wizard-route-art { height: 190px; margin-top: 45px; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; }
.wizard-route-art span, .wizard-route-art b { width: 62px; height: 62px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 62px; position: relative; z-index: 2; color: var(--navy); background: var(--sun); border: 6px solid rgba(255,255,255,.2); border-radius: 50%; font-family: var(--display); font-size: 13px; line-height: 1; white-space: nowrap; }
.wizard-route-art b { color: #fff; background: var(--coral); font-size: 24px; }
.wizard-route-art i { width: auto; min-width: 12px; max-width: 48px; flex: 1 1 48px; border-top: 2px dashed rgba(255,255,255,.35); }
.local-note { padding: 14px; display: flex; align-items: flex-start; gap: 10px; position: absolute; right: 30px; bottom: 34px; left: 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }
.local-note > span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; color: var(--navy); background: #83d5a7; border-radius: 50%; font-weight: 800; }
.local-note strong, .local-note small { display: block; }
.local-note strong { font-size: 11.5px; }
.local-note small { margin-top: 3px; color: #b9d1ce; font-size: 11px; line-height: 1.4; }
.wizard-main { min-width: 0; padding: 38px 46px 30px; display: flex; flex-direction: column; background: var(--paper); border-radius: 0 8px 29px 0; }
.wizard-progress { padding: 0 0 28px; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-bottom: 1px dashed #d8ded4; }
.wizard-progress li { display: flex; align-items: center; gap: 8px; position: relative; color: #a0aaa2; }
.wizard-progress li:not(:last-child):after { content: ""; height: 2px; position: absolute; right: 8px; left: 45px; background: #dbe1d9; }
.wizard-progress li.done:not(:last-child):after { background: var(--teal); }
.wizard-progress span { width: 31px; height: 31px; display: grid; place-items: center; position: relative; z-index: 2; color: #91a098; background: #edf0eb; border-radius: 50%; font-size: 11.5px; font-weight: 800; }
.wizard-progress b { position: relative; z-index: 2; padding-right: 7px; background: var(--paper); font-size: 12.4px; }
.wizard-progress .active span, .wizard-progress .done span { color: #fff; background: var(--coral); }
.wizard-progress .active { color: var(--navy); }
.wizard-progress .done span { background: var(--teal); }
.wizard-message { min-height: 30px; padding-top: 11px; color: var(--danger); font-size: 11.5px; font-weight: 700; }
.wizard-step { display: none; padding: 16px 0 28px; }
.wizard-step.active { display: block; animation: stepIn .24s ease; }
.wizard-step h2 { margin: 8px 0 6px; color: var(--navy); font-family: var(--display); font-size: 31px; line-height: 1.05; letter-spacing: -.06em; }
.step-intro { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.wizard-footer { padding-top: 18px; margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px dashed #d8ded4; }
#wizardBackBtn { margin-right: auto; }

.date-range-grid { margin-top: 25px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.field-card { padding: 14px 16px; display: grid; gap: 7px; background: #f8f8ef; border: 1px solid #dce3d8; border-radius: 15px; }
.field-card > span { color: var(--coral); font-size: 11.5px; font-weight: 800; letter-spacing: .15em; }
.field-card input { width: 100%; padding: 0; color: var(--navy); background: transparent; border: 0; outline: 0; font-size: 17px; font-weight: 700; }
.field-card:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(58,169,154,.1); }
.date-arrow { color: var(--coral); font-size: 21px; }
.days-result { margin-top: 10px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.days-result strong { color: var(--navy); font-size: 14px; }
.transport-fieldset, .type-fieldset { padding: 0; margin: 24px 0 0; border: 0; }
.transport-fieldset legend, .type-fieldset legend { margin-bottom: 12px; color: #687872; font-size: 11.5px; font-weight: 800; }
.transport-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.choice-tile { min-height: 119px; padding: 14px 9px; display: grid; place-items: center; align-content: center; gap: 7px; color: #87948d; background: #fafaf4; border: 1px solid #dce3d9; border-radius: 16px; }
.choice-tile > span { width: 47px; height: 47px; display: grid; place-items: center; color: var(--navy-2); background: #edf3ed; border-radius: 50% 50% 50% 13px; transition: color .15s ease, background .15s ease, transform .15s ease; }
.choice-tile > span .ui-icon { width: 30px; height: 30px; stroke-width: 1.65; }
.choice-tile strong { color: var(--navy); font-size: 12.5px; }
.choice-tile small { font-size: 12.4px; line-height: 1.25; text-align: center; }
.choice-tile:hover, .choice-tile.selected { color: var(--coral); background: var(--coral-light); border-color: #e4a294; box-shadow: inset 0 0 0 1px #e4a294; transform: translateY(-2px); }
.choice-tile:hover > span, .choice-tile.selected > span { color: #fff; background: var(--coral); transform: rotate(-3deg) scale(1.04); }
.two-fields, .review-fields { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-field { min-width: 0; display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field > span, .form-field > label { color: #65756f; font-size: 11.5px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea, .email-auth input { width: 100%; padding: 14px 15px; color: var(--ink); background: #fffefa; border: 1px solid #d7dfd5; border-radius: 12px; outline: 0; font-size: 14px; }
.form-field textarea { resize: vertical; line-height: 1.45; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .email-auth input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(58,169,154,.1); }
.form-field small { color: #97a29c; font-size: 11.5px; line-height: 1.45; }

.autocomplete { min-width: 0; position: relative; }
.suggestion-panel { max-height: 330px; position: absolute; z-index: 80; top: calc(100% + 7px); right: 0; left: 0; overflow-y: auto; color: var(--ink); background: rgba(255,254,250,.98); border: 1px solid #cbd8cd; border-radius: 15px; box-shadow: 0 19px 45px rgba(23,63,72,.22), 4px 5px 0 rgba(171,190,170,.22); backdrop-filter: blur(12px); }
.suggestion-panel[hidden] { display: none; }
.suggestion-panel.drop-up { top: auto; bottom: calc(100% + 7px); }
.suggestion-option { width: 100%; min-height: 57px; padding: 9px 11px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #edf0e9; text-align: left; }
.suggestion-option:hover, .suggestion-option.active { background: var(--teal-light); }
.suggestion-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--teal); background: #eff7f2; border-radius: 50% 50% 50% 10px; }
.suggestion-icon .ui-icon { width: 23px; height: 23px; }
.suggestion-copy { min-width: 0; }
.suggestion-copy strong, .suggestion-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-copy strong { color: var(--navy); font-size: 13px; }
.suggestion-copy small { margin-top: 3px; color: #7f8e88; font-size: 11.5px; }
.suggestion-source { padding: 4px 6px; color: #6f7e77; background: #edf1eb; border-radius: 20px; font-size: 11px; font-weight: 800; }
.suggestion-source.source-wikidata { color: #6f598b; background: var(--lilac-light); }
.suggestion-source.source-photon { color: #287565; background: var(--teal-light); }
.suggestion-state { padding: 20px 14px; color: #7d8a84; font-size: 11px; line-height: 1.45; text-align: center; }
.suggestion-credit { padding: 7px 11px; color: #9aa59f; background: #f4f6ef; font-size: 11px; text-align: right; }
.item-modal .suggestion-panel { max-height: 230px; }

.allocation-meter { padding: 15px 17px; margin-top: 22px; background: #f7f8ef; border: 1px solid #dce3d8; border-radius: 15px; }
.allocation-meter > div:first-child { display: flex; justify-content: space-between; color: #7a8983; font-size: 11px; }
.allocation-meter strong { color: var(--navy); }
.allocation-track { height: 7px; overflow: hidden; margin: 9px 0 7px; background: #e2e7de; border-radius: 20px; }
.allocation-track span { height: 100%; width: 0; display: block; background: linear-gradient(90deg, var(--coral), var(--sun)); border-radius: inherit; transition: width .25s ease; }
.allocation-meter small { color: #87938d; font-size: 11.5px; }
.allocation-meter.complete { background: var(--teal-light); border-color: #b9ded3; }
.allocation-meter.over { background: var(--coral-light); border-color: #e7afa3; }
.destination-rows { margin-top: 14px; display: grid; gap: 9px; }
.destination-row { padding: 14px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 35px; align-items: center; gap: 11px; background: #fffefa; border: 1px solid #dce3d9; border-radius: 15px; }
.destination-index { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50%; font-size: 11px; font-weight: 800; }
.destination-row:nth-child(even) .destination-index { background: var(--teal); }
.destination-input { width: 100%; padding: 12px 13px; color: var(--navy); background: #f7f8f1; border: 1px solid transparent; border-radius: 10px; outline: 0; font-size: 14px; font-weight: 700; }
.destination-input:focus { border-color: var(--teal); }
.destination-days { display: flex; align-items: center; gap: 6px; }
.destination-days > span { color: #85928c; font-size: 11.5px; font-weight: 700; }
.destination-days input { width: 58px; height: 40px; padding: 0; color: var(--navy); background: #f7f8f1; border: 1px solid #dce3d9; border-radius: 9px; text-align: center; font-size: 14px; font-weight: 800; line-height: 40px; appearance: textfield; -moz-appearance: textfield; }
.destination-days input::-webkit-inner-spin-button, .destination-days input::-webkit-outer-spin-button, .child-age-input::-webkit-inner-spin-button, .child-age-input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }
.mini-step { width: 34px; height: 34px; display: grid; place-items: center; color: var(--navy); background: #fff; border: 1px solid #d7e0d6; border-radius: 9px; font-size: 16px; font-weight: 800; }
.mini-step:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
.remove-destination { width: 35px; height: 35px; color: #9aa49e; background: #eef1eb; border: 0; border-radius: 50%; font-size: 18px; }
.remove-destination:hover { color: #fff; background: var(--coral); }
.add-destination { width: 100%; padding: 13px; margin-top: 10px; color: var(--teal); background: transparent; border: 1px dashed #afd2c8; border-radius: 11px; font-size: 11.5px; font-weight: 800; }

.people-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.counter-card { min-height: 116px; padding: 17px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; background: #fffefa; border: 1px solid #dce3d9; border-radius: 17px; }
.counter-card.rooms { grid-column: 1 / -1; }
.counter-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--coral); background: var(--coral-light); border-radius: 50% 50% 50% 10px; font-size: 20px; }
.counter-icon .ui-icon { width: 25px; height: 25px; }
.counter-icon.small { font-size: 14px; }
.counter-card.rooms .counter-icon { color: var(--teal); background: var(--teal-light); }
.counter-card strong, .counter-card small { display: block; }
.counter-card strong { color: var(--navy); font-family: var(--display); font-size: 14px; }
.counter-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 31px; height: 31px; color: var(--navy); background: #edf1eb; border: 0; border-radius: 50%; font-size: 15px; }
.stepper button:hover { color: #fff; background: var(--teal); }
.stepper output { min-width: 24px; color: var(--navy); font-family: var(--display); font-size: 16px; font-weight: 800; text-align: center; }
.people-summary { padding: 16px 18px; margin-top: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; color: #fff; background: var(--navy); border-radius: 15px 15px 15px 5px; }
.people-summary > span { font-size: 12.4px; }
.people-summary strong { font-family: var(--display); font-size: 17px; }
.people-summary small { grid-column: 1 / -1; margin-top: 3px; color: #bcd1cf; font-size: 11px; }
.children-details { padding: 17px; margin-top: 13px; background: #f8f6eb; border: 1px solid #e0d9ba; border-radius: 17px 17px 17px 5px; }
.children-details > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.children-details > header span, .child-detail-field > span { display: block; color: #a2762d; font-size: 10.3px; font-weight: 800; letter-spacing: .12em; }
.children-details > header strong { display: block; margin-top: 4px; color: var(--navy); font-family: var(--display); font-size: 15px; }
.children-details > header > small { max-width: 230px; color: #8e8b78; font-size: 11px; line-height: 1.4; text-align: right; }
.children-details-list { margin-top: 13px; display: grid; gap: 8px; }
.child-detail-row { padding: 10px; display: grid; grid-template-columns: 36px minmax(120px,1fr) minmax(135px,.8fr) 100px; align-items: center; gap: 10px; background: #fffefa; border: 1px solid #e2dfcd; border-radius: 12px; }
.child-detail-number { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 9px; font-size: 11.5px; font-weight: 800; }
.child-detail-row:nth-child(even) .child-detail-number { background: var(--teal); }
.child-detail-copy strong, .child-detail-copy small { display: block; }
.child-detail-copy strong { color: var(--navy); font-size: 11px; }
.child-detail-copy small { margin-top: 3px; color: var(--muted); font-size: 10.3px; }
.child-detail-field { min-width: 0; }
.child-detail-field select, .child-detail-field input { width: 100%; height: 38px; padding: 0 10px; margin-top: 4px; color: var(--navy); background: #f5f6ee; border: 1px solid #d8dfd4; border-radius: 9px; outline: 0; font-size: 12.1px; font-weight: 700; }
.child-detail-field input { text-align: center; appearance: textfield; -moz-appearance: textfield; }
.child-detail-field select:focus, .child-detail-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.1); }
.wizard-recap { padding: 18px; margin-top: 20px; display: grid; gap: 9px; color: #fff; background: var(--navy); border-radius: 16px 16px 6px 16px; }
.recap-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: 12.4px; }
.recap-row:last-child { padding-bottom: 0; border: 0; }
.recap-row span { color: #abc6c3; }
.recap-row strong { text-align: right; }

/* Planner top */
.trip-hero { min-height: 290px; padding: 42px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; position: relative; color: #fff; background: linear-gradient(125deg, var(--navy), #287578); border-radius: 28px 28px 75px 28px; box-shadow: 0 18px 50px rgba(23,63,72,.15); }
.trip-hero:after { content: "☀"; position: absolute; right: 34%; top: -80px; color: rgba(255,255,255,.08); font-size: 290px; transform: rotate(15deg); }
.trip-hero-copy { max-width: 850px; position: relative; z-index: 2; }
.trip-hero .eyebrow { color: var(--sun); }
.trip-hero h1 { margin: 10px 0 8px; font-family: var(--display); font-size: clamp(44px, 5.4vw, 77px); line-height: .92; letter-spacing: -.075em; }
.planner-title-line { display: flex; align-items: center; gap: 13px; }
.trip-title-edit { min-height: 34px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #e3f2ef; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 100px; font-size: 11.7px; font-weight: 800; }
.trip-title-edit span { color: var(--sun); font-size: 14px; line-height: 1; }
.trip-title-edit:hover { color: var(--navy); background: var(--sun); border-color: var(--sun); }
.trip-title-edit:hover span { color: var(--navy); }
.trip-title-editor { width: min(650px,100%); padding: 12px; margin: 11px 0 13px; color: var(--navy); background: rgba(255,253,247,.96); border: 1px solid rgba(255,255,255,.75); border-radius: 13px 13px 13px 4px; box-shadow: 7px 8px 0 rgba(8,44,51,.13); }
.trip-title-editor > label { display: block; margin-bottom: 6px; color: #637873; font-size: 10.3px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trip-title-editor > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
.trip-title-editor input { min-width: 0; height: 40px; padding: 0 11px; color: var(--navy); background: #fff; border: 1px solid #d6dfd5; border-radius: 9px; outline: 0; font-size: 12px; font-weight: 800; }
.trip-title-editor input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.12); }
.trip-title-editor button { padding: 0 12px; color: #fff; background: var(--teal); border: 0; border-radius: 9px; font-size: 12.4px; font-weight: 800; }
.trip-title-editor button:last-of-type { color: #71827a; background: #edf1ea; }
.trip-title-editor p { min-height: 0; margin: 5px 0 0; color: var(--danger); font-size: 11px; }
#plannerDateRange { margin: 0; color: #c7dcda; font-size: 11px; }
.trip-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.trip-meta span { padding: 7px 10px; display: inline-flex; align-items: center; gap: 5px; color: #e4efed; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; font-size: 12.4px; font-weight: 700; }
.trip-meta .ui-icon { width: 15px; height: 15px; }
.trip-route-card { width: 330px; min-height: 160px; padding: 21px; display: grid; align-content: center; gap: 7px; position: relative; z-index: 2; color: var(--navy); background: var(--sun-light); border-radius: 8px 24px 8px 24px; box-shadow: 9px 10px 0 rgba(7,47,53,.24); transform: rotate(2deg); }
.trip-route-card:before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 11px; border-left: 3px dotted #e6d4a7; }
.trip-route-card > span { margin-left: 7px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.trip-route-card > strong { margin-left: 7px; font-family: var(--display); font-size: 23px; letter-spacing: -.05em; }
.trip-route-card > div { margin-left: 7px; color: #6f7c79; font-size: 12.4px; }
.trip-route-card > small { margin-left: 7px; color: #83908b; font-size: 11px; }
.planner-toolbar { padding: 48px 3px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.planner-toolbar h2, .timeline-heading h2 { margin: 7px 0 0; color: var(--navy); font-family: var(--display); font-size: 31px; letter-spacing: -.065em; }
.toolbar-actions { display: flex; gap: 8px; }
.budget-strip { padding: 16px; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(210px, 1.4fr); gap: 9px; color: #fff; background: var(--navy); border-radius: 18px 6px 18px 18px; }
.budget-strip > div { min-height: 67px; padding: 10px 12px; display: grid; align-content: center; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.budget-strip span { color: #afcac7; font-size: 9.7px; font-weight: 800; letter-spacing: .12em; }
.budget-strip strong { font-family: var(--display); font-size: 17px; }
.budget-strip > div:nth-child(2) strong { color: #8fe0af; }
.budget-strip > div:nth-child(3) strong { color: #ffd384; }
.budget-progress { height: 5px; overflow: hidden; margin-top: 4px; background: rgba(255,255,255,.1); border-radius: 10px; }
.budget-progress i { height: 100%; width: 0; display: block; background: linear-gradient(90deg, var(--teal), var(--sun), var(--coral)); border-radius: inherit; transition: width .25s ease; }

/* Main stays and flights board */
.journey-board { margin-top: 20px; overflow: hidden; position: relative; background: var(--paper); border: 1px solid #d3ddd3; border-radius: 24px 8px 24px 24px; box-shadow: 7px 9px 0 rgba(171,190,170,.18); }
.journey-board:before { content: ""; width: 260px; height: 260px; position: absolute; right: -115px; top: -150px; pointer-events: none; border: 1px solid rgba(58,169,154,.17); border-radius: 50%; box-shadow: 0 0 0 25px rgba(58,169,154,.035), 0 0 0 50px rgba(237,190,90,.025); }
.journey-board-header { min-height: 145px; padding: 27px 29px 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; z-index: 1; background: linear-gradient(125deg, #fffdf7 0%, #f7fbf2 60%, #e9f7f2 100%); border-bottom: 1px dashed #cfdacf; }
.journey-board-title { min-width: 0; display: flex; align-items: flex-start; gap: 17px; }
.journey-board-mark { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 54px; color: #fff; background: var(--coral); border-radius: 50% 50% 50% 14px; box-shadow: 5px 6px 0 #f4d2c8; transform: rotate(-3deg); }
.journey-board-mark .ui-icon { width: 31px; height: 31px; stroke-width: 2; }
.journey-board-title h2 { margin: 6px 0 5px; color: var(--navy); font-family: var(--display); font-size: 25px; line-height: 1.05; letter-spacing: -.055em; }
.journey-board-title p { max-width: 790px; margin: 0; color: #74847d; font-size: 11.5px; line-height: 1.55; }
.journey-overview { min-width: 445px; padding: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; color: #fff; background: var(--navy); border-radius: 16px 5px 16px 16px; box-shadow: 5px 6px 0 rgba(23,63,72,.14); }
.journey-overview > div { min-height: 66px; padding: 10px; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.overview-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; color: var(--navy); background: var(--sun); border-radius: 50% 50% 50% 9px; }
.overview-icon.place { color: #fff; background: var(--coral); }
.overview-icon.attraction { color: #fff; background: var(--pink); }
.overview-icon.flight { color: #fff; background: var(--blue); }
.overview-icon .ui-icon { width: 20px; height: 20px; }
.journey-overview small, .journey-overview strong { display: block; }
.journey-overview small { color: #a9c5c2; font-size: 9.7px; font-weight: 800; letter-spacing: .13em; }
.journey-overview strong { max-width: 105px; margin-top: 3px; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.journey-columns { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 15px; }
.journey-lane { min-width: 0; padding: 17px; position: relative; background: #f8f8ef; border: 1px solid #dce3d8; border-radius: 18px 18px 18px 6px; }
.journey-lane.place-lane { background: #fff8ee; border-color: #eadbc8; }
.journey-lane.attraction-lane { background: #fbf4f7; border-color: #ead9df; border-radius: 18px 18px 6px 18px; }
.journey-lane.flight-lane { background: #f2f8f8; border-color: #d2e2e1; border-radius: 18px 18px 6px 18px; }
.journey-lane.collapsed { padding-top: 13px; padding-bottom: 13px; box-shadow: inset 0 -3px 0 rgba(58,169,154,.06); }
.journey-lane-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lane-heading { min-width: 0; display: flex; align-items: center; gap: 11px; }
.lane-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 43px; color: var(--teal); background: var(--teal-light); border-radius: 50% 50% 50% 11px; }
.place-lane .lane-icon { color: #b7684d; background: var(--coral-light); }
.attraction-lane .lane-icon { color: #aa5668; background: var(--pink-light); }
.flight-lane .lane-icon { color: var(--blue); background: var(--blue-light); }
.lane-icon .ui-icon { width: 25px; height: 25px; stroke-width: 2; }
.lane-heading > div > span { color: var(--coral); font-size: 10.3px; font-weight: 800; letter-spacing: .15em; }
.flight-lane .lane-heading > div > span { color: var(--blue); }
.place-lane .lane-heading > div > span { color: #b7684d; }
.attraction-lane .lane-heading > div > span { color: #aa5668; }
.lane-heading h3 { margin: 2px 0 0; color: var(--navy); font-family: var(--display); font-size: 18px; line-height: 1; letter-spacing: -.045em; }
.lane-heading p { margin: 4px 0 0; color: #89958f; font-size: 10.9px; }
.journey-lane-actions { display: flex; align-items: center; gap: 7px; }
.journey-collapse-button { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; flex: 0 0 38px; color: #6f8078; background: rgba(255,255,255,.72); border: 1px solid #d2ddd2; border-radius: 50%; line-height: 0; transition: color .15s ease, background .15s ease; }
.journey-collapse-button .ui-icon { width: 18px; height: 18px; display: block; margin: auto; stroke-width: 2.7; transform: rotate(0deg); transition: transform .18s ease; }
.flight-lane .journey-collapse-button { border-color: #c9dddf; }
.journey-collapse-button:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
.flight-lane .journey-collapse-button:hover { background: var(--blue); border-color: var(--blue); }
.journey-collapse-button[aria-expanded="true"] { color: #fff; background: var(--navy); border-color: var(--navy); }
.journey-collapse-button[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.journey-lane-body { animation: journeyLaneOpen .18s ease; }
.journey-lane.collapsed .journey-lane-body { display: none; }
.journey-add-button { width: 38px; height: 38px; flex: 0 0 38px; color: #fff; background: var(--coral); border: 0; border-radius: 50%; font-size: 22px; line-height: 1; box-shadow: 0 4px 0 #c75e4d; transition: transform .15s ease; }
.flight-lane .journey-add-button { background: var(--blue); box-shadow-color: #337f96; }
.place-lane .journey-add-button { background: var(--coral); box-shadow-color: #c75e4d; }
.attraction-lane .journey-add-button { background: var(--pink); box-shadow-color: #b96975; }
.journey-add-button:hover { transform: translateY(-2px) rotate(5deg); }
.journey-progress { height: 5px; margin: 14px 0; overflow: hidden; background: #e3e9df; border-radius: 30px; }
.journey-progress span { width: 0; height: 100%; display: block; background: linear-gradient(90deg, var(--coral), var(--sun), var(--teal)); border-radius: inherit; transition: width .28s ease; }
.flight-lane .journey-progress span { background: linear-gradient(90deg, var(--blue), var(--teal), var(--sun)); }
.journey-cards { min-height: 150px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px; }
.journey-card-wrap { min-width: 0; position: relative; }
.journey-card { width: 100%; min-width: 0; min-height: 154px; height: 100%; padding: 13px; display: flex; flex-direction: column; color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid #d9e2d7; border-radius: 14px 14px 14px 5px; text-align: left; box-shadow: 3px 4px 0 rgba(171,190,170,.16); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.flight-card { border-radius: 14px 14px 5px 14px; }
.journey-card:hover { border-color: #aec7b3; box-shadow: 5px 6px 0 rgba(160,185,164,.22); transform: translateY(-2px) rotate(-.2deg); }
.flight-card:hover { border-color: #a9cdd6; transform: translateY(-2px) rotate(.2deg); }
.place-card:hover { border-color: #d8a58f; }
.attraction-card:hover { border-color: #d5a0ae; transform: translateY(-2px) rotate(.2deg); }
.attraction-card .journey-card-title { display: flex; align-items: center; gap: 6px; }
.attraction-card .journey-card-title .ui-icon { width: 17px; height: 17px; color: var(--pink); }
.journey-card-wrap.copied .journey-card { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.14), 4px 5px 0 rgba(160,185,164,.2); }
.journey-card-wrap .journey-card-title, .journey-card-wrap .journey-card-subtitle { padding-right: 32px; }
.journey-copy-button { width: 27px; height: 27px; display: grid; place-items: center; position: absolute; z-index: 3; top: 45px; right: 10px; color: #60736b; background: #fff; border: 1px solid #cad8cc; border-radius: 8px; box-shadow: 2px 3px 0 rgba(171,190,170,.18); transition: color .15s ease, background .15s ease, transform .15s ease; }
.journey-copy-button .ui-icon { width: 15px; height: 15px; }
.journey-copy-button:hover, .journey-copy-button.active { color: #fff; background: var(--teal); border-color: var(--teal); transform: translateY(-1px); }
.journey-card.state-idea { background: rgba(255,255,255,.62); border-style: dashed; }
.journey-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journey-card-number { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50%; font-size: 11px; font-weight: 800; }
.flight-card .journey-card-number { background: var(--blue); }
.journey-state { max-width: 125px; padding: 4px 7px; overflow: hidden; color: #79857f; background: #edf0eb; border-radius: 100px; font-size: 10.3px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.journey-state.selected { color: #277865; background: var(--teal-light); }
.journey-state.reserved { color: #9c6a19; background: var(--sun-light); }
.journey-state.paid { color: #277865; background: #d7f1e5; box-shadow: inset 0 0 0 1px #aad8c4; }
.journey-card-title { margin-top: 11px; overflow: hidden; color: var(--navy); font-family: var(--display); font-size: 14px; line-height: 1.18; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.journey-card-subtitle { min-height: 14px; margin-top: 3px; overflow: hidden; color: #8b9891; font-size: 11.7px; text-overflow: ellipsis; white-space: nowrap; }
.journey-card-subtitle.placeholder { color: var(--coral); font-weight: 700; }
.journey-card-meta { margin-top: 10px; display: grid; gap: 5px; color: #718078; font-size: 11.7px; }
.journey-card-meta span { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-card-meta .ui-icon { width: 13px; height: 13px; color: var(--teal); }
.flight-card .journey-card-meta .ui-icon { color: var(--blue); }
.journey-card-footer { padding-top: 9px; margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-top: 1px dashed #dce3d9; }
.journey-card-footer span { max-width: 58%; overflow: hidden; color: #7c857f; font-family: "DM Sans", sans-serif; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.journey-card-footer strong { color: var(--navy); font-size: 10.9px; white-space: nowrap; }
.flight-route { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 7px; }
.flight-route strong { overflow: hidden; color: var(--navy); font-family: var(--display); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.flight-route strong:last-child { text-align: right; }
.flight-route span { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; }
.flight-route .ui-icon { width: 17px; height: 17px; }
.journey-empty { min-height: 150px; grid-column: 1 / -1; padding: 24px; display: grid; place-items: center; align-content: center; gap: 6px; color: #97a39d; background: rgba(255,255,255,.45); border: 1px dashed #cbd7ca; border-radius: 13px; text-align: center; }
.journey-empty .ui-icon { width: 31px; height: 31px; color: #a4b9aa; }
.journey-empty strong { color: var(--navy); font-family: var(--display); font-size: 13px; }
.journey-empty span { max-width: 310px; font-size: 12.4px; line-height: 1.45; }
.journey-seed-button { width: 100%; min-height: 39px; margin-top: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--navy); background: var(--sun-light); border: 1px dashed #ddc274; border-radius: 10px; font-size: 10.9px; font-weight: 800; }
.journey-seed-button .ui-icon { width: 16px; height: 16px; color: #ad7b1e; }
.journey-lane-note { min-height: 39px; padding: 9px 10px; margin-top: 9px; display: flex; align-items: center; gap: 8px; color: #70827c; background: var(--blue-light); border: 1px dashed #b9dbe2; border-radius: 10px; font-size: 11.7px; line-height: 1.35; }
.journey-lane-note .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--blue); }

/* Timeline, inspired by V4 */
.planner-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 25px; }
.timeline-page { min-width: 0; padding-top: 42px; }
.timeline-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.timeline-heading p { max-width: 680px; margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.timeline-tools { display: flex; gap: 7px; }
.round-button { width: 34px; height: 34px; color: #82918a; background: transparent; border: 1px solid #c4d0c5; border-radius: 50%; }
.round-button:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
.timeline-filter { padding: 16px 0 11px; display: flex; gap: 6px; }
.timeline-filter button { padding: 8px 12px; color: #819089; background: #edf1e9; border: 1px solid #d9e0d6; border-radius: 100px; font-size: 12.1px; font-weight: 700; }
.timeline-filter button.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.timeline-start, .timeline-end { width: max-content; padding: 9px 16px; margin: 8px auto; position: relative; z-index: 3; color: var(--navy); background: var(--sun-light); border: 1px solid #e4d29d; border-radius: 100px; font-size: 11.5px; font-weight: 800; letter-spacing: .11em; box-shadow: 3px 4px 0 rgba(161,147,106,.2); }
.timeline-start { display: flex; align-items: center; gap: 6px; }
.timeline-start .ui-icon { width: 15px; height: 15px; }
.timeline-end { color: #fff; background: var(--teal); border-color: #2e9185; box-shadow-color: rgba(46,145,133,.2); }
.timeline-scroll { max-height: 1260px; padding: 58px 30px 70px; position: relative; overflow-x: hidden; overflow-y: auto; background: rgba(255,253,247,.58); border: 1px solid #d4ded3; border-radius: 22px 7px 22px 7px; box-shadow: inset 0 0 0 7px rgba(255,255,255,.3); scroll-behavior: smooth; scrollbar-color: #b9c9bb transparent; }
.timeline-spine { width: 3px; height: 0; position: absolute; z-index: 1; top: 34px; bottom: auto; left: 50%; background: repeating-linear-gradient(180deg, #9ebba6 0 11px, transparent 11px 20px); transform: translateX(-50%); }
.timeline-spine:before, .timeline-spine:after { content: ""; width: 13px; height: 13px; position: absolute; left: 50%; background: var(--coral); border: 4px solid #f1f4eb; border-radius: 50%; transform: translateX(-50%); }
.timeline-spine:before { top: -2px; }
.timeline-spine:after { bottom: -2px; background: var(--teal); }
.days-grid { display: flex; flex-direction: column; gap: 27px; position: relative; z-index: 2; }
.day-entry { width: calc(50% - 52px); display: grid; gap: 6px; }
.day-entry.even { margin-left: calc(50% + 52px); }
.day-hotel-shelf { width: 100%; min-height: 48px; padding: 8px 11px; display: grid; grid-template-columns: 31px auto minmax(0, 1fr); align-items: center; gap: 8px; color: #277865; background: linear-gradient(110deg, #e6f5ef, #f5fbf5); border: 1px solid #bdded3; border-radius: 12px 12px 5px 12px; box-shadow: 3px 4px 0 rgba(58,169,154,.12); transition: opacity .16s ease, transform .16s ease; }
.day-entry.even .day-hotel-shelf { border-radius: 12px 12px 12px 5px; }
.day-hotel-shelf-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 9px; }
.day-hotel-shelf-icon .ui-icon { width: 19px; height: 19px; stroke-width: 2.1; }
.day-hotel-shelf-label { color: #579287; font-size: 9.7px; font-weight: 800; letter-spacing: .11em; }
.day-hotel-shelf-list { min-width: 0; display: grid; justify-items: end; gap: 3px; }
.day-hotel-shelf-list strong { max-width: 100%; overflow: hidden; color: var(--navy); font-size: 11.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.day-entry:has(.day-card.dragging) .day-hotel-shelf { opacity: .45; }
.day-card { width: 100%; min-height: 260px; position: relative; background: var(--paper); border: 1px solid #d4ddd2; border-radius: 15px 15px 15px 5px; box-shadow: 4px 5px 0 rgba(171,190,170,.26); transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.day-card.even { border-radius: 5px 15px 15px 15px; }
.day-card:before { box-sizing: border-box; content: attr(data-day-number); width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; position: absolute; top: 31px; right: -73px; z-index: 4; color: #fff; background: var(--coral); border: 5px solid #f1f4eb; border-radius: 50%; font-family: var(--body); font-size: 11.5px; font-weight: 800; line-height: 1; letter-spacing: 0; text-align: center; text-indent: 0; box-shadow: 0 0 0 1px #b7c7b9; }
.day-card.even:before { right: auto; left: -71px; background: var(--teal); }
.day-card:after { content: ""; width: 52px; position: absolute; top: 49px; right: -54px; border-top: 2px dashed #b5c8b8; }
.day-card.even:after { right: auto; left: -52px; }
.day-card:hover { transform: translateY(-2px) rotate(-.2deg); box-shadow: 6px 8px 0 rgba(153,181,159,.28); }
.day-card.even:hover { transform: translateY(-2px) rotate(.2deg); }
.day-card.drop-target { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-light); }
.day-card.dragging, .timeline-item.dragging { opacity: .45; }
.day-header { padding: 17px 17px 15px; position: relative; background: #f7faef; border-bottom: 1px dashed #d4ddd1; border-radius: inherit; }
.day-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.day-title { display: flex; align-items: baseline; flex: 0 0 auto; gap: 7px; }
.day-number { color: var(--navy); font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.08em; }
.day-label { color: #7f8b81; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 12.5px; }
.day-topline-actions { min-width: 0; margin-left: auto; display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.day-handle { width: 34px; height: 34px; flex: 0 0 34px; color: #a7b2a7; background: transparent; border: 0; border-radius: 50%; font-size: 21px; letter-spacing: -5px; cursor: grab; }
.day-handle:hover { color: var(--coral); background: var(--coral-light); }
.day-date { display: block; margin: 8px 0 11px; color: #5f6b62; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 12.5px; }
.day-destination { padding: 7px 9px; display: flex; align-items: center; gap: 7px; color: var(--navy); background: #fffefa; border: 1px solid #d9e2d6; border-radius: 8px; font-size: 14px; font-weight: 700; }
.day-destination i { width: 8px; height: 8px; flex: 0 0 8px; background: var(--coral); border-radius: 50%; }
.day-card.even .day-destination i { background: var(--teal); }
.day-destination select { min-width: 0; flex: 1; padding: 2px 0; color: var(--navy); background: transparent; border: 0; outline: 0; appearance: none; font-size: 13px; font-weight: 800; cursor: pointer; }
.day-destination .ui-icon { width: 15px; height: 15px; flex: 0 0 15px; color: #899991; stroke-width: 2.5; pointer-events: none; }
.palette-dot-blue { --dot-color: #4e9eb6; }
.palette-dot-green { --dot-color: #3aa99a; }
.palette-dot-orange { --dot-color: #e89a48; }
.palette-dot-red { --dot-color: #ee7864; }
.palette-dot-pink { --dot-color: #d887a0; }
.day-body { padding: 13px; }
.items-list { min-height: 92px; display: grid; gap: 7px; }
.timeline-item { --item-accent: #4e9eb6; --item-soft: #eef8fa; --item-shadow: rgba(78,158,182,.18); padding: 12px 12px 11px; position: relative; background: linear-gradient(135deg, var(--item-soft), rgba(255,255,255,.92) 72%); border: 1px solid var(--item-accent); border-left-width: 4px; border-radius: 10px; cursor: grab; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.timeline-item.item-palette-blue { --item-accent: #4e9eb6; --item-soft: #e9f5f8; --item-shadow: rgba(78,158,182,.2); }
.timeline-item.item-palette-green { --item-accent: #3aa99a; --item-soft: #e9f7f2; --item-shadow: rgba(58,169,154,.2); }
.timeline-item.item-palette-orange { --item-accent: #e89a48; --item-soft: #fff3e5; --item-shadow: rgba(232,154,72,.2); }
.timeline-item.item-palette-red { --item-accent: #ee7864; --item-soft: #fff0eb; --item-shadow: rgba(238,120,100,.2); }
.timeline-item.item-palette-pink { --item-accent: #d887a0; --item-soft: #faedf2; --item-shadow: rgba(216,135,160,.2); }
.timeline-item:hover { border-color: var(--item-accent); box-shadow: 3px 4px 0 var(--item-shadow); transform: translateY(-1px); }
.timeline-item.drop-before { box-shadow: 0 -3px 0 var(--coral); }
.timeline-item.drop-after { box-shadow: 0 3px 0 var(--coral); }
.item-link { width: 27px; height: 27px; display: grid; place-items: center; color: var(--navy); background: var(--blue-light); border-radius: 50%; text-decoration: none; font-size: 12px; font-weight: 800; }
.item-link:hover { color: #fff; background: var(--blue); }
.item-main { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.item-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--lilac); background: var(--lilac-light); border-radius: 50%; font-size: 20px; }
.item-icon .ui-icon { width: 27px; height: 27px; stroke-width: 2; }
.type-transport .item-icon { color: var(--blue); background: var(--blue-light); }
.type-hotel .item-icon { color: var(--teal); background: var(--teal-light); }
.type-swimming .item-icon { color: var(--blue); background: var(--blue-light); }
.type-sightseeing .item-icon { color: #a97725; background: var(--sun-light); }
.type-wellness .item-icon { color: var(--pink); background: var(--pink-light); }
.type-food .item-icon { color: #a97725; background: var(--sun-light); }
.type-note .item-icon { color: #7d8883; background: #ecefea; }
.item-copy { min-width: 0; }
.item-copy strong { display: block; overflow: hidden; color: var(--navy); font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.item-copy span { display: block; overflow: hidden; margin-top: 4px; color: #8c9890; font-size: 12.1px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.item-controls { display: flex; align-items: flex-start; justify-content: flex-end; gap: 5px; }
.item-color-control, .item-time-control { position: relative; z-index: 5; }
.item-color-toggle { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; background: rgba(255,255,255,.78); border: 1px solid rgba(32,51,58,.14); border-radius: 50%; transition: background .15s ease, transform .15s ease; }
.item-color-toggle > span, .item-color-option > span { width: 13px; height: 13px; display: block; background: var(--dot-color); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.item-color-toggle:hover, .item-color-toggle[aria-expanded="true"] { background: #fff; transform: scale(1.06); }
.item-color-popover { padding: 7px; display: flex; gap: 5px; position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; background: #fffefa; border: 1px solid #d8e0d6; border-radius: 12px 12px 5px 12px; box-shadow: 0 12px 30px rgba(23,63,72,.2); }
.item-color-popover[hidden] { display: none; }
.item-color-option { width: 29px; height: 29px; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: 50%; }
.item-color-option:hover, .item-color-option.active { background: #f0f3ed; border-color: #cad6cb; transform: scale(1.07); }
.timeline-item.color-open { z-index: 35; box-shadow: 4px 5px 0 var(--item-shadow); }
.item-time-button { min-width: 58px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #718179; background: #f2f4ef; border: 1px solid #d9e1d7; border-radius: 100px; font-size: 11.5px; font-weight: 700; white-space: nowrap; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
.item-time-button .ui-icon { width: 14px; height: 14px; stroke-width: 2.3; }
.item-time-button:hover, .item-time-button[aria-expanded="true"] { color: #fff; background: var(--coral); border-color: var(--coral); transform: translateY(-1px); }
.item-time-button.has-time { color: var(--navy); background: var(--sun-light); border-color: #e7d49c; }
.item-time-button.has-time:hover, .item-time-button.has-time[aria-expanded="true"] { color: #fff; background: var(--coral); border-color: var(--coral); }
.timeline-item.time-open { z-index: 30; border-color: #dfa08e; box-shadow: 4px 5px 0 rgba(226,119,95,.15); }
.quick-time-popover { width: 205px; padding: 11px; position: absolute; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; color: var(--ink); background: #fffefa; border: 1px solid #d7dfd4; border-radius: 13px 13px 5px 13px; box-shadow: 0 15px 36px rgba(23,63,72,.2); cursor: default; }
.quick-time-popover[hidden] { display: none; }
.quick-time-popover:before { content: ""; width: 9px; height: 9px; position: absolute; top: -6px; right: 20px; background: #fffefa; border-top: 1px solid #d7dfd4; border-left: 1px solid #d7dfd4; transform: rotate(45deg); }
.quick-time-popover label { min-width: 0; display: grid; gap: 5px; }
.quick-time-popover label > span { color: #7e8b84; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.quick-time-popover input { width: 100%; height: 38px; padding: 0 9px; color: var(--navy); background: #f5f7f1; border: 1px solid #d8e0d5; border-radius: 8px; outline: 0; font-size: 15px; font-weight: 800; color-scheme: light; }
.quick-time-popover input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.13); }
.quick-time-save { height: 38px; padding: 0 11px; color: #fff; background: var(--teal); border: 0; border-radius: 8px; font-size: 12.4px; font-weight: 800; }
.quick-time-save:hover { background: var(--navy); }
.item-footer { margin: 9px 0 0 54px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.status-badge { padding: 4px 7px; color: #7f8984; background: #eef0ec; border-radius: 100px; font-size: 12.4px; font-weight: 700; }
.status-reserved { color: #9c6a19; background: var(--sun-light); }
.status-paid { color: #277865; background: var(--teal-light); }
.item-cost { margin-left: auto; color: var(--navy); font-size: 11px; font-weight: 800; }
.comment-preview { width: 100%; margin: 3px 0 0; position: relative; color: #757b73; font-family: "DM Sans", sans-serif; font-size: 12.1px; line-height: 1.4; outline: 0; cursor: help; }
.comment-preview:before { content: "●"; margin-right: 5px; color: var(--coral); font-family: var(--body); font-size: 12.4px; }
.comment-tooltip { width: min(310px, calc(100vw - 90px)); padding: 13px 14px; position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; color: var(--ink); background: #fffefa; border: 1px solid #d7dfd4; border-radius: 13px 13px 13px 5px; box-shadow: 0 15px 38px rgba(23,63,72,.22); font-family: var(--body); font-size: 11px; font-weight: 500; line-height: 1.55; opacity: 0; visibility: hidden; pointer-events: auto; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
.comment-preview:hover .comment-tooltip, .comment-preview:focus .comment-tooltip, .comment-preview:focus-within .comment-tooltip { opacity: 1; visibility: visible; transform: none; }
.timeline-item:has(.comment-preview:hover), .timeline-item:has(.comment-preview:focus) { z-index: 32; }
.reference-chip { color: #75857d; font-size: 12.4px; }
.linked-chip { padding: 4px 7px; color: #2d7186; background: var(--blue-light); border-radius: 100px; font-size: 11.7px; font-weight: 700; }
.linked-timeline-item { border-left-color: var(--item-accent); }
.day-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.add-to-day { width: 100%; padding: 10px; margin-top: 10px; color: #9aa69c; background: transparent; border: 1px dashed #cbd7ca; border-radius: 8px; font-size: 12.1px; }
.add-to-day:hover { color: var(--coral); background: #fff8ef; border-color: #dda89b; }
.paste-stay-to-day { width: 39px; min-height: 39px; margin-top: 10px; display: grid; place-items: center; color: #fff; background: var(--teal); border: 0; border-radius: 9px; box-shadow: 0 4px 0 #287e72; animation: pasteReady 1.5s ease-in-out infinite; }
.paste-stay-to-day:hover { background: var(--coral); box-shadow-color: #c75e4d; transform: translateY(-1px); }
.paste-stay-to-day .ui-icon { width: 18px; height: 18px; }
.empty-items { min-height: 86px; display: grid; place-items: center; color: #8a938a; border: 1px dashed #d1dbcf; border-radius: 8px; font-family: "DM Sans", sans-serif; font-size: 11.5px; text-align: center; }

/* Sidebar */
.planner-sidebar { padding-top: 42px; display: grid; gap: 14px; position: sticky; top: 90px; }
.sidebar-card { padding: 21px; background: var(--paper); border: 1px solid #d7dfd5; border-radius: 18px 18px 18px 6px; box-shadow: 4px 5px 0 rgba(171,190,170,.2); }
.sidebar-card h3 { margin: 8px 0 0; color: var(--navy); font-family: var(--display); font-size: 19px; line-height: 1.05; letter-spacing: -.05em; }
.booking-card { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow-color: rgba(23,63,72,.18); }
.booking-card .chapter-label { color: var(--sun); }
.booking-card h3 { color: #fff; }
.booking-ring { width: 112px; height: 112px; display: grid; place-items: center; align-content: center; gap: 2px; margin: 20px auto; position: relative; background: conic-gradient(var(--teal) var(--booking-progress, 0%), rgba(255,255,255,.09) 0); border-radius: 50%; }
.booking-ring:before { content: ""; position: absolute; inset: 9px; background: var(--navy); border-radius: 50%; }
.booking-ring strong, .booking-ring span { position: relative; z-index: 2; }
.booking-ring strong { font-family: var(--display); font-size: 21px; }
.booking-ring span { color: #b5cecb; font-size: 11px; }
.booking-stats { margin: 0; }
.booking-stats div { padding: 8px 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); }
.booking-stats dt { color: #b7ccca; font-size: 11px; }
.booking-stats dd { margin: 0; color: #fff; font-size: 12.4px; font-weight: 800; }
.notes-card textarea { width: 100%; min-height: 100px; padding: 10px; margin-top: 14px; resize: vertical; color: var(--ink); background: #f8f8ef; border: 1px solid #dce3d9; border-radius: 9px; outline: 0; font-size: 12.4px; line-height: 1.45; }
.notes-card textarea:focus { border-color: var(--teal); }
.notes-card small { display: block; margin-top: 5px; color: #9aa49f; font-size: 9.7px; }
.sample-card { color: var(--navy); background: var(--sun-light); border-color: #e8d6a0; }
.sample-card p { color: #7c8174; font-size: 12.4px; line-height: 1.5; }
.sample-card .button { width: 100%; margin-top: 7px; }

/* Modals */
.modal { width: min(840px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 23px 23px 8px 23px; box-shadow: 0 35px 100px rgba(21,54,61,.32); }
.modal::backdrop { background: rgba(21,54,61,.58); backdrop-filter: blur(5px); }
.modal form { max-height: calc(100vh - 28px); display: flex; flex-direction: column; }
.modal-header { padding: 25px 29px 19px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px dashed #d7ded4; }
.modal-header h2 { margin: 7px 0 0; color: var(--navy); font-family: var(--display); font-size: 29px; letter-spacing: -.055em; }
.modal-close { width: 34px; height: 34px; color: var(--navy); background: #edf1ea; border: 0; border-radius: 50%; font-size: 21px; }
.modal-body { padding: 25px 29px; overflow-y: auto; }
.modal-footer { padding: 17px 29px 23px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px; border-top: 1px dashed #d7ded4; }
.delete-button { color: var(--danger); background: var(--coral-light); }
.type-fieldset { margin-top: 0; }
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.type-grid label { position: relative; }
.type-grid input { position: absolute; opacity: 0; }
.type-grid label > span, .type-grid label > strong { pointer-events: none; }
.type-grid label { min-height: 91px; padding: 11px 7px; display: grid; place-items: center; align-content: center; gap: 6px; color: #829088; background: #f7f8f1; border: 1px solid #dce3d9; border-radius: 13px; text-align: center; cursor: pointer; }
.type-grid label > span { width: 42px; height: 42px; display: grid; place-items: center; background: #edf1eb; border-radius: 50% 50% 50% 11px; }
.type-grid label > span .ui-icon { width: 27px; height: 27px; }
.type-grid label > strong { font-size: 12.1px; }
.type-grid label:has(input:checked) { color: var(--coral); background: var(--coral-light); border-color: #e2a094; box-shadow: inset 0 0 0 1px #e2a094; }
.type-grid label:has(input:checked) > span { color: #fff; background: var(--coral); }
.saved-plan-picker { padding: 17px; margin-bottom: 21px; background: linear-gradient(135deg, #f1f8f4, #fffaf0 72%); border: 1px solid #cddcd0; border-radius: 17px 17px 6px 17px; box-shadow: 4px 5px 0 rgba(171,190,170,.16); }
.saved-plan-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.saved-plan-header > div { min-width: 0; }
.saved-plan-header > div > span, .saved-plan-header strong, .saved-plan-header small { display: block; }
.saved-plan-header > div > span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.saved-plan-header strong { margin-top: 4px; color: var(--navy); font-family: var(--display); font-size: 16px; letter-spacing: -.035em; }
.saved-plan-header small { margin-top: 4px; color: #83928a; font-size: 12.4px; }
.saved-plan-day { min-width: 190px; display: grid; gap: 5px; color: #718078; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.saved-plan-day select { height: 40px; padding: 0 34px 0 11px; color: var(--navy); background: #fffefa; border: 1px solid #cbd8cc; border-radius: 10px; outline: 0; font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.saved-plan-day select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.13); }
.saved-plan-filters { margin: 14px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.saved-plan-filters button { min-height: 30px; padding: 6px 10px; color: #728179; background: rgba(255,255,255,.78); border: 1px solid #d3ddd3; border-radius: 100px; font-size: 12.4px; font-weight: 800; }
.saved-plan-filters button:hover, .saved-plan-filters button.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.saved-plan-list { max-height: 235px; padding-right: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; scrollbar-color: #b9c9bb transparent; }
.saved-plan-entry { --saved-accent: var(--pink); width: 100%; min-width: 0; min-height: 67px; padding: 9px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid #d8e1d7; border-left: 4px solid var(--saved-accent); border-radius: 12px 12px 12px 5px; text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.saved-plan-entry[data-saved-kind="stay"] { --saved-accent: var(--teal); }
.saved-plan-entry[data-saved-kind="flight"] { --saved-accent: var(--blue); border-radius: 12px 12px 5px 12px; }
.saved-plan-entry:hover:not(:disabled) { border-color: var(--saved-accent); box-shadow: 3px 4px 0 rgba(171,190,170,.2); transform: translateY(-1px); }
.saved-plan-entry:disabled { opacity: .55; cursor: not-allowed; }
.saved-plan-entry-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--saved-accent); border-radius: 50% 50% 50% 11px; }
.saved-plan-entry-icon .ui-icon { width: 24px; height: 24px; }
.saved-plan-entry-copy { min-width: 0; }
.saved-plan-entry-copy strong, .saved-plan-entry-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-plan-entry-copy strong { color: var(--navy); font-size: 11px; }
.saved-plan-entry-copy span { margin-top: 4px; color: #829088; font-size: 11.7px; }
.saved-plan-action { max-width: 82px; padding: 6px 7px; color: var(--navy); background: #edf2ea; border-radius: 8px; font-size: 10.3px; font-weight: 800; line-height: 1.25; text-align: center; }
.saved-plan-entry[data-saved-kind="flight"] .saved-plan-action { color: #2c7287; background: var(--blue-light); }
.saved-plan-entry[data-saved-kind="stay"] .saved-plan-action { color: #267666; background: var(--teal-light); }
.saved-plan-empty { min-height: 86px; grid-column: 1 / -1; padding: 18px; display: grid; place-items: center; color: #87958e; background: rgba(255,255,255,.55); border: 1px dashed #cad7ca; border-radius: 11px; font-size: 12.4px; text-align: center; }
.saved-plan-note { margin: 10px 2px 0; color: #84928b; font-size: 11.7px; line-height: 1.45; }
.manual-entry-divider { margin: 0 0 20px; display: flex; align-items: center; gap: 11px; color: #9aa59f; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.manual-entry-divider:before, .manual-entry-divider:after { content: ""; height: 1px; flex: 1; background: #dce2da; }
.form-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.price-preview { padding: 16px 18px; margin-top: 19px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: var(--navy); border-radius: 13px; }
.price-preview span { font-size: 11px; }
.price-preview strong { font-family: var(--display); font-size: 20px; }

.journey-modal { width: min(920px, calc(100vw - 28px)); }
.journey-modal .suggestion-panel { max-height: 240px; }
.journey-form-intro { padding: 15px 17px; display: flex; align-items: flex-start; gap: 12px; color: #61736c; background: var(--teal-light); border: 1px solid #bcded4; border-radius: 14px; }
.journey-form-intro.flight { background: var(--blue-light); border-color: #bcdce3; }
.journey-form-intro.place { background: var(--coral-light); border-color: #efc9bd; }
.journey-form-intro > span { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 11px; }
.journey-form-intro.flight > span { background: var(--blue); }
.journey-form-intro.place > span { background: var(--coral); }
.journey-form-intro .ui-icon { width: 25px; height: 25px; }
.journey-form-intro strong { color: var(--navy); font-family: var(--display); font-size: 14px; }
.journey-form-intro p { margin: 4px 0 0; font-size: 12.1px; line-height: 1.5; }
.journey-form-message { min-height: 21px; margin: 8px 0 -7px; color: var(--danger); font-size: 11.5px; font-weight: 700; }
.journey-form-grid { margin-top: 20px; }
.journey-form-grid .form-field > label em { color: #98a39d; font-size: 12.4px; font-style: normal; font-weight: 500; }
.journey-form-total { padding: 14px 17px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #fff; background: var(--navy); border-radius: 13px 13px 13px 5px; }
.journey-form-total.flight { border-radius: 13px 13px 5px 13px; }
.journey-form-total span { color: #bfd2cf; font-size: 11.5px; line-height: 1.4; }
.journey-form-total strong { flex: 0 0 auto; color: var(--sun); font-family: var(--display); font-size: 20px; }

.auth-modal { width: min(960px, calc(100vw - 28px)); }
.auth-content { max-height: calc(100vh - 28px); overflow-y: auto; }
.auth-modal .modal-header p { max-width: 620px; margin: 7px 0 0; color: #80908a; font-size: 10.9px; line-height: 1.45; }
.auth-layout { display: grid; grid-template-columns: minmax(260px,.78fr) minmax(420px,1.35fr); align-items: start; gap: 13px; }
.auth-access { padding: 15px; background: #f7f7ef; border: 1px solid #dfe5dc; border-radius: 16px 16px 5px 16px; }
.auth-state { padding: 12px 13px; margin-bottom: 14px; color: #6f7f78; background: #eef1e9; border: 1px solid #dce3d9; border-radius: 11px; font-size: 12.4px; line-height: 1.45; }
.auth-state.configured { color: #287565; background: var(--teal-light); border-color: #bcdfd5; }
.oauth-buttons { display: grid; gap: 8px; }
.oauth-button { min-height: 45px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--navy); background: #fff; border: 1px solid #d8dfd7; border-radius: 11px; font-size: 11.5px; font-weight: 800; }
.oauth-button.apple { color: #fff; background: #111; border-color: #111; }
.oauth-button span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; }
.oauth-button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.7); }
.google span { color: #fff; background: #4285f4; }
.auth-divider { margin: 18px 0; display: flex; align-items: center; gap: 9px; color: #9ba59f; font-size: 11px; }
.auth-divider:before, .auth-divider:after { content: ""; height: 1px; flex: 1; background: #dce2da; }
.email-auth { display: grid; grid-template-columns: 1fr; gap: 8px; }
.email-auth input { min-height: 42px; padding: 0 11px; color: var(--navy); background: #fff; border: 1px solid #d8dfd7; border-radius: 10px; outline: 0; font-size: 11.5px; }
.email-auth :disabled { opacity: .48; cursor: not-allowed; }
.auth-message { min-height: 19px; color: var(--coral); font-size: 12.4px; }
.demo-login { padding: 13px; margin-top: 12px; display: grid; gap: 10px; background: var(--sun-light); border: 1px solid #ead8a4; border-radius: 12px; }
.demo-login strong, .demo-login small { display: block; }
.demo-login strong { color: var(--navy); font-size: 12.4px; }
.demo-login small { margin-top: 3px; color: #858477; font-size: 9.7px; }
.demo-login .button { width: 100%; }
.signout-button { width: 100%; margin-top: 12px; color: var(--danger); background: var(--coral-light); }
.account-trips { min-width: 0; padding: 15px; background: #fffefa; border: 1px solid #dfe5dc; border-radius: 16px 5px 16px 16px; }
.account-trips > header { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding-bottom: 12px; border-bottom: 1px dashed #d5ddd4; }
.account-trips > header span, .account-trip-card-top span { display: block; color: var(--coral); font-size: 9.7px; font-weight: 800; letter-spacing: .13em; }
.account-trips > header strong { display: block; margin-top: 3px; color: var(--navy); font-family: var(--display); font-size: 17px; }
.account-trips > header small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.account-new-trip { min-height: 37px; padding: 8px 11px; flex: 0 0 auto; color: var(--navy); background: var(--sun); border: 0; border-radius: 10px 10px 10px 4px; box-shadow: 0 3px 0 #cb9735; font-size: 11.7px; font-weight: 800; }
.account-trip-list { max-height: 455px; padding-right: 3px; margin-top: 11px; display: grid; gap: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b9c8bf transparent; }
.account-trip-card { min-width: 0; padding: 11px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; background: #f7f8f1; border: 1px solid #dce3d9; border-radius: 13px; }
.account-trip-card.active { background: #edf8f4; border-color: #9ed5c6; box-shadow: inset 4px 0 var(--teal); }
.account-trip-mark { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--coral),#f0a26d); border-radius: 50% 50% 50% 12px; font-family: var(--display); font-size: 11.5px; font-weight: 800; }
.account-trip-card:nth-child(even) .account-trip-mark { background: linear-gradient(145deg,#51bbae,var(--teal)); }
.account-trip-copy { min-width: 0; }
.account-trip-card-top { display: flex; align-items: center; gap: 7px; }
.account-trip-card-top b { padding: 3px 6px; color: #2d7568; background: #dff3ec; border-radius: 100px; font-size: 9px; }
.account-trip-copy > strong { display: block; overflow: hidden; margin-top: 3px; color: var(--navy); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.account-trip-copy > small { display: block; overflow: hidden; margin-top: 4px; color: #75867f; font-size: 10.3px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.account-trip-open { min-height: 34px; padding: 7px 10px; color: #fff; background: var(--navy); border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; }
.account-trip-card.active .account-trip-open { color: var(--navy); background: var(--sun); }
.account-trip-loading, .account-trip-empty { min-height: 110px; padding: 22px; display: grid; place-items: center; color: #84928b; background: #f7f8f1; border: 1px dashed #d4ddd3; border-radius: 12px; font-size: 12.4px; text-align: center; }
.admin-inbox { padding: 16px; margin-top: 13px; color: var(--ink); background: linear-gradient(145deg,#edf8f4,#fff9e8); border: 1px solid #c9ded5; border-radius: 17px 17px 6px 17px; box-shadow: inset 5px 0 var(--teal); }
.admin-inbox > header { padding-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px dashed #cbd9d1; }
.admin-inbox-title { display: flex; align-items: center; gap: 11px; }
.admin-shield { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 45px; color: #fff; background: linear-gradient(145deg,var(--navy),#238579); border: 5px solid #d5eee5; border-radius: 50% 50% 50% 12px; font-family: var(--display); font-size: 15px; font-weight: 800; }
.admin-inbox-title small,.admin-inbox-title strong,.admin-inbox-title p { display: block; }
.admin-inbox-title small { color: var(--coral); font-size: 9.7px; font-weight: 800; letter-spacing: .15em; }
.admin-inbox-title strong { margin-top: 3px; color: var(--navy); font-family: var(--display); font-size: 18px; }
.admin-inbox-title p { margin: 3px 0 0; color: #71827a; font-size: 11px; }
.admin-refresh { min-height: 36px; padding: 8px 11px; display: flex; align-items: center; gap: 6px; color: var(--navy); background: #fff; border: 1px solid #cedbd3; border-radius: 10px; font-size: 11.7px; font-weight: 800; }
.admin-refresh .ui-icon { width: 16px; height: 16px; }
.admin-refresh:disabled { opacity: .55; cursor: wait; }
/* Admin konzola: záložky, štatistické dlaždice, tabuľky a stĺpcový graf. */
.admin-tabs { padding-bottom: 2px; margin-top: 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab { min-height: 34px; padding: 7px 13px; flex: 0 0 auto; color: #5f7169; background: rgba(255,255,255,.75); border: 1px solid #d5e0d8; border-radius: 100px; font-size: 11.7px; font-weight: 800; white-space: nowrap; }
.admin-tab:hover { color: var(--navy); background: #fff; }
.admin-tab.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.admin-pane { margin-top: 12px; }
.admin-pane.hidden { display: none; }
.admin-range { padding: 11px 13px; margin-bottom: 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; background: rgba(255,255,255,.75); border: 1px solid #d5e0d8; border-radius: 12px; }
.admin-range label { color: var(--navy); font-size: 11.5px; font-weight: 800; }
.admin-range select,.admin-range input { min-height: 34px; padding: 6px 10px; color: var(--navy); background: #fff; border: 1px solid #cedbd3; border-radius: 9px; font: inherit; font-size: 12.2px; }
.admin-range input { flex: 1 1 190px; }
.admin-range small { flex: 1 1 100%; color: #7d8e86; font-size: 10.8px; line-height: 1.5; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(148px,1fr)); gap: 9px; }
.admin-stat { padding: 13px; background: rgba(255,255,255,.9); border: 1px solid #d5e0d8; border-radius: 13px; }
.admin-stat span { display: block; color: var(--coral); font-size: 9.7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.admin-stat strong { margin-top: 6px; display: block; color: var(--navy); font-family: var(--display); font-size: 25px; line-height: 1.1; }
.admin-stat small { margin-top: 5px; display: block; color: #7d8e86; font-size: 11px; }
.admin-section-title { margin: 15px 0 8px; color: var(--navy); font-family: var(--display); font-size: 14.5px; }
.admin-chart { height: 132px; padding: 10px 11px; display: flex; align-items: flex-end; gap: 3px; background: rgba(255,255,255,.9); border: 1px solid #d5e0d8; border-radius: 13px; overflow-x: auto; }
.admin-chart-bar { min-width: 7px; flex: 1 1 auto; display: flex; align-items: flex-end; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg,#8ed3c4,#2b8d7d); }
.admin-chart-bar.empty { background: #e4ece7; }
.admin-table-wrap { max-height: 430px; overflow: auto; border: 1px solid #d5e0d8; border-radius: 13px; scrollbar-width: thin; scrollbar-color: #a9c4b8 transparent; }
.admin-table { width: 100%; background: rgba(255,255,255,.92); border-collapse: collapse; font-size: 11.9px; }
.admin-table th,.admin-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e5ece7; white-space: nowrap; }
.admin-table th { position: sticky; top: 0; z-index: 1; color: #5f7169; background: #edf5f1; font-size: 10.3px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.admin-table td strong { color: var(--navy); }
.admin-table td.wrap { max-width: 280px; white-space: normal; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-badge { padding: 3px 8px; display: inline-block; background: #dff3ec; border-radius: 100px; color: #2b7769; font-size: 9.6px; font-weight: 800; letter-spacing: .06em; }
.admin-badge.muted { color: #77867f; background: #edf0eb; }
.admin-message-list { max-height: 450px; padding-right: 3px; margin-top: 12px; display: grid; gap: 9px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a9c4b8 transparent; }
.admin-message-empty { min-height: 100px; padding: 22px; display: grid; place-items: center; color: #7d8e86; background: rgba(255,255,255,.65); border: 1px dashed #c9d8d0; border-radius: 12px; font-size: 12.4px; text-align: center; }
.admin-message-card { padding: 13px; display: grid; grid-template-columns: minmax(150px,.42fr) minmax(260px,1fr) auto; align-items: start; gap: 13px; background: rgba(255,255,255,.9); border: 1px solid #d5e0d8; border-radius: 13px; }
.admin-message-card.unread { border-color: #8bcbbd; box-shadow: inset 4px 0 var(--teal); }
.admin-sender { min-width: 0; }
.admin-sender > span { width: max-content; padding: 4px 7px; display: block; color: #2b7769; background: #dff3ec; border-radius: 100px; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.admin-message-card:not(.unread) .admin-sender > span { color: #77867f; background: #edf0eb; }
.admin-sender strong,.admin-sender a,.admin-sender small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sender strong { margin-top: 8px; color: var(--navy); font-size: 11.5px; }
.admin-sender a { margin-top: 3px; color: #278a7c; font-size: 12.4px; }
.admin-sender small { margin-top: 6px; color: #94a098; font-size: 11px; }
.admin-message-copy { min-width: 0; }
.admin-message-copy > strong { display: block; color: var(--coral); font-size: 10.3px; letter-spacing: .12em; text-transform: uppercase; }
.admin-message-copy p { max-height: 100px; margin: 6px 0 0; overflow: auto; color: #5f7169; font-size: 12.1px; line-height: 1.55; white-space: normal; }
.admin-message-actions { min-width: 105px; display: grid; gap: 7px; }
.admin-message-actions a,.admin-message-actions button { min-height: 33px; padding: 7px 9px; display: grid; place-items: center; border-radius: 9px; font-size: 11.7px; font-weight: 800; text-align: center; text-decoration: none; }
.admin-message-actions a { color: #fff; background: var(--navy); }
.admin-message-actions button { color: #277666; background: var(--teal-light); border: 1px solid #badfd4; }
.confirm-modal { width: min(470px, calc(100vw - 28px)); overflow: visible; border-radius: 24px 24px 8px 24px; }
.confirm-modal::backdrop { background: rgba(21,54,61,.68); backdrop-filter: blur(7px); }
.confirm-content { padding: 34px 32px 29px; position: relative; overflow: hidden; text-align: center; }
.confirm-content:before { content: ""; width: 180px; height: 180px; position: absolute; top: -108px; right: -87px; background: var(--coral-light); border: 1px solid #f0c5b9; border-radius: 50%; }
.confirm-symbol { width: 58px; height: 58px; margin: 0 auto 17px; display: grid; place-items: center; position: relative; z-index: 1; color: #fff; background: var(--coral); border: 7px solid var(--coral-light); border-radius: 50% 50% 50% 15px; font-family: var(--display); font-size: 26px; font-weight: 800; box-shadow: 4px 5px 0 rgba(226,119,95,.18); }
.confirm-modal:not(.danger) .confirm-symbol { background: var(--teal); border-color: var(--teal-light); box-shadow-color: rgba(58,169,154,.18); }
.confirm-content .chapter-label { position: relative; color: var(--coral); }
.confirm-modal:not(.danger) .confirm-content .chapter-label { color: var(--teal); }
.confirm-content h2 { margin: 8px 0 0; position: relative; color: var(--navy); font-family: var(--display); font-size: 28px; line-height: 1.08; letter-spacing: -.05em; }
.confirm-content p { max-width: 355px; margin: 13px auto 0; position: relative; color: #73837b; font-size: 11.5px; line-height: 1.55; }
.confirm-actions { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.confirm-actions .button { width: 100%; }
.confirm-accept { color: #fff; background: var(--danger); box-shadow: 0 4px 0 #a9483e; }
.confirm-accept:hover { background: #a9483e; transform: translateY(-1px); }
.confirm-modal:not(.danger) .confirm-accept { background: var(--teal); box-shadow-color: #287e72; }
.confirm-modal:not(.danger) .confirm-accept:hover { background: #287e72; }
.share-modal { width: min(620px, calc(100vw - 28px)); padding: 0; color: var(--ink); background: transparent; border: 0; overflow: visible; }
.share-modal::backdrop { background: rgba(12,44,51,.64); backdrop-filter: blur(7px); }
.share-content { overflow: hidden; background: var(--paper); border: 1px solid rgba(255,255,255,.7); border-radius: 23px 7px 23px 23px; box-shadow: 0 28px 80px rgba(11,39,45,.35); }
.share-content .modal-body { position: relative; }
.share-illustration { width: 64px; height: 64px; margin-bottom: 16px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 17px; box-shadow: 6px 7px 0 var(--teal-light); }
.share-illustration .ui-icon { width: 34px; height: 34px; }
.share-content .modal-body > p { max-width: 510px; margin: 0 0 19px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.share-link-field { display: grid; gap: 7px; }
.share-link-field > span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.share-link-field > div { padding: 5px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; background: #f0f3ec; border: 1px solid #d6dfd5; border-radius: 14px; }
.share-link-field input { min-width: 0; padding: 0 10px; color: #60746d; background: transparent; border: 0; outline: 0; font-size: 11.5px; }
.share-link-field .button { min-height: 42px; }
.share-note { margin-top: 13px; display: flex; align-items: center; gap: 7px; color: #7b8c84; font-size: 11.7px; }
.share-note b { width: 19px; height: 19px; display: grid; place-items: center; color: var(--navy); background: #83d5a7; border-radius: 50%; }
.toast { padding: 11px 15px; position: fixed; right: 22px; bottom: 22px; z-index: 60; color: #fff; background: var(--navy); border-radius: 10px; box-shadow: 0 12px 35px rgba(23,63,72,.24); font-size: 11.5px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.noscript { padding: 15px; position: fixed; right: 20px; bottom: 20px; color: #fff; background: var(--danger); border-radius: 10px; }

@keyframes vacationSunFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(5px) scale(1.025); } }
@keyframes vacationCloudFloat { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(13px); } }
@keyframes vacationPlaneFloat { 0%, 100% { transform: translate(0,0) rotate(16deg); } 50% { transform: translate(10px,-7px) rotate(12deg); } }
@keyframes vacationWaveDrift { 0%, 100% { transform: translateX(0) rotate(-1deg); } 50% { transform: translateX(-24px) rotate(1deg); } }
@keyframes stepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes journeyLaneOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pasteReady { 50% { box-shadow: 0 4px 0 #287e72, 0 0 0 4px rgba(58,169,154,.12); } }
@keyframes demoTimelineScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(-100% + 420px)); }
}

@media (max-width: 1160px) {
  .landing-hero { grid-template-columns: 1fr; }
  .landing-copy { max-width: 720px; }
  .landing-copy h1 { font-size: clamp(49px, 7.65vw, 71px); }
  .landing-demo { width: min(720px, 100%); justify-self: center; }
  .landing-mascot { width: 315px; right: -22px; bottom: 14px; }
  .landing-feature-strip { grid-template-columns: repeat(2, 1fr); }
  .landing-feature-strip > div:nth-child(2) { border-right: 0; }
  .landing-feature-strip > div:nth-child(-n+2) { border-bottom: 1px dashed #d2dbd1; }
  .landing-seo { grid-template-columns: 1fr; }
  .seo-explainer { width: min(700px,100%); }
  .landing-faq { grid-template-columns: 1fr; }
  .landing-contact { grid-template-columns: 1fr; }
  .contact-copy { max-width: 780px; }
  .contact-postcard { width: min(820px,100%); }
  .wizard-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .wizard-aside { padding-right: 31px; padding-left: 31px; }
  .wizard-main { padding-right: 34px; padding-left: 34px; }
  .transport-grid { grid-template-columns: repeat(3, 1fr); }
  .budget-strip { grid-template-columns: repeat(4, 1fr); }
  .budget-limit { grid-column: 1 / -1; }
  .journey-board-header { align-items: flex-start; }
  .journey-overview { min-width: 290px; }
  .journey-cards { grid-template-columns: 1fr; }
  .planner-layout { grid-template-columns: 1fr; }
  .planner-sidebar { grid-template-columns: repeat(3, 1fr); position: static; }
}

@media (max-width: 850px) {
  .app-nav { width: calc(100% - 24px); top: 6px; gap: 12px; }
  main { width: calc(100% - 24px); }
  .save-indicator { display: none; }
  .nav-holiday-art { display: none; }
  .nav-actions .nav-button { display: none; }
  .nav-actions .map-nav-link { display: inline-flex; }
  .free-nav-badge { display: none; }
  .landing { padding-top: 6px; }
  .landing-hero { min-height: 0; padding: 48px 30px 55px; border-radius: 25px 7px 54px 25px; }
  .horizon-flight-path { left: 48%; }
  .horizon-plane { left: calc(48% + 263px); }
  .horizon-palm { left: 5%; bottom: 93px; }
  .landing-copy h1 { font-size: clamp(42px, 10.2vw, 61px); }
  .landing-copy > p { font-size: 15px; }
  .landing-demo { padding: 23px 23px 17px; transform: none; box-shadow: 11px 15px 0 rgba(9,42,48,.15), 0 24px 60px rgba(6,36,43,.28); }
  .landing-mascot { display: none; }
  .wizard-shell { grid-template-columns: 1fr; }
  .wizard-aside { min-height: 260px; padding: 34px; border-radius: 29px 8px 0 0; }
  .wizard-main { border-radius: 0 0 29px 29px; }
  .wizard-aside h1 { max-width: 520px; font-size: 36px; }
  .wizard-aside > p { max-width: 560px; }
  .wizard-route-art { height: 90px; margin-top: 17px; justify-content: flex-start; }
  .wizard-route-art span, .wizard-route-art b { width: 48px; height: 48px; flex-basis: 48px; }
  .local-note { right: 25px; bottom: 25px; left: auto; width: 290px; }
  .trip-hero { padding: 35px; display: block; }
  .trip-route-card { width: 100%; margin-top: 27px; transform: none; }
  .planner-toolbar { display: block; }
  .toolbar-actions { margin-top: 18px; flex-wrap: wrap; }
  .journey-board-header { display: grid; }
  .journey-overview { width: 100%; min-width: 0; }
  .journey-overview strong { max-width: none; }
  .journey-columns { grid-template-columns: 1fr; }
  .journey-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-scroll { max-height: 1100px; padding: 48px 14px 55px 52px; }
  .timeline-spine { left: 27px; transform: none; }
  .day-entry, .day-entry.even { width: 100%; margin-left: 0; }
  .day-card, .day-card.even { border-radius: 5px 15px 15px 15px; }
  .day-card:before, .day-card.even:before { right: auto; left: -44px; }
  .day-card:after, .day-card.even:after { right: auto; left: -25px; width: 25px; }
  .planner-sidebar { grid-template-columns: 1fr; }
  .auth-layout { grid-template-columns: 1fr; }
  .account-trip-list { max-height: 380px; }
  .landing-coast { padding-right: 28px; padding-left: 28px; }
  .landing-footer { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding-bottom: 12px; text-align: center; }
  .landing-footer nav { justify-content: center; }
  .admin-message-card { grid-template-columns: minmax(140px,.42fr) minmax(0,1fr); }
  .admin-message-actions { grid-column: 2; display: flex; }
  .admin-message-actions a,.admin-message-actions button { min-width: 110px; }
}

@media (max-width: 620px) {
  .app-nav { min-height: 62px; padding: 7px 8px 7px 9px; gap: 8px; border-radius: 17px 8px 17px 17px; }
  .brand { gap: 7px; }
  .brand-copy > span { font-size: 15px; }
  .brand-copy small { display: none; }
  .brand-mark { width: 39px; height: 39px; border-radius: 12px 50% 50% 50%; }
  .brand-mark-image { border-radius: 0; }
  .brand-mark .brand-palm { width: 27px; height: 27px; left: 4px; bottom: 3px; }
  .brand-sun { width: 11px; height: 11px; top: 5px; right: 5px; }
  .account-button { padding-right: 9px; }
  .nav-actions .map-nav-link:not(.community-nav-link) { display: none; }
  .nav-actions .community-nav-link { width: 44px; padding: 0; font-size: 0; }
  .nav-actions .community-nav-link::before { content: "♥"; font-size: 17px; }
  .landing-hero { padding: 35px 18px 44px; gap: 38px; }
  .horizon-sun { width: 88px; height: 88px; top: 23px; right: -17px; }
  .horizon-sun:before { inset: -19px; }
  .horizon-cloud.cloud-one { top: 39px; left: 46%; transform: scale(.75); }
  .horizon-cloud.cloud-two { display: none; }
  .horizon-flight-path { width: 135px; height: 60px; top: 76px; left: 54%; opacity: .7; }
  .horizon-plane { width: 32px; height: 32px; top: 70px; left: calc(54% + 112px); }
  .horizon-palm { width: 135px; height: 135px; left: -13px; bottom: 105px; opacity: .5; }
  .horizon-city { width: 150px; height: 124px; right: -38px; bottom: 100px; }
  .horizon-attraction { width: 84px; height: 84px; right: 5%; bottom: 128px; }
  .landing-badge { font-size: 9.7px; letter-spacing: .1em; }
  .landing-free-badge { min-height: 37px; }
  .landing-copy h1 { margin-top: 19px; font-size: clamp(43px, 15vw, 62px); }
  .landing-copy > p { font-size: 13px; line-height: 1.6; }
  .vacation-motif-pills { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
  .vacation-motif-pills > span { min-height: 49px; padding: 6px; gap: 6px; }
  .vacation-motif-pills .ui-icon { width: 30px; height: 30px; padding: 6px; }
  .vacation-motif-pills strong { font-size: 11.7px; }
  .vacation-motif-pills small { display: none; }
  .landing-actions { align-items: stretch; flex-direction: column; }
  .landing-actions .button { width: 100%; }
  .landing-trust { align-items: flex-start; flex-direction: column; }
  .landing-demo { padding: 18px 12px 13px; }
  .demo-postcard-stamp { top: -17px; right: 17px; }
  .demo-add-preview { padding: 9px; }
  .demo-add-window { padding: 15px 12px; }
  .demo-add-window > header h3 { font-size: 19px; }
  .demo-form-type { grid-template-columns: 34px minmax(0,1fr); }
  .demo-form-type > span { width: 34px; height: 34px; }
  .demo-form-type > b { display: none; }
  .demo-trip-header { align-items: stretch; flex-direction: column; }
  .demo-budget { text-align: left; }
  .demo-day { width: calc(50% - 18px); }
  .demo-day.left .demo-day-number { right: -32px; }
  .demo-day.right .demo-day-number { left: -32px; }
  .demo-day-card { padding: 9px 8px; }
  .demo-day-card h3 { font-size: 11.7px; }
  .demo-day-card p { font-size: 9px; }
  .demo-plan-points > div { grid-template-columns: 24px 18px minmax(0,1fr); padding: 4px; gap: 3px; }
  .demo-plan-points > div > span { width: 18px; height: 18px; }
  .demo-plan-points strong { font-size: 9.7px; }
  .demo-plan-points small { font-size: 8.5px; }
  .demo-footer b { text-align: right; }
  .landing-feature-strip { grid-template-columns: 1fr; }
  .landing-feature-strip > div { border-right: 0 !important; border-bottom: 1px dashed #d2dbd1; }
  .landing-feature-strip > div:last-child { border-bottom: 0; }
  .landing-seo { padding: 32px 19px; border-radius: 21px 21px 6px 21px; }
  .seo-intro h2 { font-size: 33px; }
  .seo-intro > p { font-size: 11.5px; }
  .seo-benefits { grid-template-columns: 1fr; }
  .seo-explainer { padding: 25px 18px; }
  .landing-faq { padding: 29px 19px; }
  .landing-faq h2 { font-size: 31px; }
  .landing-coast { padding: 24px 12px 18px; border-radius: 23px 7px 48px 23px; }
  .landing-faq { border-radius: 7px 20px 20px 20px; box-shadow: 8px 10px 0 rgba(7,52,58,.12); }
  .landing-faq > div:first-child > p { font-size: 11.5px; }
  .faq-list details { padding: 0 12px; }
  .faq-list summary { min-height: 58px; font-size: 10.9px; }
  .landing-contact { padding: 42px 5px 37px; gap: 31px; }
  .contact-copy h2 { font-size: 38px; }
  .contact-copy > p { font-size: 11.5px; }
  .contact-route span { width: 57px; height: 57px; flex-basis: 57px; border-width: 5px; font-size: 10.3px; }
  .contact-route b { width: 36px; height: 36px; flex-basis: 36px; }
  .contact-postcard { padding: 23px 16px; border-radius: 19px 6px 19px 19px; transform: none; }
  .contact-postcard:before { display: none; }
  .contact-postcard > header { min-height: 72px; padding-right: 105px; }
  .contact-postcard > header strong { font-size: 20px; }
  .postcard-stamp { width: 82px; height: 70px; top: 18px; right: 16px; }
  .postcard-stamp .ui-icon { width: 25px; height: 25px; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-grid .full { grid-column: auto; }
  .contact-submit-row { align-items: stretch; flex-direction: column; }
  .contact-submit { width: 100%; }
  .landing-footer { padding-right: 5px; padding-left: 5px; }
  .footer-brand { text-align: left; }
  .admin-inbox > header { align-items: flex-start; }
  .admin-refresh { padding: 8px; font-size: 0; }
  .admin-refresh .ui-icon { width: 19px; height: 19px; }
  .admin-message-card { grid-template-columns: 1fr; }
  .admin-message-actions { grid-column: auto; }
  .admin-message-actions a,.admin-message-actions button { min-width: 0; flex: 1; }
  .onboarding { min-height: auto; }
  .wizard-shell { border-radius: 21px 7px 21px 21px; }
  .wizard-aside { min-height: 300px; padding: 28px 22px; border-radius: 20px 6px 0 0; }
  .wizard-main { border-radius: 0 0 20px 20px; }
  .wizard-aside h1 { font-size: 33px; }
  .wizard-route-art { margin-top: 13px; }
  .local-note { right: 19px; bottom: 20px; left: 19px; width: auto; }
  .wizard-main { padding: 26px 19px 21px; }
  .wizard-progress b { display: none; }
  .wizard-progress li:not(:last-child):after { left: 36px; }
  .wizard-progress li { justify-content: flex-start; }
  .wizard-step h2 { font-size: 26px; }
  .date-range-grid { grid-template-columns: 1fr; }
  .date-arrow { text-align: center; transform: rotate(90deg); }
  .transport-grid { grid-template-columns: repeat(2, 1fr); }
  .two-fields, .review-fields, .people-grid { grid-template-columns: 1fr; }
  .counter-card.rooms { grid-column: auto; }
  .children-details > header { align-items: flex-start; flex-direction: column; }
  .children-details > header > small { max-width: none; text-align: left; }
  .child-detail-row { grid-template-columns: 36px minmax(0,1fr); }
  .child-detail-field { grid-column: 2; }
  .destination-row { grid-template-columns: 32px minmax(0, 1fr) 35px; }
  .destination-days { grid-column: 2 / -1; justify-content: flex-end; }
  .wizard-footer .button { padding: 9px 11px; }
  .trip-hero { min-height: 0; padding: 30px 23px; border-radius: 22px 22px 55px 22px; }
  .trip-hero h1 { font-size: 43px; }
  .planner-title-line { align-items: flex-start; flex-direction: column; gap: 3px; }
  .trip-title-edit { margin-bottom: 8px; }
  .trip-title-editor > div { grid-template-columns: 1fr 1fr; }
  .trip-title-editor input { grid-column: 1 / -1; }
  .account-trip-card { grid-template-columns: 38px minmax(0,1fr); }
  .account-trip-mark { width: 38px; height: 38px; }
  .account-trip-open { grid-column: 2; width: max-content; }
  .planner-toolbar h2, .timeline-heading h2 { font-size: 27px; }
  .budget-strip { grid-template-columns: repeat(2, 1fr); }
  .budget-limit { grid-column: 1 / -1; }
  .journey-board { border-radius: 19px 6px 19px 19px; }
  .journey-board-header { padding: 22px 18px; }
  .journey-board-title { display: block; }
  .journey-board-mark { width: 45px; height: 45px; margin-bottom: 14px; }
  .journey-board-title h2 { font-size: 23px; }
  .journey-overview { grid-template-columns: 1fr; }
  .journey-columns { padding: 10px; }
  .journey-cards { grid-template-columns: 1fr; }
  .journey-lane { padding: 14px; }
  .timeline-heading { display: block; }
  .timeline-tools { margin-top: 13px; }
  .timeline-scroll { max-height: 900px; padding-right: 9px; padding-left: 43px; }
  .timeline-spine { left: 21px; }
  .day-card:before, .day-card.even:before { left: -41px; }
  .day-card:after, .day-card.even:after { left: -22px; width: 22px; }
  .day-hotel-shelf { grid-template-columns: 31px minmax(0, 1fr); }
  .day-hotel-shelf-label { display: none; }
  .saved-plan-header { align-items: stretch; display: grid; }
  .saved-plan-day { min-width: 0; }
  .saved-plan-list { grid-template-columns: 1fr; }
  .modal-header, .modal-body { padding-right: 18px; padding-left: 18px; }
  .modal-footer { padding-right: 18px; padding-left: 18px; grid-template-columns: auto 1fr auto; }
  .modal-footer > span { display: none; }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .journey-form-intro { padding: 13px; }
  .journey-form-total { align-items: flex-start; flex-direction: column; }
  .email-auth { grid-template-columns: 1fr; }
  .demo-login { display: grid; }
  .share-link-field > div { grid-template-columns: 1fr; }
  .share-link-field input { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Jedna plynulá stránka, checklist, nastavenia a verejné inšpirácie */
.comment-preview { color: #697b74; font-family: var(--body); font-size: 12.6px; font-weight: 600; line-height: 1.5; }
.comment-preview:before { font-size: 12.6px; }
.comment-tooltip { font-size: 13.2px; line-height: 1.6; }

.planner-layout { display: block; }
.timeline-page { width: 100%; }
.timeline-scroll { max-height: none; overflow: visible; padding: 64px clamp(34px, 4vw, 68px) 76px; scrollbar-width: none; }
.planner-sidebar { padding-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: static; }
.notes-card textarea { min-height: 145px; font-size: 12.6px; }
.sample-card .button { margin-top: 18px; }

.public-share-row { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.public-share-row > small { width: 100%; color: #b9d4d0; font-size: 12.4px; }
.public-share-toggle { min-height: 40px; padding: 7px 12px 7px 8px; display: inline-flex; align-items: center; gap: 9px; color: #e7f4f1; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.17); border-radius: 100px; font-size: 11px; }
.switch-track { width: 40px; height: 23px; padding: 3px; display: block; background: rgba(255,255,255,.2); border-radius: 100px; transition: background .18s ease; }
.switch-track i { width: 17px; height: 17px; display: block; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.18); transition: transform .18s ease; }
.public-share-toggle.active { color: var(--navy); background: #dff4ed; border-color: #9cd5c7; }
.public-share-toggle.active .switch-track { background: var(--teal); }
.public-share-toggle.active .switch-track i { transform: translateX(17px); }
.public-link-button { min-height: 40px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--navy); background: var(--sun); border: 0; border-radius: 100px; font-size: 12.4px; font-weight: 800; }
.public-link-button .ui-icon { width: 16px; height: 16px; }
.public-trip-author { width: fit-content; margin-top: 8px; display: inline-flex; padding: 7px 11px; color: #d7ebe7; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; }

.documents-board { margin-top: 24px; overflow: hidden; background: linear-gradient(135deg,#fffdf7,#edf8f4); border: 1px solid #cbdcd2; border-radius: 22px 22px 7px 22px; box-shadow: 0 13px 32px rgba(52,87,75,.08); }
.documents-header { min-height: 112px; padding: 22px 25px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.documents-title { min-width: 0; display: flex; align-items: center; gap: 16px; }
.documents-mark { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 54px; color: #fff; background: linear-gradient(145deg,var(--teal),#287c72); border: 6px solid var(--teal-light); border-radius: 50% 50% 50% 15px; }
.documents-mark .ui-icon { width: 28px; height: 28px; }
.documents-title h2 { margin: 5px 0 0; color: var(--navy); font-family: var(--display); font-size: 25px; line-height: 1.1; letter-spacing: -.05em; }
.documents-title p { max-width: 720px; margin: 6px 0 0; color: #74867e; font-size: 11.5px; line-height: 1.5; }
.documents-summary { display: grid; grid-template-columns: auto 42px; align-items: center; column-gap: 10px; flex: 0 0 auto; text-align: right; }
.documents-summary strong { color: var(--navy); font-family: var(--display); font-size: 18px; }
.documents-summary > span { grid-column: 1; color: #83938c; font-size: 11px; }
.documents-collapse { width: 42px; height: 42px; grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; color: var(--navy); background: #fff; border: 1px solid #ccd9d0; border-radius: 50%; }
.documents-collapse .ui-icon { width: 20px; height: 20px; transition: transform .18s ease; }
.documents-collapse[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.documents-body { padding: 18px 25px 25px; border-top: 1px dashed #cddbd2; }
.documents-locked { min-height: 120px; padding: 20px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 16px; background: rgba(255,255,255,.75); border: 1px dashed #c9d7ce; border-radius: 15px; }
.documents-locked > span { width: 48px; height: 48px; display: grid; place-items: center; background: var(--sun-light); border-radius: 50%; font-size: 22px; }
.documents-locked strong { color: var(--navy); font-size: 14px; }
.documents-locked p { margin: 5px 0 0; color: #75867e; font-size: 11px; line-height: 1.5; }
.documents-list { display: grid; gap: 9px; }
.document-row { padding: 12px; display: grid; grid-template-columns: 42px minmax(0,1fr) minmax(190px,.42fr); align-items: center; gap: 12px; background: rgba(255,255,255,.88); border: 1px solid #d4dfd7; border-left: 4px solid var(--sun); border-radius: 14px 14px 14px 5px; }
.document-row.done { border-left-color: var(--teal); background: #f0faf6; }
.document-check input { position: absolute; opacity: 0; }
.document-check span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #e8ece6; border: 1px solid #d2dad2; border-radius: 50% 50% 50% 11px; font-size: 18px; cursor: pointer; }
.document-check input:checked + span { background: var(--teal); border-color: var(--teal); }
.document-fields { display: grid; grid-template-columns: minmax(190px,.55fr) minmax(250px,1fr); gap: 9px; }
.document-fields label { min-width: 0; display: grid; gap: 4px; }
.document-fields label > span { color: #8b9891; font-size: 10.1px; font-weight: 800; letter-spacing: .12em; }
.document-fields input,.document-fields textarea { width: 100%; min-width: 0; padding: 9px 10px; resize: vertical; color: var(--navy); background: #fffefa; border: 1px solid #d7dfd6; border-radius: 9px; outline: 0; font-size: 11.5px; }
.document-fields input { font-weight: 800; }
.document-fields input:focus,.document-fields textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58,169,154,.1); }
.document-attachment { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 5px; }
.document-attachment label,.document-attachment a { min-height: 39px; padding: 7px 9px; display: flex; align-items: center; gap: 7px; overflow: hidden; color: #2b7468; background: var(--teal-light); border: 1px dashed #a9d6ca; border-radius: 9px; font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }
.document-attachment label span,.document-attachment a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-attachment .ui-icon { width: 17px; height: 17px; }
.document-attachment > button:not(.document-remove) { width: 31px; height: 31px; color: var(--danger); background: var(--coral-light); border: 0; border-radius: 50%; }
.document-remove { grid-column: 1 / -1; justify-self: end; color: #9a7770; background: transparent; border: 0; font-size: 10.3px; }
.documents-add { width: 100%; min-height: 43px; margin-top: 10px; color: var(--navy); background: var(--sun-light); border: 1px dashed #ddc476; border-radius: 11px; font-size: 12.4px; font-weight: 800; }
.documents-privacy { margin: 10px 0 0; color: #82918a; font-size: 11px; text-align: center; }

.settings-modal { width: min(820px, calc(100vw - 28px)); }
.settings-modal .modal-header p { margin: 6px 0 0; color: #82918a; font-size: 12.4px; }
.settings-safety { padding: 14px; margin-top: 18px; display: flex; gap: 11px; color: #61756d; background: var(--teal-light); border: 1px solid #b9ded3; border-radius: 13px; }
.settings-safety > .ui-icon { width: 27px; height: 27px; flex: 0 0 27px; color: var(--teal); }
.settings-safety strong { color: var(--navy); font-size: 12px; }
.settings-safety p { margin: 4px 0 0; font-size: 12.1px; line-height: 1.5; }

.inspiration-section { margin-top: 25px; padding: clamp(28px,4vw,52px); background: linear-gradient(145deg,#fffdf7,#f0f6ee); border: 1px solid #d2ddd3; border-radius: 28px 8px 28px 28px; box-shadow: 0 18px 48px rgba(72,91,77,.09); }
.inspiration-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.inspiration-heading h2 { max-width: 820px; margin: 8px 0 0; color: var(--navy); font-family: var(--display); font-size: clamp(30px,3vw,46px); line-height: 1.02; letter-spacing: -.065em; }
.inspiration-heading p { max-width: 760px; margin: 12px 0 0; color: #74857e; font-size: 12.5px; line-height: 1.6; }
.inspiration-postcard { padding: 10px 13px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--navy); background: var(--sun); border-radius: 12px 12px 12px 4px; box-shadow: 0 4px 0 #c69538; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.inspiration-grid { margin-top: 24px; min-width: 0; }
.inspiration-carousel-stage { padding: 3px 6px 10px 3px; display: grid; gap: 14px; overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent); }
.inspiration-carousel-row { min-width: 0; overflow: hidden; }
.inspiration-carousel-track { width: max-content; display: flex; align-items: stretch; gap: 13px; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; }
.inspiration-carousel-row.is-right .inspiration-carousel-track { animation-name: inspirationCarouselRight; animation-duration: var(--carousel-duration,132s); }
.inspiration-carousel-row.is-left .inspiration-carousel-track { animation-name: inspirationCarouselLeft; animation-duration: var(--carousel-duration,118s); }
.inspiration-grid:hover .inspiration-carousel-track,.inspiration-grid:focus-within .inspiration-carousel-track { animation-play-state: paused; }
.inspiration-carousel-caption { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #84928c; font-size: 11px; font-weight: 700; }
.inspiration-carousel-caption span { padding: 7px 11px; background: rgba(255,255,255,.7); border: 1px solid #dce3da; border-radius: 100px; }
.inspiration-carousel-caption b { color: var(--navy); }
.inspiration-carousel-caption i { width: 24px; border-top: 1px dashed #b8c8bc; }
.inspiration-card { --inspiration-color: var(--coral); width: var(--carousel-card-width,280px); min-width: 0; min-height: 286px; flex: 0 0 var(--carousel-card-width,280px); overflow: hidden; display: grid; grid-template-rows: 128px 1fr; background: #fff; border: 1px solid #d7e0d7; border-radius: 18px 18px 18px 6px; box-shadow: 5px 6px 0 rgba(171,190,170,.19); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.inspiration-card:hover { transform: translateY(-3px) rotate(-.15deg); box-shadow: 8px 10px 0 rgba(171,190,170,.2); }
.inspiration-card.inspiration-blue { --inspiration-color: var(--blue); }
.inspiration-card.inspiration-green { --inspiration-color: var(--teal); }
.inspiration-card.inspiration-pink { --inspiration-color: var(--pink); }
.inspiration-card-art { padding: 15px; position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 10%,rgba(255,255,255,.25),transparent 25%),linear-gradient(145deg,var(--inspiration-color),#1b5962); }
.inspiration-card-art > img { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 0; object-fit: cover; object-position: center; transform: scale(1.015); transition: transform .35s ease, filter .35s ease; }
.inspiration-card.has-photo .inspiration-card-art:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg,rgba(7,31,39,.78) 0%,rgba(8,46,54,.32) 54%,rgba(8,38,45,.1) 100%),linear-gradient(0deg,rgba(6,35,42,.48),transparent 58%); }
.inspiration-card.has-photo:hover .inspiration-card-art > img { filter: saturate(1.08) contrast(1.03); transform: scale(1.055); }
.inspiration-card-art:after { content: ""; width: 140px; height: 55px; position: absolute; right: -25px; bottom: -29px; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 -13px 0 rgba(255,255,255,.07); }
.inspiration-card-art > span { position: relative; z-index: 2; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
.inspiration-card-art > b { display: block; margin-top: 17px; position: relative; z-index: 2; font-family: var(--display); font-size: 38px; line-height: .8; letter-spacing: -.08em; text-shadow: 0 2px 14px rgba(0,0,0,.3); }
.inspiration-card-art > small { position: relative; z-index: 2; font-size: 10.3px; font-weight: 800; letter-spacing: .12em; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
.inspiration-card-art .ui-icon { width: 72px; height: 72px; position: absolute; right: 13px; bottom: 4px; opacity: .34; stroke-width: 1.2; }
.inspiration-card-copy { min-width: 0; padding: 16px; display: flex; flex-direction: column; }
.inspiration-card-copy > span { color: var(--inspiration-color); font-size: 10.1px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inspiration-card-copy h3 { margin: 7px 0 0; color: var(--navy); font-family: var(--display); font-size: 17px; line-height: 1.16; letter-spacing: -.04em; }
.inspiration-card-copy p { margin: 7px 0 16px; color: #778780; font-size: 12.4px; line-height: 1.45; }
.inspiration-card-copy > div { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inspiration-card-copy > div > b { color: #9a7b84; font-size: 11.5px; }
.inspiration-card-copy button { padding: 8px 10px; color: #fff; background: var(--navy); border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; }

@keyframes inspirationCarouselRight {
  from { transform: translate3d(var(--carousel-cycle-offset),0,0); }
  to { transform: translate3d(0,0,0); }
}
@keyframes inspirationCarouselLeft {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(var(--carousel-cycle-offset),0,0); }
}

.public-trip-view { padding: 30px 0 24px; }
.public-trip-hero { min-height: 330px; padding: clamp(35px,5vw,68px); display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.42fr); align-items: center; gap: 45px; overflow: hidden; position: relative; color: #fff; background: radial-gradient(circle at 85% 3%,rgba(255,211,113,.28),transparent 24%),linear-gradient(140deg,#103b49,#16776f); border-radius: 30px 10px 75px 30px; box-shadow: 0 24px 70px rgba(23,63,72,.2); }
.public-trip-hero h1 { max-width: 880px; margin: 12px 0 10px; font-family: var(--display); font-size: clamp(44px,5vw,76px); line-height: .93; letter-spacing: -.075em; }
.public-trip-hero p { color: #c7dedb; font-size: 14px; }
.public-trip-hero aside { padding: 24px; position: relative; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 18px 18px 6px 18px; }
.public-trip-hero aside span,.public-trip-hero aside strong,.public-trip-hero aside small { display: block; }
.public-trip-hero aside span { color: var(--sun); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.public-trip-hero aside strong { margin-top: 10px; font-family: var(--display); font-size: 21px; line-height: 1.35; }
.public-trip-hero aside small { margin-top: 12px; color: #bcd4d1; font-size: 11.5px; line-height: 1.5; }
.public-trip-actions { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 9px; }
.public-like-button { color: #a24d68; background: #f9e9ee; border: 1px solid #ecc5d1; }
.public-like-button.liked { color: #fff; background: var(--pink); border-color: var(--pink); }
.public-like-button b { padding: 3px 6px; background: rgba(255,255,255,.5); border-radius: 100px; }
.public-trip-summary { margin: 20px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #fffdf7; border: 1px solid #d4ded4; border-radius: 18px 6px 18px 18px; }
.public-trip-summary > div { min-width: 0; padding: 20px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 2px 10px; }
.public-trip-summary > div:not(:last-child) { border-right: 1px dashed #d4ddd4; }
.public-trip-summary > div > span { width: 42px; height: 42px; grid-row: 1 / 3; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 50% 50% 50% 12px; }
.public-trip-summary .ui-icon { width: 24px; height: 24px; }
.public-trip-summary strong { align-self: end; overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.public-trip-summary small { overflow: hidden; color: #82918a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.public-timeline { padding: clamp(28px,4vw,52px); background: rgba(255,253,247,.7); border: 1px solid #d3ddd3; border-radius: 24px 7px 24px 24px; }
.public-timeline > header h2 { margin: 7px 0 5px; color: var(--navy); font-family: var(--display); font-size: 36px; letter-spacing: -.06em; }
.public-timeline > header p { max-width: 620px; margin: 0 0 25px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.public-timeline-start { margin-bottom: 11px; }
.public-timeline-end { margin-top: 11px; }
.public-days { padding: 58px 30px 65px; position: relative; display: flex; flex-direction: column; gap: 27px; overflow: hidden; background: rgba(255,255,255,.3); border: 1px solid #d9e1d7; border-radius: 20px 6px 20px 20px; box-shadow: inset 0 0 0 7px rgba(255,255,255,.25); }
.public-days:before { content: ""; width: 3px; position: absolute; z-index: 1; top: 30px; bottom: 30px; left: 50%; background: repeating-linear-gradient(180deg,#9ebba6 0 11px,transparent 11px 20px); transform: translateX(-50%); }
.public-days:after { content: ""; width: 13px; height: 13px; position: absolute; bottom: 24px; left: 50%; z-index: 2; background: var(--teal); border: 4px solid #f1f4eb; border-radius: 50%; transform: translateX(-50%); }
.public-day-entry { position: relative; z-index: 2; }
.public-day-timeline-card { cursor: default; }
.public-day-timeline-card:hover { transform: translateY(-2px) rotate(-.2deg); }
.public-day-timeline-card.even:hover { transform: translateY(-2px) rotate(.2deg); }
.public-day-count { padding: 6px 9px; color: #287568; background: var(--teal-light); border-radius: 100px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.public-day-destination strong { min-width: 0; flex: 1; overflow: hidden; color: var(--navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.public-day-destination .ui-icon { width: 16px; height: 16px; color: #899991; }
.public-timeline-items { min-height: 0; }
.public-timeline-item { cursor: default; }
.public-timeline-item:hover { transform: translateY(-1px); }
.public-item-time { min-width: 79px; min-height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--navy); background: var(--sun-light); border: 1px solid #e7d49c; border-radius: 100px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.public-item-time .ui-icon { width: 14px; height: 14px; }
.public-type-chip { padding: 4px 7px; color: #2d7186; background: var(--blue-light); border-radius: 100px; font-size: 11.7px; font-weight: 700; }

@media (max-width: 1120px) {
  .planner-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sample-card { grid-column: 1 / -1; }
  .document-row { grid-template-columns: 42px minmax(0,1fr); }
  .document-attachment { grid-column: 2; }
}

@media (max-width: 760px) {
  .timeline-scroll { max-height: none; overflow: visible; padding: 48px 9px 55px 43px; }
  .planner-sidebar,.public-trip-summary { grid-template-columns: 1fr; }
  .sample-card { grid-column: auto; }
  .documents-header,.inspiration-heading { align-items: flex-start; flex-direction: column; }
  .documents-summary { align-self: stretch; justify-content: end; }
  .documents-locked { grid-template-columns: 42px minmax(0,1fr); }
  .documents-locked .button { grid-column: 1 / -1; }
  .document-fields { grid-template-columns: 1fr; }
  .inspiration-postcard { display: none; }
  .public-trip-hero { grid-template-columns: 1fr; }
  .public-trip-summary > div:not(:last-child) { border-right: 0; border-bottom: 1px dashed #d4ddd4; }
  .public-timeline { padding: 28px 14px; }
  .public-days { padding: 48px 14px 55px 52px; }
  .public-days:before { left: 27px; transform: none; }
  .public-days:after { left: 22px; transform: none; }
}

@media (max-width: 520px) {
  .inspiration-section { padding: 24px 15px; }
  .inspiration-carousel-caption { align-items: stretch; flex-direction: column; text-align: center; }
  .inspiration-carousel-caption i { display: none; }
  .documents-title { align-items: flex-start; }
  .documents-mark { width: 45px; height: 45px; flex-basis: 45px; border-width: 5px; }
  .documents-body,.documents-header { padding-right: 15px; padding-left: 15px; }
  .document-row { grid-template-columns: 36px minmax(0,1fr); padding: 9px; }
  .document-check span { width: 34px; height: 34px; }
  .public-timeline { padding-right: 9px; padding-left: 9px; }
  .public-days { padding-right: 9px; padding-left: 43px; }
  .public-days:before { left: 21px; }
  .public-days:after { left: 16px; }
  .public-item-time { min-width: 0; width: 32px; padding: 0; font-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .inspiration-carousel-track { animation: none !important; transform: none !important; }
  .inspiration-card-art > img { transition: none; }
}

/* Mobil a tablet: dotykové ovládanie, bezpečné okraje a čitateľnosť */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
button, a, input, select, textarea { touch-action: manipulation; }
.mobile-day-order, .mobile-item-order { display: none; }

@media (max-width: 850px), (pointer: coarse) {
  .button, .nav-button, .account-button, .map-nav-link { min-height: 44px; }
  .round-button, .journey-collapse-button, .journey-add-button, .documents-collapse,
  .day-handle, .paste-stay-to-day, .item-color-toggle, .item-color-option,
  .item-time-button, .item-link, .quick-time-save {
    min-width: 44px;
    min-height: 44px;
  }
  .timeline-filter button, .add-to-day, .documents-add, .public-share-toggle,
  .public-link-button { min-height: 44px; }
  .day-destination { min-height: 46px; }
  .day-destination select { min-height: 44px; font-size: 16px; }
  .timeline-item:hover, .day-card:hover, .public-day-timeline-card:hover,
  .public-day-timeline-card.even:hover, .inspiration-card:hover { transform: none; }
  .mobile-day-order { display: flex; gap: 5px; }
  .mobile-day-order button, .mobile-item-order button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--navy);
    background: #fff;
    border: 1px solid #d3ddd3;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
  }
  .mobile-day-order button:disabled, .mobile-item-order button:disabled {
    color: #aeb9b3;
    background: #eef1eb;
    opacity: .55;
  }
  .day-handle { display: none; }
  .mobile-item-order {
    margin: 9px 0 0;
    padding-top: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    border-top: 1px dashed #d8e0d8;
  }
  .mobile-item-order span {
    margin-right: auto;
    color: #83918b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .item-main { grid-template-columns: 46px minmax(0, 1fr); }
  .item-controls { grid-column: 1 / -1; justify-content: flex-end; padding-top: 4px; }
  .item-footer { margin-left: 0; }
  .comment-tooltip {
    width: auto;
    max-width: none;
    position: fixed;
    z-index: 120;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    top: auto;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.55;
    box-shadow: 0 20px 55px rgba(17, 52, 59, .3);
  }
  .quick-time-popover {
    width: auto;
    position: fixed;
    z-index: 125;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    top: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 15px;
    border-radius: 16px;
  }
  .quick-time-popover:before { display: none; }
  .quick-time-popover input { min-height: 44px; font-size: 16px; }
  .document-attachment label, .document-attachment a,
  .document-attachment > button:not(.document-remove) { min-height: 44px; }
  .document-attachment > button:not(.document-remove) { width: 44px; }
}

@media (max-width: 620px) {
  main { width: calc(100% - 16px); }
  .app-nav { width: calc(100% - 16px); }
  .brand-mark { width: 44px; height: 44px; flex: 0 0 44px; }
  .account-button { min-width: 44px; }
  .trip-hero { padding: 27px 19px; }
  .trip-hero h1 { font-size: clamp(34px, 11vw, 43px); overflow-wrap: anywhere; }
  .toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-actions .button { width: 100%; padding-inline: 10px; }
  .timeline-tools { align-items: stretch; flex-direction: column; }
  .timeline-filter { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline-filter button { padding-inline: 7px; }
  .timeline-scroll { padding: 45px 7px 52px 39px; }
  .timeline-spine { left: 18px; }
  .day-card:before, .day-card.even:before { left: -37px; }
  .day-card:after, .day-card.even:after { left: -19px; width: 19px; }
  .day-header { padding: 16px 14px 13px; }
  .day-body { padding: 13px 11px 15px; }
  .day-topline-actions { align-items: center; }
  .day-title { min-width: 0; }
  .day-number { font-size: 30px; }
  .mobile-day-order button { width: 42px; height: 42px; }
  .item-copy strong { font-size: 15px; line-height: 1.35; }
  .item-copy > span { font-size: 12px; line-height: 1.45; }
  .comment-preview { font-size: 15px; line-height: 1.5; }
  .status-badge, .linked-chip, .reference-chip { min-height: 27px; display: inline-flex; align-items: center; font-size: 11.5px; }
  .journey-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .documents-title p, .documents-locked p, .settings-modal .modal-header p,
  .settings-safety p, .public-share-row > small { font-size: 13px; }
  .document-fields input, .document-fields textarea { min-height: 44px; font-size: 16px; }
  .document-fields label > span, .documents-privacy, .document-remove { font-size: 11px; }
  .seo-intro > p, .landing-faq > div:first-child > p, .contact-copy > p,
  .faq-list summary, .landing-footer p { font-size: 13px; }
  .faq-list p { font-size: 13px; line-height: 1.6; }
  .inspiration-card { --carousel-card-width: min(82vw, 310px); }
  dialog.modal, dialog.auth-modal, dialog.settings-modal, dialog.journey-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 8px);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .modal-header { position: sticky; z-index: 5; top: 0; background: #fffefa; }
  .modal-footer { position: sticky; z-index: 5; bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); background: #fffefa; }
  .modal-body, .auth-layout { overscroll-behavior: contain; }
  .modal-body input, .modal-body select, .modal-body textarea,
  .auth-layout input, .settings-modal input, .settings-modal select { font-size: 16px; }
  .wizard-main input, .wizard-main select, .wizard-main textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
  .nav-actions .map-nav-link { display: none; }
  .toolbar-actions { grid-template-columns: 1fr; }
  .journey-overview { grid-template-columns: 1fr; }
  .landing-copy h1 { font-size: 40px; }
  .vacation-motif-pills { grid-template-columns: 1fr; }
  .vacation-motif-pills > span { min-height: 44px; flex-direction: row; }
}

@media (orientation: landscape) and (max-height: 520px) {
  dialog.modal, dialog.auth-modal, dialog.settings-modal, dialog.journey-modal {
    max-height: 100dvh;
    border-radius: 16px 16px 0 0;
  }
  .quick-time-popover, .comment-tooltip { bottom: 8px; }
}

/* Prihlásenie – obnova hesla a Google (doplnené pri PHP migrácii) */
.auth-link{display:inline-block;margin:2px 0 8px;padding:4px 2px;background:none;border:0;color:#2f7d70;font:600 .82rem/1 "DM Sans",sans-serif;text-decoration:underline;cursor:pointer}
.auth-link:hover{color:#1f5c52}
.auth-hint{margin:0 0 6px;font-size:.82rem;color:#5b6b66;line-height:1.4}
#authLoginTools .oauth-button.google{width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px}

/* Výber atrakcií zo zdieľanej databázy (rovnaká ako na mape) */
.map-attractions-modal { width: min(94vw, 620px); }
.map-attractions-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.map-attractions-controls label { display: grid; gap: 4px; }
.map-attractions-controls label:last-child { grid-column: 1 / -1; }
.map-attractions-controls label > span { font: 700 11.5px/1 "DM Sans", sans-serif; letter-spacing: .04em; color: #5f6b62; text-transform: uppercase; }
.map-attractions-controls select, .map-attractions-controls input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d5e4da; border-radius: 10px; background: #fff; font-size: 14px; color: #173f48; }
.map-attractions-list { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.map-attraction-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; background: #f5f9f6; border: 1px solid #dfeae2; border-radius: 12px; text-align: left; cursor: pointer; }
.map-attraction-row:hover { background: #e9f4ee; border-color: #bcd9c7; }
.map-attraction-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.map-attraction-text strong { font-size: 14px; color: #173f48; }
.map-attraction-text small { font-size: 12px; color: #6b756e; }
.map-attraction-add { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #2f7d70; border-radius: 50%; font-size: 15px; font-weight: 700; }
.map-attractions-empty { padding: 24px 12px; color: #6b756e; text-align: center; font-size: 13.5px; }

/* Termín: prepínač „konkrétny dátum" / „dĺžka pobytu" */
.date-mode-toggle { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.date-mode-btn { padding: 9px 16px; border: 1px solid #d5e4da; border-radius: 999px; background: #fff; color: #4a5a50; font: 600 13.5px/1 "DM Sans", sans-serif; cursor: pointer; }
.date-mode-btn:hover { border-color: #b6d2c1; background: #f3f9f5; }
.date-mode-btn.selected { border-color: #2f7d70; background: #2f7d70; color: #fff; }
.length-fields { display: grid; gap: 12px; }
.length-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.length-chip { padding: 9px 15px; border: 1px solid #d5e4da; border-radius: 999px; background: #fff; color: #33463c; font: 600 13.5px/1 "DM Sans", sans-serif; cursor: pointer; }
.length-chip:hover { border-color: #b6d2c1; background: #f3f9f5; }
.length-chip.selected { border-color: #2f7d70; background: #e6f3ec; color: #1d5f54; }
.length-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.length-hint { margin: 0; font-size: 13px; color: #6b756e; line-height: 1.45; }
@media (max-width: 640px) { .length-inputs { grid-template-columns: 1fr; } }

/* Odobrať deň + pridať deň v timeline */
.day-remove { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #e2d3d0; border-radius: 8px; background: #fff; color: #b4645a; font-size: 12px; cursor: pointer; }
.day-remove:hover:not(:disabled) { border-color: #e0a79f; background: #fdf1ef; }
.day-remove:disabled { opacity: .35; cursor: not-allowed; }
.timeline-add-day { display: flex; justify-content: center; margin: 14px 0 6px; }
.add-day-button { padding: 11px 22px; border: 1px dashed #b6d2c1; border-radius: 999px; background: #f4faf6; color: #23685c; font: 700 14px/1 "DM Sans", sans-serif; cursor: pointer; }
.add-day-button:hover { border-color: #2f7d70; background: #e6f3ec; }