:root{--navy:#0b1f33;--blue:#173a5e;--gold:#cd9a49;--gold-light:#fcd58a;--cream:#f7f6f2;--line:#dedfdc;--muted:#66717c;--font-display:'Playfair Display',Georgia,serif;--font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{background:var(--navy);scroll-padding-top:24px}
body{margin:0;background:var(--cream);color:var(--navy);font:16px/1.55 var(--font-body)}
button,input,select,textarea{font:inherit}
button,a,input,select{touch-action:manipulation}
button{cursor:pointer;min-height:44px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
h1{font:600 34px/1.2 var(--font-display);letter-spacing:-.5px;margin:12px 0 16px}
h2{font:600 26px/1.25 var(--font-display);margin:0 0 8px}
h3{font-size:18px;margin:8px 0}
h4{font-size:13px;margin:0 0 8px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
p{margin:8px 0 20px}
small,.note{font-size:12px;color:var(--muted)}
.note{display:block;margin-top:18px}
.sub{color:var(--muted);font-size:15px}
.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:600;color:#a47832}
.pill{display:inline-block;border-radius:20px;background:#edf0f2;padding:5px 11px;font-size:12px;margin:3px 5px 3px 0}
.notice{background:#f4eddf;border:1px solid #e6d9bf;border-radius:9px;padding:12px;font-size:13px}
.card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px;margin:20px 0}
.greeting{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--blue);margin-bottom:17px}
.avatar{background:var(--navy);color:var(--gold-light);width:29px;height:29px;border-radius:10px;display:inline-grid;place-items:center;font-weight:600;flex-shrink:0}
label{display:block;font-size:14px;margin:12px 0 6px}
input,select,textarea{width:100%;padding:14px;border:1px solid #ccd0d3;border-radius:9px;background:#fff;color:var(--navy);font-size:16px}
input[type=checkbox]{width:19px;height:19px;accent-color:var(--blue)}
.row{display:flex;gap:16px}
.row>*{flex:1;min-width:0}
.actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}
.primary,.secondary{border:0;border-radius:9px;padding:14px 23px;font-weight:500;background:var(--navy);color:#fff;overflow-wrap:anywhere}
.primary:hover{background:var(--blue)}
.primary:disabled{opacity:.6;cursor:wait}
.secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}
.gold{background:var(--gold-light);color:var(--navy)}
.textbtn{background:none;border:0;color:var(--blue);padding:8px;font-size:14px}
.options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:25px 0}
.options:has(.plan){grid-template-columns:1fr}
.option{background:#fff;border:1px solid var(--line);padding:14px 12px;border-radius:12px;text-align:left;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;font-size:14px;overflow-wrap:anywhere}
.option.selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:#edf1f5}
.option small{display:block;color:var(--muted);font-size:13px}
.option b{font-weight:500}
.radio{width:18px;height:18px;border:1px solid #a9b0b6;border-radius:50%;flex-shrink:0}
.selected .radio{background:var(--navy);border:5px solid #fff;box-shadow:0 0 0 1px var(--navy)}
.progressrow{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:10px;letter-spacing:.3px}
.progress{height:4px;background:#e3e4df;border-radius:4px;margin-bottom:24px}
.progress i{display:block;height:100%;background:var(--gold);transition:width .3s}
.daterange{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.datefield{display:block;margin:0}
.datefield-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.datefield-box{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #ccd0d3;border-radius:12px;padding:0 14px}
.datefield-ico{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.datefield-box input[type=date]{border:0;width:auto;flex:1;min-width:0;padding:14px 0;background:transparent}
.datefield-box input[type=date]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.daterange-summary{color:var(--navy);font-weight:600;margin-top:-8px}
.sample{border-left:2px solid var(--gold);padding:0 0 0 18px;margin:25px 0}
.sample .time{color:#94703e;font-size:12px;font-weight:600;letter-spacing:1px}
.sample p{font-size:14px;color:var(--muted);margin:5px 0}
dialog{border:0;border-radius:18px;padding:30px 22px;width:calc(100% - 24px);max-width:460px;color:var(--navy);box-shadow:0 25px 80px #0003;max-height:calc(100dvh - 32px);overflow:auto}
dialog::backdrop{background:#0b1f3388;backdrop-filter:blur(4px)}
.close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:28px;color:var(--muted)}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:10px;padding:12px 22px;display:none;z-index:30;max-width:90%;font-size:14px}
.paystatus{margin:16px 0}
.paystatus:empty{display:none}
.formerror{color:#963a21;font-size:14px}
.payment-brand{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:15px 0;border-top:1px solid var(--line);margin-top:20px}
.payment-brand b{color:#007eb5}
.payment-brand span{font-size:12px;color:var(--muted);text-align:right}
.payment-actions{display:flex;flex-direction:column;gap:12px}
.payment-actions .secondary{font-size:14px}
.printonly{display:none}

/* app shell */
.app-shell{max-width:480px;margin:0 auto;background:var(--cream);min-height:100dvh;position:relative;box-shadow:0 0 60px #0002;display:flow-root}
.app-shell>header,.app-shell>footer{display:none}
.screen{padding:24px 20px 60px;min-height:100dvh}

/* splash */
.splash-screen{position:fixed;inset:0;z-index:20;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px}
.splash-mark{font:600 46px/1 var(--font-display);color:#fff}
.splash-mark i{color:var(--gold);font-style:normal}
.splash-screen p{color:#c9d3dd;font-size:13px;letter-spacing:.3px;max-width:220px}

/* welcome */
.welcome-screen{display:flex;flex-direction:column;min-height:100dvh}
.welcome-hero{height:54vh;min-height:300px;background:url('hero-welcome.jpg') center/cover;flex-shrink:0;position:relative}
.welcome-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,51,.55),rgba(11,31,51,0) 40%)}
.welcome-topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:max(18px,env(safe-area-inset-top)) 20px 0 20px}
.welcome-brand{display:flex;align-items:center;gap:8px;color:#fff}
.welcome-brand .brand-icon-sm{width:26px;height:26px;border-radius:8px;display:block}
.welcome-brand b{font:600 19px var(--font-display)}
.welcome-skip{background:none;border:0;color:#fff;font-size:14px;padding:6px;min-height:auto}
.welcome-body{background:var(--cream);border-radius:28px 28px 0 0;margin-top:-26px;padding:34px 24px 40px;position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:12px}
.welcome-badge{display:inline-flex;align-items:center;gap:6px;background:var(--gold-light);color:#5c4111;font-size:11px;font-weight:600;letter-spacing:1px;padding:7px 14px;border-radius:20px;align-self:flex-start}
.welcome-body h1{font-size:29px;margin:0 0 2px}
.welcome-body h1 i{color:var(--gold);font-style:normal}
.welcome-body .primary{background:var(--gold);color:var(--navy);border-radius:14px;padding:16px;font-size:16px;margin-top:6px}
.welcome-body .note b{color:var(--navy);font-weight:600}
.welcome-features{display:flex;gap:7px;margin-top:16px}
.welcome-feature{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:40px;padding:6px 10px 6px 6px;font:600 11.5px/1.2 var(--font-display);color:var(--navy)}
.welcome-feature i{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#fdf3d9,var(--gold-light));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-style:normal;box-shadow:inset 0 0 0 1px #e9c87a}
.welcome-feature svg{width:15px;height:15px;color:var(--gold)}

/* chat-style quiz */
.chat-quiz .actions{border-top:0;padding-top:0;margin-top:20px}
.quiz-transcript{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.quiz-transcript .bubble{max-width:88%;align-self:flex-start;background:#fff;box-shadow:0 1px 4px #0b1f3320;margin:0}
.quiz-transcript .bubble.user{align-self:flex-end;background:var(--navy);color:#fff;border-radius:12px 0 12px 12px}
.quiz-transcript .bubble.current{max-width:100%;background:transparent;box-shadow:none;padding:2px 0;font:600 21px/1.3 var(--font-display);color:var(--navy)}
.quiz-transcript .bubble.current .eyebrow{display:block;font:600 11px/1 var(--font-body);margin-bottom:6px}

/* plans */
.plan-list{display:flex;flex-direction:column;gap:14px;margin:22px 0}
.plan-card{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.plan-card.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.plan-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan-card-head b{font-size:17px}
.plan-card .price{font-size:20px;letter-spacing:-.5px}
.plan-card p{margin:8px 0;font-size:13px;color:var(--muted)}
.plan-check{list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--navy)}
.plan-check li{padding:4px 0 4px 22px;position:relative}
.plan-check li:before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}
.plan-badge{display:inline-block;background:var(--gold-light);color:#5c4111;font-size:10px;font-weight:600;letter-spacing:1px;padding:4px 9px;border-radius:20px;margin-bottom:8px}
.note-card{padding:16px 18px;margin:10px 0}
.note-card b{font-size:14px}

/* generating screen */
.generating-screen{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:60px}
.generating-screen h1{font-size:24px}
.progress-ring{--p:0;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--line) 0);margin-bottom:20px}
.progress-ring:before{content:'';position:absolute}
.progress-ring span{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;font:600 20px var(--font-display);color:var(--navy)}
.gen-checklist{list-style:none;margin:20px 0;padding:0;text-align:left;width:100%}
.gen-step{display:flex;align-items:center;gap:10px;padding:10px 4px;font-size:14px;color:var(--muted)}
.gen-step i{width:20px;text-align:center;font-style:normal;color:var(--gold);flex-shrink:0}
.gen-step.active{color:var(--navy);font-weight:600}
.gen-step.done{color:var(--navy)}

/* trip workspace */
.workspace{padding:20px 20px 90px}
.triphead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.triphead h1{font-size:26px;margin:6px 0 4px}
.triphead .secondary{font-size:13px;padding:10px 14px;white-space:nowrap}
.tab-content{margin-top:10px}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;scroll-snap-type:x proximity}
.day-pill{border:1px solid var(--line);background:#fff;border-radius:20px;padding:10px 16px;white-space:nowrap;flex-shrink:0;scroll-snap-align:start;font-size:13px;min-height:auto}
.day-pill small{display:block;color:var(--muted);font-size:11px}
.day-pill.active{background:var(--navy);color:#fff}
.day-pill.active small{color:#c9d3dd}
.timeline{padding:6px 0}
.timeline-section{margin:18px 0}
.timeline-section h4{margin:0 0 6px;color:var(--gold);letter-spacing:1.5px}
.event{display:grid;grid-template-columns:56px 1fr;gap:14px;margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.event time{font-size:13px;color:var(--muted);padding-top:4px}
.event p{font-size:14px;color:var(--muted);margin:6px 0}
.event h3{font-size:16px;margin:0}

/* bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:480px;margin:0 auto;display:flex;background:#fff;border-top:1px solid var(--line);padding:8px 6px max(8px,env(safe-area-inset-bottom))}
.tabbar-item{flex:1;background:none;border:0;color:var(--muted);font-size:11px;padding:8px 4px;border-radius:10px;min-height:52px}
.tabbar-item.active{color:var(--navy);font-weight:600;background:var(--cream)}
.tabbar-badge{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-left:3px;vertical-align:top}

/* chat tab */
.chat-tab{display:flex;flex-direction:column}
.chatlog{display:flex;flex-direction:column;gap:2px;margin:16px 0;min-height:200px}
.bubble{max-width:88%;align-self:flex-start;background:#fff;box-shadow:0 1px 4px #0b1f3320;padding:14px;border-radius:0 12px 12px 12px;font-size:14px;margin:6px 0}
.bubble.user{align-self:flex-end;background:var(--navy);color:#fff;border-radius:12px 0 12px 12px}
.quick{background:#fff;border:1px solid var(--line);padding:10px 12px;border-radius:9px;font-size:13px;margin:3px 0;text-align:left;min-height:44px;width:100%}
.chatinput{display:flex;gap:7px;margin-top:8px}
.chatinput input{min-width:0;font-size:16px}
.chatinput button{padding:10px;flex-shrink:0;min-width:48px}

/* mala checklist */
.checkrow{display:flex;gap:13px;padding:13px 0;align-items:center;border-bottom:1px solid var(--line);font-size:15px;margin:0;min-height:44px}
.checkrow.done span{text-decoration:line-through;color:var(--muted)}
.checkrow small{display:block;font-size:12px;color:var(--muted)}
.checkrow input{flex-shrink:0;width:22px;height:22px}

/* profile tab */
.profile-card{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.profile-avatar{width:48px;height:48px;font-size:18px;border-radius:14px}

/* misc brand (header hidden, kept for reference/future use) */
.brand{background:none;border:0;display:flex;align-items:center;gap:10px;text-align:left;color:var(--navy)}
.brand-icon{height:38px;width:38px;display:block;border-radius:9px}
.brand-logo{height:38px;width:auto;display:block}

@media(max-width:360px){.options{grid-template-columns:1fr}.tabbar-item{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{
  .app-shell>header,.app-shell>footer{display:none!important}
  .tabbar,.days,.chat-tab,.triphead button,.notice{display:none!important}
  .screen,.workspace{padding:0}
  .timeline{display:none}
  .printonly{display:block}
  .event{break-inside:avoid}
  body{background:#fff}
}