:root {
  --bg: #100d10;
  --surface: #181318;
  --surface-2: #211920;
  --line: rgba(255,255,255,.09);
  --text: #f8f1f3;
  --muted: #9c9198;
  --accent: #fa3b64;
  --accent-2: #ff755f;
  --gold: #f2c276;
  --font: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ambient { position: fixed; border-radius: 999px; filter: blur(120px); opacity: .12; pointer-events: none; }
.ambient-one { background: #ff285a; width: 440px; height: 440px; right: -180px; top: -140px; }
.ambient-two { background: #7b284d; width: 500px; height: 500px; left: 25%; bottom: -370px; }

.app-shell { width: min(1480px, 100%); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 255px 1fr; }
.sidebar { border-right: 1px solid var(--line); padding: 38px 25px 24px; display: flex; flex-direction: column; position: sticky; height: 100vh; top: 0; background: rgba(16,13,16,.77); backdrop-filter: blur(18px); z-index: 5; }
.brand { color: var(--text); text-decoration: none; font: 800 30px/1 var(--display); letter-spacing: -2px; padding-left: 10px; }
.brand span, .brand i { color: var(--accent); font-style: normal; }
.side-nav { margin-top: 58px; display: grid; gap: 8px; }
.nav-item { border: 0; background: transparent; color: var(--muted); height: 50px; border-radius: 13px; display: flex; align-items: center; gap: 14px; padding: 0 14px; cursor: pointer; font-weight: 600; transition: .2s ease; position: relative; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.035); }
.nav-item.active { color: var(--text); background: rgba(250,59,100,.11); }
.nav-item.active:before { content: ""; position: absolute; left: -25px; width: 3px; height: 27px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.nav-item.active svg { color: var(--accent); }
.nav-item b { margin-left: auto; min-width: 22px; height: 22px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; background: var(--accent); color: white; }
.pro-mini { margin-top: auto; border: 1px solid rgba(242,194,118,.15); background: linear-gradient(145deg, rgba(242,194,118,.1), rgba(250,59,100,.045)); border-radius: 19px; padding: 18px; }
.mini-icon { width: 36px; height: 36px; border-radius: 11px; color: #2a1714; background: linear-gradient(135deg, #f7d39d, #e69a65); display: grid; place-items: center; margin-bottom: 13px; }
.mini-icon svg { width: 18px; }
.pro-mini strong { font: 700 14px var(--display); }
.pro-mini p { margin: 8px 0 15px; font-size: 11px; line-height: 1.55; color: var(--muted); }
.pro-mini button { padding: 0; border: 0; background: none; color: var(--gold); font-size: 11px; font-weight: 700; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.pro-mini button svg { width: 14px; }
.user-mini { padding: 22px 7px 0; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.avatar { flex: 0 0 auto; width: 41px; height: 41px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; position: relative; }
.avatar-user { color: #261516; background: linear-gradient(135deg, #f4c890, #f16c66); }
.user-mini div:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.user-mini strong { font-size: 12px; }
.user-mini span { font-size: 9px; color: var(--muted); }
.user-mini button { border: 0; background: none; color: var(--muted); cursor: pointer; letter-spacing: 2px; }
.sidebar-logout { margin-top: auto; width: 100%; height: 43px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; cursor: pointer; transition: .2s; }
.sidebar-logout:hover { color: #ff899d; border-color: rgba(250,59,100,.3); background: rgba(250,59,100,.06); }
.sidebar-logout svg { width: 14px; transform: rotate(180deg); }

.main-content { padding: 42px clamp(28px, 4vw, 64px) 50px; }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1050px; margin: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: 2.3px; color: var(--muted); font-size: 9px; font-weight: 700; margin: 0 0 7px; }
.topbar h1 { font: 500 clamp(23px, 2.4vw, 31px)/1.15 var(--display); letter-spacing: -1.1px; margin: 0; }
.topbar h1 em, .pro-card h3 em, .modal h2 em { font-family: Georgia, serif; font-weight: 400; color: #ffa0ae; }
.top-actions { display: flex; gap: 10px; }
.icon-button, .filter-button { height: 42px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 12px; cursor: pointer; transition: .2s; }
.icon-button:hover, .filter-button:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.icon-button { width: 42px; display: grid; place-items: center; position: relative; }
.icon-button span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); right: 9px; top: 8px; border: 1px solid var(--bg); }
.filter-button { padding: 0 15px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; }
.filter-button svg { width: 18px; }

.content-grid { display: grid; grid-template-columns: minmax(390px, 620px) minmax(250px, 315px); justify-content: center; gap: clamp(28px, 4vw, 54px); margin-top: 30px; }
.story-row { display: flex; gap: 18px; align-items: flex-start; overflow: hidden; padding: 2px 2px 15px; }
.story { padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; justify-items: center; gap: 7px; min-width: 52px; }
.story-ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: 11px; font-weight: 800; position: relative; }
.story-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.story.active .story-ring { padding: 2px; border: 1.5px solid var(--accent); }
.story small { font-size: 9px; }
.story.active small { color: var(--text); }
.profiles-loading { color: var(--muted); font-size: 9px; padding: 18px 5px; }
.avatar-coral { background: linear-gradient(145deg, #57202d, #ff6b6b); }
.avatar-violet { background: linear-gradient(145deg, #392c66, #9a7fe8); }
.avatar-gold { background: linear-gradient(145deg, #66512c, #d7a957); }
.avatar-blue { background: linear-gradient(145deg, #224f5c, #55a7aa); }

.profile-card { height: min(65vh, 590px); min-height: 500px; border-radius: 27px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.11); background: var(--surface); box-shadow: 0 30px 70px rgba(0,0,0,.35); transition: transform .3s, opacity .3s; }
.profile-card.swipe-right { transform: translateX(90px) rotate(5deg); opacity: 0; }
.profile-card.swipe-left { transform: translateX(-90px) rotate(-5deg); opacity: 0; }
.profile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.discovery-placeholder { position: absolute; inset: 0; place-items: center; color: rgba(255,255,255,.86); background: radial-gradient(circle at 50% 28%, #98607a, #3b2532 46%, #171119 78%); font: 800 72px var(--display); letter-spacing: -4px; }
.discovery-placeholder:not([hidden]) { display: grid; }
.photo-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(9,5,8,.18) 15%, transparent 43%, rgba(8,5,7,.05) 52%, rgba(8,5,7,.93) 100%); }
.profile-top { position: absolute; top: 19px; left: 19px; right: 19px; display: flex; justify-content: space-between; align-items: center; }
.online-pill { background: rgba(12,10,11,.55); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(9px); padding: 8px 11px; border-radius: 999px; font-size: 9px; font-weight: 600; }
.online-pill i { display: inline-block; width: 6px; height: 6px; background: #55d29a; box-shadow: 0 0 10px #55d29a; border-radius: 50%; margin-right: 5px; }
.ghost-round { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(12,10,11,.4); backdrop-filter: blur(7px); cursor: pointer; letter-spacing: 2px; }
.profile-copy { position: absolute; bottom: 98px; left: 27px; right: 27px; }
.match-score { color: #ffc6cf; font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.match-score svg { width: 14px; color: var(--accent); }
.profile-copy h2 { font: 700 clamp(26px, 3vw, 34px)/1 var(--display); letter-spacing: -1.3px; margin: 0; display: flex; align-items: center; gap: 9px; }
.verified { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #4d9be8; }
.verified svg { width: 13px; stroke-width: 2.8; }
.location { margin: 10px 0 13px; color: #d6ced2; font-size: 11px; display: flex; align-items: center; gap: 5px; }
.location svg { width: 14px; color: var(--accent); }
.profile-bio { max-width: 460px; margin: 0 0 12px; color: #c5bbc0; font-size: 10px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tags span { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(7px); padding: 6px 9px; border-radius: 99px; font-size: 9px; }
.view-full-profile { margin-top: 10px; padding: 0; border: 0; background: none; color: #e9dfe3; font-size: 9px; font-weight: 700; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.view-full-profile svg { width: 13px; color: var(--accent); }
.card-actions { position: absolute; height: 90px; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 18px; }
.choice { border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: .2s ease; }
.choice:hover { transform: translateY(-3px) scale(1.04); }
.reject, .favorite { width: 46px; height: 46px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.reject svg { color: #cbc1c6; }
.favorite svg { color: var(--gold); }
.like { width: 60px; height: 60px; border: 0; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 30px rgba(250,59,100,.35); }
.like svg { width: 27px; fill: white; stroke: white; }
.consent-note { color: #736b70; font-size: 9px; text-align: center; display: flex; justify-content: center; align-items: center; gap: 7px; margin: 13px 0 0; }
.consent-note svg { width: 12px; }
.client-empty-state { position: absolute; inset: 0; z-index: 8; background: radial-gradient(circle at 50% 35%, #30202a, #151014 68%); display: grid; place-items: center; align-content: center; text-align: center; padding: 25px; }
.client-empty-state[hidden] { display: none; }
.client-empty-state > span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: rgba(250,59,100,.1); }
.client-empty-state > span svg { width: 27px; }
.client-empty-state h2 { font: 700 19px var(--display); margin: 15px 0 6px; }
.client-empty-state p { color: var(--muted); font-size: 10px; margin: 0 0 17px; }
.client-empty-state button { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.05); font-size: 9px; font-weight: 700; cursor: pointer; }

.right-panel { padding-top: 70px; }
.pro-card { min-height: 330px; border: 1px solid rgba(242,194,118,.19); background: linear-gradient(145deg, #251a1d, #191316); border-radius: 23px; padding: 25px 24px 20px; position: relative; overflow: hidden; }
.pro-glow { width: 190px; height: 190px; border-radius: 50%; background: #8d3549; filter: blur(65px); opacity: .24; position: absolute; right: -80px; top: -70px; }
.pro-kicker { color: var(--gold); font-size: 9px; letter-spacing: 2px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.pro-kicker svg { width: 16px; }
.pro-card h3 { font: 600 23px/1.2 var(--display); letter-spacing: -.8px; margin: 18px 0 10px; }
.pro-card h3 em { font-size: 24px; }
.pro-card > p { color: var(--muted); font-size: 10px; line-height: 1.55; margin: 0; }
.pro-card ul { list-style: none; padding: 0; margin: 19px 0; display: grid; gap: 11px; }
.pro-card li { display: flex; align-items: center; gap: 9px; font-size: 10px; color: #d2c7cc; }
.pro-card li svg { width: 14px; color: var(--gold); stroke-width: 2.4; }
.pro-cta, .subscribe { width: 100%; border: 0; cursor: pointer; height: 45px; border-radius: 12px; color: #231616; background: linear-gradient(100deg, #f5c789, #e89a6e); font-weight: 800; font-size: 11px; display: flex; justify-content: center; align-items: center; gap: 9px; transition: .2s; box-shadow: 0 12px 25px rgba(202,128,83,.13); }
.pro-cta:hover, .subscribe:hover { transform: translateY(-2px); filter: brightness(1.07); }
.pro-cta svg { width: 16px; }
.pro-card > small { display: block; text-align: center; color: #6e6468; font-size: 8px; margin-top: 9px; }
.recent-section { margin-top: 26px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title h3 { margin: 0; font: 700 13px var(--display); }
.section-title button { border: 0; background: none; color: #9b747c; cursor: pointer; font-size: 9px; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.person-row .avatar { width: 39px; height: 39px; }
.person-row .avatar i { position: absolute; width: 8px; height: 8px; background: #55d29a; border: 2px solid var(--bg); border-radius: 50%; right: 0; bottom: 0; }
.person-row > div { display: grid; gap: 3px; flex: 1; }
.person-row strong { font-size: 10px; }
.person-row small { font-size: 8px; color: var(--muted); }
.tiny-heart { border: 0; background: transparent; color: #786f74; cursor: pointer; }
.tiny-heart svg { width: 17px; }
.tiny-heart.liked svg { fill: var(--accent); stroke: var(--accent); }

.mobile-nav { display: none; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(5,3,4,.76); backdrop-filter: blur(11px); display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: .25s; z-index: 30; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { width: min(410px, 100%); padding: 36px 34px 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; background: radial-gradient(circle at 50% 0%, #42232c 0, #1b1418 35%, #130f12 85%); position: relative; text-align: center; transform: translateY(15px) scale(.98); transition: .3s; box-shadow: 0 35px 90px #000; }
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-close { border: 0; background: rgba(255,255,255,.06); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; position: absolute; right: 17px; top: 17px; }
.modal-close svg { width: 17px; }
.modal-crown { width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; margin: 0 auto 12px; color: #321e18; background: linear-gradient(135deg, #f5d19c, #e89a6e); box-shadow: 0 10px 30px rgba(232,154,110,.2); }
.modal-crown svg { width: 25px; }
.modal-tag, .match-kicker { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.modal h2 { font: 650 27px/1.15 var(--display); letter-spacing: -1px; margin: 11px 0 8px; }
.modal > p { color: var(--muted); font-size: 11px; margin: 0 auto 21px; }
.plan-options { display: grid; gap: 9px; margin-bottom: 15px; }
.plan { min-height: 64px; padding: 0 15px; display: flex; align-items: center; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 13px; cursor: pointer; position: relative; }
.plan.selected { border-color: rgba(242,194,118,.7); background: rgba(242,194,118,.08); box-shadow: inset 0 0 0 1px rgba(242,194,118,.14); }
.plan span { display: grid; gap: 4px; }
.plan strong { font-size: 12px; }
.plan small { font-size: 8px; color: var(--muted); }
.plan b { margin-left: auto; font-size: 13px; }
.plan b small { font-weight: 400; margin-left: 2px; }
.plan > i { font-style: normal; font-size: 8px; color: #281916; background: var(--gold); border-radius: 99px; padding: 3px 6px; position: absolute; right: 8px; top: -7px; }
.subscribe { background: linear-gradient(100deg, var(--accent-2), var(--accent)); color: white; height: 50px; box-shadow: 0 12px 30px rgba(250,59,100,.2); }
.subscribe svg { width: 17px; }
.safe-pay { color: #6e6569; font-size: 8px; display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 12px; }
.safe-pay svg { width: 10px; }
.match-avatars { height: 80px; display: flex; justify-content: center; align-items: center; margin: 3px 0 16px; }
.match-avatars .avatar, .match-avatars img { width: 74px; height: 74px; border: 4px solid #1d1519; border-radius: 50%; object-fit: cover; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.match-avatars .avatar { transform: rotate(-8deg); }
.match-avatars img { margin-left: -12px; transform: rotate(8deg); }
.match-profile-placeholder { width: 74px; height: 74px; margin-left: -12px; transform: rotate(8deg); border: 4px solid #1d1519; border-radius: 50%; background: linear-gradient(145deg, #76516a, #2d2634); display: grid; place-items: center; font-weight: 800; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.match-profile-placeholder[hidden] { display: none; }
.match-modal h2 { margin-top: 8px; }
.match-modal .subscribe { margin-top: 18px; }
.keep-looking { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 10px; margin-top: 15px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 80px); opacity: 0; background: #f4ecef; color: #25181d; border-radius: 12px; padding: 11px 16px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 10px; z-index: 50; transition: .3s; box-shadow: 0 15px 50px rgba(0,0,0,.35); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 15px; stroke-width: 2.5; color: var(--accent); }

.professional-dashboard { display: none; max-width: 1100px; margin: 0 auto; }
.professional-dashboard.active { display: block; }
.professional-mode .topbar, .professional-mode .content-grid { display: none; }
.professional-mode .pro-mini { display: none; }
.professional-mode .user-mini { margin-top: auto; }
.professional-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.professional-header h1 { font: 600 clamp(25px, 3vw, 34px)/1.15 var(--display); letter-spacing: -1.3px; margin: 0; }
.professional-header h1 em { font-family: Georgia, serif; font-weight: 400; color: #ffa0ae; }
.professional-header > div > p:last-child { color: var(--muted); font-size: 11px; margin: 9px 0 0; }
.preview-profile { height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 10px; font-weight: 700; }
.preview-profile svg { width: 16px; }
.professional-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.professional-stats article { min-height: 105px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border-radius: 17px; padding: 16px 17px; display: grid; align-content: center; gap: 4px; }
.professional-stats span { color: var(--muted); font-size: 9px; }
.professional-stats strong { font: 700 25px var(--display); letter-spacing: -1px; }
.professional-stats small { color: #8a7f84; font-size: 8px; }
.profile-strength div { width: 100%; height: 3px; border-radius: 4px; background: rgba(255,255,255,.07); margin: 2px 0; overflow: hidden; }
.profile-strength div i { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.professional-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 22px; }
.professional-main { display: grid; gap: 22px; align-content: start; }
.creator-card, .my-content-section, .interests-panel { border: 1px solid var(--line); background: rgba(24,19,24,.72); border-radius: 21px; padding: 21px; }
.creator-heading, .dashboard-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.creator-heading h2, .dashboard-section-title h2 { margin: 0; font: 700 14px var(--display); }
.creator-heading p, .dashboard-section-title p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.secure-content { display: flex; align-items: center; gap: 5px; color: #8e8388; font-size: 8px; }
.secure-content svg { width: 11px; color: var(--gold); }
.upload-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }
.upload-trigger { cursor: pointer; }
.upload-actions > button { min-height: 74px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 14px; padding: 11px; display: flex; align-items: center; gap: 9px; text-align: left; transition: .2s; }
.upload-actions > button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.upload-actions button > span { flex: 0 0 auto; width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; }
.photo-upload > span { color: #ff8b9e; background: rgba(250,59,100,.13); }
.story-upload > span { color: var(--gold); background: rgba(242,194,118,.11); }
.video-upload > span { color: #a89ae9; background: rgba(137,114,220,.12); }
.upload-actions button > span svg { width: 17px; }
.upload-actions button > div { display: grid; gap: 4px; flex: 1; }
.upload-actions strong { font-size: 9px; }
.upload-actions small { color: var(--muted); font-size: 7px; }
.upload-actions button > svg { width: 13px; color: #756b70; }
.upload-progress { height: 0; overflow: hidden; display: flex; align-items: center; gap: 9px; transition: .2s; }
.upload-progress.visible { height: 25px; margin-top: 10px; }
.upload-progress span { font-size: 8px; color: var(--muted); flex: 1; }
.upload-progress i { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.12); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.content-tabs { display: flex; gap: 3px; background: rgba(255,255,255,.025); padding: 3px; border-radius: 8px; }
.content-tabs button { border: 0; background: none; color: var(--muted); border-radius: 6px; padding: 5px 8px; font-size: 8px; cursor: pointer; }
.content-tabs button.active { background: rgba(255,255,255,.08); color: var(--text); }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.media-item, .empty-media { aspect-ratio: 1/1.08; border-radius: 13px; overflow: hidden; position: relative; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.media-item img, .media-item video { width: 100%; height: 100%; object-fit: cover; }
.media-kind { position: absolute; left: 7px; top: 7px; border-radius: 99px; padding: 4px 6px; color: white; background: rgba(10,7,9,.67); backdrop-filter: blur(5px); font-size: 7px; text-transform: uppercase; }
.media-kind svg { width: 10px; height: 10px; margin-right: 3px; vertical-align: -2px; }
.empty-media { color: #72686d; display: grid; place-items: center; align-content: center; gap: 6px; border-style: dashed; }
.empty-media:hover { color: var(--text); border-color: rgba(250,59,100,.4); }
.empty-media svg { width: 19px; }
.empty-media strong { font-size: 9px; }
.empty-media small { font-size: 7px; }
.interests-panel { align-self: start; }
.live-pill { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 99px; background: rgba(85,210,154,.08); color: #77d8ad; font-size: 7px; }
.live-pill i { width: 5px; height: 5px; background: #55d29a; border-radius: 50%; box-shadow: 0 0 7px #55d29a; }
.interest-list { display: grid; gap: 9px; margin-top: 16px; }
.interest-loading, .interest-empty { color: var(--muted); font-size: 9px; text-align: center; padding: 30px 5px; }
.interest-card { border: 1px solid var(--line); border-radius: 15px; padding: 12px; background: rgba(255,255,255,.02); }
.interest-person { display: flex; align-items: center; gap: 10px; }
.male-avatar { color: white; background: linear-gradient(145deg, #324151, #637e94); }
.interest-person > div:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.interest-person strong { font-size: 10px; }
.interest-person small { color: var(--muted); font-size: 8px; }
.interest-verified { width: 14px; height: 14px; background: #4d9be8; display: grid; place-items: center; border-radius: 50%; }
.interest-verified svg { width: 9px; stroke-width: 2.5; }
.interest-bio { margin: 10px 0; color: #aaa0a5; font-size: 8px; line-height: 1.5; }
.interest-actions { display: grid; grid-template-columns: 39px 1fr; gap: 7px; }
.interest-actions button { height: 35px; border-radius: 10px; cursor: pointer; font-size: 8px; font-weight: 700; }
.pass-interest { border: 1px solid var(--line); background: transparent; color: var(--muted); display: grid; place-items: center; }
.pass-interest svg { width: 15px; }
.accept-interest { border: 0; background: linear-gradient(100deg, var(--accent-2), var(--accent)); display: flex; align-items: center; justify-content: center; gap: 6px; }
.accept-interest svg { width: 13px; fill: white; }
.interest-card.accepted { opacity: .62; }
.interest-card.accepted .accept-interest { background: rgba(85,210,154,.12); color: #77d8ad; }
.consent-box { margin-top: 14px; padding: 12px; background: rgba(250,59,100,.055); border-radius: 12px; display: flex; align-items: flex-start; gap: 9px; }
.consent-box svg { width: 14px; color: var(--accent); flex: 0 0 auto; }
.consent-box p { margin: 0; display: grid; gap: 3px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.consent-box strong { color: #d6cbd0; font-size: 8px; }

/* Perfil profissional em formato de rede social visual */
.professional-dashboard { max-width: 1030px; padding-top: 4px; }
.professional-layout { grid-template-columns: minmax(0, 680px) minmax(275px, 320px); gap: clamp(30px, 4vw, 54px); align-items: start; }
.instagram-profile { min-width: 0; }
.insta-profile-header { display: grid; grid-template-columns: 155px 1fr; gap: 30px; align-items: center; padding: 20px 18px 30px; }
.insta-avatar-ring { width: 132px; height: 132px; border-radius: 50%; padding: 3px; background: linear-gradient(145deg, #ffb06f, #f33e6a 48%, #973ad9); position: relative; justify-self: center; }
.insta-avatar { width: 100%; height: 100%; border: 4px solid var(--bg); border-radius: 50%; display: grid; place-items: center; color: white; background: radial-gradient(circle at 35% 30%, #864b62, #2b1a25 65%); font: 800 27px var(--display); }
.avatar-add { position: absolute; right: 2px; bottom: 5px; width: 29px; height: 29px; border-radius: 50%; border: 3px solid var(--bg); background: #4295e9; display: grid; place-items: center; color: white; }
.avatar-add svg { width: 14px; stroke-width: 2.5; }
.insta-profile-info { min-width: 0; }
.insta-name-row { display: flex; align-items: center; gap: 9px; }
.insta-name-row h1 { margin: 0; font: 500 19px var(--display); letter-spacing: -.5px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insta-name-row .verified { width: 16px; height: 16px; }
.insta-name-row .verified svg { width: 10px; }
.edit-profile { margin-left: 8px; height: 30px; padding: 0 13px; border: 0; border-radius: 8px; background: rgba(255,255,255,.09); font-size: 9px; font-weight: 700; cursor: pointer; }
.profile-settings { border: 0; background: none; color: var(--muted); letter-spacing: 2px; cursor: pointer; }
.insta-stats { display: flex; gap: 28px; margin: 21px 0 17px; }
.insta-stats button { border: 0; background: none; padding: 0; font-size: 10px; cursor: pointer; }
.insta-stats strong { font-size: 12px; margin-right: 3px; }
.insta-bio { display: grid; justify-items: start; gap: 4px; font-size: 9px; }
.insta-bio > strong { font-size: 10px; }
.insta-bio > span { color: var(--muted); display: flex; align-items: center; gap: 3px; }
.insta-bio > span svg { width: 11px; color: var(--accent); }
.insta-bio > span b { font-weight: 500; }
.insta-bio p { margin: 3px 0; color: #c4b9be; }
.insta-bio small { color: #8d8287; display: flex; align-items: center; gap: 4px; }
.insta-bio small svg { width: 10px; color: var(--gold); }
.insta-highlights { display: flex; gap: 23px; padding: 6px 27px 28px; overflow-x: auto; scrollbar-width: none; }
.insta-highlights::-webkit-scrollbar { display: none; }
.highlight { border: 0; background: none; display: grid; justify-items: center; gap: 7px; cursor: pointer; min-width: 63px; }
.highlight > span { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255,255,255,.17); display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--bg); }
.highlight > small { font-size: 8px; color: #c4b9be; }
.new-highlight { background: rgba(255,255,255,.025); border-style: dashed !important; color: #a4999f; }
.new-highlight svg { width: 20px; }
.highlight-gradient { background: linear-gradient(145deg, #713442, #271820); }
.highlight-gradient.gold { background: linear-gradient(145deg, #7f6031, #281f17); }
.highlight-gradient.violet { background: linear-gradient(145deg, #573d75, #21182c); }
.highlight-gradient i { font-size: 18px; font-style: normal; }
.insta-create-bar { border: 1px solid var(--line); background: rgba(255,255,255,.018); border-radius: 15px; margin: 0 8px 24px; padding: 12px 14px; }
.insta-create-bar > div:first-child { display: flex; align-items: center; gap: 10px; }
.insta-create-bar > div:first-child p { margin: 0; color: #776c72; font-size: 10px; }
.insta-create-bar .avatar { width: 35px; height: 35px; }
.insta-create-actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
.insta-create-actions button { border: 0; border-right: 1px solid var(--line); background: none; display: flex; justify-content: center; align-items: center; gap: 6px; color: #aaa0a5; font-size: 8px; cursor: pointer; }
.insta-create-actions button:last-child { border-right: 0; }
.insta-create-actions button:hover { color: var(--text); }
.insta-create-actions svg { width: 15px; }
.insta-create-actions button:nth-child(1) svg { color: #ff718b; }
.insta-create-actions button:nth-child(2) svg { color: var(--gold); }
.insta-create-actions button:nth-child(3) svg { color: #9a83dc; }
.insta-content { border-top: 1px solid var(--line); }
.insta-tabs { height: 45px; display: flex; justify-content: center; gap: 40px; }
.insta-tabs button { height: 100%; border: 0; border-top: 1px solid transparent; margin-top: -1px; background: none; color: #70666c; font-size: 7px; letter-spacing: 1px; font-weight: 700; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.insta-tabs button.active { color: var(--text); border-top-color: var(--text); }
.insta-tabs svg { width: 12px; }
.instagram-profile .media-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0; }
.instagram-profile .media-item, .instagram-profile .empty-media { aspect-ratio: 1; border-radius: 1px; border: 0; }
.instagram-profile .empty-media { background: rgba(255,255,255,.025); outline: 1px dashed rgba(255,255,255,.1); outline-offset: -8px; }
.instagram-profile .media-item:after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.16); opacity: 0; transition: .2s; }
.instagram-profile .media-item:hover:after { opacity: 1; }
.instagram-profile .media-kind { z-index: 2; }
.interests-panel { border: 0; background: transparent; border-radius: 0; padding: 16px 0 0; position: sticky; top: 25px; }
.interest-account { display: flex; align-items: center; gap: 10px; padding-bottom: 22px; }
.interest-account .avatar { width: 46px; height: 46px; }
.interest-account > div { display: grid; gap: 3px; flex: 1; }
.interest-account strong { font-size: 10px; }
.interest-account small { color: var(--muted); font-size: 8px; }
.interest-account button, .see-all-interests { border: 0; background: none; color: #61a7ed; font-size: 8px; font-weight: 700; cursor: pointer; }
.interests-panel .dashboard-section-title { align-items: center; }
.interests-panel .dashboard-section-title h2 { color: #93878d; font-size: 11px; }
.interests-panel .dashboard-section-title p { display: none; }
.interest-list { gap: 2px; margin-top: 10px; }
.interest-card { border: 0; background: transparent; border-radius: 0; padding: 9px 0; }
.interest-bio { display: none; }
.interest-card .interest-actions { grid-template-columns: 31px 92px; justify-content: end; margin-top: -3px; }
.interest-card .interest-actions button { height: 29px; border-radius: 7px; }
.interest-card .interest-person .avatar { width: 39px; height: 39px; }
.interest-card .interest-person > div:nth-child(2) small { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consent-box { background: transparent; padding-inline: 0; border-top: 1px solid var(--line); border-radius: 0; }

/* Descoberta profissional em formato de cards e match */
.tinder-page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; }
.tinder-page-header h1 { font: 600 clamp(24px, 3vw, 32px)/1.15 var(--display); letter-spacing: -1.2px; margin: 0; }
.tinder-page-header h1 em { font-family: Georgia, serif; font-weight: 400; color: #ffa0ae; }
.tinder-header-stats { display: flex; gap: 9px; }
.tinder-header-actions { display: flex; align-items: center; gap: 10px; }
.dashboard-story-button { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; color: white; background: linear-gradient(135deg, var(--accent-2), var(--accent)); display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px rgba(250,59,100,.2); }
.dashboard-story-button svg { width: 13px; }
.tinder-header-stats span { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 99px; padding: 8px 11px; color: var(--muted); font-size: 8px; }
.tinder-header-stats strong { color: var(--text); margin-right: 3px; }
.professional-dashboard .professional-layout { grid-template-columns: minmax(390px, 590px); justify-content: center; }
.deck-status { height: 38px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 8px; }
.deck-status > span { display: flex; align-items: center; gap: 6px; }
.deck-status > span i { width: 6px; height: 6px; border-radius: 50%; background: #55d29a; box-shadow: 0 0 8px #55d29a; }
.deck-status button { border: 0; background: none; color: var(--muted); font-size: 8px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.deck-status svg { width: 13px; }
.tinder-deck { height: min(67vh, 590px); min-height: 510px; position: relative; perspective: 900px; }
.tinder-deck:before, .tinder-deck:after { content: ""; position: absolute; height: 100%; border-radius: 25px; border: 1px solid var(--line); background: #1b151a; z-index: -1; }
.tinder-deck:before { inset: 8px 12px -8px; opacity: .7; }
.tinder-deck:after { inset: 15px 24px -15px; opacity: .38; }
.tinder-interest-card { position: absolute; inset: 0; border-radius: 25px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); background: #1a2029; box-shadow: 0 28px 65px rgba(0,0,0,.34); transition: transform .28s ease, opacity .28s ease; }
.tinder-interest-card.swiping-right { transform: translateX(100px) rotate(7deg); opacity: 0; }
.tinder-interest-card.swiping-left { transform: translateX(-100px) rotate(-7deg); opacity: 0; }
.tinder-card-visual { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(145deg, #426078, #18222c 50%, #11161c); }
.tinder-card-visual:before { content: ""; position: absolute; width: 290px; height: 430px; border-radius: 48% 48% 30% 30%; left: 50%; bottom: 40px; transform: translateX(-50%); background: linear-gradient(155deg, #7b91a3, #283a49 62%, #15212b); box-shadow: 0 0 80px rgba(110,146,172,.18); }
.tinder-card-visual:after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; left: 50%; top: 68px; transform: translateX(-50%); background: radial-gradient(circle at 36% 30%, #9dafbd, #465e70 52%, #22313d 73%); border: 5px solid rgba(255,255,255,.05); }
.tinder-man-initials { position: absolute; z-index: 2; left: 50%; top: 121px; transform: translate(-50%,-50%); color: rgba(255,255,255,.88); font: 800 42px var(--display); letter-spacing: -2px; }
.tinder-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35; }
.orb-one { width: 250px; height: 250px; background: #417492; top: -100px; right: -80px; }
.orb-two { width: 220px; height: 220px; background: #66394d; bottom: 40px; left: -110px; }
.already-liked { position: absolute; z-index: 3; top: 18px; left: 18px; padding: 7px 10px; border-radius: 99px; background: rgba(10,14,18,.52); backdrop-filter: blur(8px); font-size: 8px; display: flex; align-items: center; gap: 5px; }
.already-liked svg { width: 12px; fill: var(--accent); stroke: var(--accent); }
.already-liked.priority-interest { color: #2a1a16; background: linear-gradient(135deg, #f5d099, #e9a271); font-weight: 800; }
.already-liked.priority-interest svg { color: #2a1a16; fill: none; stroke: currentColor; }
.tinder-card-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 38%, rgba(7,9,12,.12) 51%, rgba(8,9,12,.96) 91%); }
.tinder-card-info { position: absolute; left: 25px; right: 25px; bottom: 93px; }
.compatibility { color: #ffadba; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.compatibility svg { width: 13px; color: var(--accent); }
.tinder-card-info h2 { margin: 7px 0 0; font: 750 29px/1 var(--display); letter-spacing: -1px; display: flex; align-items: center; gap: 7px; }
.tinder-card-info h2 b { font-weight: 400; }
.tinder-card-info .verified { width: 18px; height: 18px; }
.tinder-card-info .verified svg { width: 11px; }
.tinder-location { margin: 9px 0 7px; color: #d1c9cd; font-size: 9px; display: flex; align-items: center; gap: 5px; }
.tinder-location svg { width: 13px; color: var(--accent); }
.tinder-bio { color: #aaa1a6; font-size: 9px; line-height: 1.45; margin: 0; max-width: 380px; }
.tinder-swipe-actions { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.tinder-swipe-actions button { border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: .2s; }
.tinder-swipe-actions button:hover { transform: translateY(-3px) scale(1.04); }
.tinder-swipe-actions .pass-interest, .tinder-swipe-actions .super-interest { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.08); backdrop-filter: blur(7px); }
.tinder-swipe-actions .pass-interest svg { color: #ddd3d7; }
.tinder-swipe-actions .super-interest svg { color: var(--gold); }
.tinder-swipe-actions .accept-interest { width: 59px; height: 59px; border: 0; color: white; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 28px rgba(250,59,100,.32); }
.tinder-swipe-actions .accept-interest svg { width: 25px; fill: currentColor; }
.swipe-hint { color: #70666b; font-size: 7px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; }
.swipe-hint svg { width: 11px; }
.swipe-hint svg:last-of-type { color: var(--accent); fill: var(--accent); }
.swipe-hint span { width: 1px; height: 11px; background: var(--line); margin: 0 5px; }
.tinder-empty { height: 100%; border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,.02); display: grid; place-items: center; align-content: center; text-align: center; }
.tinder-empty > span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(250,59,100,.1); color: var(--accent); }
.tinder-empty > span svg { width: 25px; }
.tinder-empty h3 { font: 700 14px var(--display); margin: 14px 0 5px; }
.tinder-empty p { color: var(--muted); font-size: 9px; margin: 0; }
.tinder-profile-panel { padding-top: 38px; }
.my-profile-card, .tinder-content-manager { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); padding: 17px; }
.my-profile-top { display: flex; align-items: center; gap: 12px; }
.my-profile-avatar { width: 57px; height: 57px; border-radius: 50%; padding: 2px; background: linear-gradient(145deg, var(--gold), var(--accent)); position: relative; display: grid; place-items: center; }
.my-profile-avatar > span { width: 100%; height: 100%; border: 3px solid var(--surface); background: linear-gradient(145deg, #844358, #281b24); border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.my-profile-avatar button { position: absolute; width: 20px; height: 20px; right: -1px; bottom: 0; border: 2px solid var(--surface); background: #4598e9; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.my-profile-avatar button svg { width: 10px; }
.my-profile-top > div:last-child { display: grid; gap: 3px; }
.my-profile-top > div:last-child > span { color: var(--muted); font-size: 7px; letter-spacing: 1px; }
.my-profile-top h2 { margin: 0; font: 700 14px var(--display); }
.my-profile-top p { margin: 0; color: var(--muted); font-size: 8px; display: flex; align-items: center; gap: 3px; }
.my-profile-top p svg { width: 10px; color: var(--accent); }
.profile-progress { margin: 16px 0 12px; }
.profile-progress > span { display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; margin-bottom: 6px; }
.profile-progress strong { color: var(--gold); }
.profile-progress > div { height: 3px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.profile-progress i { display: block; width: 72%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.edit-profile-wide { width: 100%; height: 34px; border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 8px; font-weight: 700; cursor: pointer; }
.edit-profile-wide svg { width: 13px; }
.tinder-content-manager { margin-top: 12px; }
.content-manager-title { display: flex; justify-content: space-between; align-items: center; }
.content-manager-title h3 { margin: 0; font: 700 11px var(--display); }
.content-manager-title p { color: var(--muted); font-size: 7px; margin: 3px 0 0; }
.content-manager-title > svg { width: 13px; color: var(--gold); }
.quick-upload-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.quick-upload-actions button { border: 0; background: none; display: grid; justify-items: center; gap: 5px; cursor: pointer; }
.quick-upload-actions button > span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.055); }
.quick-upload-actions button:nth-child(1) span { color: #ff7890; }
.quick-upload-actions button:nth-child(2) span { color: var(--gold); }
.quick-upload-actions button:nth-child(3) span { color: #a78be7; }
.quick-upload-actions svg { width: 16px; }
.quick-upload-actions small { color: var(--muted); font-size: 7px; }
.mini-media-grid { gap: 4px; margin-top: 13px; max-height: 190px; overflow-y: auto; }
.mini-media-grid .media-item, .mini-media-grid .empty-media { aspect-ratio: 1; border-radius: 7px; }
.mini-media-grid .empty-media strong { font-size: 7px; }
.mini-media-grid .empty-media small { display: none; }
.tinder-profile-panel > .consent-box { margin-top: 12px; }

.matches-page { display: none; max-width: 1040px; margin: 0 auto; }
.matches-page.active { display: block; }
.matches-page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.matches-page-header h1 { margin: 0; font: 600 clamp(25px, 3vw, 33px)/1.15 var(--display); letter-spacing: -1.2px; }
.matches-page-header h1 em { font-family: Georgia, serif; font-weight: 400; color: #ffa0ae; }
.matches-page-header > div > p:last-child { color: var(--muted); font-size: 10px; margin: 8px 0 0; }
.matches-safe { display: flex; align-items: center; gap: 6px; color: #8e8489; font-size: 8px; }
.matches-safe svg { width: 12px; color: var(--gold); }
.messenger-shell { height: min(72vh, 690px); min-height: 570px; display: grid; grid-template-columns: 310px 1fr; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: rgba(20,15,19,.75); box-shadow: 0 25px 65px rgba(0,0,0,.22); }
.conversation-sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.conversation-title { height: 67px; padding: 0 19px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.conversation-title h2 { margin: 0; font: 700 14px var(--display); }
.conversation-title span { margin-left: 7px; min-width: 20px; height: 20px; border-radius: 99px; padding: 0 6px; display: grid; place-items: center; background: rgba(250,59,100,.12); color: var(--accent); font-size: 8px; font-weight: 700; }
.chat-search { height: 36px; margin: 13px 14px 8px; border-radius: 9px; background: rgba(255,255,255,.045); display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.chat-search svg { width: 13px; color: #766b71; }
.chat-search input { width: 100%; border: 0; outline: 0; background: none; color: var(--text); font-size: 9px; }
.chat-search input::placeholder { color: #70666b; }
.conversation-list { overflow-y: auto; padding: 4px 8px 12px; }
.chat-loading, .conversation-empty { text-align: center; color: var(--muted); font-size: 9px; padding: 35px 10px; }
.conversation-item { width: 100%; border: 0; background: transparent; border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; transition: .18s; }
.conversation-item:hover { background: rgba(255,255,255,.035); }
.conversation-item.active { background: rgba(250,59,100,.09); }
.conversation-avatar { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #76516a, #2d2634); font-size: 10px; font-weight: 800; position: relative; overflow: hidden; }
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-avatar i { position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: #55d29a; }
.conversation-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.conversation-copy strong { font-size: 10px; }
.conversation-copy small { color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item > time { color: #6e6469; font-size: 7px; align-self: flex-start; margin-top: 4px; }
.chat-panel { min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-empty { height: 100%; display: grid; place-items: center; align-content: center; text-align: center; }
.chat-empty > span, .chat-lock > span { width: 63px; height: 63px; border-radius: 21px; display: grid; place-items: center; background: rgba(250,59,100,.09); color: var(--accent); }
.chat-empty > span svg, .chat-lock > span svg { width: 27px; }
.chat-empty h2, .chat-lock h2 { font: 700 15px var(--display); margin: 14px 0 6px; }
.chat-empty p, .chat-lock p { color: var(--muted); font-size: 9px; margin: 0; }
.chat-header { height: 67px; flex: 0 0 auto; border-bottom: 1px solid var(--line); padding: 0 18px; display: flex; align-items: center; gap: 10px; }
.chat-header .conversation-avatar { width: 39px; height: 39px; }
.chat-header > div:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.chat-header strong { font-size: 11px; }
.chat-header small { color: #62c998; font-size: 8px; }
.chat-header button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.chat-header button svg { width: 15px; }
.chat-header .chat-back { display: none; }
.message-list { flex: 1; overflow-y: auto; padding: 20px 19px; display: flex; flex-direction: column; gap: 9px; }
.message-date { align-self: center; color: #756b70; font-size: 7px; margin: 2px 0 7px; }
.chat-empty-inline { margin: auto; color: var(--muted); font-size: 9px; text-align: center; }
.message { max-width: 72%; padding: 10px 12px 7px; border-radius: 14px; background: rgba(255,255,255,.065); font-size: 9px; line-height: 1.45; }
.message.mine { align-self: flex-end; background: linear-gradient(135deg, #e8506e, #ed315d); color: white; border-bottom-right-radius: 4px; }
.message.theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.message time { display: block; margin-top: 4px; text-align: right; color: rgba(255,255,255,.55); font-size: 6px; }
.message-form { height: 67px; flex: 0 0 auto; border-top: 1px solid var(--line); padding: 10px 13px; display: flex; gap: 8px; }
.message-form .chat-text-input { flex: 1; min-width: 0; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text); border-radius: 12px; padding: 0 13px; outline: none; font-size: 9px; }
.message-form .chat-text-input:focus { border-color: rgba(250,59,100,.5); }
.message-form button { width: 45px; border: 0; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: white; }
.message-form button svg { width: 18px; }
.message-form .chat-photo-button { flex: 0 0 auto; border: 1px solid var(--line); background: rgba(255,255,255,.045); color: #ff91a4; }
.message-form .chat-photo-button:hover { border-color: rgba(250,59,100,.45); background: rgba(250,59,100,.09); }
.message-form .chat-send-button { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.message-form .chat-send-button svg { transform: rotate(-15deg); }
.message-form button:disabled { opacity: .5; cursor: wait; }
.view-once-message { min-width: 175px; padding: 7px; }
.view-once-content { display: flex; align-items: center; gap: 9px; padding: 4px; }
.view-once-content > span { width: 35px; height: 35px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.13); }
.view-once-content > span svg { width: 16px; }
.view-once-content > div { display: grid; gap: 2px; }
.view-once-content strong { font-size: 8px; }
.view-once-content small { color: rgba(255,255,255,.62); font-size: 7px; }
.open-view-once { width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.open-view-once:hover strong { text-decoration: underline; }
.chat-lock { height: 100%; display: grid; place-items: center; align-content: center; text-align: center; padding: 25px; }
.chat-lock .pro-cta { width: 190px; margin-top: 18px; }
.chat-lock > small { color: #756b70; font-size: 7px; margin-top: 10px; }

.profile-page { display: none; max-width: 920px; margin: 0 auto; }
.profile-page.active { display: block; }
.profile-page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.profile-page-header h1 { margin: 0; font: 600 clamp(25px, 3vw, 33px)/1.15 var(--display); letter-spacing: -1.2px; }
.profile-page-header h1 em { font-family: Georgia, serif; font-weight: 400; color: #ffa0ae; }
.profile-page-header > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.profile-page-grid { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(380px, 1.15fr); gap: 18px; align-items: start; }
.profile-stories { border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.018); padding: 16px 18px; margin-bottom: 17px; }
.profile-stories-heading { display: flex; align-items: center; justify-content: space-between; }
.profile-stories-heading h2 { font: 700 12px var(--display); margin: 0; }
.profile-stories-heading p { color: var(--muted); font-size: 8px; margin: 4px 0 0; }
.profile-stories-heading > button { height: 30px; padding: 0 10px; border: 1px solid rgba(250,59,100,.28); border-radius: 9px; background: rgba(250,59,100,.07); color: #ff8da0; display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; cursor: pointer; }
.profile-stories-heading > button svg { width: 12px; }
.profile-story-tray { display: flex; gap: 15px; overflow-x: auto; padding: 15px 2px 1px; scrollbar-width: none; }
.profile-story-tray::-webkit-scrollbar { display: none; }
.profile-story-new, .profile-story-item { flex: 0 0 auto; width: 61px; border: 0; background: none; display: grid; justify-items: center; gap: 6px; color: var(--text); cursor: pointer; }
.profile-story-new > span, .profile-story-item > span { width: 57px; height: 57px; border-radius: 50%; display: grid; place-items: center; }
.profile-story-new > span { border: 1px dashed rgba(255,255,255,.24); background: rgba(255,255,255,.025); color: var(--muted); }
.profile-story-new svg { width: 18px; }
.profile-story-item > span { padding: 2px; background: linear-gradient(145deg, #ffbd69, #f23669 52%, #8e40cc); }
.profile-story-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid var(--surface); }
.profile-story-new small, .profile-story-item small { max-width: 62px; color: #b5abb0; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-main-card { padding: 23px; }
.profile-main-card .my-profile-avatar { width: 72px; height: 72px; }
.profile-main-card .my-profile-top h2 { font-size: 17px; }
.profile-public-bio { margin: 20px 0 4px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.profile-public-bio span { color: var(--muted); font-size: 7px; letter-spacing: 1px; }
.profile-public-bio p { color: #c7bdc2; font-size: 10px; line-height: 1.55; margin: 7px 0 0; white-space: pre-wrap; }
.profile-page .tinder-content-manager { margin: 0; padding: 22px; }
.profile-page .content-manager-title h3 { font-size: 13px; }
.profile-page .quick-upload-actions button > span { width: 44px; height: 44px; border-radius: 13px; }
.profile-media-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 18px; max-height: 355px; overflow-y: auto; }
.profile-media-grid .media-item, .profile-media-grid .empty-media { aspect-ratio: 1; border-radius: 10px; }
.profile-security-card { grid-column: 1/-1; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.02); padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; }
.profile-security-card > div { display: flex; align-items: center; gap: 10px; }
.profile-security-card > div > svg { width: 18px; color: var(--gold); }
.profile-security-card span { display: grid; gap: 3px; }
.profile-security-card strong { font-size: 9px; }
.profile-security-card small { color: var(--muted); font-size: 8px; }
.profile-security-card button { border: 0; background: none; color: var(--gold); font-size: 8px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.profile-security-card button svg { width: 12px; }
.profile-security-actions { display: flex; align-items: center; gap: 12px; }
.profile-security-actions .profile-logout { color: #ff7f95; padding-left: 12px; border-left: 1px solid var(--line); }
.client-mode .professional-only { display: none !important; }
.client-mode .profile-page-grid { grid-template-columns: minmax(300px, 450px); justify-content: center; }
.professional-mode .client-only { display: none !important; }
.client-plan-card { border: 1px solid rgba(242,194,118,.2); border-radius: 17px; background: linear-gradient(145deg, rgba(242,194,118,.09), rgba(250,59,100,.045)); padding: 18px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; }
.client-plan-icon { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg, #f5ce95, #e99b70); color: #2b1b18; display: grid; place-items: center; }
.client-plan-icon svg { width: 19px; }
.client-plan-card > div:nth-child(2) { display: grid; gap: 3px; }
.client-plan-card span { color: var(--gold); font-size: 7px; letter-spacing: 1px; font-weight: 800; }
.client-plan-card h3 { margin: 0; font: 700 13px var(--display); }
.client-plan-card p { margin: 0; color: var(--muted); font-size: 8px; }
.client-plan-card > button { grid-column: 1/-1; height: 36px; border: 0; border-radius: 9px; background: linear-gradient(100deg, #f5c789, #e89a6e); color: #261915; font-size: 8px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.client-plan-card > button svg { width: 13px; }
.story-viewer { position: fixed; inset: 0; z-index: 80; background: rgba(4,3,4,.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .22s; }
.story-viewer.open { opacity: 1; visibility: visible; }
.story-viewer-frame { width: min(430px, 100%); height: min(92vh, 760px); position: relative; border-radius: 20px; overflow: hidden; background: #171217; box-shadow: 0 35px 90px #000; }
.story-viewer-frame > img { width: 100%; height: 100%; object-fit: cover; }
.story-viewer-frame > header { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 19px 16px; display: flex; align-items: center; background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent); }
.story-owner { display: flex; align-items: center; gap: 8px; flex: 1; }
.story-owner .avatar { width: 34px; height: 34px; border: 2px solid var(--accent); }
.story-owner > div { display: grid; gap: 2px; }
.story-owner strong { font-size: 9px; }
.story-owner small { color: rgba(255,255,255,.65); font-size: 7px; }
.story-viewer-frame header > button { width: 32px; height: 32px; border: 0; background: rgba(0,0,0,.25); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.story-viewer-frame header > button svg { width: 17px; }
.story-progress { position: absolute; z-index: 3; left: 9px; right: 9px; top: 8px; height: 2px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.story-progress i { display: block; height: 100%; width: 0; background: white; }
.story-viewer.open .story-progress i { animation: story-time 6s linear forwards; }
@keyframes story-time { to { width: 100%; } }

.view-once-viewer { position: fixed; inset: 0; z-index: 90; padding: 18px; background: rgba(3,2,3,.96); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .2s; }
.view-once-viewer.open { opacity: 1; visibility: visible; }
.view-once-frame { width: min(720px, 100%); height: min(90vh, 820px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #100d0f; border: 1px solid rgba(255,255,255,.1); border-radius: 19px; overflow: hidden; box-shadow: 0 35px 100px #000; }
.view-once-frame header { min-height: 68px; padding: 13px 16px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.view-once-frame header > div { flex: 1; display: grid; gap: 4px; }
.view-once-frame header strong { font-size: 11px; }
.view-once-frame header small { color: var(--muted); font-size: 8px; }
.view-once-frame header button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); color: white; cursor: pointer; }
.view-once-frame header button svg { width: 15px; }
.view-once-image-wrap { min-height: 0; display: grid; place-items: center; background: #050405; }
.view-once-image-wrap img { width: 100%; height: 100%; object-fit: contain; }
.view-once-frame > p { margin: 0; padding: 11px 16px; color: #8f858a; font-size: 7px; text-align: center; border-top: 1px solid var(--line); }

.onboarding-backdrop { z-index: 60; background: rgba(7,4,6,.88); }
.onboarding-modal { width: min(475px, 100%); padding: 30px 38px 27px; text-align: left; background: radial-gradient(circle at 50% -10%, #43232d 0, #1b1418 38%, #110d10 82%); }
.onboarding-brand { text-align: center; color: var(--text); font: 800 25px/1 var(--display); letter-spacing: -1.5px; margin-bottom: 26px; }
.onboarding-brand span, .onboarding-brand i { color: var(--accent); font-style: normal; }
.onboarding-step { display: none; }
.onboarding-step.active { display: block; }
.step-count { display: block; text-align: center; color: #aa7783; font-size: 8px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 8px; }
.onboarding-modal h2 { text-align: center; font-size: 25px; margin: 0 0 8px; }
.onboarding-modal > .onboarding-step > p { text-align: center; max-width: 330px; line-height: 1.5; }
.role-options { display: grid; gap: 10px; margin: 23px 0 16px; }
.role-card { width: 100%; min-height: 82px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); display: flex; align-items: center; gap: 14px; padding: 13px 15px; text-align: left; cursor: pointer; transition: .2s; }
.role-card:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); transform: translateY(-1px); }
.role-card.selected { border-color: rgba(250,59,100,.75); background: rgba(250,59,100,.08); box-shadow: inset 0 0 0 1px rgba(250,59,100,.12); }
.role-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.professional-icon { color: #361c1f; background: linear-gradient(135deg, #ffb094, #f15c76); }
.client-icon { color: #281b17; background: linear-gradient(135deg, #f5d29d, #d89965); }
.role-icon svg { width: 21px; }
.role-copy { display: grid; gap: 5px; flex: 1; }
.role-copy strong { font-size: 12px; }
.role-copy small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.role-radio { width: 17px; height: 17px; border-radius: 50%; border: 1px solid #655a60; position: relative; }
.role-card.selected .role-radio { border-color: var(--accent); }
.role-card.selected .role-radio:after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.safety-message { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.025); margin-bottom: 16px; color: var(--muted); }
.safety-message svg { width: 16px; flex: 0 0 auto; color: var(--gold); }
.safety-message span { display: grid; gap: 3px; font-size: 8px; line-height: 1.4; }
.safety-message strong { color: #d8ced2; font-size: 9px; }
.next-step:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.login-link { width: 100%; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 9px; margin-top: 13px; }
.back-step { position: absolute; left: 22px; top: 27px; border: 0; background: none; color: var(--muted); font-size: 9px; cursor: pointer; }
.input-group { display: grid; gap: 6px; margin-top: 12px; }
.input-group > span { color: #b7abb1; font-size: 9px; font-weight: 700; }
.input-group input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); color: var(--text); padding: 0 13px; outline: none; font-size: 11px; transition: .2s; }
.input-group input:focus { border-color: rgba(250,59,100,.7); box-shadow: 0 0 0 3px rgba(250,59,100,.08); }
.input-group input::placeholder { color: #665c61; }
.input-row { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10px; }
.terms-check { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0; color: #80767b; font-size: 8px; line-height: 1.45; cursor: pointer; }
.terms-check input { accent-color: var(--accent); margin: 1px 0 0; }
.create-account { margin-top: 4px; }
.form-error { min-height: 15px; margin: 9px 0 2px !important; color: #ff879b !important; font-size: 9px !important; text-align: left !important; }
.edit-profile-modal { text-align: left; width: min(450px, 100%); }
.edit-profile-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; }
.edit-avatar { width: 53px; height: 53px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: white; background: linear-gradient(145deg, #8b435a, #281a24); border: 2px solid var(--accent); font-weight: 800; }
.edit-profile-heading > div:last-child { display: grid; gap: 3px; }
.edit-profile-heading span { color: var(--accent); font-size: 7px; letter-spacing: 1.3px; font-weight: 800; }
.edit-profile-heading h2 { margin: 0; text-align: left; font-size: 21px; }
.bio-input > span { display: flex; justify-content: space-between; }
.bio-input > span small { color: var(--muted); font-weight: 400; }
.bio-input textarea { width: 100%; min-height: 115px; resize: vertical; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); color: var(--text); padding: 12px 13px; outline: none; font: 11px/1.5 var(--font); }
.bio-input textarea:focus { border-color: rgba(250,59,100,.7); box-shadow: 0 0 0 3px rgba(250,59,100,.08); }
.bio-input textarea::placeholder { color: #665c61; }
.availability-toggle { display: flex; align-items: center; margin: 14px 0; cursor: pointer; position: relative; }
.availability-toggle > span { display: grid; gap: 3px; flex: 1; }
.availability-toggle strong { font-size: 10px; }
.availability-toggle small { color: var(--muted); font-size: 8px; }
.availability-toggle input { position: absolute; opacity: 0; }
.availability-toggle i { width: 35px; height: 20px; border-radius: 99px; background: #433a3f; position: relative; transition: .2s; }
.availability-toggle i:after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: white; left: 3px; top: 3px; transition: .2s; }
.availability-toggle input:checked + i { background: var(--accent); }
.availability-toggle input:checked + i:after { transform: translateX(15px); }
.edit-privacy { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; margin: 0 0 14px; }
.edit-privacy svg { width: 12px; color: var(--gold); }
.professional-profile-modal { padding: 0; text-align: left; width: min(460px, 100%); max-height: min(90vh, 760px); overflow-y: auto; background: #151014; }
.professional-profile-modal .modal-close { z-index: 5; background: rgba(0,0,0,.45); }
.full-profile-cover { height: 270px; position: relative; overflow: hidden; }
.full-profile-cover:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent 45%, #151014 100%); }
.full-profile-cover > img, .full-profile-placeholder { width: 100%; height: 100%; object-fit: cover; }
.full-profile-placeholder { place-items: center; color: white; background: radial-gradient(circle at 50% 30%, #98607a, #3b2532 50%, #171119); font: 800 58px var(--display); }
.full-profile-placeholder:not([hidden]) { display: grid; }
.full-profile-cover > span { position: absolute; z-index: 2; left: 18px; bottom: 20px; padding: 7px 9px; border-radius: 99px; background: rgba(8,6,7,.55); backdrop-filter: blur(7px); font-size: 8px; }
.full-profile-cover > span i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #55d29a; margin-right: 4px; }
.full-profile-content { padding: 0 23px 23px; position: relative; z-index: 2; margin-top: -8px; }
.full-profile-content > h2 { margin: 0; text-align: left; font-size: 25px; }
.full-profile-location { color: var(--muted); font-size: 9px; display: flex; align-items: center; gap: 4px; }
.full-profile-location svg { width: 12px; color: var(--accent); }
.full-profile-about { margin: 18px 0 15px; }
.full-profile-about > span { color: var(--muted); font-size: 7px; letter-spacing: 1px; font-weight: 700; }
.full-profile-about p { color: #c9bec3; font-size: 10px; line-height: 1.55; white-space: pre-wrap; margin: 7px 0 0; }
.full-profile-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 17px; }
.full-profile-gallery img, .full-profile-gallery video, .full-gallery-empty { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,.035); }
.full-gallery-empty { grid-column: 1/-1; display: grid; place-items: center; color: var(--muted); font-size: 8px; height: 70px; aspect-ratio: auto; }
.full-profile-like svg { fill: white; }

@media (max-width: 1030px) {
  .app-shell { grid-template-columns: 90px 1fr; }
  .sidebar { padding-inline: 18px; align-items: center; }
  .brand { font-size: 25px; padding: 0; }
  .nav-item { width: 52px; justify-content: center; padding: 0; }
  .nav-item span, .nav-item b, .pro-mini, .user-mini div, .user-mini button { display: none; }
  .nav-item.active:before { left: -19px; }
  .user-mini { padding: 22px 0 0; }
  .sidebar-logout { width: 52px; }
  .sidebar-logout span { display: none; }
  .content-grid { grid-template-columns: minmax(370px, 570px) 270px; gap: 25px; }
  .professional-layout { grid-template-columns: minmax(0, 1.4fr) minmax(250px, .8fr); }
  .upload-actions { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body { padding-bottom: 75px; }
  .app-shell { display: block; }
  .sidebar, .right-panel { display: none; }
  .main-content { padding: 25px 18px 20px; }
  .topbar h1 { font-size: 25px; }
  .filter-button { width: 42px; padding: 0; justify-content: center; font-size: 0; }
  .content-grid { display: block; margin-top: 23px; }
  .discover-column { max-width: 570px; margin: auto; }
  .profile-card { min-height: 510px; height: calc(100vh - 260px); max-height: 650px; }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(4, 1fr); left: 0; right: 0; bottom: 0; height: 68px; background: rgba(18,14,17,.92); border-top: 1px solid var(--line); backdrop-filter: blur(16px); z-index: 15; padding: 6px 9px env(safe-area-inset-bottom); }
  .mobile-nav button { border: 0; background: none; display: grid; place-items: center; align-content: center; gap: 3px; color: #776e73; cursor: pointer; }
  .mobile-nav button.active { color: var(--accent); }
  .mobile-nav span { font-size: 8px; }
  .mobile-nav svg { width: 19px; }
  .mobile-nav .mobile-pro { width: 46px; height: 46px; place-self: center; border-radius: 16px; color: #281918; background: linear-gradient(135deg, #f4ca90, #ef9c71); box-shadow: 0 8px 25px rgba(226,149,101,.2); transform: translateY(-7px); }
  .professional-mode .mobile-nav { grid-template-columns: repeat(3, 1fr); }
  .professional-mode .mobile-nav .mobile-pro { display: none; }
  .professional-header { align-items: flex-start; }
  .professional-header .preview-profile { font-size: 0; width: 40px; padding: 0; justify-content: center; }
  .professional-stats { grid-template-columns: repeat(2, 1fr); }
  .professional-layout { grid-template-columns: 1fr; }
  .upload-actions { grid-template-columns: repeat(3, 1fr); }
  .professional-dashboard { max-width: 680px; }
  .interests-panel { position: static; border-top: 1px solid var(--line); margin: 28px 8px 15px; padding-top: 24px; }
  .interest-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .interest-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
  .interest-card .interest-actions { margin-top: 9px; }
  .professional-dashboard .professional-layout { grid-template-columns: minmax(340px, 570px); justify-content: center; }
  .tinder-profile-panel { padding-top: 20px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
  .tinder-content-manager { margin-top: 0; }
  .tinder-profile-panel > .consent-box { grid-column: 1/-1; }
  .matches-page { max-width: 680px; }
  .messenger-shell { grid-template-columns: 260px 1fr; }
  .profile-page { max-width: 680px; }
  .profile-page-grid { grid-template-columns: 1fr; }
  .profile-security-card { grid-column: auto; }
}

@media (max-width: 440px) {
  .main-content { padding-inline: 13px; }
  .topbar .eyebrow { margin-bottom: 4px; }
  .topbar h1 { font-size: 21px; }
  .top-actions { gap: 7px; }
  .icon-button, .filter-button { width: 37px; height: 37px; }
  .story-row { gap: 13px; }
  .story-ring { width: 47px; height: 47px; }
  .profile-card { min-height: 480px; height: calc(100vh - 240px); border-radius: 22px; }
  .profile-copy { left: 21px; right: 21px; }
  .profile-copy h2 { font-size: 28px; }
  .modal { padding-inline: 22px; }
  .onboarding-modal { padding: 27px 18px 23px; max-height: calc(100vh - 20px); overflow-y: auto; }
  .onboarding-brand { margin-bottom: 20px; }
  .role-card { min-height: 76px; padding-inline: 12px; }
  .professional-header h1 { font-size: 24px; }
  .professional-header > div > p:last-child { max-width: 250px; }
  .professional-stats { gap: 8px; }
  .professional-stats article { min-height: 95px; padding: 13px; }
  .creator-card, .my-content-section, .interests-panel { padding: 15px; border-radius: 17px; }
  .secure-content { display: none; }
  .upload-actions { grid-template-columns: 1fr; }
  .upload-actions > button { min-height: 63px; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .professional-mode .main-content { padding: 12px 0 18px; }
  .insta-profile-header { grid-template-columns: 82px 1fr; gap: 14px; padding: 14px 15px 21px; align-items: start; }
  .insta-avatar-ring { width: 78px; height: 78px; }
  .insta-avatar { border-width: 3px; font-size: 18px; }
  .avatar-add { width: 24px; height: 24px; right: -1px; bottom: -1px; }
  .insta-name-row { flex-wrap: wrap; gap: 6px; }
  .insta-name-row h1 { max-width: 145px; font-size: 16px; }
  .edit-profile { order: 4; width: calc(100% - 30px); margin: 4px 0 0; }
  .insta-stats { grid-column: 1/-1; gap: 15px; margin: 14px 0 11px; }
  .insta-stats button { font-size: 8px; }
  .insta-stats strong { display: block; font-size: 11px; }
  .insta-bio { grid-column: 1/-1; margin-left: -96px; margin-top: 13px; }
  .insta-highlights { padding: 7px 15px 21px; gap: 14px; }
  .highlight { min-width: 56px; }
  .highlight > span { width: 55px; height: 55px; }
  .insta-create-bar { margin-inline: 12px; }
  .insta-tabs { gap: 0; justify-content: space-around; }
  .insta-tabs button { font-size: 0; flex: 1; justify-content: center; }
  .insta-tabs svg { width: 17px; }
  .instagram-profile .media-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .interest-account { display: none; }
  .interests-panel { margin-inline: 13px; }
  .interest-list { grid-template-columns: 1fr; }
  .tinder-page-header { padding: 7px 14px 4px; margin-bottom: 8px; align-items: center; }
  .tinder-page-header h1 { font-size: 20px; }
  .tinder-page-header .eyebrow { margin-bottom: 4px; }
  .tinder-header-stats span { padding: 6px 8px; }
  .tinder-header-stats span:first-child { display: none; }
  .tinder-header-actions { gap: 6px; }
  .dashboard-story-button { width: 34px; padding: 0; justify-content: center; font-size: 0; }
  .dashboard-story-button svg { width: 15px; }
  .professional-dashboard .professional-layout { display: block; }
  .tinder-discovery { padding: 0 12px; }
  .deck-status { height: 32px; }
  .tinder-deck { height: calc(100vh - 225px); min-height: 500px; max-height: 620px; }
  .tinder-interest-card, .tinder-empty, .tinder-deck:before, .tinder-deck:after { border-radius: 21px; }
  .tinder-card-info { left: 20px; right: 20px; }
  .tinder-card-info h2 { font-size: 27px; }
  .swipe-hint { margin-bottom: 20px; }
  .tinder-profile-panel { display: grid; grid-template-columns: 1fr; margin: 0 12px; padding-top: 9px; }
  .tinder-profile-panel > .consent-box { grid-column: auto; }
  .my-profile-card { display: none; }
  .tinder-content-manager { margin: 0; }
  .mini-media-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .matches-page { padding: 6px 12px 0; }
  .matches-page-header { margin: 0 2px 14px; }
  .matches-page-header h1 { font-size: 22px; }
  .matches-page-header > div > p:last-child, .matches-safe { display: none; }
  .messenger-shell { height: calc(100vh - 160px); min-height: 560px; display: block; border-radius: 18px; }
  .conversation-sidebar { height: 100%; border-right: 0; }
  .chat-panel { display: none; height: 100%; }
  .messenger-shell.chat-open .conversation-sidebar { display: none; }
  .messenger-shell.chat-open .chat-panel { display: flex; }
  .chat-header .chat-back { display: grid; }
  .profile-page { padding: 6px 12px 0; }
  .profile-page-header { margin: 0 2px 16px; }
  .profile-page-header h1 { font-size: 22px; }
  .profile-page-header > div > p:last-child, .profile-page-header .matches-safe { display: none; }
  .profile-page-grid { gap: 12px; }
  .profile-main-card, .profile-page .tinder-content-manager { padding: 17px; }
  .profile-security-card { align-items: flex-start; }
  .profile-security-card button { font-size: 0; }
  .profile-media-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .profile-stories { border-radius: 0; border-left: 0; border-right: 0; padding-inline: 14px; }
  .profile-stories-heading > button { font-size: 0; width: 30px; padding: 0; justify-content: center; }
  .story-viewer-frame { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}