.city-home { max-width: 1600px; margin: 0 auto; padding: 24px 26px 50px; color: var(--unomas-ink); }
.city-home [x-cloak] { display: none !important; }
.city-home h1 { font-size: clamp(21px, 2vw, 27px); font-weight: 750; line-height: 1.3; margin: 6px 0; }
.city-home h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.city-home h3 { font-size: 12px; font-weight: 650; margin: 0 0 5px; }
.city-home p { font-size: 13px; line-height: 1.6; margin: 5px 0 12px; }
.city-home__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, 1fr); gap: 24px; align-items: start; }
.city-home__primary, .city-home__discover { min-width: 0; display: grid; gap: 18px; }
.city-home__card { background: white; border: 1px solid var(--unomas-border); border-radius: 18px; padding: 18px; min-width: 0; }
.city-home__welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.city-home__welcome p { margin: 0; color: var(--unomas-muted); }
.city-home__eyebrow { color: var(--unomas-violet); font-size: 10px; letter-spacing: .13em; font-weight: 750; }
.city-home__static-control { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--unomas-border); border-radius: 9px; padding: 10px; white-space: nowrap; font-size: 11px; }
.city-home__welcome > .city-home__static-control { display: none; }
.city-home__quick > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; text-align: center; }
.city-home__quick > div > span { display: grid; justify-items: center; gap: 8px; }
.city-home__quick i { background: #f5f1ff; color: var(--unomas-accent); display: grid; place-items: center; border-radius: 14px; width: 46px; height: 46px; font-size: 21px; }
.city-home__quick span:nth-child(3) i { background: #fff4ea; color: #f77828; }
.city-home__quick span:nth-child(7) i { background: #edf7ff; color: #1688f5; }
.city-home__quick small { font-size: 10px; }
.city-home__banner { position: relative; min-height: 220px; padding: 28px; border-radius: 18px; color: white; overflow: hidden; background: radial-gradient(ellipse at 80% 80%, #642897 0, transparent 56%), linear-gradient(115deg, #090b21, #171337 65%, #1c1648); display: flex; align-items: center; }
.city-home__banner > div { position: relative; z-index: 1; }
.city-home__banner h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 12px 0; }
.city-home__banner p { font-size: 12px; color: #e2def8; }
.city-home__banner .city-home__eyebrow { color: #bda8ff; }
.city-home__banner img { position: absolute; right: 15px; bottom: -10px; width: 190px; height: 210px; object-fit: contain; opacity: .9; }
.city-home__banner-link { display: inline-flex; gap: 14px; align-items: center; background: white; color: var(--unomas-accent); border-radius: 8px; padding: 9px 14px; font-size: 12px; }
.city-home__orb { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #9b69df; border-radius: 50%; background: #9d47ff24; color: #dfceff; box-shadow: 0 0 25px #8c3bf535; }
.city-home__orb--one { right: 175px; top: 25px; }.city-home__orb--two { right: 22px; top: 22px; }.city-home__orb--three { right: 10px; bottom: 25px; }
.city-home__stories { display: flex; gap: 18px; overflow-x: auto; padding: 1px 5px 6px; scrollbar-width: thin; }
.city-home__stories > div { text-align: center; flex: 0 0 64px; }
.city-home__story { position: relative; display: grid; place-items: center; width: 61px; height: 61px; border: 2px solid #9453fb; border-radius: 50%; color: #7020f0; background: linear-gradient(145deg, #f1e5ff, #f8f3ff); font-size: 23px; margin-bottom: 7px; }
.city-home__stories > div:nth-child(3n) .city-home__story { border-color: #f48643; color: #cb6928; background: #fff3e8; }
.city-home__stories small { white-space: nowrap; font-size: 10px; }
.city-home__story--own { border-color: #2196ff; }
.city-home__story--own > span { display: grid; place-items: center; width: 53px; height: 53px; border-radius: 50%; font-size: 16px; background: #ede6ff; }
.city-home__story b { position: absolute; bottom: -3px; right: -3px; background: var(--unomas-accent); color: white; width: 23px; height: 23px; border: 2px solid white; border-radius: 50%; font-size: 15px; }
.city-home__section-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.city-home__section-head h2 { margin: 0; }
.city-home__section-head > span { font-size: 10px; color: var(--unomas-accent); white-space: nowrap; }
.city-home__categories { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.city-home__categories span { font-size: 10px; padding: 8px 10px; border: 1px solid var(--unomas-border); border-radius: 8px; white-space: nowrap; }
.city-home__categories span.active { background: var(--unomas-accent); color: white; }
.city-home__map { position: relative; height: 245px; overflow: hidden; border-radius: 12px; background: #eaf2ef; }
.city-home__map svg { width: 100%; height: 100%; }
.city-home__map-pin { position: absolute; display: grid; place-items: center; width: 32px; height: 37px; border-radius: 18px 18px 18px 4px; color: white; box-shadow: 0 3px 12px #3c456328; background: #7c3aed; }
.city-home__map-pin--one { left: 28%; top: 15%; background: #ff8a00; }.city-home__map-pin--two { right: 18%; top: 25%; }.city-home__map-pin--three { left: 20%; bottom: 18%; background: #16b883; }.city-home__map-pin--four { right: 22%; bottom: 12%; background: #fa6893; }
.city-home__map-center { position: absolute; left: 49%; top: 46%; width: 23px; height: 23px; background: #2563ff; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 12px #2563ff1a, 0 0 0 23px #2563ff0c; }
.city-home__map small { position: absolute; bottom: 7px; left: 9px; color: #516075; font-size: 9px; background: #ffffffdb; border-radius: 4px; padding: 3px 6px; }
.city-home__event { display: flex; align-items: center; gap: 12px; border: 1px solid var(--unomas-border); border-radius: 12px; padding: 9px; margin-top: 8px; }
.city-home__event-art { flex-shrink: 0; width: 62px; height: 62px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 25px; background: linear-gradient(145deg, #211652, #b851da); }
.city-home__event:nth-child(3) .city-home__event-art { background: linear-gradient(135deg, #184d67, #51b2a4); }.city-home__event:nth-child(4) .city-home__event-art { background: linear-gradient(135deg, #744122, #f2ab65); }
.city-home__event > div { flex: 1; }.city-home__event p { font-size: 10px; margin: 3px 0; color: var(--unomas-muted); }.city-home__event strong { font-size: 11px; }
.city-home__businesses, .city-home__trends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.city-home__business-art { height: 72px; display: grid; place-items: center; font-size: 26px; border-radius: 11px; background: #f1eafc; color: #6d3dab; margin-bottom: 9px; }
.city-home__businesses > div:nth-child(2) .city-home__business-art { background: #e9f5ff; color: #4182b0; }.city-home__businesses > div:nth-child(3) .city-home__business-art { background: #fff0f5; color: #c86b8b; }.city-home__businesses > div:nth-child(4) .city-home__business-art { background: #e7f7ef; color: #359373; }
.city-home__businesses h3 { font-size: 10px; }.city-home__businesses p { font-size: 10px; color: var(--unomas-muted); margin: 3px 0; }.city-home__businesses .fa-star { color: #edae14; }
.city-home__trends > div > span { display: flex; align-items: center; justify-content: space-between; color: var(--unomas-violet); padding: 15px 10px; border-radius: 10px; background: #f3efff; margin-bottom: 9px; }
.city-home__trends h3 { font-size: 10px; overflow-wrap: anywhere; }
.city-feed { display: grid; gap: 16px; min-width: 0; }
.city-feed__composer fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.city-feed__compose-head { display: flex; align-items: flex-start; gap: 13px; }
.city-feed__compose-head > label { flex: 1; min-width: 0; }
.city-feed__avatar { flex-shrink: 0; position: relative; width: 42px; height: 42px; border-radius: 50%; background: #ece5ff; display: grid; place-items: center; overflow: hidden; color: #6735b5; font-size: 13px; font-weight: 650; }
.city-feed__avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-home textarea { width: 100%; min-height: 50px; background: #f7f7fc; border: 1px solid var(--unomas-border); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 13px; line-height: 1.5; color: var(--unomas-ink); resize: vertical; }
.city-home textarea:focus { outline: 2px solid #7c3aed30; border-color: var(--unomas-violet); }
.city-feed__compose-actions { display: flex; align-items: center; gap: 7px; margin: 12px 0 0 55px; flex-wrap: wrap; }
.city-home .unomas-btn-primary, .city-home .unomas-btn-secondary { border-radius: 9px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; }
.city-feed__compose-actions > button { margin-left: auto; }
.city-feed__file-control { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; position: relative; border: 1px solid var(--unomas-border); border-radius: 9px; padding: 10px; cursor: pointer; overflow: hidden; }
.city-feed__file-control input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.city-feed__compose-actions > .city-home__static-control { color: var(--unomas-muted); }
.city-feed__attachments { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }.city-feed__attachments:empty { display: none; }
.city-feed__attachments > div { width: 110px; height: 92px; position: relative; border: 1px solid var(--unomas-border); border-radius: 9px; }
.city-feed__attachments img, .city-feed__attachments video { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }.city-feed__attachments button { position: absolute; right: -5px; top: -5px; width: 25px; height: 25px; background: white; border: 1px solid var(--unomas-border); border-radius: 50%; }
.city-feed__filters { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }.city-feed__filters nav { display: flex; gap: 8px; }.city-feed__filters nav button, .city-feed__filters select { background: #f0f1fa; border: 1px solid transparent; padding: 10px 15px; border-radius: 9px; font-size: 12px; color: var(--unomas-muted); }
.city-feed__filters nav button.active { background: white; color: var(--unomas-accent); border-color: #b49afb; font-weight: 650; }.city-feed__filters select { padding: 10px; max-width: 175px; }
.city-feed__nearby { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; background: #f0f6ff; padding: 13px; border-radius: 10px; font-size: 12px; }.city-feed__nearby button { color: var(--unomas-accent); margin-left: auto; font-weight: 650; }
.city-feed__post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }.city-feed__post-header > div:nth-child(2) { flex: 1; min-width: 0; }.city-feed__post-header strong, .city-feed__post-header a { font-size: 14px; font-weight: 650; }.city-feed__post-header p { color: var(--unomas-muted); font-size: 11px; margin: 3px 0 0; }
.city-feed__verified { color: var(--unomas-violet); font-size: 12px; margin-left: 5px; }
.city-feed__post-menu { position: relative; }.city-feed__post-menu > button { width: 30px; height: 30px; color: var(--unomas-muted); }.city-feed__post-menu > div { position: absolute; top: 32px; right: 0; z-index: 5; background: white; border: 1px solid var(--unomas-border); border-radius: 12px; box-shadow: 0 5px 20px #1c124318; min-width: 170px; padding: 6px; }.city-feed__post-menu > div button { display: block; padding: 10px; font-size: 12px; width: 100%; text-align: left; border-radius: 8px; }.city-feed__post-menu button:hover { background: #f7f3ff; }
.city-feed__copy { white-space: pre-wrap; overflow-wrap: anywhere; }.city-feed__post > .city-feed__copy { font-size: 14px; }.city-feed__secondary { color: var(--unomas-muted); }
.city-feed__media { display: grid; gap: 7px; margin-top: 12px; }.city-feed__media:empty { display: none; }.city-feed__media--multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }.city-feed__media > div { min-width: 0; overflow: hidden; border-radius: 12px; }.city-feed__media button { display: block; width: 100%; }.city-feed__media img { display: block; width: 100%; max-height: 480px; object-fit: cover; }.city-feed__media--multiple img { height: 210px; }.city-feed__media video { display: block; width: 100%; max-height: 480px; background: #101021; }.city-feed__media audio { width: 100%; }
.city-feed__type-detail { display: flex; flex-wrap: wrap; gap: 12px; background: #f6f3ff; border-radius: 9px; padding: 12px; font-size: 12px; color: var(--unomas-muted); }.city-feed__type-detail:has(> [style*="display: none"]):not(:has(> :not([style*="display: none"]))) { display: none; }
.city-feed__shared { padding: 16px; border: 1px solid var(--unomas-border); border-radius: 12px; margin: 12px 0; }.city-feed__shared > strong { font-size: 12px; }.city-feed__shared h3 { margin-top: 10px; }
.city-feed__cta { display: flex; align-items: center; justify-content: space-between; color: var(--unomas-accent); background: #f5f1ff; border-radius: 10px; padding: 13px; font-size: 12px; margin: 12px 0; }
.city-feed__social-counts { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--unomas-muted); padding: 13px 0; }.city-feed__social-counts .fa-heart { color: #fa4a82; }
.city-feed__post-actions { display: flex; border-top: 1px solid var(--unomas-border); gap: 5px; padding: 12px 0 0; }.city-feed__post-actions button { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 7px; font-size: 12px; color: var(--unomas-muted); padding: 5px 0; }.city-feed__post-actions button i { font-size: 16px; }.city-feed__post-actions button.active, .city-feed__comment-actions .active { color: var(--unomas-accent); font-weight: 650; }
.city-home button:disabled { opacity: .5; cursor: not-allowed; }.city-home :is(button, a, select):focus-visible { outline: 2px solid var(--unomas-violet); outline-offset: 3px; }
.city-feed__notice { padding: 13px 16px; border-radius: 10px; font-size: 12px; margin: 10px 0; }.city-feed__notice--error { background: #fff0f2; color: #982c3e; }.city-feed__notice--success { background: #eefaf3; color: #21693e; }.city-feed__notice button { margin-left: 10px; text-decoration: underline; }
.city-feed__loading { text-align: center; padding: 30px; font-size: 13px; color: var(--unomas-muted); }.city-feed__loading i { margin-right: 8px; }.city-feed__empty { text-align: center; padding: 35px; color: var(--unomas-muted); }.city-feed__empty > i { font-size: 32px; color: var(--unomas-violet); margin-bottom: 16px; }.city-feed__more { justify-self: center; }
.city-feed__comments { border-top: 1px solid var(--unomas-border); margin-top: 14px; padding-top: 16px; }.city-feed__comment { display: flex; gap: 10px; margin-bottom: 16px; }.city-feed__avatar--small { width: 32px; height: 32px; font-size: 10px; }.city-feed__comment-body { flex: 1; min-width: 0; background: #f8f7fc; padding: 12px; border-radius: 12px; }.city-feed__comment-body strong { font-size: 12px; }.city-feed__comment-body p { font-size: 12px; margin: 4px 0; }.city-feed__comment-body time { font-size: 10px; color: var(--unomas-muted); }.city-feed__comment-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 10px; color: var(--unomas-muted); }.city-feed__text-button { color: var(--unomas-accent); font-size: 11px; padding: 9px 0; }.city-feed__comment-form > button { margin-top: 9px; }.city-feed__replies { border-left: 2px solid #e0d5fa; padding-left: 12px; margin-top: 10px; }.city-feed__replies > article { padding: 8px 0; border-bottom: 1px solid var(--unomas-border); }
.city-feed__survey { background: #faf8ff; border-radius: 12px; padding: 15px; margin: 12px 0; }.city-feed__survey > button:not(.unomas-btn-primary) { display: flex; width: 100%; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--unomas-border); background: white; border-radius: 9px; margin: 8px 0; font-size: 12px; }.city-feed__survey > button.selected { border-color: #9867fa; color: var(--unomas-accent); background: #f3eeff; }.city-feed__survey small { display: block; color: var(--unomas-muted); margin-top: 10px; font-size: 11px; }
.city-feed__overlay { position: fixed; inset: 0; z-index: 120; background: #0c0b2a99; display: grid; place-items: center; padding: 24px; overflow-y: auto; }.city-feed__dialog { position: relative; width: min(100%, 500px); background: white; border: 1px solid var(--unomas-border); padding: 28px; border-radius: 22px; box-shadow: 0 20px 80px #0003; }.city-feed__dialog h2 { padding-right: 25px; }.city-feed__dialog-close { position: absolute; right: 18px; top: 18px; width: 25px; height: 25px; }.city-feed__dialog form > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }.city-feed__lightbox { background: #08071be8; }.city-feed__lightbox > img { max-width: 100%; max-height: 85vh; object-fit: contain; }.city-feed__lightbox > button { position: absolute; right: 25px; top: 20px; color: white; background: #ffffff20; width: 40px; height: 40px; border-radius: 50%; }
.city-feed__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1500px) { .city-home__welcome > .city-home__static-control { display: inline-flex; } }
@media (max-width: 1200px) { .city-home { padding: 22px 18px 40px; }.city-home__grid { grid-template-columns: minmax(0, 1fr); }.city-home__discover { grid-template-columns: repeat(2, minmax(0, 1fr)); }.city-home__banner img { right: 45px; }.city-feed__compose-actions > .city-home__static-control { display: inline-flex; } }
@media (max-width: 650px) { .city-home { padding: 18px 12px 35px; }.city-home__card { padding: 15px; }.city-home__quick > div { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 16px; }.city-home__discover { grid-template-columns: 1fr; }.city-home__banner { padding: 22px; min-height: 215px; }.city-home__banner img { right: -40px; width: 150px; opacity: .45; }.city-home__orb { display: none; }.city-feed__compose-actions { margin-left: 0; }.city-feed__compose-actions > .city-home__static-control { display: none; }.city-feed__filters nav { gap: 5px; }.city-feed__filters nav button { padding: 10px 12px; }.city-feed__filters label, .city-feed__filters select { width: 100%; max-width: none; }.city-feed__post-actions button { font-size: 10px; gap: 5px; }.city-feed__post-actions button i { font-size: 14px; }.city-feed__social-counts { font-size: 10px; }.city-feed__media--multiple img { height: 150px; }.city-feed__dialog { padding: 22px; }.city-feed__overlay { padding: 16px; } }