:root {
  --bg: #05070d;
  --surface: #0c101b;
  --surface-2: #121827;
  --surface-3: #171f32;
  --line: rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.16);
  --text: #f7f8fb;
  --muted: #929aae;
  --muted-2: #6e768b;
  --lime: #c8ff45;
  --violet: #8b6cff;
  --cyan: #4de8ff;
  --danger: #ff6e91;
  --ink: var(--text);
  --purple: var(--violet);
  --soft: var(--surface-2);
  --radius: 18px;
  --shadow: 0 28px 90px rgba(0,0,0,.55);
}

/* Perfiles Sociales Reales 1.0 */
.real-profile-screen .screen-scroll { padding-bottom: 110px; }
.real-profile-cover { position: relative; height: 190px; margin: 0 18px; border-radius: 24px; overflow: hidden; border: 1px solid #283149; background: radial-gradient(circle at 18% 22%, rgba(184,255,50,.24), transparent 28%), radial-gradient(circle at 76% 70%, rgba(134,92,255,.35), transparent 34%), linear-gradient(135deg,#17221b,#101322 58%,#1b1430); }
.real-profile-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.real-profile-cover > span { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 24px 24px; }
.real-profile-cover > em { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; align-items: center; padding: 7px 10px; border: 1px solid rgba(184,255,50,.32); border-radius: 999px; color: #c8ff58; background: rgba(7,10,17,.78); font: 800 10px/1 sans-serif; letter-spacing: .08em; }
.real-profile-cover > em .icon { width: 13px; height: 13px; }
.real-profile-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: -48px 30px 0; }
.real-profile-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; overflow: hidden; border-radius: 16px; color: #07100b; background: linear-gradient(135deg,#b8ff32,#7fdc31); font: 900 15px/1 sans-serif; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.real-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.real-profile-avatar.small { width: 42px; height: 42px; border-radius: 14px; font-size: 13px; }
.real-profile-avatar.xl { width: 96px; height: 96px; border: 5px solid #090d16; border-radius: 29px; font-size: 25px; box-shadow: 0 14px 30px rgba(0,0,0,.42); }
.real-profile-actions { display: flex; gap: 8px; padding-bottom: 8px; }
.real-profile-actions .button { min-height: 39px; padding: 0 14px; font-size: 12px; }
.real-profile-actions .following { color: #b8ff32; background: rgba(184,255,50,.08); border-color: rgba(184,255,50,.34); }
.real-profile-copy { padding: 17px 30px 10px; }
.real-profile-copy > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.real-profile-copy h1 { margin: 0; color: #f6f8ff; font: 900 clamp(24px,5vw,32px)/1.08 sans-serif; letter-spacing: -.035em; }
.real-profile-copy > strong { display: block; margin-top: 5px; color: #96a3bd; font-size: 13px; }
.real-profile-copy > p { max-width: 670px; margin: 14px 0 10px; color: #c9d0df; font-size: 14px; line-height: 1.55; }
.real-profile-copy > a { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 9px; color: #b8ff32; font-size: 12px; overflow-wrap: anywhere; }
.real-profile-copy > a .icon { width: 14px; height: 14px; }
.real-creator-badge { padding: 5px 7px; border: 1px solid rgba(151,106,255,.4); border-radius: 7px; color: #bda2ff; background: rgba(151,106,255,.1); font: 900 9px/1 sans-serif; letter-spacing: .08em; }
.real-profile-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: #8996af; }
.real-profile-meta span { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.real-profile-meta .icon { width: 14px; height: 14px; }
.real-profile-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 8px 30px 17px; border: 1px solid #222a3c; border-radius: 17px; background: #0d121e; overflow: hidden; }
.real-profile-stats > * { display: grid; gap: 3px; place-items: center; min-height: 72px; padding: 10px; color: inherit; background: none; border: 0; border-right: 1px solid #222a3c; }
.real-profile-stats > *:last-child { border: 0; }
.real-profile-stats strong { color: #f4f7ff; font-size: 20px; }
.real-profile-stats span { color: #8894ab; font-size: 11px; }
.real-profile-games { margin: 0 30px 16px; }
.real-profile-games > small { color: #738099; font: 800 9px/1 sans-serif; letter-spacing: .11em; }
.real-profile-games > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.real-profile-games span { padding: 7px 10px; border: 1px solid #2b354b; border-radius: 999px; color: #dce4f3; background: #101624; font-size: 11px; }
.real-profile-privacy { display: flex; align-items: center; gap: 10px; margin: 0 30px 15px; padding: 13px; border: 1px solid rgba(184,255,50,.17); border-radius: 15px; background: rgba(184,255,50,.045); }
.real-profile-privacy > .icon { width: 20px; height: 20px; color: #b8ff32; }
.real-profile-privacy span { display: grid; gap: 3px; flex: 1; min-width: 0; }
.real-profile-privacy strong { color: #eaf0fb; font-size: 12px; }
.real-profile-privacy small { color: #78859d; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real-profile-privacy button { color: #b8ff32; background: none; border: 0; font-size: 11px; font-weight: 800; }
.real-profile-completion { display: flex; align-items: center; gap: 12px; width: calc(100% - 60px); margin: 0 30px 18px; padding: 14px; text-align: left; color: inherit; border: 1px solid #2b3050; border-radius: 17px; background: linear-gradient(120deg,rgba(142,91,255,.1),rgba(184,255,50,.04)); }
.real-profile-completion > span { display: grid; place-items: center; width: 48px; height: 48px; padding: 5px; border-radius: 50%; background: conic-gradient(#b8ff32 var(--completion),#242b3d 0); }
.real-profile-completion > span i { width: 100%; height: 100%; border: 5px solid #101522; border-radius: inherit; background: #151c2a; }
.real-profile-completion p { display: grid; flex: 1; gap: 4px; margin: 0; }
.real-profile-completion strong { color: #edf2fb; font-size: 12px; }
.real-profile-completion small { color: #8995aa; font-size: 10px; line-height: 1.4; }
.real-profile-completion > .icon { width: 17px; color: #b8ff32; }
.real-profile-posts { padding: 5px 18px 18px; }
.real-profile-posts > .section-title { padding-inline: 12px; }
.real-optional-gamer { margin-inline: 18px; }
.real-private-profile { display: grid; justify-items: center; gap: 8px; margin: 20px 30px; padding: 34px 20px; text-align: center; border: 1px dashed #303950; border-radius: 20px; color: #8390a9; background: #0d121d; }
.real-private-profile .icon { width: 30px; height: 30px; color: #98a6bf; }
.real-private-profile h3,.real-private-profile p { margin: 0; }
.real-private-profile h3 { color: #e7ecf6; font-size: 17px; }
.real-private-profile p { max-width: 390px; font-size: 12px; line-height: 1.5; }
.real-profile-guest { display: grid; justify-items: center; max-width: 560px; margin: 28px auto; padding: 34px 30px; text-align: center; border: 1px solid #252e41; border-radius: 26px; background: radial-gradient(circle at 50% 0,rgba(184,255,50,.12),transparent 36%),#0c111c; }
.real-profile-guest-mark { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 18px; border-radius: 20px; color: #07100b; background: #b8ff32; font: 1000 22px/1 sans-serif; transform: rotate(-3deg); }
.real-profile-guest h1 { max-width: 470px; margin: 9px 0 12px; color: #f4f7ff; font: 900 clamp(27px,6vw,39px)/1.04 sans-serif; letter-spacing: -.045em; }
.real-profile-guest > p { margin: 0 0 20px; color: #98a4ba; font-size: 13px; line-height: 1.55; }
.real-profile-guest > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-bottom: 22px; text-align: left; }
.real-profile-guest > div span { display: flex; gap: 7px; align-items: center; padding: 11px; color: #cfd6e4; border: 1px solid #242d3f; border-radius: 12px; background: #111724; font-size: 11px; }
.real-profile-guest > div .icon { width: 16px; height: 16px; color: #b8ff32; }
.real-profile-login { margin-top: 14px; color: #9ca8bc; background: none; border: 0; font-size: 11px; }
.real-profile-loading { display: grid; justify-items: center; gap: 12px; padding: 70px 30px; }
.real-profile-loading span { width: 94px; height: 94px; border-radius: 28px; background: #172030; animation: pulse 1.3s infinite; }
.real-profile-loading i { width: min(380px,80%); height: 14px; border-radius: 7px; background: #151d2b; animation: pulse 1.3s infinite; }
.real-profile-loading i:nth-child(3) { width: min(250px,60%); }
.real-profile-loading p { color: #8793a9; font-size: 12px; }
.real-profile-error { margin: 50px 25px; }

.real-profile-editor-backdrop { align-items: center; }
.real-profile-editor { width: min(720px,calc(100% - 24px)); max-height: min(92vh,870px); padding-bottom: 22px; overflow-y: auto; border-radius: 25px; }
.real-profile-media-editor { position: relative; margin-bottom: 56px; }
.real-cover-editor { position: relative; display: block; width: 100%; height: 150px; overflow: hidden; color: inherit; border: 1px solid #293247; border-radius: 17px; background: radial-gradient(circle at 20% 15%,rgba(184,255,50,.2),transparent 30%),linear-gradient(135deg,#152019,#17152b); }
.real-cover-editor img { width: 100%; height: 100%; object-fit: cover; }
.real-cover-editor > span { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 22px 22px; }
.real-cover-editor > i { position: absolute; right: 11px; bottom: 11px; display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 9px; color: #eef2fa; background: rgba(5,8,14,.78); font: 800 10px/1 sans-serif; }
.real-cover-editor .icon,.real-avatar-editor .icon { width: 14px; height: 14px; }
.real-avatar-editor { position: absolute; left: 18px; bottom: -42px; display: grid; place-items: center; width: 90px; height: 90px; overflow: hidden; padding: 0; color: #07100b; border: 5px solid #0d121d; border-radius: 25px; background: #b8ff32; font: 900 22px/1 sans-serif; }
.real-avatar-editor img,.real-avatar-editor > span { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; }
.real-avatar-editor > i { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 25px; height: 25px; color: #f2f5fb; border-radius: 8px; background: #121826; }
.real-profile-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.real-profile-editor-grid label { display: grid; gap: 7px; }
.real-profile-editor-grid label.wide { grid-column: 1/-1; }
.real-profile-editor-grid label > span,.real-profile-editor-label { color: #7f8ca3; font: 800 9px/1 sans-serif; letter-spacing: .1em; }
.real-profile-editor-grid input,.real-profile-editor-grid textarea { width: 100%; padding: 12px; color: #f0f3f9; border: 1px solid #2a3347; border-radius: 11px; outline: none; background: #111724; font: 12px/1.4 inherit; }
.real-profile-editor-grid input:focus,.real-profile-editor-grid textarea:focus { border-color: rgba(184,255,50,.55); box-shadow: 0 0 0 3px rgba(184,255,50,.06); }
.real-profile-editor-grid textarea { min-height: 84px; resize: vertical; }
.real-profile-editor-grid small { color: #6f7c94; font-size: 9px; text-align: right; }
.real-profile-editor-grid .auth-handle-field { display: flex; align-items: center; border: 1px solid #2a3347; border-radius: 11px; background: #111724; }
.real-profile-editor-grid .auth-handle-field > i { padding-left: 12px; color: #8c98ad; font-style: normal; }
.real-profile-editor-grid .auth-handle-field input { border: 0; background: transparent; box-shadow: none; }
.real-profile-editor-label { display: block; margin: 24px 0 10px; }
.real-profile-visibility { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.real-profile-visibility button { display: flex; align-items: center; gap: 8px; min-height: 67px; padding: 10px; text-align: left; color: inherit; border: 1px solid #293247; border-radius: 13px; background: #111724; }
.real-profile-visibility button.active { border-color: rgba(184,255,50,.55); background: rgba(184,255,50,.07); }
.real-profile-visibility button > .icon { width: 18px; height: 18px; color: #8290a8; }
.real-profile-visibility button.active > .icon { color: #b8ff32; }
.real-profile-visibility button span { display: grid; gap: 3px; flex: 1; }
.real-profile-visibility strong { color: #e9edf6; font-size: 11px; }
.real-profile-visibility small { color: #738097; font-size: 8px; line-height: 1.3; }
.real-profile-visibility button > i .icon { width: 14px; height: 14px; color: #b8ff32; }
.real-creator-mode { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 11px; padding: 12px; text-align: left; color: inherit; border: 1px solid #293247; border-radius: 13px; background: #111724; }
.real-creator-mode > .icon { width: 20px; height: 20px; color: #9c7cff; }
.real-creator-mode span { display: grid; flex: 1; gap: 3px; }
.real-creator-mode strong { color: #edf1f8; font-size: 11px; }
.real-creator-mode small { color: #7e8aa0; font-size: 9px; }
.real-profile-editor-note { display: flex; gap: 8px; margin-top: 13px; padding: 10px; color: #8290a7; border-radius: 11px; background: rgba(184,255,50,.045); font-size: 9px; line-height: 1.4; }
.real-profile-editor-note .icon { flex: 0 0 auto; width: 15px; height: 15px; color: #b8ff32; }

.real-author { padding: 0; text-align: left; color: inherit; background: none; border: 0; }
.real-people-list article { align-items: center; }
.real-person-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; text-align: left; color: inherit; background: none; border: 0; }
.real-person-main > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.real-person-main strong { color: #edf1f8; }
.real-person-main strong i { margin-left: 4px; color: #a98bff; font: 900 8px/1 sans-serif; }
.real-person-main small,.real-person-main em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.real-person-main em { max-width: 390px; color: #7e8aa0; font-size: 9px; font-style: normal; }
.real-person-follow { flex: 0 0 auto; }
.real-connections-list { display: grid; gap: 7px; max-height: 55vh; overflow-y: auto; }
.real-connections-list article { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #252e41; border-radius: 13px; background: #101622; }
.real-connections-list article > button:first-child { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0; text-align: left; color: inherit; background: none; border: 0; }
.real-connections-list article > button:first-child > span:last-child { display: grid; gap: 3px; min-width: 0; }
.real-connections-list strong { color: #edf1f8; font-size: 11px; }
.real-connections-list small { color: #7f8ca2; font-size: 9px; }
.real-connections-list article > button:last-child { padding: 8px 10px; color: #b8ff32; border: 1px solid rgba(184,255,50,.3); border-radius: 9px; background: rgba(184,255,50,.06); font-size: 9px; font-weight: 800; }
.real-connections-list article > button:last-child.active { color: #99a5ba; border-color: #30394c; background: #161d2a; }

@media (max-width: 560px) {
  .real-profile-cover { height: 155px; margin-inline: 12px; border-radius: 20px; }
  .real-profile-head { margin: -40px 20px 0; }
  .real-profile-avatar.xl { width: 82px; height: 82px; border-radius: 25px; }
  .real-profile-actions .button { min-height: 36px; padding-inline: 10px; font-size: 10px; }
  .real-profile-copy { padding-inline: 20px; }
  .real-profile-stats,.real-profile-games,.real-profile-privacy { margin-inline: 20px; }
  .real-profile-completion { width: calc(100% - 40px); margin-inline: 20px; }
  .real-profile-guest { margin: 18px 12px; padding: 28px 18px; }
  .real-profile-guest > div { grid-template-columns: 1fr; }
  .real-profile-editor { max-height: 94vh; padding-inline: 16px; border-radius: 22px 22px 0 0; }
  .real-profile-editor-grid { grid-template-columns: 1fr; }
  .real-profile-editor-grid label.wide { grid-column: auto; }
  .real-profile-visibility { grid-template-columns: 1fr; }
  .real-profile-visibility button { min-height: 58px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html, body { overflow-x: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, [data-route], [data-action] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 16%, rgba(139,108,255,.16), transparent 27%),
    radial-gradient(circle at 15% 84%, rgba(77,232,255,.08), transparent 28%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 95%);
}

.prototype-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 620px) 430px; gap: clamp(40px, 7vw, 110px); align-items: center; justify-content: center; padding: 46px; position: relative; }
.review-panel { max-width: 570px; padding: 12px 0; }
.review-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 62px; }
.review-brand strong { font-size: 14px; letter-spacing: .12em; display: block; }
.review-brand span { color: var(--muted); font-size: 12px; margin-top: 2px; display: block; }
.brand-mark { background: var(--lime); color: #0b1005; font-weight: 950; letter-spacing: -.08em; display: grid; place-items: center; box-shadow: 0 0 34px rgba(200,255,69,.17); transform: skew(-5deg); }
.brand-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
.review-copy .eyebrow { color: var(--lime); letter-spacing: .15em; font-size: 11px; font-weight: 800; }
.review-copy h1 { font-size: clamp(44px, 5vw, 70px); line-height: .98; letter-spacing: -.055em; margin: 13px 0 22px; }
.review-copy h1 em { color: var(--lime); font-style: normal; }
.review-copy > p:last-child { color: var(--muted); line-height: 1.7; max-width: 510px; font-size: 15px; }
.screen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 34px; }
.screen-list button { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 12px; padding: 11px 13px; text-align: left; cursor: pointer; color: #b8becc; transition: .18s ease; }
.screen-list button span { color: var(--muted-2); font-size: 10px; margin-right: 7px; }
.screen-list button:hover, .screen-list button.active { color: var(--text); border-color: rgba(200,255,69,.36); background: rgba(200,255,69,.075); transform: translateY(-1px); }
.screen-list button.active span { color: var(--lime); }
.review-hint { color: var(--muted-2); font-size: 12px; margin: 16px 2px 0; }

.device { width: 430px; height: min(880px, calc(100vh - 64px)); min-height: 720px; position: relative; border-radius: 44px; padding: 10px; background: linear-gradient(145deg, #343b4d, #0a0d15 30%, #171c29 78%, #535b6d); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.2); }
.device::before { content: ""; position: absolute; z-index: 5; top: 17px; left: 50%; width: 105px; height: 25px; transform: translateX(-50%); background: #03050a; border-radius: 20px; pointer-events: none; }
.device-glow { position: absolute; inset: 18% -28% -5%; background: radial-gradient(ellipse, rgba(139,108,255,.26), transparent 62%); filter: blur(30px); pointer-events: none; }
.device-screen { height: 100%; border-radius: 35px; overflow: hidden; background: var(--bg); position: relative; isolation: isolate; }
.status-bar { height: 35px; padding: 10px 24px 0; display: flex; justify-content: space-between; font-size: 10px; font-weight: 750; letter-spacing: .02em; position: relative; z-index: 4; background: var(--bg); }
.status-bar span:last-child { font-size: 8px; letter-spacing: 1px; }
.app { height: calc(100% - 35px); overflow: hidden; position: relative; }
.screen { height: 100%; position: relative; overflow: hidden; background: var(--bg); }
.screen-scroll { height: calc(100% - 69px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 28px; }
.screen-scroll::-webkit-scrollbar { display: none; }
.screen.no-nav .screen-scroll { height: 100%; }

.topbar { min-height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 10px; position: sticky; top: 0; z-index: 6; background: rgba(5,7,13,.94); backdrop-filter: blur(18px); }
.wordmark { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 14px; letter-spacing: .055em; }
.wordmark .brand-mark { width: 31px; height: 31px; border-radius: 9px; font-size: 11px; }
.top-actions { display: flex; gap: 7px; }
.icon-button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; background: var(--surface); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.back-title { display: flex; align-items: center; gap: 10px; }
.back-title h2 { font-size: 17px; margin: 0; letter-spacing: -.02em; }
.back-title .icon-button { border: 0; background: transparent; width: 32px; }

.bottom-nav { height: 69px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; display: grid; grid-template-columns: repeat(5,1fr); background: rgba(9,12,20,.94); border-top: 1px solid var(--line); backdrop-filter: blur(20px); padding-bottom: max(5px, env(safe-area-inset-bottom)); }
.bottom-nav button { border: 0; background: transparent; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; color: var(--muted-2); font-size: 9px; cursor: pointer; }
.bottom-nav button.active { color: var(--lime); }
.bottom-nav .create-nav span { width: 38px; height: 30px; display: grid; place-items: center; border-radius: 11px; background: var(--surface-3); color: var(--muted); margin-bottom: 1px; border: 1px solid var(--line); }
.bottom-nav .create-nav.active span { background: var(--lime); color: #101500; border-color: var(--lime); }
.bottom-nav .create-nav .icon { width: 19px; }

.tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; border: 0; background: transparent; color: var(--muted); padding: 11px 13px 12px; font-size: 13px; cursor: pointer; }
.tabs button.active { color: var(--text); font-weight: 700; }
.tabs button.active::after { content: ""; position: absolute; height: 2px; background: var(--lime); left: 10px; right: 10px; bottom: -1px; border-radius: 2px; box-shadow: 0 0 12px rgba(200,255,69,.5); }
.chips { display: flex; gap: 8px; padding: 13px 18px 9px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); padding: 7px 11px; font-size: 11px; cursor: pointer; }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 750; }
.chip.lime { background: rgba(200,255,69,.1); color: var(--lime); border-color: rgba(200,255,69,.2); }

.feed { padding: 4px 13px 20px; }
.post-card { background: linear-gradient(145deg, rgba(19,25,40,.94), rgba(11,15,25,.95)); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; overflow: hidden; }
.post-head { display: flex; gap: 10px; align-items: center; }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: white; border: 1px solid rgba(255,255,255,.12); flex: 0 0 auto; }
.avatar.large { width: 70px; height: 70px; border-radius: 20px; font-size: 20px; }
.avatar.luna { background: linear-gradient(145deg, #754cff, #e86fa6); }
.avatar.kael { background: linear-gradient(145deg, #166d73, #46d9ca); color: #071514; }
.avatar.nova { background: linear-gradient(145deg, #bdff38, #3d9e4f); color: #0b1806; }
.avatar.ember { background: linear-gradient(145deg, #ff8258, #813e9f); }
.post-author { min-width: 0; flex: 1; }
.post-author strong { font-size: 12px; display: block; }
.post-author span { color: var(--muted); font-size: 10px; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { padding: 4px 7px; border-radius: 7px; font-size: 8px; font-weight: 800; letter-spacing: .055em; background: rgba(139,108,255,.13); color: #b9a9ff; border: 1px solid rgba(139,108,255,.17); }
.tag.question { background: rgba(77,232,255,.1); color: var(--cyan); border-color: rgba(77,232,255,.15); }
.tag.recruit { background: rgba(200,255,69,.09); color: var(--lime); border-color: rgba(200,255,69,.16); }
.post-card h3 { font-size: 14px; line-height: 1.35; margin: 13px 0 6px; letter-spacing: -.012em; }
.post-card p { color: #b8becc; font-size: 12px; line-height: 1.55; margin: 5px 0; }
.media { height: 154px; border-radius: 14px; margin-top: 12px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,.09); }
.media.valorant { background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.28), transparent 4%), linear-gradient(140deg, rgba(5,8,13,.08), rgba(5,8,13,.55)), linear-gradient(120deg, #ff405c, #7d1b55 45%, #19245a); }
.media.minecraft { background: linear-gradient(160deg, rgba(9,14,7,.08), rgba(9,14,7,.55)), linear-gradient(135deg, #4a9c7e 0 35%, #83b75f 35% 54%, #5a4332 54%); }
.media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, transparent 48%, rgba(255,255,255,.07) 49%, transparent 51%); background-size: 40px 40px; }
.media-copy { position: absolute; inset: auto 14px 13px; z-index: 2; }
.media-copy strong { display: block; font-size: 15px; }
.media-copy span { font-size: 9px; color: rgba(255,255,255,.7); }
.play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.52); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; backdrop-filter: blur(8px); }
.play .icon { width: 18px; fill: white; stroke: white; margin-left: 2px; }
.post-actions { display: flex; align-items: center; gap: 4px; margin: 12px -5px -4px; }
.post-actions button { border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 10px; padding: 7px; cursor: pointer; }
.post-actions button:last-child { margin-left: auto; }
.post-actions .icon { width: 17px; height: 17px; }

.section { padding: 17px 18px 4px; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.section-title h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.section-title button, .text-button { border: 0; background: transparent; color: var(--lime); font-size: 10px; cursor: pointer; }
.searchbox { margin: 5px 18px 12px; height: 43px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; display: flex; align-items: center; padding: 0 13px; gap: 9px; color: var(--muted); }
.searchbox input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; min-width: 0; }
.searchbox .icon { width: 18px; }
.game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.game-tile { aspect-ratio: .82; border: 1px solid var(--line); border-radius: 15px; padding: 10px; position: relative; overflow: hidden; cursor: pointer; background: var(--surface-2); display: flex; align-items: end; }
.game-tile::before { content: ""; position: absolute; inset: 0; background: var(--game-bg); opacity: .75; }
.game-tile::after { content: attr(data-letter); position: absolute; right: -2px; top: -15px; font-size: 68px; font-weight: 1000; color: rgba(255,255,255,.11); transform: rotate(8deg); }
.game-tile span { position: relative; z-index: 1; font-size: 10px; font-weight: 800; line-height: 1.2; }
.trend-list { display: grid; gap: 8px; }
.trend { border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 11px 12px; display: flex; align-items: center; gap: 11px; }
.trend-number { color: var(--muted-2); font-weight: 900; font-size: 11px; }
.trend strong { font-size: 11px; display: block; }
.trend small { color: var(--muted); font-size: 9px; }
.trend .sparkline { margin-left: auto; color: var(--lime); font-size: 10px; }

.hero-game { margin: 0 13px; min-height: 180px; border-radius: 20px; background: radial-gradient(circle at 68% 25%, rgba(255,255,255,.18), transparent 3%), linear-gradient(135deg, rgba(10,11,19,.05), rgba(7,9,14,.7)), linear-gradient(125deg, #ff445f, #8f214f 48%, #18245b); border: 1px solid rgba(255,255,255,.1); padding: 20px; display: flex; flex-direction: column; justify-content: end; position: relative; overflow: hidden; }
.hero-game::after { content: attr(data-letter); position: absolute; font-size: 180px; font-weight: 1000; right: -15px; top: -35px; color: rgba(255,255,255,.08); transform: skew(-12deg); }
.hero-game .eyebrow { color: rgba(255,255,255,.64); font-size: 9px; letter-spacing: .12em; }
.hero-game h1 { margin: 3px 0 6px; font-size: 31px; letter-spacing: -.06em; }
.hero-game p { margin: 0; font-size: 10px; color: rgba(255,255,255,.67); }
.follow-button { position: absolute; top: 15px; left: 15px; z-index: 2; background: var(--lime); color: #0b1004; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 10px; font-weight: 850; cursor: pointer; }
.composer-prompt { display: flex; gap: 10px; margin: 13px; padding: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; align-items: center; cursor: pointer; }
.composer-prompt .avatar { width: 31px; height: 31px; border-radius: 10px; }
.composer-prompt span { color: var(--muted); font-size: 11px; }

.create-wrap { padding: 6px 18px 25px; }
.type-picker { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 14px; }
.type-picker button { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 11px; padding: 8px 10px; font-size: 10px; cursor: pointer; }
.type-picker button.active { color: var(--lime); border-color: rgba(200,255,69,.26); background: rgba(200,255,69,.07); }
.form-label { display: block; color: var(--muted); font-size: 9px; letter-spacing: .08em; font-weight: 800; margin: 14px 0 7px; }
.select-row, .field { width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 13px; min-height: 44px; padding: 11px 12px; outline: none; font-size: 12px; }
.select-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
textarea.field { min-height: 145px; resize: none; line-height: 1.6; }
.upload-zone { height: 100px; border: 1px dashed rgba(255,255,255,.19); border-radius: 14px; display: grid; place-items: center; color: var(--muted); font-size: 10px; background: rgba(255,255,255,.015); cursor: pointer; }
.upload-zone div { display: grid; place-items: center; gap: 7px; }
.upload-zone .icon { color: var(--lime); }
.form-actions { display: flex; gap: 9px; margin-top: 17px; }
.button { border: 0; border-radius: 13px; padding: 12px 15px; font-size: 11px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.button.primary { background: var(--lime); color: #0b1004; flex: 1; box-shadow: 0 8px 30px rgba(200,255,69,.12); }
.button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.button.full { width: 100%; }

.match-hero { margin: 5px 13px 12px; padding: 17px; background: linear-gradient(145deg, rgba(139,108,255,.2), rgba(77,232,255,.07)); border: 1px solid rgba(139,108,255,.22); border-radius: 19px; position: relative; overflow: hidden; }
.match-hero::after { content: ""; position: absolute; width: 150px; height: 150px; background: var(--violet); filter: blur(70px); opacity: .15; right: -60px; top: -60px; }
.match-hero .eyebrow { color: #b9a9ff; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.match-hero h2 { font-size: 20px; line-height: 1.1; margin: 7px 0; letter-spacing: -.04em; }
.match-hero p { color: #aeb5c5; font-size: 10px; line-height: 1.5; margin: 0; max-width: 270px; }
.clan-list { padding: 0 13px 20px; }
.clan-card { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; margin: 9px 0; padding: 13px; cursor: pointer; transition: .18s ease; }
.clan-card:hover { border-color: rgba(200,255,69,.22); }
.clan-top { display: flex; align-items: center; gap: 10px; }
.clan-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 14px; font-weight: 950; background: linear-gradient(145deg, var(--lime), #43a56c); color: #0a1305; flex: 0 0 auto; }
.clan-logo.ember { background: linear-gradient(145deg, #ff9955, #8d3f90); color: white; }
.clan-info { flex: 1; min-width: 0; }
.clan-info strong { display: block; font-size: 12px; }
.clan-info span { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.match { color: var(--lime); font-size: 10px; font-weight: 850; }
.clan-roles { display: flex; gap: 6px; margin-top: 11px; }
.role { background: var(--surface-3); border: 1px solid var(--line); padding: 5px 7px; border-radius: 7px; font-size: 8px; color: #b5bdcd; }

.clan-cover { height: 155px; margin: 0 13px; border-radius: 20px; background: radial-gradient(circle at 70% 26%, rgba(200,255,69,.2), transparent 28%), linear-gradient(135deg, #17282c, #11152a 53%, #2b173e); border: 1px solid var(--line); position: relative; overflow: hidden; }
.clan-cover::before, .clan-cover::after { content: ""; position: absolute; width: 130px; height: 130px; border: 1px solid rgba(200,255,69,.16); transform: rotate(45deg); right: 38px; top: 12px; }
.clan-cover::after { width: 75px; height: 75px; right: 65px; top: 39px; border-color: rgba(255,255,255,.13); }
.clan-profile-head { margin: -36px 25px 0; position: relative; z-index: 2; display: flex; align-items: end; gap: 12px; }
.clan-profile-head .clan-logo { width: 72px; height: 72px; border-radius: 20px; border: 4px solid var(--bg); font-size: 21px; }
.clan-profile-head h1 { font-size: 21px; margin: 0 0 3px; letter-spacing: -.04em; }
.verified { color: var(--lime); font-size: 10px; }
.clan-meta { padding: 16px 18px 2px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.stat-row { margin: 12px 18px 3px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stat { text-align: center; padding: 10px 4px; background: var(--surface); border-right: 1px solid var(--line); }
.stat:last-child { border: 0; }
.stat strong { display: block; font-size: 13px; }
.stat span { color: var(--muted); font-size: 8px; }
.vacancy { margin: 9px 18px; padding: 13px; border: 1px solid rgba(200,255,69,.16); background: rgba(200,255,69,.045); border-radius: 15px; }
.vacancy-head { display: flex; justify-content: space-between; gap: 10px; }
.vacancy h4 { font-size: 12px; margin: 0; }
.vacancy p { color: var(--muted); font-size: 9px; line-height: 1.55; }

.apply-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 4px 18px 20px; }
.apply-progress span { height: 3px; border-radius: 9px; background: var(--surface-3); }
.apply-progress span.done { background: var(--lime); }
.summary-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; padding: 12px; border-radius: 15px; }
.summary-card .clan-logo { width: 42px; height: 42px; border-radius: 12px; }
.summary-card strong { display: block; font-size: 11px; }
.summary-card span { color: var(--muted); font-size: 9px; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin: 15px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.fake-check { width: 18px; height: 18px; border-radius: 6px; background: var(--lime); color: #101500; display: grid; place-items: center; flex: 0 0 auto; }
.fake-check .icon { width: 13px; }

.profile-cover { height: 126px; margin: 0 13px; border-radius: 19px; background: radial-gradient(circle at 74% 30%, rgba(77,232,255,.28), transparent 22%), linear-gradient(135deg, #35235b, #13203d 50%, #123d49); overflow: hidden; position: relative; }
.profile-cover::after { content: "PLAY YOUR STORY"; position: absolute; color: rgba(255,255,255,.07); font-weight: 1000; font-size: 34px; width: 330px; line-height: .83; right: -90px; top: 25px; transform: rotate(-8deg); }
.profile-head { padding: 0 19px; margin-top: -35px; position: relative; z-index: 2; }
.profile-head-line { display: flex; align-items: end; justify-content: space-between; }
.profile-head .avatar { border: 4px solid var(--bg); }
.profile-head h1 { font-size: 20px; margin: 10px 0 0; }
.handle { color: var(--muted); font-size: 10px; }
.profile-bio { color: #bdc3d0; font-size: 10px; line-height: 1.5; margin: 9px 0; }
.profile-data { color: var(--muted); font-size: 9px; display: flex; gap: 10px; flex-wrap: wrap; }
.game-row { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; }
.game-pill { flex: 0 0 145px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 11px; }
.game-pill strong { font-size: 10px; display: block; }
.game-pill span { color: var(--muted); font-size: 8px; display: block; margin-top: 5px; }

.welcome-screen { background: radial-gradient(circle at 68% 17%, rgba(139,108,255,.32), transparent 31%), radial-gradient(circle at 20% 70%, rgba(77,232,255,.13), transparent 35%), var(--bg); padding: 23px; display: flex; flex-direction: column; }
.welcome-brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .08em; font-size: 12px; }
.welcome-brand .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.welcome-art { flex: 1; min-height: 290px; position: relative; display: grid; place-items: center; }
.orbit { width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; position: relative; animation: rotate 24s linear infinite; }
.orbit::before { content: ""; position: absolute; inset: 31px; border: 1px dashed rgba(200,255,69,.2); border-radius: 50%; }
.orbit::after { content: ""; position: absolute; width: 46px; height: 46px; background: var(--lime); border-radius: 15px; top: 9px; left: 24px; box-shadow: 0 0 50px rgba(200,255,69,.35); }
.planet { width: 125px; height: 125px; border-radius: 41%; background: linear-gradient(145deg, #b59dff, #6546db 50%, #312365); position: absolute; box-shadow: inset -18px -24px 40px rgba(0,0,0,.28), 0 0 80px rgba(139,108,255,.3); transform: rotate(-13deg); display: grid; place-items: center; }
.planet .icon { width: 53px; height: 53px; color: white; transform: rotate(13deg); stroke-width: 1.3; }
@keyframes rotate { to { transform: rotate(360deg); } }
.welcome-copy .eyebrow { font-size: 9px; color: var(--lime); font-weight: 850; letter-spacing: .14em; }
.welcome-copy h1 { font-size: 37px; line-height: .98; letter-spacing: -.06em; margin: 8px 0 13px; }
.welcome-copy h1 span { color: var(--lime); }
.welcome-copy p { color: var(--muted); font-size: 11px; line-height: 1.6; max-width: 320px; }
.welcome-actions { display: grid; gap: 9px; margin-top: 19px; }
.welcome-login { text-align: center; color: var(--muted); font-size: 9px; margin-top: 12px; }
.welcome-login button { border: 0; color: var(--text); background: transparent; font-weight: 700; cursor: pointer; }

.onboarding { padding: 18px 19px 22px; display: flex; flex-direction: column; background: radial-gradient(circle at 88% 2%, rgba(139,108,255,.13), transparent 26%), var(--bg); }
.onboarding-progress { display: grid; grid-template-columns: 32px 1fr 42px; gap: 10px; align-items: start; margin-bottom: 25px; }
.onboarding-progress > button { min-width: 32px; height: 30px; border: 0; padding: 0; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.onboarding-progress > button .icon { width: 19px; }
.onboarding-progress .skip-onboarding { width: auto; color: var(--muted-2); font-size: 8px; }
.step-count { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.step-bars { display: flex; gap: 5px; margin: 8px 0 0; }
.step-bars span { flex: 1; height: 3px; background: var(--surface-3); border-radius: 3px; }
.step-bars span.active { background: linear-gradient(90deg, var(--lime), #88e875); box-shadow: 0 0 12px rgba(200,255,69,.18); }
.onboarding h1 { font-size: 28px; line-height: 1.05; letter-spacing: -.045em; margin: 0 0 9px; }
.onboarding > p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 16px; }
.selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; overflow: auto; scrollbar-width: none; padding-bottom: 12px; }
.selection-card { min-height: 104px; border: 1px solid var(--line); background: var(--surface); border-radius: 15px; padding: 11px; cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: end; }
.selection-card::before { content: ""; position: absolute; inset: 0; background: var(--game-bg); opacity: .55; }
.selection-card strong { z-index: 1; font-size: 11px; }
.selection-card .select-check { position: absolute; z-index: 2; right: 8px; top: 8px; width: 21px; height: 21px; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; color: transparent; }
.selection-card.selected { border-color: rgba(200,255,69,.65); box-shadow: inset 0 0 0 1px rgba(200,255,69,.16); }
.selection-card.selected .select-check { background: var(--lime); color: #0a1003; border-color: var(--lime); }
.selection-card .icon { width: 13px; }
.onboarding-footer { margin-top: auto; padding-top: 12px; }
.selection-count { text-align: center; color: var(--muted); font-size: 9px; margin-bottom: 8px; }

.interest-grid { min-height: 0; flex: 1; display: grid; gap: 7px; overflow-y: auto; scrollbar-width: none; padding: 1px 1px 8px; }
.interest-grid::-webkit-scrollbar { display: none; }
.interest-card { width: 100%; min-height: 62px; border: 1px solid var(--line); border-radius: 15px; background: rgba(12,16,27,.9); color: var(--text); padding: 10px; display: grid; grid-template-columns: 38px 1fr 20px; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.interest-card > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #bbaaff; background: rgba(139,108,255,.1); }
.interest-card > span .icon { width: 18px; }
.interest-card strong, .interest-card small { display: block; }
.interest-card strong { font-size: 10px; }
.interest-card small { color: var(--muted); font-size: 7px; line-height: 1.35; margin-top: 3px; }
.interest-card > i { width: 19px; height: 19px; border: 1px solid var(--line-strong); border-radius: 7px; color: transparent; display: grid; place-items: center; font-style: normal; }
.interest-card > i .icon { width: 12px; }
.interest-card.selected { border-color: rgba(200,255,69,.28); background: linear-gradient(145deg, rgba(200,255,69,.065), rgba(12,16,27,.96)); }
.interest-card.selected > span { color: var(--lime); background: rgba(200,255,69,.09); }
.interest-card.selected > i { color: #0c1204; background: var(--lime); border-color: var(--lime); }

.onboarding-ready { text-align: center; padding: 2px 10px 16px; }
.ready-mark { width: 59px; height: 59px; margin: 0 auto 14px; border-radius: 19px; background: linear-gradient(145deg, var(--lime), #65cf78); color: #0c1405; display: grid; place-items: center; box-shadow: 0 0 38px rgba(200,255,69,.15); transform: rotate(-4deg); }
.ready-mark .icon { width: 27px; transform: rotate(4deg); }
.onboarding-ready .eyebrow { color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.onboarding-ready h1 { margin-top: 7px; }
.onboarding-ready p { color: var(--muted); font-size: 9px; line-height: 1.55; margin: 0 auto; max-width: 310px; }
.feed-preview-card { min-height: 116px; border: 1px solid rgba(139,108,255,.18); border-radius: 18px; padding: 10px; background: linear-gradient(145deg, rgba(139,108,255,.1), rgba(12,16,27,.96)); }
.preview-games { height: 62px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 9px; }
.preview-art { border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background-size: cover; background-position: center; }
.preview-art.clutch { background-image: url('assets/feed-clutch.webp'); }
.preview-art.backlog { background-image: url('assets/feed-backlog.webp'); }
.preview-art.fantasy { background-image: url('assets/feed-fantasy.webp'); }
.feed-preview-card small, .feed-preview-card strong, .feed-preview-card > div:last-child > span { display: block; }
.feed-preview-card small { color: #bbaaff; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.feed-preview-card strong { font-size: 9px; margin-top: 3px; }
.feed-preview-card > div:last-child > span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.onboarding-controls { margin-top: 9px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); overflow: hidden; }
.onboarding-controls > button { width: 100%; min-height: 53px; border: 0; border-bottom: 1px solid var(--line); padding: 9px 10px; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.onboarding-controls > button:last-child { border: 0; }
.onboarding-controls > button > span:first-child { display: flex; gap: 9px; align-items: center; }
.onboarding-controls > button > span:first-child > .icon { width: 17px; color: var(--cyan); }
.onboarding-controls i { font-style: normal; text-align: left; }
.onboarding-controls strong, .onboarding-controls small { display: block; }
.onboarding-controls strong { font-size: 8px; }
.onboarding-controls small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.ready-footer { text-align: center; }
.ready-footer > small { color: var(--muted-2); font-size: 7px; display: block; margin-top: 8px; }

.toast { position: absolute; left: 50%; bottom: 82px; transform: translate(-50%, 20px); background: #efffd0; color: #101600; font-size: 10px; font-weight: 800; padding: 10px 14px; border-radius: 12px; z-index: 30; opacity: 0; pointer-events: none; transition: .25s ease; white-space: nowrap; box-shadow: 0 10px 35px rgba(0,0,0,.35); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty-note { text-align: center; color: var(--muted); font-size: 10px; padding: 22px; }

/* Eventos y Torneos 1.0 */
.event-toolbar { display: flex; align-items: center; gap: 10px; padding-right: 18px; border-bottom: 1px solid var(--line); }
.event-toolbar .event-tabs { flex: 1; border: 0; }
.square-create { width: 34px; height: 34px; border-radius: 11px; border: 1px solid rgba(200,255,69,.2); background: rgba(200,255,69,.08); color: var(--lime); display: grid; place-items: center; cursor: pointer; }
.square-create .icon { width: 17px; }
.event-feature-wrap { padding: 15px 13px 7px; }
.featured-event { min-height: 244px; padding: 16px; border-radius: 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.14); cursor: pointer; isolation: isolate; }
.featured-event.valorant { background: radial-gradient(circle at 78% 17%, rgba(255,255,255,.19), transparent 5%), linear-gradient(145deg, rgba(8,9,18,.02), rgba(8,9,18,.8)), linear-gradient(125deg, #ff405c, #8c1b51 48%, #202c67); }
.featured-event::after { content: "V"; position: absolute; z-index: -1; right: -18px; top: 12px; font-size: 190px; line-height: .7; font-weight: 1000; color: rgba(255,255,255,.085); transform: skew(-11deg); }
.featured-orbit { position: absolute; z-index: -1; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; right: -54px; top: -55px; }
.featured-orbit::after { content: ""; position: absolute; inset: 25px; border: 1px dashed rgba(255,255,255,.13); border-radius: 50%; }
.featured-event-top { display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.66); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.live-pill { display: inline-flex; gap: 5px; align-items: center; color: #111704; background: var(--lime); padding: 5px 8px; border-radius: 999px; }
.live-pill .icon { width: 11px; height: 11px; fill: currentColor; }
.featured-event-copy { margin-top: auto; position: relative; z-index: 1; }
.featured-event-copy .eyebrow { color: rgba(255,255,255,.65); font-size: 8px; letter-spacing: .13em; font-weight: 850; }
.featured-event-copy h2 { font-size: 23px; line-height: 1; letter-spacing: -.055em; max-width: 280px; margin: 6px 0 7px; }
.featured-event-copy p { font-size: 9px; color: rgba(255,255,255,.72); margin: 0; text-transform: capitalize; }
.featured-event-copy p strong { color: var(--lime); }
.featured-meta { display: flex; gap: 12px; margin-top: 11px; font-size: 8px; color: rgba(255,255,255,.76); }
.featured-meta span { display: flex; gap: 5px; align-items: center; }
.featured-meta .icon { width: 12px; }
.featured-event .button.light { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: white; color: #0a0d14; padding: 9px 10px; font-size: 9px; }
.featured-event .button.light .icon { width: 13px; }
.event-filters { padding-bottom: 5px; }
.event-section-head { display: flex; justify-content: space-between; align-items: end; padding: 13px 18px 3px; }
.event-section-head .eyebrow { color: var(--lime); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.event-section-head h3 { margin: 3px 0 0; font-size: 16px; }
.event-section-head button { border: 0; background: transparent; color: var(--muted); font-size: 9px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.event-section-head button .icon { width: 13px; color: var(--lime); }
.event-list { padding: 3px 13px 7px; }
.event-card { display: grid; grid-template-columns: 43px minmax(0,1fr) 16px; gap: 11px; align-items: center; min-height: 119px; padding: 13px 10px 13px 13px; margin: 9px 0; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(19,25,40,.93), rgba(10,14,23,.96)); border-radius: 17px; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.event-card:hover { border-color: rgba(200,255,69,.24); transform: translateY(-1px); }
.event-date-block { height: 51px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--line); display: grid; align-content: center; text-align: center; }
.event-date-block strong { font-size: 17px; line-height: 1; }
.event-date-block span { color: var(--lime); font-size: 8px; text-transform: uppercase; font-weight: 850; margin-top: 4px; }
.event-card-body { min-width: 0; }
.event-card-kicker { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.event-type { border-radius: 6px; padding: 4px 6px; font-size: 7px; font-weight: 900; letter-spacing: .055em; background: rgba(139,108,255,.15); color: #c2b4ff; border: 1px solid rgba(139,108,255,.2); }
.event-type.torneo { background: rgba(200,255,69,.1); color: var(--lime); border-color: rgba(200,255,69,.19); }
.event-type.scrim { background: rgba(255,110,145,.1); color: #ff91aa; border-color: rgba(255,110,145,.18); }
.event-type.raid { background: rgba(77,232,255,.09); color: var(--cyan); border-color: rgba(77,232,255,.17); }
.event-type.comunidad { background: rgba(139,108,255,.12); color: #c2b4ff; }
.event-type.casual { background: rgba(255,183,77,.1); color: #ffc778; border-color: rgba(255,183,77,.18); }
.event-state { margin-left: auto; border-radius: 999px; padding: 3px 6px; font-size: 7px; text-transform: none; }
.event-state.attending { color: var(--lime); background: rgba(200,255,69,.08); }
.event-state.interested { color: #c2b4ff; background: rgba(139,108,255,.09); }
.event-state.waiting { color: var(--cyan); background: rgba(77,232,255,.08); }
.event-card h3 { font-size: 12px; line-height: 1.3; margin: 7px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card p { margin: 0; color: #aab2c4; font-size: 8px; display: flex; align-items: center; }
.event-card p .icon { width: 11px; height: 11px; margin-right: 4px; }
.event-card-footer { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 7px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.event-card-footer span { display: flex; align-items: center; gap: 4px; }
.event-card-footer .icon { width: 11px; }
.event-chevron { width: 14px; color: var(--muted-2); }
.event-card.compact { min-height: 86px; margin: 7px 0; }
.event-card.compact .event-card-kicker { padding-right: 2px; }
.agenda-summary { margin: 13px; padding: 12px; border: 1px solid rgba(200,255,69,.16); border-radius: 16px; background: linear-gradient(145deg, rgba(200,255,69,.08), rgba(77,232,255,.035)); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agenda-summary > div { display: flex; align-items: center; gap: 9px; }
.agenda-summary .icon { color: var(--lime); width: 22px; }
.agenda-summary strong, .agenda-summary small { display: block; }
.agenda-summary strong { font-size: 10px; }
.agenda-summary small { color: var(--muted); font-size: 8px; margin-top: 3px; text-transform: capitalize; }
.agenda-summary button { border: 0; background: transparent; color: var(--lime); font-size: 8px; cursor: pointer; white-space: nowrap; }
.events-empty { padding: 35px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 17px; margin: 9px 0; }
.events-empty > .icon { color: var(--lime); width: 30px; height: 30px; }
.events-empty h3 { color: var(--text); font-size: 14px; margin: 10px 0 5px; }
.events-empty p { font-size: 9px; line-height: 1.5; margin: 0 auto 13px; max-width: 240px; }
.results-teaser { width: calc(100% - 26px); margin: 8px 13px 20px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(139,108,255,.2); border-radius: 17px; padding: 12px; text-align: left; color: var(--text); background: linear-gradient(145deg, rgba(139,108,255,.14), rgba(77,232,255,.045)); cursor: pointer; }
.trophy-mark { width: 42px; height: 42px; border-radius: 13px; background: rgba(139,108,255,.2); color: #c1b4ff; display: grid; place-items: center; }
.trophy-mark .icon { width: 21px; }
.results-teaser > span:nth-child(2) { flex: 1; }
.results-teaser small, .results-teaser strong, .results-teaser em { display: block; }
.results-teaser small { color: #bcaeff; font-size: 7px; letter-spacing: .1em; font-style: normal; }
.results-teaser strong { font-size: 10px; margin: 3px 0; }
.results-teaser em { color: var(--muted); font-size: 8px; font-style: normal; }
.results-teaser > .icon { width: 14px; color: var(--muted); }

.event-detail-hero { height: 212px; margin: 0 13px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 21px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; isolation: isolate; }
.event-detail-hero.valorant { background: linear-gradient(145deg, rgba(8,9,18,.04), rgba(8,9,18,.83)), linear-gradient(125deg, #ff405c, #8c1b51 48%, #202c67); }
.event-detail-hero.nova { background: radial-gradient(circle at 70% 22%, rgba(200,255,69,.16), transparent 30%), linear-gradient(135deg, #172b2d, #11162b 53%, #2b173e); }
.event-detail-hero.minecraft { background: linear-gradient(145deg, rgba(7,12,8,.05), rgba(7,12,8,.76)), linear-gradient(130deg, #58a777 0 45%, #718f45 45% 64%, #4f382a 64%); }
.event-detail-hero.fortnite { background: linear-gradient(145deg, rgba(10,9,20,.04), rgba(10,9,20,.76)), linear-gradient(125deg, #8d6eff, #4a3f8e 55%, #ef5fa5); }
.event-detail-hero.elden { background: linear-gradient(145deg, rgba(9,9,7,.04), rgba(9,9,7,.85)), linear-gradient(125deg, #c19b45, #57482e 50%, #161b24); }
.event-detail-hero::after { content: "GS"; position: absolute; z-index: -1; right: -26px; top: 25px; color: rgba(255,255,255,.075); font-size: 140px; font-weight: 1000; letter-spacing: -.14em; transform: rotate(-8deg); }
.detail-featured { position: absolute; right: 14px; top: 15px; color: var(--lime); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.event-detail-hero > div { margin-top: auto; }
.event-detail-hero > div > span { color: rgba(255,255,255,.68); font-size: 8px; font-weight: 750; letter-spacing: .07em; }
.event-detail-hero h1 { font-size: 25px; line-height: 1; max-width: 330px; letter-spacing: -.052em; margin: 6px 0 7px; }
.event-detail-hero p { color: rgba(255,255,255,.66); font-size: 9px; margin: 0; }
.event-detail-content { padding: 12px 18px 32px; }
.time-conversion { display: grid; grid-template-columns: 46px 1fr 38px; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.date-icon { width: 46px; height: 51px; border: 1px solid rgba(200,255,69,.2); border-radius: 13px; background: rgba(200,255,69,.07); display: grid; align-content: center; text-align: center; }
.date-icon strong { font-size: 17px; line-height: 1; }
.date-icon span { color: var(--lime); font-size: 8px; text-transform: uppercase; font-weight: 900; margin-top: 4px; }
.time-conversion > div:nth-child(2) strong, .time-conversion > div:nth-child(2) span, .time-conversion > div:nth-child(2) small { display: block; }
.time-conversion > div:nth-child(2) strong { font-size: 11px; text-transform: capitalize; }
.time-conversion > div:nth-child(2) span { font-size: 9px; margin-top: 4px; }
.time-conversion > div:nth-child(2) small { color: var(--muted); font-size: 7px; margin-top: 3px; }
.reminder-button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.reminder-button.active { color: var(--lime); border-color: rgba(200,255,69,.25); background: rgba(200,255,69,.08); }
.capacity-card { padding: 13px 0 3px; }
.capacity-copy { display: flex; justify-content: space-between; font-size: 8px; color: var(--muted); }
.capacity-copy strong { color: var(--text); font-size: 11px; }
.capacity-bar { height: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: 8px 0 5px; }
.capacity-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.capacity-card > small { color: var(--muted-2); font-size: 7px; }
.event-action-row { display: grid; grid-template-columns: 1fr .9fr; gap: 8px; margin: 13px 0 20px; }
.event-action-row .button { padding-inline: 10px; }
.button.primary.selected { box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.interest-button.selected { color: #c8bbff; border-color: rgba(139,108,255,.28); background: rgba(139,108,255,.09); }
.interest-button .icon { width: 14px; }
.detail-section { padding: 1px 0 13px; }
.detail-section h3 { font-size: 14px; margin: 0 0 7px; }
.detail-section p { color: #afb7c8; font-size: 9px; line-height: 1.6; margin: 0; }
.event-facts { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 5px 12px; }
.event-facts > div { display: grid; grid-template-columns: 23px 1fr; gap: 9px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.event-facts > div:last-child { border: 0; }
.event-facts > div > .icon { width: 17px; color: var(--lime); }
.event-facts small, .event-facts strong { display: block; }
.event-facts small { color: var(--muted-2); font-size: 7px; letter-spacing: .07em; }
.event-facts strong { font-size: 9px; margin-top: 2px; }
.lfg-launch { width: 100%; margin: 14px 0; border: 1px solid rgba(77,232,255,.18); border-radius: 17px; background: linear-gradient(145deg, rgba(77,232,255,.1), rgba(139,108,255,.07)); padding: 12px; color: var(--text); display: grid; grid-template-columns: 42px 1fr 16px; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.lfg-icon { width: 42px; height: 42px; border-radius: 13px; background: rgba(77,232,255,.1); color: var(--cyan); display: grid; place-items: center; }
.lfg-launch small, .lfg-launch strong, .lfg-launch em { display: block; }
.lfg-launch small { color: var(--cyan); font-size: 7px; letter-spacing: .08em; }
.lfg-launch strong { font-size: 10px; margin: 3px 0; }
.lfg-launch em { color: var(--muted); font-size: 8px; font-style: normal; }
.lfg-launch > .icon { width: 14px; color: var(--muted); }
.organizer-card { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; }
.organizer-card .clan-logo { width: 42px; height: 42px; border-radius: 13px; }
.organizer-card small, .organizer-card strong, .organizer-card span { display: block; }
.organizer-card small { color: var(--muted-2); font-size: 7px; }
.organizer-card strong { font-size: 10px; margin: 2px 0; }
.organizer-card span { color: var(--muted); font-size: 7px; }
.organizer-card button { border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 7px 9px; font-size: 8px; cursor: pointer; }
.confirmation-note { border: 1px solid rgba(200,255,69,.17); background: rgba(200,255,69,.055); color: var(--lime); border-radius: 14px; display: flex; align-items: center; gap: 9px; padding: 10px; }
.confirmation-note .icon { width: 18px; }
.confirmation-note strong, .confirmation-note small { display: block; }
.confirmation-note strong { font-size: 9px; }
.confirmation-note small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.confirmation-note.waiting { color: var(--cyan); border-color: rgba(77,232,255,.16); background: rgba(77,232,255,.05); }

.calendar-scope { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 2px 18px 12px; padding: 4px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; }
.calendar-scope button { border: 0; border-radius: 9px; padding: 8px 5px; color: var(--muted); background: transparent; font-size: 8px; cursor: pointer; }
.calendar-scope button.active { color: var(--bg); background: var(--text); font-weight: 850; }
.month-head { display: flex; justify-content: space-between; align-items: end; padding: 10px 18px 12px; }
.month-head .eyebrow { color: var(--lime); font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.month-head h2 { font-size: 20px; margin: 3px 0 0; text-transform: capitalize; letter-spacing: -.04em; }
.month-head button { border: 0; background: transparent; color: var(--lime); display: flex; align-items: center; gap: 5px; font-size: 8px; cursor: pointer; }
.month-head button .icon { width: 12px; }
.week-strip { margin: 0 13px; padding: 8px; display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.week-strip > div { min-height: 54px; border-radius: 10px; display: grid; justify-items: center; align-content: center; position: relative; color: var(--muted); }
.week-strip span { font-size: 7px; text-transform: uppercase; }
.week-strip strong { font-size: 11px; margin-top: 5px; }
.week-strip i { width: 3px; height: 3px; border-radius: 50%; background: var(--violet); position: absolute; bottom: 5px; }
.week-strip .today { background: var(--lime); color: #0d1205; }
.week-strip .today i { background: #0d1205; }
.timezone-note { margin: 9px 18px 12px; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; }
.timezone-note .icon { width: 12px; color: var(--cyan); }
.timezone-note strong { color: #c3cada; }
.calendar-agenda { padding: 2px 13px 15px; }
.calendar-group { margin-bottom: 14px; }
.calendar-day { display: flex; justify-content: space-between; align-items: center; padding: 0 5px 1px; }
.calendar-day span { font-size: 9px; font-weight: 850; text-transform: capitalize; }
.calendar-day small { color: var(--muted-2); font-size: 7px; }
.calendar-add { width: calc(100% - 36px); margin: 0 18px 22px; border: 1px dashed rgba(200,255,69,.25); border-radius: 13px; padding: 11px; color: var(--lime); background: rgba(200,255,69,.04); display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 9px; font-weight: 750; cursor: pointer; }
.calendar-add .icon { width: 14px; }

.event-form, .lfg-form { padding-top: 2px; }
.form-intro { display: flex; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); padding: 3px 0 13px; margin-bottom: 4px; }
.form-intro > span { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: rgba(200,255,69,.08); color: var(--lime); }
.form-intro h2 { font-size: 16px; margin: 0; }
.form-intro p { color: var(--muted); font-size: 8px; line-height: 1.4; margin: 4px 0 0; }
.form-grid { display: grid; gap: 8px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid label { min-width: 0; }
.form-grid .form-label { margin-top: 12px; }
.form-grid .select-row { gap: 5px; padding-inline: 9px; font-size: 9px; }
.form-grid .select-row .icon { width: 13px; }
.timezone-form-note { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; margin-top: 7px; }
.timezone-form-note .icon { width: 12px; color: var(--cyan); }
.mini-selects, .role-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-selects button, .role-slots button { border: 1px solid var(--line); background: var(--surface); color: #c1c7d4; border-radius: 10px; padding: 8px 10px; font-size: 8px; cursor: pointer; }
.role-slots button.selected { border-color: rgba(200,255,69,.25); color: var(--lime); background: rgba(200,255,69,.06); }
.role-slots button .icon { width: 11px; display: inline; vertical-align: middle; }
textarea.field.short { min-height: 82px; }
.linked-event { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; border: 1px solid rgba(139,108,255,.19); border-radius: 15px; padding: 11px; margin-bottom: 15px; background: rgba(139,108,255,.07); }
.linked-event > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #c2b4ff; background: rgba(139,108,255,.12); }
.linked-event small, .linked-event strong, .linked-event em { display: block; }
.linked-event small { color: #b8aaff; font-size: 7px; letter-spacing: .08em; }
.linked-event strong { font-size: 9px; margin: 3px 0; }
.linked-event em { color: var(--muted); font-size: 7px; font-style: normal; text-transform: capitalize; }
.lfg-visibility { display: grid; grid-template-columns: 22px 1fr 31px; gap: 8px; align-items: center; margin: 15px 0; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lfg-visibility > .icon { width: 17px; color: var(--cyan); }
.lfg-visibility strong, .lfg-visibility small { display: block; }
.lfg-visibility strong { font-size: 9px; }
.lfg-visibility small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.toggle { width: 31px; height: 18px; border-radius: 999px; background: var(--surface-3); position: relative; }
.toggle::after { content: ""; position: absolute; width: 13px; height: 13px; background: white; border-radius: 50%; top: 2.5px; left: 3px; }
.toggle.active { background: var(--lime); }
.toggle.active::after { left: 15px; background: #101500; }

.results-hero { margin: 0 13px 15px; padding: 18px 15px 15px; border: 1px solid rgba(200,255,69,.16); border-radius: 21px; background: radial-gradient(circle at 50% 25%, rgba(200,255,69,.14), transparent 28%), linear-gradient(145deg, #141c22, #0d1020 55%, #201432); text-align: center; position: relative; overflow: hidden; }
.results-hero::before, .results-hero::after { content: ""; position: absolute; width: 140px; height: 140px; border: 1px solid rgba(200,255,69,.1); transform: rotate(45deg); left: -92px; top: 24px; }
.results-hero::after { left: auto; right: -92px; }
.results-hero .eyebrow { color: var(--lime); font-size: 7px; letter-spacing: .1em; }
.winner-crown { width: 54px; height: 54px; margin: 14px auto 7px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(145deg, var(--lime), #65c86f); color: #101600; box-shadow: 0 0 34px rgba(200,255,69,.18); }
.winner-crown .icon { width: 27px; }
.results-hero > small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.results-hero h1 { margin: 2px 0 4px; font-size: 24px; letter-spacing: -.05em; }
.results-hero > p { color: var(--muted); font-size: 8px; margin: 0; }
.final-score { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; margin-top: 14px; border: 1px solid var(--line); border-radius: 13px; padding: 9px; background: rgba(0,0,0,.2); }
.final-score div { display: flex; align-items: center; justify-content: center; gap: 7px; }
.final-score span { font-size: 8px; color: #c2c8d5; }
.final-score strong { font-size: 18px; }
.final-score em { color: var(--muted); font-size: 6px; font-style: normal; }
.results-tabs { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 18px 18px; border-bottom: 1px solid var(--line); }
.results-tabs button { border: 0; background: transparent; color: var(--muted); padding: 10px 4px; font-size: 9px; cursor: pointer; position: relative; }
.results-tabs button.active { color: var(--text); font-weight: 750; }
.results-tabs button.active::after { content: ""; position: absolute; height: 2px; bottom: -1px; left: 18px; right: 18px; background: var(--lime); }
.standings-head { display: flex; justify-content: space-between; align-items: end; padding: 0 18px 7px; }
.standings-head .eyebrow { color: var(--lime); font-size: 7px; letter-spacing: .1em; }
.standings-head h3 { font-size: 14px; margin: 3px 0 0; }
.standings-head > span { color: var(--muted-2); font-size: 7px; }
.standings-list { margin: 0 13px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.standing { min-height: 51px; display: grid; grid-template-columns: 27px 33px 1fr 32px 38px; align-items: center; gap: 6px; padding: 7px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.standing:last-child { border: 0; }
.standing.winner { background: linear-gradient(90deg, rgba(200,255,69,.09), var(--surface)); }
.standing .position { color: var(--muted); font-size: 8px; font-weight: 850; }
.standing .team-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); font-size: 9px; font-weight: 900; }
.standing.winner .team-mark { background: var(--lime); color: #101500; }
.standing strong { font-size: 9px; }
.standing > span:nth-last-child(2), .standing b { color: var(--muted); font-size: 8px; text-align: right; }
.standing b { color: var(--text); }
.result-awards { padding: 18px; }
.result-awards h3 { font-size: 14px; margin: 0 0 9px; }
.result-awards > div { display: grid; grid-template-columns: 39px 1fr 20px; gap: 9px; align-items: center; border: 1px solid rgba(139,108,255,.18); border-radius: 15px; padding: 10px; background: rgba(139,108,255,.07); }
.award-avatar { width: 39px; height: 39px; border-radius: 12px; background: linear-gradient(145deg, #754cff, #e86fa6); display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.result-awards p { margin: 0; }
.result-awards small, .result-awards strong, .result-awards em { display: block; }
.result-awards small { color: #b9aaff; font-size: 7px; }
.result-awards strong { font-size: 9px; margin: 2px 0; }
.result-awards em { color: var(--muted); font-size: 7px; font-style: normal; }
.result-awards .icon { color: #c4b6ff; }
.result-share { width: calc(100% - 36px) !important; margin: 0 18px 23px; }

.home-event-spot { margin: 5px 13px 4px; padding: 10px; display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; border: 1px solid rgba(200,255,69,.18); border-radius: 15px; background: linear-gradient(145deg, rgba(200,255,69,.08), rgba(139,108,255,.07)); cursor: pointer; }
.event-spot-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--lime); background: rgba(200,255,69,.09); }
.event-spot-icon .icon { width: 19px; }
.home-event-spot small, .home-event-spot strong, .home-event-spot em { display: block; }
.home-event-spot small { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .07em; }
.home-event-spot strong { font-size: 9px; margin: 3px 0; }
.home-event-spot em { color: var(--muted); font-size: 7px; font-style: normal; }
.home-event-spot button { border: 0; background: transparent; color: var(--lime); font-size: 7px; cursor: pointer; }
.game-event-strip, .clan-next-event, .profile-agenda { padding: 7px 13px 2px; }
.game-event-strip .section-title, .clan-next-event .section-title, .profile-agenda .section-title { margin: 0; padding: 4px 4px 0; }
.game-event-strip .section-title h3, .clan-next-event .section-title h3, .profile-agenda .section-title h3 { font-size: 12px; }

/* Experiencia Social 1.2 */
.notification-trigger { position: relative; }
.notification-trigger > span { position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); border: 1px solid var(--bg); }
.bottom-nav button { position: relative; }
.nav-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); top: 11px; right: calc(50% - 11px); box-shadow: 0 0 8px rgba(255,110,145,.55); }
.social-feed-promise { margin: 2px 13px 10px; min-height: 45px; padding: 9px 11px; border: 1px solid rgba(200,255,69,.14); border-radius: 14px; background: rgba(200,255,69,.045); display: grid; grid-template-columns: 23px 1fr auto; gap: 8px; align-items: center; }
.social-feed-promise > .icon { width: 18px; color: var(--lime); }
.social-feed-promise strong, .social-feed-promise small { display: block; }
.social-feed-promise strong { font-size: 9px; }
.social-feed-promise small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.social-feed-promise button { border: 0; background: transparent; color: var(--lime); font-size: 7px; cursor: pointer; }
.social-feed-tabs { padding-left: 18px; }
.quick-composer { width: calc(100% - 26px); min-height: 57px; margin: 11px 13px 2px; border: 1px solid var(--line); border-radius: 16px; padding: 9px 10px; background: linear-gradient(145deg, rgba(18,24,39,.96), rgba(10,14,23,.96)); color: var(--text); display: grid; grid-template-columns: 35px 1fr 29px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.quick-composer strong, .quick-composer small { display: block; }
.quick-composer strong { font-size: 9px; }
.quick-composer small { color: var(--muted); font-size: 6px; margin-top: 3px; line-height: 1.35; }
.quick-composer > i { width: 29px; height: 29px; border-radius: 10px; background: rgba(200,255,69,.08); color: var(--lime); display: grid; place-items: center; font-style: normal; }
.quick-composer > i .icon { width: 15px; }
.followed-strip { display: flex; gap: 12px; padding: 13px 18px 7px; overflow-x: auto; scrollbar-width: none; }
.followed-strip::-webkit-scrollbar { display: none; }
.followed-strip > button { flex: 0 0 52px; border: 0; padding: 0; background: transparent; color: var(--muted); display: grid; justify-items: center; gap: 5px; cursor: pointer; }
.followed-strip > button strong { width: 57px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 7px; font-weight: 650; }
.followed-news > span { width: 45px; height: 45px; border-radius: 15px; background: linear-gradient(145deg, var(--lime), #71cf73); color: #111704; display: grid; place-items: center; box-shadow: 0 0 25px rgba(200,255,69,.12); }
.followed-news .icon { width: 19px; }
.creator-avatar { width: 45px; height: 45px; border-radius: 15px; display: grid; place-items: center; font-size: 9px; font-weight: 900; color: white; border: 1px solid rgba(255,255,255,.13); flex: 0 0 auto; }
.creator-avatar.small { width: 35px; height: 35px; border-radius: 11px; font-size: 8px; }
.creator-avatar.xl { width: 76px; height: 76px; border-radius: 22px; font-size: 17px; }
.creator-avatar.luna, .notification-avatar.luna { background: linear-gradient(145deg, #754cff, #e86fa6); }
.creator-avatar.panda, .notification-avatar.panda { background: linear-gradient(145deg, #ff7b4a, #d73c85); }
.creator-avatar.kael, .notification-avatar.kael { background: linear-gradient(145deg, #127174, #46d9ca); color: #071514; }
.creator-avatar.jane, .notification-avatar.jane { background: linear-gradient(145deg, #7855ff, #4d9aff); }
.creator-avatar.news, .notification-avatar.news { background: linear-gradient(145deg, var(--lime), #48a76b); color: #101700; }
.social-content-filters { padding-top: 9px; padding-bottom: 5px; }
.fresh-posts { width: calc(100% - 26px); min-height: 34px; margin: 5px 13px 1px; border: 1px solid rgba(200,255,69,.16); border-radius: 12px; background: rgba(200,255,69,.055); color: var(--lime); display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 8px; font-weight: 800; cursor: pointer; }
.fresh-posts .icon { width: 13px; }
.home-news-feature { padding: 9px 13px 3px; }
.home-news-feature .section-title { padding: 0 5px; }
.home-news-feature .eyebrow, .explore-social-section .eyebrow { color: var(--lime); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.home-news-feature .section-title h3, .explore-social-section .section-title h3 { margin-top: 3px; }
.social-news-card { width: 100%; min-height: 128px; border: 1px solid var(--line); border-radius: 17px; padding: 10px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 105px 1fr 14px; gap: 11px; align-items: center; text-align: left; cursor: pointer; overflow: hidden; }
.social-news-card.compact { min-height: 84px; grid-template-columns: 72px 1fr 14px; }
.news-visual { align-self: stretch; min-height: 94px; border-radius: 13px; display: grid; place-items: center; position: relative; overflow: hidden; }
.social-news-card.compact .news-visual { min-height: 62px; }
.social-news-card.valorant .news-visual { background: linear-gradient(140deg, rgba(255,64,93,.08), rgba(21,19,52,.5)), url('assets/feed-clutch.webp') center/cover; }
.social-news-card.minecraft .news-visual { background: linear-gradient(140deg, #6fbd68, #3d7247 56%, #50402f); }
.social-news-card.indie .news-visual { background: linear-gradient(140deg, rgba(12,10,32,.15), rgba(25,36,59,.58)), url('assets/feed-backlog.webp') center/cover; }
.social-news-card.elden .news-visual { background: linear-gradient(140deg, rgba(12,17,27,.08), rgba(12,17,27,.48)), url('assets/feed-fantasy.webp') center/cover; }
.news-visual span { font-size: 62px; line-height: 1; font-weight: 1000; color: rgba(255,255,255,.17); transform: skew(-9deg); }
.social-news-card.compact .news-visual span { font-size: 42px; }
.news-source { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.social-news-card h3 { font-size: 11px; line-height: 1.32; margin: 5px 0; }
.social-news-card p { color: var(--muted); font-size: 7px; line-height: 1.45; margin: 0 0 6px; }
.social-news-card small { color: var(--muted-2); font-size: 6px; }
.social-news-card > .icon { width: 13px; color: var(--muted); }
.social-feed { padding: 5px 13px 25px; }
.social-post { margin: 10px 0; border: 1px solid var(--line); border-radius: 18px; padding: 13px; background: linear-gradient(145deg, rgba(19,25,40,.94), rgba(10,14,23,.96)); overflow: hidden; }
.social-post-head { display: flex; gap: 7px; align-items: center; }
.social-author { min-width: 0; flex: 1; border: 0; padding: 0; background: transparent; color: var(--text); display: flex; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.social-author > span:last-child { min-width: 0; }
.social-author strong, .social-author small { display: block; }
.social-author strong { font-size: 10px; }
.social-author small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.inline-follow { border: 0; background: transparent; color: var(--lime); font-size: 7px; font-weight: 800; cursor: pointer; }
.post-more { width: 29px; height: 29px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.post-more .icon { width: 17px; }
.post-menu-panel { margin: 9px 0 4px; border: 1px solid var(--line); border-radius: 12px; background: #0b101b; padding: 4px; display: grid; position: relative; z-index: 2; }
.post-menu-panel button { border: 0; border-radius: 8px; padding: 8px; background: transparent; color: #c0c6d3; display: flex; gap: 7px; align-items: center; text-align: left; font-size: 8px; cursor: pointer; }
.post-menu-panel button:hover { background: var(--surface-2); }
.post-menu-panel button:last-child { color: #ff9ab1; }
.post-menu-panel .icon { width: 14px; }
.post-menu-panel.own-post-menu button { color: #c8ced8; }
.post-menu-panel.own-post-menu button.danger-action { color: #ff8ba6; }
.post-reason { max-width: 100%; margin: 7px 0 -3px 43px; border: 0; padding: 0; background: transparent; color: var(--muted-2); display: flex; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; text-align: left; }
.post-reason .icon { width: 10px; flex: 0 0 auto; color: #bbaaff; }
.social-post-label { display: flex; gap: 5px; align-items: center; margin-top: 11px; }
.content-label, .spoiler-label { border-radius: 6px; padding: 4px 6px; font-size: 6px; font-weight: 900; letter-spacing: .06em; }
.content-label.clip { color: #b8a9ff; background: rgba(139,108,255,.11); }
.content-label.meme { color: #ff9db3; background: rgba(255,110,145,.1); }
.content-label.encuesta { color: var(--cyan); background: rgba(77,232,255,.08); }
.content-label.captura { color: #ffc676; background: rgba(255,183,77,.09); }
.content-label.noticia { color: var(--lime); background: rgba(200,255,69,.08); }
.content-label.publicación { color: #f3f5fa; background: rgba(255,255,255,.07); }
.spoiler-label { color: var(--muted); background: rgba(255,255,255,.045); }
.pinned-label, .archived-label { border-radius: 6px; padding: 4px 6px; display: inline-flex; align-items: center; gap: 3px; font-size: 6px; font-weight: 900; letter-spacing: .05em; }
.pinned-label { color: var(--lime); background: rgba(200,255,69,.075); }
.pinned-label .icon { width: 9px; }
.archived-label { color: #bbaaff; background: rgba(139,108,255,.09); }
.social-post > h3 { font-size: 13px; line-height: 1.35; margin: 9px 0 5px; }
.social-post > p { color: #b5bdcc; font-size: 9px; line-height: 1.5; margin: 0 0 11px; }
.social-media { width: 100%; height: 188px; border-radius: 15px; border: 1px solid rgba(255,255,255,.1); padding: 0; color: white; display: block; position: relative; overflow: hidden; cursor: pointer; text-align: left; }
.social-media { background-size: cover; background-position: center; }
.social-media.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.social-media.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.social-media.elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.social-media.news-card { background-image: url('assets/feed-clutch.webp'); }
.social-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,5,10,.03), rgba(3,5,10,.15) 52%, rgba(3,5,10,.58)); }
.social-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; backdrop-filter: blur(8px); }
.social-play .icon { width: 19px; margin-left: 2px; }
.social-media > em { position: absolute; z-index: 2; right: 9px; bottom: 8px; border-radius: 6px; padding: 4px 5px; color: white; background: rgba(0,0,0,.55); font-size: 6px; font-style: normal; }
.media-hd-label { position: absolute; z-index: 2; left: 9px; top: 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 4px 5px; background: rgba(0,0,0,.38); color: rgba(255,255,255,.86); font-size: 5px; font-weight: 900; letter-spacing: .08em; }
.carousel-count { position: absolute; z-index: 2; right: 9px; top: 9px; border-radius: 7px; padding: 5px 6px; background: rgba(4,6,11,.68); display: flex; align-items: center; gap: 4px; font-size: 6px; font-weight: 800; backdrop-filter: blur(8px); }
.carousel-count .icon { width: 11px; }
.carousel-dots { position: absolute; z-index: 2; left: 50%; bottom: 9px; transform: translateX(-50%); display: flex; gap: 4px; }
.carousel-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.42); }
.carousel-dots i.active { width: 13px; border-radius: 999px; background: white; }
.meme-copy { position: absolute; z-index: 2; inset: 14px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; }
.meme-copy strong { font-size: 14px; text-transform: uppercase; text-shadow: 0 2px 5px #000; }
.meme-copy span { font-size: 16px; font-weight: 900; color: var(--lime); text-transform: uppercase; text-shadow: 0 2px 5px #000; }
.capture-label, .news-media-label { position: absolute; z-index: 2; left: 11px; bottom: 10px; color: rgba(255,255,255,.75); font-size: 6px; font-weight: 850; letter-spacing: .09em; }
.news-media-label { color: var(--lime); }
.spoiler-cover { width: 100%; min-height: 164px; border: 1px solid rgba(139,108,255,.2); border-radius: 15px; background: radial-gradient(circle, rgba(139,108,255,.13), transparent 60%), #0c101a; color: var(--text); display: grid; place-items: center; align-content: center; gap: 5px; cursor: pointer; }
.spoiler-cover > .icon { width: 27px; color: #bbaaff; margin-bottom: 3px; }
.spoiler-cover strong { font-size: 10px; }
.spoiler-cover span { color: var(--muted); font-size: 7px; }
.spoiler-cover em { color: #c5b8ff; font-size: 7px; font-style: normal; margin-top: 5px; }
.social-poll { display: grid; gap: 6px; margin-top: 10px; }
.social-poll button { height: 38px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); padding: 0 10px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; text-align: left; cursor: pointer; }
.social-poll button i { position: absolute; inset: 0 auto 0 0; background: rgba(139,108,255,.15); transition: width .25s ease; }
.social-poll button.selected { border-color: rgba(139,108,255,.32); }
.social-poll button span, .social-poll button strong { position: relative; z-index: 1; font-size: 8px; }
.social-poll > small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.read-news-button { width: 100%; margin-top: 8px; border: 0; border-radius: 10px; padding: 9px; background: rgba(200,255,69,.07); color: var(--lime); display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 7px; font-weight: 800; cursor: pointer; }
.read-news-button .icon { width: 11px; }
.quoted-post { width: 100%; min-height: 63px; margin: 9px 0 3px; border: 1px solid rgba(139,108,255,.17); border-radius: 13px; padding: 8px; background: rgba(139,108,255,.045); color: var(--text); display: grid; grid-template-columns: 34px 1fr 47px; gap: 8px; align-items: center; text-align: left; cursor: pointer; overflow: hidden; }
.quoted-post > span:nth-child(2) { min-width: 0; }
.quoted-post strong, .quoted-post small { display: block; }
.quoted-post strong { font-size: 7px; }
.quoted-post small { color: var(--muted); font-size: 7px; line-height: 1.3; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quoted-post > i { width: 47px; height: 47px; border-radius: 9px; background-size: cover; background-position: center; }
.quoted-post > i.valorant-clip, .preview-media.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.quoted-post > i.backlog-meme, .preview-media.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.quoted-post > i.elden-capture, .preview-media.elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.quoted-post > .icon { width: 12px; color: var(--muted); }
.post-permission { margin-top: 8px; color: var(--muted-2); display: flex; align-items: center; gap: 4px; font-size: 5px; }
.post-permission .icon { width: 10px; }
.social-actions { display: flex; gap: 2px; align-items: center; margin: 10px -5px -5px; padding-top: 7px; border-top: 1px solid var(--line); }
.social-actions button { border: 0; background: transparent; color: var(--muted); display: flex; gap: 5px; align-items: center; padding: 7px; font-size: 7px; cursor: pointer; }
.social-actions button:nth-last-child(2) { margin-left: auto; }
.social-actions .icon { width: 16px; }
.social-actions button.active.like { color: var(--danger); }
.social-actions button.active.repost { color: var(--cyan); }
.social-actions button.active.saved { color: var(--lime); }
.social-feed.compact .social-post { padding: 10px; }
.social-feed.compact .social-media { height: 135px; }
.social-empty { margin: 12px 0; padding: 32px 18px; border: 1px dashed var(--line-strong); border-radius: 17px; text-align: center; color: var(--muted); }
.social-empty > .icon { width: 30px; color: var(--lime); }
.social-empty h3 { color: var(--text); font-size: 12px; margin: 9px 0 4px; }
.social-empty p { font-size: 8px; }
.social-empty button { border: 0; background: transparent; color: var(--lime); font-size: 8px; cursor: pointer; }
.relevance-bar { margin: 6px 13px 3px; min-height: 49px; border: 1px solid rgba(139,108,255,.16); border-radius: 14px; padding: 8px 10px; background: linear-gradient(145deg, rgba(139,108,255,.075), rgba(77,232,255,.025)); display: grid; grid-template-columns: 22px 1fr auto; gap: 7px; align-items: center; }
.relevance-bar > .icon { width: 17px; color: #bbaaff; }
.relevance-bar strong, .relevance-bar small { display: block; }
.relevance-bar strong { font-size: 8px; }
.relevance-bar small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.relevance-bar button { border: 0; background: transparent; color: var(--lime); font-size: 7px; cursor: pointer; }
.publish-undo { margin: 3px 13px 8px; min-height: 55px; border: 1px solid rgba(200,255,69,.18); border-radius: 14px; padding: 8px 9px; background: linear-gradient(145deg, rgba(200,255,69,.08), rgba(77,232,255,.025)); display: grid; grid-template-columns: 23px 1fr auto 22px; gap: 7px; align-items: center; }
.publish-undo > .icon { width: 17px; color: var(--lime); }
.publish-undo strong, .publish-undo small { display: block; }
.publish-undo strong { font-size: 8px; }
.publish-undo small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.publish-undo button { border: 0; background: transparent; color: var(--lime); font-size: 7px; cursor: pointer; }
.publish-undo button:last-child { color: var(--muted); font-size: 14px; }
.clip-rail { padding: 11px 0 5px; }
.clip-rail .section-title { padding: 0 18px; }
.clip-rail .eyebrow { color: #bbaaff; font-size: 6px; font-weight: 900; letter-spacing: .09em; }
.clip-rail > div:last-child { display: flex; gap: 8px; padding: 0 13px 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.clip-rail > div:last-child::-webkit-scrollbar { display: none; }
.clip-teaser { flex: 0 0 137px; height: 178px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; padding: 9px; color: white; background-size: cover; background-position: center; position: relative; overflow: hidden; scroll-snap-align: start; cursor: pointer; text-align: left; }
.clip-teaser::after, .media-grid-item::after, .media-upload-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,5,9,.03), rgba(3,5,9,.14) 45%, rgba(3,5,9,.88)); }
.clip-teaser-play { position: absolute; z-index: 1; left: 10px; top: 10px; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; background: rgba(3,5,9,.45); display: grid; place-items: center; backdrop-filter: blur(7px); }
.clip-teaser-play .icon { width: 12px; }
.clip-teaser-time { position: absolute; z-index: 1; right: 8px; top: 9px; border-radius: 6px; padding: 4px 5px; background: rgba(3,5,9,.58); font-size: 5px; }
.clip-teaser p { position: absolute; z-index: 1; left: 10px; right: 9px; bottom: 9px; margin: 0; }
.clip-teaser strong, .clip-teaser small { display: block; }
.clip-teaser strong { font-size: 8px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip-teaser small { color: rgba(255,255,255,.65); font-size: 5px; margin-top: 4px; }
.clip-teaser.valorant-clip, .media-grid-item.valorant-clip, .media-upload-preview.valorant-clip, .immersive-media.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.clip-teaser.backlog-meme, .media-grid-item.backlog-meme, .media-upload-preview.backlog-meme, .immersive-media.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.clip-teaser.elden-capture, .media-grid-item.elden-capture, .media-upload-preview.elden-capture, .immersive-media.elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.media-grid-item.news-card, .media-upload-preview.news-card, .immersive-media.news-card { background-image: url('assets/feed-clutch.webp'); }

.feed-skeleton { display: grid; gap: 10px; padding: 5px 0 15px; }
.feed-skeleton > div { min-height: 248px; border: 1px solid var(--line); border-radius: 18px; padding: 13px; background: var(--surface); display: grid; grid-template-columns: 35px 1fr; grid-template-rows: 16px 11px 1fr; gap: 8px 10px; overflow: hidden; position: relative; }
.feed-skeleton > div::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent); animation: skeleton-sweep 1.1s infinite; }
.feed-skeleton i { width: 35px; height: 35px; grid-row: span 2; border-radius: 11px; background: var(--surface-3); }
.feed-skeleton span { height: 9px; border-radius: 999px; background: var(--surface-3); }
.feed-skeleton span:nth-of-type(2) { width: 56%; }
.feed-skeleton b { grid-column: 1 / -1; border-radius: 14px; background: linear-gradient(145deg, #151b2b, #101522); }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }

.social-search { margin-bottom: 8px; }
.social-search button { flex: 0 0 auto; border: 0; background: transparent; color: var(--lime); font-size: 7px; font-weight: 800; cursor: pointer; }
.recent-searches { margin: -1px 13px 10px; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.recent-searches::-webkit-scrollbar { display: none; }
.recent-searches > span { flex: 0 0 auto; color: var(--muted-2); font-size: 5px; font-weight: 900; letter-spacing: .09em; }
.recent-searches button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 7px; background: var(--surface); color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; }
.recent-searches button .icon { width: 9px; }
.recent-searches button:last-child { border-color: transparent; background: transparent; color: var(--lime); }
.explore-search-results { padding: 4px 13px 28px; }
.search-results-head { min-height: 112px; padding: 16px; border: 1px solid rgba(139,108,255,.18); border-radius: 18px; background: linear-gradient(145deg, rgba(139,108,255,.12), rgba(12,16,27,.96)); }
.search-results-head .eyebrow { color: #bcaeff; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.search-results-head h2 { font-size: 17px; line-height: 1.12; margin: 6px 0; letter-spacing: -.025em; }
.search-results-head p { color: var(--muted); font-size: 8px; line-height: 1.45; margin: 0; }
.search-result-section { padding-top: 17px; }
.search-result-section > h3 { font-size: 11px; margin: 0 4px 8px; }
.search-game-results, .search-post-results { display: grid; gap: 7px; }
.search-topic-results { display: grid; gap: 7px; }
.search-topic-results > button { width: 100%; min-height: 61px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; background: linear-gradient(145deg, rgba(139,108,255,.08), var(--surface)); color: var(--text); display: grid; grid-template-columns: 41px 1fr 13px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.search-topic-results > button > span { width: 41px; height: 41px; border-radius: 12px; background: rgba(139,108,255,.13); color: #bbaaff; display: grid; place-items: center; }
.search-topic-results > button.backlog > span { color: #ff9db3; background: rgba(255,110,145,.1); }
.search-topic-results > button.fantasy > span { color: #ffc676; background: rgba(255,183,77,.09); }
.search-topic-results > button > span .icon { width: 18px; }
.search-topic-results strong, .search-topic-results small { display: block; }
.search-topic-results strong { font-size: 9px; }
.search-topic-results small { color: var(--muted); font-size: 6px; margin-top: 3px; }
.search-topic-results > button > .icon { width: 12px; color: var(--muted-2); }
.search-game-results > button, .search-post-results > button { width: 100%; min-height: 61px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 41px 1fr 13px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.search-game-results > button > span { width: 41px; height: 41px; border-radius: 12px; background: var(--game-bg); display: grid; place-items: center; font-size: 17px; font-weight: 950; }
.search-game-results strong, .search-game-results small, .search-post-results strong, .search-post-results small, .search-post-results em { display: block; }
.search-game-results strong { font-size: 9px; }
.search-game-results small { color: var(--muted); font-size: 6px; margin-top: 3px; }
.search-game-results > button > .icon, .search-post-results > button > .icon { width: 12px; color: var(--muted-2); }
.search-post-results > button { grid-template-columns: 35px 1fr 13px; }
.search-post-results > button > div { min-width: 0; }
.search-post-results small { color: var(--lime); font-size: 5px; font-weight: 850; letter-spacing: .05em; }
.search-post-results strong { font-size: 8px; line-height: 1.35; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-post-results em { color: var(--muted); font-size: 6px; font-style: normal; }
.search-result-section .social-news-card { margin-bottom: 7px; }
.search-empty { min-height: 245px; display: grid; justify-items: center; align-content: center; text-align: center; color: var(--muted); padding: 24px; }
.search-empty > .icon { width: 31px; color: #bcaeff; }
.search-empty strong { color: var(--text); font-size: 12px; margin-top: 10px; }
.search-empty span { font-size: 7px; line-height: 1.45; margin-top: 4px; }
.search-empty button { margin-top: 12px; border: 0; background: transparent; color: var(--lime); font-size: 8px; cursor: pointer; }
.explore-intro { margin: 0 13px; padding: 18px; min-height: 150px; border: 1px solid rgba(139,108,255,.18); border-radius: 20px; background: radial-gradient(circle at 80% 20%, rgba(77,232,255,.14), transparent 28%), linear-gradient(145deg, rgba(139,108,255,.15), rgba(10,14,23,.95)); position: relative; overflow: hidden; }
.explore-intro::after { content: "DISCOVER"; position: absolute; right: -45px; top: 29px; color: rgba(255,255,255,.035); font-size: 50px; font-weight: 1000; transform: rotate(-9deg); }
.explore-intro .eyebrow { color: #bcaeff; font-size: 7px; font-weight: 850; letter-spacing: .11em; }
.explore-intro h1 { font-size: 23px; line-height: 1.02; margin: 8px 0; letter-spacing: -.045em; }
.explore-intro p { color: var(--muted); font-size: 8px; line-height: 1.5; max-width: 260px; margin: 0; }
.explore-social-section { padding: 17px 13px 1px; }
.explore-social-section .section-title { padding: 0 5px; }
.explore-games { padding-left: 13px; padding-right: 13px; }
.trend-list { gap: 6px; }
button.trend { width: 100%; color: var(--text); text-align: left; cursor: pointer; }
.creator-list { display: grid; gap: 7px; }
.social-creator-card { min-height: 70px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); padding: 9px; display: grid; grid-template-columns: 44px 1fr auto; gap: 9px; align-items: center; cursor: pointer; }
.social-creator-card .creator-avatar { width: 44px; height: 44px; }
.social-creator-card > div:nth-child(2) { min-width: 0; }
.creator-badge { color: var(--lime); font-size: 5px; letter-spacing: .08em; font-weight: 900; }
.social-creator-card strong, .social-creator-card small, .social-creator-card p { display: block; }
.social-creator-card strong { font-size: 9px; }
.social-creator-card small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.social-creator-card p { color: var(--muted-2); font-size: 6px; margin: 4px 0 0; }
.follow-social { border: 1px solid rgba(200,255,69,.23); border-radius: 9px; background: var(--lime); color: #101500; padding: 7px 9px; font-size: 7px; font-weight: 850; cursor: pointer; }
.follow-social.following { color: #c5ccd8; background: var(--surface-2); border-color: var(--line); }
.community-secondary { margin-bottom: 20px; }
.community-secondary > p { color: var(--muted); font-size: 8px; line-height: 1.5; padding: 0 5px; }
.community-gateways { display: grid; gap: 7px; }
.community-gateways > button { min-height: 64px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); color: var(--text); padding: 9px 10px; display: grid; grid-template-columns: 38px 1fr 13px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.gateway-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; }
.gateway-icon .icon { width: 18px; }
.community-gateways strong, .community-gateways small { display: block; }
.community-gateways strong { font-size: 9px; }
.community-gateways small { color: var(--muted); font-size: 7px; margin-top: 3px; }
.community-gateways > button > .icon { width: 12px; color: var(--muted-2); }
.game-social-news { padding: 7px 13px 0; }
.game-social-news .section-title { padding: 0 5px; }
.game-social-feed { padding-top: 3px; }
.game-community-link { width: calc(100% - 26px); margin: 0 13px 22px; min-height: 44px; border: 1px dashed var(--line-strong); border-radius: 13px; background: transparent; color: var(--muted); padding: 10px; display: flex; align-items: center; gap: 7px; font-size: 8px; cursor: pointer; }
.game-community-link > span { margin-left: auto; color: var(--muted-2); font-size: 6px; text-transform: uppercase; }
.game-community-link .icon { width: 14px; }

.social-create-wrap { padding-top: 2px; }
.composer-management { min-height: 37px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.composer-management > span { color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: 6px; }
.composer-management > span .icon { width: 11px; color: var(--lime); }
.composer-management > button { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: var(--surface); color: #c6ccd7; display: flex; align-items: center; gap: 5px; font-size: 6px; cursor: pointer; }
.composer-management > button .icon { width: 11px; color: #bbaaff; }
.composer-management > button em { min-width: 15px; height: 15px; border-radius: 999px; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; font-size: 5px; font-style: normal; }
.create-identity { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.create-identity .avatar { width: 38px; height: 38px; }
.create-identity strong, .create-identity small { display: block; }
.create-identity strong { font-size: 9px; }
.create-identity small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.create-identity button { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: #c3cad7; padding: 7px 8px; display: flex; align-items: center; gap: 3px; font-size: 7px; cursor: pointer; }
.create-identity button .icon { width: 11px; }
.social-copy-field { min-height: 115px !important; font-size: 13px !important; }
.composer-suggestions { max-height: 0; opacity: 0; overflow: hidden; transition: .16s ease; }
.composer-suggestions.show { max-height: 190px; opacity: 1; margin-top: 6px; border: 1px solid rgba(139,108,255,.18); border-radius: 13px; padding: 4px; background: #0d1220; }
.composer-suggestions button { width: 100%; min-height: 45px; border: 0; border-radius: 9px; padding: 6px; background: transparent; color: var(--text); display: grid; grid-template-columns: 32px 1fr 12px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.composer-suggestions button:hover { background: var(--surface-2); }
.composer-suggestions strong, .composer-suggestions small { display: block; }
.composer-suggestions strong { font-size: 7px; }
.composer-suggestions small { color: var(--muted); font-size: 5px; margin-top: 2px; }
.composer-suggestions button > .icon { width: 11px; color: var(--lime); }
.composer-quote { margin-bottom: 11px; border: 1px solid rgba(139,108,255,.17); border-radius: 13px; padding: 8px; background: rgba(139,108,255,.05); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.composer-quote > div { min-width: 0; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; }
.composer-quote p { min-width: 0; margin: 0; }
.composer-quote strong, .composer-quote small { display: block; }
.composer-quote strong { font-size: 7px; }
.composer-quote small { color: var(--muted); font-size: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.composer-quote > button { width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.composer-meta { min-height: 25px; padding: 5px 2px 0; display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); }
.composer-meta span { display: flex; align-items: center; gap: 4px; font-size: 6px; }
.composer-meta span .icon { width: 11px; color: var(--lime); }
.composer-meta strong { font-size: 6px; font-weight: 650; }
.social-upload { height: 112px; }
.social-upload small { color: var(--muted-2); font-size: 6px; }
.media-upload-zone { width: 100%; height: 122px; padding: 12px; grid-template-columns: 1fr auto; text-align: center; }
.media-upload-zone > em { align-self: end; border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; color: var(--muted-2); font-size: 5px; font-style: normal; }
.media-upload-processing { min-height: 83px; border: 1px solid rgba(139,108,255,.2); border-radius: 14px; padding: 11px; background: rgba(139,108,255,.055); display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; }
.media-upload-processing > span { width: 34px; height: 34px; border-radius: 10px; background: rgba(139,108,255,.13); color: #bbaaff; display: grid; place-items: center; }
.media-upload-processing > span .icon { width: 17px; animation: upload-pulse .8s ease infinite alternate; }
@keyframes upload-pulse { to { transform: scale(1.18) rotate(8deg); } }
.media-upload-processing strong, .media-upload-processing small { display: block; }
.media-upload-processing strong { font-size: 8px; }
.media-upload-processing small { color: var(--muted); font-size: 6px; line-height: 1.35; margin-top: 3px; }
.media-upload-processing i { display: block; height: 4px; margin-top: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.media-upload-processing i b { display: block; height: 100%; width: 68%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); animation: upload-progress .72s ease both; }
@keyframes upload-progress { from { width: 8%; } to { width: 92%; } }
.media-upload-processing > button { border: 0; background: transparent; color: var(--muted); font-size: 6px; cursor: pointer; }
.media-upload-editor { display: grid; gap: 7px; }
.media-upload-preview { height: 170px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.media-upload-preview > span, .media-upload-preview > div { position: relative; z-index: 1; }
.media-upload-preview > span { align-self: flex-start; border-radius: 8px; padding: 5px 7px; background: rgba(5,7,13,.68); display: flex; align-items: center; gap: 5px; font-size: 6px; font-weight: 800; }
.media-upload-preview > span .icon { width: 11px; }
.media-upload-preview > div { display: flex; justify-content: flex-end; gap: 6px; }
.media-upload-preview button { border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 6px 8px; background: rgba(5,7,13,.7); color: white; font-size: 6px; cursor: pointer; backdrop-filter: blur(7px); }
.media-upload-tools { min-height: 38px; border: 1px solid var(--line); border-radius: 11px; padding: 5px; background: var(--surface); display: flex; align-items: center; gap: 3px; }
.media-upload-tools button { border: 0; border-radius: 7px; padding: 6px; background: transparent; color: #c6ccd7; display: flex; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; }
.media-upload-tools button:disabled { opacity: .35; cursor: default; }
.media-upload-tools button .icon { width: 11px; color: #bbaaff; }
.media-upload-tools > span { margin-left: auto; color: var(--muted-2); font-size: 6px; padding-right: 5px; }
.media-upload-thumbs { display: flex; gap: 6px; }
.media-upload-thumbs button { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0; background-size: cover; background-position: center; position: relative; overflow: hidden; cursor: pointer; }
.media-upload-thumbs button.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.media-upload-thumbs button.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.media-upload-thumbs button.elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.media-upload-thumbs button.active { border: 2px solid var(--lime); }
.media-upload-thumbs span { position: absolute; left: 4px; bottom: 3px; width: 13px; height: 13px; border-radius: 4px; background: rgba(0,0,0,.68); display: grid; place-items: center; color: white; font-size: 5px; }
.media-upload-ready { min-height: 46px; border: 1px solid rgba(200,255,69,.14); border-radius: 12px; padding: 8px 9px; background: rgba(200,255,69,.04); display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; align-items: center; }
.media-upload-ready > .icon { width: 15px; color: var(--lime); }
.media-upload-ready strong, .media-upload-ready small { display: block; }
.media-upload-ready strong { font-size: 7px; }
.media-upload-ready small { color: var(--muted); font-size: 5px; margin-top: 2px; }
.media-upload-ready em { color: var(--lime); font-size: 6px; font-style: normal; }
.media-publish-tags { display: flex; gap: 5px; margin: 7px 0 0; flex-wrap: wrap; }
.media-publish-tags span, .media-publish-tags button { border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; background: var(--surface); color: #c4cad5; font-size: 6px; }
.media-publish-tags span:first-child { color: #bbaaff; border-color: rgba(139,108,255,.17); }
.media-publish-tags button { color: var(--lime); cursor: pointer; }
.composer-context, .composer-permissions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.composer-context > button, .composer-permissions > button { min-width: 0; min-height: 53px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 19px 1fr 11px; gap: 6px; align-items: center; text-align: left; cursor: pointer; }
.composer-context > button > .icon:first-child, .composer-permissions > button > .icon:first-child { width: 15px; color: #bbaaff; }
.composer-context > button:nth-child(2) { grid-template-columns: 19px 1fr 11px; color: #bbaaff; font-weight: 900; }
.composer-context > button:nth-child(2) > span { color: var(--text); font-weight: 400; }
.composer-context button > .icon:last-child, .composer-permissions button > .icon:last-child { width: 10px; color: var(--muted-2); }
.composer-context strong, .composer-context small, .composer-permissions strong, .composer-permissions small { display: block; }
.composer-context strong, .composer-permissions strong { font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-context small, .composer-permissions small { color: var(--muted); font-size: 5px; margin-top: 2px; }
.composer-permissions { margin-top: 9px; }
.composer-permissions > button > .icon:first-child { color: var(--cyan); }
.alt-text-toggle { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 9px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 20px 1fr 12px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.alt-text-toggle.complete { border-color: rgba(200,255,69,.16); background: rgba(200,255,69,.035); }
.alt-text-toggle > .icon:first-child { width: 15px; color: #bbaaff; }
.alt-text-toggle > .icon:last-child { width: 11px; color: var(--lime); }
.alt-text-toggle strong, .alt-text-toggle small { display: block; }
.alt-text-toggle strong { font-size: 7px; }
.alt-text-toggle small { color: var(--muted); font-size: 5px; line-height: 1.35; margin-top: 2px; }
.alt-text-field { border: 1px solid rgba(139,108,255,.16); border-radius: 12px; padding: 8px; background: rgba(139,108,255,.035); position: relative; }
.alt-text-field > span { display: block; color: #bbaaff; font-size: 5px; font-weight: 900; letter-spacing: .08em; margin-bottom: 5px; }
.alt-text-field textarea { width: 100%; min-height: 65px; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 7px; line-height: 1.45; }
.alt-text-field > small { position: absolute; right: 8px; bottom: 6px; color: var(--muted-2); font-size: 5px; }
.cancel-edit { width: 100%; margin: 9px 0 3px; border: 0; background: transparent; color: var(--muted); font-size: 7px; cursor: pointer; }
.upload-preview { height: 148px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; padding: 10px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.upload-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.05), rgba(5,7,13,.62)); }
.upload-preview.clutch { background-image: url('assets/feed-clutch.webp'); }
.upload-preview.backlog { background-image: url('assets/feed-backlog.webp'); }
.upload-preview.fantasy { background-image: url('assets/feed-fantasy.webp'); }
.upload-preview > span, .upload-preview > div { position: relative; z-index: 1; }
.upload-preview > span { align-self: flex-start; border-radius: 8px; padding: 5px 7px; background: rgba(5,7,13,.68); color: white; display: flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 800; backdrop-filter: blur(8px); }
.upload-preview > span .icon { width: 13px; }
.upload-preview > div { display: flex; justify-content: flex-end; gap: 6px; }
.upload-preview button { border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 8px; background: rgba(5,7,13,.72); color: white; font-size: 7px; cursor: pointer; backdrop-filter: blur(8px); }

.hero-game.valorant { background: linear-gradient(135deg, rgba(10,11,19,.08), rgba(7,9,14,.76)), url('assets/feed-clutch.webp') center/cover; }
.hero-game.minecraft { background: linear-gradient(135deg, rgba(8,11,8,.1), rgba(7,12,8,.68)), url('assets/feed-backlog.webp') center/cover; }
.hero-game.elden-ring { background: linear-gradient(135deg, rgba(8,11,14,.08), rgba(6,9,13,.72)), url('assets/feed-fantasy.webp') center/cover; }
.hero-game.generic { background: linear-gradient(135deg, rgba(8,11,17,.16), rgba(6,9,14,.64)), var(--game-bg); }

.screen { animation: screen-enter .22s ease both; }
@keyframes screen-enter { from { opacity: .72; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.poll-builder { display: grid; gap: 7px; margin-top: 8px; }
.poll-builder label { min-height: 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 0 10px; display: flex; align-items: center; gap: 8px; }
.poll-builder label span { width: 20px; height: 20px; border-radius: 7px; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; font-size: 7px; }
.poll-builder input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 9px; }
.poll-builder > button { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 9px; background: transparent; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 7px; cursor: pointer; }
.poll-builder > button .icon { width: 12px; }
.spoiler-compose { width: 100%; min-height: 54px; margin-top: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); padding: 9px 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.spoiler-compose > span:first-child { display: flex; align-items: center; gap: 9px; }
.spoiler-compose > span:first-child > .icon { width: 17px; color: var(--muted); }
.spoiler-compose i { font-style: normal; text-align: left; }
.spoiler-compose strong, .spoiler-compose small { display: block; }
.spoiler-compose strong { font-size: 8px; }
.spoiler-compose small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.spoiler-compose.active { border-color: rgba(139,108,255,.23); background: rgba(139,108,255,.05); }
.spoiler-compose.active > span:first-child > .icon { color: #bcaeff; }
.clean-publish-note { margin-top: 11px; padding: 9px; border-radius: 11px; background: rgba(200,255,69,.04); color: var(--muted); display: flex; align-items: flex-start; gap: 6px; font-size: 6px; line-height: 1.5; }
.clean-publish-note .icon { width: 13px; flex: 0 0 auto; color: var(--lime); }

.news-clean-header { margin: 2px 13px 11px; padding: 12px; border: 1px solid rgba(200,255,69,.14); border-radius: 15px; background: rgba(200,255,69,.04); display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; }
.news-clean-header > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--lime); background: rgba(200,255,69,.08); }
.news-clean-header small, .news-clean-header strong, .news-clean-header p { display: block; }
.news-clean-header small { color: var(--lime); font-size: 6px; letter-spacing: .08em; }
.news-clean-header strong { font-size: 9px; margin: 3px 0; }
.news-clean-header p { color: var(--muted); font-size: 7px; margin: 0; }
.news-topic-row { display: flex; gap: 6px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; }
.news-topic-row button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); padding: 7px 9px; display: flex; align-items: center; gap: 4px; font-size: 7px; cursor: pointer; }
.news-topic-row button.active { color: var(--lime); border-color: rgba(200,255,69,.2); background: rgba(200,255,69,.05); }
.news-topic-row .icon { width: 10px; }
.news-feature-detail { margin: 0 13px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); }
.news-detail-art { height: 175px; display: grid; place-items: center; position: relative; overflow: hidden; }
.news-feature-detail.valorant .news-detail-art { background: linear-gradient(145deg, rgba(5,7,13,.03), rgba(5,7,13,.65)), linear-gradient(125deg, #ff405d, #762255 55%, #1c285f); }
.news-feature-detail.minecraft .news-detail-art { background: linear-gradient(140deg, #6fbd68, #3d7247 56%, #50402f); }
.news-feature-detail.indie .news-detail-art { background: linear-gradient(140deg, #8c68ff, #3b6f9c 55%, #19243b); }
.news-feature-detail.elden .news-detail-art { background: linear-gradient(140deg, #c09a47, #51452e 56%, #171c25); }
.news-detail-art > span { font-size: 155px; font-weight: 1000; color: rgba(255,255,255,.11); transform: skew(-10deg); }
.news-detail-art em { position: absolute; left: 12px; bottom: 10px; color: var(--lime); font-size: 6px; letter-spacing: .1em; font-style: normal; font-weight: 900; }
.news-detail-copy { padding: 14px; }
.news-detail-copy .eyebrow { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.news-detail-copy h1 { font-size: 19px; line-height: 1.08; margin: 6px 0 8px; letter-spacing: -.035em; }
.news-detail-copy p { color: #b7bfcd; font-size: 8px; line-height: 1.55; margin: 0; }
.news-detail-copy > div { display: flex; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 6px; }
.news-detail-copy > div span { display: flex; align-items: center; gap: 4px; }
.news-detail-copy > div .icon { width: 11px; }
.news-summary-points { margin: 11px 13px 0; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--surface); }
.news-summary-points h3 { font-size: 11px; margin: 0 0 6px; }
.news-summary-points > div { display: grid; grid-template-columns: 25px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.news-summary-points > div > span { color: var(--lime); font-size: 7px; font-weight: 900; }
.news-summary-points p { margin: 0; }
.news-summary-points strong, .news-summary-points small { display: block; }
.news-summary-points strong { font-size: 8px; }
.news-summary-points small { color: var(--muted); font-size: 7px; line-height: 1.4; margin-top: 3px; }
.news-summary-points > button { width: 100%; border: 0; padding: 10px 0 0; background: transparent; color: var(--lime); display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 7px; cursor: pointer; }
.news-summary-points > button .icon { width: 11px; }
.more-news { padding-bottom: 23px; }
.news-list { display: grid; gap: 7px; }

.post-detail-wrap { padding: 0 13px; }
.post-detail-wrap .social-post { margin-top: 0; }
.conversation-head { display: flex; justify-content: space-between; align-items: end; padding: 12px 18px 8px; }
.conversation-head .eyebrow { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .09em; }
.conversation-head h3 { font-size: 13px; margin: 3px 0 0; }
.conversation-head button { border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 3px; font-size: 6px; cursor: pointer; }
.conversation-head .icon { width: 10px; }
.conversation-safety { margin: 0 13px 8px; padding: 9px; border: 1px solid rgba(200,255,69,.12); border-radius: 12px; background: rgba(200,255,69,.035); display: grid; grid-template-columns: 19px 1fr; gap: 7px; align-items: center; }
.conversation-safety > .icon { width: 16px; color: var(--lime); }
.conversation-safety strong, .conversation-safety small { display: block; }
.conversation-safety strong { font-size: 7px; }
.conversation-safety small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.comment-list { padding: 0 13px 8px; }
.comment-card { padding: 11px 4px; border-bottom: 1px solid var(--line); }
.comment-card.reply { margin-left: 31px; }
.comment-line { display: grid; grid-template-columns: 35px 1fr 25px; gap: 8px; align-items: center; }
.comment-line strong, .comment-line small { display: block; }
.comment-line strong { font-size: 8px; }
.comment-line small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.comment-line button { width: 25px; height: 25px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.comment-line button .icon { width: 13px; }
.comment-card > p { color: #b8c0cf; font-size: 8px; line-height: 1.5; margin: 8px 0 7px 43px; }
.comment-card > div:last-child { display: flex; gap: 10px; margin-left: 43px; }
.comment-card > div:last-child button { border: 0; background: transparent; color: var(--muted); padding: 0; display: flex; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; }
.comment-card > div:last-child .icon { width: 11px; }
.comment-composer { position: sticky; bottom: -28px; z-index: 6; margin: 5px 13px 18px; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: rgba(12,16,27,.96); backdrop-filter: blur(14px); display: grid; grid-template-columns: 32px 1fr 32px; gap: 7px; align-items: center; }
.comment-composer .avatar { width: 32px; height: 32px; border-radius: 10px; }
.comment-composer input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 8px; }
.comment-composer input::placeholder { color: var(--muted); }
.comment-composer button { border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 7px; cursor: pointer; }
.comment-composer button:last-child { width: 32px; height: 32px; border-radius: 10px; background: var(--lime); color: #101500; display: grid; place-items: center; }
.comment-composer .icon { width: 14px; }
.comment-empty { min-height: 125px; margin: 2px 0 8px; border: 1px dashed var(--line-strong); border-radius: 15px; padding: 18px; color: var(--muted); display: grid; justify-items: center; align-content: center; text-align: center; }
.comment-empty > .icon { width: 24px; color: #bcaeff; }
.comment-empty strong { color: var(--text); font-size: 10px; margin-top: 7px; }
.comment-empty span { font-size: 7px; line-height: 1.4; margin-top: 3px; }

.public-profile-cover { height: 145px; margin: 0 13px; border-radius: 19px; display: grid; place-items: center; position: relative; overflow: hidden; }
.public-profile-cover.panda { background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.14), transparent 5%), linear-gradient(135deg, #f06b48, #9b356f 55%, #2b214c); }
.public-profile-cover.luna { background: linear-gradient(135deg, #6f4cff, #aa4b8d 55%, #173c5c); }
.public-profile-cover.kael { background: linear-gradient(135deg, #1b7777, #284e62 55%, #1d2039); }
.public-profile-cover.jane { background: linear-gradient(135deg, #7758f6, #3e6fa2 55%, #222744); }
.public-profile-cover.news { background: linear-gradient(135deg, #b6ed3f, #438961 55%, #172c3c); }
.public-profile-cover > span { font-size: 108px; font-weight: 1000; color: rgba(255,255,255,.1); transform: rotate(-8deg); }
.public-profile-cover > em { position: absolute; left: 13px; top: 12px; color: white; background: rgba(5,7,13,.45); border-radius: 999px; padding: 5px 7px; font-size: 6px; font-style: normal; letter-spacing: .08em; }
.public-profile-head { margin: -37px 20px 0; position: relative; display: flex; align-items: end; gap: 7px; }
.public-profile-head .creator-avatar { border: 4px solid var(--bg); }
.public-profile-head .follow-social { margin-left: auto; margin-bottom: 4px; }
.follow-social.large { padding: 9px 12px; }
.profile-more { width: 34px; height: 34px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.profile-more .icon { width: 16px; }
.public-profile-copy { padding: 8px 19px 4px; }
.public-profile-copy h1 { font-size: 18px; margin: 0 0 1px; }
.public-profile-copy > span { color: var(--muted); font-size: 7px; }
.public-profile-copy p { color: #bac2d0; font-size: 8px; line-height: 1.5; margin: 8px 0; }
.public-profile-copy > div { display: flex; gap: 5px; }
.public-profile-copy i { border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; background: var(--surface); color: #c5ccd8; font-size: 6px; font-style: normal; }
.public-profile-stats { margin: 9px 13px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.public-profile-stats div { padding: 9px 3px; text-align: center; background: var(--surface); border-right: 1px solid var(--line); }
.public-profile-stats div:last-child { border: 0; }
.public-profile-stats strong, .public-profile-stats span { display: block; }
.public-profile-stats strong { font-size: 11px; }
.public-profile-stats span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.clean-profile-note { margin: 0 18px 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 6px; }
.clean-profile-note .icon { width: 12px; color: var(--lime); }
.public-profile-tabs { margin-top: 5px; }
.creator-feed { padding-top: 4px; }

/* Clips y Multimedia 1.0 */
.profile-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 118px; gap: 5px; padding: 10px 13px 24px; }
.media-grid-item { min-width: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 8px; color: white; background-size: cover; background-position: center; position: relative; overflow: hidden; text-align: left; cursor: pointer; }
.media-grid-item:first-child { grid-column: span 2; grid-row: span 2; }
.media-grid-item > span, .media-grid-item > strong { position: relative; z-index: 1; }
.media-grid-item > span { align-self: flex-start; border-radius: 7px; padding: 4px 5px; background: rgba(3,5,9,.58); display: inline-flex; align-items: center; gap: 4px; font-size: 5px; }
.media-grid-item > span .icon { width: 10px; }
.media-grid-item > strong { position: absolute; left: 8px; right: 7px; bottom: 8px; font-size: 7px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-grid-item:first-child > strong { font-size: 10px; }
.media-viewer-screen { background: #02040a; animation: none; }
.immersive-media { height: 100%; background-size: cover; background-position: center; position: relative; overflow: hidden; isolation: isolate; }
.immersive-media::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(2,4,8,.56), transparent 20%, transparent 47%, rgba(2,4,8,.5) 61%, rgba(2,4,8,.97) 91%); }
.immersive-media::after { content: ""; position: absolute; z-index: -2; inset: 0; background: inherit; background-size: cover; background-position: center; filter: saturate(1.08); transform: scale(1.01); }
.media-viewer-top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; min-height: 58px; padding: 13px 14px 8px; display: grid; grid-template-columns: 34px 1fr 34px; gap: 9px; align-items: center; }
.media-viewer-top > button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(3,5,9,.43); color: white; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(9px); }
.media-viewer-top > button .icon { width: 16px; }
.media-viewer-top > span { text-align: center; }
.media-viewer-top strong, .media-viewer-top small { display: block; }
.media-viewer-top strong { font-size: 7px; letter-spacing: .08em; }
.media-viewer-top small { color: rgba(255,255,255,.6); font-size: 5px; margin-top: 2px; }
.media-center-play { position: absolute; z-index: 2; left: 50%; top: 43%; transform: translate(-50%,-50%); width: 57px; height: 57px; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; background: rgba(3,5,9,.42); color: white; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(9px); transition: .18s ease; }
.media-center-play.playing { opacity: .14; }
.media-center-play.playing:hover { opacity: 1; }
.media-center-play .icon { width: 22px; }
.media-side-actions { position: absolute; z-index: 4; right: 11px; bottom: 169px; display: grid; gap: 10px; }
.media-side-actions button { width: 47px; border: 0; padding: 0; background: transparent; color: white; display: grid; justify-items: center; gap: 3px; font-size: 5px; cursor: pointer; text-shadow: 0 2px 8px #000; }
.media-side-actions button .icon { width: 24px; height: 24px; padding: 3px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.media-side-actions button.active.like { color: var(--danger); }
.media-side-actions button.active.saved { color: var(--lime); }
.media-viewer-copy { position: absolute; z-index: 3; left: 14px; right: 68px; bottom: 72px; }
.media-author { max-width: 100%; border: 0; padding: 0; background: transparent; color: white; display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.media-author strong, .media-author small { display: block; }
.media-author strong { font-size: 8px; }
.media-author small { color: rgba(255,255,255,.6); font-size: 5px; margin-top: 2px; }
.media-author em { border: 1px solid rgba(255,255,255,.17); border-radius: 7px; padding: 5px 6px; background: rgba(3,5,9,.32); color: rgba(255,255,255,.76); font-size: 5px; font-style: normal; }
.media-viewer-copy h1 { font-size: 15px; line-height: 1.15; margin: 10px 0 5px; text-shadow: 0 2px 12px #000; }
.media-viewer-copy > p { color: rgba(255,255,255,.75); font-size: 7px; line-height: 1.45; margin: 0; text-shadow: 0 2px 8px #000; }
.media-tags { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.media-tags span { border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 5px; background: rgba(3,5,9,.38); color: rgba(255,255,255,.68); font-size: 5px; backdrop-filter: blur(6px); }
.media-playback { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 62px; padding: 8px 13px 10px; background: linear-gradient(180deg, transparent, rgba(1,2,5,.86)); }
.media-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.media-progress i { display: block; height: 100%; border-radius: inherit; background: var(--lime); box-shadow: 0 0 10px rgba(200,255,69,.45); transition: width .12s linear; }
.media-playback > div:last-child { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.media-playback button { border: 0; padding: 0; background: transparent; color: white; display: flex; align-items: center; gap: 4px; font-size: 5px; cursor: pointer; }
.media-playback button .icon { width: 15px; }
.media-playback button:nth-last-child(2) { margin-left: auto; color: rgba(255,255,255,.72); }
.media-playback span { color: rgba(255,255,255,.65); font-size: 5px; }
.media-next-item { position: absolute; z-index: 4; right: 12px; top: 71px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: 6px 7px 6px 9px; background: rgba(3,5,9,.34); color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 3px; font-size: 5px; cursor: pointer; backdrop-filter: blur(7px); }
.media-next-item .icon { width: 10px; transform: rotate(90deg); }
.carousel-arrow { position: absolute; z-index: 4; top: 44%; transform: translateY(-50%); width: 37px; height: 48px; border: 1px solid rgba(255,255,255,.14); background: rgba(3,5,9,.38); color: white; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.carousel-arrow.previous { left: 9px; border-radius: 12px; }
.carousel-arrow.next { right: 9px; border-radius: 12px; }
.carousel-arrow .icon { width: 16px; }
.viewer-carousel-dots { position: absolute; z-index: 4; left: 50%; top: 72px; transform: translateX(-50%); display: flex; gap: 5px; }
.viewer-carousel-dots button { width: 5px; height: 5px; border: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.46); cursor: pointer; }
.viewer-carousel-dots button.active { width: 17px; border-radius: 999px; background: white; }
.image-quality { position: absolute; z-index: 3; left: 14px; bottom: 14px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 5px; font-size: 5px; }
.image-quality .icon { width: 11px; }
.immersive-media.is-image .media-viewer-copy { bottom: 45px; }
.immersive-media.is-image .media-side-actions { bottom: 128px; }
.media-viewer-screen.expanded .media-viewer-copy > p, .media-viewer-screen.expanded .media-tags, .media-viewer-screen.expanded .image-quality { display: none; }
.media-viewer-screen.expanded .media-viewer-copy { bottom: 77px; }
.media-comments-drawer { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: min(61%, 510px); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 23px 23px 0 0; padding: 13px 13px 0; background: rgba(9,13,22,.98); box-shadow: 0 -25px 70px rgba(0,0,0,.55); backdrop-filter: blur(18px); animation: share-rise .2s ease-out; }
.media-comments-drawer > header { display: flex; justify-content: space-between; align-items: start; padding: 1px 2px 10px; border-bottom: 1px solid var(--line); }
.media-comments-drawer > header strong, .media-comments-drawer > header span { display: block; }
.media-comments-drawer > header strong { font-size: 11px; }
.media-comments-drawer > header span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.media-comments-drawer > header button { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 16px; cursor: pointer; }
.media-comment-list { height: calc(100% - 102px); overflow-y: auto; padding: 4px 0; scrollbar-width: none; }
.media-comment-list article { padding: 9px 2px; display: grid; grid-template-columns: 32px 1fr; gap: 8px; }
.media-comment-list p { color: #c4cad5; font-size: 7px; line-height: 1.4; margin: 0; }
.media-comment-list p strong { display: block; color: white; font-size: 7px; margin-bottom: 3px; }
.media-comment-list p small { color: var(--muted-2); font-size: 5px; font-weight: 500; margin-left: 3px; }
.media-comment-composer { position: absolute; left: 12px; right: 12px; bottom: max(9px, env(safe-area-inset-bottom)); min-height: 45px; border: 1px solid var(--line); border-radius: 13px; padding: 6px; background: var(--surface); display: grid; grid-template-columns: 32px 1fr 31px; gap: 6px; align-items: center; }
.media-comment-composer input { min-width: 0; border: 0; outline: 0; background: transparent; color: white; font-size: 7px; }
.media-comment-composer > button { width: 31px; height: 31px; border: 0; border-radius: 9px; background: var(--lime); color: #111600; display: grid; place-items: center; cursor: pointer; }
.media-comment-composer > button .icon { width: 13px; }

/* Descubrimiento y Relevancia 1.0 */
.topic-hero { margin: 0 13px 10px; min-height: 176px; border: 1px solid rgba(139,108,255,.19); border-radius: 21px; padding: 17px; background: radial-gradient(circle at 85% 12%, rgba(77,232,255,.15), transparent 28%), linear-gradient(145deg, rgba(139,108,255,.17), #0c111d 72%); position: relative; overflow: hidden; }
.topic-hero.backlog { border-color: rgba(255,110,145,.18); background: radial-gradient(circle at 85% 12%, rgba(255,110,145,.16), transparent 28%), linear-gradient(145deg, rgba(139,108,255,.1), #0c111d 72%); }
.topic-hero.fantasy { border-color: rgba(255,183,77,.18); background: radial-gradient(circle at 85% 12%, rgba(255,183,77,.15), transparent 28%), linear-gradient(145deg, rgba(42,83,85,.2), #0c111d 72%); }
.topic-hero::after { content: "#"; position: absolute; right: -8px; top: -34px; color: rgba(255,255,255,.035); font-size: 185px; line-height: 1; font-weight: 1000; transform: rotate(-8deg); }
.topic-fire { width: 39px; height: 39px; border-radius: 13px; background: rgba(139,108,255,.14); color: #bbaaff; display: grid; place-items: center; position: relative; z-index: 1; }
.topic-fire .icon { width: 20px; }
.topic-hero > div { position: relative; z-index: 1; }
.topic-hero small { display: block; color: #bbaaff; font-size: 6px; font-weight: 900; letter-spacing: .09em; margin-top: 12px; }
.topic-hero h1 { max-width: 280px; font-size: 20px; line-height: 1.05; margin: 5px 0; overflow-wrap: anywhere; letter-spacing: -.035em; }
.topic-hero p { max-width: 285px; color: var(--muted); font-size: 8px; line-height: 1.45; margin: 0 0 13px; }
.follow-topic { min-height: 31px; border: 1px solid rgba(200,255,69,.25); border-radius: 9px; padding: 0 10px; background: var(--lime); color: #111700; display: inline-flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 850; position: relative; z-index: 1; cursor: pointer; }
.follow-topic.following { border-color: var(--line); background: rgba(255,255,255,.06); color: #d2d7e0; }
.follow-topic .icon { width: 11px; }
.topic-stats { margin: 0 13px 9px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.topic-stats div { padding: 9px 3px; background: var(--surface); border-right: 1px solid var(--line); text-align: center; }
.topic-stats div:last-child { border: 0; }
.topic-stats strong, .topic-stats span { display: block; }
.topic-stats strong { font-size: 10px; }
.topic-stats span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.topic-tabs { margin-top: 2px; }
.topic-clean-note { margin: 9px 18px 2px; color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: 6px; line-height: 1.35; }
.topic-clean-note .icon { width: 13px; flex: 0 0 auto; color: var(--lime); }
.topic-feed { padding-top: 2px; }
.related-topics { padding: 0 13px 23px; }
.related-topics .section-title { padding: 0 4px; }
.related-topics .eyebrow { color: #bbaaff; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.related-topics > div:last-child { display: grid; gap: 7px; }
.related-topics > div:last-child > button { min-height: 58px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 37px 1fr 12px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.related-topics button > span { width: 37px; height: 37px; border-radius: 11px; background: rgba(139,108,255,.11); color: #bbaaff; display: grid; place-items: center; }
.related-topics button > span.backlog { background: rgba(255,110,145,.09); color: #ff9db3; }
.related-topics button > span.fantasy { background: rgba(255,183,77,.08); color: #ffc676; }
.related-topics button > span .icon { width: 16px; }
.related-topics p { margin: 0; min-width: 0; }
.related-topics strong, .related-topics small { display: block; }
.related-topics strong { font-size: 8px; overflow-wrap: anywhere; }
.related-topics small { color: var(--muted); font-size: 6px; margin-top: 3px; }
.related-topics button > .icon { width: 11px; color: var(--muted-2); }

.notifications-top { position: relative; }
.notifications-top > button { position: absolute; z-index: 7; right: 18px; top: 24px; border: 0; background: transparent; color: var(--lime); font-size: 6px; cursor: pointer; }
.notification-tabs { padding-top: 4px; }
.notification-context { margin: 2px 18px 8px; color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 6px; }
.notification-context .icon { width: 12px; color: var(--lime); }
.notification-list { padding: 0 13px 15px; }
.notification-item { width: 100%; min-height: 78px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 10px 5px; display: grid; grid-template-columns: 45px 1fr 6px; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.notification-item.read { opacity: .65; }
.notification-avatar { width: 43px; height: 43px; border-radius: 14px; display: grid; place-items: center; color: white; font-size: 9px; font-weight: 900; position: relative; }
.notification-avatar > i { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 7px; background: var(--surface-3); color: var(--lime); border: 2px solid var(--bg); display: grid; place-items: center; }
.notification-avatar > i .icon { width: 9px; }
.notification-item strong, .notification-item small, .notification-item time { display: block; }
.notification-item strong { font-size: 9px; }
.notification-item small { color: var(--muted); font-size: 7px; line-height: 1.4; margin-top: 3px; }
.notification-item time { color: var(--muted-2); font-size: 6px; margin-top: 4px; }
.notification-item > em { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.notification-end { color: var(--muted-2); text-align: center; font-size: 7px; padding: 7px 20px 25px; }

.feed-control-wrap { padding: 2px 18px 27px; }
.feed-control-hero { min-height: 124px; border: 1px solid rgba(139,108,255,.18); border-radius: 18px; padding: 15px; background: linear-gradient(145deg, rgba(139,108,255,.13), rgba(77,232,255,.035)); display: grid; grid-template-columns: 42px 1fr; gap: 11px; }
.feed-control-hero > .icon { width: 34px; height: 34px; color: #bcaeff; }
.feed-control-hero .eyebrow { color: #bcaeff; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.feed-control-hero h2 { font-size: 16px; margin: 5px 0; }
.feed-control-hero p { color: var(--muted); font-size: 8px; line-height: 1.5; margin: 0; }
.control-section { padding-top: 15px; }
.control-section .section-title { padding: 0 3px; }
.control-section .eyebrow { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .09em; }
.control-section .section-title h3 { margin-top: 3px; }
.signal-summary { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.signal-summary > div { min-height: 51px; padding: 8px 10px; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.signal-summary > div:last-child { border: 0; }
.signal-summary > div > span { width: 30px; height: 30px; border-radius: 9px; background: rgba(139,108,255,.1); color: #bbaaff; display: grid; place-items: center; }
.signal-summary > div:last-child > span { background: rgba(255,110,145,.07); color: #ff9db3; }
.signal-summary .icon { width: 14px; }
.signal-summary p { margin: 0; }
.signal-summary strong, .signal-summary small { display: block; }
.signal-summary strong { font-size: 8px; }
.signal-summary small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.control-list, .feed-game-priority { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.control-list > button, .community-feed-toggle { width: 100%; min-height: 54px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 9px 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.control-list > button:last-child { border: 0; }
.control-list > button > span:first-child, .community-feed-toggle > span:first-child { display: flex; gap: 9px; align-items: center; }
.control-list > button > span:first-child > .icon, .community-feed-toggle > span:first-child > .icon { width: 17px; color: var(--cyan); }
.control-list i, .community-feed-toggle i { font-style: normal; text-align: left; }
.control-list strong, .control-list small, .community-feed-toggle strong, .community-feed-toggle small { display: block; }
.control-list strong, .community-feed-toggle strong { font-size: 8px; }
.control-list small, .community-feed-toggle small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.feed-game-priority > div { min-height: 54px; padding: 8px 10px; display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; border-bottom: 1px solid var(--line); }
.feed-game-priority > div:last-child { border: 0; }
.priority-game { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: white; font-size: 9px; font-weight: 900; }
.priority-game.valorant { background: linear-gradient(145deg,#ff445e,#682253); }
.priority-game.minecraft { background: linear-gradient(145deg,#7fc85d,#355d36); }
.priority-game.elden { background: linear-gradient(145deg,#c6a24c,#302c22); }
.feed-game-priority p { margin: 0; }
.feed-game-priority strong, .feed-game-priority small { display: block; }
.feed-game-priority strong { font-size: 8px; }
.feed-game-priority small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.feed-game-priority button { border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 3px; font-size: 6px; cursor: pointer; }
.feed-game-priority button .icon { width: 10px; }
.community-feed-toggle { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.muted-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.muted-summary span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: var(--muted); font-size: 6px; }
.moderation-promise { margin: 17px 0; padding: 11px; border: 1px solid rgba(200,255,69,.14); border-radius: 14px; background: rgba(200,255,69,.04); display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.moderation-promise > .icon { width: 18px; color: var(--lime); }
.moderation-promise strong { font-size: 8px; }
.moderation-promise p { color: var(--muted); font-size: 6px; line-height: 1.5; margin: 4px 0 0; }
.social-own-cover::after { content: "MY GAMING SPACE"; }
.own-profile-actions { display: flex; gap: 6px; }
.own-profile-actions .button { padding: 8px 9px; font-size: 7px; }
.social-own-head .profile-name-line { margin-top: 7px; }
.social-profile-stats { margin: 13px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.social-profile-stats button { border: 0; border-right: 1px solid var(--line); padding: 10px 3px; background: var(--surface); color: var(--text); cursor: pointer; }
.social-profile-stats button:last-child { border: 0; }
.social-profile-stats strong, .social-profile-stats span { display: block; }
.social-profile-stats strong { font-size: 11px; }
.social-profile-stats span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.own-games-row { display: flex; gap: 6px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; }
.own-games-row span, .own-games-row button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: #c4cad6; font-size: 6px; }
.own-games-row button { color: var(--lime); cursor: pointer; }
.profile-archive-banner { width: calc(100% - 26px); min-height: 53px; margin: 0 13px 10px; border: 1px solid rgba(139,108,255,.16); border-radius: 13px; padding: 8px 10px; background: rgba(139,108,255,.045); color: var(--text); display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.profile-archive-banner.active { border-color: rgba(200,255,69,.17); background: rgba(200,255,69,.035); }
.profile-archive-banner > .icon { width: 16px; color: #bbaaff; }
.profile-archive-banner strong, .profile-archive-banner small { display: block; }
.profile-archive-banner strong { font-size: 8px; }
.profile-archive-banner small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.profile-archive-banner em { color: var(--lime); font-size: 6px; font-style: normal; }
.own-profile-tabs { margin-top: 1px; }
.own-profile-tabs button span { min-width: 15px; height: 15px; margin-left: 3px; border-radius: 999px; padding: 0 4px; background: var(--surface-3); color: var(--muted); display: inline-grid; place-items: center; font-size: 6px; }
.saved-collection-bar { padding: 10px 13px 2px; }
.saved-collection-bar > span { display: block; color: var(--muted-2); font-size: 5px; font-weight: 900; letter-spacing: .1em; margin: 0 4px 6px; }
.saved-collection-bar > div { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.saved-collection-bar > div::-webkit-scrollbar { display: none; }
.saved-collection-bar button { flex: 0 0 auto; min-height: 29px; border: 1px solid var(--line); border-radius: 9px; padding: 0 9px; background: var(--surface); color: var(--muted); font-size: 6px; cursor: pointer; }
.saved-collection-bar button.active { border-color: rgba(200,255,69,.24); background: rgba(200,255,69,.07); color: var(--lime); }
.saved-collection-bar button.new-collection { display: flex; align-items: center; gap: 4px; color: #bbaaff; }
.saved-collection-bar button .icon { width: 10px; }
.own-profile-feed { padding-top: 3px; }

.share-backdrop { position: absolute; z-index: 20; inset: 0; background: rgba(2,4,8,.72); backdrop-filter: blur(7px); display: flex; align-items: flex-end; }
.share-sheet { width: 100%; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 23px 23px 0 0; padding: 15px 15px max(19px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #151b2a, #090d16); box-shadow: 0 -22px 60px rgba(0,0,0,.45); animation: share-rise .2s ease-out; }
@keyframes share-rise { from { transform: translateY(20px); opacity: .55; } }
.share-sheet header { display: flex; justify-content: space-between; align-items: start; padding: 1px 3px 11px; }
.share-sheet .eyebrow { color: #bbaaff; font-size: 6px; font-weight: 900; letter-spacing: .09em; }
.share-sheet h2 { font-size: 15px; margin: 4px 0 0; }
.share-sheet header > button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.share-preview { min-height: 55px; margin-bottom: 9px; border: 1px solid rgba(139,108,255,.14); border-radius: 13px; padding: 8px; background: rgba(139,108,255,.055); display: grid; grid-template-columns: 35px 1fr; gap: 8px; align-items: center; }
.share-preview p { margin: 0; min-width: 0; }
.share-preview strong, .share-preview small { display: block; }
.share-preview strong { font-size: 8px; }
.share-preview small { color: var(--muted); font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.share-options { display: grid; gap: 5px; }
.share-options > button { min-height: 49px; border: 0; border-radius: 12px; padding: 7px 9px; background: rgba(255,255,255,.035); color: var(--text); display: grid; grid-template-columns: 27px 1fr 11px; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.share-options > button > .icon:first-child { width: 17px; color: var(--lime); }
.share-options > button > .icon:last-child { width: 10px; color: var(--muted-2); }
.share-options strong, .share-options small { display: block; }
.share-options strong { font-size: 8px; }
.share-options small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.content-overlay-backdrop { position: absolute; z-index: 21; inset: 0; padding-top: 30px; background: rgba(2,4,8,.76); backdrop-filter: blur(8px); display: flex; align-items: flex-end; }
.content-sheet { width: 100%; max-height: calc(100% - 20px); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 23px 23px 0 0; padding: 15px 15px max(18px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #151b2a, #090d16); box-shadow: 0 -22px 70px rgba(0,0,0,.5); overflow-y: auto; animation: share-rise .2s ease-out; scrollbar-width: none; }
.content-sheet::-webkit-scrollbar { display: none; }
.content-sheet > header { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 1px 2px 12px; }
.content-sheet > header .eyebrow { color: #bbaaff; font-size: 6px; font-weight: 900; letter-spacing: .09em; }
.content-sheet > header h2 { font-size: 16px; margin: 4px 0 0; }
.content-sheet > header p { color: var(--muted); font-size: 7px; margin: 4px 0 0; }
.content-sheet > header > button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 17px; cursor: pointer; }
.draft-list { display: grid; gap: 7px; }
.draft-list article { min-height: 72px; border: 1px solid var(--line); border-radius: 14px; padding: 5px; background: var(--surface); display: grid; grid-template-columns: 1fr 27px; gap: 4px; }
.draft-main { min-width: 0; border: 0; border-radius: 10px; padding: 7px; background: transparent; color: var(--text); display: grid; text-align: left; cursor: pointer; }
.draft-type { color: #bbaaff; font-size: 5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.draft-main strong { font-size: 8px; line-height: 1.35; margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-main small { color: var(--muted); font-size: 6px; }
.draft-list article > button:last-child { align-self: start; width: 27px; height: 27px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-2); font-size: 14px; cursor: pointer; }
.draft-empty { padding: 30px 15px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); display: grid; justify-items: center; gap: 5px; text-align: center; }
.draft-empty .icon { width: 24px; color: #bbaaff; }
.draft-empty strong { color: var(--text); font-size: 9px; }
.draft-empty span { font-size: 6px; }
.new-blank-draft { width: 100%; min-height: 42px; margin-top: 9px; border: 1px dashed rgba(200,255,69,.2); border-radius: 11px; background: rgba(200,255,69,.035); color: var(--lime); display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 7px; cursor: pointer; }
.new-blank-draft .icon { width: 12px; }
.preview-post-card { border: 1px solid var(--line); border-radius: 17px; padding: 12px; background: linear-gradient(145deg, rgba(19,25,40,.95), rgba(10,14,23,.98)); }
.preview-author { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; }
.preview-author p { margin: 0; }
.preview-author strong, .preview-author small { display: block; }
.preview-author strong { font-size: 8px; }
.preview-author small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.preview-author > span:last-child { border-radius: 6px; padding: 4px 5px; background: rgba(139,108,255,.09); color: #bbaaff; font-size: 5px; font-weight: 900; }
.preview-post-card > h3 { font-size: 13px; line-height: 1.35; margin: 11px 0; }
.preview-media { height: 188px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.preview-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(3,5,9,.55)); }
.preview-media > span { position: absolute; z-index: 1; right: 8px; bottom: 8px; border-radius: 7px; padding: 5px 6px; background: rgba(3,5,9,.64); display: flex; align-items: center; gap: 4px; font-size: 6px; }
.preview-media .icon { width: 11px; }
.preview-quote { border: 1px solid rgba(139,108,255,.17); border-radius: 11px; padding: 9px; background: rgba(139,108,255,.04); }
.preview-quote strong, .preview-quote span { display: block; }
.preview-quote strong { color: #bbaaff; font-size: 6px; }
.preview-quote span { color: #c6ccd8; font-size: 7px; margin-top: 4px; }
.preview-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.preview-tags span { border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; color: var(--muted); font-size: 5px; }
.preview-access { margin-top: 9px; color: var(--muted-2); display: flex; align-items: center; gap: 4px; font-size: 5px; }
.preview-access .icon { width: 10px; color: var(--lime); }
.preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.publishing-state, .publish-error-state { min-height: 245px; padding: 28px 20px; border: 1px solid rgba(139,108,255,.17); border-radius: 17px; background: rgba(139,108,255,.045); display: grid; justify-items: center; align-content: center; text-align: center; }
.publishing-state > .icon, .publish-error-state > .icon { width: 31px; color: #bbaaff; }
.publishing-state strong, .publishing-state span, .publish-error-state strong, .publish-error-state span { display: block; }
.publishing-state strong, .publish-error-state strong { font-size: 11px; margin-top: 10px; }
.publishing-state span, .publish-error-state span { color: var(--muted); font-size: 7px; margin-top: 4px; }
.publishing-state i { width: 150px; height: 4px; margin-top: 15px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.publishing-state i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--lime)); animation: upload-progress .75s ease both; }
.publish-error-state > .icon { color: var(--danger); }
.publish-error-state button { margin-top: 12px; border: 0; border-radius: 9px; padding: 8px 11px; background: var(--danger); color: white; font-size: 7px; cursor: pointer; }
.confirm-post-sheet { max-height: none; padding: 24px 20px max(23px, env(safe-area-inset-bottom)); text-align: center; }
.confirm-danger { width: 49px; height: 49px; margin: 0 auto; border-radius: 15px; background: rgba(255,110,145,.1); color: var(--danger); display: grid; place-items: center; }
.confirm-danger .icon { width: 22px; }
.confirm-post-sheet h2 { font-size: 16px; margin: 12px 0 5px; }
.confirm-post-sheet p { color: var(--muted); font-size: 7px; line-height: 1.5; margin: 0 auto 15px; max-width: 310px; }
.confirm-post-sheet > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.button.danger { border: 0; background: var(--danger); color: white; }
.advanced-profile-gateway { margin: 0 13px 22px; padding: 13px; border: 1px solid rgba(139,108,255,.17); border-radius: 17px; background: linear-gradient(145deg, rgba(139,108,255,.08), rgba(77,232,255,.025)); }
.advanced-profile-gateway .section-title { margin-bottom: 6px; }
.advanced-profile-gateway .eyebrow { color: #bbaaff; font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.advanced-profile-gateway .section-title h3 { margin-top: 3px; }
.advanced-profile-gateway .section-title > span { color: var(--muted-2); font-size: 6px; }
.advanced-profile-gateway > p { color: var(--muted); font-size: 7px; line-height: 1.45; margin: 0 0 9px; }
.advanced-profile-gateway > div:last-child { display: grid; gap: 6px; }
.advanced-profile-gateway > div:last-child > button { min-height: 48px; border: 1px solid var(--line); border-radius: 11px; padding: 8px; background: rgba(5,7,13,.35); color: var(--text); display: grid; grid-template-columns: 24px 1fr 12px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.advanced-profile-gateway > div:last-child > button > .icon:first-child { width: 17px; color: #bbaaff; }
.advanced-profile-gateway > div:last-child > button > .icon:last-child { width: 11px; color: var(--muted); }
.advanced-profile-gateway strong, .advanced-profile-gateway small { display: block; }
.advanced-profile-gateway strong { font-size: 8px; }
.advanced-profile-gateway small { color: var(--muted); font-size: 6px; margin-top: 2px; }

/* Perfiles Gamer 2.0 */
.profile-cover-v2 { height: 145px; background: radial-gradient(circle at 73% 22%, rgba(77,232,255,.28), transparent 24%), radial-gradient(circle at 25% 76%, rgba(200,255,69,.12), transparent 27%), linear-gradient(135deg, #39255d, #14213f 50%, #103d49); }
.profile-cover-v2::before { content: ""; position: absolute; width: 185px; height: 185px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); right: 22px; top: -70px; box-shadow: inset 0 0 0 27px rgba(255,255,255,.018), inset 0 0 0 54px rgba(255,255,255,.014); }
.profile-cover-v2::after { content: "PLAY YOUR ROLE"; top: 36px; right: -86px; font-size: 31px; }
.profile-availability-live { position: absolute; left: 14px; top: 13px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(200,255,69,.17); border-radius: 999px; background: rgba(7,11,13,.45); color: var(--lime); backdrop-filter: blur(9px); font-size: 7px; font-weight: 850; letter-spacing: .06em; }
.profile-availability-live i, .presence-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(200,255,69,.55); }
.profile-head-v2 { margin-top: -39px; }
.profile-head-v2 .avatar { position: relative; }
.online-dot { position: absolute; right: -2px; bottom: 5px; width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--bg); background: var(--lime); }
.profile-name-line { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.profile-name-line h1 { margin: 0; }
.profile-level { border: 1px solid rgba(139,108,255,.22); background: rgba(139,108,255,.08); color: #bfaeff; border-radius: 8px; padding: 5px 7px; font-size: 7px; font-weight: 850; letter-spacing: .06em; }
.profile-head-v2 .profile-bio { font-size: 9px; max-width: 360px; }
.profile-head-v2 .profile-data { gap: 7px 12px; }
.profile-data span { display: flex; align-items: center; gap: 4px; }
.profile-data .icon { width: 11px; height: 11px; color: var(--cyan); }
.profile-proof-row { margin: 14px 13px 5px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.profile-proof-row button { min-width: 0; padding: 10px 3px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.profile-proof-row button:last-child { border: 0; }
.profile-proof-row strong { display: block; font-size: 12px; }
.profile-proof-row span { display: flex; justify-content: center; align-items: center; gap: 3px; color: var(--muted); font-size: 7px; margin-top: 3px; }
.profile-proof-row .icon { width: 9px; color: var(--lime); }
.availability-preview { width: calc(100% - 26px); margin: 9px 13px 3px; padding: 11px; border: 1px solid rgba(77,232,255,.15); border-radius: 16px; background: linear-gradient(145deg, rgba(77,232,255,.075), rgba(139,108,255,.045)); color: var(--text); display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 9px; text-align: left; cursor: pointer; }
.availability-signal { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; color: var(--cyan); background: rgba(77,232,255,.09); }
.availability-preview small, .availability-preview strong, .availability-preview em { display: block; }
.availability-preview small { color: var(--cyan); font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.availability-preview strong { font-size: 10px; margin: 3px 0; }
.availability-preview em { color: var(--muted); font-size: 7px; font-style: normal; }
.availability-open { display: flex; align-items: center; gap: 2px; color: var(--muted); font-size: 7px; }
.availability-open .icon { width: 12px; }
.profile-v2-section { padding: 17px 13px 1px; }
.profile-v2-section.compact-section { padding-top: 13px; }
.profile-v2-section .section-title { padding: 0 5px; align-items: end; }
.profile-v2-section .section-title > div .eyebrow { color: var(--lime); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.profile-v2-section .section-title > div h3 { margin-top: 3px; }
.gamer-game-row { display: flex; gap: 9px; overflow-x: auto; padding: 1px 0 5px; scrollbar-width: none; scroll-snap-type: x proximity; }
.gamer-game-row::-webkit-scrollbar { display: none; }
.gamer-game-card { flex: 0 0 210px; min-height: 148px; border: 1px solid var(--line); border-radius: 17px; padding: 13px; background: var(--surface); position: relative; overflow: hidden; cursor: pointer; scroll-snap-align: start; }
.gamer-game-card::before { content: ""; position: absolute; inset: 0; opacity: .17; pointer-events: none; }
.gamer-game-card.valorant::before { background: linear-gradient(130deg, #ff445e, transparent 64%); }
.gamer-game-card.elden::before { background: linear-gradient(130deg, #c6a24c, transparent 64%); }
.gamer-game-card.minecraft::before { background: linear-gradient(130deg, #64b865, transparent 64%); }
.gamer-game-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.game-emblem { width: 31px; height: 31px; border-radius: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; font-size: 12px; font-weight: 950; }
.game-status { color: var(--lime); font-size: 6px; text-transform: uppercase; font-weight: 850; }
.gamer-game-card h3 { position: relative; font-size: 12px; margin: 11px 0 5px; }
.gamer-game-card > strong { position: relative; display: block; font-size: 13px; }
.gamer-game-card > span:not(.game-card-arrow) { position: relative; display: block; color: var(--muted); font-size: 8px; margin-top: 3px; }
.game-card-tags { position: relative; display: flex; gap: 5px; margin-top: 10px; }
.game-card-tags em { border: 1px solid var(--line); border-radius: 6px; padding: 4px 5px; color: #b9c0cf; background: rgba(0,0,0,.15); font-size: 6px; font-style: normal; }
.game-card-arrow { position: absolute; right: 11px; bottom: 12px; width: 13px; color: var(--muted); }
.team-history-card { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 15px; padding: 11px; }
.team-history-card .clan-logo { width: 42px; height: 42px; border-radius: 13px; }
.team-history-card strong, .team-history-card span { display: block; }
.team-history-card strong { font-size: 10px; }
.team-history-card span { color: var(--muted); font-size: 7px; margin-top: 3px; }
.team-state { color: var(--lime) !important; font-size: 6px !important; font-weight: 900; letter-spacing: .08em; }
.reputation-preview { width: calc(100% - 26px); margin: 15px 13px 1px; padding: 13px; border: 1px solid rgba(200,255,69,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(200,255,69,.075), rgba(77,232,255,.035)); color: var(--text); display: grid; grid-template-columns: 60px 1fr 14px; gap: 11px; align-items: center; text-align: left; cursor: pointer; }
.reputation-ring { width: 60px; height: 60px; border-radius: 50%; border: 5px solid rgba(200,255,69,.16); border-top-color: var(--lime); border-right-color: var(--lime); display: grid; place-content: center; text-align: center; transform: rotate(15deg); }
.reputation-ring strong, .reputation-ring span { transform: rotate(-15deg); }
.reputation-ring strong { font-size: 17px; line-height: 1; }
.reputation-ring span { color: var(--muted); font-size: 6px; }
.reputation-preview small, .reputation-preview > div:nth-child(2) > strong, .reputation-preview p { display: block; }
.reputation-preview small { color: var(--lime); font-size: 6px; letter-spacing: .08em; }
.reputation-preview > div:nth-child(2) > strong { font-size: 10px; margin: 3px 0; }
.reputation-preview p { color: var(--muted); font-size: 7px; margin: 0; }
.endorsement-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.endorsement-tags i { color: #c6cedb; background: rgba(255,255,255,.045); border-radius: 5px; padding: 3px 5px; font-size: 6px; font-style: normal; }
.reputation-preview > .icon { width: 13px; color: var(--muted); }
.mini-activity-list { border: 1px solid var(--line); background: var(--surface); border-radius: 15px; padding: 0 11px; }
.mini-activity { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); }
.mini-activity:last-child { border: 0; }
.activity-symbol { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.activity-symbol .icon { width: 15px; }
.activity-symbol.lime { color: var(--lime); background: rgba(200,255,69,.08); }
.activity-symbol.cyan { color: var(--cyan); background: rgba(77,232,255,.08); }
.activity-symbol.violet { color: #b9a9ff; background: rgba(139,108,255,.09); }
.activity-symbol.pink { color: #ff8cab; background: rgba(255,110,145,.08); }
.mini-activity strong, .mini-activity small { display: block; }
.mini-activity strong { font-size: 9px; }
.mini-activity small { color: var(--muted); font-size: 7px; margin-top: 3px; }
.mini-activity time { color: var(--muted-2); font-size: 6px; }
.lfg-profile-proof { width: 100%; margin: -5px 0 14px; border: 1px solid rgba(200,255,69,.14); border-radius: 15px; padding: 10px; background: rgba(200,255,69,.045); color: var(--text); display: grid; grid-template-columns: 37px 1fr 13px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.lfg-profile-proof .avatar { width: 37px; height: 37px; }
.lfg-profile-proof small, .lfg-profile-proof strong, .lfg-profile-proof em { display: block; }
.lfg-profile-proof small { color: var(--lime); font-size: 6px; letter-spacing: .07em; }
.lfg-profile-proof strong { font-size: 8px; margin: 3px 0; }
.lfg-profile-proof em { color: var(--muted); font-size: 7px; font-style: normal; }
.lfg-profile-proof > .icon { width: 12px; color: var(--muted); }

.game-profile-hero { height: 190px; margin: 0 13px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 21px; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; isolation: isolate; }
.game-profile-hero.valorant { background: linear-gradient(145deg, rgba(8,9,18,.03), rgba(8,9,18,.82)), linear-gradient(125deg, #ff405c, #8c1b51 48%, #202c67); }
.game-profile-hero.elden { background: linear-gradient(145deg, rgba(9,9,7,.03), rgba(9,9,7,.84)), linear-gradient(125deg, #c19b45, #57482e 50%, #161b24); }
.game-profile-hero.minecraft { background: linear-gradient(145deg, rgba(7,12,8,.03), rgba(7,12,8,.76)), linear-gradient(130deg, #58a777 0 45%, #718f45 45% 64%, #4f382a 64%); }
.game-profile-letter { position: absolute; z-index: -1; right: 0; top: -22px; font-size: 185px; font-weight: 1000; color: rgba(255,255,255,.08); transform: skew(-10deg); }
.game-profile-status { display: flex; gap: 5px; align-items: center; color: var(--lime); background: rgba(5,7,13,.48); border: 1px solid rgba(200,255,69,.16); border-radius: 999px; padding: 5px 7px; font-size: 6px; font-weight: 850; }
.game-profile-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.game-profile-hero > div:last-child { margin-top: auto; }
.game-profile-hero small { color: rgba(255,255,255,.63); font-size: 7px; letter-spacing: .08em; }
.game-profile-hero h1 { font-size: 29px; margin: 3px 0 5px; letter-spacing: -.055em; }
.game-profile-hero p { color: rgba(255,255,255,.67); font-size: 8px; margin: 0; }
.game-rank-card { margin: 10px 13px 0; padding: 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: grid; grid-template-columns: 43px 1fr auto; gap: 10px; align-items: center; }
.rank-mark { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; color: var(--lime); background: rgba(200,255,69,.08); border: 1px solid rgba(200,255,69,.14); }
.game-rank-card small, .game-rank-card strong, .game-rank-card span { display: block; }
.game-rank-card small { color: var(--muted-2); font-size: 6px; letter-spacing: .08em; }
.game-rank-card strong { font-size: 12px; margin: 2px 0; }
.game-rank-card span { color: var(--muted); font-size: 7px; }
.game-rank-card button { border: 0; background: transparent; color: var(--lime); font-size: 7px; cursor: pointer; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.identity-grid > div { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); padding: 10px; }
.identity-grid span, .identity-grid strong { display: block; }
.identity-grid span { color: var(--muted-2); font-size: 6px; letter-spacing: .07em; }
.identity-grid strong { font-size: 9px; margin-top: 4px; }
.profile-chip-block { margin-top: 13px; }
.profile-chip-block > small { display: block; color: var(--muted-2); font-size: 6px; letter-spacing: .08em; margin-bottom: 6px; }
.profile-chip-block > div { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-chip-block > div span { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); color: #c2c8d5; font-size: 7px; }
.profile-chip-block > div span.lime { color: var(--lime); border-color: rgba(200,255,69,.16); background: rgba(200,255,69,.05); }
.looking-card { display: grid; grid-template-columns: 42px 1fr; gap: 10px; border: 1px solid rgba(139,108,255,.18); border-radius: 16px; padding: 12px; background: linear-gradient(145deg, rgba(139,108,255,.1), rgba(77,232,255,.035)); }
.looking-card > span { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: rgba(139,108,255,.12); color: #bbaaff; }
.looking-card strong { font-size: 10px; }
.looking-card p { color: var(--muted); font-size: 8px; line-height: 1.45; margin: 4px 0 7px; }
.looking-card div div { display: flex; gap: 5px; flex-wrap: wrap; }
.looking-card i { border-radius: 6px; background: rgba(255,255,255,.05); padding: 4px 6px; color: #c3c9d5; font-size: 6px; font-style: normal; }
.game-performance { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 8px; }
.game-performance div { background: var(--surface); padding: 9px 4px; text-align: center; border-right: 1px solid var(--line); }
.game-performance div:last-child { border: 0; }
.game-performance strong, .game-performance span { display: block; }
.game-performance strong { font-size: 11px; }
.game-performance span { color: var(--muted); font-size: 6px; margin-top: 2px; }

.history-summary { margin: 1px 13px 11px; padding: 15px; display: grid; grid-template-columns: 42px 1fr; gap: 11px; border: 1px solid rgba(139,108,255,.18); border-radius: 18px; background: linear-gradient(145deg, rgba(139,108,255,.13), rgba(77,232,255,.04)); }
.history-symbol { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #c0b1ff; background: rgba(139,108,255,.13); }
.history-summary small { color: #b9a9ff; font-size: 6px; letter-spacing: .08em; }
.history-summary h2 { font-size: 16px; line-height: 1.1; margin: 4px 0 6px; }
.history-summary p { color: var(--muted); font-size: 8px; line-height: 1.5; margin: 0; }
.history-metrics { margin: 0 13px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.history-metrics div { padding: 9px 2px; text-align: center; background: var(--surface); border-right: 1px solid var(--line); }
.history-metrics div:last-child { border: 0; }
.history-metrics strong, .history-metrics span { display: block; }
.history-metrics strong { font-size: 11px; }
.history-metrics span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.history-filters { padding-top: 12px; }
.history-timeline { padding: 5px 18px 22px; }
.history-entry { display: grid; grid-template-columns: 35px 1fr; gap: 10px; min-height: 91px; }
.history-rail { display: flex; flex-direction: column; align-items: center; }
.history-rail .activity-symbol { flex: 0 0 auto; }
.history-rail > i { width: 1px; flex: 1; min-height: 48px; background: var(--line-strong); }
.history-entry-body { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px; margin-bottom: 9px; }
.history-entry-body > div:first-child { display: flex; justify-content: space-between; }
.history-entry-body > div:first-child span { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .08em; }
.history-entry-body time { color: var(--muted-2); font-size: 6px; }
.history-entry-body h3 { font-size: 10px; margin: 6px 0 3px; }
.history-entry-body p { color: var(--muted); font-size: 7px; margin: 0; }
.history-entry-body button { border: 0; padding: 6px 0 0; background: transparent; color: var(--lime); font-size: 7px; cursor: pointer; }

.availability-form { padding: 1px 18px 26px; }
.availability-hero { display: grid; grid-template-columns: 45px 1fr; gap: 11px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.availability-hero > span { width: 45px; height: 45px; border-radius: 14px; display: grid; place-items: center; color: var(--cyan); background: rgba(77,232,255,.08); }
.availability-hero small { color: var(--cyan); font-size: 6px; letter-spacing: .08em; }
.availability-hero h2 { font-size: 16px; line-height: 1.08; margin: 4px 0; }
.availability-hero p { color: var(--muted); font-size: 8px; line-height: 1.4; margin: 0; }
.looking-toggle-card { margin: 12px 0; padding: 11px; border: 1px solid rgba(200,255,69,.15); border-radius: 15px; background: rgba(200,255,69,.045); display: flex; justify-content: space-between; align-items: center; }
.looking-toggle-card > div { display: flex; align-items: center; gap: 9px; }
.looking-toggle-card p { margin: 0; }
.looking-toggle-card strong, .looking-toggle-card small { display: block; }
.looking-toggle-card strong { font-size: 9px; }
.looking-toggle-card small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.looking-toggle-card button.toggle { border: 0; padding: 0; }
.availability-title { display: flex; justify-content: space-between; align-items: end; margin: 17px 0 9px; }
.availability-title .eyebrow { color: var(--lime); font-size: 6px; font-weight: 850; letter-spacing: .09em; }
.availability-title h3 { font-size: 14px; margin: 3px 0 0; }
.availability-title > span { color: var(--muted); font-size: 6px; }
.schedule-head, .schedule-row { display: grid; grid-template-columns: 42px repeat(3,1fr); gap: 6px; align-items: center; }
.schedule-head { margin-bottom: 5px; }
.schedule-head span { color: var(--muted-2); font-size: 6px; text-align: center; }
.schedule-row { margin-bottom: 6px; }
.schedule-row strong { color: var(--muted); font-size: 8px; }
.schedule-row button { height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: transparent; display: grid; place-items: center; cursor: pointer; }
.schedule-row button.active { border-color: rgba(200,255,69,.24); background: rgba(200,255,69,.09); color: var(--lime); }
.schedule-row button .icon { width: 12px; }
.profile-timezone { margin: 9px 0 16px; line-height: 1.4; }
.preference-list { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.preference-list > button { width: 100%; min-height: 52px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.preference-list > button:last-child { border: 0; }
.preference-list > button > span:first-child { display: flex; align-items: center; gap: 9px; }
.preference-list > button > span:first-child > .icon { width: 17px; color: var(--cyan); }
.preference-list i { text-align: left; font-style: normal; }
.preference-list strong, .preference-list small { display: block; }
.preference-list strong { font-size: 9px; }
.preference-list small { color: var(--muted); font-size: 7px; margin-top: 2px; }
.preference-list > button > .icon { width: 13px; color: var(--muted); }
.visibility-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 16px; }
.visibility-picker button { min-height: 54px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 7px; cursor: pointer; }
.visibility-picker button .icon { width: 15px; }
.visibility-picker button.active { color: var(--lime); border-color: rgba(200,255,69,.23); background: rgba(200,255,69,.06); }

.reputation-hero { margin: 0 13px 10px; min-height: 180px; padding: 18px; border: 1px solid rgba(200,255,69,.17); border-radius: 21px; display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; background: radial-gradient(circle at 25% 50%, rgba(200,255,69,.13), transparent 29%), linear-gradient(145deg, #152025, #0d1120 58%, #1e1430); overflow: hidden; position: relative; }
.reputation-hero::after { content: "TRUST"; position: absolute; right: -22px; top: 15px; font-size: 85px; font-weight: 1000; color: rgba(255,255,255,.025); transform: rotate(-8deg); }
.reputation-shield { width: 82px; height: 82px; border-radius: 27px; display: grid; place-items: center; color: #111704; background: linear-gradient(145deg, var(--lime), #68ca72); box-shadow: 0 0 40px rgba(200,255,69,.16); }
.reputation-shield .icon { width: 42px; height: 42px; }
.reputation-hero small { color: var(--lime); font-size: 6px; letter-spacing: .09em; }
.reputation-hero h1 { font-size: 31px; margin: 4px 0 1px; line-height: 1; }
.reputation-hero h1 span { color: var(--muted); font-size: 9px; }
.reputation-hero > div > strong { font-size: 10px; }
.reputation-hero p { color: var(--muted); font-size: 7px; line-height: 1.4; margin: 5px 0 0; }
.reputation-facts { margin: 0 13px; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.reputation-facts div { padding: 9px 3px; background: var(--surface); border-right: 1px solid var(--line); text-align: center; }
.reputation-facts div:last-child { border: 0; }
.reputation-facts strong, .reputation-facts span { display: block; }
.reputation-facts strong { font-size: 12px; }
.reputation-facts span { color: var(--muted); font-size: 6px; margin-top: 2px; }
.endorsement-bars { border: 1px solid var(--line); border-radius: 15px; padding: 5px 11px 10px; background: var(--surface); }
.endorsement-bars > div { padding-top: 9px; }
.endorsement-bars > div > span { display: flex; justify-content: space-between; }
.endorsement-bars strong { font-size: 8px; }
.endorsement-bars em { color: var(--muted); font-size: 7px; font-style: normal; }
.endorsement-bars i { display: block; height: 4px; margin-top: 5px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.endorsement-bars b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--cyan)); }
.reputation-quotes { display: grid; gap: 8px; }
.reputation-quotes article { border: 1px solid var(--line); border-radius: 15px; padding: 11px; background: var(--surface); }
.reputation-quotes article > div { display: grid; grid-template-columns: 33px 1fr 15px; gap: 8px; align-items: center; }
.reputation-quotes .avatar { width: 33px; height: 33px; border-radius: 10px; }
.reputation-quotes p { margin: 0; }
.reputation-quotes strong, .reputation-quotes small { display: block; }
.reputation-quotes strong { font-size: 8px; }
.reputation-quotes small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.reputation-quotes article > div > .icon { color: var(--lime); width: 13px; }
.reputation-quotes blockquote { margin: 9px 0 7px; color: #b8c0ce; font-size: 8px; line-height: 1.5; }
.reputation-quotes article > span { color: #bbaaff; font-size: 6px; }
.reputation-explainer { margin: 13px 13px 22px; border: 1px solid rgba(77,232,255,.15); border-radius: 16px; padding: 12px; background: rgba(77,232,255,.045); display: grid; grid-template-columns: 24px 1fr; gap: 9px; }
.reputation-explainer > .icon { color: var(--cyan); width: 19px; }
.reputation-explainer strong { font-size: 9px; }
.reputation-explainer p { color: var(--muted); font-size: 7px; line-height: 1.45; margin: 4px 0; }
.reputation-explainer button { border: 0; padding: 0; background: transparent; color: var(--cyan); font-size: 7px; cursor: pointer; }

/* Experiencia Social 1.6 · conversaciones e interacciones */
.post-engagement-summary { min-height: 38px; margin: 0 12px 10px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.post-engagement-summary button { border: 0; padding: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 6px; font-size: 6px; cursor: pointer; }
.post-engagement-summary button:first-child strong { color: #c8cfda; font-size: 6px; }
.post-engagement-summary button:last-child .icon { width: 10px; }
.engagement-faces { display: flex; padding-left: 4px; }
.engagement-faces i { width: 20px; height: 20px; margin-left: -4px; border: 2px solid #0d111c; border-radius: 7px; display: grid; place-items: center; color: white; font-size: 5px; font-style: normal; font-weight: 900; }
.engagement-faces .luna { background: linear-gradient(145deg, #754cff, #e86fa6); }
.engagement-faces .jane { background: linear-gradient(145deg, #7855ff, #4d9aff); }
.engagement-faces .kael { background: linear-gradient(145deg, #127174, #46d9ca); }

.conversation-toolbar { margin: 0 13px 8px; display: flex; gap: 6px; }
.conversation-toolbar button { min-height: 30px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: var(--surface); color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 6px; cursor: pointer; }
.conversation-toolbar button:first-child { flex: 1; }
.conversation-toolbar button.active { color: #bbaaff; border-color: rgba(139,108,255,.2); background: rgba(139,108,255,.06); }
.conversation-toolbar .icon { width: 12px; }
.conversation-controls { margin: 0 13px 8px; border: 1px solid rgba(139,108,255,.16); border-radius: 13px; padding: 2px 9px; background: rgba(139,108,255,.045); }
.conversation-controls > div { min-height: 46px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-controls > div:last-child { border: 0; }
.conversation-controls > div > span { display: flex; align-items: center; gap: 7px; }
.conversation-controls > div > span > .icon { width: 15px; color: #bbaaff; }
.conversation-controls i { font-style: normal; }
.conversation-controls strong, .conversation-controls small { display: block; }
.conversation-controls strong { font-size: 7px; }
.conversation-controls small { color: var(--muted); font-size: 5px; margin-top: 2px; }
.conversation-controls button { border: 0; padding: 0; background: transparent; color: var(--lime); display: flex; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; }
.conversation-controls button .icon { width: 10px; }

.comment-card { position: relative; }
.comment-card.pinned-comment { margin: 4px 0; padding: 10px 8px; border: 1px solid rgba(200,255,69,.14); border-radius: 13px; background: linear-gradient(145deg, rgba(200,255,69,.045), rgba(139,108,255,.025)); }
.comment-pin-label { margin: -1px 0 8px 42px; color: var(--lime); display: flex; align-items: center; gap: 4px; font-size: 5px; font-weight: 800; letter-spacing: .03em; }
.comment-pin-label .icon { width: 9px; }
.comment-line { grid-template-columns: 35px 1fr auto 24px; gap: 7px; }
.comment-line > .comment-avatar { width: 35px; height: 35px; padding: 0; cursor: pointer; }
.comment-line > .comment-avatar .creator-avatar { width: 35px; height: 35px; }
.comment-line strong i { margin-left: 3px; border-radius: 5px; padding: 2px 4px; background: rgba(200,255,69,.09); color: var(--lime); font-size: 4px; font-style: normal; text-transform: uppercase; }
.comment-line .comment-follow { width: auto; height: 23px; border: 1px solid rgba(200,255,69,.18); border-radius: 7px; padding: 0 7px; color: var(--lime); font-size: 5px; cursor: pointer; }
.comment-following { color: var(--muted-2); font-size: 5px; }
.comment-line .comment-more { width: 24px; height: 24px; }
.comment-menu-panel { position: absolute; z-index: 8; top: 45px; right: 4px; width: 150px; border: 1px solid var(--line-strong); border-radius: 11px; padding: 4px; background: #151b29; box-shadow: 0 12px 35px rgba(0,0,0,.38); }
.comment-menu-panel button { width: 100%; min-height: 30px; border: 0; border-radius: 7px; padding: 6px 7px; background: transparent; color: #c5cbd6; display: flex; align-items: center; gap: 6px; text-align: left; font-size: 6px; cursor: pointer; }
.comment-menu-panel button:hover { background: var(--surface-3); }
.comment-menu-panel button.danger-action { color: #ff8b9c; }
.comment-menu-panel .icon { width: 12px; }
.comment-card > p .inline-mention { border: 0; padding: 0; background: transparent; color: #bbaaff; font: inherit; font-weight: 750; cursor: pointer; }
.comment-actions { display: flex; gap: 12px !important; }
.comment-actions button.active { color: #ff829b !important; }
.comment-actions button:last-child { margin-left: auto; color: var(--muted-2); }
.comment-thread-line { display: grid; grid-template-columns: 26px 1fr; }
.comment-thread-line > span { width: 1px; margin: 0 auto; background: linear-gradient(var(--line-strong), transparent); }
.comment-thread-line .comment-card.reply { margin-left: 0; }
.comment-placeholder { min-height: 62px; padding: 10px; border: 1px dashed var(--line); border-radius: 11px; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; color: var(--muted); }
.comment-placeholder > .icon { width: 17px; color: var(--muted-2); }
.comment-placeholder strong, .comment-placeholder small { display: block; }
.comment-placeholder strong { font-size: 7px; }
.comment-placeholder small { font-size: 5px; margin-top: 2px; }
.comment-placeholder > button { border: 0; background: transparent; color: var(--lime); font-size: 6px; cursor: pointer; }
.comment-composer-wrap { position: sticky; z-index: 7; bottom: -29px; margin-bottom: 18px; padding: 0 13px 5px; }
.comment-composer-wrap .comment-composer { position: relative; bottom: auto; margin: 0; }
.comment-compose-context { min-height: 31px; margin: 0 6px -2px; border: 1px solid rgba(139,108,255,.17); border-bottom: 0; border-radius: 11px 11px 0 0; padding: 6px 8px 8px; background: #161a2a; color: #bbaaff; display: grid; grid-template-columns: 13px 1fr 18px; gap: 5px; align-items: center; font-size: 6px; }
.comment-compose-context.editing { color: var(--cyan); }
.comment-compose-context .icon { width: 11px; }
.comment-compose-context button { border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.comment-composer.submitting { opacity: .72; pointer-events: none; }
.comment-compose-hint { display: block; margin: 4px 7px 0; color: var(--muted-2); font-size: 5px; }
.comments-closed { min-height: 92px; margin: 5px 13px 18px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); display: grid; justify-items: center; align-content: center; text-align: center; }
.comments-closed .icon { width: 20px; color: #bbaaff; }
.comments-closed strong, .comments-closed span { display: block; }
.comments-closed strong { color: var(--text); font-size: 8px; margin-top: 5px; }
.comments-closed span { font-size: 6px; margin-top: 3px; }

.engagement-sheet { max-height: 76%; }
.engagement-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 7px; }
.engagement-tabs button { min-height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 6px; cursor: pointer; }
.engagement-tabs button.active { border-color: rgba(200,255,69,.2); background: rgba(200,255,69,.06); color: var(--lime); }
.engagement-tabs .icon { width: 12px; }
.engagement-list article { min-height: 55px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.engagement-person { min-width: 0; border: 0; padding: 0; background: transparent; color: var(--text); display: grid; grid-template-columns: 35px 1fr; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.engagement-person strong, .engagement-person small { display: block; }
.engagement-person strong { font-size: 8px; }
.engagement-person small { color: var(--muted); font-size: 5px; margin-top: 2px; }
.engagement-follow { min-width: 57px; min-height: 27px; border: 1px solid rgba(200,255,69,.18); border-radius: 8px; background: rgba(200,255,69,.05); color: var(--lime); font-size: 6px; cursor: pointer; }
.engagement-follow.active { border-color: var(--line); background: var(--surface); color: var(--muted); }
.engagement-more { min-height: 46px; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 6px; }
.engagement-more .icon { width: 13px; color: #bbaaff; }

.notification-group > header { padding: 10px 5px 4px; display: flex; justify-content: space-between; align-items: center; }
.notification-group > header strong { font-size: 8px; }
.notification-group > header span { color: var(--muted-2); font-size: 5px; }
.notification-row { position: relative; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.notification-row.read { opacity: .62; }
.notification-row .notification-item { min-height: 70px; border: 0; padding-bottom: 4px; }
.notification-quick { min-height: 27px; margin-left: 60px; border: 1px solid rgba(200,255,69,.18); border-radius: 8px; padding: 0 9px; background: rgba(200,255,69,.055); color: var(--lime); font-size: 6px; cursor: pointer; }
.notification-quick.active { border-color: var(--line); background: var(--surface); color: var(--muted); }

/* Enlaces y Embeds 1.0 */
.external-video-card { width: calc(100% - 24px); height: 196px; margin: 8px 12px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px; background-size: cover; background-position: center; color: white; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; text-align: left; }
.preview-post-card > .external-video-card { width: 100%; margin: 10px 0 0; }
.external-video-card.valorant-clip, .external-player-stage.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.external-video-card.backlog-meme, .external-player-stage.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.external-video-card::after, .external-player-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,5,9,.16), rgba(3,5,9,.08) 43%, rgba(3,5,9,.92)); }
.external-video-card > * { position: relative; z-index: 1; }
.external-provider { position: absolute; left: 9px; top: 9px; border-radius: 7px; padding: 5px 7px; background: rgba(4,6,11,.78); display: flex; align-items: center; gap: 5px; font-size: 5px; font-weight: 900; letter-spacing: .04em; }
.external-provider i { width: 14px; height: 14px; border-radius: 4px; background: #ff0033; display: grid; place-items: center; font-size: 6px; font-style: normal; }
.external-video-card.tiktok .external-provider i { background: #10141d; box-shadow: -2px 0 #2df5e5, 2px 0 #ff335f; }
.external-play { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.25); border-radius: 17px; background: rgba(5,7,12,.62); display: grid; place-items: center; backdrop-filter: blur(10px); }
.external-play .icon { width: 22px; margin-left: 2px; }
.external-video-card > em { position: absolute; right: 9px; bottom: 9px; border-radius: 6px; padding: 4px 6px; background: rgba(3,5,9,.72); font-size: 6px; font-style: normal; }
.external-video-copy { position: absolute; z-index: 1; left: 10px; right: 58px; bottom: 9px; }
.external-video-copy strong, .external-video-copy small { display: block; }
.external-video-copy strong { font-size: 9px; line-height: 1.3; }
.external-video-copy small { color: #c2c8d4; font-size: 5px; margin-top: 3px; }

.external-compose-block { margin-top: 9px; }
.external-divider { height: 24px; display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 5px; font-weight: 850; letter-spacing: .08em; }
.external-divider::before, .external-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.external-link-trigger { width: 100%; min-height: 61px; border: 1px solid rgba(139,108,255,.16); border-radius: 14px; padding: 8px 10px; background: linear-gradient(145deg, rgba(139,108,255,.065), rgba(77,232,255,.025)); color: var(--text); display: grid; grid-template-columns: 53px 1fr 12px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.external-link-trigger > .icon { width: 12px; color: var(--muted); }
.external-link-trigger strong, .external-link-trigger small { display: block; }
.external-link-trigger strong { font-size: 8px; }
.external-link-trigger small { color: var(--muted); font-size: 6px; line-height: 1.35; margin-top: 3px; }
.external-platform-icons { display: flex; }
.external-platform-icons i, .external-provider-logo { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center; color: white; font-size: 11px; font-style: normal; font-weight: 900; }
.external-platform-icons i + i { margin-left: -7px; border: 2px solid #111625; }
.external-platform-icons .youtube, .external-provider-logo.youtube { background: linear-gradient(145deg, #ff2447, #bb0020); }
.external-platform-icons .tiktok, .external-provider-logo.tiktok { background: #11151d; box-shadow: inset 2px 0 #24e8dc, inset -2px 0 #fa3159; }
.external-url-form { border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface); }
.external-url-form > label { display: block; color: #bbaaff; font-size: 5px; font-weight: 850; letter-spacing: .07em; margin-bottom: 6px; }
.external-url-form > div { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.external-url-form input { min-width: 0; height: 35px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 9px; outline: 0; background: #090d16; color: var(--text); font-size: 7px; }
.external-url-form input:focus { border-color: rgba(139,108,255,.4); box-shadow: 0 0 0 3px rgba(139,108,255,.08); }
.external-url-form > div > button { border: 0; border-radius: 9px; padding: 0 10px; background: var(--lime); color: #101600; font-size: 6px; font-weight: 850; cursor: pointer; }
.external-url-form > small { color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: 5px; line-height: 1.35; margin-top: 7px; }
.external-url-form > small .icon { width: 10px; color: var(--lime); }
.external-examples { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.external-examples > span { color: var(--muted-2); font-size: 5px; }
.external-examples button { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; background: var(--surface); color: var(--muted); font-size: 5px; cursor: pointer; }
.external-examples button:last-child { margin-left: auto; }
.external-checking { min-height: 69px; border: 1px solid rgba(139,108,255,.17); border-radius: 14px; padding: 10px; background: rgba(139,108,255,.05); display: grid; grid-template-columns: 25px 1fr; gap: 8px; align-items: center; }
.external-checking > .icon { width: 20px; color: #bbaaff; animation: media-pulse 1s ease-in-out infinite; }
.external-checking strong, .external-checking small { display: block; }
.external-checking strong { font-size: 8px; }
.external-checking small { color: var(--muted); font-size: 6px; margin-top: 2px; }
.external-checking i { display: block; height: 3px; margin-top: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.external-checking b { display: block; width: 48%; height: 100%; background: linear-gradient(90deg, #bbaaff, var(--cyan)); animation: upload-progress 1s ease-in-out infinite alternate; }
.external-link-status { min-height: 60px; margin-top: 7px; border: 1px solid rgba(255,113,133,.16); border-radius: 12px; padding: 8px; background: rgba(255,113,133,.045); display: grid; grid-template-columns: 21px 1fr auto; gap: 7px; align-items: center; }
.external-link-status.restricted { border-color: rgba(255,190,82,.17); background: rgba(255,190,82,.045); }
.external-link-status > .icon { width: 17px; color: #ff829b; }
.external-link-status.restricted > .icon { color: #ffc468; }
.external-link-status strong, .external-link-status small { display: block; }
.external-link-status strong { font-size: 7px; }
.external-link-status small { color: var(--muted); font-size: 5px; line-height: 1.35; margin-top: 2px; }
.external-link-status > button { border: 0; background: transparent; color: var(--lime); font-size: 5px; cursor: pointer; }
.external-compose-block.ready > .external-video-card { width: 100%; margin: 0; }
.external-ready-info { min-height: 49px; margin-top: 7px; border: 1px solid rgba(200,255,69,.14); border-radius: 12px; padding: 8px; background: rgba(200,255,69,.035); display: grid; grid-template-columns: 19px 1fr; gap: 7px; align-items: center; }
.external-ready-info > .icon { width: 15px; color: var(--lime); }
.external-ready-info strong, .external-ready-info small { display: block; }
.external-ready-info strong { font-size: 7px; }
.external-ready-info small { color: var(--muted); font-size: 5px; line-height: 1.4; margin-top: 2px; }
.external-compose-actions { display: flex; gap: 5px; margin-top: 6px; }
.external-compose-actions button { min-height: 27px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--muted); font-size: 5px; cursor: pointer; }
.external-compose-actions button:last-child { margin-left: auto; color: #ff8a9b; }

.external-player-sheet { max-height: calc(100% - 10px); }
.external-player-stage { height: 235px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background-size: cover; background-position: center; position: relative; overflow: hidden; display: grid; place-items: center; }
.external-player-stage > * { position: relative; z-index: 1; }
.external-player-stage.protected { align-content: center; justify-items: center; padding: 25px; text-align: center; }
.external-player-stage.protected::after { background: rgba(4,6,11,.78); backdrop-filter: blur(7px); }
.external-privacy-shield { width: 47px; height: 47px; border-radius: 16px; background: rgba(200,255,69,.11); color: var(--lime); display: grid; place-items: center; }
.external-privacy-shield .icon { width: 23px; }
.external-player-stage.protected > strong { font-size: 11px; margin-top: 9px; }
.external-player-stage.protected > p { max-width: 250px; color: #b9c0cd; font-size: 7px; line-height: 1.45; margin: 5px 0 10px; }
.external-player-stage.protected > button { min-height: 34px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--lime); color: #101600; display: flex; align-items: center; gap: 5px; font-size: 7px; font-weight: 850; cursor: pointer; }
.external-player-stage.protected > button .icon { width: 13px; }
.external-player-provider { position: absolute; left: 10px; top: 10px; border-radius: 7px; padding: 5px 7px; background: rgba(4,6,11,.72); display: flex; align-items: center; gap: 5px; font-size: 6px; font-weight: 800; }
.external-player-provider i { color: #ff4964; font-style: normal; }
.external-player-toggle { width: 55px; height: 55px; border: 1px solid rgba(255,255,255,.3); border-radius: 19px; background: rgba(4,6,11,.58); color: white; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(10px); }
.external-player-toggle .icon { width: 24px; }
.external-player-progress { position: absolute; left: 10px; right: 10px; bottom: 11px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.25); }
.external-player-progress i { display: block; height: 100%; border-radius: inherit; background: var(--lime); transition: width .2s; }
.external-player-progress span { position: absolute; right: 0; bottom: 7px; border-radius: 5px; padding: 3px 5px; background: rgba(4,6,11,.7); color: white; font-size: 5px; }
.external-player-meta { min-height: 62px; padding: 9px 2px; display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; }
.external-player-meta p { margin: 0; }
.external-player-meta strong, .external-player-meta small { display: block; }
.external-player-meta strong { font-size: 9px; line-height: 1.3; }
.external-player-meta small { color: var(--muted); font-size: 6px; margin-top: 3px; }
.external-player-actions { display: flex; gap: 6px; }
.external-player-actions button { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; background: var(--surface); color: var(--text); display: flex; align-items: center; gap: 5px; font-size: 6px; cursor: pointer; }
.external-player-actions button:first-child { flex: 1; justify-content: center; color: var(--lime); }
.external-player-actions .icon { width: 11px; }
.external-player-note { margin-top: 9px; border: 1px solid rgba(139,108,255,.12); border-radius: 11px; padding: 8px; background: rgba(139,108,255,.035); color: var(--muted); display: flex; gap: 6px; font-size: 5px; line-height: 1.4; }
.external-player-note .icon { flex: 0 0 auto; width: 12px; color: #bbaaff; }
.media-grid-item.external-grid.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.media-grid-item.external-grid.backlog-meme { background-image: url('assets/feed-backlog.webp'); }

/* Social 1.7 · Noticias y hubs de juegos */
.social-news-card { min-height: 0; padding: 0; display: block; cursor: default; position: relative; }
.social-news-card.unread { border-color: rgba(200,255,69,.17); box-shadow: inset 2px 0 0 rgba(200,255,69,.72); }
.social-news-card.read { opacity: .82; }
.news-card-main { width: 100%; min-height: 126px; border: 0; padding: 10px; background: transparent; color: var(--text); display: grid; grid-template-columns: 105px 1fr 13px; gap: 11px; align-items: center; text-align: left; cursor: pointer; }
.social-news-card.compact .news-card-main { min-height: 83px; grid-template-columns: 72px 1fr 13px; }
.news-card-main > .icon { width: 12px; color: var(--muted-2); }
.news-card-copy { min-width: 0; }
.news-card-copy .news-source { display: inline; }
.news-kind { display: inline-flex; width: fit-content; margin-left: 4px; border: 1px solid rgba(200,255,69,.18); border-radius: 99px; padding: 2px 5px; background: rgba(200,255,69,.055); color: var(--lime); font-size: 5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.news-kind.rumor { border-color: rgba(255,190,82,.22); background: rgba(255,190,82,.06); color: #ffc468; }
.news-kind.comunidad { border-color: rgba(128,222,255,.2); background: rgba(128,222,255,.05); color: var(--cyan); }
.news-kind.desmentido { border-color: rgba(255,113,133,.2); background: rgba(255,113,133,.055); color: #ff8ca0; }
.news-kind.actualizado { border-color: rgba(187,170,255,.22); background: rgba(187,170,255,.055); color: #c9baff; }
.news-card-copy small { display: flex; align-items: center; gap: 3px; line-height: 1.35; }
.news-card-copy small .icon { width: 9px; color: var(--lime); }
.news-visual { position: relative; }
.news-visual > i { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 6px; background: rgba(6,8,13,.72); color: var(--lime); display: grid; place-items: center; }
.news-visual > i .icon { width: 10px; }
.news-card-actions { border-top: 1px solid var(--line); padding: 5px 9px; display: flex; justify-content: flex-end; gap: 5px; }
.news-card-actions button { border: 0; border-radius: 7px; padding: 4px 6px; background: transparent; color: var(--muted-2); display: flex; align-items: center; gap: 3px; font-size: 5px; cursor: pointer; }
.news-card-actions button.active { color: var(--lime); background: rgba(200,255,69,.05); }
.news-card-actions .icon { width: 10px; }
.social-news-card.compact .news-card-actions { padding-top: 3px; padding-bottom: 3px; }

.news-radar-hero { margin: 0 13px 10px; min-height: 178px; border: 1px solid rgba(139,108,255,.2); border-radius: 22px; padding: 19px; background: radial-gradient(circle at 84% 18%, rgba(139,108,255,.24), transparent 28%), radial-gradient(circle at 5% 100%, rgba(79,222,255,.11), transparent 30%), linear-gradient(145deg,#111326,#090b14); position: relative; overflow: hidden; }
.news-radar-hero::after { content: ''; position: absolute; width: 155px; height: 155px; right: -52px; top: -54px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.025), 0 0 0 56px rgba(255,255,255,.018); }
.radar-orbit { width: 34px; height: 34px; border-radius: 11px; background: rgba(187,170,255,.13); color: #c8baff; display: grid; place-items: center; position: relative; z-index: 1; }
.radar-orbit .icon { width: 17px; }
.news-radar-hero > div:not(.radar-stats) { position: relative; z-index: 1; }
.news-radar-hero small { display: block; margin-top: 11px; color: #c9baff; font-size: 6px; font-weight: 900; letter-spacing: .11em; }
.news-radar-hero h1 { max-width: 260px; margin: 4px 0 5px; font-size: 24px; line-height: 1; letter-spacing: -.045em; }
.news-radar-hero p { max-width: 285px; margin: 0; color: #aeb7c7; font-size: 7px; line-height: 1.5; }
.radar-stats { margin-top: 12px; display: flex; gap: 6px; position: relative; z-index: 1; }
.radar-stats span { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 5px 7px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 6px; }
.radar-stats strong { color: white; font-size: 8px; }
.news-game-controls { padding: 0 13px 11px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.news-game-controls article { flex: 0 0 145px; min-height: 54px; border: 1px solid var(--line); border-radius: 13px; padding: 6px; background: var(--surface); display: grid; grid-template-columns: 1fr 25px; gap: 4px; }
.news-game-controls article.followed { border-color: rgba(200,255,69,.14); }
.news-game-controls article > button { border: 0; background: transparent; color: var(--text); cursor: pointer; }
.news-game-controls article > button:first-child { display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: center; text-align: left; }
.news-game-controls article > button:first-child > span { width: 28px; height: 28px; border-radius: 9px; background: rgba(139,108,255,.1); color: #c9baff; display: grid; place-items: center; font-size: 10px; font-weight: 950; }
.news-game-controls i { font-style: normal; min-width: 0; }
.news-game-controls strong, .news-game-controls small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-game-controls strong { font-size: 7px; }
.news-game-controls small { margin-top: 2px; color: var(--muted); font-size: 5px; }
.news-game-controls article > button:last-child { border-radius: 8px; color: var(--muted-2); display: grid; place-items: center; }
.news-game-controls article > button:last-child.active { background: rgba(200,255,69,.08); color: var(--lime); }
.news-game-controls .icon { width: 12px; }
.news-index-tabs { margin-top: 0; }
.news-index-tabs em { min-width: 14px; height: 14px; border-radius: 99px; background: var(--lime); color: #0c1004; display: inline-grid; place-items: center; font-size: 5px; font-style: normal; }
.news-filter-row { padding: 0 13px 11px; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.news-filter-row button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 99px; padding: 6px 8px; background: transparent; color: var(--muted); font-size: 6px; cursor: pointer; }
.news-filter-row button.active { border-color: rgba(200,255,69,.2); background: rgba(200,255,69,.065); color: var(--lime); }
.news-radar-results { padding: 0 13px 20px; }
.news-radar-results > .section-title { padding: 0 4px; }
.news-radar-results > .section-title > span { color: var(--muted-2); font-size: 6px; }
.news-radar-results > .news-list { margin-top: 7px; }
.news-empty-state { margin: 7px 13px 24px; min-height: 180px; border: 1px dashed var(--line-strong); border-radius: 17px; padding: 25px; display: grid; place-items: center; align-content: center; text-align: center; }
.news-empty-state > .icon { width: 25px; color: var(--muted-2); }
.news-empty-state strong { margin-top: 9px; font-size: 10px; }
.news-empty-state span { max-width: 245px; margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.news-empty-state button { margin-top: 11px; border: 0; border-radius: 9px; padding: 8px 11px; background: var(--lime); color: #101500; font-size: 7px; font-weight: 850; cursor: pointer; }
.muted-games-note { margin: -8px 13px 22px; border-radius: 10px; padding: 8px; background: rgba(255,255,255,.025); color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 6px; }
.muted-games-note .icon { width: 12px; }
.muted-games-note button { margin-left: auto; border: 0; background: transparent; color: var(--lime); font-size: 6px; cursor: pointer; }

.news-detail-labels { margin: 0 0 7px !important; align-items: center; }
.news-detail-labels .news-kind { margin: 0; }
.news-detail-labels > span:last-child:not(.news-kind) { color: #c9baff; font-size: 6px; }
.news-detail-actions { margin: 8px 13px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.news-detail-actions button { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 6px; cursor: pointer; }
.news-detail-actions button.active { border-color: rgba(200,255,69,.2); color: var(--lime); }
.news-detail-actions .icon { width: 12px; }
.news-credibility { margin: 8px 13px 0; border: 1px solid rgba(200,255,69,.14); border-radius: 15px; padding: 11px; background: rgba(200,255,69,.035); display: grid; grid-template-columns: 35px 1fr; gap: 9px; }
.news-credibility > span { width: 35px; height: 35px; border-radius: 11px; background: rgba(200,255,69,.08); color: var(--lime); display: grid; place-items: center; }
.news-credibility > span .icon { width: 17px; }
.news-credibility.rumor { border-color: rgba(255,190,82,.16); background: rgba(255,190,82,.035); }
.news-credibility.rumor > span { background: rgba(255,190,82,.08); color: #ffc468; }
.news-credibility.desmentido { border-color: rgba(255,113,133,.16); background: rgba(255,113,133,.035); }
.news-credibility small, .news-credibility strong, .news-credibility p, .news-credibility em { display: block; }
.news-credibility small { color: var(--muted-2); font-size: 5px; letter-spacing: .08em; }
.news-credibility strong { margin-top: 2px; font-size: 9px; }
.news-credibility p { margin: 3px 0 5px; color: var(--muted); font-size: 6px; line-height: 1.45; }
.news-credibility em { color: #bec5d1; font-size: 6px; font-style: normal; }
.news-alert-control { width: calc(100% - 26px); min-height: 57px; margin: 8px 13px 0; border: 1px solid var(--line); border-radius: 14px; padding: 9px 10px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 25px 1fr 27px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.news-alert-control > .icon { width: 17px; color: var(--muted-2); }
.news-alert-control.active > .icon { color: var(--lime); }
.news-alert-control strong, .news-alert-control small { display: block; }
.news-alert-control strong { font-size: 8px; }
.news-alert-control small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.news-conversation-link { margin: 8px 13px 0; border: 1px solid rgba(139,108,255,.16); border-radius: 15px; padding: 10px; background: rgba(139,108,255,.035); }
.news-conversation-link > div { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; }
.news-conversation-link > div > span { width: 34px; height: 34px; border-radius: 10px; background: rgba(139,108,255,.1); color: #c9baff; display: grid; place-items: center; }
.news-conversation-link .icon { width: 16px; }
.news-conversation-link p { margin: 0; }
.news-conversation-link small, .news-conversation-link strong, .news-conversation-link em { display: block; }
.news-conversation-link small { color: #bbaaff; font-size: 5px; }
.news-conversation-link strong { margin-top: 2px; font-size: 8px; }
.news-conversation-link em { margin-top: 2px; color: var(--muted); font-size: 6px; font-style: normal; }
.news-conversation-link > button { width: 100%; margin-top: 8px; border: 0; border-top: 1px solid var(--line); padding: 8px 0 0; background: transparent; color: #c9baff; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 7px; cursor: pointer; }

.game-hero-actions { position: absolute; z-index: 3; left: 14px; top: 14px; display: flex; gap: 5px; }
.game-hero-actions .follow-button { position: static; }
.game-quiet-action { width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(6,8,13,.55); color: white; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.game-quiet-action.active { color: #ffc468; }
.game-quiet-action .icon { width: 14px; }
.game-control-deck { margin: 8px 13px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.game-control-deck > button { min-height: 60px; border: 1px solid var(--line); border-radius: 13px; padding: 8px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; text-align: left; position: relative; cursor: pointer; }
.game-control-deck > button.active { border-color: rgba(200,255,69,.15); }
.game-control-deck > button > .icon { width: 15px; color: var(--muted-2); }
.game-control-deck > button.active > .icon { color: var(--lime); }
.game-control-deck strong, .game-control-deck small { display: block; }
.game-control-deck strong { font-size: 7px; line-height: 1.25; }
.game-control-deck small { margin-top: 3px; color: var(--muted); font-size: 5px; line-height: 1.35; }
.game-control-deck .toggle { position: absolute; right: 7px; bottom: 6px; transform: scale(.62); transform-origin: right bottom; }
.hub-muted-banner { margin: 7px 13px 0; border: 1px solid rgba(255,190,82,.15); border-radius: 12px; padding: 8px; background: rgba(255,190,82,.035); display: grid; grid-template-columns: 21px 1fr auto; gap: 6px; align-items: center; }
.hub-muted-banner > .icon { width: 15px; color: #ffc468; }
.hub-muted-banner strong, .hub-muted-banner small { display: block; }
.hub-muted-banner strong { font-size: 7px; }
.hub-muted-banner small { color: var(--muted); font-size: 5px; }
.hub-muted-banner button { border: 0; background: transparent; color: #ffc468; font-size: 6px; cursor: pointer; }
.game-hub-tabs { margin-top: 8px; }
.game-hub-content { padding-bottom: 4px; }
.hub-overview-stats { margin: 8px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; grid-template-columns: repeat(3,1fr); }
.hub-overview-stats div { min-height: 49px; display: grid; place-items: center; align-content: center; border-right: 1px solid var(--line); }
.hub-overview-stats div:last-child { border: 0; }
.hub-overview-stats strong { color: var(--lime); font-size: 13px; }
.hub-overview-stats span { margin-top: 2px; color: var(--muted); font-size: 5px; }
.hub-section { padding: 0 13px 9px; }
.hub-section > .section-title { padding: 0 4px; }
.hub-lead-news { padding-top: 0; }
.hub-more-news { margin-top: 6px; }
.hub-media-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.hub-media-card { min-height: 145px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 9px; background-size: cover; background-position: center; color: white; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; position: relative; overflow: hidden; cursor: pointer; }
.hub-media-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,6,10,.05),rgba(4,6,10,.9)); }
.hub-media-card > * { position: relative; z-index: 1; }
.hub-media-card.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.hub-media-card.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.hub-media-card.elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.hub-media-provider { margin-bottom: auto; border-radius: 6px; padding: 4px 5px; background: rgba(4,6,10,.68); font-size: 5px; font-weight: 850; }
.hub-media-card strong { font-size: 8px; line-height: 1.25; }
.hub-media-card small { margin-top: 3px; color: #c6ccd6; font-size: 5px; }
.hub-platform-note { margin-top: 6px; border-radius: 9px; padding: 7px; background: rgba(139,108,255,.035); color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 5px; }
.hub-platform-note .icon { width: 11px; color: #bbaaff; }
.hub-creators { display: grid; gap: 6px; }
.hub-empty { min-height: 145px; border: 1px dashed var(--line-strong); border-radius: 15px; padding: 24px; display: grid; place-items: center; align-content: center; text-align: center; }
.hub-empty .icon { width: 24px; color: var(--muted-2); }
.hub-empty strong { margin-top: 8px; font-size: 10px; }
.hub-empty span { max-width: 240px; margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.hub-muted-state { margin: 0 13px 10px; border: 1px dashed var(--line-strong); border-radius: 13px; padding: 13px; color: var(--muted); display: grid; grid-template-columns: 24px 1fr; gap: 7px; align-items: center; }
.hub-muted-state > .icon { width: 18px; }
.hub-muted-state strong, .hub-muted-state small { display: block; }
.hub-muted-state strong { color: var(--text); font-size: 8px; }
.hub-muted-state small { margin-top: 2px; font-size: 6px; line-height: 1.4; }

/* Social 1.8 · Perfiles sociales y creadores */
.public-profile-cover { background-size: cover; background-position: center; }
.public-profile-cover.luna { background: linear-gradient(135deg,rgba(63,34,123,.25),rgba(9,16,29,.58)),url('assets/feed-clutch.webp') center/cover; }
.public-profile-cover.panda { background: linear-gradient(135deg,rgba(240,107,72,.18),rgba(32,19,45,.7)),url('assets/feed-backlog.webp') center/cover; }
.public-profile-cover.kael { background: linear-gradient(135deg,rgba(12,62,63,.15),rgba(9,16,27,.68)),url('assets/feed-fantasy.webp') center/cover; }
.profile-identity-line { align-items: center; gap: 7px !important; flex-wrap: wrap; }
.profile-identity-line h1 { margin: 0; }
.profile-identity-line > span { border: 1px solid rgba(139,108,255,.18); border-radius: 99px; padding: 3px 6px; background: rgba(139,108,255,.055); color: #c9baff; font-size: 5px; }
.public-profile-copy .identity-chip { border-color: rgba(200,255,69,.17); color: var(--lime); }
.profile-public-meta { margin-top: 8px; flex-wrap: wrap; gap: 7px !important; color: var(--muted); }
.profile-public-meta > span, .profile-public-meta > button { border: 0; padding: 0; background: transparent; color: var(--muted); display: flex; align-items: center; gap: 3px; font-size: 6px; }
.profile-public-meta > button { color: #bcaeff; cursor: pointer; }
.profile-public-meta .icon { width: 10px; }
.public-profile-stats button { border: 0; border-right: 1px solid var(--line); padding: 9px 3px; background: var(--surface); color: var(--text); text-align: center; cursor: pointer; }
.public-profile-stats button:last-child { border: 0; }
.public-profile-stats button strong, .public-profile-stats button span { display: block; }
.public-profile-stats button strong { font-size: 11px; }
.public-profile-stats button span { margin-top: 2px; color: var(--muted); font-size: 6px; }
.profile-mutual-proof { width: calc(100% - 26px); min-height: 51px; margin: -2px 13px 9px; border: 1px solid rgba(139,108,255,.15); border-radius: 13px; padding: 8px 9px; background: rgba(139,108,255,.035); color: var(--text); display: grid; grid-template-columns: 68px 1fr 12px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.mutual-faces { display: flex; align-items: center; }
.mutual-faces i { width: 28px; height: 28px; margin-right: -6px; border: 2px solid #0b0e17; border-radius: 10px; color: white; display: grid; place-items: center; font-size: 6px; font-style: normal; font-weight: 900; }
.mutual-faces .luna { background: linear-gradient(145deg,#754cff,#e86fa6); }
.mutual-faces .jane { background: linear-gradient(145deg,#7855ff,#4d9aff); }
.mutual-faces .kael { background: linear-gradient(145deg,#127174,#46d9ca); color: #071514; }
.profile-mutual-proof strong, .profile-mutual-proof small { display: block; }
.profile-mutual-proof strong { font-size: 7px; }
.profile-mutual-proof small { margin-top: 2px; color: var(--muted); font-size: 5px; }
.profile-mutual-proof > .icon { width: 11px; color: var(--muted-2); }
.profile-featured-post { width: calc(100% - 26px); min-height: 118px; margin: 5px 13px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px; background-position: center; background-size: cover; color: white; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; position: relative; overflow: hidden; cursor: pointer; }
.profile-featured-post::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,6,10,.04),rgba(4,6,10,.9)); }
.profile-featured-post > * { position: relative; z-index: 1; }
.profile-featured-post.valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.profile-featured-post.backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.profile-featured-post.elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.profile-featured-post > span { margin-bottom: auto; border-radius: 6px; padding: 4px 6px; background: rgba(4,6,10,.65); color: var(--lime); font-size: 5px; font-weight: 900; }
.profile-featured-post strong { max-width: 275px; font-size: 10px; line-height: 1.25; }
.profile-featured-post small { margin-top: 3px; color: #c7cdd6; font-size: 6px; }
.profile-featured-post > .icon { position: absolute; right: 10px; bottom: 12px; width: 12px; }
.public-profile-tabs, .own-profile-tabs { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.public-profile-tabs::-webkit-scrollbar, .own-profile-tabs::-webkit-scrollbar { display: none; }
.public-profile-tabs button, .own-profile-tabs button { flex: 0 0 auto; min-width: 82px; }
.profile-content-filters { padding: 8px 13px 4px; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.profile-content-filters button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 99px; padding: 6px 8px; background: transparent; color: var(--muted); font-size: 6px; cursor: pointer; }
.profile-content-filters button.active { border-color: rgba(200,255,69,.19); background: rgba(200,255,69,.055); color: var(--lime); }
.public-collections-list { padding: 9px 13px 22px; display: grid; gap: 7px; }
.public-collection-card { min-height: 82px; border: 1px solid var(--line); border-radius: 15px; padding: 8px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 85px 1fr 12px; gap: 9px; align-items: center; text-align: left; cursor: pointer; }
.collection-preview { width: 85px; height: 62px; border-radius: 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; overflow: hidden; position: relative; }
.collection-preview > span { background-position: center; background-size: cover; }
.collection-preview .valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.collection-preview .backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.collection-preview .elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.collection-preview .news-card { background: linear-gradient(145deg,#754cff,#243f71); }
.collection-preview > i { position: absolute; right: 4px; bottom: 4px; min-width: 17px; height: 17px; border-radius: 6px; background: rgba(4,6,10,.72); color: white; display: grid; place-items: center; font-size: 6px; font-style: normal; }
.public-collection-card > span:nth-child(2) { min-width: 0; }
.public-collection-card strong, .public-collection-card small, .public-collection-card em { display: block; }
.public-collection-card strong { font-size: 8px; }
.public-collection-card small { margin-top: 3px; color: var(--muted); font-size: 6px; line-height: 1.35; }
.public-collection-card em { margin-top: 5px; color: #bcaeff; font-size: 5px; font-style: normal; }
.public-collection-card em .icon { width: 9px; vertical-align: middle; }
.public-collection-card > .icon { width: 11px; color: var(--muted-2); }
.collection-privacy-note { border: 1px solid rgba(139,108,255,.13); border-radius: 10px; padding: 8px; background: rgba(139,108,255,.03); color: var(--muted); display: flex; gap: 5px; font-size: 6px; line-height: 1.4; }
.collection-privacy-note .icon { flex: 0 0 auto; width: 11px; color: #bcaeff; }
.create-public-collection { min-height: 38px; border: 1px dashed rgba(200,255,69,.2); border-radius: 11px; background: rgba(200,255,69,.025); color: var(--lime); display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 7px; cursor: pointer; }
.create-public-collection .icon { width: 12px; }
.profile-suggestions { padding: 4px 13px 18px; }
.profile-suggestions > .section-title { padding: 0 4px; }
.profile-suggestions > div:last-child { display: grid; gap: 6px; }

.social-own-cover.cover-arcade { background: radial-gradient(circle at 78% 22%,rgba(255,70,112,.3),transparent 25%),linear-gradient(135deg,#5c213c,#2a1d54 52%,#102f45); }
.social-own-cover.cover-cozy { background: radial-gradient(circle at 73% 22%,rgba(255,190,82,.24),transparent 26%),linear-gradient(135deg,#5f422e,#273c3b 55%,#17233d); }
.profile-cover-mark { position: absolute; right: 14px; bottom: 12px; color: rgba(255,255,255,.58); font-size: 5px; font-style: normal; letter-spacing: .12em; }
.own-profile-actions .icon { width: 11px; }
.profile-link { width: fit-content; margin-top: 8px; border: 0; padding: 0; background: transparent; color: #bcaeff; display: flex; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; }
.profile-link .icon { width: 10px; }
.profile-identity-deck { margin: -4px 13px 10px; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.profile-identity-deck > span, .profile-identity-deck > button { flex: 0 0 auto; min-height: 27px; border: 1px solid var(--line); border-radius: 8px; padding: 0 7px; background: var(--surface); color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: 6px; }
.profile-identity-deck .identity-main { border-color: rgba(200,255,69,.16); color: var(--lime); }
.profile-identity-deck > button { color: #bcaeff; cursor: pointer; }
.profile-identity-deck .icon { width: 10px; }
.creator-dashboard-card { width: calc(100% - 26px); min-height: 77px; margin: 0 13px 10px; border: 1px solid rgba(139,108,255,.18); border-radius: 16px; padding: 10px; background: radial-gradient(circle at 95% 10%,rgba(139,108,255,.13),transparent 35%),rgba(139,108,255,.035); color: var(--text); display: grid; grid-template-columns: 36px 1fr 55px 11px; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.creator-dashboard-icon { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(145deg,#815fff,#4fcbe5); color: white; display: grid; place-items: center; }
.creator-dashboard-icon .icon { width: 17px; }
.creator-dashboard-card small, .creator-dashboard-card strong, .creator-dashboard-card em { display: block; }
.creator-dashboard-card small { color: #bcaeff; font-size: 5px; font-weight: 900; letter-spacing: .07em; }
.creator-dashboard-card strong { margin-top: 3px; font-size: 8px; line-height: 1.25; }
.creator-dashboard-card em { margin-top: 3px; color: var(--muted); font-size: 5px; font-style: normal; }
.creator-mini-chart { height: 35px; display: flex; align-items: end; gap: 3px; }
.creator-mini-chart i { flex: 1; height: 35%; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,#bcaeff,#5b67e6); }
.creator-mini-chart i:nth-child(2) { height: 52%; }.creator-mini-chart i:nth-child(3) { height: 43%; }.creator-mini-chart i:nth-child(4) { height: 76%; }.creator-mini-chart i:nth-child(5) { height: 92%; }
.creator-dashboard-card > .icon { width: 11px; color: var(--muted-2); }
.profile-featured-section { padding: 0 13px 10px; }
.profile-featured-section > .section-title { padding: 0 4px; }
.profile-featured-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.profile-featured-grid > button { min-height: 124px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 9px; background-position: center; background-size: cover; color: white; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; position: relative; overflow: hidden; cursor: pointer; }
.profile-featured-grid > button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(4,6,10,.03),rgba(4,6,10,.9)); }
.profile-featured-grid > button > * { position: relative; z-index: 1; }
.profile-featured-grid .valorant-clip { background-image: url('assets/feed-clutch.webp'); }
.profile-featured-grid .backlog-meme { background-image: url('assets/feed-backlog.webp'); }
.profile-featured-grid .elden-capture { background-image: url('assets/feed-fantasy.webp'); }
.profile-featured-grid span { margin-bottom: auto; border-radius: 5px; padding: 3px 5px; background: rgba(4,6,10,.62); color: var(--lime); font-size: 5px; font-weight: 900; }
.profile-featured-grid strong { font-size: 7px; line-height: 1.3; }
.profile-featured-grid small { margin-top: 3px; color: #c8ced8; font-size: 5px; }

.profile-editor-label { display: block; margin: 4px 2px 6px; color: var(--muted-2); font-size: 5px; font-weight: 900; letter-spacing: .1em; }
.profile-cover-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 12px; }
.profile-cover-picker button { min-height: 66px; border: 1px solid var(--line); border-radius: 11px; padding: 5px; background: var(--surface); color: var(--muted); cursor: pointer; }
.profile-cover-picker button.active { border-color: rgba(200,255,69,.34); color: var(--lime); box-shadow: 0 0 0 1px rgba(200,255,69,.08); }
.profile-cover-picker span { display: block; height: 39px; border-radius: 7px; }
.profile-cover-picker .cover-aurora span { background: linear-gradient(135deg,#7043d5,#245c76); }.profile-cover-picker .cover-arcade span { background: linear-gradient(135deg,#a43f63,#2f296d); }.profile-cover-picker .cover-cozy span { background: linear-gradient(135deg,#9b6b43,#31524b); }
.profile-cover-picker strong { display: block; margin-top: 4px; font-size: 6px; }
.profile-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.profile-editor-grid label { min-width: 0; }
.profile-editor-grid label.wide { grid-column: 1 / -1; position: relative; }
.profile-editor-grid label > span { display: block; margin: 0 2px 4px; color: var(--muted-2); font-size: 5px; font-weight: 850; }
.profile-editor-grid input, .profile-editor-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px; background: rgba(255,255,255,.025); color: var(--text); outline: none; font: inherit; font-size: 7px; }
.profile-editor-grid textarea { min-height: 70px; resize: none; line-height: 1.5; }
.profile-editor-grid input:focus, .profile-editor-grid textarea:focus { border-color: rgba(139,108,255,.38); }
.profile-editor-grid label.wide small { position: absolute; right: 8px; bottom: 7px; color: var(--muted-2); font-size: 5px; }
.profile-editor-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.profile-editor-controls > button { min-height: 52px; border: 1px solid var(--line); border-radius: 11px; padding: 8px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 18px 1fr 13px; gap: 6px; align-items: center; text-align: left; position: relative; cursor: pointer; }
.profile-editor-controls > button.active { border-color: rgba(200,255,69,.15); }
.profile-editor-controls > button > .icon { width: 14px; color: #bcaeff; }
.profile-editor-controls strong, .profile-editor-controls small { display: block; }
.profile-editor-controls strong { font-size: 7px; }
.profile-editor-controls small { margin-top: 2px; color: var(--muted); font-size: 5px; line-height: 1.3; }
.profile-editor-controls > button > .icon:last-child { width: 10px; color: var(--muted-2); }
.profile-editor-controls .toggle { position: absolute; right: 6px; bottom: 5px; transform: scale(.6); transform-origin: right bottom; }
.profile-editor-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7px; margin-top: 12px; }

.relation-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.03); }
.relation-tabs button { min-height: 31px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 6px; cursor: pointer; }
.relation-tabs button.active { background: var(--surface-3); color: var(--lime); }
.relation-list { display: grid; gap: 6px; margin-top: 9px; }
.relation-list article { min-height: 65px; border: 1px solid var(--line); border-radius: 13px; padding: 7px; background: var(--surface); display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.relation-list article > button:first-child { min-width: 0; border: 0; background: transparent; color: var(--text); display: grid; grid-template-columns: 35px 1fr; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.relation-list strong, .relation-list small, .relation-list em { display: block; }
.relation-list strong { font-size: 8px; }.relation-list small { margin-top: 2px; color: var(--muted); font-size: 6px; }.relation-list em { margin-top: 3px; color: #bcaeff; font-size: 5px; font-style: normal; }
.relation-list article > button:last-child { border: 1px solid rgba(200,255,69,.2); border-radius: 8px; padding: 6px 8px; background: var(--lime); color: #101500; font-size: 6px; font-weight: 850; cursor: pointer; }
.relation-list article > button:last-child.active { border-color: var(--line); background: var(--surface-2); color: var(--muted); }
.relations-privacy-note { margin-top: 9px; border-radius: 9px; padding: 8px; background: rgba(139,108,255,.035); color: var(--muted); display: flex; gap: 5px; font-size: 5px; line-height: 1.4; }
.relations-privacy-note .icon { width: 11px; color: #bcaeff; }

.insight-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.insight-summary article { min-height: 91px; border: 1px solid var(--line); border-radius: 13px; padding: 9px; background: var(--surface); position: relative; }
.insight-summary article > span { width: 25px; height: 25px; border-radius: 8px; background: rgba(139,108,255,.08); color: #bcaeff; display: grid; place-items: center; }
.insight-summary article .icon { width: 13px; }
.insight-summary strong, .insight-summary small { display: block; }.insight-summary strong { margin-top: 8px; font-size: 13px; }.insight-summary small { color: var(--muted); font-size: 5px; }.insight-summary em { position: absolute; right: 7px; top: 8px; color: var(--lime); font-size: 5px; font-style: normal; }
.insight-chart { margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--surface); }
.insight-chart header { display: flex; justify-content: space-between; align-items: start; }.insight-chart header strong, .insight-chart header small { display: block; }.insight-chart header strong { font-size: 8px; }.insight-chart header small { color: var(--muted); font-size: 5px; margin-top: 2px; }.insight-chart header em { color: var(--lime); font-size: 10px; font-style: normal; font-weight: 900; }
.insight-chart > div { height: 105px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; gap: 7px; align-items: end; }
.insight-chart > div i { flex: 1; height: var(--bar); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,#9d82ff,#424fba); position: relative; }
.insight-chart > div i span { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); color: var(--muted-2); font-size: 5px; font-style: normal; }
.insight-best { margin-top: 20px; }.insight-best > .eyebrow { color: #bcaeff; font-size: 5px; font-weight: 900; }.insight-best > button { width: 100%; min-height: 61px; margin-top: 5px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 60px 1fr 11px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }.insight-best > button > span { height: 48px; border-radius: 8px; background: url('assets/feed-clutch.webp') center/cover; }.insight-best p { margin: 0; }.insight-best strong, .insight-best small { display: block; }.insight-best strong { font-size: 7px; line-height: 1.3; }.insight-best small { margin-top: 3px; color: var(--muted); font-size: 5px; }.insight-best .icon { width: 10px; color: var(--muted-2); }
.insight-advice { margin-top: 8px; border: 1px solid rgba(200,255,69,.13); border-radius: 11px; padding: 9px; background: rgba(200,255,69,.03); display: grid; grid-template-columns: 20px 1fr; gap: 6px; }.insight-advice > .icon { width: 15px; color: var(--lime); }.insight-advice strong, .insight-advice small { display: block; }.insight-advice strong { font-size: 7px; }.insight-advice small { margin-top: 2px; color: var(--muted); font-size: 5px; line-height: 1.4; }
.creator-tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }.creator-tool-actions button { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 6px; cursor: pointer; }.creator-tool-actions button:first-child { border-color: rgba(200,255,69,.17); color: var(--lime); }.creator-tool-actions .icon { width: 11px; }

.creator-menu-actions { display: grid; gap: 6px; }.creator-menu-actions > button { min-height: 60px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 22px 1fr 13px; gap: 7px; align-items: center; text-align: left; position: relative; cursor: pointer; }.creator-menu-actions > button > .icon { width: 16px; color: var(--muted); }.creator-menu-actions > button > .icon:last-child { width: 10px; color: var(--muted-2); }.creator-menu-actions strong, .creator-menu-actions small { display: block; }.creator-menu-actions strong { font-size: 8px; }.creator-menu-actions small { margin-top: 2px; color: var(--muted); font-size: 6px; }.creator-menu-actions .toggle { position: absolute; right: 7px; bottom: 7px; transform: scale(.65); transform-origin: right bottom; }.creator-menu-actions .danger > .icon, .creator-menu-actions .danger strong { color: #ff8298; }

.collection-owner { width: 100%; min-height: 55px; border: 1px solid rgba(139,108,255,.13); border-radius: 12px; padding: 7px; background: rgba(139,108,255,.03); color: var(--text); display: grid; grid-template-columns: 35px 1fr 11px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }.collection-owner strong, .collection-owner small { display: block; }.collection-owner strong { font-size: 8px; }.collection-owner small { margin-top: 2px; color: var(--muted); font-size: 6px; }.collection-owner > .icon { width: 10px; color: var(--muted-2); }
.collection-sheet-list { display: grid; gap: 6px; margin-top: 8px; }.collection-sheet-list > button { min-height: 68px; border: 1px solid var(--line); border-radius: 13px; padding: 6px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 70px 1fr 11px; gap: 8px; align-items: center; text-align: left; cursor: pointer; }.collection-sheet-list > button > span { height: 55px; border-radius: 9px; background-position: center; background-size: cover; position: relative; overflow: hidden; }.collection-sheet-list .valorant-clip { background-image: url('assets/feed-clutch.webp'); }.collection-sheet-list .backlog-meme { background-image: url('assets/feed-backlog.webp'); }.collection-sheet-list .elden-capture { background-image: url('assets/feed-fantasy.webp'); }.collection-sheet-list .news-card { background: linear-gradient(145deg,#754cff,#243f71); }.collection-sheet-list span i { position: absolute; left: 4px; bottom: 4px; border-radius: 5px; padding: 3px 4px; background: rgba(4,6,10,.7); color: var(--lime); font-size: 5px; font-style: normal; }.collection-sheet-list p { margin: 0; }.collection-sheet-list strong, .collection-sheet-list small { display: block; }.collection-sheet-list strong { font-size: 8px; line-height: 1.3; }.collection-sheet-list small { margin-top: 3px; color: var(--muted); font-size: 6px; }.collection-sheet-list > button > .icon { width: 10px; color: var(--muted-2); }.collection-sheet-note { margin-top: 8px; border-radius: 9px; padding: 8px; background: rgba(139,108,255,.03); color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 5px; }.collection-sheet-note .icon { width: 11px; color: #bcaeff; }

/* Social 1.9 · Mensajería y círculos sociales */
.message-trigger { position: relative; }
.message-trigger > span { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border: 2px solid var(--surface); border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px rgba(200,255,69,.68); }
.messages-screen .screen-scroll { padding-bottom: 38px; }
.messages-privacy-promise { margin: 0 13px 9px; border: 1px solid rgba(200,255,69,.13); border-radius: 12px; padding: 8px 9px; background: rgba(200,255,69,.025); display: grid; grid-template-columns: 17px 1fr auto; gap: 7px; align-items: center; }
.messages-privacy-promise > .icon { width: 14px; color: var(--lime); }
.messages-privacy-promise strong, .messages-privacy-promise small { display: block; }.messages-privacy-promise strong { font-size: 7px; }.messages-privacy-promise small { margin-top: 2px; color: var(--muted); font-size: 5px; }
.messages-privacy-promise button { border: 0; background: transparent; color: var(--lime); font-size: 6px; cursor: pointer; }
.inbox-hero { min-height: 126px; margin: 0 13px 10px; border: 1px solid rgba(139,108,255,.16); border-radius: 18px; padding: 14px; background: radial-gradient(circle at 92% 8%,rgba(139,108,255,.22),transparent 36%),radial-gradient(circle at 3% 98%,rgba(77,232,255,.09),transparent 40%),var(--surface); display: grid; grid-template-columns: 1fr 123px; gap: 11px; align-items: end; overflow: hidden; position: relative; }
.inbox-hero::after { content: '↗'; position: absolute; right: 13px; top: -17px; color: rgba(255,255,255,.035); font-size: 94px; font-weight: 950; transform: rotate(-12deg); pointer-events: none; }
.inbox-hero .eyebrow { color: #bcaeff; font-size: 5px; font-weight: 900; letter-spacing: .11em; }.inbox-hero h1 { margin: 5px 0; max-width: 190px; font-size: 18px; line-height: 1.02; letter-spacing: -.045em; }.inbox-hero p { margin: 0; color: var(--muted); font-size: 6px; line-height: 1.45; }
.inbox-hero > button { z-index: 1; min-height: 50px; border: 1px solid var(--line); border-radius: 11px; padding: 7px; background: rgba(4,7,12,.55); color: var(--text); display: grid; grid-template-columns: 7px 1fr 10px; gap: 6px; align-items: center; text-align: left; cursor: pointer; }.inbox-hero > button.active { border-color: rgba(200,255,69,.2); }.inbox-hero > button > i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }.inbox-hero > button.active > i { background: var(--lime); box-shadow: 0 0 8px rgba(200,255,69,.55); }.inbox-hero button strong, .inbox-hero button small { display: block; }.inbox-hero button strong { font-size: 7px; }.inbox-hero button small { margin-top: 2px; color: var(--muted); font-size: 5px; line-height: 1.25; }.inbox-hero button .icon { width: 9px; color: var(--muted-2); }
.message-search { height: 39px; margin: 0 13px 8px; border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; background: var(--surface); display: flex; gap: 7px; align-items: center; }.message-search > .icon { width: 14px; color: var(--muted); }.message-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 7px; }.message-search button { border: 0; background: transparent; color: var(--lime); font-size: 6px; cursor: pointer; }
.inbox-tabs { padding: 0 13px; overflow-x: auto; scrollbar-width: none; }.inbox-tabs::-webkit-scrollbar { display: none; }.inbox-tabs button { flex: 0 0 auto; padding: 9px 8px 10px; font-size: 6px; }.inbox-tabs button i { min-width: 13px; height: 13px; margin-left: 3px; border-radius: 6px; padding: 0 3px; background: rgba(139,108,255,.14); color: #bcaeff; display: inline-grid; place-items: center; font-style: normal; font-size: 5px; }
.conversation-list { padding: 9px 13px 4px; }.conversation-list-head { padding: 0 4px 5px; display: flex; justify-content: space-between; color: var(--muted-2); font-size: 5px; font-weight: 900; letter-spacing: .08em; }.conversation-list-head em { font-style: normal; font-weight: 500; letter-spacing: 0; }
.conversation-row { border-bottom: 1px solid rgba(255,255,255,.045); }.conversation-row > button { width: 100%; min-height: 70px; border: 0; padding: 8px 4px; background: transparent; color: var(--text); display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: 1fr auto; gap: 1px 8px; align-items: center; text-align: left; position: relative; cursor: pointer; }.conversation-row > button:hover { background: rgba(255,255,255,.02); }.conversation-row > button > span:first-child { grid-column: 1; grid-row: 1 / 3; }.conversation-row > button > span:nth-child(2) { min-width: 0; grid-column: 2; grid-row: 1 / 3; }.conversation-row strong, .conversation-row small, .conversation-row em { display: block; }.conversation-row strong { font-size: 8px; }.conversation-row strong i { color: var(--muted); font-size: 5px; font-style: normal; }.conversation-row small { margin-top: 3px; color: var(--muted); font-size: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversation-row small .icon { width: 9px; display: inline-block; vertical-align: middle; color: #bcaeff; }.conversation-row em { margin-top: 3px; color: var(--muted-2); font-size: 5px; font-style: normal; }.conversation-row time { grid-column: 3; grid-row: 2; align-self: end; color: var(--muted-2); font-size: 5px; }.conversation-row b { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; min-width: 16px; height: 16px; border-radius: 7px; padding: 0 4px; background: var(--lime); color: #101500; display: grid; place-items: center; font-size: 5px; }.conversation-row b.muted { background: rgba(255,255,255,.05); color: var(--muted); }.conversation-row b.muted .icon { width: 9px; }.conversation-row.unread strong { color: var(--lime); }
.creator-avatar { position: relative; }.chat-online-dot { position: absolute; right: -1px; bottom: 0; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; background: var(--lime); }
.group-chat-avatar { width: 42px; height: 42px; position: relative; display: block; }.group-chat-avatar i { position: absolute; width: 28px; height: 28px; border: 2px solid var(--bg); border-radius: 10px; display: grid; place-items: center; color: white; font-size: 6px; font-style: normal; font-weight: 900; }.group-chat-avatar i:first-child { left: 0; top: 0; }.group-chat-avatar i:nth-child(2) { right: 0; top: 3px; }.group-chat-avatar i:nth-child(3) { left: 8px; bottom: 0; }.group-chat-avatar.large { width: 60px; height: 60px; }.group-chat-avatar.large i { width: 39px; height: 39px; font-size: 8px; border-radius: 13px; }
.group-chat-avatar i.panda { background: linear-gradient(145deg,#ff7b4a,#d73c85); }.group-chat-avatar i.jane { background: linear-gradient(145deg,#7855ff,#4d9aff); }.group-chat-avatar i.kael { background: linear-gradient(145deg,#127174,#46d9ca); color:#071514; }.group-chat-avatar i.news { background: linear-gradient(145deg,var(--lime),#48a76b); color:#101700; }.group-chat-avatar i.luna { background: linear-gradient(145deg,#754cff,#e86fa6); }
.message-requests, .circles-inbox { padding: 10px 13px 20px; }.request-explainer { min-height: 52px; border: 1px solid rgba(139,108,255,.13); border-radius: 11px; padding: 8px; background: rgba(139,108,255,.03); display: grid; grid-template-columns: 16px 1fr; gap: 7px; align-items: center; }.request-explainer > .icon { width: 13px; color: #bcaeff; }.request-explainer strong, .request-explainer small { display: block; }.request-explainer strong { font-size: 7px; }.request-explainer small { margin-top: 2px; color: var(--muted); font-size: 5px; }
.message-requests > article { margin-top: 7px; border: 1px solid var(--line); border-radius: 14px; padding: 9px; background: var(--surface); }.message-requests > article > div:first-child { display: grid; grid-template-columns: 42px 1fr; gap: 8px; }.message-requests article p { margin: 0; }.message-requests article strong, .message-requests article small, .message-requests article em { display: block; }.message-requests article strong { font-size: 8px; }.message-requests article small { color: var(--muted); font-size: 5px; }.message-requests article em { margin-top: 6px; color: #c8ced8; font-size: 6px; line-height: 1.45; font-style: normal; }.message-requests > article > div:last-child { margin-top: 8px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }.message-requests article div:last-child button { min-height: 31px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 6px; cursor: pointer; }.message-requests article div:last-child button.accept { border-color: var(--lime); background: var(--lime); color: #101500; font-weight: 850; }
.message-empty { min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--muted); text-align: center; }.message-empty > .icon { width: 24px; margin-bottom: 8px; color: var(--muted-2); }.message-empty strong { color: var(--text); font-size: 8px; }.message-empty span { max-width: 200px; margin-top: 3px; font-size: 6px; line-height: 1.4; }
.circles-inbox > .section-title { margin: 1px 3px 3px; }.circles-inbox > p { margin: 0 3px 9px; color: var(--muted); font-size: 6px; }.circles-inbox > div:last-child { display: grid; gap: 6px; }.circle-inbox-card { min-height: 67px; border: 1px solid var(--line); border-radius: 14px; padding: 8px; background: var(--surface); color: var(--text); display: grid; grid-template-columns: 39px 1fr 18px 10px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }.circle-inbox-card > span { width: 39px; height: 39px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: 900; }.circle-inbox-card.violet > span { background: linear-gradient(145deg,#6e4fe4,#aa6de8); }.circle-inbox-card.cyan > span { background: linear-gradient(145deg,#148597,#4de8ff); color: #071416; }.circle-inbox-card.lime > span { background: linear-gradient(145deg,#629f31,#c8ff45); color: #101500; }.circle-inbox-card p { margin: 0; min-width: 0; }.circle-inbox-card strong, .circle-inbox-card small { display: block; }.circle-inbox-card strong { font-size: 8px; }.circle-inbox-card small { margin-top: 3px; color: var(--muted); font-size: 5px; line-height: 1.3; }.circle-inbox-card > i { width: 18px; height: 18px; border-radius: 7px; background: rgba(139,108,255,.08); color: #bcaeff; display: grid; place-items: center; }.circle-inbox-card > i .icon { width: 9px; }.circle-inbox-card > .icon { width: 9px; color: var(--muted-2); }
.message-share-target { min-height: 72px; margin: 0 13px 10px; border: 1px solid rgba(200,255,69,.18); border-radius: 14px; padding: 7px; background: rgba(200,255,69,.025); display: grid; grid-template-columns: 74px 1fr 21px; gap: 8px; align-items: center; }.message-share-target > span { height: 56px; border-radius: 9px; background-position: center; background-size: cover; }.message-share-target .valorant-clip { background-image: url('assets/feed-clutch.webp'); }.message-share-target .backlog-meme { background-image: url('assets/feed-backlog.webp'); }.message-share-target .elden-capture { background-image: url('assets/feed-fantasy.webp'); }.message-share-target .news-card { background: linear-gradient(145deg,#754cff,#243f71); }.message-share-target p { margin: 0; }.message-share-target small, .message-share-target strong, .message-share-target em { display: block; }.message-share-target small { color: var(--lime); font-size: 5px; font-weight: 900; }.message-share-target strong { margin-top: 3px; font-size: 7px; line-height: 1.25; }.message-share-target em { margin-top: 3px; color: var(--muted); font-size: 5px; font-style: normal; }.message-share-target > button { border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.archived-conversations { width: calc(100% - 26px); min-height: 34px; margin: 6px 13px 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 9px; background: var(--surface); color: var(--muted); display: flex; gap: 5px; align-items: center; font-size: 6px; cursor: pointer; }.archived-conversations .icon { width: 11px; }.archived-conversations span { margin-left: auto; color: var(--lime); }

.conversation-screen { display: grid; grid-template-rows: 58px minmax(0,1fr) auto; }
.conversation-topbar { border-bottom: 1px solid var(--line); padding: 7px 10px; background: rgba(5,7,13,.95); display: grid; grid-template-columns: 32px 1fr 32px; gap: 5px; align-items: center; backdrop-filter: blur(18px); }.conversation-topbar > button { border: 0; background: transparent; color: var(--text); cursor: pointer; }.conversation-topbar > button:first-child, .conversation-topbar > button:last-child { width: 32px; height: 32px; display: grid; place-items: center; }.conversation-topbar > button > .icon { width: 17px; }.conversation-person { min-width: 0; display: grid; grid-template-columns: 35px 1fr; gap: 7px; align-items: center; text-align: left; }.conversation-person > span:nth-child(2) { min-width: 0; }.conversation-person strong, .conversation-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversation-person strong { font-size: 8px; }.conversation-person small { margin-top: 2px; color: var(--muted); font-size: 5px; }
.conversation-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px 12px 16px; scrollbar-width: none; background: radial-gradient(circle at 78% 7%,rgba(139,108,255,.055),transparent 28%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:auto,28px 28px,28px 28px; }.conversation-body::-webkit-scrollbar { display:none; }
.chat-safety-note { width: fit-content; margin: 0 auto 10px; border-radius: 8px; padding: 5px 7px; background: rgba(139,108,255,.04); color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: 5px; }.chat-safety-note .icon { width: 9px; color: #bcaeff; }.chat-day { margin: 6px 0 10px; display: flex; align-items: center; gap: 8px; }.chat-day::before, .chat-day::after { content:''; height:1px; flex:1; background:var(--line); }.chat-day span { color: var(--muted-2); font-size: 5px; font-weight: 900; letter-spacing: .08em; }
.message-line { margin: 8px 0; display: flex; gap: 6px; align-items: end; }.message-line.mine { justify-content: flex-end; }.message-line > button { border:0; padding:0; background:transparent; cursor:pointer; }.message-line > div { max-width: 78%; min-width: 0; }.message-line.mine > div { display:flex; flex-direction:column; align-items:flex-end; }.message-author { min-height: 8px; margin: 0 5px 2px; color: #bcaeff; font-size: 5px; }.message-bubble { border: 1px solid var(--line); border-radius: 13px 13px 13px 4px; padding: 8px 9px; background: var(--surface-2); color: #e9ebf1; box-shadow: 0 5px 18px rgba(0,0,0,.12); }.mine .message-bubble { border-color: rgba(139,108,255,.22); border-radius: 13px 13px 4px 13px; background: linear-gradient(145deg,rgba(106,78,217,.83),rgba(74,61,157,.88)); }.message-bubble > small { display:block; margin-bottom:4px; color:#c8bfff; font-size:5px; font-weight:850; }.message-bubble .message-reply-context { max-width: 180px; border-left: 2px solid var(--lime); padding-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dde6c3; }.message-bubble p { margin:0; font-size:7px; line-height:1.45; overflow-wrap:anywhere; }.message-line footer { margin: 3px 2px 0; display:flex; gap:4px; align-items:center; justify-content:flex-end; color:var(--muted-2); font-size:5px; }.message-line footer time { margin-right:1px; }.message-line footer button { width:17px; height:16px; border:0; border-radius:6px; padding:0; background:transparent; color:var(--muted-2); display:grid; place-items:center; cursor:pointer; }.message-line footer button:hover, .message-line footer button.active { background:rgba(255,255,255,.05); color:#ff9bad; }.message-line footer .icon { width:9px; }.message-reaction { margin-top:-9px; margin-right:4px; border:1px solid var(--line); border-radius:8px; padding:2px 4px; background:var(--surface); font-size:7px; font-style:normal; }
.chat-shared-post { width: 220px; max-width: 100%; min-height: 72px; margin-top: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 5px; background: rgba(4,7,12,.44); color: white; display: grid; grid-template-columns: 70px 1fr 9px; gap: 7px; align-items: center; text-align: left; cursor: pointer; }.chat-shared-post > span:first-child { height: 58px; border-radius: 7px; background-position: center; background-size: cover; }.chat-shared-post .valorant-clip { background-image: url('assets/feed-clutch.webp'); }.chat-shared-post .backlog-meme { background-image: url('assets/feed-backlog.webp'); }.chat-shared-post .elden-capture { background-image: url('assets/feed-fantasy.webp'); }.chat-shared-post .news-card { background:linear-gradient(145deg,#754cff,#243f71); }.chat-shared-post small, .chat-shared-post strong, .chat-shared-post em { display:block; }.chat-shared-post small { color:var(--lime); font-size:4px; }.chat-shared-post strong { margin-top:3px; font-size:6px; line-height:1.25; }.chat-shared-post em { margin-top:4px; color:#aeb5c5; font-size:5px; font-style:normal; }.chat-shared-post > .icon { width:8px; color:var(--muted); }
.typing-indicator { margin: 10px 0 0; display:flex; gap:5px; align-items:center; color:var(--muted); }.typing-indicator > span:nth-child(2) { min-width:35px; height:23px; border:1px solid var(--line); border-radius:10px 10px 10px 4px; background:var(--surface-2); display:flex; justify-content:center; align-items:center; gap:3px; }.typing-indicator i { width:4px; height:4px; border-radius:50%; background:var(--muted); animation:typing-dot 1.2s infinite ease-in-out; }.typing-indicator i:nth-child(2){animation-delay:.15s}.typing-indicator i:nth-child(3){animation-delay:.3s}.typing-indicator small{font-size:5px;}@keyframes typing-dot{0%,60%,100%{transform:translateY(1px);opacity:.45}30%{transform:translateY(-2px);opacity:1}}
.message-composer-wrap { border-top:1px solid var(--line); padding:7px 10px 8px; background:rgba(9,12,20,.97); backdrop-filter:blur(18px); }.message-composer { min-height:39px; border:1px solid var(--line); border-radius:13px; padding:4px; background:var(--surface); display:grid; grid-template-columns:29px 1fr 27px 31px; gap:3px; align-items:center; }.message-composer button { width:28px; height:28px; border:0; border-radius:9px; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }.message-composer button .icon { width:14px; }.message-composer input { min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:7px; }.message-composer button.send-message { background:var(--lime); color:#101500; }.message-composer-wrap > small { margin-top:4px; color:var(--muted-2); display:flex; justify-content:center; align-items:center; gap:3px; font-size:4px; }.message-composer-wrap > small .icon { width:7px; }.message-reply-preview { min-height:32px; margin-bottom:5px; border-left:2px solid var(--violet); padding:4px 5px; display:grid; grid-template-columns:13px 1fr 18px; gap:5px; align-items:center; }.message-reply-preview > .icon { width:11px; color:#bcaeff; }.message-reply-preview strong, .message-reply-preview small { display:block; }.message-reply-preview strong { color:#bcaeff; font-size:5px; }.message-reply-preview small { max-width:270px; color:var(--muted); font-size:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.message-reply-preview button { border:0; background:transparent; color:var(--muted); cursor:pointer; }

.circle-hero { min-height:148px; margin:0 13px 9px; border:1px solid rgba(139,108,255,.18); border-radius:19px; padding:15px; display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; position:relative; overflow:hidden; }.circle-hero.violet { background:radial-gradient(circle at 92% 8%,rgba(170,109,232,.3),transparent 38%),linear-gradient(145deg,#17152b,#111828); }.circle-hero.cyan { background:radial-gradient(circle at 92% 8%,rgba(77,232,255,.22),transparent 38%),linear-gradient(145deg,#102329,#111828); }.circle-hero.lime { background:radial-gradient(circle at 92% 8%,rgba(200,255,69,.2),transparent 38%),linear-gradient(145deg,#192312,#111828); }.circle-symbol { width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:23px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }.circle-hero small { color:#bcaeff; font-size:5px; font-weight:900; letter-spacing:.1em; }.circle-hero h1 { margin:4px 0; font-size:19px; letter-spacing:-.04em; }.circle-hero p { margin:0; color:#abb2c1; font-size:6px; line-height:1.45; }.circle-hero > button { position:absolute; right:10px; top:10px; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:5px 7px; background:rgba(4,7,12,.45); color:#d8dbe3; display:flex; align-items:center; gap:4px; font-size:5px; cursor:pointer; }.circle-hero > button .icon { width:9px; }
.circle-summary { margin:0 13px 10px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.circle-summary > div { min-height:50px; border:1px solid var(--line); border-radius:11px; background:var(--surface); display:flex; flex-direction:column; justify-content:center; align-items:center; }.circle-summary strong,.circle-summary span{display:block}.circle-summary strong{font-size:11px}.circle-summary span{margin-top:2px;color:var(--muted);font-size:5px}.circle-members { padding:2px 13px 8px; }.circle-members > div:last-child { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }.circle-members > div:last-child::-webkit-scrollbar{display:none}.circle-members > div:last-child button { flex:0 0 auto; width:58px; border:0; padding:0; background:transparent; color:var(--text); display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }.circle-members > div:last-child strong { max-width:58px; font-size:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.circle-actions { padding:4px 13px 10px; display:grid; grid-template-columns:1.45fr 1fr; gap:6px; }.circle-actions button { min-height:37px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--muted); display:flex; justify-content:center; align-items:center; gap:4px; font-size:6px; font-weight:800; cursor:pointer; }.circle-actions button.primary { border-color:var(--lime); background:var(--lime); color:#101500; }.circle-actions .icon{width:11px}.circle-feed { padding:0 13px 20px; }.circle-feed-note { border:1px solid rgba(139,108,255,.12); border-radius:9px; padding:7px; background:rgba(139,108,255,.025); color:var(--muted); display:flex; gap:5px; font-size:5px; line-height:1.4; }.circle-feed-note .icon{flex:0 0 auto;width:10px;color:#bcaeff}.circle-feed .social-feed{padding:0}.circle-post-wrap{position:relative}.circle-audience-label{position:absolute;z-index:4;right:8px;top:8px;border:1px solid rgba(139,108,255,.2);border-radius:7px;padding:3px 5px;background:rgba(9,8,18,.82);color:#c8bfff;font-size:5px;font-weight:850;backdrop-filter:blur(8px)}

.conversation-info-sheet,.circle-editor-sheet{max-height:84%;overflow-y:auto;scrollbar-width:none}.conversation-info-sheet::-webkit-scrollbar,.circle-editor-sheet::-webkit-scrollbar{display:none}.conversation-info-identity{padding:3px 0 12px;display:flex;flex-direction:column;align-items:center;text-align:center}.conversation-info-identity>.creator-avatar{width:55px;height:55px;font-size:11px}.conversation-info-identity strong{margin-top:7px;font-size:10px}.conversation-info-identity>span{margin-top:2px;color:var(--muted);font-size:6px}.conversation-members{margin-bottom:8px;display:grid;gap:4px}.conversation-members button{min-height:43px;border:1px solid var(--line);border-radius:10px;padding:5px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:30px 1fr 9px;gap:6px;align-items:center;text-align:left;cursor:pointer}.conversation-members strong,.conversation-members small{display:block}.conversation-members strong{font-size:7px}.conversation-members small{margin-top:2px;color:var(--muted);font-size:5px}.conversation-members>.icon{width:9px}.conversation-settings{display:grid;gap:5px}.conversation-settings>button{min-height:54px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:18px 1fr 15px;gap:6px;align-items:center;text-align:left;position:relative;cursor:pointer}.conversation-settings>button>.icon{width:13px;color:#bcaeff}.conversation-settings strong,.conversation-settings small{display:block}.conversation-settings strong{font-size:7px}.conversation-settings small{margin-top:2px;color:var(--muted);font-size:5px}.conversation-settings>button>.icon:last-child{width:9px;color:var(--muted-2)}.conversation-settings .toggle{position:absolute;right:6px;bottom:5px;transform:scale(.62);transform-origin:right bottom}.conversation-settings button.danger strong,.conversation-settings button.danger>.icon{color:#ff8298}
.circle-editor-fields{display:grid;gap:7px}.circle-editor-fields label>span,.circle-editor-label{display:block;margin:0 2px 4px;color:var(--muted-2);font-size:5px;font-weight:900;letter-spacing:.09em}.circle-editor-fields input,.circle-editor-fields textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;background:rgba(255,255,255,.025);color:var(--text);outline:0;font-size:7px}.circle-editor-fields textarea{min-height:54px;resize:none;line-height:1.4}.circle-editor-fields input:focus,.circle-editor-fields textarea:focus{border-color:rgba(139,108,255,.4)}.circle-editor-label{margin-top:10px}.circle-member-picker{display:grid;grid-template-columns:1fr 1fr;gap:5px}.circle-member-picker button{min-height:48px;border:1px solid var(--line);border-radius:10px;padding:5px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:30px 1fr 16px;gap:5px;align-items:center;text-align:left;cursor:pointer}.circle-member-picker button.active{border-color:rgba(200,255,69,.2);background:rgba(200,255,69,.025)}.circle-member-picker strong,.circle-member-picker small{display:block}.circle-member-picker strong{font-size:6px}.circle-member-picker small{margin-top:2px;color:var(--muted);font-size:4px}.circle-member-picker i{width:16px;height:16px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--muted);display:grid;place-items:center}.circle-member-picker button.active i{background:var(--lime);color:#101500}.circle-member-picker i .icon{width:8px}.circle-notification-setting{width:100%;min-height:49px;margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:7px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:18px 1fr 27px;gap:6px;align-items:center;text-align:left;position:relative;cursor:pointer}.circle-notification-setting>.icon{width:13px;color:#bcaeff}.circle-notification-setting strong,.circle-notification-setting small{display:block}.circle-notification-setting strong{font-size:7px}.circle-notification-setting small{margin-top:2px;color:var(--muted);font-size:5px}.circle-notification-setting .toggle{transform:scale(.64);transform-origin:right center}.circle-editor-note{margin-top:7px;border-radius:8px;padding:7px;background:rgba(139,108,255,.03);color:var(--muted);display:flex;gap:5px;font-size:5px;line-height:1.35}.circle-editor-note .icon{flex:0 0 auto;width:10px;color:#bcaeff}

/* Social 2.0 · Confianza, seguridad y privacidad */
.sensitive-label { border:1px solid rgba(77,232,255,.16); border-radius:6px; padding:3px 5px; background:rgba(77,232,255,.055); color:var(--cyan); display:flex; align-items:center; gap:3px; font-size:5px; font-weight:900; }
.sensitive-label .icon { width:8px; }
.sensitive-cover { border-color:rgba(77,232,255,.18); background:radial-gradient(circle at 80% 15%,rgba(77,232,255,.11),transparent 34%),linear-gradient(145deg,#101b23,#101421); }
.sensitive-cover > .icon { color:var(--cyan); }
.profile-safety-card { width:calc(100% - 26px); min-height:67px; margin:0 13px 10px; border:1px solid rgba(200,255,69,.15); border-radius:15px; padding:8px 9px; background:radial-gradient(circle at 92% 12%,rgba(200,255,69,.09),transparent 35%),var(--surface); color:var(--text); display:grid; grid-template-columns:38px 1fr 11px; gap:8px; align-items:center; text-align:left; cursor:pointer; }
.profile-safety-card > span { width:38px; height:38px; border-radius:12px; background:rgba(200,255,69,.09); color:var(--lime); display:grid; place-items:center; position:relative; }.profile-safety-card > span .icon{width:17px}.profile-safety-card > span i{position:absolute;right:5px;bottom:5px;width:6px;height:6px;border:1px solid var(--surface);border-radius:50%;background:var(--lime)}.profile-safety-card p{margin:0}.profile-safety-card small,.profile-safety-card strong,.profile-safety-card em{display:block}.profile-safety-card small{color:var(--lime);font-size:5px;font-weight:900;letter-spacing:.07em}.profile-safety-card strong{margin-top:3px;font-size:8px}.profile-safety-card em{margin-top:3px;color:var(--muted);font-size:5px;font-style:normal}.profile-safety-card>.icon{width:10px;color:var(--muted-2)}

.safety-screen .screen-scroll { background:radial-gradient(circle at 85% 4%,rgba(139,108,255,.08),transparent 25%),var(--bg); }
.safety-tabs { position:sticky; top:61px; z-index:5; padding:0 11px; background:rgba(5,7,13,.95); overflow-x:auto; scrollbar-width:none; backdrop-filter:blur(16px); }.safety-tabs::-webkit-scrollbar{display:none}.safety-tabs button{flex:0 0 auto;padding:10px 9px 11px;font-size:6px}.safety-tabs button i{min-width:13px;height:13px;margin-left:3px;border-radius:6px;padding:0 3px;background:#ff8298;color:#230711;display:inline-grid;place-items:center;font-size:5px;font-style:normal}
.safety-overview,.safety-panel { padding:11px 13px 26px; }
.safety-score-card { min-height:171px; border:1px solid rgba(200,255,69,.17); border-radius:20px; padding:17px; background:radial-gradient(circle at 88% 25%,rgba(200,255,69,.15),transparent 25%),radial-gradient(circle at 10% 100%,rgba(77,232,255,.07),transparent 35%),linear-gradient(145deg,#111a1a,#121427 64%,#171328); display:grid; grid-template-columns:1fr 86px; gap:10px; align-items:center; position:relative; overflow:hidden; }
.safety-score-card .eyebrow { color:var(--lime); font-size:5px; font-weight:900; letter-spacing:.12em; }.safety-score-card h1{max-width:205px;margin:6px 0;font-size:21px;line-height:1;letter-spacing:-.05em}.safety-score-card p{max-width:215px;margin:0;color:#aab2c1;font-size:6px;line-height:1.5}.safety-score-ring{width:78px;height:78px;border:5px solid rgba(200,255,69,.16);border-top-color:var(--lime);border-right-color:var(--lime);border-radius:50%;display:flex;justify-content:center;align-items:baseline;transform:rotate(17deg);box-shadow:0 0 25px rgba(200,255,69,.06)}.safety-score-ring strong,.safety-score-ring small{transform:rotate(-17deg)}.safety-score-ring strong{font-size:19px}.safety-score-ring small{color:var(--muted);font-size:6px}.safety-score-card footer{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:9px;display:flex;gap:11px;color:#c4cad5;font-size:5px}.safety-score-card footer span{display:flex;align-items:center;gap:4px}.safety-score-card footer .icon{width:9px;color:var(--lime)}
.safety-quick-grid { margin-top:8px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.safety-quick-grid button{min-height:85px;border:1px solid var(--line);border-radius:13px;padding:8px 5px;background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer}.safety-quick-grid button>span{width:28px;height:28px;border-radius:9px;background:rgba(139,108,255,.08);color:#bcaeff;display:grid;place-items:center}.safety-quick-grid button:nth-child(2)>span{background:rgba(255,110,145,.08);color:#ff8298}.safety-quick-grid .icon{width:13px}.safety-quick-grid strong{margin-top:6px;font-size:6px}.safety-quick-grid small{margin-top:3px;color:var(--muted);font-size:5px;line-height:1.25}
.safety-status-grid { margin-top:8px; display:grid; gap:5px; }.safety-status-grid article{min-height:58px;border:1px solid var(--line);border-radius:12px;padding:7px;background:var(--surface);display:grid;grid-template-columns:31px 1fr auto;gap:7px;align-items:center}.safety-status-grid article>span{width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.035);color:var(--muted);display:grid;place-items:center}.safety-status-grid article>span.good{background:rgba(200,255,69,.07);color:var(--lime)}.safety-status-grid .icon{width:14px}.safety-status-grid p{margin:0}.safety-status-grid strong,.safety-status-grid small{display:block}.safety-status-grid strong{font-size:7px}.safety-status-grid small{margin-top:2px;color:var(--muted);font-size:5px}.safety-status-grid em{color:var(--lime);font-size:5px;font-style:normal;font-weight:900}.safety-status-grid button{border:0;background:transparent;color:var(--lime);font-size:6px;cursor:pointer}
.latest-safety-case { margin-top:13px; }.latest-safety-case>.section-title{margin:0 3px 6px}.latest-safety-case>button{width:100%;min-height:105px;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:1fr 11px;gap:3px 7px;text-align:left;cursor:pointer}.latest-safety-case>button>*:not(.icon){grid-column:1}.latest-safety-case>button>.icon{grid-column:2;grid-row:1/5;align-self:center;width:10px;color:var(--muted-2)}.latest-safety-case strong{font-size:8px}.latest-safety-case small{color:var(--muted);font-size:5px}.latest-safety-case p{margin:4px 0 0;color:#b9c0ce;font-size:6px;line-height:1.4}.case-status{width:fit-content;border-radius:7px;padding:4px 6px;background:rgba(139,108,255,.08);color:#bcaeff;display:flex;gap:4px;align-items:center;font-size:5px;font-weight:900}.case-status i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}.case-status.resolved{background:rgba(200,255,69,.07);color:var(--lime)}.case-status.review{background:rgba(77,232,255,.07);color:var(--cyan)}.case-status.received{background:rgba(139,108,255,.1);color:#bcaeff}
.community-guidelines-card { width:100%;min-height:61px;margin-top:9px;border:1px solid rgba(139,108,255,.13);border-radius:13px;padding:8px;background:rgba(139,108,255,.03);color:var(--text);display:grid;grid-template-columns:24px 1fr 10px;gap:7px;align-items:center;text-align:left;cursor:pointer}.community-guidelines-card>.icon:first-child{width:17px;color:#bcaeff}.community-guidelines-card strong,.community-guidelines-card small{display:block}.community-guidelines-card strong{font-size:7px}.community-guidelines-card small{margin-top:2px;color:var(--muted);font-size:5px}.community-guidelines-card>.icon:last-child{width:9px;color:var(--muted-2)}

.safety-panel-intro { min-height:92px;border:1px solid rgba(139,108,255,.13);border-radius:16px;padding:13px;background:radial-gradient(circle at 95% 5%,rgba(139,108,255,.13),transparent 39%),var(--surface);display:grid;grid-template-columns:39px 1fr;gap:9px;align-items:center}.safety-panel-intro>span{width:39px;height:39px;border-radius:12px;background:rgba(139,108,255,.1);color:#bcaeff;display:grid;place-items:center}.safety-panel-intro>span .icon{width:18px}.safety-panel-intro .eyebrow{color:#bcaeff;font-size:5px;font-weight:900;letter-spacing:.1em}.safety-panel-intro h2{margin:4px 0 3px;font-size:15px;letter-spacing:-.035em}.safety-panel-intro p{margin:0;color:var(--muted);font-size:6px;line-height:1.4}.safety-setting-section{margin-top:13px}.safety-setting-section>.section-title{margin:0 3px 6px}.safety-setting-list{display:grid;gap:5px}.safety-setting-list>button{min-height:61px;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:19px 1fr auto 10px;gap:7px;align-items:center;text-align:left;position:relative;cursor:pointer}.safety-setting-list>button>.icon:first-child{width:15px;color:#bcaeff}.safety-setting-list>button>.icon:last-child{width:9px;color:var(--muted-2)}.safety-setting-list strong,.safety-setting-list small{display:block}.safety-setting-list strong{font-size:7px}.safety-setting-list small{margin-top:2px;color:var(--muted);font-size:5px;line-height:1.3}.safety-setting-list em{border-radius:7px;padding:4px 6px;background:rgba(139,108,255,.07);color:#c7bbff;font-size:5px;font-style:normal;white-space:nowrap}.safety-setting-list .toggle{grid-column:3/5;transform:scale(.65);transform-origin:right center}.safety-explanation{margin-top:10px;border:1px solid rgba(200,255,69,.1);border-radius:10px;padding:8px;background:rgba(200,255,69,.02);color:var(--muted);display:flex;gap:5px;font-size:5px;line-height:1.4}.safety-explanation .icon{flex:0 0 auto;width:11px;color:var(--lime)}
.muted-word-add{height:42px;margin-top:9px;border:1px solid var(--line);border-radius:11px;padding:0 6px 0 10px;background:var(--surface);display:flex;gap:6px;align-items:center}.muted-word-add>.icon{width:13px;color:#bcaeff}.muted-word-add input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:7px}.muted-word-add button{border:0;border-radius:8px;padding:6px 8px;background:var(--lime);color:#101500;font-size:6px;font-weight:850;cursor:pointer}.muted-token-list{display:flex;gap:5px;flex-wrap:wrap}.muted-token-list>span{min-height:27px;border:1px solid var(--line);border-radius:9px;padding:0 3px 0 7px;background:var(--surface);color:#c5cad5;display:flex;gap:5px;align-items:center;font-size:6px}.muted-token-list button{width:20px;height:20px;border:0;border-radius:6px;background:rgba(255,255,255,.035);color:var(--muted);cursor:pointer}.muted-token-list>p{margin:0;color:var(--muted);font-size:6px}.safety-people-list,.muted-game-list{display:grid;gap:5px}.safety-people-list article{min-height:55px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface);display:grid;grid-template-columns:35px 1fr auto;gap:7px;align-items:center}.safety-people-list strong,.safety-people-list small{display:block}.safety-people-list strong{font-size:7px}.safety-people-list small{margin-top:2px;color:var(--muted);font-size:5px}.safety-people-list button{border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--surface-2);color:var(--lime);font-size:5px;cursor:pointer}.safety-empty-row{min-height:51px;border:1px dashed var(--line);border-radius:11px;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:5px;font-size:6px}.safety-empty-row .icon{width:12px}.muted-game-list>button{min-height:48px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:31px 1fr auto 9px;gap:7px;align-items:center;text-align:left;cursor:pointer}.muted-game-list>button>span{width:31px;height:31px;border-radius:9px;background:linear-gradient(145deg,#6851d8,#315c7c);display:grid;place-items:center;font-size:8px;font-weight:900}.muted-game-list strong{font-size:7px}.muted-game-list small{color:var(--lime);font-size:5px}.muted-game-list .icon{width:9px}
.case-summary{margin-top:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.case-summary>div{min-height:54px;border:1px solid var(--line);border-radius:11px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;align-items:center}.case-summary strong{font-size:12px}.case-summary small{margin-top:2px;color:var(--muted);font-size:5px}.start-report-button{width:100%;min-height:38px;margin-top:7px;border:0;border-radius:10px;background:var(--lime);color:#101500;display:flex;justify-content:center;align-items:center;gap:5px;font-size:7px;font-weight:850;cursor:pointer}.start-report-button .icon{width:12px}.safety-case-list{margin-top:8px;display:grid;gap:6px}.safety-case-list>button{min-height:94px;border:1px solid var(--line);border-radius:13px;padding:9px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:1fr 10px;gap:3px 7px;text-align:left;cursor:pointer}.safety-case-list>button>*:not(.icon){grid-column:1}.safety-case-list>button>.icon{grid-column:2;grid-row:1/5;align-self:center;width:9px;color:var(--muted-2)}.safety-case-list strong{font-size:8px}.safety-case-list small{color:var(--muted);font-size:5px}.safety-case-list p{margin:3px 0 0;color:#b7bdca;font-size:6px;line-height:1.35}.report-help-link{width:100%;margin-top:9px;border:0;background:transparent;color:#bcaeff;display:flex;justify-content:center;align-items:center;gap:4px;font-size:6px;cursor:pointer}.report-help-link .icon{width:9px}
.account-session-list{display:grid;gap:5px}.account-session-list article{min-height:59px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface);display:grid;grid-template-columns:32px 1fr auto;gap:7px;align-items:center}.account-session-list article.current{border-color:rgba(200,255,69,.13)}.account-session-list article>span{width:32px;height:32px;border-radius:9px;background:rgba(139,108,255,.08);color:#bcaeff;display:grid;place-items:center}.account-session-list article.current>span{background:rgba(200,255,69,.07);color:var(--lime)}.account-session-list .icon{width:14px}.account-session-list p{margin:0}.account-session-list strong,.account-session-list small{display:block}.account-session-list strong{font-size:7px}.account-session-list small{margin-top:2px;color:var(--muted);font-size:5px}.account-session-list em{color:var(--lime);font-size:5px;font-style:normal;font-weight:900}.account-session-list button{border:1px solid var(--line);border-radius:7px;padding:5px 6px;background:var(--surface-2);color:#ff9bad;font-size:5px;cursor:pointer}.account-data-actions{display:grid;gap:5px}.account-data-actions>button{min-height:55px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:19px 1fr 9px;gap:7px;align-items:center;text-align:left;cursor:pointer}.account-data-actions>button>.icon:first-child{width:14px;color:#bcaeff}.account-data-actions>button>.icon:last-child{width:9px;color:var(--muted-2)}.account-data-actions strong,.account-data-actions small{display:block}.account-data-actions strong{font-size:7px}.account-data-actions small{margin-top:2px;color:var(--muted);font-size:5px}.account-data-actions .danger strong,.account-data-actions .danger>.icon:first-child{color:#ff8298}

.safety-report-sheet,.safety-case-sheet,.guidelines-sheet,.appeal-sheet{max-height:88%;overflow-y:auto;scrollbar-width:none}.safety-report-sheet::-webkit-scrollbar,.safety-case-sheet::-webkit-scrollbar,.guidelines-sheet::-webkit-scrollbar,.appeal-sheet::-webkit-scrollbar{display:none}.report-target{min-height:56px;border:1px solid rgba(139,108,255,.14);border-radius:11px;padding:7px;background:rgba(139,108,255,.03);display:grid;grid-template-columns:31px 1fr;gap:7px;align-items:center}.report-target>span{width:31px;height:31px;border-radius:9px;background:rgba(255,110,145,.08);color:#ff8298;display:grid;place-items:center}.report-target .icon{width:14px}.report-target p{margin:0}.report-target small,.report-target strong{display:block}.report-target small{color:#ff9bad;font-size:5px;font-weight:900}.report-target strong{margin-top:3px;font-size:7px;line-height:1.3}.report-section-label{display:block;margin:11px 2px 5px;color:var(--muted-2);font-size:5px;font-weight:900;letter-spacing:.09em}.report-reasons{display:grid;gap:4px}.report-reasons button{min-height:48px;border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:17px 1fr;gap:6px;align-items:center;text-align:left;cursor:pointer}.report-reasons button.active{border-color:rgba(200,255,69,.25);background:rgba(200,255,69,.025)}.report-reasons button>i{width:17px;height:17px;border:1px solid var(--line);border-radius:6px;color:transparent;display:grid;place-items:center}.report-reasons button.active>i{border-color:var(--lime);background:var(--lime);color:#101500}.report-reasons i .icon{width:9px}.report-reasons strong,.report-reasons small{display:block}.report-reasons strong{font-size:7px}.report-reasons small{margin-top:2px;color:var(--muted);font-size:5px;line-height:1.3}.report-details-field{display:block;margin-top:9px}.report-details-field>span{display:block;margin:0 2px 4px;color:var(--muted-2);font-size:5px;font-weight:900;letter-spacing:.09em}.report-details-field textarea{width:100%;min-height:66px;border:1px solid var(--line);border-radius:10px;padding:8px;background:rgba(255,255,255,.025);color:var(--text);outline:0;resize:none;font-size:7px;line-height:1.45}.report-details-field textarea:focus{border-color:rgba(139,108,255,.4)}.report-details-field>small{display:block;margin:-15px 7px 7px;text-align:right;color:var(--muted-2);font-size:5px;position:relative}.report-block-choice{width:100%;min-height:55px;margin-top:7px;border:1px solid var(--line);border-radius:11px;padding:7px;background:var(--surface);color:var(--text);display:grid;grid-template-columns:19px 1fr 29px;gap:7px;align-items:center;text-align:left;cursor:pointer}.report-block-choice.active{border-color:rgba(255,110,145,.18)}.report-block-choice>.icon{width:14px;color:#ff8298}.report-block-choice strong,.report-block-choice small{display:block}.report-block-choice strong{font-size:7px}.report-block-choice small{margin-top:2px;color:var(--muted);font-size:5px}.report-block-choice .toggle{transform:scale(.66);transform-origin:right center}.report-privacy-note{margin:8px 0;border-radius:9px;padding:8px;background:rgba(139,108,255,.035);color:var(--muted);display:flex;gap:5px;font-size:5px;line-height:1.4}.report-privacy-note .icon{flex:0 0 auto;width:10px;color:#bcaeff}.button.disabled{opacity:.45}
.report-success-sheet{text-align:center}.report-success-icon{width:58px;height:58px;margin:3px auto 9px;border-radius:18px;background:rgba(200,255,69,.09);color:var(--lime);display:grid;place-items:center;box-shadow:0 0 24px rgba(200,255,69,.06)}.report-success-icon .icon{width:27px}.report-success-sheet>.eyebrow{color:var(--lime);font-size:5px;font-weight:900;letter-spacing:.11em}.report-success-sheet>h2{margin:5px 0;font-size:16px}.report-success-sheet>p{margin:0 auto;max-width:260px;color:var(--muted);font-size:6px;line-height:1.5}.report-case-ticket{margin:12px 0;border:1px solid rgba(200,255,69,.15);border-radius:12px;padding:11px;background:rgba(200,255,69,.025);text-align:left;display:grid;grid-template-columns:1fr auto;gap:3px}.report-case-ticket small,.report-case-ticket strong{display:block}.report-case-ticket small{color:var(--muted);font-size:5px}.report-case-ticket strong{font-size:14px;letter-spacing:.04em}.report-case-ticket .case-status{grid-column:2;grid-row:1/3;align-self:center}.report-success-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:6px}.report-success-actions .button{min-height:37px;padding:8px;font-size:6px}
.case-target-detail{margin-top:9px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface)}.case-target-detail small,.case-target-detail strong{display:block}.case-target-detail small{color:var(--muted-2);font-size:5px;font-weight:900}.case-target-detail strong{margin-top:3px;font-size:7px;line-height:1.4}.case-timeline{margin:10px 0;display:grid}.case-timeline article{min-height:58px;display:grid;grid-template-columns:27px 1fr;gap:7px;position:relative}.case-timeline article:not(:last-child)::after{content:'';position:absolute;left:13px;top:27px;bottom:0;width:1px;background:var(--line)}.case-timeline article.done:not(:last-child)::after{background:rgba(200,255,69,.26)}.case-timeline article>i{z-index:1;width:27px;height:27px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);display:grid;place-items:center}.case-timeline article.done>i{border-color:rgba(200,255,69,.2);background:rgba(200,255,69,.07);color:var(--lime)}.case-timeline i .icon{width:12px}.case-timeline strong,.case-timeline small{display:block}.case-timeline strong{font-size:7px}.case-timeline small{margin-top:3px;color:var(--muted);font-size:5px;line-height:1.4}.case-decision{min-height:59px;margin-bottom:9px;border:1px solid rgba(139,108,255,.13);border-radius:11px;padding:8px;background:rgba(139,108,255,.03);display:grid;grid-template-columns:31px 1fr;gap:7px;align-items:center}.case-decision>span{width:31px;height:31px;border-radius:9px;background:rgba(139,108,255,.08);color:#bcaeff;display:grid;place-items:center}.case-decision .icon{width:14px}.case-decision p{margin:0}.case-decision strong,.case-decision small{display:block}.case-decision strong{font-size:7px}.case-decision small{margin-top:2px;color:var(--muted);font-size:5px;line-height:1.35}
.guideline-list{display:grid;gap:5px}.guideline-list article{min-height:62px;border:1px solid var(--line);border-radius:11px;padding:8px;background:var(--surface);display:grid;grid-template-columns:30px 1fr;gap:7px;align-items:center}.guideline-list article>span{width:30px;height:30px;border-radius:9px;background:rgba(139,108,255,.08);color:#bcaeff;display:grid;place-items:center;font-size:7px;font-weight:900}.guideline-list p{margin:0}.guideline-list strong,.guideline-list small{display:block}.guideline-list strong{font-size:7px}.guideline-list small{margin-top:3px;color:var(--muted);font-size:5px;line-height:1.4}

.persistence-section .section-title > button { border: 0; background: transparent; color: var(--lime); cursor: pointer; font-size: 6px; font-weight: 900; }
.persistence-card { min-height: 68px; border: 1px solid rgba(200,255,69,.15); border-radius: 12px; padding: 9px; background: linear-gradient(135deg,rgba(200,255,69,.045),rgba(77,232,255,.025)); display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; }
.persistence-indicator { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.045); color: var(--muted); display: grid; place-items: center; }
.persistence-indicator .icon { width: 16px; }
.persistence-indicator.synced { color: var(--lime); background: rgba(200,255,69,.09); box-shadow: 0 0 20px rgba(200,255,69,.07); }
.persistence-indicator.syncing { color: var(--cyan); background: rgba(77,232,255,.08); animation: persistence-pulse 1.2s ease-in-out infinite; }
.persistence-card p { margin: 0; min-width: 0; }
.persistence-card strong, .persistence-card small { display: block; }
.persistence-card strong { font-size: 8px; }
.persistence-card small { margin-top: 3px; color: var(--muted); font-size: 5px; line-height: 1.35; }
.persistence-card > em { color: var(--muted-2); font-size: 4.5px; font-style: normal; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
@keyframes persistence-pulse { 50% { opacity: .55; transform: scale(.94); } }

/* Autenticación y Cuentas 1.0 */
.auth-overlay-backdrop { z-index: 40; padding: 16px 13px; align-items: center; background: rgba(2,4,8,.84); }
.auth-sheet { width: 100%; max-height: 96%; border: 1px solid rgba(200,255,69,.16); border-radius: 22px; padding: 14px; background: radial-gradient(circle at 88% 2%,rgba(139,108,255,.15),transparent 28%),linear-gradient(165deg,#151b2a,#080c14 75%); box-shadow: 0 26px 90px rgba(0,0,0,.7); overflow-y: auto; scrollbar-width: none; animation: share-rise .2s ease-out; }
.auth-sheet::-webkit-scrollbar { display: none; }
.auth-sheet > header { display: flex; justify-content: space-between; align-items: center; }
.auth-brand { display: flex; align-items: center; gap: 8px; }
.auth-brand .brand-mark { width: 31px; height: 31px; border-radius: 9px; font-size: 10px; }
.auth-brand small { color: var(--muted); font-size: 5px; font-weight: 900; letter-spacing: .08em; }
.auth-sheet > header > button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 17px; cursor: pointer; }
.auth-sheet-copy { padding: 17px 2px 12px; }
.auth-sheet-copy .eyebrow { color: var(--lime); font-size: 5px; font-weight: 900; letter-spacing: .11em; }
.auth-sheet-copy h2 { margin: 5px 0; font-size: 19px; letter-spacing: -.04em; }
.auth-sheet-copy p { max-width: 320px; margin: 0; color: var(--muted); font-size: 6px; line-height: 1.5; }
.auth-fields { display: grid; gap: 8px; }
.auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.auth-fields label { display: grid; gap: 4px; }
.auth-fields label > span { color: var(--muted-2); font-size: 5px; font-weight: 900; letter-spacing: .08em; }
.auth-fields input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; outline: 0; background: rgba(255,255,255,.035); color: var(--text); font-size: 8px; }
.auth-fields input:focus { border-color: rgba(200,255,69,.42); background: rgba(200,255,69,.025); }
.auth-fields input::placeholder { color: var(--muted-2); }
.auth-fields label > small { margin: -1px 2px 0; color: var(--muted-2); font-size: 5px; }
.auth-handle-field { height: 42px; border: 1px solid var(--line); border-radius: 11px; padding-left: 9px; background: rgba(255,255,255,.035); display: flex; align-items: center; }
.auth-handle-field:focus-within { border-color: rgba(200,255,69,.42); background: rgba(200,255,69,.025); }
.auth-handle-field i { color: var(--lime); font-size: 8px; font-style: normal; }
.auth-handle-field input { height: 40px; border: 0; padding-left: 3px; background: transparent; }
.auth-consent { min-height: 38px; grid-template-columns: 18px 1fr; gap: 7px !important; align-items: center; cursor: pointer; }
.auth-consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.auth-consent > i { width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: 6px; color: transparent; display: grid; place-items: center; }
.auth-consent > i .icon { width: 10px; }
.auth-consent input:checked + i { border-color: var(--lime); background: var(--lime); color: #101500; }
.auth-consent > span { color: var(--muted) !important; font-size: 5.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.4; }
.auth-feedback { min-height: 19px; margin: 5px 2px; color: var(--muted); font-size: 6px; display: flex; align-items: center; }
.auth-feedback.error { color: #ff9bad; }
.auth-feedback.notice { color: var(--cyan); }
.auth-submit { min-height: 42px; font-size: 7px; }
.auth-submit:disabled { opacity: .58; cursor: wait; }
.auth-switch { margin-top: 11px; color: var(--muted); text-align: center; font-size: 6px; }
.auth-switch button { border: 0; background: transparent; color: var(--lime); font-weight: 900; cursor: pointer; }
.auth-security-note { margin-top: 11px; border-radius: 9px; padding: 7px; background: rgba(139,108,255,.045); color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 5px; }
.auth-security-note .icon { width: 10px; color: #bcaeff; }

.account-identity-card { min-height: 67px; margin-top: 9px; border: 1px solid var(--line); border-radius: 13px; padding: 8px; background: var(--surface); display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; }
.account-identity-card.authenticated { border-color: rgba(200,255,69,.16); background: linear-gradient(135deg,rgba(200,255,69,.045),var(--surface)); }
.account-identity-card > span { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg,#8b6cff,#4d7cff); display: grid; place-items: center; font-size: 10px; font-weight: 950; }
.account-identity-card p { margin: 0; min-width: 0; }
.account-identity-card small,.account-identity-card strong,.account-identity-card em { display: block; }
.account-identity-card small { color: var(--lime); font-size: 5px; font-weight: 900; letter-spacing: .07em; }
.account-identity-card strong { margin-top: 3px; font-size: 8px; }
.account-identity-card em { margin-top: 2px; color: var(--muted); font-size: 5px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity-card > button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 7px; background: var(--surface-2); color: var(--lime); font-size: 5px; font-weight: 850; cursor: pointer; }
.safety-setting-section > .section-title > button { border: 0; background: transparent; color: var(--lime); font-size: 6px; cursor: pointer; }

.profile-account-card { width: calc(100% - 26px); min-height: 62px; margin: 0 13px 10px; border: 1px solid rgba(139,108,255,.14); border-radius: 14px; padding: 8px 9px; background: rgba(139,108,255,.035); color: var(--text); display: grid; grid-template-columns: 35px 1fr 10px; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.profile-account-card.authenticated { border-color: rgba(77,232,255,.15); background: rgba(77,232,255,.03); }
.profile-account-card > span { width: 35px; height: 35px; border-radius: 11px; background: linear-gradient(145deg,#8b6cff,#4d7cff); display: grid; place-items: center; font-size: 9px; font-weight: 950; }
.profile-account-card p { margin: 0; }
.profile-account-card small,.profile-account-card strong,.profile-account-card em { display: block; }
.profile-account-card small { color: #bcaeff; font-size: 5px; font-weight: 900; letter-spacing: .07em; }
.profile-account-card.authenticated small { color: var(--cyan); }
.profile-account-card strong { margin-top: 3px; font-size: 7px; }
.profile-account-card em { margin-top: 2px; color: var(--muted); font-size: 5px; font-style: normal; }
.profile-account-card > .icon { width: 9px; color: var(--muted-2); }

@media (min-width: 971px) {
  .review-panel { max-height: calc(100vh - 34px); overflow-y: auto; scrollbar-width: none; padding-right: 4px; }
  .review-panel::-webkit-scrollbar { display: none; }
  .review-brand { margin-bottom: 30px; }
  .review-copy h1 { font-size: clamp(40px, 4.2vw, 60px); }
  .review-copy > p:last-child { line-height: 1.55; }
  .screen-list { gap: 5px; margin-top: 18px; }
  .screen-list button { padding: 7px 10px; font-size: 10px; }
}

@media (max-width: 970px) {
  .prototype-shell { display: block; padding: 0; }
  .review-panel { display: none; }
  .device { width: 100%; height: 100vh; min-height: 620px; padding: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .device::before, .device-glow { display: none; }
  .device-screen { border-radius: 0; }
}

@media (max-height: 780px) and (min-width: 971px) {
  .prototype-shell { padding-top: 20px; padding-bottom: 20px; }
  .review-brand { margin-bottom: 28px; }
  .review-copy h1 { font-size: 47px; }
  .device { height: calc(100vh - 36px); min-height: 680px; }
  .screen-list { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* Contenido Real 1.0 */
.real-community-section { margin: 22px 18px 30px; }
.real-community-section > .section-title { margin-bottom: 12px; }
.real-community-section > .section-title > button { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-weight: 800; font-size: 12px; }
.real-community-section > .section-title > button .icon { width: 15px; height: 15px; }
.real-community-note { display: flex; align-items: center; gap: 10px; padding: 13px 14px; margin-bottom: 13px; border: 1px solid rgba(113, 84, 255, .2); border-radius: 15px; background: linear-gradient(120deg, rgba(113, 84, 255, .1), rgba(30, 201, 179, .07)); }
.real-community-note > .icon { width: 19px; height: 19px; color: var(--purple); flex: 0 0 auto; }
.real-community-note span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.real-community-note strong { font-size: 12px; color: var(--ink); }
.real-community-note small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.real-community-note em { padding: 5px 8px; border-radius: 999px; background: var(--surface); color: var(--purple); font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
.real-community-error { display: flex; align-items: center; gap: 10px; padding: 13px; margin-bottom: 12px; border-radius: 14px; border: 1px solid rgba(222, 61, 84, .25); background: rgba(222, 61, 84, .07); color: var(--danger); }
.real-community-error > .icon { width: 18px; height: 18px; }
.real-community-error span { display: flex; flex: 1; flex-direction: column; }
.real-community-error strong { font-size: 12px; }
.real-community-error small { margin-top: 2px; font-size: 10px; color: var(--muted); }
.real-community-error button { font-size: 11px; font-weight: 900; }
.real-feed-list { gap: 13px; }
.real-post { overflow: hidden; border: 1px solid rgba(113, 84, 255, .18); box-shadow: 0 10px 34px rgba(24, 19, 59, .07); }
.real-post-origin { display: flex; align-items: center; justify-content: space-between; padding: 8px 15px; background: linear-gradient(90deg, rgba(113, 84, 255, .09), rgba(30, 201, 179, .05)); border-bottom: 1px solid rgba(113, 84, 255, .1); color: var(--purple); }
.real-post-origin span { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 950; letter-spacing: .09em; }
.real-post-origin .icon { width: 13px; height: 13px; }
.real-post-origin em { font-size: 9px; font-style: normal; font-weight: 900; color: var(--muted); text-transform: uppercase; }
.real-author { cursor: default; text-align: left; }
.real-avatar { color: #fff !important; background: linear-gradient(135deg, #795cff, #2bc9b1) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.inline-follow.active { color: var(--purple); border-color: rgba(113, 84, 255, .3); background: rgba(113, 84, 255, .08); }
.real-own-action { min-width: 35px; min-height: 31px; padding: 7px 9px; border-radius: 10px; color: var(--muted); font-size: 10px; font-weight: 900; }
.real-own-action .icon { width: 17px; height: 17px; }
.real-own-action.danger { color: #fff; background: var(--danger); }
.real-post-media { position: relative; margin: 0; background: #121324; }
.real-post-media img { display: block; width: 100%; max-height: 510px; object-fit: cover; }
.real-post-media figcaption { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; color: #fff; background: rgba(10, 10, 20, .72); backdrop-filter: blur(8px); font-size: 9px; font-weight: 800; }
.real-post-media figcaption .icon { width: 12px; height: 12px; }
.real-spoiler-cover { display: flex; width: 100%; min-height: 190px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 28px; color: #fff; background: radial-gradient(circle at top, #403573, #171827 75%); text-align: center; }
.real-spoiler-cover .icon { width: 27px; height: 27px; color: #b9aaff; }
.real-spoiler-cover strong { font-size: 16px; }
.real-spoiler-cover span { max-width: 270px; color: #c7c4d8; font-size: 11px; }
.real-spoiler-cover em { margin-top: 5px; padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 10px; font-style: normal; font-weight: 900; }
.real-actions { align-items: center; }
.real-actions .real-shared-state { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 800; }
.real-shared-state .icon { width: 12px; height: 12px; }
.real-empty { border: 1px dashed rgba(113, 84, 255, .25); background: rgba(113, 84, 255, .035); }
.real-load-more { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 12px; border-radius: 13px; color: var(--purple); background: rgba(113, 84, 255, .07); font-size: 11px; font-weight: 900; }
.real-load-more .icon { width: 14px; height: 14px; }
.real-load-more:disabled { opacity: .55; }
.real-people-section { border: 1px solid rgba(113, 84, 255, .15); border-radius: 18px; padding: 15px; background: linear-gradient(145deg, rgba(113, 84, 255, .06), transparent 65%); }
.real-live-badge { display: inline-flex; align-items: center; gap: 5px; color: #168d78; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.real-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #21caa9; box-shadow: 0 0 0 4px rgba(33, 202, 169, .12); }
.real-people-list { display: grid; gap: 8px; }
.real-people-list article { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 13px; background: var(--surface); }
.real-people-list article > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.real-people-list strong { font-size: 12px; }
.real-people-list small, .real-people-list em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.real-people-list button { padding: 7px 10px; border: 1px solid rgba(113, 84, 255, .24); border-radius: 9px; color: var(--purple); font-size: 10px; font-weight: 900; }
.real-people-list button.active { background: rgba(113, 84, 255, .1); }
.real-comments-backdrop { z-index: 90; align-items: flex-end; }
.real-comments-sheet { width: min(100%, 520px); max-height: min(82vh, 720px); margin: 0 auto; border-radius: 22px 22px 0 0; }
.real-comment-post { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 0 18px 10px; border-radius: 13px; background: rgba(113, 84, 255, .07); }
.real-comment-post strong { font-size: 11px; line-height: 1.4; }
.real-comment-post span { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.real-comment-list { min-height: 180px; overflow-y: auto; padding: 2px 18px 16px; }
.real-comment-list article { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.real-comment-list article > div { min-width: 0; flex: 1; }
.real-comment-list article strong { display: block; font-size: 11px; }
.real-comment-list article strong small { color: var(--muted); font-size: 9px; font-weight: 600; }
.real-comment-list article p { margin: 4px 0 0; color: var(--ink); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.real-comments-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 45px 10px; color: var(--purple); font-size: 11px; font-weight: 850; }
.real-comments-loading .icon { width: 17px; height: 17px; }
.real-comment-empty { padding: 32px 16px; }
.real-comment-form { display: flex; align-items: center; gap: 9px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.real-comment-form input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--soft); outline: 0; font: inherit; font-size: 11px; }
.real-comment-form input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(113, 84, 255, .08); }
.real-comment-form button { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); }
.real-comment-form button .icon { width: 16px; height: 16px; }
.real-comment-login { margin: 6px 18px 18px; width: calc(100% - 36px); }
.real-upload-zone { border-color: rgba(113, 84, 255, .32); background: linear-gradient(145deg, rgba(113, 84, 255, .06), rgba(30, 201, 179, .04)); }
.real-upload-zone em { color: var(--purple); }
.real-clip-upload-note { display: flex; align-items: center; gap: 10px; padding: 12px 13px; margin-top: 14px; border: 1px solid rgba(139, 108, 255, .2); border-radius: 14px; background: rgba(139, 108, 255, .06); }
.real-clip-upload-note > .icon { width: 20px; height: 20px; color: var(--violet); }
.real-clip-upload-note span { display: flex; flex-direction: column; }
.real-clip-upload-note strong { font-size: 11px; }
.real-clip-upload-note small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.real-media-error { display: flex; align-items: center; gap: 6px; margin: 7px 2px 0; color: var(--danger); font-size: 10px; font-weight: 800; }
.real-media-error .icon { width: 14px; height: 14px; }
.real-media-editor { overflow: hidden; border: 1px solid rgba(113, 84, 255, .2); border-radius: 17px; background: var(--surface); }
.real-media-editor > img { display: block; width: 100%; max-height: 380px; object-fit: cover; background: #171827; }
.real-media-editor > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.real-media-editor > div > span { display: flex; align-items: center; gap: 8px; min-width: 0; color: #15947e; }
.real-media-editor > div > span .icon { width: 17px; height: 17px; }
.real-media-editor > div p { display: flex; min-width: 0; margin: 0; flex-direction: column; }
.real-media-editor > div strong { color: var(--ink); font-size: 11px; }
.real-media-editor > div small { max-width: 230px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.real-media-editor > div > button { color: var(--danger); font-size: 10px; font-weight: 900; }
.real-media-editor .alt-text-toggle { margin: 0 12px 12px; width: calc(100% - 24px); }
.real-media-editor .alt-text-field { margin: 0 12px 12px; }
.real-external-video { display: flex; width: calc(100% - 30px); align-items: center; gap: 11px; margin: 0 15px 14px; padding: 12px; border: 1px solid rgba(255, 0, 64, .16); border-radius: 14px; background: linear-gradient(110deg, rgba(255, 0, 64, .07), rgba(113, 84, 255, .04)); text-align: left; }
.real-external-video > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: #f02f49; font-size: 15px; }
.real-external-video.tiktok > span { background: #161725; }
.real-external-video p { display: flex; min-width: 0; flex: 1; margin: 0; flex-direction: column; }
.real-external-video strong { font-size: 11px; color: var(--ink); }
.real-external-video small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.real-external-video > .icon { width: 15px; height: 15px; color: var(--muted); }
.profile-real-posts { margin: 14px 18px 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile-real-posts > .section-title > span { padding: 5px 8px; border-radius: 999px; color: var(--violet); background: rgba(139, 108, 255, .1); font-size: 10px; font-weight: 900; }
.preview-real-media { position: relative; overflow: hidden; margin: 12px 0; border-radius: 14px; background: #171827; }
.preview-real-media img { display: block; width: 100%; max-height: 330px; object-fit: cover; }
.preview-real-media figcaption { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px; color: #fff; background: rgba(8, 9, 18, .75); font-size: 9px; font-weight: 850; }
.preview-real-media figcaption .icon { width: 12px; height: 12px; }

@media (min-width: 760px) {
  .real-community-section { margin-inline: auto; width: min(100% - 36px, 680px); }
  .real-comments-backdrop { align-items: center; }
  .real-comments-sheet { border-radius: 22px; }
}

/* Web pública 2.4: la red social ocupa el sitio; el visor queda como modo secundario. */
.web-sidebar,
.web-context { display: none; }

body.social-web-mode {
  min-height: 100dvh;
  background: #05070d;
}

body.social-web-mode::before {
  opacity: .78;
  background:
    radial-gradient(circle at 68% 8%, rgba(139,108,255,.13), transparent 28%),
    radial-gradient(circle at 6% 94%, rgba(77,232,255,.055), transparent 24%),
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
}

body.social-web-mode .review-panel { display: none; }
body.social-web-mode .device::before,
body.social-web-mode .device-glow,
body.social-web-mode .status-bar { display: none; }
body.social-web-mode .device-screen { height: 100%; border-radius: 0; background: rgba(5,7,13,.985); }
body.social-web-mode .app { height: 100%; }

.web-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.web-brand > span:last-child { min-width: 0; }
.web-brand strong, .web-brand small { display: block; }
.web-brand strong { font-size: 15px; letter-spacing: .1em; }
.web-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; white-space: nowrap; }

.web-navigation { display: grid; gap: 7px; margin-top: 34px; }
.web-navigation button,
.web-community-nav button { position: relative; width: 100%; border: 1px solid transparent; border-radius: 14px; background: transparent; color: #aeb5c6; display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; transition: .18s ease; }
.web-navigation button { min-height: 49px; padding: 0 14px; font-size: 14px; font-weight: 720; }
.web-navigation button .icon { width: 21px; height: 21px; }
.web-navigation button:hover,
.web-navigation button.active,
.web-community-nav button:hover,
.web-community-nav button.active { border-color: rgba(200,255,69,.14); background: rgba(200,255,69,.055); color: var(--text); }
.web-navigation button.active { color: var(--lime); }
.web-navigation button > i { position: absolute; top: 11px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px rgba(255,110,145,.55); }

.web-community-nav { display: grid; gap: 3px; margin-top: 29px; padding-top: 22px; border-top: 1px solid var(--line); }
.web-community-nav > span { margin: 0 12px 9px; color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.web-community-nav button { min-height: 39px; padding: 0 12px; font-size: 12px; }
.web-community-nav .icon { width: 17px; height: 17px; }

.web-create-cta { min-height: 47px; margin-top: 24px; border: 0; border-radius: 14px; padding: 0 17px; background: var(--lime); color: #111704; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: 0 15px 36px rgba(200,255,69,.1); }
.web-create-cta:hover { background: #d4ff6d; transform: translateY(-1px); }
.web-create-cta .icon { width: 18px; }

.web-sidebar-foot { display: grid; gap: 9px; margin-top: auto; padding: 22px 7px 3px; }
.web-sidebar-foot button { border: 0; padding: 0; background: transparent; color: var(--lime); text-align: left; font-size: 11px; font-weight: 850; cursor: pointer; }
.web-sidebar-foot a { color: var(--muted); font-size: 10px; text-decoration: none; }
.web-sidebar-foot a:hover { color: var(--text); }
.web-sidebar-foot small { color: #555d70; font-size: 9px; }

.web-context { align-self: start; padding-top: 32px; }
.web-context-card { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 19px; padding: 17px; background: rgba(12,16,27,.84); box-shadow: 0 18px 55px rgba(0,0,0,.17); backdrop-filter: blur(18px); }
.web-welcome-card { overflow: hidden; background: radial-gradient(circle at 95% 0, rgba(139,108,255,.17), transparent 42%), linear-gradient(145deg, rgba(18,24,39,.92), rgba(8,12,20,.96)); }
.web-live { color: var(--lime); display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.web-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(200,255,69,.08); }
.web-welcome-card h2 { margin: 18px 0 7px; font-size: 24px; letter-spacing: -.04em; }
.web-welcome-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.web-welcome-card > button { width: 100%; min-height: 40px; margin-top: 16px; border: 1px solid rgba(200,255,69,.2); border-radius: 12px; background: rgba(200,255,69,.08); color: var(--lime); font-size: 11px; font-weight: 900; cursor: pointer; }

.web-context-title { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; }
.web-context-title > span { color: var(--muted-2); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.web-context-title > button { border: 0; background: transparent; color: var(--lime); font-size: 10px; cursor: pointer; }
.web-trend { width: 100%; min-height: 57px; border: 0; border-bottom: 1px solid var(--line); padding: 8px 2px; background: transparent; color: var(--text); display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; text-align: left; cursor: pointer; }
.web-trend:last-child { border-bottom: 0; }
.web-trend > i { width: 29px; height: 29px; border-radius: 10px; background: rgba(139,108,255,.1); color: #bbaaff; display: grid; place-items: center; font-size: 13px; font-style: normal; font-weight: 900; }
.web-trend strong, .web-trend small { display: block; }
.web-trend strong { font-size: 12px; }
.web-trend small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.web-trend:hover strong { color: var(--lime); }

.web-clean-card { display: grid; grid-template-columns: 31px 1fr; gap: 10px; }
.web-clean-card > .icon { width: 25px; height: 25px; color: var(--lime); }
.web-clean-card strong, .web-clean-card small { display: block; }
.web-clean-card strong { font-size: 12px; }
.web-clean-card small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.web-clean-card button { grid-column: 2; width: fit-content; border: 0; padding: 0; background: transparent; color: var(--lime); font-size: 10px; font-weight: 850; cursor: pointer; }
.web-footer-links { padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 7px 12px; }
.web-footer-links button { border: 0; padding: 0; background: transparent; color: var(--muted-2); font-size: 9px; cursor: pointer; }
.web-footer-links span { width: 100%; color: #555d70; font-size: 9px; }

@media (min-width: 1260px) {
  body.social-web-mode .prototype-shell { width: min(100%, 1400px); min-height: 100dvh; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 240px minmax(560px, 700px) 290px; gap: 24px; align-items: stretch; justify-content: center; }
  body.social-web-mode .web-sidebar { height: 100dvh; padding: 27px 9px 22px; display: flex; flex-direction: column; position: sticky; top: 0; }
  body.social-web-mode .web-context { display: block; position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; scrollbar-width: none; }
  body.social-web-mode .web-context::-webkit-scrollbar { display: none; }
}

@media (min-width: 761px) and (max-width: 1259px) {
  body.social-web-mode .prototype-shell { width: min(100%, 980px); min-height: 100dvh; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 225px minmax(500px, 700px); gap: 20px; align-items: stretch; justify-content: center; }
  body.social-web-mode .web-sidebar { height: 100dvh; padding: 27px 4px 22px; display: flex; flex-direction: column; position: sticky; top: 0; }
}

@media (min-width: 761px) {
  body.social-web-mode { overflow: hidden; }
  body.social-web-mode .device { width: 100%; height: 100dvh; min-height: 600px; padding: 0; border-radius: 0; background: transparent; border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 80px rgba(0,0,0,.22); }
  body.social-web-mode .bottom-nav { display: none; }
  body.social-web-mode .screen-scroll { height: 100%; padding-bottom: 42px; }
  body.social-web-mode .app { width: 100%; height: 100%; }
  body.social-web-mode .content-overlay-backdrop { position: absolute; }

  body.social-web-mode .topbar { min-height: 70px; padding: 15px 20px 12px; }
  body.social-web-mode .wordmark { font-size: 16px; }
  body.social-web-mode .wordmark .brand-mark { width: 36px; height: 36px; }
  body.social-web-mode .social-feed-promise { min-height: 58px; padding: 11px 14px; grid-template-columns: 28px 1fr auto; }
  body.social-web-mode .social-feed-promise strong { font-size: 12px; }
  body.social-web-mode .social-feed-promise small { font-size: 10px; }
  body.social-web-mode .social-feed-promise button { font-size: 10px; }
  body.social-web-mode .tabs button { font-size: 14px; }
  body.social-web-mode .quick-composer { min-height: 70px; padding: 11px 13px; grid-template-columns: 42px 1fr 36px; }
  body.social-web-mode .quick-composer strong { font-size: 12px; }
  body.social-web-mode .quick-composer small { font-size: 9px; }
  body.social-web-mode .quick-composer > i { width: 35px; height: 35px; }
  body.social-web-mode .followed-strip > button strong { font-size: 9px; }
  body.social-web-mode .chip { padding: 9px 14px; font-size: 12px; }
  body.social-web-mode .fresh-posts { min-height: 41px; font-size: 10px; }
  body.social-web-mode .relevance-bar { min-height: 59px; padding: 10px 13px; }
  body.social-web-mode .relevance-bar strong { font-size: 11px; }
  body.social-web-mode .relevance-bar small { font-size: 9px; }
  body.social-web-mode .relevance-bar button { font-size: 10px; }
  body.social-web-mode .section-title h3 { font-size: 17px; }
  body.social-web-mode .social-post { padding: 16px; }
  body.social-web-mode .social-author strong { font-size: 13px; }
  body.social-web-mode .social-author small { font-size: 10px; }
  body.social-web-mode .inline-follow { font-size: 10px; }
  body.social-web-mode .social-post > h3,
  body.social-web-mode .social-post-copy h3 { font-size: 18px; }
  body.social-web-mode .social-post > p,
  body.social-web-mode .social-post-copy p { font-size: 12px; }
  body.social-web-mode .social-media { height: 300px; }
  body.social-web-mode .social-actions button { font-size: 10px; }
  body.social-web-mode .social-actions .icon { width: 19px; }
  body.social-web-mode .social-news-card { min-height: 155px; grid-template-columns: 135px 1fr 16px; }
  body.social-web-mode .social-news-card h3 { font-size: 15px; }
  body.social-web-mode .social-news-card p { font-size: 10px; }
  body.social-web-mode .social-news-card small { font-size: 9px; }
  body.social-web-mode .clip-teaser { flex-basis: 180px; height: 225px; }
  body.social-web-mode .clip-teaser strong { font-size: 11px; }
  body.social-web-mode .clip-teaser small { font-size: 8px; }
  body.social-web-mode .real-community-note strong { font-size: 13px; }
  body.social-web-mode .real-community-note small { font-size: 11px; }
}

@media (max-width: 760px) {
  body.social-web-mode .prototype-shell { display: block; min-height: 100dvh; padding: 0; }
  body.social-web-mode .web-sidebar,
  body.social-web-mode .web-context { display: none; }
  body.social-web-mode .device { width: 100%; height: 100dvh; min-height: 560px; padding: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  body.social-web-mode .device-screen { border-radius: 0; }
  body.social-web-mode .app { height: 100%; }
  body.social-web-mode .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
  body.social-web-mode .screen-scroll { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

  body.social-web-mode .social-feed-promise strong,
  body.social-web-mode .quick-composer strong { font-size: 11px; }
  body.social-web-mode .social-feed-promise small,
  body.social-web-mode .quick-composer small { font-size: 8px; }
  body.social-web-mode .social-feed-promise button,
  body.social-web-mode .relevance-bar button { font-size: 9px; }
  body.social-web-mode .relevance-bar strong { font-size: 10px; }
  body.social-web-mode .relevance-bar small { font-size: 8px; }
  body.social-web-mode .social-post > h3 { font-size: 15px; }
  body.social-web-mode .social-post > p { font-size: 11px; }
  body.social-web-mode .social-author strong { font-size: 11px; }
  body.social-web-mode .social-author small,
  body.social-web-mode .inline-follow,
  body.social-web-mode .social-actions button { font-size: 9px; }
  body.social-web-mode .social-news-card h3 { font-size: 13px; }
  body.social-web-mode .social-news-card p { font-size: 9px; }
}