/*
  Hello Shanghai — Mobile Design System 2
  Neon & Stone visual tokens, native interaction polish, and one line-icon language.

  Display/body font slots are prepared for locally bundled Space Grotesk and Inter.
  No remote font request is made, so the app remains reliable in mainland China.
*/
:root{
  --hs-font-display:"Space Grotesk","Sora","Outfit","SF Pro Display","Segoe UI",system-ui,sans-serif;
  --hs-font-ui:"Inter","SF Pro Text","Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;

  --hs-ink:#0b0f1a;
  --hs-ink-soft:#3a4152;
  --hs-muted:#878ea3;
  --hs-surface:#ffffff;
  --hs-surface-2:#f6f7fb;
  --hs-border:#e7e9f2;

  --hs-cyan:#0891b2;
  --hs-cyan-bright:#22d3ee;
  --hs-violet:#7c3aed;
  --hs-teal:#0d9488;
  --hs-sand:#e8dcc8;
  --hs-sand-deep:#9a6642;
  --hs-danger:#e1281b;
  --hs-success:#16a34a;

  --hs-radius-card:20px;
  --hs-radius-control:14px;
  --hs-shadow-card:0 1px 2px rgba(17,24,44,.03),0 8px 22px -8px rgba(17,24,44,.10);
  --hs-shadow-raised:0 2px 5px rgba(17,24,44,.05),0 18px 36px -20px rgba(17,24,44,.22);
  --hs-ease:cubic-bezier(.25,.9,.4,1);
}

html,body{
  min-height:100%;
  color-scheme:light;
  overscroll-behavior:none;
}
body,
button,
input,
select,
textarea{
  font-family:var(--hs-font-ui);
}
h1,h2,h3,h4,
.topbar h1,
.home-hero h2,
.home-section-intro h3,
.home-primary-copy strong,
.weekly-guide-head h2,
.city-week-detail h2,
.person-main h3,
.meetup-cover-copy h3{
  font-family:var(--hs-font-display);
}
body{
  color:var(--hs-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,a,[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(34,211,238,.28);
  outline-offset:2px;
}

/* One icon language: 24px viewBox, rounded 1.75px stroke. */
.ui-line-icon{
  display:block;
  width:1.35em;
  height:1.35em;
  flex:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
[data-ui-icon]{
  display:grid;
  place-items:center;
}
.settings-icon .ui-line-icon,
.reset-mail-icon .ui-line-icon,
.verify-mail-icon .ui-line-icon,
.referral-gift .ui-line-icon,
.hello-dialog-icon .ui-line-icon,
.night-pass-orb .ui-line-icon{
  width:24px;
  height:24px;
}
.empty-icon,
.empty-state>.empty-icon,
.city-week-empty>.empty-icon{
  width:54px;
  height:54px;
  margin:0 auto;
  border:1px solid var(--hs-border);
  border-radius:18px;
  color:var(--hs-violet);
  background:linear-gradient(145deg,#fff,#f4f0ff);
  box-shadow:var(--hs-shadow-card);
}
.empty-icon .ui-line-icon{
  width:26px;
  height:26px;
}
.notification-icon{
  display:grid;
  place-items:center;
}
.notification-icon .ui-line-icon{
  width:21px;
  height:21px;
}
.distance-chip,
.metro-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.distance-chip .ui-line-icon,
.metro-chip .ui-line-icon{
  width:13px;
  height:13px;
}
.meetup-fact-icon{
  display:grid;
  place-items:center;
}
.meetup-fact-icon .ui-line-icon{
  width:20px;
  height:20px;
}

/* Typography scale and calm content surfaces. */
.eyebrow,
.home-primary-copy small,
.home-section-intro>div:first-child span,
.section-head span,
.request-heading span,
.settings-heading span{
  letter-spacing:.10em;
}
.home-primary-card,
.person-card,
.request-card,
.meetup-card,
.settings-row,
.plan-card,
.city-week-item,
.city-week-event-title{
  border-color:var(--hs-border);
}
.person-card,
.request-card,
.settings-row,
.plan-card,
.city-week-item,
.city-week-event-title{
  box-shadow:var(--hs-shadow-card);
}
.home-primary-card{
  transition:
    transform 150ms var(--hs-ease),
    box-shadow 150ms var(--hs-ease),
    border-color 150ms ease;
}
.home-primary-card:active{
  transform:scale(.97);
  box-shadow:var(--hs-shadow-card);
}
.primary-btn,
.secondary-btn,
.say-btn,
.meetup-card-action,
.notification-button,
.settings-row,
.nav-btn{
  transition:
    transform 150ms var(--hs-ease),
    box-shadow 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}
.primary-btn:active,
.secondary-btn:active,
.say-btn:active,
.meetup-card-action:active,
.notification-button:active,
.settings-row:active{
  transform:scale(.97);
}
.primary-btn,
.say-btn{
  box-shadow:0 12px 24px -16px rgba(76,29,149,.72);
}

/* Native shell: safe areas, steady surfaces, and lower GPU cost on Android. */
html.native-app .page-shell{
  min-height:100vh;
  min-height:100dvh;
}
html.native-app .topbar{
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  height:calc(78px + env(safe-area-inset-top,0px));
}
html.native-app .bottom-nav{
  min-height:calc(70px + env(safe-area-inset-bottom,0px));
  padding-bottom:max(env(safe-area-inset-bottom,0px),7px);
}
html.native-android .topbar,
html.native-android .bottom-nav{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:#fff;
}
html.native-android .topbar{
  height:calc(82px + env(safe-area-inset-top,0px));
  padding-top:calc(15px + env(safe-area-inset-top,0px));
}
html.native-android .bottom-nav{
  bottom:max(10px,env(safe-area-inset-bottom,0px));
}
html.native-app.keyboard-open .bottom-nav{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,120%);
}
html.native-app.keyboard-open .app-view{
  padding-bottom:18px;
}
html.native-app .message-form{
  padding-bottom:max(10px,env(safe-area-inset-bottom,0px));
}

/* Keep tab labels clear for an international audience. */
.bottom-nav .nav-btn{
  min-width:48px;
  min-height:48px;
  font-size:10px;
  line-height:1.1;
}
.bottom-nav .nav-btn.active{
  background:linear-gradient(180deg,#f5f3ff,#ede9fe);
  color:#6d28d9;
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.05);
}
.bottom-nav .nav-btn:active{
  transform:scale(.94);
}

/* Lightweight skeleton utility for later data-bearing home previews. */
.skeleton{
  position:relative;
  overflow:hidden;
  color:transparent!important;
  background:#edf0f6!important;
  border-color:transparent!important;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:hsSkeleton 1.25s ease-in-out infinite;
}
@keyframes hsSkeleton{to{transform:translateX(100%)}}

/* Respect accessibility and keep mid-range Android devices smooth. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}