.city-profile { max-width: 1440px; margin: 0 auto; padding: 30px 32px 56px; color: var(--unomas-ink); }
.city-profile [x-cloak] { display: none !important; }
.city-profile h1 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 750; line-height: 1.25; margin: 4px 0 8px; }
.city-profile h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.city-profile h3 { font-size: 14px; font-weight: 650; margin: 16px 0 10px; }
.city-profile p { font-size: 14px; line-height: 1.75; margin: 8px 0 16px; }
.city-profile small, .city-profile__help, .city-profile__handle { color: var(--unomas-muted); }
.city-profile small { display: block; font-size: 12px; line-height: 1.6; margin-top: 6px; }
.city-profile__heading { display: flex; gap: 20px; align-items: center; margin-bottom: 28px; }
.city-profile__heading > a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--unomas-border); border-radius: 14px; background: white; }
.city-profile__eyebrow { color: var(--unomas-violet); font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.city-profile__heading p { margin: 0; color: var(--unomas-muted); }
.city-profile__tabs { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--unomas-border); margin: 26px 0; scrollbar-width: thin; }
.city-profile__tabs button { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 16px 12px; border-bottom: 3px solid transparent; font-size: 12px; color: var(--unomas-muted); }
.city-profile__tabs button.active { color: var(--unomas-accent); border-bottom-color: var(--unomas-accent); font-weight: 650; }
.city-profile__editor { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.city-profile__fields { min-width: 0; border: 0; margin: 0; padding: 0; }
.city-profile__section, .city-profile__aside { display: grid; gap: 22px; }
.city-profile__card { min-width: 0; padding: 26px; background: var(--unomas-surface, white); border: 1px solid var(--unomas-border); border-radius: 24px; box-shadow: 0 5px 24px #272c5b03; }
.city-profile__card > .city-profile__help { margin-top: -5px; margin-bottom: 22px; }
.city-profile label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--unomas-muted); margin: 0; }
.city-profile input:not([type=checkbox]):not([type=file]), .city-profile textarea, .city-profile select { width: 100%; background: white; color: var(--unomas-ink); border: 1px solid #dddff1; border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 13px; line-height: 1.5; min-height: 44px; }
.city-profile textarea { resize: vertical; }
.city-profile input[readonly] { background: #f8f8fe; }
.city-profile :is(input, textarea, select):focus { outline: 2px solid #7c3aed35; outline-offset: 2px; border-color: var(--unomas-violet); }
.city-profile :is(button, a):focus-visible { outline: 2px solid var(--unomas-violet); outline-offset: 3px; }
.city-profile button:disabled, .city-profile input:disabled, .city-profile select:disabled { opacity: .5; cursor: not-allowed; }
.city-profile__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.city-profile__full { grid-column: 1 / -1; }
.city-profile__card > label { margin-top: 20px; }
.city-profile__actions { display: flex; justify-content: flex-end; gap: 16px; padding: 26px 0 0; }
.city-profile .unomas-btn-primary, .city-profile .unomas-btn-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 9px; font-size: 13px; padding: 12px 20px; min-height: 44px; border-radius: 11px; }
.city-profile__actions > button { min-width: 170px; }
.city-profile__preview { text-align: center; padding: 16px; overflow: hidden; }
.city-profile__preview h2 { text-align: left; padding: 6px; }
.city-profile__mini-cover { height: 105px; border-radius: 14px 14px 0 0; background: linear-gradient(140deg, #141246, #5325a3 55%, #d88de6); overflow: hidden; }
.city-profile__mini-cover img, .city-profile__cover-editor img, .city-profile__hero-cover > img { width: 100%; height: 100%; object-fit: cover; }
.city-profile__avatar { position: relative; flex-shrink: 0; width: 148px; height: 148px; border: 5px solid white; border-radius: 50%; background: linear-gradient(135deg, #8841ff, #ca9ff9); display: grid; place-items: center; color: white; font-size: 42px; font-weight: 750; overflow: hidden; box-shadow: 0 4px 18px #21164c14; }
.city-profile__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-profile__avatar--preview { width: 106px; height: 106px; margin: -44px auto 14px; font-size: 32px; }
.city-profile__preview h3 { font-size: 19px; margin: 0; }
.city-profile__preview p { font-size: 12px; margin: 8px 0; }
.city-profile__handle { font-size: 12px; }
.city-profile__verified { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--unomas-accent); background: #f3efff; border-radius: 20px; padding: 5px 9px; }
.city-profile__progress progress { display: block; width: 100%; height: 9px; border: 0; border-radius: 12px; appearance: none; margin: 18px 0; background: #edeafa; }
.city-profile__progress progress::-webkit-progress-bar { background: #edeafa; border-radius: 12px; }
.city-profile__progress progress::-webkit-progress-value { background: linear-gradient(90deg, #5b21f6, #9872ff); border-radius: 12px; }
.city-profile__progress progress::-moz-progress-bar { background: #5b21f6; border-radius: 12px; }
.city-profile__progress p { font-size: 12px; color: var(--unomas-muted); }
.city-profile__tip { background: linear-gradient(135deg, #f3edff, #f9f8ff); border: 1px solid #ece5fb; border-radius: 20px; padding: 22px; }
.city-profile__tip > i { color: var(--unomas-violet); font-size: 25px; margin-bottom: 14px; }
.city-profile__tip p { font-size: 12px; margin: 0; color: var(--unomas-muted); }
.city-profile__notice { padding: 16px 20px; border-radius: 14px; background: #f0edff; margin: 0 0 20px; font-size: 14px; }
.city-profile__notice i { margin-right: 10px; }
.city-profile__notice ul { margin: 8px 0 0 20px; list-style: disc; }
.city-profile__notice--error { background: #fff1f1; color: #a12635; }
.city-profile__notice--success { background: #edf9f0; color: #216542; }
.city-profile__cover-editor { height: 220px; background: linear-gradient(140deg, #161647, #6428ab, #c976ca); border-radius: 18px; overflow: hidden; display: grid; place-items: center; color: white; }
.city-profile__cover-editor > span { font-size: 22px; }
.city-profile__media-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.city-profile label.city-profile__upload { position: relative; overflow: hidden; cursor: pointer; flex-direction: row; color: white; }
.city-profile__upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.city-profile__photo-editor { display: flex; gap: 24px; align-items: center; margin: 24px 0; }
.city-profile__avatar--large { width: 170px; height: 170px; }
.city-profile__photo-editor p { font-size: 12px; color: var(--unomas-muted); }
.city-profile__social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; border: 1px solid var(--unomas-border); border-radius: 14px; margin: 0 0 14px; }
.city-profile label.city-profile__checkbox { flex-direction: row; align-items: center; }
.city-profile__text-button { justify-self: end; font-size: 12px; color: var(--unomas-accent); }
.city-profile input[type=checkbox] { accent-color: var(--unomas-accent); }
.city-profile__interest-search { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 20px 0; }
.city-profile__interest-search label { flex: 1; max-width: 360px; }
.city-profile__interest-search strong { color: var(--unomas-accent); font-size: 12px; padding-bottom: 12px; }
.city-profile__interest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.city-profile__interest-grid button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px; text-align: left; border: 1px solid var(--unomas-border); border-radius: 10px; font-size: 12px; }
.city-profile__interest-grid button.selected { color: var(--unomas-accent); border-color: #a685ff; background: #f7f3ff; }
.city-profile__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.city-profile__chips > :is(span, button) { padding: 7px 11px; border-radius: 9px; background: #f2edff; color: var(--unomas-accent); font-size: 11px; }
.city-profile__chips button { display: flex; align-items: center; gap: 10px; }
.city-profile label.city-profile__privacy-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--unomas-border); }
.city-profile__privacy-row select { max-width: 220px; }
.city-profile__hero { border: 1px solid var(--unomas-border); border-radius: 28px; background: white; overflow: hidden; }
.city-profile__hero-cover { height: 235px; position: relative; background: radial-gradient(ellipse at 75% 100%, #f481c8 0, transparent 45%), linear-gradient(125deg, #101244, #3f1c80 65%, #8050ab); }
.city-profile__hero-cover > img { position: absolute; inset: 0; }
.city-profile__hero-cover > .city-profile__eyebrow { position: absolute; left: 28px; top: 24px; color: white; }
.city-profile__hero-cover > a { position: absolute; right: 24px; top: 24px; }
.city-profile__hero-body { display: flex; align-items: flex-start; gap: 22px; padding: 0 28px 30px; }
.city-profile__hero-body > .city-profile__avatar { margin-top: -48px; }
.city-profile__identity { flex: 1; min-width: 0; padding-top: 22px; }
.city-profile__identity h1 { font-size: 27px; }
.city-profile__check { color: var(--unomas-violet); font-size: 18px; margin-left: 10px; }
.city-profile__identity p { font-size: 13px; margin: 6px 0 12px; }
.city-profile__bio { white-space: pre-wrap; overflow-wrap: anywhere; }
.city-profile__overview { width: 290px; margin-top: -30px; position: relative; border: 1px solid var(--unomas-border); border-radius: 20px; padding: 22px; background: white; box-shadow: 0 7px 26px #272c5b0a; }
.city-profile__overview dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.city-profile__overview dl > div { padding: 6px 0; }
.city-profile__overview i { color: var(--unomas-violet); background: #f3efff; border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.city-profile__overview dt { color: var(--unomas-muted); font-size: 11px; }
.city-profile__overview dd { font-size: 19px; font-weight: 750; margin-top: 5px; }
.city-profile__social-icons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.city-profile__social-icons a { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--unomas-border); border-radius: 20px; color: var(--unomas-accent); font-size: 11px; }
.city-profile__summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.city-profile__percentage { color: var(--unomas-accent); font-size: 46px; line-height: 1.4; }
.city-profile__details > div { padding: 10px 0; border-top: 1px solid var(--unomas-border); font-size: 13px; }
.city-profile__details dt { color: var(--unomas-muted); font-size: 11px; margin-bottom: 5px; }
.city-profile__details a { color: var(--unomas-accent); overflow-wrap: anywhere; }
.city-profile__badge, .city-profile__activity { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--unomas-border); }
.city-profile__badge > i, .city-profile__activity > i { color: var(--unomas-violet); background: #f5f0ff; padding: 13px; border-radius: 14px; }
.city-profile__badge h3, .city-profile__activity h3 { margin: 0 0 5px; }
.city-profile__badge p, .city-profile__activity p { margin: 0; font-size: 12px; color: var(--unomas-muted); }
.city-profile time { display: block; font-size: 11px; color: var(--unomas-muted); margin-top: 8px; }
.city-profile__content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.city-profile__content { padding: 20px; border: 1px solid var(--unomas-border); border-radius: 16px; }
.city-profile__public-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.city-profile__stats { display: flex; flex-wrap: wrap; gap: 28px; border-top: 1px solid var(--unomas-border); padding: 22px 28px; }
.city-profile__stats > div { flex: 1; min-width: 95px; text-align: center; }
.city-profile__stats dd { font-size: 24px; font-weight: 750; }
.city-profile__stats dt { color: var(--unomas-muted); font-size: 12px; margin-top: 5px; }
.city-profile--personal .city-profile__identity { padding-bottom: 0; }
.city-profile__media img, .city-profile__media video { width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; margin-top: 12px; background: #f7f8ff; }
.city-profile__message { width: min(540px, calc(100% - 32px)); border: 1px solid var(--unomas-border); border-radius: 24px; padding: 28px; color: var(--unomas-ink); }
.city-profile__message::backdrop { background: #13132c88; }
.city-profile__private { text-align: center; padding: 64px 24px; }
.city-profile__private > i { color: var(--unomas-violet); font-size: 38px; margin-bottom: 20px; }
.city-profile__private .city-profile__public-actions { justify-content: center; }
.city-profile__two-factor-status { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 14px; background: #ecfdf5; color: #166534; }
.city-profile__two-factor-status > i { font-size: 24px; padding-top: 3px; }
.city-profile__two-factor-status p { margin: 5px 0 0; }
.city-profile__two-factor-setup { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 24px; margin-top: 22px; }
.city-profile__two-factor-qr { padding: 10px; background: white; border: 1px solid var(--unomas-border); border-radius: 16px; }
.city-profile__two-factor-qr img { display: block; width: 100%; height: auto; }
.city-profile__two-factor-key { display: block; overflow-wrap: anywhere; user-select: all; font-size: 15px; letter-spacing: .1em; padding: 14px; background: #f5f2ff; border-radius: 10px; color: var(--unomas-accent); }
.city-profile input.city-profile__otp[type=text] { max-width: 285px; min-height: 60px; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: .35em; font-variant-numeric: tabular-nums; padding-left: 20px; }
@media (max-width: 1150px) { .city-profile__two-factor-setup { grid-template-columns: minmax(0, 1fr); } .city-profile__two-factor-qr { max-width: 240px; } }
@media (max-width: 600px) { .city-profile__stats { gap: 18px 10px; padding: 20px; } .city-profile__stats > div { min-width: calc(50% - 10px); } .city-profile__public-actions > :is(button, a) { flex: 1; } .city-profile__public-actions > div { width: 100%; } }
@media (max-width: 1250px) { .city-profile__editor { grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; } .city-profile__hero-body { flex-wrap: wrap; } .city-profile__overview { width: 100%; margin-top: 0; } .city-profile__overview dl { grid-template-columns: repeat(4, 1fr); } .city-profile__interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .city-profile { padding: 24px 20px 40px; } .city-profile__editor { grid-template-columns: 1fr; } .city-profile__aside { grid-template-columns: 1fr 1fr; } .city-profile__aside .city-profile__tip { display: none; } }
@media (max-width: 600px) { .city-profile { padding: 20px 14px 35px; } .city-profile__card { padding: 20px; border-radius: 19px; } .city-profile__form-grid, .city-profile__summary-grid, .city-profile__aside, .city-profile__content-grid { grid-template-columns: 1fr; } .city-profile__full { grid-column: auto; } .city-profile__actions { gap: 10px; } .city-profile__actions > button { min-width: 0; flex: 1; padding: 12px; } .city-profile__photo-editor { flex-direction: column; align-items: flex-start; } .city-profile__hero-body { padding: 0 20px 22px; gap: 0; } .city-profile__hero-body > .city-profile__avatar { width: 112px; height: 112px; margin-top: -40px; } .city-profile__identity { flex-basis: 100%; padding: 16px 0 22px; } .city-profile__hero-cover { height: 180px; } .city-profile__hero-cover > .city-profile__eyebrow { display: none; } .city-profile__overview dl { grid-template-columns: 1fr 1fr; } .city-profile label.city-profile__privacy-row { align-items: flex-start; flex-direction: column; } .city-profile__privacy-row select { max-width: none; } .city-profile__interest-search { gap: 10px; } .city-profile__social-row { grid-template-columns: 1fr; } }