:root {
  color-scheme: dark;
  --bg: #111214; --panel: #191a1e; --surface: #202125; --field: #232429;
  --ink: #f4f4f6; --muted: #b7b7c0; --line: #35363e;
  --hot: #d93159; --ruby: #d93159; --gold: #f5c860; --danger: #ff8294;
  --wine: #40222b; --champagne: #f4f4f6; --cream: #f4f4f6;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--ink); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.25; font-weight: 650; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #ff7895; outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; background: var(--field); }
input::placeholder, textarea::placeholder { color: #b0b0ba; opacity: 1; }
input[type=checkbox] { flex: 0 0 17px; width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0; accent-color: var(--hot); }
input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--hot); }
input[type=file] { padding: 8px; }
input[type=file]::file-selector-button { background: #36373f; color: white; border: 0; padding: 7px 9px; border-radius: 4px; margin-right: 8px; }
select option { color: var(--ink); background: var(--field); }
textarea { min-height: 98px; resize: vertical; }
label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 13px; }
fieldset { margin: 0; min-width: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--line); }
legend { padding: 0 8px 0 0; color: var(--muted); font-size: 13px; }
.primary, .secondary, .danger, .text-button, .icon-button, .icon-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 15px; border: 1px solid transparent; border-radius: 5px; font-weight: 550; color: var(--ink); }
.primary { background: var(--hot); color: white; }
.primary:hover:not(:disabled) { background: #be244a; }
.secondary { background: var(--surface); border-color: var(--line); }
.secondary:hover:not(:disabled) { background: #303138; }
.danger { color: #ff9aab; background: #40222b; border-color: #713244; }
.text-button, .term-link { padding: 4px 0; color: #f38da5; background: transparent; border: 0; cursor: pointer; }
.icon-button, .icon-action { width: 40px; height: 40px; flex: 0 0 40px; padding: 8px; background: transparent; border-color: var(--line); }
.icon-button:hover:not(:disabled), .icon-action:hover:not(:disabled) { background: var(--surface); }
.lucide { width: 19px; height: 19px; flex-shrink: 0; }
.hidden, [hidden] { display: none !important; }
.check-row, .choice { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.check-row input, .choice input { margin-top: 2px; }
.check-row .term-link { display: inline; min-height: 0; padding: 0; font-size: inherit; text-decoration: underline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.shell { min-height: 100dvh; }
.sidebar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 220px minmax(0,1fr) auto; align-items: center; gap: 24px; height: 66px; padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 34px; height: 44px; object-fit: contain; }
.brand strong { font-size: 21px; font-weight: 650; }
.brand small { display: none; }
.nav { display: flex; align-items: stretch; justify-content: center; gap: 4px; height: 100%; min-width: 0; }
.nav-item { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; color: var(--muted); border: 0; border-bottom: 3px solid transparent; background: transparent; font-weight: 550; white-space: nowrap; }
.nav-item.active { color: var(--ink); border-bottom-color: var(--hot); }
.nav-item:hover { color: white; background: #ffffff05; }
.nav-item .lucide { width: 17px; height: 17px; }
.user-panel { display: grid; grid-template-columns: minmax(0,140px) auto; gap: 0 10px; align-items: center; }
.user-panel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-panel small { color: var(--muted); font-size: 11px; }
.user-panel #btn-logout { grid-column: 2; grid-row: 1/3; border: 0; }
.content { width: 100%; max-width: 1560px; margin: auto; padding: 24px; min-width: 0; }
.topbar { margin-bottom: 20px; }
.topbar p { margin-top: 6px; color: var(--muted); font-size: 14px; max-width: 680px; }
.pill { display: none; }
.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 18px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.discovery-toolbar { display: flex; align-items: flex-start; gap: 12px; }
.discovery-filters { margin-left: auto; min-width: 250px; max-width: 700px; width: 45%; }
summary { cursor: pointer; color: var(--ink); padding: 10px 0; }
.discovery-filters summary { border-bottom: 1px solid var(--line); }
.discovery-filter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 16px 0; }
.discovery-filter-grid .filter-actions { grid-column: 1/-1; display: flex; gap: 8px; }
.card-stage { display: flex; justify-content: center; min-width: 0; }
.profile-card { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(280px,1fr); grid-template-rows: auto auto; gap: 24px; width: min(100%, 950px); align-content: start; }
.profile-photo { width: 100%; aspect-ratio: 4/5; max-height: 600px; object-fit: cover; border-radius: 6px; background: var(--surface); display: grid; place-items: center; }
.profile-photo span { font-size: 52px; color: var(--muted); }
.profile-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.profile-body h2 { font-size: 28px; }
.profile-meta, .compatibility-reason, .opening-suggestion { color: var(--muted); line-height: 1.6; }
.profile-body > strong { color: #fa8faa; font-weight: 600; }
.profile-signals, .detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-signals span, .detail-tags span { padding: 5px 9px; background: var(--surface); border-radius: 4px; font-size: 12px; }
.profile-signals .online { color: #75d3a1; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.profile-card > .profile-actions { grid-column: 1; justify-content: center; }
.profile-card > .profile-actions button { width: 48px; height: 48px; border-radius: 50%; padding: 12px; }
.profile-card .report-form { grid-column: 1/-1; display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 760px; }
.empty-state { display: grid; gap: 12px; text-align: center; padding: 70px 24px; width: 100%; }
.empty-state h2 { font-size: 25px; }
.empty-state p { max-width: 450px; margin: auto; color: var(--muted); }
.empty-state > span { color: #f38da5; font-size: 12px; }
.empty-workspace { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: 30px 20px; width: 100%; flex: 1; min-height: 160px; }
.empty-workspace p { color: var(--muted); font-size: 13px; max-width: 300px; }
.empty { margin: 10px 0; padding: 8px 0; color: var(--muted); font-size: 13px; }
.content:has(#view-salas.active), .content:has(#view-chat.active) { max-width: none; padding: 0; }
.content:has(#view-salas.active) > .topbar, .content:has(#view-chat.active) > .topbar { display: none; }
#view-salas.active, #view-chat.active { gap: 0; }
.room-toolbar { padding: 8px 16px; height: 58px; border-bottom: 1px solid var(--line); }
.room-info { margin-left: auto; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.room-switcher { display: none; }
#btn-toggle-rooms, #btn-toggle-members { display: none; }
.room-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr) 236px; grid-template-areas: "rooms chat members"; height: calc(100dvh - 124px); min-height: 440px; min-width: 0; }
.room-list-panel { grid-area: rooms; display: flex; flex-direction: column; min-height: 0; padding: 18px 12px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); }
.room-list-panel h2 { font-size: 12px; font-weight: 550; margin: 22px 8px 8px; color: var(--muted); }
.room-search { position: relative; }
.room-search .lucide { position: absolute; top: 12px; left: 11px; width: 17px; }
.room-search input { padding-left: 34px; }
.room-nav-list { display: flex; flex-direction: column; gap: 3px; }
.room-nav-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 6px; border: 0; border-left: 3px solid transparent; background: transparent; text-align: left; color: var(--ink); padding: 9px 9px; border-radius: 4px; min-height: 42px; }
.room-nav-row strong { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-nav-row small { color: var(--muted); font-size: 11px; }
.room-nav-row span { font-size: 12px; color: var(--muted); }
.room-nav-row.active { background: var(--wine); border-left-color: var(--hot); }
.room-chat { grid-area: chat; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.room-participants { grid-area: members; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0 12px; border-left: 1px solid var(--line); background: var(--panel); }
.workspace-heading, .conversation-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 14px 18px; min-height: 65px; border-bottom: 1px solid var(--line); }
.workspace-heading h2, .conversation-header h2 { font-size: 18px; }
.section-kicker { display: none; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.live-indicator i, .presence { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #92929e; flex-shrink: 0; }
.live-indicator i, .presence.online { background: #54cb8d; }
.participant-count { font-size: 12px; color: var(--muted); }
.room-participants .workspace-heading { padding-left: 5px; padding-right: 5px; }
.room-participants .list { overflow-y: auto; flex: 1; min-height: 0; padding: 8px 0; }
.list { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.participant { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; max-height: 46px; padding: 5px 7px; background: transparent; color: var(--ink); border: 0; border-left: 2px solid transparent; border-radius: 4px; text-align: left; }
.participant > .participant-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.participant.selected { background: var(--wine); border-left-color: var(--tone, var(--hot)); }
.participant em { font-style: normal; color: var(--gold); font-size: 10px; margin-left: 4px; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; min-width: 32px; color: #d7d7df; background: #303138; border-radius: 50%; overflow: hidden; font-size: 12px; font-weight: 600; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.tone-0 { --tone: #ff7e9c; }.tone-1 { --tone: #7fc9f7; }.tone-2 { --tone: #9be6ad; }.tone-3 { --tone: #f9c27c; }.tone-4 { --tone: #dba4ff; }
.messages, .private-history { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 11px; overscroll-behavior: contain; }
.message { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; color: var(--ink); line-height: 1.6; overflow-wrap: anywhere; padding: 5px 0; max-width: 100%; font-size: 14px; }
.message-content { min-width: 0; }
.message-heading { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-bottom: 2px; }
.message-heading time { color: var(--muted); font-size: 11px; }
.message-author { display: inline; padding: 0; border: 0; background: transparent; color: var(--tone, #f28fa7); font-size: 13px; font-weight: 600; cursor: pointer; }
.message.reserved { border-left: 3px solid var(--tone,var(--hot)); padding: 9px 12px; background: #ffffff04; border-radius: 0 4px 4px 0; }
.reserved-badge { display: block; color: #f28fa7; font-size: 11px; margin-top: 3px; }
.room-media { display: block; max-width: min(100%,320px); max-height: 250px; margin-top: 8px; border-radius: 4px; }
.room-rules { position: relative; margin-left: auto; font-size: 12px; }
.room-rules summary { padding: 4px; color: var(--muted); }
.room-welcome { display: flex; flex-direction: column; gap: 5px; color: var(--muted); padding: 12px; background: var(--surface); font-size: 12px; }
.room-rules[open] .room-welcome { position: absolute; z-index: 5; right: 0; top: 32px; width: min(320px,75vw); border: 1px solid var(--line); border-radius: 5px; }
.room-report { flex: 0 0 auto; margin-top: auto; border-top: 1px solid var(--line); padding-bottom: 10px; font-size: 11px; }
.room-report[open] { display: grid; gap: 8px; max-height: 60%; overflow-y: auto; }
.room-report textarea { min-height: 70px; }
.room-composer { display: grid; grid-template-columns: auto minmax(120px,180px) minmax(0,1fr) 42px; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.room-composer .check-row { align-items: center; white-space: nowrap; font-size: 12px; }
.room-composer button { width: 42px; min-width: 42px; padding: 9px; }
.file-composer { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; flex: 0 0 auto; }
.file-composer .file-choice { width: 36px; height: 36px; position: relative; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.file-composer .file-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; }
.file-composer .icon-button { width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; padding: 7px; }
.file-composer input[type=text], #room-file-caption { flex: 1 1 100px; min-width: 90px; max-width: 220px; min-height: 36px; height: 36px; font-size: 12px; }
.file-composer > .check-row { flex: 1 1 190px; font-size: 11px; align-items: center; }
.file-composer button[type=submit] { min-height: 36px; }
.private-workspace { display: grid; grid-template-columns: 280px minmax(0,1fr); height: calc(100dvh - 122px); min-height: 420px; }
#view-chat > .toolbar { height: 56px; flex: 0 0 56px; padding: 7px 16px; border-bottom: 1px solid var(--line); }
.conversation-list-panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
#matches-list { overflow: auto; flex: 1; min-height: 0; padding: 8px; }
.conversation { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border: 0; border-left: 3px solid transparent; border-radius: 4px; color: var(--ink); background: transparent; text-align: left; min-width: 0; }
.conversation > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.conversation strong { font-size: 13px; font-weight: 550; }
.conversation small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation.active { background: var(--wine); border-left-color: var(--hot); }
.private-chat-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.conversation-header > div { min-width: 0; }
.conversation-header #private-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#private-status { color: var(--muted); font-size: 12px; }
.conversation-actions { display: flex; flex-shrink: 0; gap: 7px; }
.composer { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.composer button { padding: 9px; }
.private-message { max-width: 80%; padding: 10px 13px; background: var(--surface); border-radius: 6px; align-self: flex-start; overflow-wrap: anywhere; }
.private-message.mine { background: #482331; align-self: flex-end; }
.private-message p { margin: 0; }
.private-message small { display: block; color: #c4b9c2; font-size: 10px; margin-top: 4px; }
.day-divider, .message-day { align-self: center; color: var(--muted); font-size: 11px; margin: 6px 0; }
#btn-toggle-conversations { display: none; }
.profile-tabs { display: flex; gap: 16px; width: 100%; max-width: 920px; margin: 0 auto 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.profile-tabs button { padding: 10px 4px; min-height: 44px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; white-space: nowrap; }
.profile-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--hot); }
.profile-pane { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 920px; margin: auto; }
.panel { min-width: 0; }
.profile-pane .panel { display: flex; flex-direction: column; gap: 14px; padding: 0 0 22px; border-bottom: 1px solid var(--line); background: transparent; }
.profile-pane .panel h2 { font-size: 18px; }
.content:has(#view-perfil.active) > .topbar p { display: none; }
.profile-pane .profile-media { gap: 8px; padding-bottom: 12px; }
.profile-media > h2 { display: none; }
.profile-pane button { align-self: flex-start; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading > span { color: var(--muted); font-size: 11px; }
.profile-main > label, .profile-affinity-fields > label { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: start; gap: 16px; }
.profile-main > label input, .profile-main > label textarea, .profile-affinity-fields > label select { grid-column: 2; }
.profile-affinity-fields { display: flex; flex-direction: column; gap: 14px; }
.profile-optional-fields { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 4px; }
.profile-optional-fields > label:not(.check-row) { max-width: 600px; }
.profile-more > summary, .profile-uploads > summary { font-size: 13px; color: var(--muted); }
.form-section-title { padding-top: 12px; margin-top: 6px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.profile-styles { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-styles .choice { flex-basis: 45%; }
.profile-privacy-form > label, .profile-privacy-form fieldset > label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ffffff06; }
.profile-privacy-form label select { width: min(100%,300px); }
.profile-privacy-form .check-row { justify-content: flex-start; }
.profile-privacy-form fieldset { display: flex; flex-direction: column; gap: 5px; }
.profile-completion { display: grid; gap: 7px; margin-bottom: 5px; }
.profile-completion > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; }
.profile-completion span { color: var(--muted); }
progress { accent-color: var(--hot); height: 6px; width: 100%; }
.photo-gallery { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; order: -1; }
.photo-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.photo-item span { color: var(--muted); font-size: 11px; }
.photo-item > div { display: flex; gap: 4px; flex-wrap: wrap; }
.photo-item .icon-action { width: 30px; height: 30px; flex-basis: 30px; min-height: 30px; padding: 5px; }
.photo-item .icon-action .lucide { width: 15px; height: 15px; }
.image-responsibility { padding: 12px; background: #252025; border: 1px solid #553340; border-radius: 4px; }
.profile-media > label:not(.check-row) { max-width: 520px; }
.profile-media .check-row { max-width: 760px; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-item { padding: 12px 0; color: var(--muted); display: flex; flex-direction: column; gap: 6px; flex: 1 1 150px; border-bottom: 1px solid var(--line); font-size: 12px; }
.stat-item strong { color: var(--ink); font-size: 18px; font-weight: 600; }
#wallet-box { flex-direction: row; }
#wallet-box .stat-item { max-width: 100%; }
#wallet-box h3 { flex-basis: 100%; margin-top: 20px; }
#wallet-box .list-item { flex-basis: 100%; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.list-item span { color: var(--muted); }
.notification-setting { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.notification-setting > span { color: var(--muted); font-size: 12px; }
.silent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-security > label:has(#twofa-token), .profile-security #btn-twofa-enable { display: none; }
.profile-security.setup-open > label:has(#twofa-token), .profile-security.setup-open #btn-twofa-enable { display: flex; }
#twofa-box img { width: 180px; height: 180px; background: white; padding: 8px; border-radius: 4px; }
.range-grid { display: grid; gap: 18px; padding: 14px 0; }
.range-grid label { grid-template-columns: minmax(0,1fr) auto; }
.range-grid input { grid-column: 1/-1; }
.range-grid output { color: var(--ink); }
.interest-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px 0; }
.interest-options label { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.discovery-panel { gap: 18px; }
.discovery-panel fieldset { display: flex; gap: 16px; flex-wrap: wrap; }
.payment-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.payment-trust-brand { display: flex; align-items: center; gap: 10px; }
.payment-trust-brand > span { color: #92d5a7; font-weight: 650; }
.payment-trust p { flex: 1 1 400px; font-size: 13px; color: var(--muted); }
.payment-trust .text-button { font-size: 12px; }
.payment-homologation { color: var(--muted); font-size: 12px; }
.pricing { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.price-card { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); text-align: left; color: var(--ink); }
.price-card:hover { border-color: #b9667c; }
.price-card strong { font-size: 22px; font-weight: 600; }
.price-card > span:not(.price-kicker) { font-size: 20px; }
.price-card small { color: var(--muted); line-height: 1.55; }
.price-kicker { color: var(--gold); font-size: 11px; font-weight: 550; }
.price-card ul { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 12px 0; color: var(--muted); font-size: 13px; }
.price-card .price-action { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; width: 100%; padding: 9px 14px; margin-top: auto; border-radius: 5px; background: var(--hot); color: white; font-size: 13px; font-weight: 550; }
.price-action { font-size: 13px; font-weight: 550; color: #ff9bb2; margin-top: auto; }
.price-card-featured { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-color: #9c8044; gap: 7px 28px; }
.price-card-featured ul { grid-column: 2; grid-row: 1/6; padding: 0; justify-content: center; }
.price-card-featured strong, .price-card-featured > span, .price-card-featured small, .price-card-featured b { grid-column: 1; }
dialog { color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 0; width: min(560px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: #090a0bcc; }
dialog article, dialog > form { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
dialog p, dialog small { color: var(--muted); overflow-wrap: anywhere; line-height: 1.65; }
dialog header, dialog footer, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
dialog h2 { font-size: 24px; }
dialog img { max-width: 100%; }
.terms-dialog { width: min(720px,calc(100vw - 32px)); }
.terms-content { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; max-height: 55dvh; padding-right: 8px; }
.term-close { width: 36px; height: 36px; font-size: 22px; border: 0; color: var(--ink); background: var(--surface); border-radius: 4px; }
.detail-gallery { display: flex; gap: 10px; overflow-x: auto; }
.detail-gallery img { width: 200px; height: 240px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
#profile-detail-dialog { width: min(760px,calc(100vw - 32px)); padding: 20px; }
#profile-detail-content { display: flex; flex-direction: column; gap: 15px; }
.detail-meta { color: var(--muted); font-size: 12px; }
.match-dialog { width: min(440px,calc(100vw - 32px)); text-align: center; }
.match-dialog article { align-items: center; padding: 32px; }
.onboarding-steps { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }
.media-capture-dialog { width: min(500px,calc(100vw - 24px)); overflow: hidden; }
.media-capture-dialog article { padding: 18px; gap: 12px; max-height: calc(100dvh - 24px); overflow: hidden; }
.media-capture-dialog video { display: block; width: 100%; height: min(340px,48dvh); object-fit: contain; background: #08090b; border-radius: 4px; flex-shrink: 1; min-height: 0; }
.media-capture-dialog h2 { font-size: 22px; }
.media-capture-dialog .dialog-actions { flex-shrink: 0; justify-content: center; }
.toast { position: fixed; z-index: 100; bottom: 22px; right: 22px; padding: 12px 16px; max-width: min(420px,calc(100vw - 32px)); border: 1px solid #693245; border-radius: 6px; color: white; background: #302027; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .15s, transform .15s; }
.toast.show { opacity: 1; transform: none; }
.shell.logged-out { display: flex; justify-content: center; align-items: flex-start; padding: 56px 20px; }
.shell.logged-out .sidebar { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 28px; height: auto; width: min(100%,640px); padding: 0; border: 0; background: transparent; }
.shell.logged-out .brand { justify-content: center; }
.shell.logged-out .brand strong { font-size: 26px; }
.shell.logged-out .nav, .shell.logged-out .content { display: none; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form h2 { font-size: 26px; }
#login-form { max-width: 390px; margin: 0 auto; width: 100%; }
.auth-back { color: var(--muted); font-size: 12px; align-self: flex-start; margin-bottom: 5px; }
.auth-links { display: flex; justify-content: center; }
.auth-form .form-note { color: var(--muted); font-size: 13px; }
.register-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.register-steps { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.register-steps button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 4px; color: var(--muted); font-size: 12px; min-height: 40px; }
.register-steps button[aria-current=step] { color: #ff9bb2; border-bottom-color: var(--hot); }
.register-step-pane { display: flex; flex-direction: column; gap: 15px; }
.register-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.register-actions .primary { flex: 1; }
.term-check { font-size: 12px; padding: 10px 0; }
.twofa-preview { padding: 12px; background: var(--surface); border-radius: 5px; }
.twofa-preview img { background: white; width: 180px; height: 180px; }
.landing-page { background: var(--bg); }
.landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; background: #111214c9; }
.landing-brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; }
.landing-brand img { width: 34px; height: 44px; object-fit: contain; }
.landing-brand small { display: none; }
.landing-nav > div, .landing-actions { display: flex; gap: 12px; }
.landing-hero { position: relative; display: flex; align-items: center; min-height: 640px; height: min(760px,83dvh); padding: 100px max(32px,calc((100% - 1180px)/2)) 70px; background: url('./assets/confidencia-hero.png') center/cover no-repeat; }
.landing-hero::before { content: ''; position: absolute; inset: 0; background: #0005; }
.landing-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 540px; }
.landing-copy h1 { font-size: 64px; font-weight: 600; }
.landing-copy p { font-size: 19px; line-height: 1.55; max-width: 490px; }
.landing-copy small { font-size: 12px; }
.landing-eyebrow { color: #f8cbd5; font-size: 12px; font-weight: 550; }
.landing-band { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 1244px; margin: auto; padding: 32px; gap: 30px; }
.landing-band article { display: flex; flex-direction: column; gap: 8px; }
.landing-band strong { font-size: 17px; font-weight: 600; }
.landing-band span { color: var(--muted); }
.landing-band .landing-number { color: #f38da5; font-size: 12px; }
.landing-story, .landing-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; max-width: 1244px; margin: auto; gap: 60px; padding: 64px 32px; }
.landing-story-image { height: 380px; }
.landing-story-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.landing-story-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.landing-story-copy h2, .landing-feature h2, .landing-how h2, .landing-safety h2 { font-size: 32px; line-height: 1.25; max-width: 520px; }
.landing-story-copy p, .landing-story-copy ul, .landing-feature p { color: var(--muted); }
.landing-story-copy ul { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.landing-how, .landing-safety { padding: 64px max(32px,calc((100% - 1180px)/2)); background: var(--panel); }
.landing-section-heading { display: flex; flex-direction: column; gap: 10px; }
.landing-steps, .landing-safety-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 32px; }
.landing-steps article, .landing-safety-grid article { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.landing-steps span { color: #f38da5; }
.landing-steps p, .landing-safety-grid p { color: var(--muted); }
.landing-feature > div { display: flex; flex-direction: column; gap: 14px; }
.feature-stats span { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.feature-stats b { color: var(--ink); }
.landing-cta { text-align: center; padding: 70px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--bg); }
.landing-cta h2 { font-size: 34px; }
.landing-cta p { color: var(--muted); max-width: 540px; }
.landing-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1244px; margin: auto; padding: 24px 32px; border-top: 1px solid var(--line); }
.landing-footer small { display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 1100px) {
  .sidebar { grid-template-columns: 180px minmax(0,1fr) auto; gap: 12px; padding: 0 16px; }
  .nav-item { padding: 0 9px; }
  .nav-item .lucide { display: none; }
  .user-panel { grid-template-columns: minmax(0,100px) auto; }
  .room-workspace { grid-template-columns: 190px minmax(0,1fr) 200px; }
  .room-composer { grid-template-columns: auto minmax(100px,1fr) 42px; }
  .room-composer #room-input { grid-column: 1/3; }
  .room-composer button { grid-column: 3; grid-row: 2; }
  .room-composer select { grid-column: 2/4; }
}
@media (max-width: 800px) {
  .profile-card { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .profile-photo { aspect-ratio: 4/4.3; max-height: 420px; }
  .profile-card > .profile-actions { grid-row: 2; }
  .sidebar { grid-template-columns: minmax(0,1fr) auto; height: 56px; padding: 0 14px; }
  .brand strong { font-size: 19px; }
  .brand-mark { width: 27px; height: 34px; }
  .user-panel strong { max-width: 110px; }
  .shell.logged-in .nav { position: fixed; z-index: 30; bottom: 0; left: 0; width: 100%; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; }
  .nav-item { flex-direction: column; gap: 3px; border-bottom: 0; border-top: 2px solid transparent; padding: 8px 3px; font-size: 10px; min-width: 0; }
  .nav-item.active { border-top-color: var(--hot); }
  .nav-item .lucide { display: block; width: 19px; height: 19px; }
  .shell.logged-in { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .content { padding: 18px 14px; }
  .topbar { margin-bottom: 16px; }
  .topbar h1 { font-size: 24px; }
  .topbar p { font-size: 13px; }
  .room-workspace { grid-template-columns: minmax(0,1fr); grid-template-areas: "chat"; height: calc(100dvh - 174px - env(safe-area-inset-bottom)); min-height: 280px; }
  .room-toolbar { height: 56px; padding: 7px 10px; gap: 6px; flex-wrap: nowrap; }
  .room-toolbar .icon-button { width: 36px; height: 36px; flex-basis: 36px; min-height: 36px; }
  .room-toolbar #btn-load-rooms { display: none; }
  .room-toolbar #btn-load-room { min-height: 36px; font-size: 11px; padding: 6px 9px; }
  .room-info { display: none; }
  #btn-toggle-rooms, #btn-toggle-members { display: inline-flex; }
  .room-list-panel, .room-participants { display: none; position: fixed; z-index: 25; top: 112px; bottom: calc(62px + env(safe-area-inset-bottom)); width: min(280px,85vw); background: var(--panel); box-shadow: 0 0 0 100vmax #0008; border: 1px solid var(--line); }
  .room-list-panel { left: 0; }
  .room-participants { right: 0; }
  #view-salas.rooms-open .room-list-panel, #view-salas.members-open .room-participants { display: flex; }
  .workspace-heading, .conversation-header { min-height: 56px; padding: 11px 13px; }
  .workspace-heading h2, .conversation-header h2 { font-size: 16px; }
  .messages, .private-history { padding: 13px; }
  .room-composer { padding: 10px; gap: 7px; grid-template-columns: auto minmax(0,1fr) 40px; }
  .room-composer .check-row { font-size: 11px; }
  .room-composer select { min-height: 36px; padding: 7px; font-size: 12px; }
  .room-composer input { font-size: 16px; }
  .file-composer { padding: 0 10px 10px; gap: 6px; }
  #room-file-caption { display: none; }
  .file-composer > .check-row { flex: 1 1 140px; font-size: 10px; }
  .file-composer .check-row input { width: 15px; height: 15px; flex-basis: 15px; }
  .private-workspace { display: flex; height: calc(100dvh - 174px - env(safe-area-inset-bottom)); min-height: 280px; }
  .private-chat-panel { width: 100%; }
  .conversation-list-panel { display: none; position: fixed; z-index: 25; top: 104px; bottom: calc(62px + env(safe-area-inset-bottom)); left: 0; width: min(300px,85vw); box-shadow: 0 0 0 100vmax #0008; }
  #view-chat.conversations-open .conversation-list-panel { display: flex; }
  #btn-toggle-conversations { display: inline-flex; }
  .conversation-actions { gap: 4px; }
  .conversation-actions .icon-button { width: 34px; height: 34px; min-height: 34px; flex-basis: 34px; }
  .composer { padding: 10px; }
  .composer input { font-size: 16px; }
  .private-message { max-width: 88%; }
  .pricing { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-main > label, .profile-affinity-fields > label { display: flex; flex-direction: column; gap: 6px; }
  .profile-pane { gap: 18px; }
  .photo-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .photo-item > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
  .photo-item .icon-action { width: 100%; min-width: 24px; height: 28px; min-height: 28px; padding: 4px; }
  .profile-completion span { display: none; }
  .profile-tabs { gap: 12px; }
  .profile-tabs button { font-size: 12px; }
  .toast { right: 14px; bottom: 82px; }
  .shell.logged-out { padding: 28px 16px; }
  .shell.logged-out .sidebar { gap: 22px; }
  .landing-nav { padding: 12px 16px; }
  .landing-nav .primary { padding: 8px 12px; font-size: 12px; }
  .landing-brand { font-size: 19px; }
  .landing-brand img { width: 27px; height: 36px; }
  .landing-nav > div { gap: 10px; }
  .landing-hero { min-height: 570px; height: 80dvh; padding: 110px 20px 45px; background-position: 65% center; align-items: flex-end; }
  .landing-hero::before { background: #0008; }
  .landing-copy { gap: 16px; max-width: 420px; }
  .landing-copy h1 { font-size: 42px; }
  .landing-copy p { font-size: 16px; }
  .landing-band { grid-template-columns: 1fr; padding: 26px 20px; gap: 22px; }
  .landing-story, .landing-feature { grid-template-columns: 1fr; padding: 40px 20px; gap: 26px; }
  .landing-story-image { height: 280px; }
  .landing-story-copy h2, .landing-feature h2, .landing-how h2, .landing-safety h2 { font-size: 28px; }
  .landing-how, .landing-safety { padding: 40px 20px; }
  .landing-steps, .landing-safety-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
  .landing-footer { padding: 22px 20px; align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .profile-card { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .profile-photo { aspect-ratio: 4/4.3; max-height: 420px; }
  .profile-body h2 { font-size: 24px; }
  .profile-body { gap: 10px; }
  .profile-card > .profile-actions { grid-row: 2; }
  .opening-suggestion { font-size: 12px; }
  .discovery-filters { min-width: 0; width: 100%; }
  .discovery-toolbar { flex-wrap: wrap; }
  .discovery-filter-grid { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: minmax(0,1fr); }
  .price-card { padding: 18px; }
  .price-card-featured { display: flex; }
  .price-card-featured ul { padding-top: 10px; }
  .register-grid { grid-template-columns: 1fr; }
  .register-steps button { font-size: 11px; }
  .interest-options { grid-template-columns: 1fr; }
  .profile-styles .choice { flex-basis: 100%; }
  .profile-tabs { gap: 9px; }
  .profile-tabs button { font-size: 11px; }
  dialog article, dialog > form { padding: 18px; }
  .match-dialog article { padding: 26px 18px; }
  .dialog-actions { width: 100%; }
  .dialog-actions button { flex: 1; }
  .landing-copy h1 { font-size: 38px; }
  .landing-actions { gap: 8px; }
  .landing-actions .primary, .landing-actions .secondary { font-size: 12px; padding: 9px 12px; }
  .user-panel { grid-template-columns: minmax(0,90px) auto; gap: 0 6px; }
  .user-panel #user-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (max-width: 360px) { .photo-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:360px) {
  .sidebar { column-gap:8px; }
  .brand strong { font-size:18px; }
  .user-panel { grid-template-columns:minmax(0,70px) 32px; gap:0 4px; min-width:0; }
  .user-panel strong { max-width:70px; font-size:11px; }
  .user-panel small { display:none; }
}