/*
 * 心屿临港 · phone UI
 * Everything is scoped to html[data-ui="mobile"]. app.js renders separate markup
 * (mobile.js) for this mode: own header, floating tab bar, rails, list rows and a
 * sticky booking bar. Shared workflow pages (publish, account, orders ...) keep
 * their markup and get the overrides at the bottom of this file.
 */
html[data-ui="mobile"] {
  --sans:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC',
    sans-serif;
  --focus: var(--lake);
  --m-pad: 18px;
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-shadow: 0 1px 0 #0f2a3014, 0 18px 36px -28px #0f2a3080;
  -webkit-text-size-adjust: 100%;
}
[data-ui="mobile"] body {
  font-size: 15px;
  background: var(--paper);
  overflow-x: hidden;
}
[data-ui="mobile"] :is(strong, b) {
  font-weight: 600;
}
[data-ui="mobile"] .m-app {
  min-height: 100dvh;
}
[data-ui="mobile"] .m-main {
  min-width: 0;
  padding: 0 var(--m-pad) 40px;
}
[data-ui="mobile"] .m-app.has-tabbar .m-main {
  padding-bottom: calc(112px + var(--m-safe-b));
}
[data-ui="mobile"] .m-app.is-immersive .m-main {
  padding: 0 var(--m-pad) calc(112px + var(--m-safe-b));
}
[data-ui="mobile"] .skip-link:not(:focus) {
  display: none;
}

/* Header */
[data-ui="mobile"] .m-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(60px + var(--m-safe-t));
  padding: var(--m-safe-t) var(--m-pad) 0;
  background: #f4f2eeee;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-ui="mobile"] .m-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
}
[data-ui="mobile"] .m-brand .brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}
[data-ui="mobile"] .m-brand strong {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
[data-ui="mobile"] .m-iconbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink);
}
[data-ui="mobile"] .m-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
[data-ui="mobile"] .m-lang {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0;
}
[data-ui="mobile"] .m-lang span {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}
[data-ui="mobile"] .m-lang span.on {
  background: var(--ink);
  color: var(--paper);
}
[data-ui="mobile"] .m-signin,
[data-ui="mobile"] .m-avatar {
  display: grid;
  place-items: center;
  min-height: 44px;
  font-weight: 600;
}
[data-ui="mobile"] .m-signin {
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
}
[data-ui="mobile"] .m-avatar {
  width: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
}

/* Tab bar */
[data-ui="mobile"] .m-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  height: calc(60px + var(--m-safe-b));
  padding: 0 0 var(--m-safe-b);
  background: #f4f2eeeb;
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 -1px 0 var(--line);
}
[data-ui="mobile"] .m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  color: #8d9999;
  font-size: 10.5px;
  font-weight: 500;
}
[data-ui="mobile"] .m-tab .icon {
  width: 22px;
  height: 22px;
}
[data-ui="mobile"] .m-tab[aria-current="page"] {
  color: var(--ink);
}
[data-ui="mobile"] .m-tab-plus {
  display: grid;
  align-self: stretch;
  place-items: center;
  min-height: 54px;
}
[data-ui="mobile"] .m-tab-plus span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  transition: transform 0.25s var(--ease);
}
[data-ui="mobile"] .m-tab-plus:active span {
  transform: scale(0.94);
}
[data-ui="mobile"] .m-tab-plus .icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}

/* Shared small pieces */
[data-ui="mobile"] .m-slogan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
}
[data-ui="mobile"] .m-sec {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
[data-ui="mobile"] .m-sec h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
[data-ui="mobile"] .m-sec p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}
[data-ui="mobile"] .m-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding-left: 8px;
  color: var(--lake);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
[data-ui="mobile"] .m-more .icon {
  width: 16px;
  height: 16px;
}
[data-ui="mobile"] .m-block-sec {
  margin-top: 34px;
}
[data-ui="mobile"] .m-head {
  padding-top: 8px;
}
[data-ui="mobile"] .m-head h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
[data-ui="mobile"] .m-head p {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

/* Search (all mobile pages) */
[data-ui="mobile"] .search-bar {
  margin-top: 16px;
  padding: 5px 5px 5px 16px;
  gap: 8px;
  border: 0;
  background: var(--surface);
  box-shadow: var(--m-shadow);
}
[data-ui="mobile"] .search-bar:focus-within {
  box-shadow: 0 0 0 1px var(--lake), 0 0 0 3px #2a656612, var(--m-shadow);
}
[data-ui="mobile"] .search-bar input {
  min-height: 46px;
  min-width: 0;
}
[data-ui="mobile"] .search-bar button {
  min-width: 64px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
}

/* Home: greeting, compact next event, directory */
[data-ui="mobile"] .m-hello {
  padding-top: 8px;
}
[data-ui="mobile"] .m-hello time {
  font-size: 13px;
  color: var(--muted);
}
[data-ui="mobile"] .m-hello p {
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--ink-2);
}
[data-ui="mobile"] .m-hello p b {
  font-weight: 600;
  color: var(--ink);
}
[data-ui="mobile"] .m-hello p a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: -10px 0;
  color: var(--lake);
  font-weight: 600;
}
[data-ui="mobile"] .m-hello .icon {
  width: 16px;
  height: 16px;
}
[data-ui="mobile"] .m-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--line);
}
[data-ui="mobile"] .m-dir a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 2px 10px;
  min-height: 76px;
  padding: 14px;
  background: var(--surface);
}
[data-ui="mobile"] .m-dir .icon {
  align-self: center;
  width: 20px;
  height: 20px;
  color: var(--lake);
}
[data-ui="mobile"] .m-dir b {
  font-size: 15.5px;
  font-weight: 600;
}
[data-ui="mobile"] .m-dir small {
  grid-column: 2;
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-ui="mobile"] .m-invite {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border-radius: 20px;
  background: var(--surface);
}
[data-ui="mobile"] .m-glyph {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--mist);
  color: var(--lake);
}
[data-ui="mobile"] .m-invite div {
  flex: 1;
  min-width: 0;
}
[data-ui="mobile"] .m-invite b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
[data-ui="mobile"] .m-invite small {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}
[data-ui="mobile"] .m-roundgo {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}

/* Home */
[data-ui="mobile"] .m-hero {
  position: relative;
  margin-top: 4px;
  padding: 24px 20px 24px;
  border-radius: 32px;
  background: var(--yellow);
  overflow: hidden;
  isolation: isolate;
}
[data-ui="mobile"] .m-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 46% 54% 40% 60% / 54% 46% 54% 46%;
  background: #fff7ea99;
}
[data-ui="mobile"] .m-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -26px;
  top: -30px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--sun);
  animation: m-sun 7s ease-in-out infinite;
}
@keyframes m-sun {
  50% {
    transform: translateY(6px) scale(1.04);
  }
}
[data-ui="mobile"] .m-hero h1 {
  margin-top: 18px;
  font-size: clamp(31px, 9.2vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.16;
}
[data-ui="mobile"] .m-hero h1 em {
  font-style: normal;
  background: linear-gradient(
    transparent 60%,
    #ffffffcc 60% 92%,
    transparent 92%
  );
}
[data-ui="mobile"] .m-hero > p {
  margin-top: 12px;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
[data-ui="mobile"] .m-hero .search-bar {
  margin-top: 20px;
}
[data-ui="mobile"] .m-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 8px;
  margin-top: 26px;
}
[data-ui="mobile"] .m-shortcuts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 0;
}
[data-ui="mobile"] .m-shortcuts span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px 22px 18px 24px;
  background: var(--c);
  transition: transform 0.25s var(--ease);
}
[data-ui="mobile"] .m-shortcuts a:active span {
  transform: scale(0.94);
}
[data-ui="mobile"] .m-shortcuts .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.7;
}
[data-ui="mobile"] .m-shortcuts b {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Rails */
[data-ui="mobile"] .m-rail {
  display: flex;
  gap: 12px;
  margin: 0 calc(var(--m-pad) * -1);
  padding: 4px var(--m-pad) 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--m-pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
[data-ui="mobile"] .m-rail::-webkit-scrollbar {
  display: none;
}
[data-ui="mobile"] .m-rail > * {
  flex: 0 0 min(78%, 300px);
  scroll-snap-align: start;
}
[data-ui="mobile"] .m-rail--circles > * {
  flex-basis: min(64%, 240px);
}

/* Event cards */
[data-ui="mobile"] .m-event {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--m-shadow);
  overflow: hidden;
  transition: transform 0.25s var(--ease);
}
[data-ui="mobile"] .m-event:active,
[data-ui="mobile"] .m-circle:active,
[data-ui="mobile"] .m-duo a:active {
  transform: scale(0.985);
}
[data-ui="mobile"] .m-event-media {
  position: relative;
  overflow: hidden;
  background: var(--mist);
}
[data-ui="mobile"] .m-event-media img,
[data-ui="mobile"] .m-event-media .event-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-ui="mobile"] .event-placeholder {
  background: var(--mist);
}
[data-ui="mobile"] .event-placeholder span {
  width: 56px;
  height: 56px;
  box-shadow: none;
}
[data-ui="mobile"] .event-placeholder .icon {
  width: 26px;
  height: 26px;
}
[data-ui="mobile"] .m-date {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 5px 8px 4px;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--ink);
  line-height: 1.1;
}
[data-ui="mobile"] .m-date b {
  font-size: 18px;
  font-weight: 600;
}
[data-ui="mobile"] .m-date small {
  font-size: 11px;
  font-weight: 600;
}
[data-ui="mobile"] .m-event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px 16px;
}
[data-ui="mobile"] .m-event-body .tag {
  align-self: flex-start;
}
[data-ui="mobile"] .m-event-body h3 {
  margin: 2px 0 2px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
[data-ui="mobile"] .m-event-body p {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}
[data-ui="mobile"] .m-event-body p span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-ui="mobile"] .m-event-body p .icon {
  flex: none;
  width: 15px;
  height: 15px;
}
[data-ui="mobile"] .m-event-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
[data-ui="mobile"] .m-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--sun-deep);
  white-space: nowrap;
}
[data-ui="mobile"] .m-list:has(.m-event--row) {
  overflow: hidden;
  gap: 0;
  border-radius: 20px;
  background: var(--surface);
}
[data-ui="mobile"] .m-event--row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
[data-ui="mobile"] .m-event--row + .m-event--row {
  border-top: 1px solid var(--line);
}
[data-ui="mobile"] .m-event--row .m-date {
  position: static;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  text-align: center;
}
[data-ui="mobile"] .m-event--row .m-date b {
  font-family: var(--num);
  font-size: 22px;
  font-weight: 400;
}
[data-ui="mobile"] .m-event--row .m-date small {
  font-weight: 500;
  color: var(--muted);
}
[data-ui="mobile"] .m-event--row .m-event-body {
  gap: 2px;
  padding: 0;
}
[data-ui="mobile"] .m-event--row .m-event-body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
[data-ui="mobile"] .m-event--row .m-event-body p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-ui="mobile"] .m-event--row .m-price {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Circle cards */
[data-ui="mobile"] .m-circle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: 24px;
  background: var(--surface);
  transition: transform 0.25s var(--ease);
}
[data-ui="mobile"] .m-circle-sym {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--mist);
  color: var(--lake);
}
[data-ui="mobile"] .m-circle-sym .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.7;
}
[data-ui="mobile"] .m-circle-body {
  min-width: 0;
}
[data-ui="mobile"] .m-circle-cat {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
[data-ui="mobile"] .m-circle h3 {
  margin: 2px 0 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
[data-ui="mobile"] .m-circle p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
[data-ui="mobile"] .m-rail--circles .m-circle {
  flex-direction: column;
  min-height: 176px;
}

/* Duo + enterprise + footer */
[data-ui="mobile"] .m-duo {
  display: grid;
  gap: 12px;
}
[data-ui="mobile"] .m-duo a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px;
  border-radius: 24px;
  background: var(--c);
  transition: transform 0.25s var(--ease);
}
[data-ui="mobile"] .m-duo a > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fffefa;
}
[data-ui="mobile"] .m-duo a > div {
  flex: 1;
  min-width: 0;
}
[data-ui="mobile"] .m-duo h3 {
  font-size: 17px;
  font-weight: 600;
}
[data-ui="mobile"] .m-duo p {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
[data-ui="mobile"] .m-duo a > .icon:last-child {
  flex: none;
}
[data-ui="mobile"] .m-biz {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 18px;
  border-radius: 20px;
  background: var(--sand);
  color: var(--ink);
}
[data-ui="mobile"] .m-biz > div {
  flex: 1;
  min-width: 0;
}
[data-ui="mobile"] .m-biz b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lake);
}
[data-ui="mobile"] .m-biz h2 {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}
[data-ui="mobile"] .m-biz p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-2);
}
[data-ui="mobile"] .m-biz .button {
  width: 100%;
}
[data-ui="mobile"] .m-foot {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 36px;
  text-align: center;
  color: var(--muted);
}
[data-ui="mobile"] .m-foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
[data-ui="mobile"] .m-foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
}
[data-ui="mobile"] .m-foot small {
  font-size: 12px;
}

/* Lists, segments, chips */
[data-ui="mobile"] .m-list {
  display: grid;
  gap: 12px;
}
[data-ui="mobile"] .m-seg {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 999px;
  background: #0f2a3012;
}
[data-ui="mobile"] .m-seg > a,
[data-ui="mobile"] .m-seg > button {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap;
}
[data-ui="mobile"] .m-seg [aria-current] {
  background: var(--ink);
  color: var(--paper);
}
[data-ui="mobile"] .m-chips {
  display: flex;
  gap: 8px;
  margin: 12px calc(var(--m-pad) * -1) 0;
  padding: 2px var(--m-pad);
  overflow-x: auto;
  scrollbar-width: none;
}
[data-ui="mobile"] .m-chips::-webkit-scrollbar {
  display: none;
}
[data-ui="mobile"] .m-chip {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
[data-ui="mobile"] .m-chip[aria-pressed="true"] {
  background: var(--ink);
  box-shadow: none;
  color: var(--paper);
}
[data-ui="mobile"] .m-chip.alt[aria-pressed="true"] {
  background: var(--lake);
  color: #fff;
}
[data-ui="mobile"] .m-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
[data-ui="mobile"] .m-select .icon {
  width: 18px;
  height: 18px;
  flex: none;
}
[data-ui="mobile"] .m-select :is(select, .fic-select-trigger) {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}
[data-ui="mobile"] .m-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 6px;
  font-size: 14px;
  color: var(--muted);
}
[data-ui="mobile"] .m-count b {
  font-size: 22px;
  font-weight: 600;
  color: var(--sun-deep);
}
[data-ui="mobile"] .m-link {
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lake);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-ui="mobile"] .m-create {
  position: fixed;
  right: 18px;
  bottom: calc(96px + var(--m-safe-b));
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--sun);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 20px -10px #e0501fcc;
}
[data-ui="mobile"] .m-create .icon {
  width: 18px;
  height: 18px;
}

/* Event detail */
[data-ui="mobile"] .m-detail {
  margin: 0 calc(var(--m-pad) * -1);
}
[data-ui="mobile"] .m-cover {
  position: relative;
  height: calc(168px + var(--m-safe-t));
  background: #0f2a30;
  overflow: hidden;
}
[data-ui="mobile"] .m-cover img,
[data-ui="mobile"] .m-cover .event-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-ui="mobile"] .m-cover:not(:has(img)) {
  height: calc(64px + var(--m-safe-t));
  background: transparent;
}
[data-ui="mobile"] .m-cover:not(:has(img)) .event-placeholder {
  display: none;
}
[data-ui="mobile"] .m-cover:not(:has(img)) + .m-sheet {
  margin-top: 0;
  border-radius: 0;
  padding-top: 8px;
}
[data-ui="mobile"] .m-cover:not(:has(img)) .m-round {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-ui="mobile"] .m-cover .event-placeholder {
  background: transparent;
  color: #fff;
}
[data-ui="mobile"] .m-cover .event-placeholder span {
  width: 64px;
  height: 64px;
  background: #ffffff18;
  box-shadow: none;
}
[data-ui="mobile"] .m-cover .event-placeholder .icon {
  width: 38px;
  height: 38px;
}
[data-ui="mobile"] .m-round {
  position: absolute;
  top: calc(12px + var(--m-safe-t));
  left: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fffefa;
  box-shadow: 0 8px 16px -8px #1b2a4a80;
}
[data-ui="mobile"] .m-sheet {
  position: relative;
  margin-top: -28px;
  padding: 24px var(--m-pad) 0;
  border-radius: 28px 28px 0 0;
  background: var(--paper);
}
[data-ui="mobile"] .m-sheet > h1 {
  margin-top: 10px;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
[data-ui="mobile"] .m-facts {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
[data-ui="mobile"] .m-facts li {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
[data-ui="mobile"] .m-facts li > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--c);
}
[data-ui="mobile"] .m-facts li > div {
  min-width: 0;
}
[data-ui="mobile"] .m-facts b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
[data-ui="mobile"] .m-facts small {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
[data-ui="mobile"] .m-text {
  margin-top: 26px;
}
[data-ui="mobile"] .m-text h2 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}
[data-ui="mobile"] .m-text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
[data-ui="mobile"] .m-linkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 22px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--lilac);
  font-weight: 600;
}
[data-ui="mobile"] .m-linkrow span {
  flex: 1;
}
[data-ui="mobile"] #m-booking {
  margin-top: 28px;
  scroll-margin-bottom: 120px;
}
[data-ui="mobile"] #m-booking .booking-panel {
  padding: 20px;
  border: 0;
  border-radius: 24px;
  background: var(--yellow-soft);
}
[data-ui="mobile"] #m-booking .booking-panel .button {
  width: 100%;
}
[data-ui="mobile"] .m-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--m-pad) calc(12px + var(--m-safe-b));
  background: #f4f2eef2;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--line);
}
[data-ui="mobile"] .m-cta > div {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
[data-ui="mobile"] .m-cta small {
  font-size: 12px;
  color: var(--muted);
}
[data-ui="mobile"] .m-cta b {
  font-size: 22px;
  font-weight: 600;
  color: var(--sun-deep);
  white-space: nowrap;
}
[data-ui="mobile"] .m-cta .button,
[data-ui="mobile"] .m-cta-state {
  flex: 1;
  min-height: 52px;
  justify-content: center;
}
[data-ui="mobile"] .m-cta-state {
  display: grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--sand);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Sign in / register */
[data-ui="mobile"] .m-auth-intro {
  position: relative;
  margin-top: 6px;
  padding: 24px 22px 26px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-ui="mobile"] .m-auth-intro .brand-mark {
  width: 52px;
  height: 52px;
}
[data-ui="mobile"] .m-auth-intro h1 {
  margin-top: 14px;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.22;
}
[data-ui="mobile"] .m-auth-intro p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
[data-ui="mobile"] .auth-layout {
  display: block;
  max-width: none;
  margin: 0;
}
[data-ui="mobile"] .auth-form {
  padding: 26px 2px 0;
}
[data-ui="mobile"] .auth-form h2 {
  margin-bottom: 18px;
  font-size: 26px;
}

/* Shared markup (workflows and other desktop-built pages) in the phone UI */
[data-ui="mobile"] .page-heading {
  padding-top: 8px;
}
[data-ui="mobile"] .page-heading h1 {
  font-size: 30px;
  line-height: 1.2;
}
[data-ui="mobile"] .main-like,
[data-ui="mobile"] .m-main > .tabs {
  margin-top: 14px;
}
[data-ui="mobile"] .event-grid,
[data-ui="mobile"] .circle-grid,
[data-ui="mobile"] .workflow-menu,
[data-ui="mobile"] .form-grid,
[data-ui="mobile"] .split-layout,
[data-ui="mobile"] .detail-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
[data-ui="mobile"] .event-grid .event-card {
  border-radius: 22px;
}
[data-ui="mobile"] .section-heading {
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 12px;
}
[data-ui="mobile"] .section-heading h2 {
  font-size: 21px;
}
[data-ui="mobile"] .toolbar,
[data-ui="mobile"] .filters,
[data-ui="mobile"] .tabs {
  gap: 8px;
}
[data-ui="mobile"] .tabs,
[data-ui="mobile"] .filters,
[data-ui="mobile"] .wf-admin-tabs {
  flex-wrap: nowrap;
  margin-inline: calc(var(--m-pad) * -1);
  padding: 4px var(--m-pad);
  overflow-x: auto;
  scrollbar-width: none;
}
[data-ui="mobile"] .tabs::-webkit-scrollbar,
[data-ui="mobile"] .filters::-webkit-scrollbar,
[data-ui="mobile"] .wf-admin-tabs::-webkit-scrollbar {
  display: none;
}
[data-ui="mobile"] .tabs > *,
[data-ui="mobile"] .filters > *,
[data-ui="mobile"] .filter-button {
  flex: none;
  min-height: 44px;
  white-space: nowrap;
}
[data-ui="mobile"] .panel {
  padding: 18px;
  border-radius: 22px;
}
[data-ui="mobile"] .panel .panel {
  padding: 14px 16px;
}
[data-ui="mobile"] .panel h2 {
  font-size: 20px;
}
[data-ui="mobile"] .workflow-card {
  min-height: 92px;
  padding: 16px 18px;
  gap: 14px;
  border-radius: 22px;
}
[data-ui="mobile"] .record-row {
  gap: 10px;
  padding: 14px 0;
}
[data-ui="mobile"] .button {
  min-height: 48px;
}
[data-ui="mobile"] .button.small {
  min-height: 44px;
}
[data-ui="mobile"] .form-grid input:not([type="checkbox"]),
[data-ui="mobile"] .field input:not([type="checkbox"]),
[data-ui="mobile"] .field :is(select, .fic-select-trigger),
[data-ui="mobile"] .field textarea {
  min-height: 50px;
  font-size: 16px;
}
[data-ui="mobile"] .form-actions,
[data-ui="mobile"] .record-actions,
[data-ui="mobile"] .wf-actions {
  flex-wrap: wrap;
}
[data-ui="mobile"] .form-actions .button,
[data-ui="mobile"] .auth-form .button {
  width: 100%;
}
[data-ui="mobile"] .circle-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
}
[data-ui="mobile"] .circle-detail .button {
  width: 100%;
}
[data-ui="mobile"] .back-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
[data-ui="mobile"] .detail-image {
  border-radius: 24px;
  overflow: hidden;
}
[data-ui="mobile"] .plain-page {
  padding-top: 12px;
}
[data-ui="mobile"] .empty-state {
  padding: 28px 20px;
  border-radius: 26px;
}
[data-ui="mobile"] .shell-message {
  padding-top: 12px;
}
[data-ui="mobile"] .notice {
  border-radius: 18px;
}
[data-ui="mobile"] table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
[data-ui="mobile"] pre,
[data-ui="mobile"] code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
[data-ui="mobile"] .m-main img {
  max-width: 100%;
}
[data-ui="mobile"] #toast {
  bottom: calc(100px + var(--m-safe-b));
  max-width: calc(100% - 36px);
  border-radius: 20px;
  text-align: center;
}

@media (max-width: 359px) {
  html[data-ui="mobile"] {
    --m-pad: 14px;
  }
  [data-ui="mobile"] .m-brand strong {
    font-size: 16px;
  }
  [data-ui="mobile"] .m-hero {
    padding: 22px 16px;
  }
  [data-ui="mobile"] .m-shortcuts {
    gap: 12px 4px;
  }
  [data-ui="mobile"] .m-shortcuts span {
    width: 52px;
    height: 52px;
  }
  [data-ui="mobile"] .m-tab {
    font-size: 11px;
  }
  [data-ui="mobile"] .m-cta {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-ui="mobile"] .m-hero::after {
    animation: none;
  }
  [data-ui="mobile"] .m-event,
  [data-ui="mobile"] .m-circle,
  [data-ui="mobile"] .m-duo a,
  [data-ui="mobile"] .m-shortcuts span,
  [data-ui="mobile"] .m-tab-plus span {
    transition: none;
  }
}

/* Phone home: community stories. Discovery retains the activity hub. */
html[data-ui="mobile"] .m-app[data-route="home"] .m-main { padding-left: 10px; padding-right: 10px; }
html[data-ui="mobile"] .m-feed-search { display: flex; align-items: center; margin: 0 8px; background: white; border: 1px solid #0f2a3014; border-radius: 14px; overflow: hidden; }
html[data-ui="mobile"] .m-feed-search label { display: grid; place-items: center; width: 38px; flex: none; }
html[data-ui="mobile"] .m-feed-search .icon { width: 18px; }
html[data-ui="mobile"] .m-feed-search input { border: 0; background: transparent; min-width: 0; width: 100%; min-height: 46px; padding: 8px 0; font-size: 16px; }
html[data-ui="mobile"] .m-feed-search button { min-height: 46px; min-width: 52px; padding: 0 10px; color: #2a6566; font-size: 13px; flex: none; }
html[data-ui="mobile"] .m-feed-topics { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 4px 8px 8px; }
html[data-ui="mobile"] .m-feed-topics a { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; flex: none; color: #647477; font-size: 15px; position: relative; }
html[data-ui="mobile"] .m-feed-topics a[aria-current] { color: var(--ink); font-weight: 600; }
html[data-ui="mobile"] .m-feed-topics a[aria-current]::after { content: ''; position: absolute; bottom: 2px; width: 22px; height: 3px; border-radius: 4px; background: #d4441c; }
html[data-ui="mobile"] .m-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
html[data-ui="mobile"] .m-post-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html[data-ui="mobile"] .m-post-card { flex: none; min-width: 0; border-radius: 12px; background: white; overflow: hidden; }
html[data-ui="mobile"] .m-post-card > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
html[data-ui="mobile"] .m-post-caption { padding: 10px; }
html[data-ui="mobile"] .m-post-caption h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-post-author { display: flex; align-items: center; gap: 6px; min-width: 0; color: #657477; font-size: 12px; }
html[data-ui="mobile"] .m-post-author > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="mobile"] .m-post-avatar { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #ebe4d6; color: #2a6566; font-size: 12px; }
html[data-ui="mobile"] .m-post-excerpt { padding: 16px 13px; background: #e9eeea; min-height: 148px; }
html[data-ui="mobile"] .m-post-excerpt > span { font-size: 11px; color: #526663; }
html[data-ui="mobile"] .m-post-excerpt p { margin: 12px 0 0; font-size: 18px; font-weight: 600; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-post-card.is-warm .m-post-excerpt { background: #f2e8df; }
html[data-ui="mobile"] .m-feed .empty-state { margin-top: 24px; padding: 30px 22px; }
html[data-ui="mobile"] .m-post-detail { padding-top: 14px; overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-post-detail header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 16px; }
html[data-ui="mobile"] .m-post-detail time { font-size: 12px; color: #657477; flex: none; }
html[data-ui="mobile"] .m-post-detail .m-post-photo { display: block; width: 100%; height: auto; border-radius: 12px; }
html[data-ui="mobile"] .m-post-detail h1 { font-size: 24px; line-height: 1.4; margin: 22px 0 14px; }
html[data-ui="mobile"] .m-post-detail > p { line-height: 1.9; white-space: pre-wrap; }
html[data-ui="mobile"] .m-post-detail .m-post-author { font-size: 14px; }
html[data-ui="mobile"] .m-feed .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Mobile system refinement: compact headings, useful lists and calm forms. */
html[data-ui="mobile"] {
  --m-shadow: 0 2px 8px #0f2a3005;
  --muted: #637477;
  --faint: #708184;
}
html[data-ui="mobile"] .m-main { line-height: 1.6; }
html[data-ui="mobile"] .m-main :is(h1,h2,h3) { font-weight: 600; overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-header { background: #f4f2eef5; border-bottom: 1px solid #0f2a3008; }
html[data-ui="mobile"] .m-header-actions { gap: 4px; }
html[data-ui="mobile"] .m-signin { padding-inline: 14px; }
html[data-ui="mobile"] .m-tabbar { border-top: 1px solid var(--line); box-shadow: none; background: #fffefa; }
html[data-ui="mobile"] .m-tab { color: #637477; }
html[data-ui="mobile"] :is(.m-page-heading,.page-heading,.m-head) {
  margin: 0; padding: 24px 0 20px; border: 0;
}
html[data-ui="mobile"] :is(.m-page-heading,.page-heading,.m-head) h1 {
  font-family: var(--sans); font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: -.035em;
}
html[data-ui="mobile"] :is(.m-page-heading,.page-heading,.m-head) > p:not(.kicker) {
  margin: 8px 0 0; font-size: 14px; font-weight: 400; line-height: 1.65; color: var(--muted); max-width: 34em;
}
html[data-ui="mobile"] .page-heading > .kicker { display: none; }
html[data-ui="mobile"] .m-main > :is(.panel,.stack,.split-layout,.workflow-menu) + :is(.panel,.stack,.split-layout,.workflow-menu) { margin-top: 16px; }
html[data-ui="mobile"] .panel { padding: 20px 18px; border: 1px solid #0f2a300b; border-radius: 20px; box-shadow: none; }
html[data-ui="mobile"] .panel.record-row { padding: 18px; }
html[data-ui="mobile"] .panel :is(h2,h3) { margin: 0; font-size: 17px; line-height: 1.45; }
html[data-ui="mobile"] .stack { gap: 16px; }
html[data-ui="mobile"] .panel .panel { padding: 16px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
html[data-ui="mobile"] .panel .panel:last-child { padding-bottom: 0; border-bottom: 0; }
html[data-ui="mobile"] .section-heading { margin: 24px 0 12px; gap: 10px; align-items: center; }
html[data-ui="mobile"] :is(.panel > .section-heading,.panel > .record-row:first-child) { margin: 0; padding: 0; border: 0; }
html[data-ui="mobile"] .panel > h2.section-heading { font-size: 17px; line-height: 1.4; }
html[data-ui="mobile"] .section-heading h2 { font-size: 19px; }
html[data-ui="mobile"] .record-row { padding: 14px 0; gap: 12px; align-items: center; }
html[data-ui="mobile"] .record-row > :is(h2,h3) { flex: 1 1 150px; }
html[data-ui="mobile"] .record-row :is(h2,h3,h4),
html[data-ui="mobile"] .panel > .record-row:first-child h2 { font-size: 16px; line-height: 1.5; margin: 0; }
html[data-ui="mobile"] .record-row p { margin-top: 5px; font-size: 12px; line-height: 1.6; }
html[data-ui="mobile"] .record-row .button { margin: 0; }
html[data-ui="mobile"] :is(.status,.tag) { max-width: 100%; font-size: 11px; line-height: 1.5; font-weight: 500; padding: 4px 9px; white-space: normal; border-radius: 7px; }
html[data-ui="mobile"] .status { flex: none; }
html[data-ui="mobile"] .tag + :is(h2,h3) { margin-top: 8px; }
html[data-ui="mobile"] .button { min-height: 46px; padding: 11px 17px; font-size: 14px; font-weight: 600; line-height: 1.5; box-shadow: none; gap: 8px; text-align: center; }
html[data-ui="mobile"] .button.secondary { background: #fff; border: 1px solid #0f2a3026; }
html[data-ui="mobile"] .button .icon { width: 18px; height: 18px; }
html[data-ui="mobile"] :is(.text-link,.auth-links a) { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.5; }
html[data-ui="mobile"] .empty-state { min-height: 0; padding: 32px 22px; margin-top: 16px; border-radius: 20px; box-shadow: none; gap: 0; }
html[data-ui="mobile"] .empty-state :is(h2,h3) { font-size: 18px; line-height: 1.5; }
html[data-ui="mobile"] .empty-state p { font-size: 14px; line-height: 1.75; max-width: 28em; }
html[data-ui="mobile"] .empty-state .button { margin-top: 20px; }
html[data-ui="mobile"] .empty-mark { width: 52px; height: 52px; margin-bottom: 16px; }
html[data-ui="mobile"] .empty-mark .brand-mark { width: 32px; height: 32px; }
html[data-ui="mobile"] .panel .empty-state { margin: 0; padding: 0; background: transparent; border: 0; text-align: left; align-items: flex-start; }
html[data-ui="mobile"] .panel .empty-state p { color: var(--muted); }
html[data-ui="mobile"] .panel .empty-state .button { margin-top: 14px; }
html[data-ui="mobile"] .form-grid { gap: 20px; }
html[data-ui="mobile"] .field { gap: 8px; font-size: 14px; font-weight: 500; }
html[data-ui="mobile"] .field :is(input:not([type="checkbox"]),:is(select, .fic-select-trigger),textarea) { min-height: 50px; padding: 12px 14px; border-radius: 12px; border-color: #0f2a3026; background: #fcfcfa; font-size: 16px; }
html[data-ui="mobile"] .field textarea { min-height: 136px; line-height: 1.7; }
html[data-ui="mobile"] .field small { font-size: 12px; line-height: 1.7; font-weight: 400; }
html[data-ui="mobile"] .field input[type="file"] { padding: 8px; border-style: solid; font-size: 12px; background: #f4f5f1; }
html[data-ui="mobile"] input[type="file"]::file-selector-button { min-height: 44px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: white; color: var(--ink); font: inherit; font-size: 13px; }
html[data-ui="mobile"] .form-grid > .field:last-child > .button { align-self: stretch; width: 100%; margin-top: 4px; }
html[data-ui="mobile"] :is(.wf-check,.check-field) { gap: 10px; align-items: flex-start; min-height: 44px; padding: 4px 0; font-weight: 400; font-size: 13px; line-height: 1.7; }
html[data-ui="mobile"] :is(.wf-check,.check-field) input[type="checkbox"] { margin-top: 2px; }
html[data-ui="mobile"] .notice { padding: 14px; border-radius: 12px; font-size: 13px; line-height: 1.7; box-shadow: none; }
html[data-ui="mobile"] .notice .button { margin-top: 10px; }
html[data-ui="mobile"] details { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fcfcfa; }
html[data-ui="mobile"] summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.65; }
html[data-ui="mobile"] details[open] > :not(summary) { margin-top: 12px; margin-bottom: 16px; }
html[data-ui="mobile"] .workflow-menu { gap: 10px; }
html[data-ui="mobile"] .workflow-card { min-height: 88px; padding: 18px 16px; gap: 14px; border: 1px solid #0f2a300b; border-radius: 18px; box-shadow: none; }
html[data-ui="mobile"] .workflow-card > .icon { width: 24px; height: 24px; padding: 0; border-radius: 0; background: transparent; color: var(--lake); }
html[data-ui="mobile"] .workflow-card :is(h2,h3) { font-size: 16px; line-height: 1.4; }
html[data-ui="mobile"] .workflow-card p { margin-top: 5px; font-size: 13px; line-height: 1.65; }
html[data-ui="mobile"] .workflow-card > span[aria-hidden] { font-size: 19px; width: auto; height: auto; background: transparent; }
html[data-ui="mobile"] .wf-service-steps { gap: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
html[data-ui="mobile"] .wf-service-steps .workflow-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; min-height: 0; }
html[data-ui="mobile"] .wf-service-steps .workflow-card:last-child { border-bottom: 0; }
html[data-ui="mobile"] .wf-service-steps .kicker { font-family: var(--num); font-size: 17px; color: var(--lake); }
html[data-ui="mobile"] .wf-details { grid-template-columns: minmax(70px,.75fr) minmax(0,1.5fr); gap: 12px; font-size: 14px; }
html[data-ui="mobile"] .wf-details :is(dt,dd) { margin: 0; overflow-wrap: anywhere; }
html[data-ui="mobile"] .wf-pass { padding: 22px 16px; border: 0; background: #eaf0ee; border-radius: 14px; text-align: center; }
html[data-ui="mobile"] .wf-pass::before,html[data-ui="mobile"] .wf-pass::after { display: none; }
html[data-ui="mobile"] .wf-pass-code { display: block; margin: 10px 0; font-family: var(--mono); font-size: clamp(20px,6vw,28px); letter-spacing: .08em; overflow-wrap: anywhere; }
html[data-ui="mobile"] .wf-pass .muted { font-size: 12px; line-height: 1.65; }
html[data-ui="mobile"] .wf-timeline { margin: 0; padding-left: 20px; }
html[data-ui="mobile"] .wf-timeline li { padding: 0 0 20px 12px; }
html[data-ui="mobile"] .tabs { margin-top: 12px; margin-bottom: 18px; }
html[data-ui="mobile"] .tabs .button { min-height: 44px; padding: 9px 14px; font-size: 13px; }
html[data-ui="mobile"] .m-dir small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }
html[data-ui="mobile"] .m-dir a { align-content: start; }
html[data-ui="mobile"] :is(.m-event,.m-circle,.m-next,.m-invite,.m-biz) { box-shadow: none; }
html[data-ui="mobile"] .m-next { border-radius: 22px; }
html[data-ui="mobile"] .m-more { min-width: 44px; min-height: 44px; justify-content: flex-end; }
html[data-ui="mobile"] .m-sheet > h1 { font-size: 25px; line-height: 1.4; }
html[data-ui="mobile"] .m-text h2 { font-size: 18px; }
html[data-ui="mobile"] .m-facts b { font-weight: 500; }
html[data-ui="mobile"] .m-seg { border-radius: 14px; padding: 4px; }
html[data-ui="mobile"] .m-seg > :is(a,button) { border-radius: 10px; font-weight: 500; white-space: normal; }
html[data-ui="mobile"] .m-chip { font-size: 13px; padding-inline: 14px; font-weight: 500; }
html[data-ui="mobile"] .m-count b { font-size: 17px; font-weight: 600; color: var(--ink); }
html[data-ui="mobile"] .m-create { position: static; display: flex; justify-content: center; margin-top: 20px; box-shadow: none; }
html[data-ui="mobile"] .circle-detail { padding: 20px; border-radius: 20px; gap: 16px; }
html[data-ui="mobile"] .circle-detail h1 { font-size: 24px; line-height: 1.45; margin: 6px 0 12px; }
html[data-ui="mobile"] .circle-detail p { font-size: 14px; line-height: 1.8; }
html[data-ui="mobile"] .circle-symbol { width: 48px; height: 48px; border-radius: 14px; }
html[data-ui="mobile"] .service-card { display: grid; gap: 12px; }
html[data-ui="mobile"] .service-card > .tag { justify-self: start; }
html[data-ui="mobile"] .service-card h3 { margin: 0; }
html[data-ui="mobile"] .service-card .rules { padding: 14px 0 0; margin: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; }
html[data-ui="mobile"] .service-card .rules h3 { font-size: 14px; margin-bottom: 5px; }
html[data-ui="mobile"] .service-card p { font-size: 14px; line-height: 1.8; }
html[data-ui="mobile"] .search-bar { min-height: 50px; padding: 4px 6px 4px 14px; border-radius: 14px; box-shadow: none; border: 1px solid var(--line-strong); }
html[data-ui="mobile"] .search-bar input { font-size: 16px; min-width: 0; }
html[data-ui="mobile"] .search-bar button { min-width: 44px; min-height: 44px; border-radius: 10px; }
html[data-ui="mobile"] .m-auth-intro { padding: 24px 4px 12px; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
html[data-ui="mobile"] .m-auth-intro .brand-mark { width: 38px; height: 38px; }
html[data-ui="mobile"] .m-auth-intro h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.5; margin-top: 12px; }
html[data-ui="mobile"] .m-auth-intro p { font-size: 14px; line-height: 1.7; color: var(--muted); }
html[data-ui="mobile"] .auth-form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px; margin-top: 16px; }
html[data-ui="mobile"] .auth-form h2 { font-size: 21px; margin-bottom: 20px; }
html[data-ui="mobile"] .auth-links { gap: 0 16px; margin-top: 16px; font-size: 13px; }
html[data-ui="mobile"] .plain-page { margin: 0; padding: 24px 0 0; }
html[data-ui="mobile"] .plain-page h1 { font-family: var(--sans); font-size: 26px; margin-bottom: 20px; }
html[data-ui="mobile"] .plain-page h2 { font-size: 18px; margin: 24px 0 10px; }
html[data-ui="mobile"] .plain-page p { font-size: 15px; line-height: 1.85; }

/* Inbox: each update is a single accessible row. */
html[data-ui="mobile"] .m-inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; font-size: 13px; color: var(--muted); }
html[data-ui="mobile"] .m-inbox-toolbar button { display: flex; gap: 5px; align-items: center; min-height: 44px; padding: 0 0 0 8px; color: var(--lake); font-size: 13px; }
html[data-ui="mobile"] .m-inbox-toolbar .icon { width: 17px; height: 17px; }
html[data-ui="mobile"] .m-notifications { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
html[data-ui="mobile"] .m-notification { display: flex; align-items: flex-start; gap: 13px; padding: 20px 16px; border-bottom: 1px solid var(--line); }
html[data-ui="mobile"] .m-notification:last-child { border-bottom: 0; }
html[data-ui="mobile"] .m-notification-symbol { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--lake-soft); color: var(--lake); }
html[data-ui="mobile"] .m-notification-symbol .icon { width: 21px; height: 21px; }
html[data-ui="mobile"] .m-notification-symbol i { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--sun); }
html[data-ui="mobile"] .m-notification-copy { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
html[data-ui="mobile"] .m-notification-copy strong { font-size: 16px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-notification-copy > span { font-size: 13px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-notification time { font-family: var(--num); font-size: 12px; color: var(--muted); }
html[data-ui="mobile"] .m-notification-copy .m-notification-action { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--lake); font-size: 12px; }
html[data-ui="mobile"] .m-notification-action .icon { width: 14px; height: 14px; }
html[data-ui="mobile"] .m-notification.is-read .m-notification-symbol { background: #f4f5f2; color: #718080; }
html[data-ui="mobile"] .m-notification.is-read strong { font-weight: 500; }
html[data-ui="mobile"] .m-inbox-empty { padding: 42px 20px; text-align: center; background: #fff; border-radius: 20px; }
html[data-ui="mobile"] .m-inbox-empty > span { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 18px; background: var(--lake-soft); color: var(--lake); }
html[data-ui="mobile"] .m-inbox-empty h2 { font-size: 18px; }
html[data-ui="mobile"] .m-inbox-empty p { font-size: 14px; color: var(--muted); line-height: 1.8; margin: 12px 0 22px; }

/* Account: identity, quick actions, personal records, then utilities. */
html[data-ui="mobile"] .m-identity { display: flex; align-items: center; gap: 16px; padding: 4px 0 24px; }
html[data-ui="mobile"] .m-identity-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: #e2eae5; color: var(--lake); font-size: 27px; flex: none; overflow: hidden; }
html[data-ui="mobile"] .m-identity-avatar img { width: 100%; height: 100%; object-fit: cover; }
html[data-ui="mobile"] .m-identity > div { min-width: 0; }
html[data-ui="mobile"] .m-identity h2 { font-size: 21px; line-height: 1.5; }
html[data-ui="mobile"] .m-identity p { font-size: 13px; margin-top: 5px; color: var(--muted); overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-account-shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin: 0 0 24px; padding: 18px 8px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
html[data-ui="mobile"] .m-account-shortcuts a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; min-height: 60px; padding: 0 2px; }
html[data-ui="mobile"] .m-account-shortcuts a > span { position: relative; width: 30px; height: 30px; display: grid; place-items: center; color: var(--lake); }
html[data-ui="mobile"] .m-account-shortcuts strong { font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
html[data-ui="mobile"] .m-unread-count { position: absolute; left: 22px; top: -7px; min-width: 17px; padding: 1px 4px; border-radius: 8px; font-size: 10px; line-height: 15px; background: var(--sun); color: white; }
html[data-ui="mobile"] .m-work-section { margin-top: 16px; }
html[data-ui="mobile"] .m-work-section > .stack { gap: 0; }
html[data-ui="mobile"] .m-work-section > .section-heading { color: var(--ink); }
html[data-ui="mobile"] .m-account-tools { display: grid; padding: 8px 16px; margin-top: 20px; border-radius: 18px; background: #fff; }
html[data-ui="mobile"] .m-account-tools a { min-height: 54px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
html[data-ui="mobile"] .m-account-tools a .icon { width: 19px; height: 19px; color: var(--lake); }
html[data-ui="mobile"] .m-account-tools a span { flex: 1; }
html[data-ui="mobile"] .m-account-tools button { min-height: 52px; text-align: left; font-size: 14px; color: var(--muted); padding: 0; }
@media (max-width: 359px) {
  html[data-ui="mobile"] :is(.m-page-heading,.page-heading,.m-head) h1 { font-size: 23px; }
  html[data-ui="mobile"] .m-notification { padding: 17px 14px; gap: 10px; }
  html[data-ui="mobile"] .m-notification-symbol { width: 36px; height: 36px; border-radius: 11px; }
  html[data-ui="mobile"] .m-account-shortcuts { padding-inline: 4px; }
}

/* Final narrow-screen corrections from the route review. */
html[data-ui="mobile"] .workflow-card > span[aria-hidden] { width: 24px; height: 24px; border: 0; border-radius: 0; }
html[data-ui="mobile"] .workflow-card:hover { transform: none; box-shadow: none; }
html[data-ui="mobile"] .workflow-card:hover > .icon { background: transparent; color: var(--lake); }
html[data-ui="mobile"] .workflow-card:hover > span[aria-hidden] { transform: none; background: transparent; color: var(--lake); }
html[data-ui="mobile"] .wf-service-steps .workflow-card { flex-direction: row; gap: 14px; padding: 18px 16px; }
html[data-ui="mobile"] .wf-service-steps .kicker { min-width: 26px; margin-top: 1px; letter-spacing: 0; line-height: 1.5; }
html[data-ui="mobile"] .wf-service-steps .kicker::before,
html[data-ui="mobile"] .wf-pass .kicker::before { display: none; }
html[data-ui="mobile"] .m-app[data-route="publish"] .m-main > p { margin: 0 0 14px; }
html[data-ui="mobile"] .m-app[data-route="publish"] .m-main > p .button { padding: 0; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--lake); }
html[data-ui="mobile"] .m-account-shortcuts strong { overflow-wrap: normal; word-break: normal; }

/* Author-created text cards: the canvas preview is the exact uploaded image. */
html[data-ui="mobile"] .m-cover-editor { min-width: 0; gap: 12px; }
html[data-ui="mobile"] .m-cover-label { display: flex; flex-direction: column; gap: 4px; }
html[data-ui="mobile"] .m-cover-label strong { font-size: 14px; font-weight: 600; }
html[data-ui="mobile"] .m-cover-label span { font-size: 12px; color: var(--muted); line-height: 1.6; }
html[data-ui="mobile"] .m-cover-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; border-radius: 13px; background: var(--paper); }
html[data-ui="mobile"] .m-cover-modes button { min-height: 44px; padding: 4px; border-radius: 9px; font-size: 13px; color: var(--muted); }
html[data-ui="mobile"] .m-cover-modes button[aria-pressed="true"] { background: var(--ink); color: #fff; }
html[data-ui="mobile"] [data-cover-text-panel],
html[data-ui="mobile"] [data-cover-photo-panel] { display: grid; gap: 12px; min-width: 0; }
html[data-ui="mobile"] .m-cover-editor [hidden] { display: none !important; }
html[data-ui="mobile"] .m-cover-preview { display: grid; place-items: center; padding: 18px; border-radius: 15px; background: #f4f5f1; }
html[data-ui="mobile"] .m-cover-preview canvas { display: block; width: min(100%,220px); height: auto; aspect-ratio: 3/4; border-radius: 9px; box-shadow: 0 3px 14px #2033300b; }
html[data-ui="mobile"] .m-cover-families { display: flex; gap: 20px; border-bottom: 1px solid #20333012; }
html[data-ui="mobile"] .m-cover-families button { min-width: 64px; min-height: 44px; padding: 6px 0; font-size: 14px; color: var(--muted); border-radius: 0; border-bottom: 2px solid transparent; }
html[data-ui="mobile"] .m-cover-families button[aria-pressed="true"] { color: var(--lake); font-weight: 600; border-bottom-color: var(--lake); }
html[data-ui="mobile"] .m-cover-template-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-ui="mobile"] .m-cover-template-label > span { font-size: 14px; font-weight: 600; }
html[data-ui="mobile"] .m-cover-loading { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 12px; line-height: 1.6; color: var(--muted); }
html[data-ui="mobile"] .m-cover-loading button { min-height: 44px; min-width: 44px; color: var(--lake); flex: none; }
html[data-ui="mobile"] .m-cover-template-label button { min-height: 44px; padding: 0 0 0 12px; color: var(--lake); font-size: 13px; }
html[data-ui="mobile"] .m-cover-style-options { display: flex; overflow-x: auto; gap: 8px; padding: 2px 0 5px; scrollbar-width: thin; min-width: 0; }
html[data-ui="mobile"] .m-cover-style-options button { display: flex; flex: 0 0 82px; flex-direction: column; align-items: center; gap: 8px; padding: 5px 4px 8px; min-width: 82px; min-height: 138px; font-size: 12px; line-height: 1.4; color: var(--muted); border: 2px solid transparent; border-radius: 11px; }
html[data-ui="mobile"] .m-cover-style-options button[aria-pressed="true"] { border-color: var(--lake); color: var(--ink); background: #f0f5ef; }
html[data-ui="mobile"] .m-cover-style-options canvas { display: block; width: 70px; height: auto; aspect-ratio: 3/4; border-radius: 5px; }
html[data-ui="mobile"] .m-cover-style-options button > span { max-width: 74px; min-height: 32px; display: flex; align-items: center; justify-content: center; text-align: center; }
html[data-ui="mobile"] .m-cover-editor .m-cover-swipe-hint { margin-top: -4px; font-size: 11px; }
html[data-ui="mobile"] .m-cover-colors { display: flex; gap: 0; overflow-x: auto; padding: 2px 0; }
html[data-ui="mobile"] .m-cover-colors button { display: grid; place-items: center; flex: 1 0 44px; min-width: 44px; height: 44px; border-radius: 8px; }
html[data-ui="mobile"] .m-cover-colors span { width: 30px; height: 30px; border-radius: 50%; background: var(--cover-bg); border: 1px solid #20333025; }
html[data-ui="mobile"] .m-cover-colors [data-cover-color="original"] span { background: conic-gradient(#f6e6a7 0 25%,#f4ded6 25% 50%,#e6dff2 50% 75%,#dae7f0 75%); }
html[data-ui="mobile"] .m-cover-colors button[aria-pressed="true"] span { outline: 2px solid var(--lake); outline-offset: 3px; }
html[data-ui="mobile"] .m-cover-editor label { font-size: 14px; line-height: 1.5; }
html[data-ui="mobile"] .m-cover-editor small,
html[data-ui="mobile"] [data-cover-none-panel] { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 0; }
html[data-ui="mobile"] .m-cover-photo-preview { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; background: var(--paper); }
@media (max-width: 359px) {
  html[data-ui="mobile"] .m-header { gap: 8px; }
  html[data-ui="mobile"] .m-lang span:not(.on) { display: none; }
}

/* Four destinations plus the original centered publishing action. */
html[data-ui="mobile"] .m-tab span { position: relative; }
html[data-ui="mobile"] .m-tab-unread { position: absolute; right: -12px; top: -24px; width: max-content; min-width: 18px; padding: 1px 4px; border-radius: 12px; background: var(--sun); color: white; font-size: 10px; line-height: 16px; white-space: nowrap; text-align: center; }
html[data-ui="mobile"] .mh-account-inbox { margin: 24px 0; border-top: 1px solid var(--line); padding-top: 18px; }
html[data-ui="mobile"] .mh-inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-ui="mobile"] .mh-inbox-heading h2 { font-size: 20px; margin: 0; }
html[data-ui="mobile"] .mh-inbox-heading a, html[data-ui="mobile"] .mh-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--lake); }
html[data-ui="mobile"] .mh-inbox-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--line); }
html[data-ui="mobile"] .mh-inbox-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html[data-ui="mobile"] .mh-inbox-row strong { font-weight: 600; }
html[data-ui="mobile"] .mh-inbox-row small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 14px; color: var(--muted); }
html[data-ui="mobile"] .mh-inbox-row i { display: inline-block; width: 7px; height: 7px; background: var(--sun); border-radius: 50%; margin-right: 8px; }
html[data-ui="mobile"] .mh-account-inbox > p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.mh-publish-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
html[data-ui="mobile"] .mh-publish-actions > a { flex: 1 1 120px; min-height: 48px; white-space: normal; text-align: center; }


/* Focused page bars for the account and mutual-help workspaces. */
html[data-ui="mobile"] .m-header-utility { min-height: calc(60px + var(--m-safe-t)); padding-inline: 18px; background: var(--surface); border-bottom: 1px solid #eef1ee; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ui="mobile"] .m-header-utility .m-page-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
html[data-ui="mobile"] .m-header-utility .m-header-actions { gap: 6px; }
html[data-ui="mobile"] .m-utility-language { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; color: var(--muted); background: transparent; border: 0; font-size: 11px; font-weight: 600; }
html[data-ui="mobile"] .m-utility-language:focus-visible { outline: 2px solid var(--lake); outline-offset: 2px; }
html[data-ui="mobile"] .m-app:is([data-route="account"],[data-route="help"],[data-route="messages"]) { background: #fff; }
html[data-ui="mobile"] .m-header-utility .m-iconbtn { position: relative; }
html[data-ui="mobile"] .m-header-unread { position: absolute; top: 9px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--paper); }
@media(max-width:359px) { html[data-ui="mobile"] .m-header-utility { padding-inline: 14px; } }

/* A search field receives focus as one complete control, including its icon.
 * Browsers match :focus-visible on text inputs even after a pointer click. */
html[data-ui="mobile"] :is(.m-feed-search, .su-search, .hm-search, .pl-search, .dating-search) {
  transition: border-color .18s ease, box-shadow .18s ease;
}
html[data-ui="mobile"] :is(.m-feed-search, .su-search, .hm-search, .pl-search, .dating-search):focus-within {
  border-color: var(--lake);
  box-shadow: 0 0 0 1px var(--lake), 0 0 0 3px #2a656612;
}
html[data-ui="mobile"] :is(.m-feed-search, .su-search, .hm-search, .pl-search, .dating-search) input:focus {
  outline: none;
  box-shadow: none;
}
html[data-ui="mobile"] .m-feed-search button:focus-visible {
  outline-offset: -3px;
}
html[data-ui="mobile"] .fic-select-trigger:focus-visible {
  outline-color: var(--lake);
}
html[data-ui="mobile"] .field :is(input:not([type="checkbox"]), textarea, select, .fic-select-trigger):focus {
  outline: none;
  border-color: #2a656680;
  box-shadow: 0 0 0 3px #2a656612;
}
html[data-ui="mobile"] .field :is(input:not([type="checkbox"]), textarea, select, .fic-select-trigger):focus-visible {
  border-color: var(--lake);
  box-shadow: 0 0 0 3px #2a656626;
}
/* Chinese glyphs keep their natural spacing; English titles retain compact tracking. */
html[data-ui="mobile"]:lang(zh) .m-main :is(h1, h2, h3, h4) {
  letter-spacing: 0;
}
html[data-ui="mobile"]:lang(zh) .m-main .hm-page :is(h1, h2, h3) {
  letter-spacing: 0;
}