:root {
  color-scheme: dark;
  --bg: #03070c;
  --panel: rgba(7, 14, 24, .88);
  --panel-strong: rgba(4, 10, 18, .97);
  --line: rgba(185, 225, 255, .15);
  --line-bright: rgba(91, 195, 255, .42);
  --text: #f5f9fc;
  --muted: #9eacb9;
  --violet: #137fc1;
  --violet-bright: #33b6ed;
  --cyan: #55e1cf;
  --danger: #f05263;
  --ok: #55e1cf;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: transparent; letter-spacing: .012em; line-height: 1.7; text-rendering: optimizeLegibility; overflow-x: hidden; }
body::before { position: fixed; inset: 0; z-index: -2; background: #02070c; content: ''; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; letter-spacing: .016em; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
p, li { letter-spacing: .012em; line-height: 1.76; }
:focus-visible { outline: 3px solid rgba(69, 228, 212, .72) !important; outline-offset: 3px; }
[hidden] { display: none !important; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px; border-radius: 7px; background: #fff; color: #09040f; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }
.status { margin: 0; color: var(--muted); font-size: 12px; }

.ambient-effects { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; --pointer-x: 50vw; --pointer-y: 40vh; }
.ambient-image { position: absolute; inset: -3%; background: url('/assets/kos-background.jpg') center / cover no-repeat; filter: blur(2.4px) saturate(.92) contrast(1.04); opacity: .62; transform: scale(1.045); }
.ambient-ripple { position: absolute; width: 92vmax; aspect-ratio: 1.9; border-radius: 50%; background: repeating-radial-gradient(ellipse at center, transparent 0 8.8%, rgba(51,182,237,.13) 9.15%, rgba(85,225,207,.05) 9.42%, transparent 9.9% 15.5%); filter: blur(.7px); mask-image: radial-gradient(ellipse, #000 12%, rgba(0,0,0,.82) 44%, transparent 73%); opacity: .58; }
.ambient-ripple-one { top: -1vmax; left: -30vmax; transform: rotate(-8deg) scaleY(.48); }
.ambient-ripple-two { right: -35vmax; bottom: -12vmax; transform: rotate(12deg) scaleY(.42); opacity: .38; }
.ambient-pointer { position: absolute; inset: 0; background: radial-gradient(circle 320px at var(--pointer-x) var(--pointer-y), rgba(51,182,237,.16), rgba(85,225,207,.05) 38%, transparent 72%); mix-blend-mode: screen; }
.ambient-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, transparent 0 25%, rgba(4,1,10,.43) 78%), linear-gradient(180deg, transparent, rgba(3,1,8,.42)); }

.topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(225,211,255,.08); background: linear-gradient(90deg, rgba(20,8,37,.8), rgba(5,2,15,.76), rgba(20,8,37,.8)); backdrop-filter: blur(24px) saturate(145%); }
.topbar-inner { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; gap: 24px; width: min(1440px, calc(100% - 48px)); min-height: 84px; margin: auto; }
.topnav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.topnav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; color: #a99fb7; font-size: 12px; font-weight: 700; letter-spacing: .028em; }
.topnav a:hover, .topnav a.is-active { color: #fff; }
.topnav a.is-active::after { position: absolute; right: 0; bottom: 4px; left: 0; height: 1px; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px rgba(69,228,212,.58); content: ''; }
.brand { position: relative; display: grid; width: 64px; height: 64px; place-items: center; justify-self: center; }
.brand img { width: 58px; height: 58px; border-radius: 11px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(168,85,247,.3)); box-shadow: 0 12px 34px rgba(63,20,122,.28); }
.brand span { position: absolute; top: calc(100% + 1px); left: 50%; color: #aaa0bd; font-size: 7px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; transform: translateX(-50%); }
.account-area { display: flex; justify-self: end; align-items: center; gap: 14px; min-width: 0; }
.text-link { color: #d8cde8; font-size: 12px; font-weight: 700; }
.text-link:hover { color: #fff; }
.primary, .secondary, .danger-button, .icon-button { border: 0; }
.primary, .secondary, .danger-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 7px; font-size: 12px; font-weight: 800; }
.primary { border: 1px solid rgba(109,210,255,.48); background: linear-gradient(135deg, #0b6eaa, #20a8dc); box-shadow: 0 10px 34px rgba(19,127,193,.3), inset 0 1px rgba(255,255,255,.18); }
.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(19,127,193,.44), inset 0 1px rgba(255,255,255,.2); }
.primary.small { min-height: 38px; padding-inline: 14px; }
.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.045); color: #e6dced; }
.secondary:hover { border-color: var(--line-bright); background: rgba(156,94,236,.09); }
.danger-button { border: 1px solid rgba(251,113,133,.28); background: rgba(251,113,133,.08); color: #fecdd3; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border-radius: 50%; background: transparent; color: #b7adbf; }
.icon-button:hover { background: rgba(255,255,255,.06); color: #fff; }
.account-chip { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-chip span:last-child { min-width: 0; }
.account-chip strong, .account-chip small { display: block; overflow: hidden; max-width: 120px; text-overflow: ellipsis; white-space: nowrap; }
.account-chip strong { font-size: 11px; }
.account-chip small { color: var(--muted); font-size: 9px; }
.nav-badge { display: inline-grid; min-width: 17px; height: 17px; place-items: center; padding: 0 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: linear-gradient(135deg, var(--violet), var(--violet-bright)); box-shadow: 0 0 16px rgba(168,85,247,.38); color: #fff; font-size: 8px; font-weight: 900; line-height: 1; }

.mobile-menu { display: none; position: relative; }
.mobile-menu summary { display: grid; width: 40px; height: 40px; place-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { width: 16px; height: 1px; background: #d8cfdf; }
.mobile-menu nav { position: fixed; top: 67px; right: 14px; left: 14px; display: grid; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,5,14,.98); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.mobile-menu nav a { padding: 12px; color: #cbc1d6; }

.app-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 220px minmax(0, 700px) 220px; gap: 28px; width: min(1240px, calc(100% - 48px)); margin: 46px auto 110px; }
.main-column { min-width: 0; }
.rail { position: sticky; top: 112px; align-self: start; display: grid; gap: 16px; }
.rail-card, .surface { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(21,10,39,.8), rgba(7,4,15,.9)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 24px 70px rgba(0,0,0,.16); backdrop-filter: blur(18px) saturate(118%); }
.rail-card { padding: 18px; border-radius: 12px; }
.rail-title { margin: 0 0 10px; color: #c9b9da; font: 700 9px/1.4 ui-monospace, "Cousine", monospace; letter-spacing: .16em; }
.rail-card p { margin: 0; color: var(--muted); font-size: 12px; }
.rail-nav { display: grid; gap: 4px; }
.rail-nav a, .rail-nav button { display: flex; width: 100%; min-height: 43px; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: #cfc5dc; text-align: left; }
.rail-nav a:hover, .rail-nav button:hover, .rail-nav .is-active { background: rgba(145,98,238,.09); color: #fff; }
.rail-nav .nav-badge { margin-left: auto; }
.product-vault-link { display: flex; align-items: center; gap: 11px; }
.product-vault-link strong, .product-vault-link small { display: block; }
.product-vault-link strong { font-size: 11px; }
.product-vault-link small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.mini-links { display: grid; gap: 2px; }
.mini-links a { padding: 7px 0; color: #cfc5dc; font-size: 12px; }
.mini-links a:hover { color: #fff; }
.suggestions { display: grid; gap: 10px; }
.suggestion { display: flex; align-items: center; gap: 9px; }
.suggestion > span:last-child { min-width: 0; }
.suggestion strong, .suggestion small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion strong { font-size: 11px; }
.suggestion small { color: var(--muted); font-size: 9px; }

.view-head { position: relative; padding: 38px 4px 32px; }
.view-head::before { position: absolute; top: 0; left: 4px; width: 78px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--violet), transparent); box-shadow: 0 0 14px rgba(69,228,212,.45); content: ''; }
.eyebrow { margin: 0 0 12px; color: #d8b4fe; font: 700 9px/1.4 ui-monospace, "Cousine", monospace; letter-spacing: .18em; text-transform: uppercase; }
.view-head h1 { margin: 0; font-size: clamp(44px, 7vw, 70px); font-weight: 620; line-height: .96; letter-spacing: -.018em; }
.view-head > p:last-child { max-width: 610px; margin: 18px 0 0; color: #b6acbf; font-size: 15px; }
.view-tabs { display: flex; gap: 8px; margin: -5px 0 18px; border-bottom: 1px solid rgba(225,211,255,.1); }
.view-tabs button { position: relative; padding: 12px 14px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 750; }
.view-tabs button.is-active { color: #fff; }
.view-tabs button.is-active::after { position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: linear-gradient(90deg, var(--violet), var(--cyan)); content: ''; }

.composer { margin-bottom: 16px; padding: 20px; border-radius: 14px; }
.composer-closed { display: flex; align-items: center; gap: 11px; }
.composer-prompt { flex: 1; min-height: 46px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(3,1,9,.44); color: #aaa0bd; text-align: left; }
.form-grid { display: grid; gap: 14px; }
.form-grid h2 { margin: 0; font-size: 25px; letter-spacing: -.009em; }
.form-grid label { display: grid; gap: 7px; color: #cfc7db; font-size: 11px; font-weight: 750; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: rgba(2,1,8,.56); }
input, select { min-height: 45px; padding: 0 13px; }
textarea { min-height: 150px; padding: 12px 13px; line-height: 1.6; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: rgba(168,85,247,.75); box-shadow: 0 0 0 4px rgba(168,85,247,.12); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-row { display: flex !important; grid-template-columns: none !important; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid rgba(225,211,255,.08); }
.toggle-row input { width: 42px; min-height: 22px; accent-color: var(--violet-bright); }

.feed { display: grid; gap: 15px; }
.post { overflow: hidden; padding: 22px; border-radius: 14px; }
.post-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: linear-gradient(135deg, #6d28d9, #b75cff 58%, #35cfc1); color: #fff; font-size: 11px; font-weight: 900; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.author-copy { min-width: 0; }
.author-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 850; }
.handle { display: block; overflow: hidden; color: #8f849e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.role-badge { padding: 2px 6px; border: 1px solid rgba(216,180,254,.2); border-radius: 99px; background: rgba(168,85,247,.16); color: #e9d5ff; font-size: 8px; text-transform: uppercase; }
.post h2 { margin: 17px 0 8px; font-size: 25px; line-height: 1.22; letter-spacing: -.009em; }
.post-body { margin: 10px 0 0; color: #c8bed2; font-size: 14px; line-height: 1.78; overflow-wrap: anywhere; white-space: pre-wrap; }
.post-body > * { white-space: normal; }
.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }
.post-body p { margin: 0 0 12px; color: inherit; font: inherit; line-height: inherit; }
.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 { margin: 20px 0 8px; color: #f7f4ff; font-weight: 780; line-height: 1.3; letter-spacing: -.006em; }
.post-body h2 { font-size: 20px; }
.post-body h3 { font-size: 17px; }
.post-body h4, .post-body h5, .post-body h6 { font-size: 15px; }
.post-body ul, .post-body ol { margin: 9px 0 14px; padding-left: 24px; }
.post-body li { margin: 5px 0; color: inherit; line-height: 1.68; }
.post-body li::marker { color: #b477ff; }
.post-body a { color: #72eee2; text-decoration: underline; text-decoration-color: rgba(114,238,226,.38); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-body a:hover { color: #b6fff8; text-decoration-color: currentColor; }
.post-body blockquote { margin: 14px 0; padding: 8px 0 8px 15px; border-left: 2px solid rgba(168,85,247,.75); color: #bdb2c9; }
.post-body code { padding: 2px 5px; border: 1px solid rgba(225,211,255,.1); border-radius: 4px; background: rgba(2,1,8,.68); color: #e9d5ff; font: .9em/1.5 ui-monospace, "Cousine", "SFMono-Regular", Consolas, monospace; }
.post-body pre { max-width: 100%; margin: 14px 0; padding: 13px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: rgba(2,1,8,.76); white-space: pre; }
.post-body pre code { padding: 0; border: 0; background: transparent; }
.post-body hr { height: 1px; margin: 18px 0; border: 0; background: rgba(225,211,255,.12); }
.post-body table { display: block; width: max-content; max-width: 100%; margin: 14px 0; overflow-x: auto; border-collapse: collapse; }
.post-body th, .post-body td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; }
.post-body th { background: rgba(145,98,238,.09); color: #f7f4ff; }
.post-body .post-space { display: block; height: .72em; white-space: normal; }
.post-image { display: block; width: 100%; max-height: 520px; margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,1,8,.68); object-fit: contain; }
.link-preview { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3,1,9,.46); }
.link-preview .ui-icon { color: var(--cyan); }
.link-preview strong, .link-preview small { display: block; }
.link-preview strong { font-size: 11px; }
.link-preview small { color: var(--muted); font-size: 9px; }
.post-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin: 17px -6px -7px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.07); }
.action { display: flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 6px; background: transparent; color: #9f94ad; font-size: 11px; font-weight: 750; }
.action:hover, .action.is-active { background: rgba(145,98,238,.09); color: #e9d5ff; }
.comments { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.comment { display: grid; grid-template-columns: 31px 1fr; gap: 9px; }
.comment .avatar { width: 31px; height: 31px; flex-basis: 31px; }
.comment-bubble { padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.045); }
.comment-bubble strong { font-size: 10px; }
.comment-bubble p { margin: 4px 0 0; color: #bbb0c8; font-size: 12px; }
.comment-bubble .report-comment { margin-top: 6px; padding: 0; border: 0; background: none; color: #8f849e; font-size: 9px; }
.comment-form { display: flex; gap: 8px; }
.comment-form input { min-width: 0; }

.profile-surface { overflow: hidden; border-radius: 16px; }
.profile-cover { position: relative; aspect-ratio: 3.35 / 1; overflow: hidden; background: radial-gradient(circle at 35% 25%, rgba(168,85,247,.42), transparent 42%), linear-gradient(135deg, #16072e, #06030d); }
.profile-cover > img { width: 100%; height: 100%; object-fit: cover; }
.profile-cover.is-official::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,1,9,.58), rgba(3,1,9,.08) 45%, rgba(3,1,9,.48)); content: ''; }
.profile-cover-brand { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: clamp(20px, 5vw, 58px); }
.profile-cover-brand img { width: min(540px, 67%); max-height: 74%; object-fit: contain; filter: drop-shadow(0 8px 30px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(95,239,225,.14)); }
.profile-body { position: relative; padding: 0 24px 24px; }
.profile-avatar { width: 108px; height: 108px; margin-top: -54px; border: 5px solid #0c0615; font-size: 25px; }
.profile-actions { display: flex; justify-content: flex-end; gap: 8px; min-height: 54px; padding-top: 12px; }
.profile-name h1 { margin: 4px 0 0; font-size: 34px; letter-spacing: -.018em; }
.profile-bio { margin: 16px 0 0; color: #c8bed2; white-space: pre-wrap; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.profile-meta a { color: var(--cyan); }
.profile-counts { display: flex; gap: 20px; margin-top: 15px; font-size: 11px; }
.profile-counts strong { color: #fff; }
.profile-connection-count { appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.profile-connection-count:hover, .profile-connection-count:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.profile-tabs { display: flex; margin: 18px -24px -24px; border-top: 1px solid var(--line); }
.profile-tabs button { flex: 1; min-height: 48px; border: 0; border-right: 1px solid rgba(225,211,255,.08); background: transparent; color: var(--muted); }
.profile-tabs button:last-child { border-right: 0; }
.profile-tabs button.is-active { background: rgba(145,98,238,.08); color: #fff; }
.private-note { margin-top: 16px; padding: 14px; border: 1px solid rgba(216,180,254,.16); border-radius: 9px; background: rgba(168,85,247,.08); color: #cfc5db; font-size: 12px; }
.profile-image-editor { position: relative; margin: -2px 0 4px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,1,9,.48); }
.profile-image-editor-cover { position: relative; aspect-ratio: 4 / 1; overflow: hidden; background: radial-gradient(circle at 38% 15%, rgba(168,85,247,.44), transparent 42%), #080312; }
.profile-image-editor-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-image-editor-avatar { position: absolute; left: 18px; bottom: 14px; width: 76px; height: 76px; border: 4px solid #0b0513; font-size: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.42); }
.profile-image-editor-copy { display: flex; min-height: 52px; align-items: center; justify-content: flex-end; padding: 10px 16px 10px 108px; color: var(--muted); font-size: 10px; }
.relationship-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 16px; }
.relationship-panel { padding: 18px; border-radius: 14px; }
.relationship-panel h2 { margin: 0 0 4px; font-size: 18px; }
.relationship-panel > p { margin: 0 0 14px; }
.relationship-list { display: grid; gap: 8px; }
.relationship-card { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(225,211,255,.09); border-radius: 9px; background: rgba(3,1,9,.34); }
.relationship-card > span:nth-child(2) { min-width: 0; flex: 1; }
.relationship-card strong, .relationship-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relationship-card strong { font-size: 11px; }
.relationship-card small { color: var(--muted); font-size: 9px; }
.relationship-card .primary, .relationship-card .secondary { min-height: 34px; padding-inline: 10px; font-size: 10px; }

.search-form { display: flex; gap: 9px; margin-bottom: 18px; padding: 16px; border-radius: 13px; }
.search-form input { min-width: 0; }
.search-results { display: grid; gap: 20px; }
.result-group h2 { margin: 0 0 10px; font-size: 18px; }
.people-list { display: grid; gap: 8px; }
.person-card { display: flex; align-items: center; gap: 11px; padding: 13px; border-radius: 11px; }
.person-card > span:last-child { min-width: 0; }
.person-card strong, .person-card small, .person-card p { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-card small { color: var(--muted); font-size: 10px; }
.person-card p { margin-top: 4px; color: #bdb2c9; font-size: 11px; }

.messages-layout { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 620px; overflow: hidden; border-radius: 14px; }
.conversation-list { border-right: 1px solid var(--line); }
.conversation-list h2, .thread-head { margin: 0; padding: 18px; border-bottom: 1px solid var(--line); font-size: 16px; }
.conversation-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 13px; border: 0; border-bottom: 1px solid rgba(225,211,255,.07); background: transparent; text-align: left; }
.conversation-item:hover, .conversation-item.is-active { background: rgba(145,98,238,.08); }
.conversation-item > span:last-child { min-width: 0; }
.conversation-item strong, .conversation-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item strong { font-size: 11px; }
.conversation-item small { color: var(--muted); font-size: 9px; }
.thread { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.thread-head { display: flex; align-items: center; gap: 10px; }
.thread-back { display: none; }
.message-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; max-height: 520px; padding: 18px; overflow-y: auto; }
.message { max-width: 78%; padding: 9px 12px; border-radius: 12px 12px 12px 3px; background: rgba(255,255,255,.065); color: #d9d0e2; font-size: 12px; white-space: pre-wrap; }
.message.is-mine { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: linear-gradient(135deg, rgba(116,49,223,.85), rgba(167,68,240,.82)); color: #fff; }
.message small { display: block; margin-top: 4px; color: rgba(255,255,255,.56); font-size: 8px; }
.report-message { margin-top: 6px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.58); font-size: 8px; text-decoration: underline; text-underline-offset: 2px; }
.report-message:hover { color: #fff; }
.message-form { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.message-form input { min-width: 0; }

.load-more { justify-self: center; width: min(100%, 320px); min-height: 44px; margin: 5px auto 0; border: 1px solid var(--line-bright); border-radius: 8px; background: linear-gradient(135deg, rgba(31,15,53,.92), rgba(13,7,24,.92)); color: #e8def3; font-size: 11px; font-weight: 850; letter-spacing: .035em; }
.load-more:hover { border-color: rgba(114,238,226,.42); background: linear-gradient(135deg, rgba(91,41,164,.34), rgba(18,9,32,.94)); color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.25), 0 0 22px rgba(114,238,226,.08); transform: translateY(-1px); }
.load-more:disabled, .load-more[aria-busy="true"] { cursor: wait; opacity: .58; transform: none; }

.notification-list, .moderation-list, .connection-list { display: grid; gap: 11px; }
.notification-card { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(21,10,39,.8), rgba(7,4,15,.9)); }
.notification-card.is-unread { border-color: rgba(168,85,247,.4); background: linear-gradient(135deg, rgba(55,24,94,.82), rgba(8,4,16,.92)); }
.notification-card.is-unread::before { position: absolute; top: 50%; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(69,228,212,.8); content: ''; transform: translateY(-50%); }
.notification-copy { min-width: 0; }
.notification-copy strong, .notification-copy p, .notification-copy small { display: block; margin: 0; }
.notification-copy strong { color: #f8f5ff; font-size: 12px; }
.notification-copy p { margin-top: 2px; color: #c2b7cd; font-size: 12px; line-height: 1.55; }
.notification-copy small { margin-top: 4px; color: #80758d; font-size: 9px; }
.notification-card > a:last-child, .notification-card > button:last-child { justify-self: end; }

.moderation-list { gap: 14px; }
.moderation-card { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(21,10,39,.8), rgba(7,4,15,.92)); }
.moderation-card h2, .moderation-card h3 { margin: 0; color: #fff; }
.moderation-card h2 { font-size: 19px; }
.moderation-card h3 { font-size: 15px; }
.moderation-card p { margin: 8px 0 0; color: #c4bacf; }
.moderation-snapshot { margin: 14px 0; padding: 12px 14px; overflow-wrap: anywhere; border: 1px solid rgba(225,211,255,.1); border-left: 3px solid var(--violet); border-radius: 8px; background: rgba(5,2,13,.5); }
.moderation-snapshot strong { color: #fff; }
.moderation-snapshot p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; white-space: pre-wrap; }
.moderation-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 9px; color: #8f849e; font-size: 9px; }
.moderation-meta span { display: inline-flex; align-items: center; gap: 5px; }
.moderation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(225,211,255,.08); }
.moderation-actions input, .moderation-actions select { flex: 1 1 190px; min-width: 0; }
.moderation-actions .primary, .moderation-actions .secondary, .moderation-actions .danger-button { min-height: 38px; padding-inline: 13px; }

.connection-list { max-height: min(54vh, 430px); margin-top: 14px; overflow-y: auto; overscroll-behavior: contain; }
.connection-list .person-card, .connection-list .connection-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(225,211,255,.09); border-radius: 9px; background: rgba(3,1,9,.34); }
.connection-list .person-card > span:last-child, .connection-list .connection-card > span:last-child { min-width: 0; flex: 1; }
.connection-list strong, .connection-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-list small { color: var(--muted); font-size: 9px; }

.loading, .empty-state { padding: 56px 22px; color: var(--muted); text-align: center; }
.empty-state h2 { margin: 0 0 8px; color: #fff; font-size: 22px; }
.empty-state p { margin: 0 auto; max-width: 480px; }
.spinner { display: inline-block; width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--violet-bright); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 90; max-width: 360px; padding: 12px 15px; border: 1px solid rgba(216,180,254,.25); border-radius: 9px; background: #211134; box-shadow: 0 18px 50px #0008; color: #fff; font-size: 12px; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(2,1,8,.78); backdrop-filter: blur(14px); }
.dialog { width: min(520px, 100%); padding: 22px; border-radius: 14px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h2 { margin: 0; font-size: 22px; }
.dialog p { color: var(--muted); }
.dialog-action-list { display: grid; gap: 10px; margin-top: 18px; }
.dialog-action-list > * { width: 100%; justify-content: center; }

.site-footer { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 88px 24px 34px; border-top: 1px solid rgba(148,103,242,.13); background: radial-gradient(circle at 50% 0, rgba(91,40,189,.16), transparent 32rem), rgba(2,1,5,.92); }
.site-footer > img { width: min(118px, 30vw); filter: drop-shadow(0 0 28px rgba(161,110,245,.25)); }
.site-footer > p { margin: 16px 0 24px; color: #8f849e; font: 700 9px/1.4 ui-monospace, "Cousine", monospace; letter-spacing: .2em; text-transform: uppercase; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; color: #b4a9bf; font-size: 10px; }
.site-footer a:hover { color: #fff; }
.site-footer small { margin-top: 28px; color: #675e72; font-size: 9px; }
.mobile-dock { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ambient-image { animation: image-drift 24s ease-in-out infinite alternate; }
  .ambient-ripple-one { animation: ripple-one 13s ease-in-out infinite alternate; }
  .ambient-ripple-two { animation: ripple-two 17s ease-in-out infinite alternate-reverse; }
  @keyframes image-drift { 0% { transform: translate3d(-.8%,-.45%,0) scale(1.045); } 50% { transform: translate3d(.65%,.4%,0) scale(1.065); } 100% { transform: translate3d(-.25%,.8%,0) scale(1.052); } }
  @keyframes ripple-one { 0% { transform: translate3d(-2%,-1%,0) rotate(-8deg) scale(.96,.43); opacity: .32; } 52% { transform: translate3d(4%,2%,0) rotate(-5deg) scale(1.04,.52); opacity: .62; } 100% { transform: translate3d(8%,-2%,0) rotate(-10deg) scale(.99,.46); opacity: .4; } }
  @keyframes ripple-two { 0% { transform: translate3d(2%,2%,0) rotate(12deg) scale(.95,.39); opacity: .24; } 100% { transform: translate3d(-6%,-4%,0) rotate(8deg) scale(1.08,.47); opacity: .48; } }
}

@media (max-width: 1120px) {
  .app-layout { grid-template-columns: 190px minmax(0, 1fr); width: min(930px, calc(100% - 32px)); gap: 22px; }
  .right-rail { display: none; }
}

@media (max-width: 780px) {
  .topbar-inner { grid-template-columns: 1fr auto auto; width: calc(100% - 28px); min-height: 64px; gap: 10px; }
  .topnav, .left-rail { display: none; }
  .brand { width: 42px; height: 42px; justify-self: start; }
  .brand img { width: 40px; height: 40px; border-radius: 8px; }
  .brand span, .account-area .text-link, .account-chip span:last-child { display: none; }
  .mobile-menu { display: block; }
  .app-layout { display: block; width: min(100% - 24px, 700px); margin: 24px auto 94px; }
  .view-head { padding-top: 42px; }
  .view-head h1 { font-size: clamp(42px, 13vw, 62px); }
  .surface, .composer, .post { border-radius: 12px; }
  .field-row { grid-template-columns: 1fr; }
  .relationship-settings { grid-template-columns: 1fr; }
  .messages-layout { grid-template-columns: 1fr; min-height: 540px; }
  .conversation-list { border-right: 0; }
  .messages-layout:not(.has-open-thread) .thread { display: none; }
  .messages-layout.has-open-thread .conversation-list { display: none; }
  .thread { min-height: 540px; border-top: 0; }
  .thread-back { display: grid; flex: 0 0 38px; }
  .mobile-dock { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; z-index: 60; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 56px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,4,15,.9); box-shadow: 0 18px 60px rgba(0,0,0,.45); backdrop-filter: blur(20px); }
  .mobile-dock a, .mobile-dock button { position: relative; display: grid; place-items: center; border: 0; background: transparent; color: #a99fb7; }
  .mobile-dock .nav-badge { position: absolute; top: 8px; left: calc(50% + 4px); min-width: 14px; height: 14px; padding-inline: 4px; font-size: 7px; }
  .mobile-dock .is-active { color: #fff; }
  .toast { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 12px; max-width: none; }
  .site-footer { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .notification-card { grid-template-columns: 38px minmax(0,1fr); }
  .notification-card > a:last-child, .notification-card > button:last-child { grid-column: 2; justify-self: start; }
}

@media (max-width: 480px) {
  .account-area .primary { display: none; }
  .topbar-inner { grid-template-columns: 1fr auto; }
  .mobile-menu { grid-column: 2; }
  .post, .composer { padding: 17px; }
  .post-actions { grid-template-columns: repeat(4, 1fr); }
  .action span { display: none; }
  .profile-body { padding-inline: 17px; }
  .profile-tabs { margin-inline: -17px; }
  .profile-avatar { width: 88px; height: 88px; margin-top: -44px; }
  .profile-actions { min-height: 48px; }
  .profile-name h1 { font-size: 29px; }
  .form-actions, .comment-form { align-items: stretch; flex-direction: column; }
  .message { max-width: 88%; }
  .moderation-actions { align-items: stretch; flex-direction: column; }
  .moderation-actions input, .moderation-actions select, .moderation-actions .primary, .moderation-actions .secondary, .moderation-actions .danger-button { width: 100%; flex-basis: auto; }
  .load-more { width: 100%; }
}

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