html { font-size: 16px; }
:root {
  --purple: #6757e8;
  --purple-dark: #5142d1;
  --coral: #f25f82;
  --yellow: #f8c968;
  --ink: #172033;
  --muted: #6f7890;
  --line: #e4e7f0;
  --paper: #f4f6fb;
  --white: #ffffff;
  --surface: rgba(255,255,255,.86);
  --surface-soft: #f7f8fc;
  --glow: rgba(103,87,232,.18);
  --shadow: 0 18px 55px rgba(31,38,68,.08);
}
html { color-scheme: light; }
body { line-height: 1.5; letter-spacing: 0; overflow-wrap: break-word; background: radial-gradient(circle at 12% 0, rgba(103,87,232,.1), transparent 27rem), radial-gradient(circle at 94% 12%, rgba(242,95,130,.09), transparent 24rem), var(--paper); transition: background .25s,color .25s; }
h1, h2, h3, p, span, a, button, label, input, textarea { line-height: inherit; }
.brand, .timeline-header h1, .panel-title h3, .display-name { letter-spacing: -0.02em; }
.nav a, .nav-form button { min-height: 50px; white-space: nowrap; }
.timeline { min-width: 0; overflow: hidden; background: var(--surface); backdrop-filter: blur(18px); }
.post-meta { min-width: 0; flex-wrap: wrap; row-gap: 0; }
.post-meta .display-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-text { line-height: 1.55; }
.avatar, .mini-avatar, .profile-avatar {
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 50%;
}
.avatar { width: 52px; height: 52px; flex: 0 0 52px; }
.mini-avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.avatar img, .mini-avatar img, .profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.profile-card .profile-avatar {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  margin-top: -57px;
}

.settings-page { overflow: visible; }
.settings-wrap { padding: 28px; display: grid; gap: 24px; }
.setting-panel { padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.setting-copy { margin-bottom: 22px; }
.setting-copy h2 { font: 700 25px/1.2 "Space Grotesk", sans-serif; margin: 7px 0; }
.setting-copy p { color: var(--muted); margin: 0; max-width: 520px; }
.setting-panel form { display: grid; gap: 16px; }
.setting-panel label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.setting-panel input, .setting-panel textarea { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; color: var(--ink); background: var(--surface-soft); outline: none; resize: vertical; }
.setting-panel input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(108, 77, 255, .12); }
.setting-panel .button { justify-self: start; }
.avatar-picker { display: flex; align-items: center; gap: 20px; }
.avatar-picker .profile-avatar { width: 88px; height: 88px; margin: 0; border: 4px solid #f0edff; flex: 0 0 auto; }
.file-field { flex: 1; min-width: 0; }
.file-field small { color: var(--muted); font-weight: 400; }
.remove-avatar-form { margin-top: 14px; }
.remove-avatar-form .button-ghost { margin-left: 0; color: #b53b32; }
.profile-details-panel label .counter { justify-self: end; margin-top: -3px; }

.admin-table > div { gap: 18px; }
.admin-controls { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.admin-controls form { display: flex; gap: 6px; }
.admin-controls .username-edit-form { align-items:center; }
.username-edit-form label { display:flex; align-items:center; overflow:hidden; height:32px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface-soft); transition:border-color .16s,box-shadow .16s; }
.username-edit-form label:focus-within { border-color:var(--purple); box-shadow:0 0 0 3px rgba(8,127,140,.1); }
.username-edit-form label span { padding-left:9px; font-size:12px; font-weight:700; }
.username-edit-form input { width:112px; min-width:0; height:100%; padding:0 8px 0 2px; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; font-weight:700; }
.mini-action { border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 7px 9px; color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }
.mini-action:hover { border-color: var(--purple); color: var(--purple); }
.mini-action.danger { color: #b53b32; }
.theme-choices { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.theme-choices button { min-width: 104px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; color: var(--ink); background: var(--surface-soft); font-weight: 700; cursor: pointer; }
.theme-choices button:hover { border-color: var(--purple); }
.theme-choices button[aria-pressed="true"] { border-color: var(--purple); color: #fff; background: var(--purple); box-shadow: 0 7px 20px rgba(103,87,232,.2); }
.admin-table .status-active { background: #e7f8f2; color: #16705d; }
.admin-table .status-suspended { background: #fff0ed; color: #a53529; }

.legal-footer { padding: 20px 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.legal-footer p { margin: 5px 0; }
.legal-footer a { color: var(--purple); font-weight: 700; }
.auth-form .legal-footer { margin-top: 26px; border-top: 1px solid var(--line); }
.timeline > .legal-footer { padding: 24px; border-top: 1px solid var(--line); }
.rightbar > .legal-footer { padding: 16px 8px; }
.profile-avatar { background: var(--avatar, #087f8c) url("default-avatar.svg") center/cover no-repeat; color: transparent; }
.profile-avatar:has(img) { background-image: none; }
.reply-picker { display: flex; align-items: center; gap: 6px; color: var(--purple); }
.reply-picker select { max-width: 190px; border: 0; background: transparent; color: var(--purple); font-size: 12px; font-weight: 700; outline: none; cursor: pointer; }
.post-link { color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.video-embed { position: relative; aspect-ratio: 16/9; margin-top: 13px; overflow: hidden; border-radius: 15px; background: #17151f; }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.post-actions a { color: inherit; }
.reply-locked { margin: 0; padding: 17px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
.reply-locked a { color: var(--purple); font-weight: 700; }
.reply-composer .composer-footer { justify-content: flex-end; gap: 14px; }
.post-actions { max-width: 430px; align-items: center; overflow: visible; }
.post-actions form { margin: 0; }
.post-actions button { border: 0; background: transparent; cursor: pointer; }
.repost-button.active { color: #0e9f8a; font-weight: 700; }
.reaction-wrap { position: relative; }
.reaction-summary { display: flex; align-items: center; gap: 4px; color: #918d9d; font-size: 17px; padding: 2px 5px; }
.reaction-summary.active { color: var(--purple); }
.reaction-menu { position: absolute; z-index: 8; left: 50%; bottom: 28px; transform: translate(-50%, 8px); display: flex; gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 10px 32px rgba(28,20,60,.16); opacity: 0; visibility: hidden; transition: .16s; }
.reaction-wrap:hover .reaction-menu, .reaction-wrap:focus-within .reaction-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.reaction-menu button { display: flex; flex-direction: column; align-items: center; min-width: 37px; padding: 4px; border-radius: 10px; font-size: 20px; transition: transform .15s, background .15s; }
.reaction-menu button:hover { transform: translateY(-4px) scale(1.14); background: #f3f0ff; }
.reaction-menu button.selected { background: #eeeaff; }
.reaction-menu small { font-size: 9px; color: var(--muted); }
@media (hover:none) { .reaction-menu { left: auto; right: -8px; transform: none; } .reaction-wrap:focus-within .reaction-menu { transform: none; } }
.repost-label { margin-bottom: 5px; color: #0e8a76; font-size: 11px; font-weight: 700; }
.repost-label a { color: inherit; }
.pinned-label { margin-bottom:5px; color:var(--purple); font-size:11px; font-weight:700; }
.quoted-post { display:block; margin-top:12px; padding:13px 15px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); transition:.18s; }
.quoted-post:hover { border-color:var(--purple); transform:translateY(-1px); }
.quoted-post b { font-size:13px; }
.quoted-post small { color:var(--muted); font-weight:500; }
.quoted-post p { margin:5px 0 0; color:var(--ink); font-size:13px; white-space:pre-wrap; }
.composer-quote { position:relative; margin-bottom:12px; }
.composer-quote>a { position:absolute; top:9px; right:11px; color:var(--coral); font-size:11px; font-weight:700; }
.bookmark-button.active { color:var(--yellow); }
.owner-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:8px; opacity:.68; }
.owner-actions form { margin:0; }
.owner-actions a,.owner-actions button { padding:3px 6px; border:0; color:var(--muted); background:transparent; font-size:10px; font-weight:700; cursor:pointer; }
.owner-actions .danger { color:var(--coral); }
.owner-actions:hover { opacity:1; }
.edited-link { text-decoration:underline; text-underline-offset:2px; }
.history-list article { padding:20px 23px; border-bottom:1px solid var(--line); }
.history-list article span { color:var(--muted); font-size:11px; font-weight:700; }
.history-list article p { margin:8px 0 0; line-height:1.6; }
.edit-composer { padding-top:28px; }
.composer-tools { position:relative; display:flex; align-items:center; gap:7px; margin:7px 0 3px; }
.composer-tool { height:36px; display:flex; align-items:center; gap:6px; padding:0 10px; border:1px solid transparent; border-radius:10px; color:var(--purple); background:var(--surface-soft); font-size:12px; font-weight:700; cursor:pointer; transition:.16s; }
.composer-tool:hover { border-color:color-mix(in srgb,var(--purple) 45%,var(--line)); background:color-mix(in srgb,var(--purple) 10%,var(--surface-soft)); }
.composer-tool svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.media-upload input { display:none; }
.emoji-wrap { position:relative; }
.emoji-picker { position:absolute; z-index:12; left:0; top:43px; width:244px; display:grid; grid-template-columns:repeat(6,1fr); gap:3px; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:var(--shadow); }
.emoji-picker[hidden] { display:none; }
.emoji-picker button { width:34px; height:34px; border:0; border-radius:8px; background:transparent; font-size:20px; cursor:pointer; }
.emoji-picker button:hover { background:var(--surface-soft); transform:scale(1.12); }
.media-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.media-preview:empty { display:none; }
.media-preview img { width:100%; height:90px; object-fit:cover; border-radius:12px; }
.poll-builder { margin:10px 0; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); }
.poll-builder[hidden] { display:none; }
.poll-builder-head { display:flex; justify-content:space-between; margin-bottom:9px; }
.poll-builder-head button { border:0; color:var(--coral); background:transparent; cursor:pointer; }
.poll-builder input,.poll-builder select { width:100%; margin-top:7px; padding:10px 11px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--surface); }
.poll-builder label { display:block; margin-top:8px; color:var(--muted); font-size:11px; }
.post-gallery { display:grid; gap:3px; margin-top:12px; overflow:hidden; border-radius:18px; }
.post-gallery.gallery-1 { grid-template-columns:1fr; }
.post-gallery.gallery-2 { grid-template-columns:repeat(2,1fr); }
.post-gallery.gallery-3,.post-gallery.gallery-4 { grid-template-columns:repeat(2,1fr); }
.post-gallery a { min-height:150px; background:var(--surface-soft); }
.post-gallery.gallery-1 a { max-height:440px; }
.post-gallery img { display:block; width:100%; height:100%; min-height:150px; max-height:320px; object-fit:cover; transition:transform .2s; }
.post-gallery a:hover img { transform:scale(1.015); }
.poll-card { display:grid; gap:8px; margin-top:13px; }
.poll-card form { margin:0; }
.poll-card form button { width:100%; padding:10px 13px; border:1px solid var(--purple); border-radius:999px; color:var(--purple); background:transparent; text-align:left; font-weight:700; cursor:pointer; }
.poll-card form button:hover { color:#fff; background:var(--purple); }
.poll-result { position:relative; display:flex; justify-content:space-between; overflow:hidden; padding:9px 11px; border-radius:10px; background:var(--surface-soft); font-size:13px; }
.poll-result i { position:absolute; inset:0 auto 0 0; background:color-mix(in srgb,var(--purple) 22%,transparent); }
.poll-result span,.poll-result b { position:relative; z-index:1; }
.poll-result.selected span:after { content:' ✓'; color:var(--purple); }
.poll-card>small { color:var(--muted); }
.share-wrap { position:relative; }
.post-actions .share-button { display:flex; align-items:center; gap:4px; color:inherit; }
.share-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.share-button small { font-size:10px; }
.share-menu { position:absolute; z-index:14; right:0; bottom:30px; width:154px; display:grid; overflow:hidden; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--white); box-shadow:var(--shadow); }
.share-menu[hidden] { display:none; }
.share-menu a,.share-menu button { width:100%; display:block; padding:9px 10px; border:0; border-radius:9px; color:var(--ink); background:transparent; font-size:11px; font-weight:700; text-align:left; cursor:pointer; }
.share-menu a:hover,.share-menu button:hover { color:var(--purple); background:var(--surface-soft); }
.profile-top { display: flex; align-items: flex-end; justify-content: space-between; min-height: 48px; }
.profile-top .profile-avatar { flex: 0 0 auto; }
.profile-top form { margin-top: 12px; }
.follow-stats { display: flex; gap: 18px; margin: 11px 0; color: var(--muted); font-size: 13px; }
.follow-stats b { color: var(--ink); }
.feed-tabs a { flex: 1; display: grid; place-items: center; position: relative; color: var(--muted); font-size: 14px; font-weight: 600; }
.feed-tabs a.active { color: var(--ink); }
.feed-tabs a.active:after { content: ""; position: absolute; bottom: 0; width: 50px; height: 3px; background: var(--purple); border-radius: 3px; }
.people-list { display: grid; }
.connection-card { display: flex; align-items: center; gap: 13px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.connection-card:hover { background: #faf9ff; }
.connection-card > span:last-child { display: flex; flex-direction: column; }
.connection-card small { color: var(--muted); }
.nav a { position: relative; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 10px; line-height: 1; }
.nav-badge.is-empty { display: none; }
.notification-list { display: grid; }
.notification-item { display: flex; gap: 13px; padding: 17px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.notification-item.unread { background: #f5f2ff; }
.notification-item > span:last-child { min-width: 0; line-height: 1.45; }
.notification-item small, .notification-item em { display: block; color: var(--muted); font-size: 11px; font-style: normal; }
.notification-item em { margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media(max-width:1000px){.nav-badge{position:absolute;right:2px;top:2px}.nav a{overflow:visible}}
.inline-follow { margin-left: auto; }
.inline-follow button { border: 0; background: transparent; color: var(--purple); padding: 2px 5px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.inline-follow button:hover { text-decoration: underline; }
.trend-empty { padding: 15px 18px 18px; color: var(--muted); font-size: 12px; }
.app-shell { grid-template-columns: 210px minmax(480px,650px) 300px; gap: 26px; }
.profile-layout { grid-template-columns: 210px minmax(480px,650px); }
.sidebar {
  height: 100dvh;
  max-height: 100dvh;
  padding: 20px 8px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--purple) transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(245,247,251,.25));
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb,var(--purple) 72%,transparent); }
.sidebar .nav { margin-top: 25px; gap: 4px; }
.sidebar .nav a, .sidebar .nav-form button { min-height: 44px; padding: 10px 13px; font-size: 15px; }
.sidebar-post { margin-top: 16px; }
.timeline { box-shadow: var(--shadow); }
.button-primary { background: linear-gradient(135deg, #6567f2, #4f46d8); box-shadow: 0 10px 24px rgba(79,70,216,.22); }
.button-primary:hover { background: linear-gradient(135deg, #5759e7, #4038c7); }
.profile-cover { background: radial-gradient(circle at 78% 22%, rgba(255,255,255,.35), transparent 24%), linear-gradient(125deg, #3f3b9f, #696cf4 58%, #ef6d91); }
.panel, .setting-panel { border-color: rgba(213,217,230,.9); box-shadow: 0 14px 40px rgba(30,41,59,.055); }
.welcome { background: radial-gradient(circle at 85% 15%, rgba(240,82,118,.14), transparent 25%), linear-gradient(135deg,#eeefff,#fff 58%,#fff3f6); }
.search { background: #eceff5; border: 1px solid transparent; transition: .2s; }
.search:focus-within { background: #fff; border-color: #b8baf8; box-shadow: 0 0 0 4px rgba(91,92,240,.10); }
.explore-search { display: flex; align-items: center; gap: 10px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.explore-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; outline: none; }
.explore-search input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(91,92,240,.1); }
.explore-trends { padding: 28px 22px; }
.explore-trends h2 { margin: 6px 0 18px; font: 700 25px/1.2 "Space Grotesk",sans-serif; }
.trend-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.trend-grid a { display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#fff,#f8f8ff); }
.trend-grid a:hover { border-color: #bfc0f8; transform: translateY(-1px); }
.trend-grid b { color: var(--purple); }
.trend-grid span { color: var(--muted); font-size: 11px; }
.search-people h3 { padding: 0 22px; }
.profile-tabs a { min-width: 0; font-size: 13px; }
.theme-toggle { display:flex; align-items:center; gap:10px; margin-top:auto; padding:11px 14px; border:1px solid var(--line); border-radius:14px; color:var(--muted); background:var(--surface); cursor:pointer; }
.theme-toggle span { font-size:20px; line-height:1; }
.theme-toggle b { font-size:12px; }
.mobile-more-toggle,.mobile-menu,.mobile-menu-backdrop { display:none; }
.post { position:relative; }
.post:hover { background:linear-gradient(90deg,rgba(103,87,232,.035),rgba(242,95,130,.025)); }
.panel { background:var(--surface); border-color:var(--line); box-shadow:0 14px 40px rgba(31,38,68,.06); }
.search { background:var(--surface-soft); }
.timeline-header { background:var(--surface); }

html[data-theme="dark"] { color-scheme:dark; --ink:#edf0ff; --muted:#a6aec4; --line:#303750; --paper:#10131d; --white:#171b28; --surface:rgba(23,27,40,.88); --surface-soft:#202536; --glow:rgba(129,112,255,.22); --shadow:0 20px 60px rgba(0,0,0,.28); }
html[data-theme="dark"] body { background:radial-gradient(circle at 10% 0,rgba(103,87,232,.18),transparent 30rem),radial-gradient(circle at 94% 10%,rgba(242,95,130,.12),transparent 25rem),var(--paper); }
html[data-theme="dark"] .sidebar { background:linear-gradient(180deg,rgba(19,22,33,.75),rgba(16,19,29,.4)); }
html[data-theme="dark"] .timeline-header { background:rgba(23,27,40,.88); }
html[data-theme="dark"] .post:hover, html[data-theme="dark"] .panel>a:hover, html[data-theme="dark"] .connection-card:hover { background:#1c2131; }
html[data-theme="dark"] .composer textarea, html[data-theme="dark"] .reply-picker select { color:var(--ink); background:transparent; }
html[data-theme="dark"] .reaction-menu, html[data-theme="dark"] .mini-action { color:var(--ink); background:#202536; }
html[data-theme="dark"] .welcome { background:linear-gradient(135deg,#242343,#1c2030 60%,#30202c); }
html[data-theme="dark"] .trend-grid a { background:linear-gradient(145deg,#1d2231,#202537); }
html[data-theme="dark"] .notification-item { background:var(--white); }
html[data-theme="dark"] .notification-item.unread { background:#262342; }
@media(max-width:650px){.trend-grid{grid-template-columns:1fr}.explore-search{padding-inline:15px}.profile-tabs a{font-size:11px}}

@media (max-width: 1000px) {
  .app-shell, .profile-layout { grid-template-columns: 82px minmax(450px,650px); gap: 20px; }
  .nav a, .nav-form button { min-height: 48px; justify-content: center; }
  .nav a { font-size: 0; }
  .nav a span { font-size: 26px; }
}
@media (max-width: 650px) {
  html { font-size: 15px; }
  .sidebar { height: 60px; max-height: 60px; padding: 4px 12px; overflow: visible; }
  .sidebar .nav { margin:0; width:100%; flex-direction:row; justify-content:space-around; gap:2px; }
  .sidebar .nav .mobile-secondary,.sidebar .nav .nav-form { display:none; }
  .nav a { padding: 7px; min-height: 46px; }
  .sidebar .nav a { flex:1; min-width:0; flex-direction:column; justify-content:center; gap:1px; padding:3px 2px; font-size:9px!important; }
  .sidebar .nav a span { width:auto; font-size:21px; line-height:1; }
  .mobile-more-toggle { display:flex; flex:1; min-width:0; min-height:46px; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:3px 2px; border:0; border-radius:10px; color:var(--muted); background:transparent; cursor:pointer; }
  .mobile-more-toggle span { font-size:18px; line-height:1; letter-spacing:1px; }
  .mobile-more-toggle b { font-size:9px; }
  .mobile-more-toggle[aria-expanded="true"] { color:var(--purple); background:color-mix(in srgb,var(--purple) 12%,transparent); }
  .settings-wrap { padding: 16px; gap: 16px; }
  .setting-panel { padding: 20px 16px; border-radius: 16px; }
  .avatar-picker { align-items: flex-start; gap: 14px; }
  .avatar-picker .profile-avatar { width: 70px; height: 70px; }
  .profile-card .profile-avatar { width: 104px; height: 104px; flex-basis: 104px; margin-top: -53px; }
  .admin-table > div, .user-table > div { align-items: flex-start; flex-direction: column; }
  .admin-controls { justify-content: flex-start; }
  .auth-form { align-items: start; }
  .form-card { margin: 0 auto; }
  .theme-toggle { display:none; }
  .mobile-menu-backdrop { display:block; position:fixed; z-index:28; inset:0; background:rgba(4,7,15,.58); backdrop-filter:blur(3px); }
  .mobile-menu-backdrop[hidden],.mobile-menu[hidden] { display:none; }
  .mobile-menu { display:grid; position:fixed; z-index:30; left:10px; right:10px; bottom:70px; overflow:hidden; padding:8px; border:1px solid var(--line); border-radius:20px; background:var(--white); box-shadow:0 24px 70px rgba(0,0,0,.38); }
  .mobile-menu-head { display:flex; align-items:center; justify-content:space-between; padding:8px 9px 11px; }
  .mobile-menu-head>b { font:700 18px "Space Grotesk",sans-serif; }
  .mobile-menu-head button { width:32px; height:32px; border:0; border-radius:50%; color:var(--muted); background:var(--surface-soft); font-size:22px; cursor:pointer; }
  .mobile-menu>a,.mobile-menu>button,.mobile-menu>form button { width:100%; display:flex; align-items:center; gap:13px; padding:12px 13px; border:0; border-radius:12px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
  .mobile-menu>a:hover,.mobile-menu>button:hover,.mobile-menu>form button:hover { background:var(--surface-soft); }
  .mobile-menu span { width:26px; color:var(--purple); font-size:20px; text-align:center; }
  .mobile-menu b { font-size:14px; }
  .mobile-menu form { margin:0; }
  body.mobile-menu-open { overflow:hidden; }
  .composer-tool span { display:none; }
  .composer-tool { width:36px; padding:0; justify-content:center; }
}

/* 2026 visual system — civic, energetic, and deliberately high contrast. */
:root {
  --purple: #087f8c;
  --purple-dark: #05616b;
  --coral: #ff4d3d;
  --yellow: #ffc857;
  --ink: #102a38;
  --muted: #647786;
  --line: #d8e3e8;
  --paper: #edf4f5;
  --white: #ffffff;
  --surface: rgba(255,255,255,.92);
  --surface-soft: #f1f7f7;
  --glow: rgba(8,127,140,.2);
  --shadow: 0 22px 60px rgba(20,54,68,.1);
  --radius: 22px;
}
body {
  background:
    radial-gradient(circle at 8% 3%, rgba(0,194,168,.15), transparent 25rem),
    radial-gradient(circle at 96% 8%, rgba(255,77,61,.12), transparent 24rem),
    linear-gradient(145deg, #f7fbfb 0%, var(--paper) 52%, #e8f0f3 100%);
}
body::before {
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.3;
  background-image:linear-gradient(rgba(8,127,140,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,140,.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}
.app-shell { max-width:1260px; gap:28px; }
.brand { color:var(--ink); font-weight:700; }
.brand-mark { filter:drop-shadow(0 8px 13px rgba(8,127,140,.2)); }
.nav a,.nav-form button { border:1px solid transparent; transition:background .18s,border-color .18s,color .18s,transform .18s; }
.nav a:hover,.nav a.active,.nav-form button:hover { border-color:rgba(8,127,140,.14); color:var(--purple); background:linear-gradient(90deg,rgba(8,127,140,.12),rgba(0,194,168,.06)); transform:translateX(2px); }
.timeline { border-color:rgba(181,202,209,.8); border-radius:0 0 24px 24px; box-shadow:0 26px 80px rgba(20,54,68,.09); }
.timeline-header { height:80px; border-color:var(--line); background:rgba(255,255,255,.8); }
.timeline-header::after { content:""; position:absolute; right:22px; bottom:-1px; width:74px; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--purple),#00bfa6,var(--coral)); }
.timeline-header h1 { font-size:22px; color:var(--ink); }
.spark,.panel-title span { color:var(--coral); }
.composer { position:relative; padding-top:24px; background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(233,247,246,.62)); }
.composer textarea { min-height:78px; background:transparent; caret-color:var(--coral); }
.composer textarea::placeholder { color:#81929d; }
.composer-footer { border-color:var(--line); }
.composer-tool { border-color:rgba(8,127,140,.1); color:var(--purple); background:rgba(8,127,140,.075); }
.composer-tool:hover { border-color:rgba(8,127,140,.3); color:var(--purple-dark); background:rgba(8,127,140,.13); transform:translateY(-1px); }
.media-preview { margin-top:10px; }
.media-preview img { border:2px solid rgba(255,255,255,.9); box-shadow:0 8px 20px rgba(20,54,68,.13); }
.media-status { min-height:0; margin:6px 0 0; color:var(--purple); font-size:11px; font-weight:700; }
.media-status:empty { display:none; }
.upload-progress { display:flex; align-items:center; gap:10px; margin:9px 0 4px; color:var(--muted); font-size:11px; font-weight:700; }
.upload-progress[hidden] { display:none; }
.upload-progress>div { flex:1; height:7px; overflow:hidden; border-radius:999px; background:rgba(8,127,140,.12); }
.upload-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),#00b89c,var(--coral)); box-shadow:0 0 12px rgba(0,184,156,.32); transition:width .16s ease; }
.upload-progress span { min-width:112px; text-align:right; }
.upload-progress.upload-error { color:var(--coral); }
.upload-progress.upload-error i { background:var(--coral); box-shadow:none; }
.poll-builder { border-color:rgba(8,127,140,.2); background:linear-gradient(145deg,#f4fbfa,#edf7f6); }
.button { letter-spacing:.01em; }
.button-primary { color:#fff; background:linear-gradient(135deg,#087f8c,#00a88f); box-shadow:0 12px 28px rgba(8,127,140,.25); }
.button-primary:hover { background:linear-gradient(135deg,#05616b,#078b7b); box-shadow:0 15px 34px rgba(8,127,140,.3); }
.button-primary:disabled { cursor:wait; opacity:.65; transform:none; }
.feed-tabs { background:rgba(248,252,252,.7); }
.feed-tabs a { transition:color .18s,background .18s; }
.feed-tabs a:hover { color:var(--purple); background:rgba(8,127,140,.045); }
.feed-tabs a.active:after { height:4px; background:linear-gradient(90deg,var(--purple),#00bfa6); }
.post { border-color:var(--line); }
.post:hover { background:linear-gradient(90deg,rgba(8,127,140,.055),rgba(0,194,168,.025),rgba(255,77,61,.018)); }
.post-text { color:#173644; }
.tag,.mention,.post-link { color:#087f8c; }
.post-actions { color:#708590; }
.post-actions button,.post-actions a { transition:color .16s,transform .16s; }
.post-actions button:hover,.post-actions a:hover { color:var(--purple); transform:translateY(-1px); }
.post-actions .liked,.owner-actions .danger { color:var(--coral); }
.repost-button.active,.repost-label { color:#008f78; }
.quoted-post { border-color:#d2e3e4; background:linear-gradient(145deg,#f7fbfb,#eff7f7); }
.quoted-post:hover { border-color:var(--purple); box-shadow:0 10px 28px rgba(8,127,140,.08); }
.post-gallery { box-shadow:0 12px 34px rgba(20,54,68,.12); }
.poll-card form button { border-color:var(--purple); color:var(--purple); }
.poll-card form button:hover { background:var(--purple); }
.poll-result i { background:rgba(0,194,168,.2); }
.rightbar { padding-top:20px; }
.search { border-color:rgba(8,127,140,.08); background:rgba(255,255,255,.68); box-shadow:0 8px 24px rgba(20,54,68,.05); }
.search:focus-within { border-color:rgba(8,127,140,.38); box-shadow:0 0 0 4px rgba(8,127,140,.1); }
.panel,.setting-panel { border-color:rgba(190,208,214,.82); background:rgba(255,255,255,.78); box-shadow:0 16px 45px rgba(20,54,68,.07); backdrop-filter:blur(16px); }
.panel>a:hover,.connection-card:hover { background:rgba(8,127,140,.06); }
.panel-title { border-bottom:1px solid rgba(216,227,232,.65); padding-bottom:14px; }
.welcome { background:radial-gradient(circle at 88% 12%,rgba(255,77,61,.17),transparent 27%),linear-gradient(135deg,#daf4f0,#f7fbfb 55%,#fff0ed); }
.welcome .eyebrow { color:#d9362a; }
.welcome h2 em,.auth-art h1 em { color:var(--purple); }
.profile-cover { background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.3),transparent 18%),linear-gradient(120deg,#064c5a,#078c91 48%,#00b89c 72%,#ff5c49); }
.profile-avatar { box-shadow:0 12px 30px rgba(20,54,68,.16); }
.auth-art { background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 22%),linear-gradient(145deg,#063c4a,#087f8c 54%,#00a88f); }
.auth-art h1 em { color:var(--yellow); }
.form-card input,.setting-panel input,.setting-panel textarea,.explore-search input { color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.78); }
.form-card input:focus,.setting-panel input:focus,.setting-panel textarea:focus,.explore-search input:focus { border-color:var(--purple); box-shadow:0 0 0 4px rgba(8,127,140,.11); }
.stat-grid article,.trend-grid a { border-color:var(--line); background:linear-gradient(145deg,#f5fbfa,#fff); }
.stat-grid strong,.trend-grid b { color:var(--purple); }
.notification-item.unread { background:linear-gradient(90deg,rgba(8,127,140,.1),rgba(0,194,168,.04)); }
.flash-success { background:#087f74; }
.flash-error { background:#c83c32; }
.theme-choices button[aria-pressed="true"] { border-color:var(--purple); background:linear-gradient(135deg,var(--purple),#00a88f); box-shadow:0 8px 22px rgba(8,127,140,.22); }
.nav-badge { background:var(--coral); box-shadow:0 4px 12px rgba(255,77,61,.28); }

html[data-theme="dark"] {
  --ink:#eaf8f7;
  --muted:#9ab0ba;
  --line:#203b46;
  --paper:#07171e;
  --white:#0c2028;
  --surface:rgba(12,32,40,.9);
  --surface-soft:#112b34;
  --glow:rgba(0,194,168,.22);
  --shadow:0 22px 65px rgba(0,0,0,.35);
  --purple:#24c7b1;
  --purple-dark:#68e0d0;
  --coral:#ff7062;
}
html[data-theme="dark"] body { background:radial-gradient(circle at 7% 0,rgba(0,194,168,.16),transparent 28rem),radial-gradient(circle at 96% 8%,rgba(255,77,61,.1),transparent 24rem),#07171e; }
html[data-theme="dark"] .timeline-header { background:rgba(12,32,40,.84); }
html[data-theme="dark"] .composer { background:linear-gradient(145deg,rgba(12,32,40,.78),rgba(11,48,51,.62)); }
html[data-theme="dark"] .post-text { color:#dcecea; }
html[data-theme="dark"] .post:hover,html[data-theme="dark"] .panel>a:hover,html[data-theme="dark"] .connection-card:hover { background:rgba(36,199,177,.07); }
html[data-theme="dark"] .poll-builder,html[data-theme="dark"] .quoted-post,html[data-theme="dark"] .stat-grid article,html[data-theme="dark"] .trend-grid a { border-color:var(--line); background:linear-gradient(145deg,#0f2931,#10262e); }
html[data-theme="dark"] .form-card input,html[data-theme="dark"] .setting-panel input,html[data-theme="dark"] .setting-panel textarea,html[data-theme="dark"] .explore-search input { background:#10262e; }
html[data-theme="dark"] .welcome { background:radial-gradient(circle at 88% 12%,rgba(255,112,98,.15),transparent 27%),linear-gradient(135deg,#0d3439,#10242c 58%,#34201f); }

@media(max-width:650px) {
  .timeline { border-radius:0; }
  .sidebar { background:rgba(255,255,255,.9); backdrop-filter:blur(18px); }
  html[data-theme="dark"] .sidebar { background:rgba(7,23,30,.92); }
  .nav a:hover,.nav a.active { transform:none; }
  .composer { padding-top:18px; }
}