/* ============================================================
   TRAVEL SEASONS - Mobile App Prototype
   Design system: minimalist, modern, travel-grade
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root{
  /* Brand - sophisticated emerald */
  --brand:#0F766E;
  --brand-deep:#064E3B;
  --brand-mid:#10B981;
  --brand-soft:#D1FAE5;
  --brand-tint:#ECFDF5;

  /* Neutrals - warm stone */
  --ink-900:#0C0A09;
  --ink-800:#1C1917;
  --ink-700:#44403C;
  --ink-600:#57534E;
  --ink-500:#78716C;
  --ink-400:#A8A29E;
  --ink-300:#D6D3D1;
  --ink-200:#E7E5E4;
  --ink-100:#F5F5F4;
  --ink-50:#FAFAF9;

  /* Surface */
  --surface:#FFFFFF;
  --surface-cream:#FBFAF7;

  /* Accent - used sparingly */
  --accent:#B45309;
  --accent-soft:#FEF3C7;

  /* Status */
  --good:#16A34A;
  --good-soft:#DCFCE7;
  --warn:#CA8A04;
  --warn-soft:#FEF9C3;
  --bad:#DC2626;
  --bad-soft:#FEE2E2;
  --info:#2563EB;
  --info-soft:#DBEAFE;

  /* Radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* Shadows */
  --shadow-card:0 1px 2px rgba(12,10,9,.04), 0 4px 16px rgba(12,10,9,.04);
  --shadow-sticky:0 -2px 16px rgba(12,10,9,.06);
  --shadow-pop:0 8px 32px rgba(12,10,9,.10);

  /* Type */
  --font:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font);
  color:var(--ink-800);
  background:#E7E5E4;
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── DEVICE FRAME ── */
.stage{
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  padding:32px 16px;
  background:linear-gradient(180deg,#E7E5E4 0%, #D6D3D1 100%);
}
.device{
  width:390px;height:844px;
  background:#000;border-radius:54px;
  padding:12px;
  box-shadow:0 30px 80px rgba(12,10,9,.18), 0 12px 24px rgba(12,10,9,.12);
  position:relative;flex-shrink:0;
}
.screen{
  width:100%;height:100%;background:var(--surface);
  border-radius:42px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}

/* Notch */
.notch{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:#000;border-radius:0 0 22px 22px;z-index:10;
}

/* Status bar */
.status-bar{
  height:48px;flex-shrink:0;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 28px 6px;
  font-size:15px;font-weight:600;color:var(--ink-900);
  position:relative;z-index:5;
}
.status-bar .indicators{display:flex;align-items:center;gap:6px;}
.status-bar svg{width:16px;height:16px;}

/* Home indicator */
.home-bar{
  height:30px;flex-shrink:0;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  background:transparent;
}
.home-bar::after{
  content:'';width:135px;height:5px;background:var(--ink-900);border-radius:99px;
}

/* App content area */
.app{
  flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.app-body{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.app-body::-webkit-scrollbar{display:none;}

/* ── APP HEADER ── */
.app-header{
  padding:8px 20px 14px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);
  flex-shrink:0;
}
.app-header.scroll-shadow{box-shadow:0 1px 0 var(--ink-100);}
.app-header h1{font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--ink-900);}
.app-header .header-actions{display:flex;gap:6px;}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;color:var(--ink-700);
  transition:.15s;
}
.icon-btn:active{background:var(--ink-100);}
.icon-btn svg{width:22px;height:22px;}
.icon-btn .badge-dot{
  position:absolute;top:8px;right:8px;
  width:8px;height:8px;border-radius:50%;background:var(--brand);
  border:2px solid var(--surface);
}
.icon-btn{position:relative;}

/* Header with back button */
.app-header.detail{padding:12px 8px 14px;}
.back-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-800);background:transparent;border:none;cursor:pointer;
}
.back-btn svg{width:22px;height:22px;}

/* ── BOTTOM TAB NAV ── */
.tab-bar{
  flex-shrink:0;background:var(--surface);
  border-top:1px solid var(--ink-100);
  display:flex;justify-content:space-around;align-items:center;
  padding:6px 8px 4px;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:6px 4px;
  text-decoration:none;color:var(--ink-500);
  font-size:10px;font-weight:600;
  border:none;background:none;cursor:pointer;
  transition:.15s;
}
.tab-item svg{width:24px;height:24px;stroke-width:1.6;}
.tab-item.active{color:var(--brand);}
.tab-item.active svg{stroke-width:2.2;}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-weight:700;color:var(--ink-900);letter-spacing:-0.015em;}
h1{font-size:24px;}
h2{font-size:20px;}
h3{font-size:17px;}
h4{font-size:15px;}
.eyebrow{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--brand);
}
.muted{color:var(--ink-500);}
.tiny{font-size:12px;}
.small{font-size:13px;}
.lg{font-size:17px;}
.xl{font-size:20px;}

/* ── SECTION ── */
.section{padding:20px 20px;}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:12px;
}
.section-head h2{font-size:18px;}
.section-head a{font-size:13px;color:var(--brand);text-decoration:none;font-weight:600;}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:14px;font-weight:600;font-size:15px;
  border:none;cursor:pointer;transition:.15s;text-decoration:none;
  font-family:var(--font);
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:active{background:var(--brand-deep);}
.btn-ghost{background:transparent;color:var(--brand);}
.btn-secondary{background:var(--ink-100);color:var(--ink-800);}
.btn-block{width:100%;padding:16px;}
.btn-lg{padding:18px 24px;font-size:16px;}
.btn svg{width:18px;height:18px;}

/* Sticky CTA bar */
.cta-bar{
  background:var(--surface);
  padding:14px 20px 16px;
  border-top:1px solid var(--ink-100);
  flex-shrink:0;display:flex;gap:10px;align-items:center;
}
.cta-price{flex:1;}
.cta-price .label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-500);font-weight:700;}
.cta-price .value{font-size:20px;font-weight:800;color:var(--ink-900);}

/* ── CARDS ── */
.card{
  background:var(--surface);border-radius:var(--r-md);
  border:1px solid var(--ink-100);
  overflow:hidden;
}
.card-soft{background:var(--ink-50);border:1px solid transparent;}
.card-padded{padding:18px;}

/* ── INPUTS ── */
.input{
  width:100%;padding:14px 16px;
  border:1.5px solid var(--ink-200);background:var(--surface);
  border-radius:14px;font-size:15px;font-family:var(--font);
  color:var(--ink-900);
  transition:.15s;
}
.input:focus{outline:none;border-color:var(--brand);}
.input-otp{
  width:48px;height:56px;text-align:center;font-size:22px;font-weight:700;
  border:1.5px solid var(--ink-200);border-radius:14px;background:var(--surface);
  color:var(--ink-900);font-family:var(--font);
}
.input-otp:focus{outline:none;border-color:var(--brand);}
.input-otp.filled{border-color:var(--brand);background:var(--brand-tint);}

.field-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field-label{font-size:12px;font-weight:700;color:var(--ink-700);text-transform:uppercase;letter-spacing:0.04em;}

/* ── CHIPS ── */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--ink-100);color:var(--ink-700);white-space:nowrap;
  border:none;cursor:pointer;font-family:var(--font);
}
.chip svg{width:14px;height:14px;}
.chip-active{background:var(--ink-900);color:var(--surface);}
.chip-brand{background:var(--brand-tint);color:var(--brand-deep);}
.chip-good{background:var(--good-soft);color:#166534;}
.chip-warn{background:var(--warn-soft);color:#854D0E;}
.chip-bad{background:var(--bad-soft);color:#991B1B;}
.chip-outline{background:transparent;border:1px solid var(--ink-200);color:var(--ink-700);}

.chip-row{
  display:flex;gap:8px;overflow-x:auto;padding:4px 20px 8px;scrollbar-width:none;
}
.chip-row::-webkit-scrollbar{display:none;}

/* ── BADGES ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
}

/* ── LIST ── */
.list-item{
  display:flex;align-items:center;gap:14px;padding:14px 20px;
  background:var(--surface);border-bottom:1px solid var(--ink-100);
  cursor:pointer;
  text-decoration:none;color:inherit;
}
.list-item:last-child{border-bottom:none;}
.list-item .li-icon{
  width:42px;height:42px;border-radius:12px;
  background:var(--ink-100);color:var(--ink-700);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.list-item .li-icon.brand{background:var(--brand-tint);color:var(--brand-deep);}
.list-item .li-icon svg{width:20px;height:20px;}
.list-item .li-text{flex:1;min-width:0;}
.list-item .li-title{font-size:15px;font-weight:600;color:var(--ink-900);}
.list-item .li-sub{font-size:12.5px;color:var(--ink-500);margin-top:1px;}
.list-item .li-action{color:var(--ink-400);}
.list-item .li-action svg{width:18px;height:18px;}
.list-item:active{background:var(--ink-50);}

/* ── TOUR CARD ── */
.tour-card{
  border-radius:18px;overflow:hidden;background:var(--surface);
  margin-bottom:16px;border:1px solid var(--ink-100);
  box-shadow:var(--shadow-card);text-decoration:none;color:inherit;display:block;
}
.tour-img{
  height:200px;background:linear-gradient(135deg,#0F766E,#064E3B);
  position:relative;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:14px;
}
.tour-img .img-badges{display:flex;gap:6px;}
.tour-img .img-badge{
  background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);color:#fff;
  padding:5px 10px;border-radius:99px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
}
.tour-img .img-fav{
  width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;align-self:flex-end;
  border:none;cursor:pointer;
}
.tour-img .img-fav svg{width:18px;height:18px;transition:.2s;}
.tour-img .img-fav.liked{background:rgba(220,38,38,0.85);}
.tour-img .img-fav.liked svg{fill:#fff;stroke:#fff;}
.tour-meta{padding:14px 16px;}
.tour-meta .tour-title{font-size:17px;font-weight:700;color:var(--ink-900);margin-bottom:4px;letter-spacing:-0.01em;}
.tour-meta .tour-sub{font-size:12.5px;color:var(--ink-500);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tour-meta .tour-sub span{display:inline-flex;align-items:center;gap:4px;}
.tour-meta .tour-sub svg{width:13px;height:13px;}
.tour-meta .tour-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--ink-100);}
.tour-meta .tour-price{font-size:16px;font-weight:800;color:var(--ink-900);}
.tour-meta .tour-price small{font-size:11px;color:var(--ink-500);font-weight:500;}

/* Tour image color variants */
.img-bali{background:linear-gradient(135deg,#0E7490,#0C4A6E);}
.img-japan{background:linear-gradient(135deg,#9D174D,#500724);}
.img-bhutan{background:linear-gradient(135deg,#0F766E,#064E3B);}
.img-iceland{background:linear-gradient(135deg,#1E3A8A,#0F172A);}
.img-kenya{background:linear-gradient(135deg,#B45309,#7C2D12);}
.img-swiss{background:linear-gradient(135deg,#475569,#1E293B);}
.img-rajasthan{background:linear-gradient(135deg,#C2410C,#7C2D12);}

/* ── HERO ── */
.hero-greeting{padding:8px 20px 16px;}
.hero-greeting .greet{font-size:13px;color:var(--ink-500);font-weight:500;}
.hero-greeting .name{font-size:24px;font-weight:800;color:var(--ink-900);letter-spacing:-0.02em;}

/* Search bar */
.search-bar{
  margin:0 20px 16px;
  background:var(--ink-100);border-radius:14px;
  padding:12px 16px;display:flex;align-items:center;gap:10px;
  color:var(--ink-500);font-size:14px;
}
.search-bar svg{width:18px;height:18px;color:var(--ink-500);}

/* ── COUNTDOWN ── */
.countdown-card{
  margin:0 20px 16px;
  border-radius:20px;padding:22px;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  color:#fff;position:relative;overflow:hidden;
}
.countdown-card .glow{position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);}
.countdown-card .label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;opacity:0.85;margin-bottom:6px;position:relative;}
.countdown-card .dest{font-size:24px;font-weight:800;letter-spacing:-0.02em;margin-bottom:14px;position:relative;}
.countdown-card .dest small{font-size:13px;font-weight:500;opacity:0.85;display:block;margin-top:2px;}
.countdown-card .timer{display:flex;gap:14px;position:relative;}
.countdown-card .timer .unit{flex:1;background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);border-radius:12px;padding:12px;text-align:center;}
.countdown-card .timer .num{font-size:22px;font-weight:800;}
.countdown-card .timer .lab{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;opacity:0.85;font-weight:600;margin-top:2px;}

/* ── PROGRESS ── */
.progress{height:6px;background:var(--ink-100);border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;background:var(--brand);border-radius:99px;}
.progress-amber .progress-fill{background:var(--warn);}

/* ── TIMELINE ── */
.timeline{position:relative;padding-left:30px;}
.timeline::before{
  content:'';position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--ink-200);
}
.tl-item{position:relative;padding:6px 0 22px;}
.tl-item::before{
  content:'';position:absolute;left:-22px;top:10px;width:12px;height:12px;
  border-radius:50%;background:var(--surface);border:2px solid var(--ink-300);
}
.tl-item.active::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint);}
.tl-item.done::before{background:var(--brand);border-color:var(--brand);}
.tl-item .tl-when{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-500);font-weight:700;}
.tl-item .tl-title{font-size:15px;font-weight:700;color:var(--ink-900);margin-top:2px;}
.tl-item .tl-body{font-size:13px;color:var(--ink-600);margin-top:4px;line-height:1.55;}

/* ── DOCS ── */
.doc-row{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--surface);border:1px solid var(--ink-100);border-radius:14px;
  margin-bottom:10px;
}
.doc-icon{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.doc-icon.pending{background:var(--ink-100);color:var(--ink-500);}
.doc-icon.uploaded{background:var(--info-soft);color:var(--info);}
.doc-icon.verified{background:var(--good-soft);color:var(--good);}
.doc-icon.rejected{background:var(--bad-soft);color:var(--bad);}
.doc-info{flex:1;min-width:0;}
.doc-info .name{font-size:14.5px;font-weight:600;color:var(--ink-900);}
.doc-info .status{font-size:12px;color:var(--ink-500);margin-top:2px;display:flex;align-items:center;gap:4px;}
.doc-action{color:var(--ink-400);}
.doc-action svg{width:18px;height:18px;}

/* ── AVATAR ── */
.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  flex-shrink:0;
}
.avatar.lg{width:64px;height:64px;font-size:20px;}
.avatar.xl{width:88px;height:88px;font-size:28px;}
.avatar.sm{width:32px;height:32px;font-size:12px;}
.avatar.tone-1{background:#0F766E;}
.avatar.tone-2{background:#9D174D;}
.avatar.tone-3{background:#1E3A8A;}
.avatar.tone-4{background:#B45309;}
.avatar.tone-5{background:#475569;}

/* ── FAMILY MEMBER ── */
.member-row{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--ink-100);
}
.member-row:last-child{border-bottom:none;}
.member-row .info{flex:1;min-width:0;}
.member-row .info .name{font-size:14.5px;font-weight:600;color:var(--ink-900);}
.member-row .info .relation{font-size:12px;color:var(--ink-500);margin-top:1px;}

/* ── STAT TILE ── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{
  padding:14px;background:var(--surface);border:1px solid var(--ink-100);border-radius:14px;
}
.stat .lbl{font-size:11px;color:var(--ink-500);text-transform:uppercase;letter-spacing:0.05em;font-weight:700;}
.stat .val{font-size:20px;font-weight:800;color:var(--ink-900);margin-top:4px;}
.stat .sub{font-size:11px;color:var(--ink-500);margin-top:2px;}

/* ── CONCIERGE STAGE ── */
.stage-card{
  border:1px solid var(--ink-100);border-radius:16px;padding:16px;background:var(--surface);
  margin-bottom:10px;
}
.stage-card .head{display:flex;align-items:center;gap:12px;}
.stage-card .badge-day{
  width:48px;height:48px;border-radius:14px;background:var(--brand-tint);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
  flex-direction:column;line-height:1;
}
.stage-card .badge-day .num{font-size:18px;}
.stage-card .badge-day .unit{font-size:9px;font-weight:700;letter-spacing:0.06em;margin-top:2px;}
.stage-card .meta{flex:1;}
.stage-card .meta .ttl{font-size:15px;font-weight:700;color:var(--ink-900);}
.stage-card .meta .when{font-size:11.5px;color:var(--ink-500);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;margin-top:2px;}
.stage-card .topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--ink-100);}
.stage-card.active{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint);}
.stage-card.done .badge-day{background:var(--good-soft);color:#166534;}

/* ── CHAT ── */
.chat-list{padding:16px 16px 80px;display:flex;flex-direction:column;gap:10px;}
.bubble{max-width:78%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.45;}
.bubble.in{background:var(--ink-100);color:var(--ink-900);align-self:flex-start;border-bottom-left-radius:6px;}
.bubble.out{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:6px;}
.bubble .time{font-size:10px;opacity:0.7;margin-top:4px;display:block;}
.day-divider{align-self:center;font-size:11px;color:var(--ink-500);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin:6px 0;}
.composer{
  position:absolute;bottom:0;left:0;right:0;background:var(--surface);
  padding:12px 16px 16px;border-top:1px solid var(--ink-100);
  display:flex;gap:10px;align-items:center;
}
.composer .input{flex:1;padding:12px 16px;border-radius:99px;background:var(--ink-100);border:none;font-size:14px;}
.composer .send-btn{
  width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
}
.composer .send-btn svg{width:20px;height:20px;}
.composer .send-btn:active{background:var(--brand-deep);}

.chat-header{
  padding:8px 12px 12px;display:flex;align-items:center;gap:12px;
  background:var(--surface);border-bottom:1px solid var(--ink-100);
}
.chat-header .who{flex:1;}
.chat-header .who .name{font-size:15px;font-weight:700;color:var(--ink-900);}
.chat-header .who .stat{font-size:11.5px;color:var(--good);font-weight:600;display:flex;align-items:center;gap:4px;}
.chat-header .who .stat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--good);}

/* ── PROFILE ── */
.profile-hero{
  padding:30px 20px 24px;display:flex;flex-direction:column;align-items:center;
  background:var(--surface);
}
.profile-hero .name{font-size:22px;font-weight:800;color:var(--ink-900);margin-top:14px;letter-spacing:-0.01em;}
.profile-hero .meta{font-size:13px;color:var(--ink-500);margin-top:4px;}
.profile-hero .badges{display:flex;gap:6px;margin-top:14px;}

/* ── ALERT BAR (inline) ── */
.alert{
  margin:0 20px 16px;padding:14px;border-radius:14px;
  display:flex;align-items:flex-start;gap:12px;
  background:var(--brand-tint);border:1px solid var(--brand-soft);
}
.alert.warn{background:var(--warn-soft);border-color:#FEF3C7;}
.alert .ico{flex-shrink:0;color:var(--brand-deep);}
.alert.warn .ico{color:#92400E;}
.alert .ico svg{width:20px;height:20px;}
.alert .body{font-size:13px;color:var(--ink-800);line-height:1.5;}
.alert .body strong{color:var(--ink-900);}

/* ── SAGE AI FAB ── */
.sage-fab{
  position:absolute;right:16px;bottom:90px;z-index:48;
  background:linear-gradient(135deg, var(--brand), var(--brand-deep));
  color:#fff;text-decoration:none;
  padding:13px 18px;border-radius:99px;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:13px;letter-spacing:0.01em;
  box-shadow:0 10px 28px rgba(15,118,110,0.4), 0 2px 6px rgba(15,118,110,0.2);
  border:1.5px solid rgba(255,255,255,0.18);
  transition:.2s;font-family:var(--font);
}
.sage-fab:active{transform:scale(0.96);}
.sage-fab svg{width:18px;height:18px;}
.sage-fab .sparkle-bg{
  position:absolute;inset:0;border-radius:99px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%);
  pointer-events:none;
}

/* ── SAGE BANNER (for home screen) ── */
.sage-banner{
  margin:0 20px 16px;
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:16px;
  background:linear-gradient(135deg, var(--brand-tint), #FFFFFF);
  border:1px solid var(--brand-soft);
  text-decoration:none;color:inherit;cursor:pointer;
  position:relative;overflow:hidden;
}
.sage-banner::before{
  content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle, rgba(15,118,110,0.08), transparent 60%);
}
.sage-banner .sage-icon{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;position:relative;
  background:linear-gradient(135deg, var(--brand), var(--brand-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(15,118,110,0.25);
}
.sage-banner .sage-icon svg{width:20px;height:20px;}
.sage-banner .sage-text{flex:1;position:relative;}
.sage-banner .sage-text .ttl{font-weight:700;font-size:14px;color:var(--ink-900);}
.sage-banner .sage-text .sub{font-size:12px;color:var(--ink-500);margin-top:1px;}
.sage-banner .sage-arrow{color:var(--brand);position:relative;}

/* ── SOS BUTTON ── */
.sos-fab{
  position:absolute;right:18px;bottom:90px;
  background:var(--bad);color:#fff;
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(220,38,38,.35);
  z-index:50;border:none;cursor:pointer;
  font-size:13px;font-weight:800;letter-spacing:0.04em;
}

/* ── DAY-BY-DAY ── */
.day-card{
  background:var(--surface);border:1px solid var(--ink-100);
  border-radius:14px;padding:16px;margin-bottom:10px;
}
.day-card .head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.day-card .day-num{
  width:42px;height:42px;border-radius:12px;background:var(--brand-tint);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex-shrink:0;
  flex-direction:column;line-height:1;
}
.day-card .day-num small{font-size:10px;font-weight:600;}
.day-card .day-num .n{font-size:16px;}
.day-card .head h4{font-size:15px;font-weight:700;flex:1;}
.day-card .head .city{font-size:11.5px;color:var(--ink-500);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;}
.day-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.day-card li{font-size:13px;color:var(--ink-700);padding-left:14px;position:relative;line-height:1.5;}
.day-card li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--brand-mid);}

/* ── INDEX GALLERY ── */
.gallery-bg{
  min-height:100vh;background:linear-gradient(180deg,#FAFAF9 0%,#E7E5E4 100%);
  padding:48px 20px 80px;
}
.gallery-head{
  max-width:1200px;margin:0 auto 36px;
}
.gallery-head .brand{
  display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border-radius:99px;
  background:var(--brand-tint);color:var(--brand-deep);font-size:12px;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;margin-bottom:14px;
}
.gallery-head h1{font-size:38px;font-weight:800;letter-spacing:-0.02em;color:var(--ink-900);}
.gallery-head h1 .accent{
  background:linear-gradient(120deg,var(--brand),var(--brand-mid));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.gallery-head p{color:var(--ink-500);margin-top:8px;font-size:15px;max-width:600px;}
.gallery-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr;}}

.frame-card{display:block;text-decoration:none;color:inherit;cursor:pointer;}
.frame-thumb{
  width:100%;aspect-ratio:9/19.5;
  background:#000;border-radius:32px;padding:8px;
  box-shadow:0 12px 36px rgba(12,10,9,.12);
  transition:.25s;
  position:relative;overflow:hidden;
}
.frame-card:hover .frame-thumb{transform:translateY(-4px);box-shadow:0 20px 56px rgba(12,10,9,.18);}
.frame-thumb iframe{
  width:100%;height:100%;border:none;border-radius:24px;
  pointer-events:none;background:#fff;
  transform:scale(0.95);transform-origin:top center;
}
.frame-label{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:0 6px;}
.frame-label .nm{font-size:14px;font-weight:700;color:var(--ink-900);}
.frame-label .open{font-size:12px;color:var(--brand);font-weight:600;}

/* ── PROTO NAV (floating - jumps back to gallery) ── */
.proto-nav{
  position:fixed;top:16px;right:16px;z-index:9999;
  background:rgba(12,10,9,0.85);backdrop-filter:blur(12px);
  color:#fff;
  padding:9px 14px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  text-decoration:none;font-family:var(--font);
  box-shadow:0 4px 16px rgba(12,10,9,0.2);
  display:inline-flex;align-items:center;gap:6px;
  transition:.2s;
}
.proto-nav:hover{background:var(--brand);transform:scale(1.04);}
.proto-nav svg{width:14px;height:14px;}

/* Utilities */
.row{display:flex;gap:8px;align-items:center;}
.col{display:flex;flex-direction:column;gap:8px;}
.between{justify-content:space-between;}
.center{align-items:center;}
.spacer{flex:1;}
.mb-8{margin-bottom:8px;}.mb-12{margin-bottom:12px;}.mb-16{margin-bottom:16px;}.mb-20{margin-bottom:20px;}
.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}.mt-20{margin-top:20px;}
.px-20{padding-left:20px;padding-right:20px;}
.no-bottom-pad .app-body{padding-bottom:0;}