:root {
  color-scheme: dark;
  --bg: #08090b;
  --panel: #101114;
  --panel-hover: #17181c;
  --line: #24252a;
  --muted: #85868f;
  --text: #f4f2ec;
  --blue: #90a9cf;
  --orange: #ff8a16;
  --radius: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.app-shell { width: min(1240px, 100%); min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: 242px minmax(420px, 620px) minmax(260px, 330px); justify-content: center; }
.left-rail { position: sticky; top: 0; height: 100vh; padding: 30px 22px 22px 16px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; justify-content: center; width: fit-content; font-size: 31px; font-weight: 850; letter-spacing: -2.7px; line-height: 1; text-align: center; }
.brand-bye { color: #f5f2eb; }
.brand-dot { color: var(--orange); }
.brand-kim { color: var(--blue); }
.post-name, .post-handle, .account-label, .profile-head h2 { font-family: Arial, Helvetica, sans-serif; font-variant: normal; font-feature-settings: normal; font-synthesis: none; }
.post-handle, .account-label small { font-variant: normal; font-feature-settings: normal; font-synthesis: none; }
.main-nav { display: grid; gap: 7px; margin: 45px 0 24px; }
.nav-link { display: flex; align-items: center; gap: 16px; border: 0; background: transparent; color: #b9bac0; font-size: 16px; padding: 11px 12px; border-radius: 12px; text-align: left; cursor: pointer; transition: background .18s, color .18s; }
.nav-link:hover, .nav-link.active { background: #15161a; color: var(--text); }
.nav-link.active { font-weight: 700; }
.notification-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: auto; padding: 0 5px; border-radius: 999px; background: var(--orange); color: #15110c; font-size: 10px; font-weight: 800; }
.nav-icon, .ui-icon { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon { width: 19px; height: 19px; flex-basis: 19px; }
.compose-button, .primary-button { border: 0; border-radius: 9px; background: var(--text); color: #101114; font-weight: 750; padding: 12px 18px; cursor: pointer; transition: background .18s; }
.compose-button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 17px; }
.compose-icon { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compose-button:hover, .primary-button:hover { background: #fff; }
.verification-rail-link { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border: 1px solid #9bb6d82b; border-radius: 9px; background: linear-gradient(135deg, #9bb6d810, #c7a4770b); transition: border-color .18s, background .18s; }
.verification-rail-link:hover { border-color: #9bb6d870; background: #9bb6d818; }
.verification-rail-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; background: #9bb6d81a; }
.verification-rail-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.verification-rail-link > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.verification-rail-link strong { font-size: 12px; }
.verification-rail-link small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.verification-rail-arrow { margin-left: auto; color: var(--blue); font-size: 15px; }
.rail-bottom { margin-top: auto; padding: 0 10px; display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; }
.rail-bottom a, .text-link { color: #c4c5ca; }
.rail-bottom a:hover, .text-link:hover, .site-footer a:hover { color: var(--blue); }
.account-control { position: relative; width: 100%; }
.account-chip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px; width: 100%; border: 1px solid transparent; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; }
.account-chip:hover, .account-chip[aria-expanded="true"] { border-color: var(--line); background: var(--panel-hover); }
.account-chip .avatar { width: 38px; height: 38px; flex-basis: 38px; }
.account-chip .account-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-label strong { font-size: 13px; }
.account-label small { color: var(--muted); font-size: 11px; }
.account-chevron { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avatar-icon { width: 19px; height: 19px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-menu { position: absolute; z-index: 15; right: 0; bottom: calc(100% + 7px); width: min(260px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #141519; box-shadow: 0 16px 48px #0009; }
.account-menu button, .account-menu a { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: #e5e4e0; text-align: left; cursor: pointer; font-size: 13px; }
.account-menu button:hover, .account-menu a:hover { background: #ffffff0a; color: var(--blue); }
.account-menu button + button, .account-menu a + button, .account-menu button + a { margin-top: 2px; }
.account-menu [data-account-action="logout"] { color: #ffa28b; }
.mobile-account-control { display: none; }
.feed-column { min-width: 0; border-right: 1px solid var(--line); }
.feed-header { position: sticky; top: 0; z-index: 3; background: rgb(8 9 11 / 91%); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.feed-header h1 { margin: 0; padding: 17px 23px 12px; font-size: 20px; letter-spacing: -.35px; }
.feed-refresh { position: absolute; top: 11px; right: 15px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }
.feed-refresh:hover { border-color: var(--line); background: var(--panel-hover); color: var(--text); }
.feed-refresh:disabled { opacity: .45; cursor: wait; }
.feed-tabs { display: flex; }
.feed-tab { position: relative; flex: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 12px; }
.feed-tab:hover { color: var(--text); background: #ffffff07; }
.feed-tab.selected { color: var(--text); font-weight: 700; }
.feed-tab.selected::after { content: ""; position: absolute; width: 44px; height: 3px; bottom: 0; left: calc(50% - 22px); border-radius: 4px; background: var(--orange); }
.mobile-brand { display: none; }
.mobile-main-nav { display: none; }
.composer { display: flex; gap: 13px; padding: 21px 22px 17px; border-bottom: 1px solid var(--line); }
.avatar { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #101114; background: var(--blue); font-weight: 800; font-size: 17px; }
.avatar-you { color: #201306; background: #f8a54b; }
.composer-main { flex: 1; min-width: 0; }
.composer textarea { width: 100%; min-height: 62px; padding: 9px 1px; resize: vertical; border: 0; background: transparent; color: var(--text); font-size: 18px; line-height: 1.45; }
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: #777980; }
.composer-tools { min-height: 41px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.composer-hints { display: grid; gap: 2px; }
.composer-note { color: var(--muted); font-size: 11px; }
#char-count.near-limit { color: #ffb45f; }
.composer-action { display: flex; align-items: center; gap: 12px; }
.schedule-post-button { min-height: 36px; padding: 7px 11px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); font-size: 12px; }
.schedule-post-button:hover, .schedule-post-button[aria-pressed="true"] { border-color: var(--line); background: var(--panel-hover); color: var(--text); }
#char-count { color: var(--muted); font-size: 11px; }
.primary-button { padding: 9px 17px; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.timeline { min-height: 300px; }
.conversation-list { display: grid; }
.conversation-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.conversation-item:hover { background: var(--panel-hover); }
.conversation-item .avatar { width: 40px; height: 40px; flex-basis: 40px; }
.conversation-copy { display: grid; flex: 1; min-width: 0; gap: 3px; }
.conversation-copy strong, .conversation-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy small, .conversation-copy > span { color: var(--muted); font-size: 12px; }
.conversation-unread { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--orange); color: #15110c; font-size: 11px; font-weight: 800; }
.messages-panel { min-height: 300px; }
.message-start-form, .reel-create-form { display: grid; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.message-start-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.message-start-form .field { margin: 0; }
.message-thread { display: flex; flex-direction: column; min-height: min(70vh, 720px); }
.thread-heading { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.thread-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-heading small { color: var(--muted); font-weight: 400; }
.message-history { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 200px; max-height: 56vh; overflow-y: auto; padding: 18px; }
.message-bubble { display: grid; gap: 4px; width: fit-content; max-width: min(82%, 460px); padding: 10px 13px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--panel); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble.sent { align-self: flex-end; border-color: #4b5a70; border-radius: 16px 16px 4px 16px; background: #1b2533; }
.message-bubble time { color: var(--muted); font-size: 10px; }
.message-compose { display: flex; align-items: end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.message-compose textarea { flex: 1; min-width: 0; max-height: 150px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); }
.message-profile { padding: 4px 9px; font-size: 11px; }
.reel-create-form { margin: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.reel-create-form h2 { margin: 0; font-size: 17px; }
.reels-feed { display: grid; gap: 16px; height: min(78vh, 780px); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; padding: 12px; }
.reel-card { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #000; scroll-snap-align: start; }
.reel-video { width: 100%; height: 100%; min-height: min(68vh, 680px); object-fit: contain; background: #000; }
.reel-caption { position: absolute; right: 74px; bottom: 23px; left: 20px; z-index: 1; display: grid; gap: 6px; padding: 25px 12px 10px 0; background: linear-gradient(transparent, #000a); text-shadow: 0 1px 4px #000; }
.reel-caption span { color: #ddd; font-size: 12px; }
.reel-caption p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reel-actions { position: absolute; right: 13px; bottom: 28px; z-index: 2; display: grid; gap: 14px; justify-items: center; }
.reel-action { display: grid; gap: 3px; justify-items: center; min-width: 42px; border: 0; background: transparent; color: white; cursor: pointer; text-shadow: 0 1px 4px #000; }
.reel-action .action-icon { width: 25px; height: 25px; flex-basis: 25px; }
.reel-action strong { font-size: 12px; }
.reel-action.liked { color: #fa748a; }
.reel-action:hover { color: var(--orange); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.post { position: relative; display: flex; gap: 12px; padding: 18px 21px 13px; border-bottom: 1px solid var(--line); transition: background .18s; }
.post:hover { background: #ffffff04; }
.post-focused { border-left: 3px solid var(--orange); background: #ff8a1608; }
.post-content { flex: 1; min-width: 0; }
.post-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 24px; }
.post-meta a.post-time { color: var(--muted); text-decoration: none; }
.post-meta a.post-time:hover { color: var(--blue); text-decoration: underline; }
.post-name { font-weight: 720; }
.mention, .repost-note a { color: var(--blue); }
.mention:hover, .repost-note a:hover { text-decoration: underline; }
.repost-note { margin: 0 0 4px; color: var(--muted); font-size: 11px; }
.post-handle, .post-time, .post-separator { color: var(--muted); font-size: 13px; }
.post-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 11px; font-size: 14px; line-height: 1.6; }
.reply-context { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.post-actions { display: flex; justify-content: space-between; max-width: 410px; margin-left: -9px; }
.post-action { display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.action-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-action:hover { color: var(--blue); background: #90a9cf14; }
.post-action.like.liked { color: #fa748a; }
.post-action.like.liked .action-icon path, .reel-action.liked .action-icon path { fill: currentColor; }
.post-action.like:hover, .post-action.like.liked:hover { color: #fa748a; background: #fa748a14; }
.post-action.reposted { color: #71c9a1; }
.post-action.bookmarked { color: var(--orange); }
.post-action.repost:hover, .post-action.reposted:hover { color: #71c9a1; background: #71c9a114; }
.thread-panel { margin-top: 10px; padding: 8px 0 2px; border-top: 1px solid var(--line); }
.thread-replies > .post { padding: 12px 0; border-bottom-color: #1d1e23; }
.thread-replies .avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
.thread-replies .post-menu-wrap { top: 9px; right: 0; }
.thread-replies .post-body { margin-bottom: 5px; }
.thread-empty { color: var(--muted); font-size: 12px; }
.reply-form { display: flex; align-items: end; gap: 10px; padding-top: 9px; }
.reply-form textarea { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; resize: vertical; background: #0c0d10; color: var(--text); }
.reply-form button { flex: 0 0 auto; }
.profile-card { overflow: hidden; border-bottom: 1px solid var(--line); }
.profile-cover { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 148px; padding: 18px 23px; overflow: hidden; background: radial-gradient(ellipse at 18% 120%, #c7a47744, transparent 54%), radial-gradient(ellipse at 85% -15%, #9bb6d844, transparent 50%), linear-gradient(115deg, #20231f, #171a20 56%, #24231f); }
.profile-cover::before, .profile-cover::after { position: absolute; content: ""; border: 1px solid #ffffff14; border-radius: 50%; transform: rotate(-28deg); }
.profile-cover::before { width: 270px; height: 110px; right: 18%; top: 29px; }
.profile-cover::after { width: 340px; height: 145px; right: 12%; top: 10px; }
.profile-cover-mark { z-index: 1; color: #ffffff30; font-size: 21px; font-weight: 850; letter-spacing: -1.5px; }
.profile-cover-mark span { color: var(--orange); }
.profile-cover-orbit { position: absolute; top: -95px; left: 25%; width: 220px; height: 220px; border-radius: 50%; background: #9bb6d80a; filter: blur(1px); }
.profile-card-body { padding: 0 23px 24px; }
.profile-topline { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -43px; }
.profile-avatar { display: grid; place-items: center; width: 92px; height: 92px; flex: 0 0 92px; border: 5px solid var(--bg); border-radius: 50%; background: linear-gradient(145deg, #d9bf9d, #8ea6c4); box-shadow: 0 5px 20px #0007; color: #15171a; font-size: 31px; font-weight: 850; }
.profile-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-bottom: 5px; }
.profile-actions .primary-button, .profile-actions .quiet-button { min-height: 38px; padding: 8px 14px; font-size: 12px; }
.profile-identity { margin-top: 15px; }
.profile-eyebrow { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.profile-identity h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 2px; font-family: Arial, Helvetica, sans-serif; font-size: 23px; letter-spacing: -.5px; line-height: 1.25; }
.profile-identity .post-handle { color: var(--muted); font-size: 13px; }
.profile-url { display: inline-block; margin-top: 5px; color: var(--blue); font-size: 13px; text-decoration: none; }
.profile-url:hover { text-decoration: underline; }
.notification-item { display: flex; gap: 13px; padding: 16px 21px; border-bottom: 1px solid var(--line); }
.notification-item.unread { background: #90a9cf0b; }
.notification-icon { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #90a9cf17; color: var(--blue); }
.notification-item p { margin: 0 0 3px; font-size: 13px; }
.notification-item p a { font-weight: 750; }
.notification-item time { color: var(--muted); font-size: 11px; }
.notification-post { display: block; max-width: 100%; margin: 5px 0; padding: 0; border: 0; background: none; color: var(--muted); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 12px; }
.notification-post:hover { color: var(--blue); }
.profile-bio { margin: 18px 0 20px; color: #d5d4cf; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; color: var(--muted); }
.profile-stats span { display: flex; flex-direction: column; gap: 1px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: #ffffff04; }
.profile-stats strong { color: var(--text); font-size: 17px; line-height: 1.2; }
.profile-stats small { color: var(--muted); font-size: 11px; }
.post-menu-wrap { position: absolute; top: 13px; right: 17px; }
.menu-button { border: 0; background: transparent; color: var(--muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 19px; }
.menu-button:hover { background: #90a9cf14; color: var(--blue); }
.post-menu { position: absolute; right: 0; z-index: 2; width: 170px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #17181c; box-shadow: 0 12px 35px #0008; }
.post-menu button { display: block; width: 100%; padding: 9px; text-align: left; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font-size: 13px; }
.post-menu button:hover { background: #ffffff0b; }
.post-menu button[data-post-action="delete"] { color: #ff979d; }
.empty-state { padding: 58px 26px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font-size: 19px; margin-bottom: 4px; }
.empty-mark { color: var(--orange); font-size: 24px; margin-bottom: 8px; }
.empty-icon { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.right-rail { padding: 15px 16px 30px; }
.search-box { display: flex; align-items: center; gap: 10px; height: 43px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #101114; color: var(--muted); }
.search-box:focus-within { border-color: #607895; }
.search-box > .ui-icon { width: 18px; height: 18px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: none; appearance: none; -webkit-appearance: none; background: transparent; color: var(--text); font-size: 13px; }
.search-box input::-webkit-search-decoration, .search-box input::-webkit-search-results-button, .search-box input::-webkit-search-results-decoration, .search-box input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.search-box kbd { padding: 1px 5px; border: 1px solid #393a40; border-radius: 4px; color: #777980; font-size: 11px; }
.side-card { margin-top: 19px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: #0d0e10; }
.welcome-card { padding: 21px; }
.eyebrow { color: var(--orange); text-transform: uppercase; font-size: 10px; font-weight: 750; letter-spacing: 1.4px; }
.welcome-card h2 { margin: 8px 0 8px; font-size: 25px; line-height: 1.16; letter-spacing: -.8px; }
.welcome-card p, .side-card > p { color: #a1a2a9; font-size: 12px; line-height: 1.7; }
.wide { width: 100%; margin-top: 8px; }
.quiet-button { padding: 9px 17px; border: 0; border-radius: 999px; background: transparent; color: #c5c5c9; cursor: pointer; }
.quiet-button:hover { background: #ffffff09; color: var(--text); }
.card-heading { display: flex; align-items: center; justify-content: space-between; }
.card-heading h2 { margin: 0; font-size: 15px; }
.spark-icon { width: 22px; height: 22px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side-card .text-link { display: block; margin-top: 10px; font-size: 12px; font-weight: 650; }
.link-icon { display: inline; width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 6px; color: #72737a; font-size: 11px; }
.site-footer a { color: #a0a1a7; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 10; transform: translate(-50%, 15px); padding: 11px 17px; border: 1px solid #34353b; border-radius: 999px; background: #191a1e; color: var(--text); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 13px; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.modal { position: fixed; inset: 0; width: min(440px, calc(100% - 28px)); max-height: min(720px, calc(100% - 30px)); padding: 29px; border: 1px solid #303137; border-radius: 15px; background: #101114; color: var(--text); box-shadow: 0 24px 90px #000b; }
.modal::backdrop { background: #000b; backdrop-filter: blur(5px); }
.modal-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #a7a8ae; font-size: 25px; cursor: pointer; }
.modal-close:hover { background: #ffffff10; color: white; }
.modal-brand { margin: 6px 0 23px; font-size: 27px; }
.modal h2 { margin: 0; font-size: 24px; letter-spacing: -.5px; }
.modal-subtitle { color: var(--muted); margin: 5px 0 22px; font-size: 13px; }
.field { display: grid; gap: 6px; margin: 12px 0; color: #c1c2c8; font-size: 12px; font-weight: 650; }
.field-hint { color: var(--muted); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #34353b; border-radius: 11px; outline: none; background: #0b0c0e; color: var(--text); font-size: 14px; }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #798eae; }
.terms-check { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0; color: #aeb0b7; font-size: 12px; }
.terms-check input { accent-color: var(--orange); margin-top: 3px; }
.terms-check a { color: var(--blue); text-decoration: underline; }
.form-error { color: #ff979d; font-size: 12px; }
.switch-auth { text-align: center; color: var(--muted); font-size: 12px; }
.switch-auth button { padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0 9px; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-button, .discord-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border: 1px solid #414249; border-radius: 999px; background: #121317; color: var(--text); cursor: pointer; font-weight: 650; }
.google-button:hover, .discord-button:hover { background: #1a1b20; }
.google-button:disabled, .discord-button:disabled { opacity: .6; cursor: wait; }
.google-mark { color: #90a9cf; font-size: 17px; font-weight: 800; }
.discord-mark { color: #7289da; font-size: 18px; font-weight: 800; }
.compact-modal { width: min(390px, calc(100% - 28px)); }
.compact-modal h2 { margin: 7px 0 19px; }
.follow-button { margin-top: 12px; }
.legal-shell { width: min(760px, calc(100% - 36px)); margin: 0 auto; padding: 35px 0 80px; }
.legal-shell h1 { margin: 45px 0 8px; font-size: clamp(34px, 8vw, 52px); letter-spacing: -2px; }
.legal-shell .updated { color: var(--muted); font-size: 13px; }
.legal-shell h2 { margin: 34px 0 8px; font-size: 19px; }
.legal-shell p, .legal-shell li { color: #b8b9c0; line-height: 1.8; }
.legal-shell ul { padding-left: 22px; }
.legal-callout { padding: 17px 19px; margin-top: 25px; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0; background: #ffffff06; color: #d4d3ce; }
.legal-back { display: inline-block; margin-top: 35px; color: var(--blue); }
.email-action-page { width: min(540px, calc(100% - 36px)); }
.email-action-page form { margin-top: 22px; }
.email-action-page form > .primary-button { width: 100%; }
.email-action-page .form-error { padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.page-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 44px; }
.page-links a { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: #c4c5ca; font-size: 12px; }
.page-links a:hover { border-color: #657894; color: var(--blue); }
.account-page h1 { margin-top: 12px; }
.account-card { margin: 20px 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #0d0e10; }
.account-card h2 { margin: 0 0 12px; font-size: 18px; }
.account-card p { color: #b8b9c0; font-size: 13px; }
.settings-card { padding: 0 22px; }
.settings-link { display: flex; align-items: center; gap: 14px; padding: 19px 0; }
.settings-link + .settings-link { border-top: 1px solid var(--line); }
.settings-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--blue); }
.settings-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-link > span:nth-child(2) { display: grid; gap: 3px; }
.settings-link small { color: var(--muted); font-size: 12px; }
.settings-arrow { width: 17px; height: 17px; margin-left: auto; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-link:hover strong, .settings-link:hover .settings-arrow { color: var(--blue); }
.security-facts { margin: 0 0 12px; }
.security-facts > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.security-facts > div:last-child { border-bottom: 0; }
.security-facts dt { color: var(--muted); }
.security-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.security-list { padding-left: 21px; color: #b8b9c0; font-size: 13px; line-height: 1.9; }
.legal-note { color: var(--muted) !important; font-size: 12px !important; }
.bordered-button { border: 1px solid #414249; }
.danger-card { border-color: #593238; }
.danger-button { padding: 9px 14px; border: 1px solid #8c414a; border-radius: 999px; background: #381c20; color: #ffb0b5; cursor: pointer; font-weight: 650; }
.danger-button:hover { background: #51262d; }
.verified-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 750; }
.account-badge { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; vertical-align: -3px; }
.account-badge svg { display: block; width: 12px; height: 12px; fill: currentColor; }
.verified-check { background: linear-gradient(145deg, #39b8ff, #1684d5); color: #fff; box-shadow: 0 0 0 1px #fff2, 0 1px 3px #1d9bf055; }
.page-error { min-height: 22px; color: #aeb0b7; font-size: 13px; }
.page-error.is-error { color: #ff979d; }
.review-queue { display: grid; gap: 12px; }
.review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.review-item strong { overflow-wrap: anywhere; }
.review-item p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0 0; }
.review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.review-actions button { font-size: 12px; padding: 7px 10px; }

.composer-publish-options { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 8px 0; }
.composer-publish-options .field { min-width: 130px; margin: 0; font-size: 11px; }
.composer-publish-options select, .composer-publish-options input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); }
.communities-panel, .explore-panel, .scheduled-panel, .community-heading { padding: 18px 21px; }
.community-create { display: grid; gap: 9px; margin: 16px 0 24px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); }
.community-create h2, .trends-panel h2, .mute-panel h2, .scheduled-panel h2 { margin: 0; font-size: 17px; }
.community-list { display: grid; }
.community-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
.community-title { padding: 0; border: 0; background: none; color: var(--text); text-align: left; font-weight: 700; cursor: pointer; }
.community-title:hover, .text-link:hover { color: var(--blue); }
.community-title small, .search-person small { color: var(--muted); font-weight: 400; }
.community-founder-badge { display: inline-flex; align-items: center; margin: 0 0 0 8px; padding: 2px 8px; border: 1px solid #635338; border-radius: 999px; background: #241e13; color: #e8c77e; font-size: 10px; font-weight: 750; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.community-founder-badge.founder-1 { border-color: #a7803c; background: #332516; color: #ffd788; }
.community-founder-badge.founder-2 { border-color: #69798f; background: #1b2530; color: #c6d5e9; }
.community-founder-badge.founder-3 { border-color: #84694a; background: #2a2118; color: #e9bb8a; }
.community-card p, .community-heading p { margin: 5px 0; color: #b5b5ae; }
.community-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.community-heading h2 { margin: 4px 0; }
.community-heading form { grid-column: 1 / -1; display: flex; align-items: end; gap: 9px; }
.community-heading form .field { flex: 1; margin: 0; }
.explore-panel > form, #collection-form, .message-start-form, .message-settings-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.explore-panel .field, #collection-form .field, .message-start-form .field, .message-settings-form .field { flex: 1 1 130px; margin: 0; }
.explore-panel input, .explore-panel select, #collection-form input, .message-start-form input, .message-settings-form select, #community-form input, #community-form textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); }
.trends-panel, .mute-panel, .search-results { padding: 15px 0; border-bottom: 1px solid var(--line); }
.trend-item { display: inline-grid; gap: 1px; margin: 10px 7px 0 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: transparent; text-align: left; cursor: pointer; }
.trend-item:hover { background: var(--panel-hover); }
.trend-item small { color: var(--muted); }
#mute-form { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: 12px 0; }
#mute-form .field { flex: 1 1 145px; margin: 0; }
.mute-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); }
.search-person, .scheduled-item, .request-item { padding: 13px 0; border-bottom: 1px solid var(--line); }
.search-person p, .scheduled-item p, .request-item p { margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.saved-toolbar { padding: 0 20px 12px; border-bottom: 1px solid var(--line); }
.collection-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 9px 0 2px; }
.collection-tabs button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); cursor: pointer; }
.collection-tabs button.selected { border-color: var(--blue); color: var(--text); }
.collection-tabs small { color: var(--muted); }
.bookmark-collection-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.bookmark-collection-label select { max-width: 150px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--text); }
.message-requests { margin: 12px 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); }
.request-item > div { display: flex; gap: 8px; }
.message-settings-form { padding-top: 0; }
.scheduled-item time { display: block; margin: 4px 0 9px; color: var(--muted); font-size: 12px; }
.featured-reel { padding: 16px 21px; border-bottom: 1px solid var(--line); }
.featured-reel video { display: block; width: min(100%, 360px); max-height: 430px; margin-top: 8px; background: #000; }
.featured-reel p { white-space: pre-wrap; }
.post-menu button[data-post-action="mute"] { color: #e8cb94; }
.post-meta .text-link { padding: 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.communities-panel, .explore-panel, .scheduled-panel, .community-heading { padding-inline: 16px; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 80px minmax(420px, 620px) minmax(245px, 300px); }
  .left-rail { align-items: center; padding-inline: 10px; }
  .left-rail > .brand { font-size: 0; letter-spacing: 0; }
  .left-rail > .brand::after { content: "b."; color: var(--blue); font-size: 28px; font-weight: 850; }
  .main-nav { width: 100%; align-items: center; }
  .nav-link { justify-content: center; width: 52px; height: 50px; padding: 0; }
  .nav-link > span:not(.nav-icon):not(.notification-count) { display: none; }
  .compose-button { width: 54px; height: 54px; justify-content: center; padding: 0; font-size: 0; }
  .compose-button .compose-icon { width: 24px; height: 24px; }
  .verification-rail-link { width: 54px; height: 54px; justify-content: center; margin-top: 12px; padding: 8px; }
  .verification-rail-link > span:nth-child(2), .verification-rail-arrow { display: none; }
  .rail-bottom { display: none; }
  .account-control { width: 100%; }
  .left-rail > .account-control .account-chip { justify-content: center; width: 54px; height: 54px; padding: 7px; }
  .left-rail > .account-control .account-label, .left-rail > .account-control .account-chevron { display: none; }
  .left-rail > .account-control .account-menu { left: 60px; right: auto; bottom: 0; }
}
@media (max-width: 800px) {
  .app-shell { width: 100vw; max-width: 100vw; grid-template-columns: minmax(0, 620px); overflow-x: clip; }
  .left-rail, .right-rail { display: none; }
  .feed-column { border-right: 0; min-height: 100vh; }
  .feed-header { padding-top: env(safe-area-inset-top); }
  .feed-header h1 { display: none; }
  .feed-refresh { top: 15px; right: 15px; }
  .mobile-brand { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 11px; }
  .mobile-brand .brand { font-size: 25px; }
  .mobile-account-control { position: fixed; z-index: 12; top: auto; right: 15px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
  .mobile-account-control { display: block; }
  .mobile-account-control .account-chip { width: auto; max-width: min(250px, calc(100vw - 30px)); margin: 0; padding: 6px 10px 6px 6px; border-color: var(--line); background: #141519; box-shadow: 0 8px 28px #0009; }
  .mobile-account-control .account-chip .avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .mobile-account-control .account-label { max-width: 145px; }
  .mobile-account-control .account-menu { top: auto; right: 0; bottom: calc(100% + 8px); }
  .mobile-main-nav { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .mobile-main-nav .nav-link { position: relative; flex: 1; width: auto; min-width: 0; height: 46px; }
  .mobile-main-nav .notification-count { position: absolute; top: 2px; left: calc(50% + 7px); display: inline-grid; min-width: 16px; height: 16px; padding: 0 3px; font-size: 9px; }
  .mobile-main-nav .notification-count[hidden] { display: none !important; }
  .feed-column { padding-bottom: 78px; }
  .composer { padding-inline: 16px; }
  .post { padding-inline: 16px; }
}
@media (max-width: 520px) {
  .review-item { grid-template-columns: 1fr; }
  .review-actions { justify-content: flex-start; }
  .security-facts > div { flex-direction: column; gap: 2px; }
  .security-facts dd { text-align: left; }
  .profile-cover { height: 120px; }
  .profile-card-body { padding: 0 16px 20px; }
  .profile-topline { align-items: flex-end; gap: 8px; margin-top: -36px; }
  .profile-avatar { width: 78px; height: 78px; flex-basis: 78px; font-size: 25px; }
  .profile-actions { gap: 5px; }
  .profile-actions .primary-button, .profile-actions .quiet-button { min-height: 34px; padding: 7px 10px; font-size: 11px; }
  .profile-identity h2 { font-size: 21px; }
  .profile-stats { gap: 6px; }
  .profile-stats span { padding: 9px; }
}
@media (max-width: 440px) {
  .composer { gap: 10px; }
  .avatar { flex-basis: 38px; width: 38px; height: 38px; }
  .composer textarea { font-size: 16px; }
  .composer-note { max-width: 140px; line-height: 1.35; }
  .composer-tools { align-items: flex-end; }
  .composer-note { max-width: 155px; }
  .post { gap: 10px; }
  .post-meta { padding-right: 22px; }
  .post-handle { font-size: 12px; }
}

:root {
  --bg: #10110f;
  --panel: #171815;
  --panel-hover: #1d1e1a;
  --line: #2b2d28;
  --muted: #96978f;
  --text: #e9e8e0;
  --blue: #9bb6d8;
  --orange: #c7a477;
  --radius: 8px;
}

body { font-family: "Segoe UI", Arial, sans-serif; }
.app-shell { grid-template-columns: 224px minmax(420px, 650px) minmax(250px, 300px); }
.left-rail { border-color: #282a25; }
.brand { letter-spacing: -2px; }
.main-nav { gap: 3px; margin-top: 39px; }
.nav-link { gap: 13px; padding: 10px 11px; border-radius: 6px; font-size: 15px; }
.nav-link.active { background: #1a1b17; box-shadow: inset 2px 0 var(--blue); }
.nav-icon { stroke: #898b84; }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon { stroke: var(--blue); }
.compose-button, .primary-button { border-radius: 6px; background: #c9d3df; color: #16191c; font-weight: 650; }
.compose-button { padding: 12px 14px; }
.compose-button:hover, .primary-button:hover { background: #d8e0e9; }
.feed-header { background: var(--bg); backdrop-filter: none; }
.feed-header h1 { font-size: 18px; font-weight: 650; }
.feed-tab { padding: 10px; }
.feed-tab.selected::after { height: 2px; border-radius: 0; background: var(--blue); }
.composer { padding-top: 18px; padding-bottom: 15px; }
.avatar-you { color: #d5d7d4; background: #404640; }
.composer textarea { font-size: 17px; }
.composer-note { font-size: 11px; }
.side-card { padding: 17px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.welcome-card { padding: 25px 4px 22px; border-top: 0; }
.eyebrow { color: #c7a477; font-size: 10px; letter-spacing: 1.1px; }
.welcome-card h2 { margin: 11px 0 9px; font-size: 27px; line-height: 1.17; letter-spacing: -0.9px; font-weight: 620; }
.welcome-card p, .side-card > p { color: #a9aaa2; font-size: 13px; line-height: 1.65; }
.wide { margin-top: 10px; }
.quiet-button { border-radius: 6px; }
.search-box { border-radius: 6px; background: #151613; }
.post { padding-top: 16px; padding-bottom: 14px; }
.post-name { font-weight: 650; }
.post-body { font-size: 15px; line-height: 1.55; }
.post-action { border-radius: 5px; }
.empty-state { max-width: 480px; margin: 25px auto; padding: 28px 24px; border-top: 1px solid var(--line); text-align: left; }
.empty-state strong { margin: 8px 0 3px; font-size: 18px; font-weight: 620; }
.empty-state > span:not(.empty-label) { font-size: 13px; line-height: 1.6; }
.empty-mark { display: none; }
.empty-label { display: block; color: var(--muted); font-size: 10px; letter-spacing: 1.1px; }
.site-footer { padding-inline: 4px; }
.page-links { gap: 6px; }
.page-links a { border-radius: 5px; }
.account-card { box-shadow: none; }
.compose-extras { display: flex; align-items: center; gap: 8px; margin: 4px 0 11px; }
.attachment-button { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--blue); cursor: pointer; font-size: 12px; }
.attachment-button:hover { background: #9bb6d811; }
.attachment-button:disabled { opacity: .45; cursor: not-allowed; }
.image-attachment { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: start; gap: 12px; margin: 8px 0 13px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.image-attachment[hidden], .poll-builder[hidden] { display: none; }
.image-attachment > img { display: block; width: 100%; max-height: 160px; border-radius: 4px; object-fit: cover; }
.image-fields { min-width: 0; }
.image-fields .field { margin: 0; }
.remove-attachment { padding: 5px 7px; font-size: 11px; }
.poll-builder { margin: 8px 0 13px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; }
.poll-builder-heading, .poll-builder-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.poll-builder-heading { margin-bottom: 8px; font-size: 13px; }
.poll-option-inputs { display: grid; gap: 7px; }
.poll-input-row { display: flex; align-items: center; gap: 8px; }
.poll-input-row > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 11px; }
.poll-input-row input, .poll-duration select { min-width: 0; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }
.poll-input-row input { flex: 1; }
.remove-poll-option { width: 26px; height: 26px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; }
.poll-builder-footer { margin-top: 9px; }
.poll-duration { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.poll-duration select { min-height: 30px; }
.post-image-link { display: block; width: fit-content; max-width: min(100%, 500px); margin: 8px 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.post-image { display: block; max-width: 100%; max-height: 560px; object-fit: contain; }
.outgoing-link { color: var(--blue); text-decoration: underline; text-decoration-color: #9bb6d866; text-underline-offset: 2px; overflow-wrap: anywhere; }
.post-poll { display: grid; gap: 8px; max-width: 460px; margin: 12px 0 14px; }
.poll-options { display: grid; gap: 7px; }
.poll-option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; width: 100%; padding: 9px 11px; overflow: hidden; border: 1px solid #3a3e43; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: 13px; }
.poll-option:not(:disabled):hover { border-color: var(--blue); background: #9bb6d80b; }
.poll-option:disabled { cursor: default; }
.poll-option-selected { border-color: var(--blue); }
.poll-percentage { color: var(--muted); font-size: 11px; }
.poll-progress { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; border-radius: 99px; appearance: none; background: #30332e; }
.poll-progress::-webkit-progress-bar { border-radius: 99px; background: #30332e; }
.poll-progress::-webkit-progress-value { border-radius: 99px; background: var(--blue); }
.poll-progress::-moz-progress-bar { border-radius: 99px; background: var(--blue); }
.poll-summary { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--muted); font-size: 11px; }

@media (min-width: 801px) and (max-width: 1050px) {
  .app-shell { grid-template-columns: 80px minmax(420px, 650px) minmax(235px, 280px); }
}

@media (max-width: 800px) {
  .app-shell { grid-template-columns: minmax(0, 620px); }
  .feed-header { background: rgb(16 17 15 / 96%); }
  .mobile-main-nav { border-bottom-color: var(--line); }
  .mobile-main-nav .nav-link { border-radius: 0; }
  .mobile-main-nav .nav-link.active { background: transparent; box-shadow: inset 0 -2px var(--blue); }
  .welcome-card { padding: 18px 4px; }
  .empty-state { margin: 12px 16px; padding-inline: 2px; }
  .image-attachment { grid-template-columns: minmax(0, 1fr); }
  .image-attachment > img { max-width: 220px; }
}

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

:root {
  --bg: #0d0f0e;
  --panel: #151815;
  --panel-hover: #1c201c;
  --line: #2a302b;
  --muted: #9a9f98;
  --text: #f2f0e8;
  --blue: #a8c6e5;
  --orange: #ddb17c;
  --radius: 12px;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(ellipse at 50% -22rem, #34473a45, transparent 48rem),
    radial-gradient(ellipse at 100% 20%, #25374a26, transparent 35rem),
    var(--bg);
}
.app-shell { width: min(1340px, 100%); grid-template-columns: 230px minmax(420px, 680px) minmax(250px, 310px); }
.left-rail { border-color: #ffffff12; }
.brand { text-shadow: 0 4px 24px #0008; }
.main-nav { gap: 5px; margin-top: 42px; }
.nav-link { min-height: 46px; border-radius: 9px; transition: background .18s, color .18s, transform .18s; }
.nav-link:hover { transform: translateX(2px); }
.nav-link.active { background: linear-gradient(90deg, #a8c6e51b, #a8c6e506); box-shadow: inset 2px 0 var(--blue); }
.compose-button, .primary-button { border-radius: 9px; box-shadow: 0 4px 14px #0002; transition: background .18s, transform .18s, box-shadow .18s; }
.compose-button { min-height: 46px; }
.compose-button:hover, .primary-button:hover { box-shadow: 0 7px 20px #0004; transform: translateY(-1px); }
.compose-icon { stroke: #414d5c; }
.verification-rail-link { border-radius: 10px; }
.feed-column { border-color: #ffffff12; background: #0d0f0e70; }
.feed-header { background: #0d0f0ee8; border-color: #ffffff12; backdrop-filter: blur(16px); }
.feed-header h1 { padding-top: 20px; padding-bottom: 15px; font-size: 19px; font-weight: 720; letter-spacing: -.5px; }
.feed-refresh { top: 13px; }
.feed-tab { padding-block: 13px; transition: background .18s, color .18s; }
.feed-tab.selected::after { width: 36px; left: calc(50% - 18px); height: 3px; border-radius: 99px; }
.composer { gap: 14px; padding: 22px 23px 18px; background: linear-gradient(135deg, #a8c6e506, transparent 75%); }
.avatar { box-shadow: inset 0 0 0 1px #ffffff1a; }
.avatar-you { background: linear-gradient(145deg, #d8ba90, #8e9b8b); }
.composer textarea { min-height: 70px; font-size: 17px; }
.composer textarea::placeholder { color: #888f87; }
.composer-publish-options { margin-top: 11px; }
.composer-publish-options select, .composer-publish-options input { min-height: 34px; border-radius: 8px; }
.attachment-button { min-height: 34px; padding-inline: 11px; border-radius: 7px; transition: background .18s, border-color .18s; }
.attachment-button:hover { border-color: #a8c6e55c; }
.post { padding-top: 20px; padding-bottom: 17px; border-color: #ffffff10; }
.post:hover { background: #ffffff06; }
.post-focused { border-left-color: var(--orange); background: #ddb17c0b; }
.post-name { font-weight: 700; }
.post-body { line-height: 1.7; }
.post-action { min-width: 42px; min-height: 34px; justify-content: center; border-radius: 8px; transition: background .16s, color .16s; }
.post-image-link { border-radius: 11px; }
.post-menu { border-color: #ffffff1c; border-radius: 11px; background: #191d19; }
.post-menu button { border-radius: 7px; }
.empty-state { max-width: none; margin: 18px; padding: 32px 24px; border: 1px solid #ffffff12; border-radius: 12px; background: linear-gradient(135deg, #a8c6e509, #ffffff02 65%); }
.empty-state strong { font-size: 19px; }
.right-rail { padding: 22px 18px 34px; }
.search-box { height: 45px; border-color: #ffffff16; border-radius: 10px; background: #151815d9; transition: border-color .18s, box-shadow .18s; }
.search-box:focus-within { border-color: #a8c6e580; box-shadow: 0 0 0 3px #a8c6e512; }
.side-card { margin-top: 17px; padding: 18px; border: 1px solid #ffffff12; border-radius: 11px; background: linear-gradient(145deg, #171b17, #111411); }
.welcome-card { padding: 20px; border-color: #a8c6e51c; background: radial-gradient(ellipse at 95% 0%, #a8c6e510, transparent 65%), linear-gradient(145deg, #171b17, #111411); }
.welcome-card h2 { font-size: 25px; }
.side-card .text-link { padding-top: 10px; border-top: 1px solid #ffffff10; }
.site-footer { gap: 9px 11px; padding: 17px 3px; }
.account-chip { border-radius: 10px; }
.account-chip:hover, .account-chip[aria-expanded="true"] { border-color: #ffffff19; }
.account-menu { border-color: #ffffff1c; border-radius: 12px; background: #171b17; }
.account-menu button, .account-menu a { border-radius: 8px; }
.quiet-button, .bordered-button { border-radius: 8px; transition: background .16s, border-color .16s, color .16s; }
.bordered-button { border-color: #ffffff24; }
.bordered-button:hover { border-color: #a8c6e56b; }
.field input, .field textarea, .field select { border-color: #ffffff1c; border-radius: 9px; background: #111411; transition: border-color .16s, box-shadow .16s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #a8c6e580; box-shadow: 0 0 0 3px #a8c6e510; }
.modal { border-color: #ffffff20; border-radius: 17px; background: #141814; }
.modal h2 { letter-spacing: -.7px; }
.account-page { padding-top: 45px; }
.legal-shell h1 { letter-spacing: -1.7px; }
.legal-shell h2 { padding-top: 5px; letter-spacing: -.2px; }
.page-links { margin: 25px 0 39px; }
.page-links a { border-radius: 8px; background: #ffffff04; transition: background .16s, border-color .16s, color .16s; }
.page-links a:hover { background: #a8c6e50b; border-color: #a8c6e56b; }
.account-card { border-color: #ffffff16; border-radius: 11px; background: linear-gradient(145deg, #171b17, #111411); }
.settings-link { transition: background .16s; }
.settings-link:hover { background: #ffffff04; }
.settings-icon { border-color: #a8c6e528; border-radius: 10px; background: #a8c6e509; }
.danger-card { border-color: #754149; background: linear-gradient(145deg, #251719, #151314); }
.toast { border-color: #ffffff24; border-radius: 10px; background: #1a201b; box-shadow: 0 10px 35px #0008; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 80px minmax(420px, 680px) minmax(245px, 300px); }
}
@media (max-width: 800px) {
  body { background: radial-gradient(ellipse at 50% -18rem, #34473a3d, transparent 36rem), var(--bg); }
  .feed-column { background: transparent; }
  .feed-header { background: #0d0f0ef2; }
  .mobile-brand { padding: 15px 18px 12px; }
  .mobile-main-nav { padding-inline: 5px; }
  .mobile-main-nav .nav-link { height: 49px; }
  .mobile-main-nav .nav-link.active { box-shadow: inset 0 -2px var(--blue); }
  .composer { padding-top: 19px; }
  .right-rail { display: none; }
  .mobile-account-control .account-chip { border-color: #ffffff1a; border-radius: 12px; background: #171b17ed; }
}
@media (max-width: 520px) {
  .composer { padding-inline: 15px; }
  .post { padding-inline: 15px; }
  .empty-state { margin: 14px; padding: 26px 19px; }
  .legal-shell { width: min(760px, calc(100% - 30px)); padding-top: 25px; }
  .account-card { padding: 18px; }
  .page-links { margin-bottom: 30px; }
}

.app-shell { width: min(1380px, 100%); grid-template-columns: 232px minmax(420px, 690px) minmax(250px, 320px); }
.left-rail { padding: 34px 21px 24px 17px; }
.main-nav { margin-top: 48px; gap: 7px; }
.nav-link { min-height: 48px; font-size: 15px; }
.compose-button { min-height: 49px; }
.feed-column { min-height: 100vh; }
.feed-header { border-bottom-color: #ffffff12; }
.feed-header h1 { padding-top: 21px; padding-bottom: 16px; font-size: 20px; }
.composer { margin: 18px; padding: 20px; border: 1px solid #ffffff15; border-bottom-color: #ffffff15; border-radius: 14px; background: linear-gradient(145deg, #1a201b, #121612 72%); box-shadow: 0 16px 36px #0002; }
.composer textarea { min-height: 74px; font-size: 18px; }
.composer-tools { border-top-color: #ffffff13; }
.timeline { padding: 0 18px 28px; }
.post { padding: 20px 18px 16px; border: 1px solid #ffffff12; border-radius: 12px; margin-bottom: 10px; background: #141814cf; }
.post:hover { border-color: #ffffff20; background: #171c17; }
.post-menu-wrap { top: 15px; right: 14px; }
.empty-feed-state {
  position: relative;
  display: grid;
  grid-template-columns: minmax(185px, .8fr) minmax(0, 1.2fr);
  align-items: stretch;
  min-height: 390px;
  margin: 2px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ffffff17;
  border-radius: 16px;
  background: #141914;
  box-shadow: 0 24px 60px #0003;
  text-align: left;
}
.empty-copy { align-self: center; padding: 40px 35px 45px; }
.empty-copy .empty-label { margin-bottom: 14px; color: var(--orange); font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
.empty-copy h2 { max-width: 360px; margin: 0; color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 4vw, 43px); font-weight: 500; letter-spacing: -1.5px; line-height: 1.05; }
.empty-copy p { max-width: 370px; margin: 14px 0 22px; color: #b7beb5; font-size: 13px; line-height: 1.8; }
.empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.empty-actions button { min-height: 39px; padding: 9px 13px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.empty-primary { display: inline-flex; align-items: center; gap: 12px; border: 1px solid #e4d1b466; background: #d9c39f; color: #20231e; cursor: pointer; transition: transform .18s, background .18s; }
.empty-primary:hover { transform: translateY(-2px); background: #ead7b3; }
.empty-secondary { border: 1px solid #ffffff24; background: #ffffff06; color: #e4e8e0; cursor: pointer; transition: background .18s, border-color .18s; }
.empty-secondary:hover { border-color: #ffffff45; background: #ffffff0c; }
.right-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 18px 34px; scrollbar-width: none; }
.right-rail::-webkit-scrollbar { display: none; }
.welcome-card { position: relative; padding: 20px; overflow: hidden; border-color: #ffffff19; background: linear-gradient(150deg, #1b211c, #131713 72%); }
.welcome-card .eyebrow { display: block; margin-bottom: 9px; }
.welcome-card h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 35px; font-weight: 500; letter-spacing: -1.2px; line-height: .99; }
.welcome-card h2 em { color: #d6bc96; font-weight: 400; }
.welcome-card p { margin: 13px 0 18px; color: #b3bbb2; font-size: 12px; line-height: 1.75; }
.welcome-card .primary-button { display: flex; align-items: center; justify-content: space-between; min-height: 42px; background: #d9c39f; color: #20231e; }
.welcome-card .primary-button:hover { background: #ead7b3; }
.welcome-card .quiet-button { min-height: 37px; margin-top: 3px; color: #c8cdc6; }
.welcome-card .quiet-button:hover { background: #ffffff08; }
.side-card:not(.welcome-card) { padding: 17px 18px; }
.side-card .card-heading h2 { font-size: 14px; letter-spacing: -.2px; }
.community-spark { color: var(--orange); font-size: 18px; }
.side-card > p { margin: 9px 0 14px; }
.side-card .text-link { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; color: #d6c19e; font-size: 11px; }
.site-footer { color: #818981; }
.site-footer a { color: #aeb4ac; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 80px minmax(420px, 690px) minmax(245px, 300px); }
  .empty-copy { padding-inline: 27px; }
}
@media (max-width: 800px) {
  .app-shell { display: block; width: 100%; max-width: 690px; margin-inline: auto; }
  .feed-column { width: 100%; border: 0; }
  .feed-header { position: sticky; }
  .composer { margin: 14px; padding: 17px; }
  .timeline { padding: 0 14px 25px; }
  .empty-feed-state { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); min-height: 340px; }
  .empty-copy { padding: 30px 24px 40px; }
  .empty-copy h2 { font-size: clamp(29px, 5vw, 39px); }
}
@media (max-width: 520px) {
  .feed-header h1 { padding-top: 16px; }
  .composer { margin: 11px; padding: 15px; border-radius: 12px; }
  .timeline { padding-inline: 11px; }
  .empty-feed-state { display: flex; flex-direction: column; min-height: 0; border-radius: 13px; }
  .empty-copy { padding: 24px 21px 36px; }
  .empty-copy .empty-label { margin-bottom: 10px; }
  .empty-copy h2 { max-width: 340px; font-size: 35px; }
  .empty-copy p { margin: 11px 0 17px; }
  .empty-actions { gap: 7px; }
  .welcome-card { padding: 18px; }
}

:root {
  --bg: #11130f;
  --panel: #191b17;
  --panel-hover: #22251f;
  --line: #34382f;
  --muted: #a4a79b;
  --text: #f0eee4;
  --blue: #c4cf8a;
  --orange: #d9a375;
  --radius: 10px;
}

body { background: var(--bg); }
.app-shell { width: min(1360px, 100%); grid-template-columns: 230px minmax(420px, 680px) minmax(250px, 310px); }
.left-rail { border-right-color: var(--line); }
.brand { text-shadow: none; }
.brand-bye { color: var(--text); }
.brand-dot { color: var(--orange); }
.brand-kim { color: var(--blue); }
.main-nav { margin-top: 43px; }
.nav-link { color: #c4c5b9; }
.nav-link:hover { transform: none; background: #ffffff08; }
.nav-link.active { background: #c4cf8a12; box-shadow: inset 2px 0 var(--blue); }
.nav-icon, .ui-icon { stroke: var(--blue); }
.compose-button, .primary-button { background: var(--blue); color: #171912; box-shadow: none; }
.compose-button:hover, .primary-button:hover { background: #d4dda0; box-shadow: none; transform: none; }
.compose-icon { stroke: #353b29; }
.verification-rail-link { border-color: #c4cf8a38; background: #c4cf8a0a; }
.verification-rail-link:hover { border-color: #c4cf8a75; background: #c4cf8a13; }
.verification-rail-icon { background: #c4cf8a14; }
.verification-rail-icon svg { stroke: var(--blue); }
.feed-column { background: transparent; border-color: var(--line); }
.feed-header { background: #11130ff2; border-color: var(--line); backdrop-filter: blur(12px); }
.feed-header h1 { padding-top: 20px; padding-bottom: 14px; }
.feed-tab.selected::after { background: var(--blue); }
.composer { background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.composer textarea { font-size: 17px; }
.avatar-you { color: #26251f; background: #d9a375; }
.composer-tools { border-color: var(--line); }
.attachment-button { border-color: var(--line); color: var(--blue); }
.attachment-button:hover { border-color: #c4cf8a75; background: #c4cf8a0c; }
.post { background: var(--panel); border-color: var(--line); box-shadow: none; }
.post:hover { background: var(--panel-hover); border-color: #474b40; }
.post-focused { border-left-color: var(--orange); background: #d9a3750c; }
.post-name:hover, .post-meta a:hover { color: var(--blue); }
.post-handle, .post-time, .post-separator { color: var(--muted); }
.post-body { color: #e6e4da; }
.post-action:hover { color: var(--blue); background: #c4cf8a12; }
.post-menu { background: var(--panel); border-color: var(--line); }
.right-rail { padding-top: 22px; }
.search-box { background: var(--panel); border-color: var(--line); }
.search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #c4cf8a12; }
.side-card, .welcome-card { background: var(--panel); border-color: var(--line); box-shadow: none; }
.welcome-card { padding: 19px; }
.welcome-brand-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 65px;
  margin: -1px 0 17px;
  padding: 15px 13px 12px;
  border: 1px solid #c4cf8a38;
  border-radius: 7px;
  background: #c4cf8a0b;
}
.welcome-brand-card > span { color: var(--text); font-size: 24px; font-weight: 850; letter-spacing: -1.9px; line-height: 1; }
.welcome-brand-card > span > span { color: var(--orange); }
.welcome-brand-card small { color: var(--blue); font-size: 10px; font-weight: 650; }
.welcome-card .eyebrow { color: var(--orange); }
.welcome-card h2 { font-size: 24px; font-weight: 650; letter-spacing: -.7px; line-height: 1.1; }
.welcome-card h2 em { color: var(--blue); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.welcome-card p { color: #c0c1b7; }
.welcome-card .primary-button { background: var(--blue); }
.welcome-card .primary-button:hover { background: #d4dda0; }
.welcome-card .quiet-button { color: var(--muted); }
.community-spark { color: var(--orange); font-size: 11px; letter-spacing: 1px; }
.side-card .text-link { border-color: var(--line); color: var(--blue); }
.site-footer { color: var(--muted); }
.site-footer a { color: #d0d0c4; }
.account-chip:hover, .account-chip[aria-expanded="true"] { border-color: var(--line); background: var(--panel-hover); }
.account-menu { background: var(--panel); border-color: var(--line); }
.account-menu button, .account-menu a { color: var(--text); }
.quiet-button { color: #c7c8bd; }
.bordered-button { border-color: #53574b; }
.bordered-button:hover { border-color: var(--blue); }
.field input, .field textarea, .field select { background: #141612; border-color: #3b3f35; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #c4cf8a12; }
.modal { background: #191b17; border-color: #44483d; }
.account-page { padding-top: 42px; }
.legal-shell h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -1.5px; }
.legal-shell h2 { font-weight: 650; }
.page-links a { border-color: var(--line); background: #ffffff04; }
.page-links a:hover { border-color: #c4cf8a72; background: #c4cf8a0c; color: var(--blue); }
.account-card { background: var(--panel); border-color: var(--line); }
.settings-link:hover { background: #ffffff05; }
.settings-icon { border-color: #c4cf8a40; background: #c4cf8a0c; }
.settings-icon svg, .settings-arrow { stroke: var(--blue); }
.danger-card { background: #211918; border-color: #68413a; }
.toast { background: #20231d; border-color: #4a4e42; }

.empty-feed-state {
  grid-template-columns: minmax(205px, .76fr) minmax(0, 1.24fr);
  min-height: 350px;
  border-color: var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: none;
}
.empty-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 30px;
  overflow: hidden;
  border-right: 1px solid #c4cf8a26;
  background: #24291f;
}
.empty-brand-panel::after {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 30px;
  height: 1px;
  background: #c4cf8a40;
  content: "";
}
.empty-brand-wordmark { color: var(--text); font-size: clamp(31px, 4vw, 43px); font-weight: 850; letter-spacing: -3px; line-height: 1; }
.empty-brand-wordmark span { color: var(--orange); }
.empty-brand-caption { margin-top: 8px; color: #c0c5a9; font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
.empty-brand-divider { width: 36px; height: 2px; margin: 28px 0 17px; background: var(--orange); }
.empty-brand-mantra { color: var(--text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 3.5vw, 36px); line-height: 1.05; }
.empty-brand-mantra span { color: var(--orange); }
.empty-brand-foot { position: absolute; bottom: 28px; left: 30px; color: #aeb29f; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; }
.empty-copy { padding: 37px 36px 43px; }
.empty-copy .empty-label { margin-bottom: 12px; color: var(--orange); font-size: 9px; letter-spacing: 1.35px; }
.empty-copy h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 3.6vw, 42px); font-weight: 500; letter-spacing: -1.3px; line-height: 1.04; }
.empty-copy p { color: #c1c2b8; font-size: 13px; line-height: 1.75; }
.empty-actions button { min-height: 39px; border-radius: 7px; }
.empty-primary { border-color: var(--blue); background: var(--blue); color: #171912; }
.empty-primary:hover { background: #d4dda0; }
.empty-secondary { border-color: #4b5045; background: transparent; color: var(--text); }
.empty-secondary:hover { border-color: var(--blue); background: #c4cf8a0c; }

.profile-cover {
  height: 145px;
  justify-content: flex-start;
  background: #24291f;
}
.profile-cover::before, .profile-cover::after, .profile-cover-orbit { display: none; }
.profile-cover-mark { display: grid; gap: 4px; color: var(--text); }
.profile-cover-mark strong { font-size: 26px; font-weight: 850; letter-spacing: -1.7px; }
.profile-cover-mark strong span { color: var(--orange); }
.profile-cover-mark small { color: #c0c5a9; font-size: 9px; font-weight: 650; letter-spacing: 1px; }
.profile-avatar { background: var(--blue); color: #202319; box-shadow: none; }
.profile-stats span { border-color: var(--line); border-radius: 7px; background: #ffffff03; }
.profile-identity h2 { font-family: "Segoe UI", Arial, sans-serif; }
.featured-reel { border-color: var(--line); }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 80px minmax(420px, 680px) minmax(245px, 300px); }
}
@media (max-width: 800px) {
  body { background: var(--bg); }
  .app-shell { display: block; width: 100%; max-width: 680px; margin-inline: auto; }
  .feed-column { width: 100%; border: 0; }
  .feed-header { background: #11130ff2; }
  .mobile-main-nav .nav-link.active { background: transparent; box-shadow: inset 0 -2px var(--blue); }
  .composer { margin: 12px; padding: 16px; border-radius: 10px; }
  .timeline { padding: 0 12px 25px; }
  .post { margin-bottom: 8px; padding: 17px 15px 13px; border-radius: 9px; }
  .empty-feed-state { min-height: 330px; }
  .empty-brand-panel { padding: 23px; }
  .empty-brand-foot { left: 23px; }
  .empty-brand-panel::after { left: 23px; }
  .empty-copy { padding: 30px 25px 40px; }
}
@media (max-width: 520px) {
  .feed-header h1 { padding-top: 15px; }
  .composer { margin: 10px; padding: 14px; }
  .timeline { padding-inline: 10px; }
  .empty-feed-state { grid-template-columns: 1fr; min-height: 0; }
  .empty-brand-panel { min-height: 175px; padding: 22px; border-right: 0; border-bottom: 1px solid #c4cf8a26; }
  .empty-brand-divider { margin: 16px 0 10px; }
  .empty-brand-mantra { font-size: 27px; }
  .empty-brand-foot { right: 18px; bottom: 21px; left: auto; }
  .empty-brand-panel::after { right: 22px; bottom: 18px; left: 22px; }
  .empty-copy { padding: 22px 20px 27px; }
  .empty-copy h2 { font-size: 34px; }
  .empty-actions { align-items: stretch; }
  .empty-actions button { min-height: 40px; }
  .profile-cover { height: 120px; }
  .account-page { padding-top: 26px; }
  .account-card { padding: 17px; }
}

/* X-inspired layout, with bye.kim's own identity and features. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-hover: #f7f9f9;
  --line: #eff3f4;
  --muted: #536471;
  --text: #0f1419;
  --blue: #1d9bf0;
  --orange: #1d9bf0;
  --radius: 16px;
}

html, body { background: #fff; color: var(--text); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell {
  width: min(1280px, 100%);
  grid-template-columns: 250px minmax(0, 600px) 350px;
  justify-content: center;
}
.left-rail {
  padding: 12px 16px 14px 10px;
  border-color: var(--line);
}
.brand { padding: 10px; font-size: 28px; letter-spacing: -2px; }
.brand-bye, .brand-kim { color: var(--text); }
.brand-dot { color: var(--blue); }
.main-nav { gap: 4px; margin: 12px 0 14px; }
.nav-link {
  min-height: 52px;
  gap: 17px;
  padding: 11px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 19px;
  font-weight: 400;
}
.nav-link:hover, .nav-link.active { background: #e7e7e8; color: var(--text); }
.nav-link.active { font-weight: 750; box-shadow: none; }
.nav-icon, .ui-icon { color: var(--text); stroke: currentColor; }
.nav-link.active .nav-icon { stroke-width: 2.3; }
.notification-count { background: var(--blue); color: #fff; }
.compose-button, .primary-button {
  min-height: 46px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
.compose-button { justify-content: center; margin: 8px 0 0; padding: 12px 20px; }
.compose-icon { display: none; }
.compose-button:hover, .primary-button:hover, .welcome-card .primary-button:hover { background: #1a8cd8; }
.verification-rail-link {
  gap: 10px;
  margin-top: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f9f9;
}
.verification-rail-link:hover { border-color: #cfd9de; background: #eff3f4; }
.verification-rail-icon { background: #e8f5fd; }
.verification-rail-icon svg { stroke: var(--blue); }
.verification-rail-link strong { font-size: 13px; }
.verification-rail-link small { color: var(--muted); }
.verification-rail-arrow { color: var(--blue); }
.rail-bottom { padding: 10px; color: var(--muted); font-size: 12px; }
.rail-bottom a, .text-link, .site-footer a { color: var(--muted); }
.account-chip { border-radius: 999px; }
.account-chip:hover, .account-chip[aria-expanded="true"] { border-color: transparent; background: #eff3f4; }
.account-label small { color: var(--muted); }
.account-chevron { stroke: var(--muted); }
.account-menu {
  border-color: #d8e0e4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px #0002;
}
.account-menu button, .account-menu a { color: var(--text); }
.account-menu button:hover, .account-menu a:hover { background: #f7f9f9; color: var(--text); }
.feed-column { border-color: var(--line); background: #fff; }
.feed-header {
  background: rgb(255 255 255 / 85%);
  border-color: var(--line);
  backdrop-filter: blur(12px);
}
.feed-header h1 { padding: 15px 16px 12px; font-size: 20px; font-weight: 750; letter-spacing: 0; }
.feed-refresh { top: 9px; right: 10px; color: var(--text); }
.feed-refresh:hover { border-color: transparent; background: #e7e7e8; color: var(--text); }
.feed-tab { min-height: 53px; color: var(--muted); font-weight: 600; }
.feed-tab:hover { background: #f7f9f9; color: var(--text); }
.feed-tab.selected { color: var(--text); font-weight: 750; }
.feed-tab.selected::after { left: calc(50% - 28px); width: 56px; height: 4px; border-radius: 999px; background: var(--blue); }
.composer { gap: 12px; padding: 14px 16px 12px; border-color: var(--line); background: #fff; }
.avatar { color: #fff; background: var(--blue); }
.avatar-you { color: #fff; background: #6b7c93; }
.composer textarea { min-height: 56px; color: var(--text); font-size: 20px; }
.composer textarea::placeholder, .field input::placeholder, .field textarea::placeholder { color: #536471; opacity: 1; }
.composer-note, .composer-count { color: var(--muted); }
.compose-extras { gap: 5px; }
.attachment-button {
  min-height: 32px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  color: var(--blue);
  font-size: 13px;
}
.attachment-button:hover { background: #e8f5fd; }
.composer-publish-options .field { color: var(--muted); }
.composer-publish-options select, .composer-publish-options input {
  border-color: #cfd9de;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
.composer-tools { border-color: var(--line); }
.image-attachment, .poll-builder { border-color: #cfd9de; border-radius: 14px; background: #fff; }
.post { gap: 11px; padding: 14px 16px 12px; border-color: var(--line); background: #fff; }
.post:hover { background: #f7f9f9; }
.post-focused { border-left-color: var(--blue); background: #e8f5fd; }
.post-name { color: var(--text); font-weight: 750; }
.post-name:hover, .post-meta a:hover { color: var(--blue); }
.post-handle, .post-time, .post-separator, .repost-note, .reply-context { color: var(--muted); }
.post-body { color: var(--text); font-size: 15px; line-height: 1.5; }
.mention, .repost-note a, .outgoing-link { color: var(--blue); }
.post-actions { max-width: 460px; margin-top: 7px; }
.post-action { color: var(--muted); }
.post-action:hover { color: var(--blue); background: #e8f5fd; }
.post-action.repost:hover, .post-action.reposted { color: #00a36c; }
.post-action.bookmarked { color: #e0245e; }
.post-menu { border-color: #d8e0e4; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px #0002; }
.post-menu button { color: var(--text); }
.post-menu button:hover { background: #f7f9f9; }
.thread-panel { border-color: var(--line); }
.thread-replies > .post { border-color: var(--line); }
.reply-form textarea, .message-compose textarea { border-color: #cfd9de; border-radius: 16px; background: #fff; color: var(--text); }
.reply-form textarea:focus, .message-compose textarea:focus { border-color: var(--blue); }
.empty-state {
  max-width: none;
  margin: 0;
  padding: 32px 24px;
  border-color: var(--line);
  color: var(--muted);
  text-align: left;
}
.empty-state strong, .empty-feed-state h2 { color: var(--text); }
.empty-feed-state {
  display: block;
  min-height: 0;
  padding: 44px 24px 50px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.empty-feed-state .empty-label { margin-bottom: 10px; color: var(--blue); font-weight: 750; }
.empty-feed-state h2 { margin: 0 0 8px; font-size: 23px; font-weight: 800; letter-spacing: -.5px; }
.empty-feed-state p { max-width: 380px; margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.empty-actions button { min-height: 38px; padding: 8px 17px; border-radius: 999px; }
.empty-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.empty-primary:hover { background: #1a8cd8; }
.empty-secondary { border-color: #cfd9de; background: #fff; color: var(--text); }
.empty-secondary:hover { border-color: #aab8c2; background: #f7f9f9; }
.profile-card { border-color: var(--line); }
.profile-cover { height: 150px; background: #cfd9de; }
.profile-cover::before, .profile-cover::after { display: none; }
.profile-card-body { padding: 0 16px 18px; }
.profile-topline { margin-top: -34px; }
.profile-avatar { border-color: #fff; background: #6b7c93; color: #fff; box-shadow: none; }
.profile-eyebrow { color: var(--muted); }
.profile-identity h2 { color: var(--text); font-size: 20px; }
.profile-bio { color: var(--text); }
.profile-stats span { border-color: var(--line); border-radius: 0; background: transparent; }
.profile-stats small { color: var(--muted); }
.featured-reel { border-color: var(--line); }
.right-rail { padding: 8px 12px 30px 24px; }
.search-box {
  height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #eff3f4;
  color: var(--muted);
}
.search-box:focus-within { border-color: var(--blue); background: #fff; box-shadow: none; }
.search-box > .ui-icon { color: var(--muted); stroke: currentColor; }
.search-box input { color: var(--text); }
.search-box input::placeholder { color: var(--muted); }
.search-box kbd { display: none; }
.side-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #f7f9f9;
}
.welcome-card { padding: 16px; }
.welcome-brand-card { min-height: auto; margin: 0 0 14px; padding: 11px; border-color: #d8e0e4; border-radius: 12px; background: #fff; }
.welcome-brand-card > span { color: var(--text); font-size: 22px; }
.welcome-brand-card small { color: var(--muted); }
.eyebrow, .welcome-card .eyebrow { color: var(--blue); }
.welcome-card h2 { margin: 8px 0; color: var(--text); font-size: 20px; font-weight: 800; }
.welcome-card h2 em { color: var(--text); font-family: inherit; font-style: normal; font-weight: 400; }
.welcome-card p, .side-card > p { color: var(--muted); font-size: 13px; }
.welcome-card .primary-button { background: var(--blue); color: #fff; }
.welcome-card .quiet-button { color: var(--blue); }
.welcome-card .quiet-button:hover { background: #e8f5fd; }
.side-card .card-heading h2 { color: var(--text); font-size: 18px; }
.community-spark { color: var(--muted); }
.side-card .text-link { color: var(--blue); }
.site-footer { color: var(--muted); }
.site-footer a { color: var(--muted); }
.toast { border-color: #d8e0e4; border-radius: 999px; background: #fff; color: var(--text); box-shadow: 0 4px 16px #0002; }
.modal {
  border-color: #cfd9de;
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 50px #0003;
}
.modal::backdrop { background: #0f141966; backdrop-filter: blur(2px); }
.modal-close { color: var(--muted); }
.modal-close:hover { background: #eff3f4; color: var(--text); }
.modal-subtitle, .field, .terms-check { color: var(--muted); }
.field input, .field textarea, .field select {
  border-color: #cfd9de;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.field-hint, .legal-note { color: var(--muted) !important; }
.form-error, .page-error.is-error { color: #b4233d; }
.terms-check input { accent-color: var(--blue); }
.terms-check a, .switch-auth button, .legal-back, .verified-badge { color: var(--blue); }
.auth-divider { color: var(--muted); }
.google-button, .discord-button { border-color: #cfd9de; border-radius: 999px; background: #fff; color: var(--text); }
.google-button:hover, .discord-button:hover { background: #f7f9f9; }
.google-mark { color: var(--blue); }
.legal-shell p, .legal-shell li, .account-card p, .security-list { color: #3e4c56; }
.legal-callout { border-color: var(--blue); background: #e8f5fd; color: var(--text); }
.page-links a { border-color: #cfd9de; color: var(--text); }
.page-links a:hover { border-color: var(--blue); background: #e8f5fd; color: var(--blue); }
.account-card { border-color: var(--line); border-radius: 16px; background: #fff; }
.settings-icon { border-color: #d8e0e4; color: var(--blue); }
.settings-icon svg, .settings-arrow { stroke: var(--blue); }
.settings-link small, .security-facts dt { color: var(--muted); }
.danger-card { border-color: #f2c6cc; background: #fff7f8; }
.danger-button { border-color: #f1aeb7; background: #fff; color: #c21f39; }
.danger-button:hover { background: #fff0f2; }
.review-item { border-color: var(--line); }
.review-actions button, .bordered-button { border-color: #cfd9de; }
.bordered-button:hover { border-color: var(--blue); }
.quiet-button { color: var(--muted); }
.quiet-button:hover { background: #eff3f4; color: var(--text); }
.explore-panel, .scheduled-panel, .community-heading, .reel-create-form { color: var(--text); }
.message-bubble { border-color: var(--line); background: #f7f9f9; color: var(--text); }
.message-bubble.sent { border-color: #cfe8f7; background: #e8f5fd; }
.poll-option { border-color: #cfd9de; background: #fff; color: var(--text); }
.poll-option:not(:disabled):hover, .poll-option-selected { border-color: var(--blue); background: #e8f5fd; }
.poll-progress { background: #eff3f4; }
.poll-progress::-webkit-progress-bar { background: #eff3f4; }
.poll-progress::-webkit-progress-value, .poll-progress::-moz-progress-bar { background: var(--blue); }

@media (min-width: 1101px) {
  .left-rail, .right-rail { position: sticky; top: 0; height: 100vh; }
}
@media (max-width: 1100px) and (min-width: 801px) {
  .app-shell { width: min(920px, 100%); grid-template-columns: 88px minmax(0, 600px) 300px; }
  .left-rail { align-items: center; padding: 10px 8px; }
  .left-rail > .brand { font-size: 0; letter-spacing: 0; }
  .left-rail > .brand::after { content: "b."; color: var(--blue); font-size: 28px; font-weight: 850; }
  .main-nav { width: 100%; }
  .main-nav .nav-link { justify-content: center; width: 58px; height: 54px; padding: 10px; }
  .main-nav .nav-link > span:not(.notification-count) { display: none; }
  .main-nav .notification-count { position: absolute; transform: translate(10px, -11px); }
  .left-rail > .compose-button { width: 56px; height: 56px; overflow: hidden; padding: 0; color: transparent; font-size: 0; }
  .left-rail > .compose-button::after { content: "+"; color: #fff; font-size: 32px; font-weight: 400; line-height: 1; }
    .left-rail > .compose-button .compose-icon { display: none; }
  .verification-rail-link { width: 58px; height: 54px; justify-content: center; padding: 8px; }
  .verification-rail-link > span:nth-child(2), .verification-rail-arrow { display: none; }
  .rail-bottom { display: none; }
  .left-rail > .account-control .account-chip { justify-content: center; width: 58px; height: 58px; padding: 7px; }
  .left-rail > .account-control .account-label, .left-rail > .account-control .account-chevron { display: none; }
}
@media (max-width: 800px) {
  .app-shell { display: block; width: 100%; max-width: 600px; }
  .left-rail, .right-rail { display: none; }
  .feed-column { width: 100%; border: 0; padding-bottom: 56px; }
  .feed-header { position: sticky; top: 0; }
  .mobile-brand { display: flex; min-height: 48px; align-items: center; padding: 6px 13px; }
  .mobile-brand .brand { padding: 4px; font-size: 23px; }
  .feed-header h1 { padding: 11px 16px; }
  .mobile-main-nav {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    min-height: 54px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    background: rgb(255 255 255 / 96%);
    backdrop-filter: blur(12px);
  }
  .mobile-main-nav .nav-link { min-height: 52px; height: 52px; border-radius: 0; }
  .mobile-main-nav .nav-link.active { background: transparent; box-shadow: inset 0 3px var(--blue); }
  .mobile-main-nav .nav-icon { width: 22px; height: 22px; }
  .composer { margin: 0; border-right: 0; border-left: 0; border-radius: 0; }
  .timeline { padding: 0 0 18px; }
  .post { padding-inline: 14px; }
  .empty-feed-state { padding: 38px 22px; }
  .profile-cover { height: 130px; }
  .right-rail { display: none; }
}
@media (max-width: 520px) {
  .feed-header h1 { padding-top: 10px; }
  .feed-tabs { border-bottom: 1px solid var(--line); }
  .feed-tab { min-height: 49px; }
  .composer { padding: 12px; }
  .composer textarea { min-height: 48px; font-size: 18px; }
  .composer-publish-options { gap: 7px; }
  .composer-publish-options .field { min-width: 0; }
  .post { gap: 9px; padding: 12px 12px 10px; }
  .post .avatar { flex-basis: 40px; width: 40px; height: 40px; }
  .post-actions { margin-left: -7px; }
  .post-action { gap: 4px; padding: 5px 6px; font-size: 11px; }
  .post-action .action-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .empty-feed-state { padding: 32px 20px; }
  .empty-feed-state h2 { font-size: 22px; }
  .empty-actions { align-items: flex-start; }
  .profile-cover { height: 112px; }
  .profile-card-body { padding: 0 13px 16px; }
  .profile-topline { gap: 6px; margin-top: -31px; }
  .profile-avatar { width: 74px; height: 74px; flex-basis: 74px; font-size: 23px; }
  .profile-actions { gap: 5px; }
  .profile-actions .primary-button, .profile-actions .quiet-button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .modal { padding: 24px 20px; }
}

@media (min-width: 1221px) {
  .app-shell {
    width: min(1320px, 100%);
    grid-template-columns: 250px minmax(0, 600px) 370px;
  }
  .right-rail { padding: 22px 24px 34px; }
}

@media (min-width: 1101px) and (max-width: 1220px) {
  .right-rail { padding: 18px 20px 30px; }
}

@media (max-width: 1100px) and (min-width: 801px) {
  .right-rail { padding: 18px 16px 30px; }
  .side-card:not(.welcome-card) { padding: 18px; }
  .welcome-card { padding: 18px; }
}

.compose-extras { gap: 8px; }
.composer-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  cursor: pointer;
}
.composer-icon-button .ui-icon { width: 20px; height: 20px; }
.post-icon-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
}
.post-icon-button .ui-icon { color: #fff; }
.side-card { margin-top: 20px; padding: 21px; }
.welcome-card { padding: 22px; }
.welcome-brand-card { margin-bottom: 18px; padding: 14px; }
.welcome-card .eyebrow { margin-bottom: 13px; }
.welcome-card h2 { margin: 12px 0; line-height: 1.15; }
.welcome-card p { margin: 16px 0 21px; line-height: 1.8; }
.side-card .card-heading { gap: 12px; }
.side-card > p { margin: 13px 0 17px; line-height: 1.75; }
.side-card .text-link { padding-top: 14px; }
.welcome-brand-card > span { font-family: inherit; font-size: 20px; font-weight: 750; letter-spacing: -.35px; }
.welcome-brand-card small { font-family: inherit; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.welcome-card h2 { font-family: inherit; font-size: 21px; font-weight: 700; letter-spacing: -.45px; line-height: 1.25; }
.welcome-card h2 em { font-family: inherit; font-style: normal; font-weight: 500; }
.custom-account-logo { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; align-self: center; border-radius: 4px; object-fit: cover; object-position: center; vertical-align: middle; }
.profile-identity .custom-account-logo { width: 22px; height: 22px; flex-basis: 22px; border-radius: 5px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.admin-tabs a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 13px; }
.admin-tabs a:hover { border-color: var(--blue); background: #e8f5fd; color: var(--blue); }
.admin-panel { scroll-margin-top: 18px; }
.admin-panel > h2 + h2 { margin-top: 25px; }
.admin-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 18px; }
.admin-form .field { flex: 1 1 165px; margin: 0; }
.admin-form button { min-height: 38px; }
.admin-panel form#admin-user-search { display: flex; align-items: end; gap: 10px; margin: 14px 0; }
.admin-panel form#admin-user-search .field { flex: 1; margin: 0; }
.notification-detail { color: var(--muted); font-size: 12px; }
.brand-preview { display: block; width: 96px; height: 96px; margin: 14px auto; border: 1px solid var(--line); border-radius: 14px; object-fit: cover; object-position: center; }

.nav-link { position: relative; }
.nav-icon, .ui-icon, .action-icon, .settings-icon svg, .settings-arrow, .compose-icon,
.verification-rail-icon svg, .account-chevron, .avatar-icon, .empty-icon {
  display: block;
  flex-shrink: 0;
}
.post-action, .feed-refresh, .menu-button, .reel-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notification-icon, .settings-icon { display: grid; place-items: center; }
.settings-arrow { align-self: center; }
.account-menu button, .account-menu a { align-items: center; }
.account-menu button > svg, .account-menu a > svg { margin: 0; }
.profile-actions > button, .admin-form > button, .review-actions > button,
.account-page form > button, .account-page > section > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.account-page {
  width: min(780px, calc(100% - 36px));
  padding-top: clamp(24px, 5vw, 52px);
  padding-bottom: max(72px, env(safe-area-inset-bottom));
}
.account-page > .brand { margin-bottom: 2px; }
.account-page .page-links { gap: 8px; margin: 23px 0 32px; }
.account-page .page-links a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 999px;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.account-page .page-links a:hover { transform: translateY(-1px); }
.account-page h1 { margin: 0 0 8px; font-size: clamp(36px, 7vw, 52px); line-height: 1.08; }
.account-page > .updated { max-width: 62ch; margin: 0 0 23px; font-size: 14px; line-height: 1.7; }
.account-page .account-card {
  margin: 16px 0;
  padding: clamp(18px, 3.3vw, 25px);
  border-radius: 16px;
  box-shadow: 0 12px 34px #0f14190a;
}
.account-page .account-card h2 { margin: 0 0 10px; font-size: 18px; line-height: 1.35; }
.account-page .account-card p { max-width: 68ch; line-height: 1.7; }
.account-page .settings-card { padding-block: 4px; }
.account-page .settings-link {
  min-height: 76px;
  padding: 15px 4px;
  border-radius: 10px;
  transition: background .18s, padding .18s;
}
.account-page .settings-link:hover { padding-inline: 10px; }
.account-page .settings-link > span:nth-child(2) { flex: 1; min-width: 0; }
.account-page .settings-icon { margin-right: 2px; }
.account-page .settings-arrow { width: 18px; height: 18px; }
.account-page .brand { align-self: flex-start; }
.account-page .eyebrow { display: block; margin: 4px 0 9px; font-size: 11px; letter-spacing: 1.2px; }
.account-page .field { display: grid; gap: 7px; margin: 14px 0; }
.account-page .field input, .account-page .field textarea, .account-page .field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
}
.account-page .field textarea { min-height: auto; }
.account-page button, .account-page .admin-tabs a { min-height: 40px; }
.account-page .security-facts > div { align-items: center; }
.account-page .review-item {
  gap: 18px;
  padding: 16px 0;
}
.account-page .review-actions { align-items: center; }
.account-page .admin-tabs { gap: 9px; margin: 18px 0 12px; }
.account-page .admin-tabs a { display: inline-flex; align-items: center; justify-content: center; }
.account-page .page-error { margin: 12px 0; }
.account-page .danger-card { box-shadow: 0 12px 30px #a1262810; }

@media (max-width: 600px) {
  .account-page { width: min(780px, calc(100% - 28px)); padding-top: 22px; }
  .account-page .page-links { margin: 19px 0 27px; }
  .account-page .settings-link { gap: 11px; }
  .account-page .settings-link small { line-height: 1.5; }
  .account-page .review-item { align-items: stretch; flex-direction: column; gap: 10px; }
  .account-page .review-actions { justify-content: flex-start; }
  .account-page .admin-form { align-items: stretch; }
}

.account-page .settings-section-title { margin: 28px 0 9px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.account-page .settings-section-title + .account-card { margin-top: 0; }
.account-page .settings-card { padding-inline: clamp(16px, 3vw, 22px); }
.account-page .settings-link-static { cursor: default; }
.account-page .settings-link-static:hover { padding-inline: 4px; background: transparent; }
.account-page .settings-status { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; }
.account-page .settings-preference-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.account-page .settings-preference-form .field { flex: 1 1 220px; margin: 3px 0; }
.account-page .settings-preference-form button { margin-bottom: 3px; }
.account-page .text-link { color: var(--blue); }
.empty-state [data-retry-feed] { margin-top: 10px; }

.quoted-post-card {
  margin: 10px 0 4px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
}
.quoted-post-author { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 5px; font-size: 12px; }
.quoted-post-author span, .quoted-post-unavailable { color: var(--muted); }
.quoted-post-body { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; }
.quoted-post-image { display: block; width: 100%; max-height: 240px; margin-top: 9px; border-radius: 8px; object-fit: cover; }
.quoted-post-unavailable { font-size: 12px; }
.quote-modal { width: min(540px, calc(100% - 28px)); }
.quote-modal h2 { margin: 7px 0 18px; }
.quote-modal .quoted-post-card { margin: 0 0 15px; }
.quote-modal .field { display: grid; gap: 7px; }
.quote-modal textarea { width: 100%; min-height: 96px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; resize: vertical; }
.quote-modal textarea:focus { outline: 2px solid color-mix(in srgb, var(--blue) 65%, transparent); outline-offset: 1px; }

@media (max-width: 520px) {
  .quote-modal { padding: 22px 18px; }
}

.account-page .api-key-manager > p { margin: 9px 0 15px; }
.api-key-form { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(145px, 1fr) minmax(130px, .8fr) auto; align-items: end; gap: 12px; }
.api-key-form .field { min-width: 0; margin: 0; }
.api-key-form .field input, .api-key-form .field select { width: 100%; }
.api-key-form > button { min-height: 42px; white-space: nowrap; }
.api-key-created { display: grid; gap: 10px; margin: 20px 0; padding: 16px; border: 1px solid #f0c66b; border-radius: 12px; background: #fff9e9; color: #47370f; }
.api-key-created code { display: block; padding: 12px; border: 1px solid #ead9ad; border-radius: 8px; background: #fff; overflow-wrap: anywhere; user-select: all; }
.api-key-created button { justify-self: start; }
.api-key-list { display: grid; gap: 9px; margin: 20px 0; }
.api-key-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.api-key-item > div { display: grid; min-width: 0; gap: 4px; }
.api-key-item code { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.api-key-item small { color: var(--muted); line-height: 1.5; }
.api-key-item button { flex: 0 0 auto; }
.api-docs { width: min(1180px, calc(100% - 36px)); }
.api-doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 30px; margin-top: 26px; }
.api-topic-nav { position: sticky; top: 20px; display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.api-topic-nav strong { padding: 5px 9px 9px; font-size: 12px; }
.api-topic-nav a { padding: 8px 9px; border-radius: 8px; color: #53616b; font-size: 13px; }
.api-topic-nav a:hover, .api-topic-nav a:focus-visible { background: #e8f5fd; color: #1676ad; }
.api-doc-content { min-width: 0; }
.api-doc-content > h1 { margin-top: 9px; }
.api-doc-content > section { scroll-margin-top: 22px; }
.api-doc-content h3 { margin-top: 22px; }
.api-doc-content pre { max-width: 100%; padding: 14px; overflow-x: auto; border: 1px solid #dce3e7; border-radius: 10px; background: #f6f8f9; color: #24323b; font-size: 12px; line-height: 1.65; }
.api-doc-content code { overflow-wrap: anywhere; }
.api-doc-content pre code { overflow-wrap: normal; }
.api-doc-content ol, .api-doc-content ul { padding-left: 22px; }
.api-doc-content li + li { margin-top: 7px; }

.profile-card { overflow: hidden; border-bottom: 1px solid var(--line); }
.profile-cover { height: 200px; background: #cfd9de; }
.profile-card-body { padding: 0 16px 16px; }
.profile-topline { min-height: 68px; margin-top: -68px; align-items: flex-end; }
.profile-avatar {
  width: 134px;
  height: 134px;
  flex-basis: 134px;
  overflow: hidden;
  border: 4px solid var(--panel);
  background: var(--blue);
  color: #fff;
  font-size: 38px;
}
.profile-avatar-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-actions { padding-bottom: 8px; }
.profile-actions .primary-button, .profile-actions .quiet-button { min-height: 36px; padding: 7px 17px; font-size: 14px; }
.following-button { color: var(--text); font-weight: 700; }
.following-button:hover { border-color: #f4212e; background: #f4212e12; color: #f4212e; }
.profile-identity { margin-top: 12px; }
.profile-identity h2 { gap: 5px; margin-bottom: 0; font-size: 20px; font-weight: 800; }
.profile-identity .post-handle { display: block; margin-top: 1px; color: var(--muted); font-size: 14px; }
.profile-bio { margin: 12px 0; color: var(--text); font-size: 14px; line-height: 1.45; }
.profile-joined { display: flex; align-items: center; gap: 5px; margin: 10px 0 12px; color: var(--muted); font-size: 13px; }
.profile-calendar-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); }
.profile-stats span { display: inline; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
.profile-stats strong { margin-right: 3px; color: var(--text); font-size: 14px; font-weight: 750; }
.profile-tabs { display: flex; min-height: 52px; border-bottom: 1px solid var(--line); }
.profile-tab { position: relative; display: grid; min-width: 80px; flex: 1; place-items: center; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.profile-tab:hover { background: var(--panel-hover); color: var(--text); }
.profile-tab.selected { color: var(--text); font-weight: 750; }
.profile-tab::after { position: absolute; right: calc(50% - 28px); bottom: 0; left: calc(50% - 28px); height: 4px; border-radius: 999px; background: var(--blue); content: ""; opacity: 0; }
.profile-tab.selected::after { opacity: 1; }

@media (max-width: 520px) {
  .profile-cover { height: 135px; }
  .profile-topline { min-height: 55px; margin-top: -55px; }
  .profile-avatar { width: 90px; height: 90px; flex-basis: 90px; font-size: 28px; }
  .profile-actions { padding-bottom: 5px; }
  .profile-actions .primary-button, .profile-actions .quiet-button { min-height: 34px; padding: 6px 13px; font-size: 13px; }
  .profile-stats { gap: 12px; }
}

@media (max-width: 800px) {
  .api-doc-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .api-topic-nav { position: sticky; z-index: 5; top: 8px; display: flex; gap: 5px; overflow-x: auto; padding: 8px; }
  .api-topic-nav strong { display: none; }
  .api-topic-nav a { flex: 0 0 auto; padding: 8px 10px; white-space: nowrap; }
}

@media (max-width: 700px) {
  .api-key-form { grid-template-columns: minmax(0, 1fr); }
  .api-key-item { align-items: flex-start; }
}

.profile-accent-blue { --profile-accent: #1d9bf0; }
.profile-accent-violet { --profile-accent: #8b72ff; }
.profile-accent-pink { --profile-accent: #f91880; }
.profile-accent-green { --profile-accent: #00a878; }
.profile-accent-orange { --profile-accent: #f47b20; }
.profile-accent-red { --profile-accent: #e4475a; }
.profile-accent-blue ~ .profile-tabs .profile-tab::after { background: #1d9bf0; }
.profile-accent-violet ~ .profile-tabs .profile-tab::after { background: #8b72ff; }
.profile-accent-pink ~ .profile-tabs .profile-tab::after { background: #f91880; }
.profile-accent-green ~ .profile-tabs .profile-tab::after { background: #00a878; }
.profile-accent-orange ~ .profile-tabs .profile-tab::after { background: #f47b20; }
.profile-accent-red ~ .profile-tabs .profile-tab::after { background: #e4475a; }
.profile-accent-blue .profile-actions .primary-button,
.profile-accent-violet .profile-actions .primary-button,
.profile-accent-pink .profile-actions .primary-button,
.profile-accent-green .profile-actions .primary-button,
.profile-accent-orange .profile-actions .primary-button,
.profile-accent-red .profile-actions .primary-button { background: var(--profile-accent); }
.profile-cover-blue { background: linear-gradient(125deg, #b6ddf8, #638daf); }
.profile-cover-violet { background: linear-gradient(125deg, #d6c9ff, #806ac3); }
.profile-cover-pink { background: linear-gradient(125deg, #ffd0e3, #c56e96); }
.profile-cover-green { background: linear-gradient(125deg, #c3ebd9, #579879); }
.profile-cover-orange { background: linear-gradient(125deg, #ffe0bf, #c77d42); }
.profile-cover-red { background: linear-gradient(125deg, #ffc8c8, #b45d68); }
.profile-cover { position: relative; overflow: hidden; }
.profile-banner-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-image { display: block; }
.avatar-image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.lastfm-card { display: grid; gap: 4px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--profile-accent, var(--blue)); border-radius: 12px; background: var(--panel-hover); }
.lastfm-kicker { color: var(--profile-accent, var(--blue)); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.lastfm-track { color: var(--text); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.lastfm-track-link { width: fit-content; margin-top: 2px; color: var(--muted); font-size: 11px; }
.lastfm-track-link:hover { color: var(--profile-accent, var(--blue)); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --panel: #16181c;
  --panel-hover: #1d1f23;
  --line: #2f3336;
  --muted: #71767b;
  --text: #e7e9ea;
  --blue: #1d9bf0;
  --orange: #1d9bf0;
}
:root[data-theme="dark"],
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .left-rail,
:root[data-theme="dark"] .feed-column { border-color: var(--line); }
:root[data-theme="dark"] .feed-column,
:root[data-theme="dark"] .composer,
:root[data-theme="dark"] .post,
:root[data-theme="dark"] .empty-feed-state,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .side-card,
:root[data-theme="dark"] .account-menu,
:root[data-theme="dark"] .post-menu,
:root[data-theme="dark"] .api-topic-nav { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .danger-card { background: #24191c; border-color: #593238; }
:root[data-theme="dark"] .api-key-created { background: #292515; border-color: #695b2b; color: #f3e6b4; }
:root[data-theme="dark"] .api-key-created code,
:root[data-theme="dark"] .api-doc-content pre { background: #101215; border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .api-topic-nav a { color: var(--muted); }
:root[data-theme="dark"] .api-topic-nav a:hover,
:root[data-theme="dark"] .api-topic-nav a:focus-visible,
:root[data-theme="dark"] .admin-tabs a:hover { background: #102536; color: var(--blue); }
:root[data-theme="dark"] .poll-progress,
:root[data-theme="dark"] .poll-progress::-webkit-progress-bar { background: #2f3336; }
:root[data-theme="dark"] .page-links a,
:root[data-theme="dark"] .settings-icon,
:root[data-theme="dark"] .account-page .settings-link { background: transparent; }
:root[data-theme="dark"] .verification-rail-link,
:root[data-theme="dark"] .welcome-brand-card { background: #16181c; }
:root[data-theme="dark"] .legal-callout { background: #102536; color: var(--text); }
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .site-footer a { color: var(--muted); }
:root[data-theme="dark"] .danger-button { color: #ff8794; }
:root[data-theme="dark"] .danger-button:hover { background: #321d22; }
:root[data-theme="dark"] .featured-reel,
:root[data-theme="dark"] .api-doc-content pre,
:root[data-theme="dark"] .thread-panel { border-color: var(--line); }
:root[data-theme="dark"] .api-key-item,
:root[data-theme="dark"] .delegated-account-item { border-color: var(--line); }
:root[data-theme="dark"] .api-doc-content code { color: var(--text); }
:root[data-theme="dark"] .feed-header { background: rgb(0 0 0 / 88%); border-color: var(--line); }
:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] .account-chip:hover,
:root[data-theme="dark"] .account-chip[aria-expanded="true"],
:root[data-theme="dark"] .account-menu button:hover,
:root[data-theme="dark"] .account-menu a:hover,
:root[data-theme="dark"] .feed-refresh:hover,
:root[data-theme="dark"] .feed-tab:hover,
:root[data-theme="dark"] .post:hover,
:root[data-theme="dark"] .post-menu button:hover { background: #1d1f23; color: var(--text); }
:root[data-theme="dark"] .verification-rail-link,
:root[data-theme="dark"] .welcome-brand-card,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .image-attachment,
:root[data-theme="dark"] .poll-builder,
:root[data-theme="dark"] .message-bubble,
:root[data-theme="dark"] .poll-option,
:root[data-theme="dark"] .reply-form textarea,
:root[data-theme="dark"] .message-compose textarea,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .composer-publish-options select,
:root[data-theme="dark"] .composer-publish-options input,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .message-bubble.sent,
:root[data-theme="dark"] .empty-secondary { background: #16181c; color: var(--text); }
:root[data-theme="dark"] .feed-column,
:root[data-theme="dark"] .composer,
:root[data-theme="dark"] .post,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .side-card,
:root[data-theme="dark"] .account-menu,
:root[data-theme="dark"] .post-menu,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .bordered-button,
:root[data-theme="dark"] .review-item,
:root[data-theme="dark"] .thread-panel { border-color: var(--line); }
:root[data-theme="dark"] .legal-shell p,
:root[data-theme="dark"] .legal-shell li,
:root[data-theme="dark"] .account-card p,
:root[data-theme="dark"] .security-list,
:root[data-theme="dark"] .field,
:root[data-theme="dark"] .terms-check,
:root[data-theme="dark"] .account-menu button,
:root[data-theme="dark"] .account-menu a,
:root[data-theme="dark"] .post-menu button { color: var(--text); }
:root[data-theme="dark"] .account-page .settings-link:hover,
:root[data-theme="dark"] .quiet-button:hover,
:root[data-theme="dark"] .page-links a:hover { background: #1d1f23; }
:root[data-theme="dark"] .settings-icon,
:root[data-theme="dark"] .danger-button { background: #16181c; border-color: var(--line); }
:root[data-theme="dark"] .feed-tab.selected::after { background: var(--blue); }
:root[data-theme="dark"] .post-focused,
:root[data-theme="dark"] .poll-option:not(:disabled):hover,
:root[data-theme="dark"] .poll-option-selected { background: #102536; }
:root[data-theme="dark"] .modal::backdrop { background: #000b; }
:root[data-theme="dark"] .empty-feed-state { border-color: var(--line); }
:root[data-theme="dark"] .profile-avatar { border-color: var(--panel); }
:root[data-theme="dark"] .welcome-brand-card { border-color: var(--line); }
:root[data-theme="dark"] .welcome-card .quiet-button:hover,
:root[data-theme="dark"] .attachment-button:hover,
:root[data-theme="dark"] .post-action:hover { background: #102536; }
:root[data-theme="dark"] .composer textarea,
:root[data-theme="dark"] .search-box input { color: var(--text); }
:root[data-theme="dark"] .composer textarea::placeholder,
:root[data-theme="dark"] .field input::placeholder,
:root[data-theme="dark"] .field textarea::placeholder { color: var(--muted); }
:root[data-theme="dark"] .profile-cover-blue { background: linear-gradient(125deg, #17344a, #254969); }
:root[data-theme="dark"] .profile-cover-violet { background: linear-gradient(125deg, #34245c, #514087); }
:root[data-theme="dark"] .profile-cover-pink { background: linear-gradient(125deg, #4d2036, #743d58); }
:root[data-theme="dark"] .profile-cover-green { background: linear-gradient(125deg, #183d30, #2a5c48); }
:root[data-theme="dark"] .profile-cover-orange { background: linear-gradient(125deg, #4b301d, #734728); }
:root[data-theme="dark"] .profile-cover-red { background: linear-gradient(125deg, #4b2228, #713740); }

.admin-body { min-height: 100vh; background: var(--bg); }
.admin-shell.account-page { width: min(1320px, calc(100% - 48px)); padding: 25px 0 55px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-topbar .brand { font-size: 28px; }
.admin-top-links { display: flex; align-items: center; gap: 9px; }
.admin-top-links a { padding: 8px 12px; border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 650; }
.admin-top-links a:hover { background: var(--panel-hover); color: var(--text); }
.admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 31px 0 20px; }
.admin-hero .eyebrow { display: flex; align-items: center; gap: 8px; color: var(--blue); }
.admin-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #61c99a; box-shadow: 0 0 0 4px #61c99a20; }
.admin-hero h1 { margin: 4px 0 6px; font-size: clamp(31px, 4vw, 42px); letter-spacing: -1.6px; }
.admin-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.admin-refresh { display: inline-flex; align-items: center; gap: 9px; min-height: 41px !important; white-space: nowrap; }
.admin-refresh svg, .admin-search-field svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-refresh.is-loading svg { animation: admin-spin .9s linear infinite; }
.admin-updated { color: var(--muted); font-size: 11px; white-space: nowrap; }
.admin-hero { position: relative; padding-bottom: 38px; }
.admin-updated { position: absolute; right: 0; bottom: 13px; }
.admin-status { min-height: 0; margin: 0 0 16px !important; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted) !important; font-size: 12px !important; }
.admin-status:empty { display: none; }
.admin-status.is-error { border-color: #e4475a66; background: #e4475a12; color: #ff9da6 !important; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-metric { position: relative; display: grid; min-height: 112px; grid-template-columns: 38px minmax(0, 1fr); align-content: center; align-items: center; gap: 4px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .16s, transform .16s, background .16s; }
.admin-metric:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 54%, var(--line)); background: var(--panel-hover); }
.admin-metric-icon { display: grid; width: 38px; height: 38px; grid-row: span 2; place-items: center; border-radius: 11px; font-size: 18px; font-weight: 800; }
.metric-reports { background: #e4475a1b; color: #ff8894; }
.metric-verification { background: #90a9cf22; color: var(--blue); }
.metric-accounts { background: #8b72ff20; color: #ab9cff; }
.metric-bans { background: #ff8a161d; color: #ffad54; }
.admin-metric-copy { display: grid; gap: 1px; }
.admin-metric-copy small { color: var(--muted); font-size: 11px; }
.admin-metric-copy strong { font-size: 23px; line-height: 1.1; }
.admin-metric-foot { grid-column: 2; color: var(--muted); font-size: 10px; }
.admin-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); align-items: start; gap: 20px; }
.admin-nav { position: sticky; top: 18px; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.admin-nav-label { padding: 7px 9px 9px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.admin-nav-label:not(:first-child) { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.admin-nav > a { display: flex; min-height: 38px; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 650; }
.admin-nav > a:hover { background: var(--panel-hover); color: var(--text); }
.admin-nav-icon { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--blue); font-size: 11px; font-weight: 800; }
.admin-nav-count { display: grid; min-width: 21px; height: 21px; margin-left: auto; padding: 0 5px; place-items: center; border-radius: 99px; background: var(--panel-hover); color: var(--text); font-size: 10px; }
.admin-nav-note { display: grid; gap: 4px; margin-top: 11px; padding: 12px 10px 4px; border-top: 1px solid var(--line); }
.admin-nav-note strong { font-size: 11px; }
.admin-nav-note span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.admin-content { display: grid; min-width: 0; gap: 15px; }
.admin-work-panel { min-width: 0; scroll-margin-top: 18px; margin: 0 !important; padding: 22px !important; border: 1px solid var(--line); border-radius: 14px !important; background: var(--panel) !important; box-shadow: none !important; }
.admin-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.admin-section-kicker { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.admin-section-heading h2 { margin: 4px 0 2px !important; font-size: 19px !important; letter-spacing: -.25px; }
.admin-section-heading p { margin: 0 !important; color: var(--muted) !important; font-size: 12px !important; }
.admin-section-count { display: grid; min-width: 30px; height: 30px; padding: 0 8px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-size: 12px; font-weight: 750; }
.admin-queue { gap: 0; }
.admin-review-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 17px 0; border-top: 1px solid var(--line); }
.admin-review-copy { display: grid; min-width: 0; gap: 7px; }
.admin-review-copy h3 { display: grid; gap: 3px; margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.admin-review-copy h3 > span { color: var(--text); }
.admin-review-copy h3 small { color: var(--muted); font-size: 10px; font-weight: 500; }
.admin-review-copy p { display: grid; gap: 7px; margin: 0 !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
.admin-review-copy blockquote { margin: 0; padding: 9px 12px; border-left: 2px solid var(--line); border-radius: 0 7px 7px 0; background: var(--panel-hover); color: var(--text); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-review-label { width: fit-content; padding: 3px 8px; border: 1px solid #e4475a40; border-radius: 99px; background: #e4475a12; color: #ff9da6; font-size: 10px; font-weight: 700; text-transform: capitalize; }
.admin-review-extra { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.admin-review-actions { align-self: center; gap: 7px; }
.admin-review-actions button { min-height: 34px !important; padding: 7px 10px; font-size: 11px; white-space: nowrap; }
.admin-review-account .admin-review-copy p { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.admin-account-status { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-account-status > span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 99px; font-size: 10px; }
.admin-account-status .status-active { border-color: #61c99a55; background: #61c99a12; color: #77d7ab; }
.admin-account-status .status-neutral { color: var(--muted); }
.admin-account-status .status-owner { border-color: #d7ad4d66; background: #d7ad4d14; color: #e7c46e; }
.admin-account-status .status-restricted { border-color: #e4475a55; background: #e4475a12; color: #ff9da6; }
.admin-owner-badge { margin-left: 2px; vertical-align: middle; }
.custom-account-badge { display: inline-flex; min-height: 18px; align-items: center; gap: 3px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--badge-color, var(--blue)) 48%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--badge-color, var(--blue)) 14%, var(--panel)); color: var(--badge-color, var(--blue)); font-size: 10px; font-weight: 750; line-height: 1.3; vertical-align: middle; }
.custom-badge-emoji { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; vertical-align: middle; }
.profile-identity h2 .custom-account-badge { width: auto; height: auto; min-height: 19px; flex: 0 0 auto; padding: 2px 7px; font-size: 10px; }
.admin-custom-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-custom-badges button { padding: 0 2px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.admin-assignment-label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.admin-assignment-label select { max-width: 150px; min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.admin-badge-form { display: grid; grid-template-columns: minmax(150px, 1fr) 100px minmax(120px, .6fr) minmax(200px, 1fr) auto; }
.admin-badge-form .field { min-width: 0; }
.admin-badge-form .field input { background: var(--bg); color: var(--text); }
.admin-badge-emoji-preview { display: inline-flex; min-height: 24px; align-items: center; margin-top: 5px; }
.admin-review-audit .admin-review-copy p { display: block; }
.admin-operation-heading { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--line); }
.admin-maintenance-control { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 2px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.admin-maintenance-control p { margin: 0; color: var(--muted); font-size: 12px; }
.admin-maintenance-control button { min-height: 38px; flex: 0 0 auto; }
.admin-maintenance-status { border-color: #e4475a66; background: #e4475a12; color: #ff9da6; }
.admin-broadcast-form { display: grid; grid-template-columns: 1fr; }
.admin-broadcast-form .field { min-width: 0; }
.admin-broadcast-form .field input, .admin-broadcast-form .field textarea { background: var(--bg); color: var(--text); }
.admin-broadcast-form .admin-warning { margin: 0; }
.admin-broadcast-form > button { justify-self: start; min-height: 40px; }

.owner-badge { border: 1px solid #ffdf8b; background: linear-gradient(145deg, #ffe18a, #c48a23); color: #382607; box-shadow: 0 0 0 1px #b17a20, 0 1px 4px #c48a234d; }
.owner-badge svg { width: 12px; height: 12px; }
.profile-identity h2 .account-badge { width: 19px; height: 19px; flex-basis: 19px; vertical-align: -2px; }
.profile-identity h2 .account-badge svg { width: 14px; height: 14px; }
.admin-owner-badge { margin-left: 2px; vertical-align: middle; }
.profile-card { background: var(--panel); }
.profile-cover { background-color: var(--panel-hover); }
.profile-tabs { background: var(--panel); }
.admin-empty { display: grid; justify-items: center; gap: 5px; margin: 0; padding: 28px 12px; text-align: center; }
.admin-empty > span { display: grid; width: 35px; height: 35px; margin-bottom: 3px; place-items: center; border-radius: 11px; background: #61c99a16; color: #77d7ab; font-size: 17px; font-weight: 800; }
.admin-empty strong { font-size: 12px; }
.admin-empty small { color: var(--muted); font-size: 11px; }
.admin-search { display: flex; align-items: center; gap: 9px; margin: 15px 0 5px; }
.admin-search-field { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); }
.admin-search-field:focus-within { border-color: var(--blue); }
.admin-search-field input { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.admin-search-field input::placeholder { color: var(--muted); }
.admin-search > button { min-height: 42px; padding: 9px 14px; font-size: 12px; white-space: nowrap; }
.admin-manual-action { margin-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.admin-manual-action summary { width: fit-content; padding: 14px 0 2px; cursor: pointer; }
.admin-manual-action summary:hover { color: var(--text); }
.admin-form { margin-top: 15px; }
.admin-form .field { min-width: 150px; }
.admin-ban-form { display: grid; grid-template-columns: minmax(135px, .75fr) minmax(180px, 1.2fr) minmax(160px, 1fr) auto; }
.admin-ban-form .field { min-width: 0; }
.admin-ban-form .field input, .admin-ban-form .field select, .admin-manual-action .field input, .admin-manual-action .field select { background: var(--bg); color: var(--text); }
.admin-ban-form > button { min-height: 42px; padding-inline: 13px; white-space: nowrap; }
.admin-warning { margin: 15px 0 2px; padding: 10px 12px; border: 1px solid #ff8a1636; border-radius: 9px; background: #ff8a160c; color: var(--muted); font-size: 11px; }
.admin-warning strong { color: var(--text); }
.admin-subheading { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-subheading h3 { margin: 0; font-size: 13px; }
.admin-subheading span { color: var(--muted); font-size: 11px; }
.admin-footer { padding: 3px 2px 0; color: var(--muted); font-size: 10px; }
.admin-footer span { padding: 0 5px; color: var(--blue); }
@keyframes admin-spin { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
  .admin-shell.account-page { width: min(100% - 32px, 760px); }
  .admin-layout { grid-template-columns: 1fr; gap: 12px; }
  .admin-nav { position: static; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 7px; }
  .admin-nav-label, .admin-nav-note { display: none; }
  .admin-nav > a { justify-content: center; padding: 7px 5px; font-size: 10px; }
  .admin-nav-icon { display: none; }
  .admin-nav-count { margin-left: 0; }
}
@media (max-width: 700px) {
  .admin-shell.account-page { width: calc(100% - 24px); padding-top: 14px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-metric { min-height: 98px; padding: 12px; }
  .admin-hero { align-items: flex-start; }
  .admin-hero p { max-width: 42ch; font-size: 12px; }
  .admin-refresh { gap: 6px; min-height: 36px !important; padding: 7px 9px; font-size: 10px; }
  .admin-work-panel { padding: 16px !important; }
  .admin-review-item { grid-template-columns: 1fr; gap: 11px; }
  .admin-review-actions { justify-content: flex-start; }
  .admin-ban-form { grid-template-columns: 1fr 1fr; }
  .admin-ban-form > button { grid-column: 1 / -1; }
  .admin-badge-form { grid-template-columns: 1fr 1fr; }
  .admin-badge-form > button { grid-column: 1 / -1; }
  .admin-maintenance-control { align-items: stretch; flex-direction: column; }
  .admin-maintenance-control button { align-self: flex-start; }
}
@media (max-width: 460px) {
  .admin-topbar .brand { font-size: 25px; }
  .admin-top-links { gap: 0; }
  .admin-top-links a { padding: 7px 8px; font-size: 10px; }
  .admin-hero { display: grid; gap: 12px; padding-top: 24px; padding-bottom: 44px; }
  .admin-refresh { justify-self: start; }
  .admin-updated { right: 0; bottom: 12px; }
  .admin-nav { grid-template-columns: repeat(5, 1fr); }
  .admin-nav > a { display: grid; align-content: center; justify-items: center; gap: 2px; font-size: 9px; }
  .admin-nav-count { min-width: 17px; height: 17px; font-size: 9px; }
  .admin-metric { grid-template-columns: 31px minmax(0, 1fr); gap: 3px 8px; }
  .admin-metric-icon { width: 31px; height: 31px; }
  .admin-metric-copy small { font-size: 9px; }
  .admin-metric-copy strong { font-size: 20px; }
  .admin-metric-foot { font-size: 9px; }
  .admin-section-heading h2 { font-size: 17px !important; }
  .admin-search { align-items: stretch; flex-direction: column; }
  .admin-search > button { width: 100%; }
  .admin-ban-form { grid-template-columns: 1fr; }
  .admin-ban-form > button { grid-column: auto; }
}