:root {
  --ink: #101628;
  --muted: #697187;
  --line: #e7eaf1;
  --paper: #ffffff;
  --page: #f7f8fc;
  --purple: #7649f7;
  --blue: #3975f4;
  --aqua: #2ed7c1;
  --shadow: 0 20px 65px rgba(25, 32, 61, .09);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #080d1b;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(63, 123, 248, .45); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.is-hidden { display: none !important; }
.eyebrow { color: #6a63dd; font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.2; margin: 0 0 13px; }

/* ===================== app splash (native app cold-start) ===================== */
/* Sits above everything, up until app.js explicitly hides it in enterApp().
   Kept deliberately dependency-free (no images) so it paints instantly even
   on a cold WebView with a cold cache — the logo mark and wordmark are the
   same gradient/typography as the in-app brand mark, so it reads as one
   continuous piece with the app that follows rather than a separate splash. */
.app-splash {
  align-items: center; background: #080d1b; display: flex; height: 100%; inset: 0;
  justify-content: center; overflow: hidden; position: fixed; width: 100%; z-index: 9999;
  transition: opacity .45s ease, visibility .45s ease;
}
.app-splash.app-splash-out { opacity: 0; pointer-events: none; visibility: hidden; }
.app-splash-glow {
  background: radial-gradient(circle at 50% 42%, rgba(106,92,240,.38), rgba(106,92,240,0) 60%);
  inset: 0; position: absolute; animation: app-splash-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes app-splash-glow-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.app-splash-content { align-items: center; display: flex; flex-direction: column; position: relative; z-index: 1; }
.app-splash-ring {
  border: 1.5px solid rgba(139,92,246,.35); border-radius: 50%; height: 122px; position: absolute;
  top: -21px; width: 122px; animation: app-splash-ring-pulse 2.4s ease-out infinite;
}
@keyframes app-splash-ring-pulse { 0% { opacity: .9; transform: scale(.72); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.app-splash-mark {
  align-items: center; background: linear-gradient(135deg, #53b4ff 0%, #546cf2 42%, #8a43ed 100%);
  border-radius: 22px; box-shadow: 0 14px 38px rgba(87,92,246,.45); display: flex; font-size: 34px;
  font-weight: 800; height: 80px; justify-content: center; letter-spacing: -.05em; width: 80px;
  color: #fff; opacity: 0; transform: scale(.55); animation: app-splash-mark-in .6s cubic-bezier(.2,1.4,.4,1) .05s forwards, app-splash-breathe 2.6s ease-in-out 1.1s infinite;
}
.app-splash-mark span { position: relative; top: -1px; }
@keyframes app-splash-mark-in { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes app-splash-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.app-splash-word {
  color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.045em; margin-top: 22px;
  opacity: 0; transform: translateY(8px); animation: app-splash-fade-up .55s ease .38s forwards;
}
.app-splash-word-accent { color: #a48bff; }
.app-splash-tag {
  color: #8992ab; font-size: 11px; font-weight: 600; letter-spacing: .06em; margin-top: 7px;
  text-transform: uppercase; opacity: 0; transform: translateY(6px); animation: app-splash-fade-up .55s ease .52s forwards;
}
@keyframes app-splash-fade-up { to { opacity: 1; transform: translateY(0); } }
.app-splash-dots { display: flex; gap: 7px; margin-top: 30px; opacity: 0; animation: app-splash-fade-up .4s ease .68s forwards; }
.app-splash-dots i {
  background: #6a5cf0; border-radius: 50%; display: block; height: 6px; width: 6px;
  animation: app-splash-dot-bounce 1.1s ease-in-out infinite;
}
.app-splash-dots i:nth-child(2) { animation-delay: .15s; }
.app-splash-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes app-splash-dot-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .app-splash-glow, .app-splash-ring, .app-splash-mark, .app-splash-dots i { animation: none; }
  .app-splash-mark, .app-splash-word, .app-splash-tag, .app-splash-dots { opacity: 1; transform: none; }
}

/* authentication */
.auth-view { background: #0a1020; color: #f8faff; min-height: 100vh; overflow: hidden; padding: 27px max(5vw, 40px) 38px; position: relative; }
.auth-background { inset: 0; overflow: hidden; pointer-events: none; position: absolute; }
.auth-background::before { background: radial-gradient(circle at 72% 41%, rgba(109, 73, 248, .2), transparent 29%), radial-gradient(circle at 15% 78%, rgba(26, 181, 218, .13), transparent 27%); content: ""; inset: 0; position: absolute; }
.grid-lines { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 60px 60px; inset: 0; mask-image: radial-gradient(ellipse at center, #000, transparent 75%); opacity: .45; position: absolute; }
.orb { border-radius: 50%; filter: blur(2px); position: absolute; }
.orb-one { background: #5537cd; height: 380px; left: -170px; opacity: .25; top: 17%; width: 380px; }
.orb-two { background: #2cccbc; height: 270px; opacity: .09; right: 1%; top: 62%; width: 270px; }
.brand-bar { align-items: center; display: flex; justify-content: space-between; margin: auto; max-width: 1360px; position: relative; z-index: 1; }
.brand { align-items: center; display: inline-flex; font-size: 19px; font-weight: 800; letter-spacing: -.055em; line-height: 1; gap: 10px; }
.brand > span:last-child > span { color: #7f75ff; }
.brand-mark { align-items: center; background: linear-gradient(135deg, #53b4ff 0%, #546cf2 42%, #8a43ed 100%); border-radius: 11px; box-shadow: 0 8px 22px rgba(87, 92, 246, .36); display: inline-flex; font-size: 20px; height: 38px; justify-content: center; letter-spacing: -.07em; position: relative; width: 38px; }
.brand-mark span { background: #fff; border-radius: 50%; bottom: 8px; height: 3px; opacity: .7; position: absolute; right: 8px; width: 3px; }
.status-pill { align-items: center; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 50px; color: #b7bdd0; display: inline-flex; font: 500 11px/1 "DM Mono", monospace; gap: 8px; padding: 9px 12px; }
.status-pill i { background: #62e7ba; border-radius: 100%; box-shadow: 0 0 0 3px rgba(98,231,186,.14); height: 6px; width: 6px; }
.auth-layout { align-items: center; display: grid; gap: clamp(48px, 8vw, 154px); grid-template-columns: minmax(0, 1fr) minmax(380px, 472px); margin: 54px auto 0; max-width: 1160px; min-height: calc(100vh - 137px); position: relative; z-index: 1; }
.auth-story { max-width: 550px; padding-bottom: 36px; }
.auth-story .eyebrow { color: #a9a1ff; }
.auth-story h1 { font-size: clamp(48px, 5.4vw, 76px); letter-spacing: -.078em; line-height: .98; margin: 0; max-width: 500px; }
.auth-story h1 em { color: #9f80ff; font-style: normal; position: relative; }
.auth-story h1 em::after { background: linear-gradient(90deg, #6fc9ff, #9570ff); bottom: -5px; content: ""; height: 5px; left: 3px; opacity: .9; position: absolute; transform: skew(-18deg); width: 93%; }
.auth-copy { color: #abb3c7; font-size: 15px; line-height: 1.75; margin: 27px 0 30px; max-width: 455px; }
.story-card { background: linear-gradient(145deg, rgba(31,40,69,.86), rgba(14,20,36,.9)); border: 1px solid rgba(170,184,229,.16); border-radius: 20px; box-shadow: 0 27px 65px rgba(0,0,0,.2); max-width: 490px; overflow: hidden; padding: 16px; transform: rotate(-1deg); }
.story-card-top { align-items: center; display: flex; gap: 9px; margin-bottom: 14px; }
.mini-avatar { align-items: center; border: 1.5px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 9px; font-weight: 800; height: 32px; justify-content: center; letter-spacing: -.04em; width: 32px; }
.avatar-purple { background: linear-gradient(135deg, #d07cff, #6e4bf1); }
.avatar-orange { background: linear-gradient(135deg, #ffcc8e, #ed6a43); }
.avatar-green { background: linear-gradient(135deg, #83e9bc, #27a697); }
.avatar-blue { background: linear-gradient(135deg, #7cc6ff, #4870e8); }
.avatar-pink { background: linear-gradient(135deg, #ffadc8, #c35091); }
.story-card-top div { display: grid; gap: 1px; }
.story-card-top strong { font-size: 10px; }
.story-card-top small { color: #9da9c8; font-size: 9px; }
.ship-tag { background: rgba(92,231,185,.12); border: 1px solid rgba(92,231,185,.23); border-radius: 50px; color: #6ae2b5; font: 500 9px "DM Mono", monospace; margin-left: auto; padding: 5px 7px; }
.project-art { overflow: hidden; position: relative; }
.login-art { background: linear-gradient(135deg, #121d35, #101427); border: 1px solid rgba(116,146,216,.14); border-radius: 11px; height: 143px; }
.window-bar { align-items: center; background: rgba(255,255,255,.035); color: #7885a5; display: flex; font: 8px "DM Mono", monospace; gap: 4px; height: 27px; padding: 0 10px; }
.window-bar i { background: #ee6a72; border-radius: 50%; height: 5px; width: 5px; }
.window-bar i:nth-child(2) { background: #f4c76b; }.window-bar i:nth-child(3) { background: #62d6ad; }
.window-bar span { margin-left: 7px; opacity: .7; }
.login-art pre { color: #d3d9ec; font: 9px/1.72 "DM Mono", monospace; margin: 18px 0 0 22px; }.login-art b { color: #ae8dff; }.login-art pre span { color: #6fd9ff; }.login-art i { color: #ffdc84; font-style: normal; }.login-art mark { background: none; color: #78d9ac; }
.pulse-line { background: linear-gradient(90deg, transparent, #74f1d4, #976df4, transparent); bottom: 12px; filter: blur(6px); height: 3px; left: 18px; opacity: .7; position: absolute; right: 18px; }
.story-card-foot { color: #95a0ba; display: flex; font: 9px "DM Mono", monospace; gap: 15px; padding: 12px 3px 0; }.preview-dot { color: #5ce1b6; margin-left: auto; }
.community-proof { align-items: center; color: #929bb5; display: flex; font-size: 11px; gap: 12px; margin-top: 30px; }.community-proof p { margin: 0; }.community-proof strong { color: #f0f2fb; font-weight: 700; }
.avatar-stack { display: flex; }.avatar-stack span { align-items: center; background: #35405f; border: 2px solid #0c1223; border-radius: 50%; color: #fff; display: flex; font-size: 7px; font-weight: 800; height: 26px; justify-content: center; margin-left: -7px; width: 26px; }.avatar-stack span:first-child { background: #d776a4; margin: 0; }.avatar-stack span:nth-child(2) { background: #6998da; }.avatar-stack span:nth-child(3) { background: #e0a753; }.avatar-stack span:last-child { background: #262f4a; font-size: 6px; }
.auth-card-wrap { align-self: center; width: 100%; }
.auth-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; color: inherit; padding: 0; width: 100%; }
.auth-card-head .eyebrow { margin-bottom: 9px; }.auth-card-head h2 { font-size: 28px; letter-spacing: -.06em; margin: 0; }.auth-card-head p:last-child { color: #7b8294; font-size: 12px; margin: 8px 0 28px; }
.auth-card form > label, .label-row label { display: block; font-size: 11px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }.label-row { align-items: center; display: flex; justify-content: space-between; margin-top: 18px; }.label-row label { margin: 0; }
.field-wrap { align-items: center; border: 1px solid #dfe3ec; border-radius: 10px; display: flex; height: 48px; transition: border-color .2s, box-shadow .2s; }.field-wrap:focus-within { border-color: #8170ee; box-shadow: 0 0 0 4px rgba(121,102,239,.11); }.field-wrap > svg { color: #99a1b1; fill: none; height: 17px; margin: 0 10px 0 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }.field-wrap input { background: transparent; border: 0; color: #141a29; flex: 1; font-size: 12px; height: 100%; min-width: 0; outline: 0; padding: 0 12px 0 0; }.field-wrap input::placeholder { color: #aab0bd; }.handle-hint { color: #939aaa; font-size: 9px; margin: 7px 0 0; }.handle-hint strong { color: #7161df; }.text-button { background: transparent; color: #6959d3; font-size: 10px; font-weight: 700; padding: 0; }.password-toggle { background: transparent; color: #99a1b1; padding: 6px 13px 6px 3px; }.password-toggle svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.remember-row { align-items: center; display: flex; justify-content: space-between; margin: 17px 0 21px; }.check-label { align-items: center; color: #737b8c; cursor: pointer; display: flex; font-size: 10px; gap: 7px; }.check-label input { display: none; }.check-label span { border: 1.5px solid #cbd1dc; border-radius: 4px; height: 15px; position: relative; width: 15px; }.check-label input:checked + span { background: #6858d8; border-color: #6858d8; }.check-label input:checked + span::after { border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; content: ""; height: 6px; left: 4px; position: absolute; top: 2px; transform: rotate(42deg); width: 3px; }.secure-note { align-items: center; color: #9ba2b0; display: flex; font-size: 9px; gap: 4px; }.secure-note svg { fill: none; height: 12px; stroke: #78bea8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 12px; }
.primary-button { align-items: center; background: linear-gradient(100deg, #3d83f5, #6853db); border: 0; border-radius: 10px; box-shadow: 0 11px 21px rgba(70,94,225,.23); color: #fff; display: inline-flex; font-size: 12px; font-weight: 800; gap: 9px; justify-content: center; min-height: 46px; transition: box-shadow .2s, transform .2s; }.primary-button:hover { box-shadow: 0 14px 27px rgba(70,94,225,.36); transform: translateY(-1px); }.primary-button svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 17px; }.auth-submit { width: 100%; }.auth-submit span { flex: 1; text-align: center; margin-left: 20px; }
.divider { align-items: center; color: #a3a9b5; display: flex; font-size: 9px; gap: 10px; margin: 23px 0 17px; }.divider::before, .divider::after { background: #e8eaf0; content: ""; flex: 1; height: 1px; }.oauth-buttons { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }.oauth-button { align-items: center; background: #fff; border: 1px solid #e2e6ee; border-radius: 8px; display: flex; font-size: 10px; font-weight: 700; gap: 7px; justify-content: center; min-height: 39px; transition: background .2s, border-color .2s; }.oauth-button:hover { background: #f7f8fc; border-color: #cbd1de; }.oauth-button svg { fill: #1c2230; height: 15px; width: 15px; }.auth-switch { color: #7c8494; font-size: 10px; margin: 21px 0 0; text-align: center; }.auth-switch button { background: transparent; color: #5d50cf; font-size: 10px; font-weight: 800; padding: 0; }.auth-switch button span { margin-left: 3px; }.legal-copy { color: #7f899e; font-size: 9px; margin: 16px 0 0; text-align: center; }.legal-copy a { color: #aeb5c4; text-decoration: underline; text-underline-offset: 2px; }

/* application shell */
.app-view { background: var(--page); min-height: 100vh; overflow-x: hidden; padding-bottom: 172px; position: relative; }.app-glow { border-radius: 50%; pointer-events: none; position: absolute; }.app-glow-one { background: radial-gradient(circle, rgba(200,217,255,.45), transparent 68%); height: 650px; right: -260px; top: -210px; width: 650px; }.app-glow-two { background: radial-gradient(circle, rgba(228,216,255,.38), transparent 68%); height: 500px; left: -280px; top: 730px; width: 500px; }
.topbar { align-items: center; background: rgba(255,255,255,.76); border-bottom: 1px solid rgba(225,229,238,.85); display: flex; height: 78px; justify-content: space-between; padding: 0 max(34px, calc((100vw - 1430px) / 2)); position: relative; z-index: 10; }.app-brand { color: #181d30; font-size: 18px; min-width: 202px; }.app-brand .brand-mark { border-radius: 10px; font-size: 18px; height: 38px; width: 38px; }.app-brand > span:last-child > span { color: #6357df; }
.search-trigger { align-items: center; background: #f4f5fa; border: 1px solid #e8eaf1; border-radius: 999px; color: #959bad; display: flex; font-size: 11px; gap: 9px; height: 40px; max-width: 440px; padding: 0 14px; text-align: left; transition: border-color .2s, background .2s, box-shadow .2s; width: min(34vw, 440px); }.search-trigger:hover { background: #fff; border-color: #cfd4df; box-shadow: 0 4px 14px rgba(28,35,61,.06); }.search-trigger svg { fill: none; height: 17px; stroke: #8c94a6; stroke-linecap: round; stroke-width: 2; width: 17px; }.search-trigger span { flex: 1; }.search-trigger kbd { background: #fff; border: 1px solid #e4e6ed; border-radius: 5px; color: #a4a9b6; font: 9px "DM Mono", monospace; padding: 3px 6px; }
.topbar-actions { align-items: center; display: flex; gap: 11px; justify-content: flex-end; min-width: 258px; }.quick-add { align-items: center; background: #171d32; border-radius: 8px; color: #fff; display: flex; font-size: 10px; font-weight: 800; gap: 6px; height: 34px; padding: 0 11px; }.quick-add svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-width: 2.2; width: 15px; }.icon-button { align-items: center; background: transparent; border-radius: 8px; color: #5e687d; display: inline-flex; height: 34px; justify-content: center; position: relative; width: 34px; }.icon-button:hover { background: #eceef5; }.icon-button svg { fill: none; height: 19px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }.notification-button b { background: #ed5a7c; border: 2px solid #fff; border-radius: 50%; height: 8px; position: absolute; right: 7px; top: 6px; width: 8px; }.notification-wrap { position: relative; }.profile-chip { align-items: center; background: transparent; display: flex; gap: 8px; padding: 0 0 0 1px; text-align: left; }.profile-chip .mini-avatar { height: 31px; width: 31px; }.profile-name { display: grid; font-size: 10px; font-weight: 800; gap: 1px; }.profile-name small { color: #858c9c; font-size: 8px; font-weight: 600; }.profile-chip > svg { fill: none; height: 13px; stroke: #838a99; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }
.app-layout { display: grid; gap: clamp(28px, 3.1vw, 52px); grid-template-columns: 184px minmax(510px, 690px) 252px; margin: 0 auto; max-width: 1320px; padding: 31px 28px 0; position: relative; z-index: 1; }.left-rail { min-height: calc(100vh - 120px); position: relative; }.rail-label { color: #a6acbb; font: 700 9px "DM Mono", monospace; letter-spacing: .11em; margin: 12px 0 10px 11px; }.rail-label-space { margin-top: 32px; }.rail-link { align-items: center; background: transparent; border-radius: 9px; color: #697185; display: flex; font-size: 11px; font-weight: 700; gap: 12px; height: 42px; margin: 1px 0; padding: 0 11px; text-align: left; width: 100%; }.rail-link:hover { background: #eff1f7; color: #353d52; }.rail-link.active { background: #ecebff; color: #5748cb; }.rail-link svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; width: 18px; }.rail-link svg .explore-needle { fill: currentColor; stroke: none; }.rail-count { align-items: center; background: #e8eaf0; border-radius: 50px; color: #737b8d; display: flex; font: 700 8px "DM Mono", monospace; height: 17px; justify-content: center; margin-left: auto; min-width: 17px; }.rail-count.alert { background: #ffe5ec; color: #e05b78; }.rail-bottom { bottom: 0; left: 0; position: absolute; right: 0; }.handle-card { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; box-shadow: 0 9px 22px rgba(28,35,61,.035); display: flex; gap: 7px; padding: 9px; }.handle-card .mini-avatar { height: 27px; width: 27px; }.handle-card div { display: grid; flex: 1; gap: 1px; min-width: 0; }.handle-card strong { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.handle-card small { color: #9299a8; font-size: 8px; }.handle-card button { background: transparent; color: #8e95a5; font-size: 13px; padding: 3px; }
.feed-section { min-width: 0; }.feed-heading { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 8px 0 21px; }.feed-heading .eyebrow { margin-bottom: 7px; }.feed-heading h1 { font-size: 25px; letter-spacing: -.067em; line-height: 1.08; margin: 0; }.feed-heading-actions { align-items: center; display: flex; gap: 8px; }.icon-only-button { align-items: center; background: #f2f3f7; border-radius: 9px; color: #6a7284; display: inline-flex; height: 34px; justify-content: center; transition: background .15s, color .15s; width: 34px; }.icon-only-button svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 16px; }.icon-only-button.danger-icon-button:hover { background: #fdeaee; color: #d1546f; }.feed-filter { align-items: center; background: #eeeff5; border-radius: 8px; display: flex; padding: 3px; }.filter-chip { background: transparent; border-radius: 6px; color: #858c9d; font-size: 9px; font-weight: 800; padding: 7px 9px; }.filter-chip.active { background: #fff; box-shadow: 0 2px 7px rgba(33,40,72,.09); color: #393f55; }
.composer-card { align-items: center; background: #fff; border: 1px solid #e9ebf1; border-radius: 13px; box-shadow: 0 9px 25px rgba(33,40,72,.035); display: flex; gap: 10px; padding: 11px 12px; }.composer-avatar { height: 34px; width: 34px; }.composer-prompt { background: transparent; display: grid; flex: 1; gap: 2px; padding: 0 4px; text-align: left; }.composer-prompt strong { color: #444b60; font-size: 10px; }.composer-prompt span { color: #a1a7b4; font-size: 9px; }.composer-action { align-items: center; background: #f0efff; border-radius: 7px; color: #6758d9; display: flex; font-size: 9px; font-weight: 800; gap: 5px; padding: 8px 9px; }.composer-action svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }.feed-tools { align-items: center; display: flex; justify-content: space-between; margin: 22px 0 12px; position: relative; }.feed-tools p { color: #8a91a2; font-size: 10px; margin: 0; }.feed-tools p strong { color: #555d70; }.feed-tools button { align-items: center; background: transparent; color: #70798e; display: flex; font-size: 9px; font-weight: 700; gap: 3px; padding: 4px; }.feed-tools svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }
.home-sort-dropdown { position: relative; }
.home-sort-menu { background: #fff; border: 1px solid #e7eaf1; border-radius: 13px; box-shadow: 0 17px 42px rgba(25,32,61,.17); min-width: 250px; padding: 6px; position: absolute; right: 0; top: 30px; z-index: 30; }
.home-sort-menu.is-hidden { display: none; }
.home-sort-item { border-radius: 9px; display: flex; flex-direction: column; align-items: flex-start; font-size: 12px; font-weight: 800; gap: 2px; padding: 10px 11px; text-align: left; width: 100%; }
.home-sort-item small { color: #9299a8; font-size: 9.5px; font-weight: 600; }
.home-sort-item:hover { background: #f5f5fb; }
.home-sort-item.active { background: #ecebff; color: #5748cb; }
.home-sort-item.active small { color: #7d72d9; }
body[data-theme="dark"] .home-sort-menu { background: #121212; border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .home-sort-item:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .home-sort-item.active { background: rgba(255,255,255,.1); color: #a78bfa; }
.project-feed { display: grid; gap: 18px; }.project-card { background: #fff; border: 1px solid #d8dceb; border-radius: 16px; box-shadow: 0 1px 0 rgba(28,35,61,.03), 0 12px 29px rgba(28,35,61,.06); overflow: hidden; padding: 0; position: relative; transition: box-shadow .18s, border-color .18s, transform .18s; }.project-card:hover { border-color: #c3c9dd; box-shadow: 0 1px 0 rgba(28,35,61,.03), 0 18px 40px rgba(28,35,61,.09); }.project-author { align-items: center; display: flex; gap: 9px; }.project-author .mini-avatar { height: 33px; width: 33px; }.project-author > div { display: grid; gap: 2px; }.project-author strong { color: #333a4c; font-size: 10px; }.project-author small { color: #8d95a6; font-size: 9px; }

/* ------------------------------------------------------------------ */
/* Swipe actions — .swipe-track holds .swipe-front (the card's real     */
/* content, full width) and .swipe-actions (fixed 152px) side by side   */
/* in one flex row. .project-card's own overflow:hidden clips that      */
/* 152px off the right edge by default — there's nothing relying on     */
/* z-index or an opaque background to hide it, so it can't ever "show   */
/* through". Swiping just translates the whole track left to bring it   */
/* into view. touch-action: pan-y is what makes this actually draggable */
/* on a real phone — without it the browser's own vertical-scroll       */
/* gesture usually wins the touch before our JS ever sees it move.      */
/* The 4 buttons sit in a 2x2 grid (Back/Save on top, Remove/Share on   */
/* bottom) instead of a single row of 4 — that's what lets the reveal   */
/* width (and so how far you have to swipe) shrink from 264px to 152px. */
/* ------------------------------------------------------------------ */
.swipe-track { display: flex; touch-action: pan-y; transition: transform .32s cubic-bezier(.16,1,.3,1); width: 100%; will-change: transform; }
.project-card.is-swiping .swipe-track { transition: none; }
.swipe-front { background: inherit; flex: 0 0 100%; min-width: 0; padding: 17px 18px 14px; -webkit-user-select: none; user-select: none; }
.swipe-actions { align-content: center; display: grid; flex: 0 0 152px; gap: 7px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; padding: 10px 8px; }
.project-card:not(.is-swiped-open):not(.is-swiping) .swipe-actions { pointer-events: none; }
.swipe-action-btn { align-items: center; border: none; border-radius: 12px; color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 7.8px; font-weight: 800; height: 100%; justify-content: center; width: 100%; transition: transform .12s, box-shadow .12s; }
.swipe-action-btn:hover { transform: translateY(-2px); }
.swipe-action-btn:active { transform: translateY(0) scale(.96); }
.swipe-action-btn svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 15px; }
.swipe-back-btn { background: #545d72; box-shadow: 0 6px 14px rgba(84,93,114,.3); }
.swipe-back-btn:hover { background: #626b81; }
.swipe-save-btn { background: linear-gradient(160deg, #8062ea, #5c4bcf); box-shadow: 0 6px 14px rgba(92,75,207,.35); }
.swipe-save-btn:hover { background: linear-gradient(160deg, #8a6ef0, #6858d8); }
.swipe-hide-btn { background: linear-gradient(160deg, #ef5b6b, #d43f52); box-shadow: 0 6px 14px rgba(212,63,82,.35); }
.swipe-hide-btn:hover { background: linear-gradient(160deg, #f36c7a, #dd4d5f); }
.swipe-share-btn { background: linear-gradient(160deg, #379bf0, #2568c9); box-shadow: 0 6px 14px rgba(37,104,201,.35); }
.swipe-share-btn:hover { background: linear-gradient(160deg, #4ba7f5, #2f74d4); }
body[data-theme="dark"] .swipe-back-btn { background: #333c52; }
/* Community posts: NOT a card. They sit flat in the feed like any other
   row, separated from what's above/below by a single divider line, so
   they never get mistaken for a project listing (which has full off-white
   card chrome: border, shadow, rounded corners). Layout order matches
   what was asked for — author, headline, then a full-bleed image, then
   the longer description, then Kudos + Connect together at the bottom. */
.feed-card.community-post-row {
  background: none; border: 0; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; border-radius: 0;
  box-shadow: none; overflow: visible; padding: 20px 18px;
}
.project-feed .feed-card.community-post-row + .feed-card.community-post-row { border-top: 0; margin-top: -20px; padding-top: 0; }
.feed-card.community-post-row:hover { border-color: #eef0f5; box-shadow: none; }
.community-post-tag { align-items: center; background: rgba(23,146,79,.1); border-radius: 50px; color: #17924f; display: inline-flex; font-size: 8.5px; font-weight: 800; gap: 5px; letter-spacing: .04em; margin-bottom: 12px; padding: 5px 11px 5px 9px; text-transform: uppercase; }
.community-post-tag svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 12px; }
.community-post-image-wrap { border-radius: 10px; display: block; margin: 14px -18px 0; overflow: hidden; }
.community-post-image-wrap.community-post-image-placeholder .feed-card-swatch-full { border-radius: 0; height: 220px; margin-bottom: 0; }
.community-post-image { display: block; height: auto; max-height: 460px; object-fit: cover; transition: transform .3s ease; width: 100%; }
.community-post-image-wrap:hover .community-post-image { transform: scale(1.015); }
.community-post-row .project-author .mini-avatar { height: 42px; width: 42px; }
.community-post-row .project-author strong { font-size: 12.5px; }
.community-post-row .project-author small { font-size: 10px; }
.community-post-headline { color: #202638; font-size: 14px; font-weight: 600; line-height: 1.55; margin: 14px 0 0; }
.community-post-summary { color: #4b5568; font-size: 12.5px; line-height: 1.7; margin: 14px 0 0; }
.community-post-actions { align-items: center; justify-content: space-between; margin-top: 14px; }
@media (max-width: 570px) {
  .feed-card.community-post-row { padding: 17px 13px; }
  .community-post-image-wrap { margin: 14px -13px 0; }
}
body[data-theme="dark"] .feed-card.community-post-row { border-top-color: rgba(255,255,255,.16); border-bottom-color: rgba(255,255,255,.16); }
body[data-theme="dark"] .community-post-tag { color: #34d399; }
body[data-theme="dark"] .community-post-headline { color: #f2f2f2; }
body[data-theme="dark"] .community-post-summary { color: #9a9a9a; }
.feed-card-byline { color: #4b5568; font: 700 9.5px "DM Mono", monospace; letter-spacing: .02em; margin: 8px 0 0; }

.category-dot { border-radius: 50%; display: inline-block; height: 6px; margin-right: 1px; vertical-align: middle; width: 6px; }
.feed-card-swatch { box-shadow: 0 0 0 4px rgba(28,35,61,.04); }.verified { background: #5e9bf5; border-radius: 50%; color: #fff; display: inline-flex; font-size: 7px; height: 12px; justify-content: center; line-height: 12px; margin-left: 2px; vertical-align: 1px; width: 12px; }.more-button { background: transparent; color: #9ba2b0; font-size: 13px; letter-spacing: 1px; margin-left: auto; padding: 4px 0 4px 8px; }.project-summary { display: flex; gap: 16px; margin: 18px 1px 15px; }.project-summary > div { flex: 1; }.project-kind { background: #eae5ff; border-radius: 4px; color: #7258dc; display: inline-block; font: 700 8px "DM Mono", monospace; letter-spacing: .08em; padding: 4px 6px; }.project-kind.warm { background: #fff0e7; color: #de7946; }.project-kind.green { background: #ddf7ef; color: #27a981; }.project-summary h2, .split-copy h2, .compact-grid h2 { font-size: 20px; letter-spacing: -.054em; line-height: 1.24; margin: 9px 0 7px; }.project-summary p, .split-copy p, .compact-grid p { color: #777f91; font-size: 10px; line-height: 1.65; margin: 0; }.project-index { color: #c8cbd5; font: 500 10px "DM Mono", monospace; margin-top: 5px; }
.pulse-art { background: #171b36; border-radius: 10px; display: flex; height: 180px; }.art-sidebar { background: #11152b; display: flex; flex-direction: column; gap: 13px; padding: 16px 11px; width: 55px; }.art-sidebar b { color: #dcdcf9; font: 800 10px "DM Mono", monospace; margin-bottom: 8px; }.art-sidebar span { background: #5d627a; border-radius: 3px; height: 4px; opacity: .5; width: 20px; }.art-sidebar .art-active { background: #a777fc; box-shadow: 0 0 11px #8951ff; opacity: 1; width: 29px; }.art-main { flex: 1; padding: 19px 21px; }.art-topline { color: #ecedff; display: flex; font-size: 11px; font-weight: 700; justify-content: space-between; }.art-topline i { border: 1px solid #3a405c; border-radius: 4px; color: #939bb4; font: 7px "DM Mono", monospace; padding: 4px 5px; }.metric-row { display: flex; gap: 35px; margin: 18px 0 7px; }.metric-row > div { display: grid; gap: 3px; }.metric-row small { color: #8188a2; font-size: 8px; }.metric-row strong { color: #f5f5ff; font-size: 18px; letter-spacing: -.04em; }.metric-row em { color: #58d1a6; font: 8px "DM Mono", monospace; }.chart { bottom: 14px; height: 73px; left: 79px; position: absolute; right: 20px; }.chart svg { height: 100%; overflow: visible; width: 100%; }.tech-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0; }.tech-row span { background: #f2f3f7; border-radius: 4px; color: #737b8d; font: 500 8px "DM Mono", monospace; padding: 5px 7px; }.tech-row span:last-child { background: #f8f8fb; color: #a2a8b4; }
.project-actions { align-items: center; border-top: 1px solid #eff0f4; display: flex; justify-content: space-between; padding-top: 12px; }.project-actions > div { align-items: center; display: flex; gap: 8px; }.action-button { align-items: center; background: transparent; border-radius: 9px; color: #80889a; display: inline-flex; font-size: 9px; gap: 5px; padding: 6px; transition: background .15s, color .15s; }.action-button:hover { background: rgba(92,81,209,.09); color: #5c51d1; }.action-button svg, .secondary-action svg, .preview-button svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }.like-button.liked { color: #e95479; }.like-button.liked:hover { background: rgba(233,84,121,.09); }.like-button.liked svg { fill: currentColor; }.secondary-action { align-items: center; background: #f2f3f7; border-radius: 6px; color: #6a7284; display: inline-flex; font-size: 9px; font-weight: 800; gap: 5px; padding: 7px 8px; }.preview-button { align-items: center; background: #171d32; border-radius: 6px; color: #fff; display: inline-flex; font-size: 9px; font-weight: 800; gap: 5px; padding: 7px 8px; }.preview-button > span { background: #63e0b3; border-radius: 50%; box-shadow: 0 0 0 2px rgba(99,224,179,.15); height: 5px; width: 5px; }.preview-button svg { height: 12px; width: 12px; }
.follow-button { background: #ecebff; border-radius: 6px; color: #6656d9; font-size: 9px; font-weight: 800; margin-left: auto; padding: 6px 8px; }.follow-button.following, .small-follow.following { background: #e2f5ed; color: #25926f; }.project-author .follow-button + .more-button { margin-left: 1px; }
.split-content { align-items: stretch; display: grid; gap: 15px; grid-template-columns: 1.05fr .95fr; margin: 18px 0 10px; }.split-copy { padding: 3px 0 0 1px; }.split-copy h2 { font-size: 19px; }.split-copy p { max-width: 260px; }.split-copy .tech-row { margin-top: 13px; }.tiny-stats { color: #8c94a4; display: flex; font: 9px "DM Mono", monospace; gap: 13px; margin-top: 16px; }.orbit-art { background: #d8e5ff; border-radius: 10px; min-height: 185px; padding: 10px; }.orbit-window { background: linear-gradient(130deg, #0b1831, #1b2464); border-radius: 6px; height: 100%; overflow: hidden; padding: 12px; position: relative; }.orbit-dots { display: flex; gap: 3px; }.orbit-dots i { background: #7082a5; border-radius: 50%; height: 3px; opacity: .8; width: 3px; }.orbit-nav { display: flex; gap: 8px; margin: 15px 0 0 2px; }.orbit-nav span { background: #8290b5; border-radius: 2px; height: 3px; opacity: .5; width: 19px; }.orbital-copy { color: #eff4ff; display: grid; left: 15px; position: absolute; top: 55px; z-index: 2; }.orbital-copy b { font-size: 19px; letter-spacing: -.07em; line-height: .91; }.orbital-copy small { color: #b0bddc; font-size: 6px; line-height: 1.5; margin-top: 9px; }.ring { border: 1px solid rgba(175,198,255,.53); border-radius: 50%; position: absolute; transform: rotate(-28deg); }.ring-a { height: 160px; right: -15px; top: 20px; width: 210px; }.ring-b { border-color: rgba(109,229,240,.54); height: 105px; right: 20px; top: 48px; width: 160px; }.planet { background: linear-gradient(145deg, #a287ff, #7260ff 45%, #4434c0); border-radius: 50%; box-shadow: -8px 9px 18px rgba(0,0,0,.33); height: 47px; position: absolute; right: 57px; top: 67px; width: 47px; z-index: 1; }
.compact-grid { align-items: center; display: grid; gap: 15px; grid-template-columns: 1.12fr .88fr; margin: 18px 0 13px; }.compact-grid h2 { font-size: 19px; margin-bottom: 7px; }.echo-art { align-items: center; background: #163d42; border-radius: 10px; color: #d5fff4; display: flex; flex-direction: column; height: 157px; justify-content: center; overflow: hidden; position: relative; }.echo-art::before { border: 1px solid rgba(93,248,205,.23); border-radius: 50%; content: ""; height: 160px; position: absolute; width: 160px; }.echo-mark { align-items: center; background: linear-gradient(135deg, #55dfbe, #399fde); border-radius: 50%; color: #133c40; display: flex; font: 800 29px/1 Georgia, serif; height: 48px; justify-content: center; margin-bottom: 13px; position: relative; width: 48px; }.sound-wave { align-items: center; display: flex; gap: 3px; height: 15px; position: relative; }.sound-wave i { background: #80f3d8; border-radius: 4px; height: 5px; width: 2px; }.sound-wave i:nth-child(2), .sound-wave i:nth-child(6) { height: 10px; }.sound-wave i:nth-child(3), .sound-wave i:nth-child(5) { height: 16px; }.sound-wave i:nth-child(4) { height: 22px; }.echo-art small { color: #9bdbce; font: 7px "DM Mono", monospace; margin-top: 10px; position: relative; }
.right-rail { display: grid; align-content: start; gap: 17px; }.side-card { background: rgba(255,255,255,.84); border: 1px solid #e8eaf1; border-radius: 13px; box-shadow: 0 11px 24px rgba(28,35,61,.03); padding: 16px; }.side-card-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }.side-card h3 { font-size: 12px; letter-spacing: -.035em; margin: 0; }.side-card-head button { background: transparent; color: #6d5bd7; font-size: 8px; font-weight: 800; padding: 2px; }.trending-card ol { list-style: none; margin: 0; padding: 0; }.trending-card li { align-items: center; border-top: 1px solid #f0f1f5; display: flex; gap: 8px; padding: 11px 0; }.trending-card li > span { color: #babfca; font: 9px "DM Mono", monospace; }.trending-card li div { display: grid; flex: 1; gap: 2px; }.trending-card li strong { color: #555d70; font-size: 9px; }.trending-card li small { color: #a0a6b3; font-size: 8px; }.trending-card li em { color: #2caf8a; font: 8px "DM Mono", monospace; }.topic-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }.topic-pills button { background: #f0efff; border-radius: 4px; color: #6e5ddd; font: 8px "DM Mono", monospace; padding: 5px 6px; }.creator-row { align-items: center; border-top: 1px solid #f0f1f5; display: flex; gap: 7px; padding: 10px 0; }.creator-row .mini-avatar { height: 28px; width: 28px; }.creator-row div { display: grid; flex: 1; gap: 1px; min-width: 0; }.creator-row strong { color: #545c6e; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.creator-row small { color: #9da4b3; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.small-follow { background: #eef0f7; border-radius: 5px; color: #697186; font-size: 8px; font-weight: 800; padding: 5px 6px; }.rail-footer { color: #9da3b1; font-size: 8px; line-height: 2; margin: 0 0 0 3px; }.rail-footer span { color: #c1c5ce; }

/* dock and claw */
.creator-dock { align-items: center; background: rgba(13,18,36,.72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,.09); border-radius: 29px; bottom: 28px; box-shadow: 0 20px 50px rgba(6,9,22,.4), 0 2px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(0,0,0,.2); display: flex; gap: clamp(18px, 3.4vw, 58px); height: 104px; justify-content: center; left: 50%; padding: 11px clamp(20px, 3vw, 45px); position: fixed; transform: translate3d(-50%, 0, 0); z-index: 25; isolation: isolate; will-change: transform; }
.dock-item { align-items: center; -webkit-tap-highlight-color: transparent; background: transparent; border-radius: 18px; color: rgba(244,246,255,.62); display: flex; flex-direction: column; font-size: 10px; font-weight: 700; gap: 4px; min-width: 59px; padding: 6px 4px; touch-action: manipulation; transition: color .22s cubic-bezier(.4,0,.2,1), background-color .22s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1); }
.dock-icon { align-items: center; display: flex; height: 48px; justify-content: center; transition: transform .22s cubic-bezier(.34,1.56,.64,1); width: 48px; }
.dock-icon svg { fill: none; height: 40px; overflow: visible; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; transition: filter .22s ease; width: 40px; }
.home-icon svg { stroke: currentColor; }
.home-icon svg path { fill: none; stroke: currentColor; }
.chat-icon svg { stroke: currentColor; }
.explore-icon svg { fill: none; stroke: currentColor; }
.explore-icon svg .explore-needle { fill: currentColor; stroke: none; }
.profile-icon svg { stroke: currentColor; }
.profile-icon svg circle { fill: none; stroke: currentColor; }
.dock-item.active { background: rgba(255,255,255,.09); color: #fff; }
.dock-item.active .home-icon svg path { fill: #5ba4ff; stroke: #5ba4ff; }
.dock-item.active .home-icon svg { filter: drop-shadow(0 4px 8px rgba(91,164,255,.45)); stroke: #5ba4ff; }
.dock-item.active .chat-icon { color: #4ee9bd; }
.dock-item.active .chat-icon svg { filter: drop-shadow(0 4px 8px rgba(78,233,189,.4)); }
.dock-item.active .explore-icon { color: #ff9f43; }
.dock-item.active .explore-icon svg { filter: drop-shadow(0 4px 8px rgba(255,159,67,.4)); }
.dock-item.active .explore-icon svg .explore-needle { fill: currentColor; }
.dock-item.active .profile-icon { color: #ffd764; }
.dock-item.active .profile-icon svg { filter: drop-shadow(0 4px 8px rgba(255,215,100,.4)); }
.dock-item.active .profile-icon svg circle { fill: currentColor; stroke: currentColor; }
.dock-item.active .dock-icon { transform: translateY(-2px) scale(1.06); }
.dock-item:active .dock-icon { transform: scale(.88); }
.dock-create { align-items: center; -webkit-tap-highlight-color: transparent; background: transparent; color: #f7f6ff; display: grid; gap: 2px; justify-items: center; padding: 0; position: relative; touch-action: manipulation; transform: translate3d(0, -9px, 0); transition: transform .18s cubic-bezier(.4,0,.2,1); }
.dock-create > span { align-items: center; background: linear-gradient(140deg, #4b86ff 0%, #7b46e8 55%, #c24ef5 100%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; box-shadow: 0 0 0 8px rgba(120,90,246,.1), 0 10px 26px rgba(123,70,232,.45); display: flex; height: 66px; justify-content: center; transition: box-shadow .22s ease, transform .18s cubic-bezier(.4,0,.2,1); width: 66px; }
.dock-create svg { fill: none; height: 36px; stroke: #fff; stroke-linecap: round; stroke-width: 4; width: 36px; }
.dock-create b { font-size: 9px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.dock-create:hover > span { box-shadow: 0 0 0 10px rgba(120,90,246,.14), 0 14px 32px rgba(123,70,232,.55); transform: translateY(-2px); }
.dock-create:active > span { transform: scale(.92); }
.dock-item:hover:not(.active) { background: rgba(255,255,255,.045); color: rgba(255,255,255,.85); }
@media (hover: hover) { .dock-item:hover .dock-icon { transform: translateY(-2px); } }

/* overlays */
.popover { background: #fff; border: 1px solid #e7eaf1; border-radius: 13px; box-shadow: 0 17px 42px rgba(25,32,61,.17); opacity: 0; pointer-events: none; position: absolute; right: -31px; top: 42px; transform: translateY(-5px); transition: opacity .18s, transform .18s; width: 310px; z-index: 30; }.popover.open { opacity: 1; pointer-events: auto; transform: translateY(0); }.popover-title { align-items: center; display: flex; justify-content: space-between; padding: 15px 16px 10px; }.popover-title strong { font-size: 12px; }.popover-title button { background: transparent; color: #6858d9; font-size: 8px; font-weight: 800; padding: 2px; }.notice-item { align-items: start; border-top: 1px solid #f0f1f5; display: flex; gap: 8px; padding: 11px 14px; }.notice-item p { color: #70788a; font-size: 9px; line-height: 1.45; margin: 0; }.notice-item p strong, .notice-item p b { color: #4e5668; }.notice-item p small { color: #a1a7b4; display: block; font-size: 8px; margin-top: 3px; }.notice-code { color: #7763e5; font: 9px "DM Mono", monospace; margin-left: auto; }.notice-follow { background: #eef0f6; border-radius: 5px; color: #788093; font-size: 7px; font-weight: 800; margin-left: auto; padding: 4px 5px; white-space: nowrap; }
.modal-layer { align-items: center; background: rgba(8,13,27,.58); backdrop-filter: blur(8px); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 100; }.modal { background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: 0 28px 75px rgba(4,7,20,.34); color: #141a2a; max-width: 510px; padding: 29px; position: relative; width: 100%; }.modal-close { align-items: center; background: #f0f1f6; border-radius: 7px; color: #727a8d; display: flex; font-size: 20px; height: 29px; justify-content: center; line-height: 1; padding: 0 0 2px; position: absolute; right: 17px; top: 17px; width: 29px; }.modal h2 { font-size: 24px; letter-spacing: -.055em; margin: 0; }.modal-intro { color: #818899; font-size: 10px; margin: 7px 0 20px; }.publish-modal form { display: grid; gap: 13px; }.publish-modal label { color: #565e70; display: grid; font-size: 9px; font-weight: 800; gap: 6px; }.publish-modal input { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font-size: 11px; height: 39px; outline: 0; padding: 0 10px; }.publish-modal input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }.publish-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }.handle-input { align-items: center; background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; display: flex; height: 39px; }.handle-input span { color: #7969e7; font: 11px "DM Mono", monospace; margin-left: 10px; }.handle-input input { border: 0; flex: 1; height: 37px; padding-left: 2px; }.file-drop { align-items: center; background: #f7f6ff; border: 1px dashed #c9c2f1; border-radius: 10px; color: #6960b6 !important; justify-items: center; min-height: 100px; padding: 14px; text-align: center; }.file-drop svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 21px; }.file-drop strong { font-size: 10px; }.file-drop small { color: #9992bc; font-size: 8px; font-weight: 500; }.publish-modal .primary-button { margin-top: 3px; width: 100%; }.search-modal { max-width: 555px; padding-bottom: 32px; }.search-modal .eyebrow { margin-bottom: 9px; }.search-modal h2 { font-size: 25px; }.search-input-wrap { align-items: center; border: 1px solid #dfe3eb; border-radius: 10px; display: flex; height: 50px; margin-top: 21px; }.search-input-wrap:focus-within { border-color: #7e6cec; box-shadow: 0 0 0 4px rgba(126,108,236,.11); }.search-input-wrap svg { fill: none; height: 18px; margin: 0 11px 0 14px; stroke: #858da0; stroke-linecap: round; stroke-width: 2; width: 18px; }.search-input-wrap input { border: 0; color: #343a4a; flex: 1; font-size: 12px; outline: 0; padding-right: 10px; }.search-suggestions { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }.search-suggestions span { color: #a0a6b4; font-size: 9px; margin-right: 2px; }.search-suggestions button { background: #f1f0ff; border-radius: 5px; color: #6e5ed9; font-size: 9px; font-weight: 700; padding: 6px 8px; }.empty-search { background: #fff; border: 1px dashed #d9dce7; border-radius: 15px; color: #868ea0; margin-top: 10px; padding: 42px 20px; text-align: center; }.empty-search > span { color: #7766e5; font-size: 28px; }.empty-search > span svg, .empty-state-icon svg, .cuts-empty-icon svg { display: inline-block; fill: none; height: 26px; stroke: currentColor; width: 26px; }.empty-state-icon, .cuts-empty-icon { color: #7766e5; display: inline-flex; }.empty-search h2 { color: #525a6c; font-size: 16px; letter-spacing: -.04em; margin: 8px 0 4px; }.empty-search p { font-size: 10px; margin: 0; }.toast { align-items: center; background: #1b2238; border: 1px solid rgba(255,255,255,.1); border-radius: 50px; box-shadow: 0 16px 40px rgba(10,14,30,.28); color: #fff; display: flex; font-size: 10.5px; font-weight: 700; gap: 9px; left: 50%; max-width: calc(100vw - 30px); opacity: 0; padding: 11px 18px 11px 14px; pointer-events: none; position: fixed; top: 90px; transform: translate(-50%, -14px); transition: opacity .2s, transform .2s; z-index: 500; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-icon { align-items: center; background: rgba(46,196,132,.18); border-radius: 50%; color: #4fd996; display: inline-flex; flex: 0 0 auto; height: 20px; justify-content: center; width: 20px; }
.toast-icon svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; width: 12px; }
.toast.toast-error .toast-icon { background: rgba(233,84,121,.18); color: #f27994; }
.toast-message { line-height: 1.4; }
.signup-modal { max-width: 535px; }.signup-modal form { display: grid; gap: 13px; }.signup-modal label { color: #565e70; display: grid; font-size: 9px; font-weight: 800; gap: 6px; }.signup-modal input { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font-size: 11px; height: 39px; outline: 0; padding: 0 10px; }.signup-modal input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }.signup-modal .handle-input { height: 45px; }.signup-modal .handle-input input { border: 0; height: 43px; }.field-help { color: #979ead; font-size: 8px; font-weight: 500; line-height: 1.5; }.prominent-handle { background: linear-gradient(90deg, #faf9ff, #f7fbff); border-color: #cdc6f3; }.prominent-handle span { font-size: 14px; }.handle-preview { color: #8e95a5; font: 8px "DM Mono", monospace; margin: -5px 0 0; }.handle-preview strong { color: #6e5eda; }.signup-modal .primary-button { margin-top: 3px; width: 100%; }.signup-foot { color: #858c9b; font-size: 9px; margin: 17px 0 0; text-align: center; }.signup-foot button { background: transparent; color: #6858d9; font-size: 9px; font-weight: 800; padding: 0; }


@media (max-width: 1100px) {
  .app-layout { gap: 25px; grid-template-columns: 168px minmax(480px, 1fr); max-width: 920px; }.right-rail { display: none; }.topbar { padding: 0 28px; }.creator-dock { gap: 32px; }.auth-layout { gap: 55px; grid-template-columns: minmax(0, 1fr) 430px; }
}

@media (max-width: 820px) {
  .auth-view { padding: 23px 20px 30px; }.brand-bar { max-width: 540px; }.status-pill { display: none; }.auth-layout { display: block; margin-top: 44px; min-height: auto; }.auth-story { margin: 0 auto 32px; max-width: 540px; padding: 0; }.auth-story h1 { font-size: 53px; }.auth-copy { margin: 20px 0; }.story-card { display: none; }.community-proof { margin-top: 22px; }.auth-card-wrap { margin: auto; max-width: 470px; }.app-layout { display: block; max-width: 720px; padding: 21px 22px 0; }.left-rail { display: none; }.topbar { padding: 0 22px; }.app-brand { min-width: 0; }.search-trigger { margin-left: 24px; width: min(40vw, 320px); }.topbar-actions { min-width: 0; }.quick-add span, .profile-name, .profile-chip > svg { display: none; }.profile-chip .mini-avatar { height: 32px; width: 32px; }.feed-heading { margin-top: 4px; }.creator-dock { gap: clamp(22px, 6vw, 48px); }
}

@media (max-width: 570px) {
  .auth-story { margin-bottom: 26px; }.auth-story h1 { font-size: 43px; }.auth-copy { font-size: 13px; }.community-proof { font-size: 10px; }.auth-card-head h2 { font-size: 30px; }.oauth-buttons { gap: 7px; }.auth-switch { line-height: 1.7; }.topbar { height: 64px; padding: 0 14px; }.app-brand { font-size: 0; gap: 0; }.app-brand .brand-mark { height: 34px; width: 34px; }.search-trigger { background: rgba(94,104,125,.08); border-radius: 50%; height: 38px; justify-content: center; margin-left: auto; padding: 0; width: 38px; }.search-trigger:active { transform: scale(.93); }.search-trigger span, .search-trigger kbd { display: none; }.search-trigger svg { height: 18px; width: 18px; }.topbar-actions { gap: 4px; }.quick-add { display: none; }.icon-button { height: 32px; width: 32px; }.notification-panel { position: fixed; right: 12px; top: 56px; width: min(310px, calc(100vw - 24px)); }.app-layout { padding: 19px 13px 0; }.feed-heading { align-items: start; margin-bottom: 16px; }.feed-heading .eyebrow { font-size: 8px; }.feed-heading h1 { font-size: 21px; max-width: 210px; }.filter-chip { font-size: 8px; padding: 6px 7px; }.composer-card { border-radius: 11px; gap: 7px; padding: 9px; }.composer-avatar { height: 30px; width: 30px; }.composer-prompt span { display: none; }.composer-prompt strong { font-size: 9px; }.composer-action span { display: none; }.composer-action { padding: 7px; }.feed-tools { margin: 18px 0 10px; }.feed-tools p { font-size: 9px; }.project-feed { gap: 13px; }.project-card { border-radius: 13px; }.swipe-front { padding: 14px 13px 11px; }.project-summary { margin: 14px 0 12px; }.project-summary h2, .split-copy h2, .compact-grid h2 { font-size: 17px; }.project-summary p, .split-copy p, .compact-grid p { font-size: 9px; }.pulse-art { height: 145px; }.art-sidebar { padding: 12px 8px; width: 42px; }.art-main { padding: 13px; }.metric-row { gap: 17px; margin-top: 12px; }.metric-row strong { font-size: 15px; }.chart { bottom: 7px; left: 52px; right: 10px; }.project-actions { gap: 5px; }.project-actions > div { gap: 3px; }.action-button { font-size: 8px; gap: 3px; padding: 7px; }.action-button svg { height: 17px; width: 17px; }.secondary-action, .preview-button { font-size: 8px; gap: 3px; padding: 7px; }.secondary-action svg { height: 16px; width: 16px; }.split-content, .compact-grid { gap: 12px; grid-template-columns: 1fr; margin: 14px 0 9px; }.split-copy { padding: 0; }.orbit-art { min-height: 150px; }.compact-grid .echo-art { height: 135px; }.creator-dock { border-radius: 22px; bottom: 11px; gap: 0; height: 79px; justify-content: space-around; padding: 8px 11px; width: calc(100vw - 18px); }.dock-item { font-size: 7px; gap: 1px; min-width: 42px; }.dock-icon { height: 35px; width: 37px; }.dock-icon svg { height: 31px; width: 31px; }.dock-create { transform: translateY(-10px); }.dock-create > span { height: 52px; width: 52px; }.dock-create svg { height: 30px; width: 30px; }.dock-create b { font-size: 7px; }.app-view { padding-bottom: 108px; }.modal-layer { align-items: end; padding: 0; }.modal { border-radius: 17px 17px 0 0; max-height: 92vh; overflow-y: auto; padding: 26px 20px 25px; }.publish-grid { grid-template-columns: 1fr; }.toast { top: 74px; }.popover { right: -8px; }.home-sort-menu { min-width: 200px; right: -6px; }.home-sort-item small { font-size: 8.5px; }
}

@media (max-width: 360px) {
  .creator-dock { width: calc(100vw - 10px); }.dock-item { min-width: 37px; }.auth-card { padding-left: 18px; padding-right: 18px; }.auth-story h1 { font-size: 37px; }.project-actions .share-button span { display: none; }.feed-heading h1 { font-size: 19px; }
}


/* ===================== additional application pages ===================== */
.main-column { min-width: 0; }
.page-view { animation: page-in .32s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-view { animation: none; } }
.bookmark-button.saved { color: #6656d9; }
.bookmark-button.saved svg { fill: currentColor; }
.empty-state { background: #fff; border: 1px dashed #d9dce7; border-radius: 15px; color: #868ea0; margin-top: 10px; padding: 52px 20px; text-align: center; }
.empty-state > span { color: #7766e5; font-size: 30px; display: block; margin-bottom: 6px; }
.empty-state h2 { color: #525a6c; font-size: 16px; letter-spacing: -.04em; margin: 8px 0 6px; }
.empty-state p { font-size: 10px; margin: 0 0 16px; }
.empty-state .primary-button { display: inline-flex; padding: 0 18px; }

/* explore */
/* Explore filter bar: two compact dropdowns (sort + category) instead of a
   row of chips/tabs and a country picker — keeps the whole bar to one
   tidy row instead of eating a chunk of the page. */
.explore-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.explore-filter-field { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 11px; box-shadow: 0 6px 16px rgba(28,35,61,.04); display: inline-flex; gap: 8px; padding: 0 13px; height: 42px; transition: border-color .15s, box-shadow .15s; }
.explore-filter-field:focus-within { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.explore-filter-field svg { fill: none; flex: 0 0 auto; height: 15px; stroke: #8c94a6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.explore-filter-field select { background: transparent; border: 0; color: #303748; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; outline: 0; padding: 0 4px 0 0; }

/* Explore More: a bolder gradient pill with a bouncy chevron, distinct
   from the plain secondary-action buttons used elsewhere. */
.explore-load-more-wrap { display: flex; justify-content: center; margin: 26px 0 6px; }
.explore-load-more-button { align-items: center; background: linear-gradient(120deg, #171d32, #2a2f5a 60%, #3d2f74); border: 0; border-radius: 999px; box-shadow: 0 10px 26px rgba(23,29,50,.28); color: #fff; display: inline-flex; font-size: 11.5px; font-weight: 800; gap: 9px; letter-spacing: .01em; padding: 0 26px; height: 46px; transition: transform .15s, box-shadow .15s, opacity .15s; }
.explore-load-more-button:hover { box-shadow: 0 14px 32px rgba(23,29,50,.36); transform: translateY(-1px); }
.explore-load-more-button:active { transform: translateY(0) scale(.98); }
.explore-load-more-button svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; transition: transform .15s; width: 15px; }
.explore-load-more-button:hover svg { transform: translateY(2px); }
.explore-load-more-button:disabled { box-shadow: none; cursor: default; opacity: .55; transform: none; }

.explore-grid-skeleton { display: contents; }
.feed-card-skeleton { background: linear-gradient(100deg, #f0f1f6 30%, #f8f9fc 45%, #f0f1f6 60%); background-size: 200% 100%; border: 1px solid #e6e9f0; border-radius: 16px; height: 230px; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
@keyframes skeleton-shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

body[data-theme="dark"] .explore-filter-field { background: #121212; border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .explore-filter-field select { color: #f2f2f2; }
body[data-theme="dark"] .explore-filter-field svg { stroke: #9a9a9a; }
body[data-theme="dark"] .explore-load-more-button { background: linear-gradient(120deg, #6a5cf0, #4e3fc4); box-shadow: 0 10px 26px rgba(90,70,220,.35); }
body[data-theme="dark"] .explore-load-more-button:hover { box-shadow: 0 14px 32px rgba(90,70,220,.45); }
body[data-theme="dark"] .feed-card-skeleton { background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.05) 60%); background-size: 200% 100%; border-color: rgba(255,255,255,.08); }
.explore-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.explore-tile { background: #fff;content-visibility: auto; contain-intrinsic-size: 0 210px;  border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); overflow: hidden; padding: 15px; }
.explore-tile .tile-art { align-items: center; border-radius: 10px; color: #fff; display: flex; font: 800 13px "DM Mono", monospace; height: 92px; justify-content: center; letter-spacing: -.03em; margin-bottom: 12px; }
.explore-tile h3 { font-size: 14px; letter-spacing: -.03em; margin: 0 0 5px; }
.explore-tile p { color: #7d859a; font-size: 9.5px; line-height: 1.6; margin: 0 0 10px; }
.explore-tile .tile-meta { align-items: center; color: #939aab; display: flex; font: 9px "DM Mono", monospace; gap: 12px; justify-content: space-between; }
.explore-tile .tile-meta span:first-child { color: #5f6884; font-weight: 700; }
.explore-tile .tile-stats { color: #a3a9b7; display: flex; gap: 10px; }

/* following */
.following-group { margin-bottom: 22px; }
.following-group-head { align-items: center; display: flex; gap: 10px; margin-bottom: 10px; }
.following-group-head strong { font-size: 11px; }
.following-group-head small { color: #9099ac; font-size: 9px; }

/* collections */
.collection-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.collection-card { background: #fff;content-visibility: auto; contain-intrinsic-size: 0 100px;  border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); overflow: hidden; padding: 15px; }
.collection-cover { border-radius: 10px; display: grid; gap: 3px; grid-template-columns: 1fr 1fr; height: 92px; margin-bottom: 12px; overflow: hidden; }
.collection-cover span { align-items: center; display: flex; font: 700 9px "DM Mono", monospace; justify-content: center; }
.collection-card h3 { font-size: 14px; letter-spacing: -.03em; margin: 0 0 4px; }
.collection-card p { color: #9099ac; font-size: 9.5px; margin: 0; }
.collection-new { align-items: center; background: #fafaff; border: 1.5px dashed #cfc9ef; color: #6e64c4; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 178px; }
.collection-new svg { fill: none; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 22px; }
.collection-new strong { font-size: 11px; }

/* my projects */
.myproject-card { align-items: center;content-visibility: auto; contain-intrinsic-size: 0 90px;  background: #fff; border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 16px; margin-bottom: 13px; padding: 16px 17px; }
.myproject-thumb { align-items: center; background: linear-gradient(135deg, #4b3fc9, #7649f7); border-radius: 10px; color: #fff; display: flex; flex: 0 0 auto; font: 800 13px "DM Mono", monospace; height: 58px; justify-content: center; width: 58px; }
.myproject-body { flex: 1; min-width: 0; }
.myproject-body h3 { font-size: 13px; letter-spacing: -.03em; margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myproject-body p { color: #8a91a2; font-size: 9.5px; margin: 0 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myproject-stats { color: #9099ac; display: flex; font: 9px "DM Mono", monospace; gap: 13px; }
.myproject-status { background: #e2f5ed; border-radius: 50px; color: #25926f; font: 700 8px "DM Mono", monospace; padding: 4px 8px; white-space: nowrap; }
.myproject-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 7px; }
.myproject-actions button { background: #f2f3f7; border-radius: 7px; color: #6a7284; font-size: 9px; font-weight: 800; padding: 8px 10px; }
.myproject-actions button.delete-project-button { background: #fdeaee; color: #d1546f; }

/* messages */
.messages-shell { background: #fff; border: 1px solid #e6e9f0; border-radius: 16px; box-shadow: 0 12px 29px rgba(28,35,61,.045); display: grid; grid-template-columns: 230px 1fr; min-height: 480px; overflow: hidden; }
.thread-list { border-right: 1px solid #eff0f4; overflow-y: auto; }
.thread-item { align-items: center;content-visibility: auto; contain-intrinsic-size: 0 80px;  background: transparent; border-bottom: 1px solid #f4f5f9; border-left: 3px solid transparent; display: flex; gap: 13px; padding: 15px 16px 15px 13px; text-align: left; transition: background .15s, border-color .15s; width: 100%; }
.thread-item:hover { background: #f8f8fc; }
.thread-item.active { background: #f4f2ff; border-left-color: #7258dc; }
/* Match each list's active-row accent to that list's own type color (see
   .thread-type-chip above) so the highlighted row and the open chat's
   header always agree on what kind of chat it is. */
#groupsList .thread-item.active { background: #edfaf4; border-left-color: #17c964; }
#channelsListPanel .thread-item.active { background: #fff7ec; border-left-color: #e8a13a; }
.thread-item .mini-avatar { flex: 0 0 auto; font-size: 15px; height: 50px; width: 50px; }
.thread-item-body { display: grid; flex: 1; gap: 3px; min-width: 0; }
.thread-item-body strong { color: #333a4c; font-size: 13px; }
.thread-item-body small { color: #909aab; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item-name-row { align-items: center; display: flex; gap: 7px; min-width: 0; }
.thread-item-name-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-unread-badge { align-items: center; background: linear-gradient(135deg, #7258dc, #9a7ef0); border-radius: 999px; box-shadow: 0 2px 5px rgba(114, 88, 220, .35); color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 10px; font-weight: 700; height: 17px; justify-content: center; letter-spacing: .01em; min-width: 17px; padding: 0 5px; }
.thread-item.has-unread .thread-item-body small { color: #4b5468; font-weight: 600; }
body[data-theme="dark"] .thread-item.has-unread .thread-item-body small { color: #c7c7cf; }
.thread-item-dot { background: #7649f7; border-radius: 50%; flex: 0 0 auto; height: 7px; width: 7px; }
.thread-panel { display: flex; flex-direction: column; min-width: 0; }
.thread-empty { align-items: center; color: #a2a9b8; display: flex; flex: 1; flex-direction: column; justify-content: center; text-align: center; }
.thread-empty-icon { align-items: center; background: #f1f0ff; border-radius: 50%; color: #8b7ff0; display: inline-flex; height: 56px; justify-content: center; margin-bottom: 12px; width: 56px; }
.thread-empty-icon svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 24px; }
.thread-empty span { font-size: 26px; margin-bottom: 6px; }
.thread-empty h2 { color: #656d80; font-size: 14px; margin: 0 0 4px; }
.thread-empty p { font-size: 10px; margin: 0; }
.thread-head { align-items: center; border-bottom: 1px solid #eff0f4; display: flex; gap: 10px; padding: 14px 16px; }
.thread-head strong { display: block; font-size: 11px; }
.thread-head small { color: #909aab; font-size: 9px; }
.thread-messages { display: flex; flex: 1; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.thread-bubble { animation: bubble-in .18s ease; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.thread-bubble { background: #f2f3f7; border-radius: 16px 16px 16px 4px; box-shadow: 0 2px 6px rgba(28,35,61,.04); color: #333a4c; font-size: 11px; line-height: 1.55; max-width: 70%; padding: 10px 13px; }
.thread-bubble.mine { align-self: flex-end; background: linear-gradient(135deg, #5c51d1, #4d4bc7); border-radius: 16px 16px 4px 16px; box-shadow: 0 4px 12px rgba(92,81,209,.22); color: #fff; }
.thread-compose { align-items: center; border-top: 1px solid #eff0f4; display: flex; gap: 9px; padding: 12px 14px; }
.thread-compose input { background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 22px; flex: 1; font-size: 11px; height: 40px; outline: 0; padding: 0 16px; transition: border-color .15s, box-shadow .15s; }
.thread-compose input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.thread-compose-textarea { background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 22px; flex: 1; font: inherit; font-size: 11px; height: 40px; max-height: 40px; line-height: 40px; outline: 0; padding: 0 16px; resize: none; overflow: hidden; white-space: nowrap; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.thread-compose-textarea:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.thread-compose button { background: linear-gradient(135deg, #5c51d1, #4d4bc7); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; height: 40px; padding: 0 15px; transition: transform .12s, box-shadow .15s; box-shadow: 0 4px 12px rgba(92,81,209,.25); }
.thread-compose button:hover { transform: translateY(-1px); }
.thread-send-button { background: linear-gradient(135deg, #6a5cf0, #4d3fc9); position: relative; box-shadow: 0 3px 10px rgba(92,81,209,.32), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s ease; }
.thread-send-button svg { transform: translateX(-.5px); transition: transform .15s ease; }
.thread-send-button:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 16px rgba(92,81,209,.4), inset 0 1px 0 rgba(255,255,255,.22); filter: brightness(1.04); }
.thread-send-button:hover svg { transform: translateX(1px); }
.thread-send-button:active { transform: translateY(0) scale(.96); box-shadow: 0 2px 6px rgba(92,81,209,.3); }
.thread-send-button:disabled { opacity: .5; filter: grayscale(.3); box-shadow: none; transform: none; cursor: default; }
.no-rail .app-layout { grid-template-columns: 184px minmax(0, 1fr) !important; }
.no-rail .right-rail { display: none !important; }

/* connections */
.connections-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.connection-card { align-items: center;content-visibility: auto; contain-intrinsic-size: 0 68px;  background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 10px; padding: 14px; }
.connection-card .mini-avatar { height: 38px; width: 38px; }
.connection-card-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.connection-card-body strong { font-size: 10.5px; }
.connection-card-body small { color: #909aab; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* profile */
.profile-header { margin: 4px 0 24px; }
.profile-header-pro { border-bottom: 1px solid #eff0f4; padding: 0 0 20px; }
.profile-cover { background: linear-gradient(120deg, #6a5cf0 0%, #7d5ce0 32%, #4d84f2 100%); background-size: cover; background-position: center; border-radius: 20px; height: 128px; overflow: hidden; position: relative; }
.profile-cover::after { background: radial-gradient(420px 200px at 15% -30%, rgba(255,255,255,.35), transparent 60%); content: ""; inset: 0; position: absolute; pointer-events: none; }
.profile-cover.has-custom-cover::after { display: none; }
.cover-edit-button { align-items: center; background: rgba(15,17,23,.5); backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,.35); border-radius: 50px; bottom: 10px; color: #fff; cursor: pointer; display: inline-flex; font-size: 9.5px; font-weight: 700; gap: 6px; padding: 7px 12px; position: absolute; right: 10px; transition: background .15s; z-index: 1; }
.cover-edit-button:hover { background: rgba(15,17,23,.68); }
.cover-edit-button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
@media (max-width: 480px) { .cover-edit-button span { display: none; } .cover-edit-button { padding: 8px; } }
/* Own profile, no banner set yet: a soft placeholder the same size as a
   real cover (rather than a smaller strip) so the avatar below still
   overlaps it the same way either way — no layout jump once one is set. */
.profile-cover:not(.has-custom-cover) { align-items: center; background: linear-gradient(120deg, #eef0fb, #f5f6fc); display: flex; justify-content: center; }
.profile-cover:not(.has-custom-cover)::after { display: none; }
.profile-cover:not(.has-custom-cover) .cover-edit-button { background: #fff; border: 1.5px dashed #c7cbdc; bottom: auto; box-shadow: 0 3px 10px rgba(28,35,61,.06); color: #6a7284; position: static; right: auto; }
.profile-cover:not(.has-custom-cover) .cover-edit-button:hover { background: #f6f7fb; border-color: #b9bfd4; }
/* Someone else's profile: no banner set means no banner-sized block at all —
   only shown once that person actually adds one. */
#upCover:not(.has-custom-cover) { display: none; }
/* Bug: .profile-header-row below pulls itself up 36px to overlap the
   cover — right for the normal 128px-tall cover, but with #upCover
   collapsed to nothing above (the rule right above this one) that same
   -36px instead yanks the whole header row — avatar, name, everything —
   up and out from under the topbar, since there's no longer a cover box
   there to overlap into. Cancel the negative margin specifically when
   the cover it was meant to overlap isn't actually rendered. */
.profile-header:has(#upCover:not(.has-custom-cover)) .profile-header-row { margin-top: 0; }
/* Avatar overlaps the bottom of the cover — the familiar "banner + avatar"
   profile layout — instead of sitting in its own row below a card. */
.profile-header-row { align-items: flex-end; display: flex; justify-content: space-between; margin-top: -36px; padding: 0 2px; position: relative; z-index: 1; }
.profile-header-row-actions { align-items: center; display: flex; flex-shrink: 0; gap: 10px; padding-bottom: 8px; }
.profile-avatar { cursor: pointer; flex: 0 0 auto; font-size: 22px; height: 84px; position: relative; width: 84px; }
.mini-avatar.no-image { align-items: center; display: inline-flex; justify-content: center; }
.avatar-placeholder-icon { color: rgba(255,255,255,.94); fill: currentColor; height: 58%; width: 58%; }
.avatar-add-badge { align-items: center; background: #5748cb; border: 2.5px solid #fff; border-radius: 50%; bottom: -2px; box-shadow: 0 2px 7px rgba(28,35,61,.28); display: flex; height: 26px; justify-content: center; position: absolute; right: -2px; width: 26px; }
.avatar-add-badge svg { fill: none; height: 13px; stroke: #fff; stroke-linecap: round; stroke-width: 2.6; width: 13px; }
body[data-theme="dark"] .avatar-add-badge { border-color: #000; }
.profile-avatar.has-active-story { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #8b5cf6; }
body[data-theme="dark"] .profile-avatar.has-active-story { box-shadow: 0 0 0 3px #000000, 0 0 0 6px #8b5cf6; }
[data-avatar-handle] { -webkit-touch-callout: none; touch-action: manipulation; }
.profile-avatar.has-active-story, .up-avatar.has-active-story { touch-action: none; user-select: none; }
.profile-avatar.avatar-pressing, .up-avatar.avatar-pressing { transition: transform .55s cubic-bezier(.2,.7,.3,1); transform: scale(.94); }
.profile-header-pro .profile-avatar { border: 4px solid #fff; box-shadow: 0 6px 18px rgba(28,35,61,.14); }
/* Share icon + Edit profile — raised as solid white pills above the
   cover art so they read as one deliberate control cluster instead of
   floating flat buttons. Fixed sizes + flex-shrink:0 keep them from
   ever squeezing into each other on narrow screens. */
.profile-header-row-actions .profile-share-icon { background: #fff; border: 1px solid #eceef5; border-radius: 50%; box-shadow: 0 4px 14px rgba(28,35,61,.12); flex-shrink: 0; height: 40px; transition: transform .15s, box-shadow .15s; width: 40px; }
.profile-header-row-actions .profile-share-icon:hover { box-shadow: 0 6px 18px rgba(28,35,61,.18); transform: translateY(-1px); }
.profile-edit-btn { background: #fff; border: 1.5px solid #e6e9f0; border-radius: 50px; box-shadow: 0 4px 14px rgba(28,35,61,.08); flex-shrink: 0; font-size: 11.5px; margin-bottom: 0; padding: 10px 20px; transition: transform .15s, box-shadow .15s, border-color .15s; white-space: nowrap; }
.profile-edit-btn:hover { border-color: #d7dbea; box-shadow: 0 6px 18px rgba(28,35,61,.14); transform: translateY(-1px); }
/* Dashboard CTA — given its own brand-gradient treatment (rather than the
   plain grey secondary-action look) since it's the primary "go manage your
   work" action on a creator's own profile. */
.profile-dashboard-btn { background: linear-gradient(100deg, #3d83f5, #6853db); border: 0; border-radius: 50px; box-shadow: 0 8px 20px rgba(70,94,225,.28); color: #fff; flex-shrink: 0; font-size: 11.5px; letter-spacing: -.01em; padding: 10px 20px 10px 16px; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.profile-dashboard-btn svg { stroke: #fff; }
.profile-dashboard-btn:hover { box-shadow: 0 11px 26px rgba(70,94,225,.4); transform: translateY(-1px); }
body[data-theme="dark"] .profile-header-row-actions .profile-share-icon { background: #181818; border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .profile-edit-btn { background: #181818; border-color: rgba(255,255,255,.12); color: #f2f2f2; }
.profile-header-copy { min-width: 0; padding: 12px 2px 0; }
.profile-header-copy h1 { font-size: 22px; letter-spacing: -.05em; margin: 0; }
/* Not shown on the page body itself — the handle only appears at the top
   of the page (see .topbar-profile-handle below). */
.profile-handle { display: none; }
body[data-theme="dark"] .profile-header-pro { border-bottom-color: rgba(255,255,255,.08); }

/* Desktop / laptop pass — the profile page otherwise inherits the exact
   same compact sizing used on phones. On a wide viewport that reads as
   undersized and a little plain next to the rest of a "big app" profile
   (GitHub/LinkedIn-style), so cover, avatar, name and the quicklink row
   all get more presence — layout structure is unchanged, only scale and
   spacing. */
@media (min-width: 860px) {
  .profile-cover { border-radius: 22px; height: 190px; }
  .profile-header-row { margin-top: -48px; padding: 0 6px; }
  .profile-avatar { height: 116px; width: 116px; font-size: 30px; }
  .profile-header-pro .profile-avatar { border-width: 5px; box-shadow: 0 10px 26px rgba(28,35,61,.18); }
  .profile-header-row-actions { gap: 12px; }
  .profile-header-row-actions .profile-share-icon { height: 44px; width: 44px; }
  .profile-edit-btn, .profile-dashboard-btn { font-size: 12.5px; padding: 11px 24px; }
  .profile-dashboard-btn { padding: 11px 24px 11px 18px; }
  .profile-header-copy { padding: 20px 6px 0; }
  .profile-header-copy h1 { font-size: 30px; }
  .profile-bio { font-size: 13px; max-width: 560px; }
}

/* 📌 Featured Projects — horizontal scroll row on a profile */
.featured-projects-section { margin: 18px 0 4px; padding: 0 24px; }
.featured-projects-section.is-hidden { display: none; }
.section-heading { color: #363c4d; font-size: 13px; font-weight: 800; margin: 0 0 10px; }
.featured-projects-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.featured-projects-row::-webkit-scrollbar { display: none; }
.featured-project-card { align-items: center; background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 14px; cursor: pointer; display: flex; flex: 0 0 auto; gap: 9px; padding: 8px; position: relative; transition: transform .15s, border-color .15s; width: 168px; }
.featured-project-card:hover { border-color: #dcdfea; transform: translateY(-1px); }
.featured-project-card img { border-radius: 9px; flex: 0 0 auto; height: 42px; object-fit: cover; width: 42px; }
.featured-project-swatch { align-items: center; border-radius: 9px; color: #fff; display: flex; flex: 0 0 auto; font-size: 12px; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.featured-project-copy { display: grid; gap: 2px; min-width: 0; }
.featured-project-copy strong { color: #1a1e2e; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured-project-copy small { align-items: center; color: #8d95a6; display: flex; font-size: 9.5px; gap: 3px; }
.featured-project-copy small svg { fill: #f0b429; height: 10px; width: 10px; }
.featured-project-unpin { align-items: center; background: rgba(0,0,0,.06); border-radius: 50%; color: #6a7284; display: flex; flex: 0 0 auto; font-size: 10px; height: 18px; justify-content: center; position: absolute; right: 6px; top: 6px; width: 18px; }
.featured-project-unpin:hover { background: rgba(209,84,111,.15); color: #d1546f; }
.action-button.pin-project-button.is-pinned { color: #6a5cf0; }
body[data-theme="dark"] .section-heading { color: #f2f2f2; }
body[data-theme="dark"] .featured-project-card { background: #181818; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .featured-project-copy strong { color: #f2f2f2; }
body[data-theme="dark"] .featured-project-unpin { background: rgba(255,255,255,.1); color: #d8d8d8; }

/* 🎲 Surprise Me */
.surprise-me-button { align-items: center; background: linear-gradient(115deg, #5b4bdb, #8b5cf6 45%, #a855f7 75%, #6a5cf0); background-size: 220% 100%; border: none; border-radius: 50px; box-shadow: 0 5px 16px rgba(106,92,240,.32), inset 0 1px 0 rgba(255,255,255,.28); color: #fff; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; letter-spacing: .01em; overflow: hidden; padding: 9px 16px 9px 13px; position: relative; transition: transform .18s ease, box-shadow .25s ease, background-position .7s ease; }
.surprise-me-button::before { background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.5) 42%, transparent 58%); content: ''; inset: 0; position: absolute; transform: translateX(-130%); transition: transform .65s ease; }
.surprise-me-button:hover { background-position: 100% 0; box-shadow: 0 9px 24px rgba(106,92,240,.45), inset 0 1px 0 rgba(255,255,255,.32); transform: translateY(-1.5px); }
.surprise-me-button:hover::before { transform: translateX(130%); }
.surprise-me-button:active { transform: translateY(0) scale(.96); }
.surprise-me-icon { display: inline-flex; filter: drop-shadow(0 1px 3px rgba(0,0,0,.2)); position: relative; z-index: 1; }
.surprise-me-icon svg { fill: currentColor; height: 14px; width: 14px; }
.surprise-me-button span:last-child { position: relative; z-index: 1; }
.surprise-me-button:hover .surprise-me-icon { animation: surpriseSparkleSpin .65s ease; }
@keyframes surpriseSparkleSpin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.3); } 100% { transform: rotate(360deg) scale(1); } }
body[data-theme="dark"] .surprise-me-button { box-shadow: 0 5px 16px rgba(106,92,240,.5), inset 0 1px 0 rgba(255,255,255,.15); }
.random-project-modal { max-width: 460px; width: 92vw; }
.random-project-body { margin: 14px 0; max-height: 60vh; overflow-y: auto; }
.random-project-body .feed-card { border: none; box-shadow: none; margin: 0; padding: 0; }
.random-project-body .swipe-front { padding: 0; }
.random-project-body .swipe-actions { display: none; }
.random-project-loading { color: #6a7284; font-size: 12px; font-weight: 700; padding: 40px 0; text-align: center; }
.random-project-again { width: 100%; }
body[data-theme="dark"] .random-project-loading { color: #9a9a9a; }

/* @mentions inside post text and bios */
.mention-link { color: #6a5cf0; cursor: pointer; font-weight: 700; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
body[data-theme="dark"] .mention-link { color: #a78bfa; }
.external-link { color: #6a5cf0; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(106,92,240,.35); text-underline-offset: 2px; word-break: break-all; }
.external-link:hover { text-decoration-color: currentColor; }
body[data-theme="dark"] .external-link { color: #a78bfa; text-decoration-color: rgba(167,139,250,.35); }

/* Long-press selection highlight — shared by DM/group bubbles and channel
   posts, whichever was pressed gets a brief ring + slight lift while the
   message-actions sheet is open. */
.thread-bubble.is-selected { box-shadow: 0 0 0 2px #7868e9, 0 6px 16px rgba(28,35,61,.12); transform: scale(1.015); }
.channel-post.is-selected { box-shadow: 0 0 0 2px #7868e9, 0 10px 22px rgba(28,35,61,.1); }
body[data-theme="dark"] .thread-bubble.is-selected, body[data-theme="dark"] .channel-post.is-selected { box-shadow: 0 0 0 2px #a78bfa, 0 10px 22px rgba(1,4,9,.5); }

/* Message-actions bottom sheet */
.message-actions-sheet { max-width: 380px; }
.message-actions-list { display: grid; gap: 8px; margin-top: 14px; }
.message-action-btn { align-items: center; background: #f6f7fb; border: 1px solid #eceefa; border-radius: 13px; display: flex; gap: 12px; padding: 13px 14px; text-align: left; transition: background .15s, border-color .15s; }
.message-action-btn:hover { background: #eceefa; }
.message-action-btn svg { fill: none; flex: 0 0 auto; height: 19px; stroke: #565e70; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 19px; }
.message-action-btn span { display: grid; gap: 2px; }
.message-action-btn strong { color: #303748; font-size: 12px; }
.message-action-btn small { color: #909aab; font-size: 9.5px; }
.message-action-btn.danger { background: #fdeaee; border-color: #f7d3db; }
.message-action-btn.danger:hover { background: #fbdde5; }
.message-action-btn.danger svg { stroke: #d1546f; }
.message-action-btn.danger strong { color: #b8355a; }
body[data-theme="dark"] .message-action-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .message-action-btn:hover { background: rgba(255,255,255,.09); }
body[data-theme="dark"] .message-action-btn svg { stroke: #9a9a9a; }
body[data-theme="dark"] .message-action-btn strong { color: #f2f2f2; }

/* Pin indicator in the Messages/Groups/Channels list rows, and the
   "already pinned" tint on the Pin/Unpin action button. */
.thread-item-pin-icon { color: #c98a0a; height: 11px; margin-right: 4px; vertical-align: -1px; width: 11px; }
#threadActionPinButton.is-pinned-action { background: #fff4d6; border-color: #f3dfa3; }
#threadActionPinButton.is-pinned-action:hover { background: #fbecc4; }
#threadActionPinButton.is-pinned-action svg { fill: #c98a0a; stroke: none; }
#threadActionPinButton.is-pinned-action strong { color: #96690a; }
body[data-theme="dark"] .thread-item-pin-icon { color: #e0ab3a; }
body[data-theme="dark"] #threadActionPinButton.is-pinned-action { background: rgba(224,171,58,.16); border-color: transparent; }
body[data-theme="dark"] #threadActionPinButton.is-pinned-action strong { color: #e0ab3a; }
body[data-theme="dark"] .message-action-btn small { color: #9a9a9a; }
body[data-theme="dark"] .message-action-btn.danger { background: rgba(209,84,111,.15); border-color: rgba(209,84,111,.3); }
body[data-theme="dark"] .message-action-btn.danger:hover { background: rgba(209,84,111,.22); }
body[data-theme="dark"] .message-action-btn.danger strong { color: #ff96ac; }

/* Developer Level badge — 🟢 Builder / 🔵 Creator / 🟣 Mentor / 🟠 Expert.
   "chip" is the standalone pill above a profile's name; "inline" is the
   small tag that rides next to an author's name on feed cards/posts. */
.dev-level-line:empty { display: none; }
.dev-level-line { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }

/* Admin-assignable custom badge — small gold "shine" sweep on hover and
   a soft glow so it reads as a premium, hand-awarded mark rather than a
   flat label. */
/* Shape note: both badges below trade the old fully-round pill (border-radius:
   50px) for a faceted "cut ribbon" shape — rounded corners on three sides with
   clip-path carving a crisp triangular point out of the right edge. Because
   clip-path only ever removes area (never restores a corner border-radius
   already rounded away), the left-side corners stay smoothly curved while the
   right side comes to a clean point — an angular, badge-of-rank look instead
   of a circular tag. */
.custom-badge { align-items: center; background: linear-gradient(120deg, #ffb020, #ff7a45); border: 1px solid rgba(255,255,255,.5); border-radius: 7px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); box-shadow: 0 3px 10px rgba(255,122,69,.35), inset 0 1px 0 rgba(255,255,255,.4); color: #fff; display: inline-flex; font-size: 10px; font-weight: 800; gap: 5px; letter-spacing: .02em; overflow: hidden; padding: 5px 20px 5px 12px; position: relative; text-shadow: 0 1px 1px rgba(0,0,0,.12); white-space: nowrap; }
.custom-badge::after { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); content: ""; inset: 0; position: absolute; transform: translateX(-120%); transition: transform .6s ease; }
.custom-badge:hover::after { transform: translateX(120%); }

/* Developer level badge — gradient fill + a level-tinted glow instead of
   a flat tint, so it reads as a real earned badge rather than a plain
   status pill. */
.dev-level-badge { align-items: center; border-radius: 7px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); display: inline-flex; font-weight: 800; gap: 5px; letter-spacing: .01em; position: relative; transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.dev-level-icon { flex: 0 0 auto; height: 11px; width: 11px; }
.dev-level-inline .dev-level-icon { height: 9px; width: 9px; }
.dev-level-chip { border: 1px solid transparent; font-size: 10.5px; padding: 6px 20px 6px 10px; }
.dev-level-inline { border-radius: 5px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); font-size: 8px; margin-left: 5px; padding: 2px 13px 2px 7px; vertical-align: 1px; }
.dev-level-builder { background: linear-gradient(120deg, rgba(39,169,129,.18), rgba(39,169,129,.07)); border-color: rgba(39,169,129,.3); box-shadow: 0 2px 9px rgba(39,169,129,.16); color: #178059; }
.dev-level-creator { background: linear-gradient(120deg, rgba(47,111,237,.18), rgba(47,111,237,.07)); border-color: rgba(47,111,237,.3); box-shadow: 0 2px 9px rgba(47,111,237,.16); color: #2560d6; }
.dev-level-mentor { background: linear-gradient(120deg, rgba(114,88,220,.2), rgba(114,88,220,.08)); border-color: rgba(114,88,220,.32); box-shadow: 0 2px 9px rgba(114,88,220,.18); color: #6547cf; }
.dev-level-expert { background: linear-gradient(120deg, rgba(222,121,70,.22), rgba(222,121,70,.08)); border-color: rgba(222,121,70,.34); box-shadow: 0 2px 9px rgba(222,121,70,.2); color: #b85d2b; }
body[data-theme="dark"] .dev-level-builder { background: linear-gradient(120deg, rgba(74,222,128,.22), rgba(74,222,128,.06)); border-color: rgba(74,222,128,.28); color: #6ee7a3; }
body[data-theme="dark"] .dev-level-creator { background: linear-gradient(120deg, rgba(96,150,255,.24), rgba(96,150,255,.07)); border-color: rgba(96,150,255,.3); color: #8fb4ff; }
body[data-theme="dark"] .dev-level-mentor { background: linear-gradient(120deg, rgba(139,123,255,.24), rgba(139,123,255,.07)); border-color: rgba(139,123,255,.32); color: #a78bfa; }
body[data-theme="dark"] .dev-level-expert { background: linear-gradient(120deg, rgba(255,150,90,.24), rgba(255,150,90,.07)); border-color: rgba(255,150,90,.32); color: #ffb37a; }
.dev-level-badge[type="button"] { border-style: solid; cursor: pointer; font-family: inherit; }
.dev-level-badge[type="button"]:hover { box-shadow: 0 5px 16px rgba(28,35,61,.16); transform: translateY(-1px); }
body[data-theme="dark"] .dev-level-badge[type="button"]:hover { box-shadow: 0 5px 16px rgba(0,0,0,.4); }

/* Developer Level page */
.devlvl-hero {
  align-items: center; background: linear-gradient(165deg, #171d32 0%, #262c50 100%); border-radius: 22px;
  box-shadow: 0 20px 44px rgba(23,29,50,.22); color: #fff; display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 16px; padding: 34px 20px 26px; text-align: center;
}
.devlvl-ring-wrap { height: 120px; margin-bottom: 10px; position: relative; width: 120px; }
.devlvl-ring { height: 100%; transform: rotate(-90deg); width: 100%; }
.devlvl-ring-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 8; }
.devlvl-ring-fill { fill: none; stroke: #8b7bff; stroke-linecap: round; stroke-width: 8; transition: stroke-dashoffset .6s ease; }
.devlvl-ring-emoji { font-size: 40px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.devlvl-hero h2 { font-size: 22px; letter-spacing: -.03em; margin: 2px 0 2px; }
.devlvl-hero p { color: rgba(255,255,255,.68); font-size: 11px; font-weight: 700; margin: 0; }

.devlvl-next-card {
  background: #fff; border: 1px solid #e6e9f0; border-radius: 18px; box-shadow: 0 10px 25px rgba(28,35,61,.05);
  margin-bottom: 22px; padding: 18px 20px;
}
body[data-theme="dark"] .devlvl-next-card { background: #161616; border-color: rgba(255,255,255,.09); box-shadow: none; }
.devlvl-next-head { align-items: center; display: flex; gap: 12px; margin-bottom: 14px; }
.devlvl-next-emoji { background: rgba(106,92,240,.1); border-radius: 14px; flex: 0 0 auto; font-size: 24px; height: 46px; line-height: 46px; text-align: center; width: 46px; }
.devlvl-next-head strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.devlvl-next-maxed .devlvl-next-emoji { background: rgba(222,158,53,.14); }

.devlvl-ladder-label { color: #9099ac; font-size: 10px; font-weight: 800; letter-spacing: .06em; margin: 0 2px 10px; text-transform: uppercase; }
.devlvl-ladder { position: relative; }
.devlvl-ladder::before { background: #e6e9f0; bottom: 26px; content: ''; left: 23px; position: absolute; top: 26px; width: 2px; }
body[data-theme="dark"] .devlvl-ladder::before { background: rgba(255,255,255,.1); }
.devlvl-ladder-item { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
.devlvl-ladder-item:last-child { padding-bottom: 0; }
.devlvl-ladder-node {
  align-items: center; background: #f2f3f7; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #e6e9f0;
  color: #6a7284; display: flex; flex: 0 0 auto; font-size: 20px; height: 47px; justify-content: center;
  position: relative; width: 47px; z-index: 1;
}
body[data-theme="dark"] .devlvl-ladder-node { background: #1e1e1e; border-color: #0d0d0d; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.devlvl-ladder-item.is-completed .devlvl-ladder-node { background: #17c964; color: #fff; }
.devlvl-ladder-node svg { height: 18px; width: 18px; }
.devlvl-ladder-item.is-current .devlvl-ladder-node { background: linear-gradient(140deg, #6a5cf0, #8b7bff); box-shadow: 0 0 0 5px rgba(106,92,240,.16), 0 0 0 1px transparent; color: #fff; }
.devlvl-ladder-item.is-locked .devlvl-ladder-node { opacity: .5; }
.devlvl-ladder-body { flex: 1; min-width: 0; padding-top: 4px; }
.devlvl-ladder-item.is-locked .devlvl-ladder-body { opacity: .55; }
.devlvl-ladder-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 9px; }
.devlvl-ladder-head strong { font-size: 13.5px; letter-spacing: -.02em; }
.devlvl-ladder-status { border-radius: 50px; flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: .02em; padding: 3px 9px; text-transform: uppercase; }
.devlvl-ladder-status.is-completed { background: rgba(23,201,100,.14); color: #148a4a; }
.devlvl-ladder-status.is-current { background: #6a5cf0; color: #fff; }
.devlvl-ladder-status.is-locked { background: #f2f3f7; color: #9099ac; }
body[data-theme="dark"] .devlvl-ladder-status.is-completed { background: rgba(23,201,100,.16); color: #6ee7a3; }
body[data-theme="dark"] .devlvl-ladder-status.is-locked { background: rgba(255,255,255,.07); color: #9a9a9a; }
.devlvl-bar-row { margin-bottom: 8px; }
.devlvl-bar-row:last-child { margin-bottom: 0; }
.devlvl-bar-row label { color: #6a7284; display: block; font-size: 9.5px; font-weight: 700; margin-bottom: 4px; }
body[data-theme="dark"] .devlvl-bar-row label { color: #9a9a9a; }
.devlvl-bar { background: #eff0f4; border-radius: 50px; height: 6px; overflow: hidden; }
.devlvl-bar span { background: linear-gradient(90deg, #6a5cf0, #8b7bff); border-radius: 50px; display: block; height: 100%; }
body[data-theme="dark"] .devlvl-bar { background: rgba(255,255,255,.08); }

.profile-bio { color: #7d859a; font-size: 12px; line-height: 1.6; margin: 0 0 14px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.profile-stats { display: flex; gap: 24px; }
.profile-stats div { display: grid; gap: 1px; }
.profile-stats strong { font-size: 16px; letter-spacing: -.03em; }
.profile-stats span { color: #9099ac; font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.profile-stats-pro { align-items: center; background: transparent; border-radius: 0; gap: 0; padding: 6px 0 0; width: fit-content; }
.profile-stats-pro > div:not(.profile-stat-divider) { padding: 0 18px 0 0; }
.profile-stat-divider { align-self: center; background: #e6e9f0; height: 22px; width: 1px; }
.profile-stat-link { cursor: pointer; transition: opacity .15s; }
.profile-stat-link:hover { opacity: .7; }
.profile-projects-heading { margin: 0 0 18px; }
@media (min-width: 860px) {
  .profile-stats-pro { padding-top: 10px; }
  .profile-stats-pro > div:not(.profile-stat-divider) { padding: 0 24px 0 0; }
  .profile-stats-pro strong { font-size: 16px; }
}

@media (max-width: 820px) {
  .explore-grid, .collection-grid, .connections-grid { grid-template-columns: 1fr; }
  .messages-shell { grid-template-columns: 1fr; }
  .thread-list-col .thread-list { max-height: 220px; }
  .profile-cover { height: 96px; }
  .profile-header-row { margin-top: -28px; padding: 0 4px; }
  .profile-avatar { height: 66px; width: 66px; }
  .profile-header-copy { padding: 10px 4px 0; }
  .profile-header-row-actions { gap: 7px; padding-bottom: 2px; }
  .profile-header-row-actions .profile-share-icon { height: 34px; width: 34px; }
  .profile-edit-btn { font-size: 10.5px; padding: 8px 14px; }
  .profile-dashboard-btn { font-size: 10.5px; padding: 8px 14px 8px 12px; }
  .profile-stats-pro { width: 100%; }
  .profile-stats-pro > div:not(.profile-stat-divider) { flex: 1; padding: 0 8px; text-align: center; }
}
@media (max-width: 570px) {
  .myproject-card { flex-wrap: wrap; }
  .myproject-actions { margin-left: auto; }
  .explore-filter-bar { flex-direction: column; }
  .explore-filter-field { width: 100%; }
  .explore-filter-field select { flex: 1; }
  .up-actions { flex-wrap: wrap; margin-left: 0; margin-top: 12px; width: 100%; }
  .up-actions button { flex: 1 1 auto; justify-content: center; }
}

/* ===================== kudos + connect (renamed like/follow) ===================== */
:root { --kudos: #8b5cf6; --connect: #17c964; }
.like-button.liked { color: var(--kudos); }
.like-button.liked svg { fill: currentColor; stroke: var(--kudos); }
.like-button svg, .bookmark-button svg { transition: transform .15s; }

.follow-button, .small-follow { align-items: center; background: #eafbf1; border: 1px solid #bdeed2; border-radius: 50px; color: #1f9d55; display: inline-flex; font-size: 9px; font-weight: 800; gap: 5px; overflow: hidden; padding: 7px 11px; position: relative; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; }
.follow-button svg, .small-follow svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; transition: transform .2s cubic-bezier(.34,1.56,.64,1); width: 12px; }
/* Cool/professional hover: gradient sweep + lift + icon nudge, not just a flat color swap */
.follow-button:hover, .small-follow:hover { background: linear-gradient(135deg, #d8f5e6, #c3f0dc); border-color: #8fdcb0; box-shadow: 0 3px 10px rgba(31,157,85,.22); transform: translateY(-1.5px); }
.follow-button:hover svg, .small-follow:hover svg { transform: rotate(-8deg) scale(1.1); }
.follow-button:active, .small-follow:active { transform: translateY(0) scale(.95); }
.follow-button.connected, .small-follow.connected { background: linear-gradient(135deg, var(--connect), #14b358); border-color: var(--connect); color: #fff; }
.follow-button.connected:hover, .small-follow.connected:hover { background: linear-gradient(135deg, #14b358, #0fa04e); box-shadow: 0 3px 12px rgba(20,179,88,.35); }
.connection-card .small-follow { margin-left: auto; }
/* Diagonal shine sweep across the button on hover — the "awesome hover
   animation" — implemented as a pseudo-element so it never affects layout
   or the icon/label transitions above. */
.follow-button::after, .small-follow::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.follow-button:hover::after, .small-follow:hover::after { opacity: 1; animation: connect-shine .7s ease; }
@keyframes connect-shine { from { left: -60%; } to { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .follow-button::after, .small-follow::after { animation: none !important; opacity: 0 !important; } }

/* press / click animation for kudos + connect controls */
@keyframes press-pop { 0% { transform: scale(1); } 35% { transform: scale(.78) rotate(-3deg); } 65% { transform: scale(1.16) rotate(2deg); } 85% { transform: scale(.97); } 100% { transform: scale(1) rotate(0); } }
.press-anim { animation: press-pop .42s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .press-anim { animation: none; } }

/* ===================== messages: search, status, typing ===================== */
.thread-list-col { border-right: 1px solid #eff0f4; display: flex; flex-direction: column; min-width: 0; }
.thread-search { align-items: center; border-bottom: 1px solid #eff0f4; display: flex; gap: 8px; padding: 12px 14px; }
.thread-search svg { fill: none; flex: 0 0 auto; height: 15px; stroke: #9aa1b3; stroke-linecap: round; stroke-width: 2; width: 15px; }
.thread-search input { background: transparent; border: 0; flex: 1; font-size: 10.5px; outline: 0; }
.thread-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.thread-list-col .thread-list { border-right: 0; }
.thread-avatar-wrap { position: relative; flex: 0 0 auto; }
.thread-avatar-wrap .status-dot { background: #c7ccd9; border: 2px solid #fff; border-radius: 50%; bottom: 0; height: 11px; position: absolute; right: 0; width: 11px; }
.thread-avatar-wrap .status-dot.online { background: #17c964; }
.thread-head { align-items: center; border-left: 3px solid transparent; gap: 10px; transition: border-color .15s ease; }
.thread-head-meta { display: grid; gap: 2px; }
.thread-clear-button { margin-left: auto; }
.thread-head-meta small { color: #17c964; font-size: 9px; }
.thread-head-meta small.offline { color: #909aab; }
/* Clear, unmistakable label for which kind of chat is open — DM, group,
   or channel — so switching between them never reads as "the same
   conversation" the way undifferentiated rows in some big chat apps can. */
.thread-head-name-row { align-items: center; display: flex; gap: 7px; }
.thread-type-chip { border-radius: 5px; font-size: 8px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; text-transform: uppercase; white-space: nowrap; }
.thread-type-chip.thread-type-dm { background: #eef0ff; color: #5c51d1; }
.thread-type-chip.thread-type-group { background: #e6f9f1; color: #0f9d68; }
.thread-type-chip.thread-type-channel { background: #fff2e2; color: #b5720b; }
.thread-head-dm { border-left-color: #7258dc; }
.thread-head-group { border-left-color: #17c964; }
.thread-head-channel { border-left-color: #e8a13a; }
body[data-theme="dark"] .thread-type-chip.thread-type-dm { background: rgba(122,108,255,.2); color: #b7aefc; }
body[data-theme="dark"] .thread-type-chip.thread-type-group { background: rgba(23,201,100,.18); color: #4ade80; }
body[data-theme="dark"] .thread-type-chip.thread-type-channel { background: rgba(232,161,58,.2); color: #f0b85e; }
.typing-bubble { align-items: center; align-self: flex-start; background: #f2f3f7; border-radius: 13px 13px 13px 4px; display: inline-flex; gap: 4px; padding: 12px 15px; }
.typing-bubble i { animation: typing-dot 1s infinite ease-in-out; background: #9aa1b3; border-radius: 50%; height: 5px; width: 5px; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }
.typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.thread-timestamp { color: #b3b8c6; font: 8px "DM Mono", monospace; margin: 2px 2px 0; text-align: right; }
.thread-bubble.mine + .thread-timestamp { text-align: right; }

/* ===================== connections page ===================== */
.connections-toolbar { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.connections-search { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 9px; display: flex; flex: 1; gap: 8px; height: 39px; max-width: 320px; padding: 0 12px; }
.connections-search svg { fill: none; flex: 0 0 auto; height: 15px; stroke: #9aa1b3; stroke-linecap: round; stroke-width: 2; width: 15px; }
.connections-search input { background: transparent; border: 0; flex: 1; font-size: 10.5px; outline: 0; }
.connections-count { color: #9099ac; font: 9px "DM Mono", monospace; white-space: nowrap; }
.connection-card-actions { align-items: center; display: flex; gap: 6px; margin-left: auto; }
.message-button { background: #f2f3f7; border-radius: 50px; color: #6a7284; padding: 7px 8px; }
.message-button svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }

/* ===================== profile: tabs + settings ===================== */
.profile-tabs { margin: 4px 0 22px; width: fit-content; }
.settings-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); margin-bottom: 16px; padding: 18px 20px; }
.settings-card h3 { font-size: 12px; letter-spacing: -.03em; margin: 0 0 3px; }
.section-note { color: #9099ac; font-size: 9px; margin: 0 0 6px; }
.toggle-row { align-items: center; border-top: 1px solid #f0f1f5; display: flex; justify-content: space-between; padding: 13px 0; }
.toggle-row:first-of-type { border-top: 0; }
.toggle-copy { display: grid; gap: 2px; padding-right: 12px; }
.toggle-copy strong { color: #333a4c; font-size: 10.5px; }
.toggle-copy small { color: #9099ac; font-size: 9px; }
.toggle-switch { flex: 0 0 auto; display: inline-block; height: 22px; position: relative; width: 38px; }

/* ===================== Creator Dashboard ===================== */
.page-loading { align-items: center; display: flex; height: 200px; justify-content: center; }
.dashboard-summary-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); margin-bottom: 16px; }
.dashboard-summary-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: grid; gap: 8px; padding: 14px 16px; }
.dashboard-summary-card-icon { align-items: center; background: #f2f0fd; border-radius: 9px; color: #6a5cf0; display: flex; height: 28px; justify-content: center; width: 28px; }
.dashboard-summary-card-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 15px; }
.dashboard-summary-card-icon.dashboard-stat-kudos svg { fill: currentColor; stroke: none; }
.dashboard-summary-card strong { font-size: 18px; letter-spacing: -.03em; }
.dashboard-summary-card small { color: #9099ac; font-size: 9px; }
.dashboard-summary-card.is-untracked strong { color: #c3c8d4; }
.dashboard-summary-card.is-untracked .dashboard-summary-card-icon { background: #f2f3f7; color: #b7bdc9; }
.dashboard-section-head { align-items: center; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dashboard-range-tabs { margin: 0; }
.dashboard-chart-label { color: #565e70; font: 700 10px "DM Mono", monospace; margin: 4px 0 8px; }
.dashboard-chart-empty { color: #9099ac; font-size: 10px; padding: 20px 0; text-align: center; }
.dashboard-bar-chart { align-items: flex-end; display: flex; gap: 4px; height: 90px; }
.dashboard-bar-chart-col { align-items: flex-end; display: flex; flex: 1; flex-direction: column; height: 100%; }
.dashboard-bar-chart-bar { background: #6a5cf0; border-radius: 3px 3px 0 0; display: block; min-height: 4px; transition: filter .15s; width: 100%; }
.dashboard-bar-chart-col:hover .dashboard-bar-chart-bar { filter: brightness(1.15); }
.dashboard-bar-chart-labeled { height: 110px; }
.dashboard-bar-chart-labeled .dashboard-bar-chart-col small { color: #9099ac; font-size: 7.5px; margin-top: 4px; text-align: center; }
.dashboard-top-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dashboard-top-card { align-items: center; background: #f8f8fc; border-radius: 12px; display: flex; gap: 10px; padding: 12px; }
.dashboard-top-card-icon { align-items: center; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(28,35,61,.06); color: #6a5cf0; display: flex; flex: 0 0 auto; height: 30px; justify-content: center; width: 30px; }
.dashboard-top-card-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 15px; }
.dashboard-top-card-icon.dashboard-stat-kudos svg { fill: currentColor; stroke: none; }
.dashboard-top-card strong { display: block; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-top-card small { color: #9099ac; font-size: 8.5px; }
.dashboard-project-list { display: grid; gap: 0; }
.dashboard-project-row { align-items: center; border-top: 1px solid #f0f1f5; display: flex; gap: 10px; justify-content: space-between; padding: 12px 0; }
.dashboard-project-row:first-child { border-top: 0; }
.dashboard-project-row-title { display: grid; gap: 2px; min-width: 0; }
.dashboard-project-row-title strong { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-project-row-title small { color: #9099ac; font-size: 8.5px; }
.dashboard-project-row-stats { display: flex; flex: 0 0 auto; gap: 12px; }
.dashboard-project-row-stats span { align-items: center; color: #565e70; display: inline-flex; font: 700 9.5px "DM Mono", monospace; gap: 3px; white-space: nowrap; }
.dashboard-project-row-stats svg { fill: none; height: 11px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 11px; }
.dashboard-project-row-stats .dashboard-stat-kudos svg { fill: currentColor; stroke: none; } /* the kudos star renders solid, like everywhere else it appears */
.dashboard-creator-overview { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.dashboard-creator-overview-item { align-items: center; display: flex; gap: 10px; }
.dashboard-creator-overview-icon { align-items: center; background: #f2f0fd; border-radius: 8px; color: #6a5cf0; display: flex; flex: 0 0 auto; height: 30px; justify-content: center; width: 30px; }
.dashboard-creator-overview-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 15px; }
.dashboard-creator-overview-item strong { display: block; font-size: 10.5px; }
.dashboard-creator-overview-item small { color: #9099ac; font-size: 8.5px; }
.dashboard-tech-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-tech-tag { align-items: center; background: #f2f3f7; border-radius: 20px; color: #565e70; display: inline-flex; font-size: 9.5px; font-weight: 700; gap: 5px; padding: 5px 10px 5px 8px; }
.dashboard-tech-tag svg { fill: none; height: 10px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 10px; }
.dashboard-tech-tag small { color: #9099ac; margin-left: 1px; }
body[data-theme="dark"] .dashboard-summary-card-icon, body[data-theme="dark"] .dashboard-creator-overview-icon { background: rgba(255,255,255,.09); }
body[data-theme="dark"] .dashboard-summary-card.is-untracked .dashboard-summary-card-icon { background: rgba(255,255,255,.06); color: #6a7284; }
body[data-theme="dark"] .dashboard-top-card-icon { background: rgba(255,255,255,.08); box-shadow: none; }
body[data-theme="dark"] .dashboard-tech-tag { background: rgba(255,255,255,.06); color: #d8d8d8; }
body[data-theme="dark"] .dashboard-summary-card { background: #181818; border-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .dashboard-top-card { background: rgba(255,255,255,.04); }
body[data-theme="dark"] .dashboard-project-row { border-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .dashboard-tech-tag { background: rgba(255,255,255,.06); color: #d8d8d8; }
.toggle-switch input { height: 0; opacity: 0; width: 0; }
.toggle-slider { background: #dcdfe8; border-radius: 50px; cursor: pointer; inset: 0; position: absolute; transition: background .2s; }
.toggle-slider::before { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.22); content: ""; height: 16px; left: 3px; position: absolute; top: 3px; transition: transform .2s; width: 16px; }
.toggle-switch input:checked + .toggle-slider { background: var(--connect); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.settings-field { display: grid; gap: 5px; margin-bottom: 12px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field label { color: #565e70; font-size: 9px; font-weight: 800; }
.settings-field input { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font-size: 11px; height: 39px; outline: 0; padding: 0 11px; }
.settings-field input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.settings-actions { display: flex; gap: 10px; margin-top: 4px; }
.danger-zone { border-color: #f7d9df; }
.danger-button { background: #fdeaee; border-radius: 8px; color: #d1546f; font-size: 10px; font-weight: 800; padding: 9px 14px; }
.danger-button:hover { background: #fadde3; }
/* Password reset requests (Admin → Overview) — Approve/Deny sit close
   together and Deny is destructive & irreversible, so it gets its own
   visually-distinct danger styling (rather than the neutral grey
   secondary-action look) plus a confirmation step before it fires, so it
   can't be tapped by mistake in place of Approve. */
.password-reset-row { flex-wrap: wrap; }
.password-reset-actions { align-items: center; display: flex; gap: 8px; margin-left: auto; }
.password-reset-actions .danger-button { padding: 9px 16px; white-space: nowrap; }
@media (max-width: 460px) {
  .password-reset-row { align-items: flex-start; }
  .password-reset-actions { margin-left: 0; margin-top: 10px; width: 100%; }
  .password-reset-actions .danger-button, .password-reset-actions .primary-button { flex: 1; }
}
.logout-button { background: #f2f3f7; border-radius: 8px; color: #565e70; font-size: 10px; font-weight: 800; padding: 9px 14px; }

@media (max-width: 820px) { .messages-shell { grid-template-columns: 1fr; } .thread-list-col { border-right: 0; border-bottom: 1px solid #eff0f4; max-height: 260px; } }
@media (max-width: 570px) { .connections-toolbar { flex-wrap: wrap; } .connections-search { max-width: none; } }

/* ===================== home: big feed tabs ===================== */
.feed-heading-tabs { align-items: stretch; }
.feed-tabs { background: #fff; border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 5px; padding: 6px; width: 100%; }
.feed-tab { border-radius: 10px; color: #7d859a; flex: 1; font-size: 12.5px; font-weight: 800; padding: 13px 10px; text-align: center; transition: background .15s, color .15s; }
.feed-tab:hover { background: #f6f5ff; color: #4c3fb0; }
.feed-tab.active { background: #171d32; color: #fff; }
.feed-tab.active:hover { background: #171d32; color: #fff; }
@media (max-width: 570px) { .feed-tab { font-size: 10.5px; padding: 12px 6px; } }

/* clickable creator names that open a chat */
.profile-trigger { cursor: pointer; }
strong.profile-trigger:hover { color: #6656d9; text-decoration: underline; text-underline-offset: 3px; }

/* ===================== search modal: people ===================== */
.search-people { margin-top: 18px; }
.search-people-label { color: #a0a6b4; font-size: 9px; font-weight: 800; letter-spacing: .04em; margin: 0 0 8px; text-transform: uppercase; }
.search-person-row { align-items: center; border-top: 1px solid #f0f1f5; display: flex; gap: 10px; padding: 10px 2px; }
.search-person-row:first-child { border-top: 0; }
.search-person-info { cursor: pointer; display: flex; flex: 1; gap: 10px; align-items: center; min-width: 0; }
.search-person-text { display: grid; gap: 1px; min-width: 0; }
.search-person-text strong { color: #333a4c; font-size: 11px; }
.search-person-text small { color: #9099ac; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================== profile quicklinks ===================== */
/* Three colour-coded tiles instead of one flat bordered strip — each
   reads as its own quick action, professional without feeling like a
   single heavy grey box. */
.profile-quicklinks { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin: 0 0 20px; }
.profile-quicklink { align-items: center; background: #f8f7fd; border: 1px solid #eeecf9; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; padding: 14px 6px; text-align: center; transition: transform .15s, box-shadow .15s, border-color .15s; }
.profile-quicklink:hover { border-color: #dcd7f5; box-shadow: 0 8px 18px rgba(106,92,240,.1); transform: translateY(-2px); }
.ql-icon { align-items: center; background: #fff; border-radius: 11px; box-shadow: 0 2px 6px rgba(28,35,61,.06); display: flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }
.ql-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 15px; }
.ql-purple { color: #7649f7; }
.ql-blue { color: #2c6bd6; }
.ql-teal { color: #0d9488; }
.ql-copy { display: grid; gap: 0; min-width: 0; width: 100%; }
.ql-copy strong { color: #333a4c; font-size: 10px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-copy small { display: none; }
.ql-arrow { display: none; }
@media (max-width: 380px) { .ql-copy strong { font-size: 9px; } .profile-quicklink { padding: 12px 4px; } }
/* Desktop: same four actions read as tidy horizontal list rows (icon +
   title + subtitle + arrow) instead of small square tiles — closer to
   how a settings/quick-actions list reads in a full-size app, and gives
   the subtitle copy that's already in the markup somewhere to live. */
@media (min-width: 860px) {
  .profile-quicklinks { gap: 10px; grid-template-columns: repeat(2, 1fr); }
  .profile-quicklink { flex-direction: row; gap: 12px; padding: 16px 18px; text-align: left; }
  .ql-icon { border-radius: 12px; height: 40px; width: 40px; }
  .ql-icon svg { height: 17px; width: 17px; }
  .ql-copy { text-align: left; }
  .ql-copy strong { font-size: 11.5px; }
  .ql-copy small { color: #9099ac; display: block; font-size: 9.5px; font-weight: 600; margin-top: 2px; white-space: normal; }
  .ql-arrow { display: block; flex: 0 0 auto; height: 15px; margin-left: auto; stroke: #b6bbca; width: 15px; transition: transform .15s, stroke .15s; }
  .profile-quicklink:hover .ql-arrow { stroke: #7258dc; transform: translateX(2px); }
  body[data-theme="dark"] .ql-copy small { color: #8a8a8a; }
  body[data-theme="dark"] .profile-quicklink:hover .ql-arrow { stroke: #a78bfa; }
}
body[data-theme="dark"] .profile-quicklink { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .profile-quicklink:hover { border-color: rgba(139,123,255,.4); }
body[data-theme="dark"] .ql-icon { background: #181818; box-shadow: none; }
body[data-theme="dark"] .ql-purple { color: #a78bfa; }
body[data-theme="dark"] .ql-blue { color: #8ab4ff; }
body[data-theme="dark"] .ql-teal { color: #5eead4; }
body[data-theme="dark"] .ql-copy strong { color: #f2f2f2; }

/* ===================== messages: mobile full-screen thread ===================== */
.thread-back-button { align-items: center; background: #f2f3f7; border-radius: 8px; color: #565e70; display: none; flex: 0 0 auto; height: 32px; justify-content: center; margin-right: 4px; width: 32px; }
.thread-back-button svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 15px; }
@media (max-width: 820px) {
  .messages-shell { min-height: 0; }
  .thread-list-col { display: block; max-height: none; }
  .thread-panel { display: none; }
  .messages-shell.chat-open .thread-list-col { display: none; }
  .messages-shell.chat-open .thread-panel { display: flex; }
  .thread-back-button { display: inline-flex; }
}

/* ===================== new project page ===================== */
.new-project-page .feed-heading { align-items: center; }
.np-grid { display: grid; gap: 18px; grid-template-columns: 1fr 320px; }
.np-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 15px; box-shadow: 0 10px 25px rgba(28,35,61,.04); margin-bottom: 16px; padding: 18px 19px; }
.np-card h3 { align-items: center; display: flex; font-size: 12px; gap: 6px; letter-spacing: -.03em; margin: 0 0 13px; }

/* ------------------------------------------------------------------ */
/* Info-hint "i" buttons — a small tappable badge next to a section      */
/* title that opens a short explainer, so the form itself doesn't have  */
/* to spell everything out in a paragraph underneath.                   */
/* ------------------------------------------------------------------ */
.info-hint-btn { align-items: center; background: #eef0f7; border: none; border-radius: 50%; color: #6a7284; cursor: pointer; display: inline-flex; flex: 0 0 auto; font: 700 9.5px "DM Mono", monospace; height: 16px; justify-content: center; transition: background .15s, color .15s; width: 16px; }
.info-hint-btn:hover { background: #e1e4f0; color: #4d4bc7; }
body[data-theme="dark"] .info-hint-btn { background: rgba(255,255,255,.08); color: #9a9a9a; }
body[data-theme="dark"] .info-hint-btn:hover { background: rgba(139,123,255,.22); color: #a78bfa; }

.info-hint-modal { max-width: 360px; padding-top: 46px; position: relative; }
.info-hint-back { left: 14px; position: absolute; top: 14px; }
.info-hint-modal h2 { font-size: 16px; margin: 0 0 10px; }
.info-hint-modal p { color: #7d859a; font-size: 11.5px; line-height: 1.65; margin: 0; }
body[data-theme="dark"] .info-hint-modal p { color: #9a9a9a; }

/* ------------------------------------------------------------------ */
/* Collapsible "more options" cards on Upload a Project — only Title    */
/* and Images show open by default; everything else (description,      */
/* README, links, repo, category, tags, collaborators, cover style,     */
/* license, visibility) starts collapsed behind its header, each with   */
/* an (i) button explaining what it's for. Tap the header to expand.    */
/* ------------------------------------------------------------------ */
.np-more-options-label { margin: 2px 0 10px 2px; }
.np-card-collapsible-header { cursor: pointer; margin-bottom: 0 !important; user-select: none; }
.np-card-collapsible-body { display: grid; gap: 0; overflow: hidden; }
.np-card-collapsible:not(.is-collapsed) .np-card-collapsible-body { animation: npCardExpand .22s ease; margin-top: 13px; }
.np-card-collapsible.is-collapsed .np-card-collapsible-body { display: none; }
.np-card-chevron { align-items: center; color: #b1b6c2; display: inline-flex; margin-left: auto; transition: transform .2s ease; }
.np-card-chevron svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; width: 13px; }
.np-card-collapsible:not(.is-collapsed) .np-card-chevron { color: #7868e9; transform: rotate(180deg); }
.np-card-collapsible-header:hover .np-card-chevron { color: #7868e9; }
@keyframes npCardExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
body[data-theme="dark"] .np-card-chevron { color: #6a6a6a; }

.np-card label { color: #565e70; display: grid; font-size: 9px; font-weight: 800; gap: 6px; margin-bottom: 13px; }
.np-card label:last-of-type { margin-bottom: 0; }
.np-card input, .np-card textarea { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font: 11px/1.5 inherit; outline: 0; padding: 10px 11px; width: 100%; }
.np-card textarea { resize: vertical; }
.np-card input:focus, .np-card textarea:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.np-pill-group { display: flex; flex-wrap: wrap; gap: 7px; }
.np-pill { background: #f2f3f7; border-radius: 50px; color: #697186; font-size: 9.5px; font-weight: 800; padding: 8px 12px; }
.np-pill.active { background: #171d32; color: #fff; }
.np-pill-removable { align-items: center; background: rgba(106,92,240,.1); color: #6a5cf0; display: inline-flex; gap: 6px; }
.np-pill-removable button { color: inherit; font-size: 12px; line-height: 1; opacity: .7; }
.np-pill-removable button:hover { opacity: 1; }

/* Type-a-name member picker dropdown (New Group + add-to-existing-group) */
.member-picker-results { background: #fff; border: 1px solid #e6e9f0; border-radius: 11px; box-shadow: 0 14px 34px rgba(28,35,61,.12); margin-top: 6px; max-height: 220px; overflow-y: auto; }
.member-picker-row { align-items: center; display: flex; gap: 9px; padding: 9px 12px; text-align: left; width: 100%; }
.member-picker-row:hover { background: #f6f7fb; }
.member-picker-row .thread-item-body strong { font-size: 10.5px; }
.member-picker-row .thread-item-body small { font-size: 9px; }
.member-picker-empty { color: #a0a6b4; font-size: 10px; font-weight: 700; padding: 12px; text-align: center; }
body[data-theme="dark"] .member-picker-results { background: #181818; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .member-picker-row:hover { background: #1e1e1e; }

/* New group modal */
.new-group-modal { max-width: 420px; }
.new-group-header { align-items: center; display: flex; gap: 12px; margin-bottom: 18px; }
.new-group-icon { align-items: center; background: linear-gradient(135deg, #6a5cf0, #8b5cf6); border-radius: 14px; color: #fff; display: flex; flex: 0 0 auto; height: 44px; justify-content: center; width: 44px; }
.new-group-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 21px; }
.new-group-header h2 { margin: 2px 0 0; }
.new-group-note { align-items: center; background: rgba(106,92,240,.08); border-radius: 10px; color: #6a5cf0; display: flex; font-size: 10px; font-weight: 700; gap: 7px; margin: 14px 0; padding: 10px 12px; }
.new-group-note svg { fill: none; flex: 0 0 auto; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
.new-group-submit { width: 100%; }

/* Track (music) upload form */
.track-upload-form > .page-back-button { margin-bottom: 14px; }
.track-upload-header { align-items: center; display: flex; gap: 12px; margin-bottom: 18px; }
.track-upload-icon { align-items: center; background: linear-gradient(135deg, #d1547e, #f0b429); border-radius: 14px; color: #fff; display: flex; flex: 0 0 auto; height: 44px; justify-content: center; width: 44px; }
.track-upload-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 21px; }
.track-upload-header h2 { margin: 2px 0 0; }
.track-drop-zone { align-items: center; background: #f8f9fc; border: 1.5px dashed #d6dae5; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 26px 16px; text-align: center; transition: border-color .15s, background .15s; }
.track-drop-zone:hover { background: #f2f3f9; border-color: #b9bfd0; }
.track-drop-zone svg { fill: none; height: 22px; margin-bottom: 4px; stroke: #8b93a8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 22px; }
.track-drop-zone strong { color: #333a4c; font-size: 11.5px; }
.track-drop-zone small { color: #9199ab; font-size: 9.5px; font-weight: 700; }
.track-drop-zone.has-file { background: rgba(106,92,240,.06); border-color: #6a5cf0; border-style: solid; }
.track-drop-zone.has-file svg { stroke: #6a5cf0; }
.track-drop-zone.has-error { background: rgba(209,84,111,.06); border-color: #d1546f; border-style: solid; }
.track-field-error { color: #d1546f; font-size: 9.5px; font-weight: 700; margin: 6px 0 0; }
.track-upload-submit { width: 100%; }
body[data-theme="dark"] .track-drop-zone { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
body[data-theme="dark"] .track-drop-zone:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .track-drop-zone strong { color: #f2f2f2; }
body[data-theme="dark"] .new-group-note { background: rgba(139,123,255,.14); color: #a78bfa; }
.new-group-trigger { align-items: center; display: inline-flex; gap: 6px; }
.new-group-trigger svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }

/* Group chats */
.group-avatar-stack { display: flex; }
.group-avatar-stack .mini-avatar { border: 2px solid #fff; margin-left: -12px; }
.group-avatar-stack .mini-avatar:first-child { margin-left: 0; }
body[data-theme="dark"] .group-avatar-stack .mini-avatar { border-color: #000000; }
.thread-bubble-sender { color: #6a5cf0; display: block; font-size: 9px; font-weight: 800; margin-bottom: 2px; }
.group-photo { height: 40px; overflow: hidden; width: 40px; }
.group-photo img { height: 100%; object-fit: cover; width: 100%; }

/* Group Settings / Channel Settings — their own full page (reached via the
   info icon in the chat header, closed with a back arrow), not an inline
   sliding panel anymore. Both share this markup/styling. */
.chat-settings-page { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 32px; }
.chat-settings-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 22px; border-bottom: 1px solid #eef0f5; margin-bottom: 20px; }
.chat-settings-photo { border-radius: 50%; cursor: pointer; flex: 0 0 auto; height: 92px; position: relative; width: 92px; }
.chat-settings-photo-static { cursor: default; }
.chat-settings-photo img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.chat-settings-photo .group-photo-picker-empty { align-items: center; background: #eef0f7; border-radius: 50%; color: #8b93a8; display: flex; height: 100%; justify-content: center; width: 100%; }
.chat-settings-photo .group-photo-picker-empty svg { fill: none; height: 30px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 30px; }
.chat-settings-photo .group-photo-picker-edit { align-items: center; background: rgba(0,0,0,.55); border-radius: 50%; color: #fff; display: flex; font-size: 8px; font-weight: 800; height: 100%; justify-content: center; left: 0; line-height: 1.2; opacity: 0; position: absolute; text-align: center; top: 0; transition: opacity .15s; width: 100%; }
.chat-settings-photo:hover .group-photo-picker-edit { opacity: 1; }
.chat-settings-photo .group-avatar-stack { justify-content: center; width: 100%; }
.chat-settings-photo .group-avatar-stack .mini-avatar { height: 46px; width: 46px; }
.chat-settings-name, .chat-settings-name-input { color: #171d32; font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 0; text-align: center; }
.chat-settings-name-input { background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 10px; padding: 9px 14px; width: 100%; max-width: 260px; }
.chat-settings-meta-row { align-items: center; color: #909aab; display: flex; flex-wrap: wrap; font-size: 10px; font-weight: 700; gap: 14px; justify-content: center; margin-top: 10px; }
.chat-settings-meta-row span { align-items: center; display: inline-flex; gap: 5px; }
.chat-settings-meta-row svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 13px; }
.chat-settings-created-by { color: #7d859a; font-size: 10px; margin: 8px 0 0; }
.chat-settings-created-by strong { color: #4b5568; }
.chat-settings-description { color: #565e70; font-size: 11px; line-height: 1.6; margin: 12px 0 0; max-width: 320px; }
.chat-settings-page .group-settings-save { margin-top: 16px; min-height: 40px; padding: 0 22px; width: auto; }
.chat-settings-section-title { color: #171d32; font-size: 12px; margin: 0 0 10px; }
.chat-settings-member-list { display: grid; gap: 2px; margin-bottom: 16px; }
.chat-settings-member-row { background: #f8f9fc; border-radius: 12px; padding: 11px 12px; }
.chat-settings-role-tag { background: #eef0f7; border-radius: 50px; color: #6a7284; flex: 0 0 auto; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; padding: 4px 10px; text-transform: uppercase; }
.chat-settings-role-tag.admin { background: linear-gradient(120deg, #6a5cf0, #8b5cf6); color: #fff; }
.chat-settings-danger-zone { border-top: 1px solid #eef0f5; margin-top: 22px; padding-top: 18px; }
.chat-settings-danger-zone .danger-button { width: 100%; }
body[data-theme="dark"] .chat-settings-hero { border-bottom-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .chat-settings-photo .group-photo-picker-empty { background: #1e1e1e; color: #d8d8d8; }
body[data-theme="dark"] .chat-settings-name, body[data-theme="dark"] .chat-settings-name-input { color: #f2f2f2; }
body[data-theme="dark"] .chat-settings-name-input { background: #181818; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .chat-settings-created-by strong { color: #d8d8d8; }
body[data-theme="dark"] .chat-settings-description { color: #9a9a9a; }
body[data-theme="dark"] .chat-settings-section-title { color: #f2f2f2; }
body[data-theme="dark"] .chat-settings-member-row { background: rgba(255,255,255,.05); }
body[data-theme="dark"] .chat-settings-role-tag { background: rgba(255,255,255,.08); color: #9a9a9a; }
body[data-theme="dark"] .chat-settings-danger-zone { border-top-color: rgba(255,255,255,.08); }

/* Admin: database usage */
.db-usage-bar-wrap { align-items: center; display: flex; gap: 14px; }
.db-usage-bar { background: #eef0f5; border-radius: 50px; flex: 1; height: 10px; overflow: hidden; }
.db-usage-bar span { background: linear-gradient(90deg, #6a5cf0, #8b5cf6); border-radius: 50px; display: block; height: 100%; transition: width .3s; }
.db-usage-bar span.is-warning { background: linear-gradient(90deg, #f0b429, #de7946); }
.db-usage-bar span.is-danger { background: linear-gradient(90deg, #d1546f, #c23a56); }
.db-usage-label { flex: 0 0 auto; text-align: right; }
.db-usage-label strong { color: #1a1e2e; display: block; font-size: 16px; }
.db-usage-label small { color: #8d95a6; font-size: 9px; font-weight: 700; }
.db-usage-tables { display: grid; gap: 6px; margin-top: 14px; }
.db-usage-table-row { align-items: center; background: #f8f9fc; border-radius: 8px; display: flex; font-size: 10px; font-weight: 700; justify-content: space-between; padding: 7px 10px; }
.db-usage-table-row span { color: #4b5568; }
.db-usage-table-row small { color: #9199ab; }
body[data-theme="dark"] .db-usage-label strong { color: #f2f2f2; }
body[data-theme="dark"] .db-usage-bar { background: rgba(255,255,255,.08); }
body[data-theme="dark"] .db-usage-table-row { background: rgba(255,255,255,.05); }
body[data-theme="dark"] .db-usage-table-row span { color: #d8d8d8; }

/* Admin: group chat viewer (read-only moderation) */
.admin-group-viewer-modal { max-width: 480px; }
.admin-group-viewer-members { display: flex; gap: 6px; margin: 12px 0; overflow-x: auto; }
.admin-group-viewer-members .mini-avatar { flex: 0 0 auto; height: 32px; width: 32px; }
.admin-group-viewer-messages { max-height: 50vh; overflow-y: auto; }
.admin-group-viewer-msg { border-bottom: 1px solid #eef0f5; padding: 9px 0; }
.admin-group-viewer-msg strong { color: #6a5cf0; display: block; font-size: 9.5px; font-weight: 800; }
.admin-group-viewer-msg span { color: #333a4c; display: block; font-size: 11px; margin: 2px 0; }
.admin-group-viewer-msg small { color: #a0a6b4; font-size: 8.5px; font-weight: 700; }
body[data-theme="dark"] .admin-group-viewer-msg { border-bottom-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .admin-group-viewer-msg span { color: #d8d8d8; }
.np-swatch-group { display: flex; gap: 8px; margin-bottom: 13px; }
.np-swatch { border-radius: 9px; height: 30px; width: 30px; box-shadow: inset 0 0 0 2px transparent; }
.np-swatch.active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #171d32; }
.np-preview-thumb { align-items: center; border-radius: 12px; color: #fff; display: flex; font: 800 15px "DM Mono", monospace; height: 70px; justify-content: center; background: linear-gradient(135deg,#4b3fc9,#7649f7); }
.np-submit { margin-top: 2px; width: 100%; }
@media (max-width: 900px) { .np-grid { grid-template-columns: 1fr; } }

/* ===================== edit project page ===================== */
.edit-project-page .new-project-form { margin-bottom: 88px; }
.edit-project-preview-card h3 { margin-bottom: 11px; }
.edit-project-preview { background: linear-gradient(135deg, #f7f6ff, #f1f4ff); border: 1px solid #e6e2fb; border-radius: 12px; display: grid; gap: 5px; padding: 16px; }
.edit-project-preview strong { color: #262c3e; font-size: 14px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-project-preview small { color: #767e93; font-size: 11px; line-height: 1.5; }
body[data-theme="dark"] .edit-project-preview { background: linear-gradient(135deg, #211c33, #1c2033); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .edit-project-preview strong { color: #f1f1f5; }
.collab-manage-row { align-items: center; display: flex; gap: -6px; }
.collab-manage-row .thread-item-body { margin-left: 8px; }
.edit-project-save-bar { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-top: 1px solid #e6e9f0; bottom: 0; box-shadow: 0 -8px 24px rgba(20,24,42,.06); display: flex; gap: 10px; justify-content: flex-end; left: 0; padding: 14px 24px; position: fixed; right: 0; z-index: 40; }
.edit-project-save-bar .primary-button { min-width: 150px; padding: 0 22px; }
.edit-project-save-bar .secondary-action { min-width: 100px; }
.edit-project-save-bar .primary-button.is-loading { opacity: .72; pointer-events: none; }
.edit-project-save-bar .primary-button.is-loading span { position: relative; }
.edit-project-save-bar .primary-button.is-loading span::after { animation: edit-project-spin .7s linear infinite; border: 2px solid rgba(255,255,255,.4); border-radius: 50%; border-top-color: #fff; content: ""; display: inline-block; height: 12px; margin-left: 8px; vertical-align: -2px; width: 12px; }
@keyframes edit-project-spin { to { transform: rotate(360deg); } }
body[data-theme="dark"] .edit-project-save-bar { background: rgba(18,18,22,.9); border-top-color: rgba(255,255,255,.08); }
@media (max-width: 900px) { .edit-project-save-bar { padding: 12px 16px; } .edit-project-save-bar .secondary-action { display: none; } .edit-project-save-bar .primary-button { flex: 1; } }

/* ===================== back button (search + user profile) ===================== */
.feed-heading-title-row { align-items: center; display: flex; gap: 12px; }
.feed-heading-title-row .page-back-button { margin: 0; }
.page-back-button { align-items: center; background: #f2f3f7; border-radius: 10px; color: #565e70; display: inline-flex; flex: 0 0 auto; height: 40px; justify-content: center; width: 40px; }
.page-back-button svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 17px; }
.page-back-button:hover { background: #e7e8ee; }
.up-back-button { margin-bottom: 16px; }

/* ===================== search page (YouTube-style, full page) ===================== */
.search-page-head { align-items: center; display: flex; gap: 12px; margin-bottom: 18px; }
.search-page-input { flex: 1; height: 50px; margin-top: 0; }
.search-people { margin-top: 22px; }
.search-people-label { color: #a0a6b4; font-size: 9px; font-weight: 800; letter-spacing: .04em; margin: 0 0 8px; text-transform: uppercase; }
.search-person-row { align-items: center; border-top: 1px solid #f0f1f5; display: flex; gap: 10px; padding: 11px 2px; }
.search-person-row:first-child { border-top: 0; }
.search-person-info { cursor: pointer; display: flex; flex: 1; gap: 10px; align-items: center; min-width: 0; }
.search-person-text { display: grid; gap: 1px; min-width: 0; }
.search-person-text strong { color: #333a4c; font-size: 11px; }
.search-person-text small { color: #9099ac; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-projects { margin-top: 22px; }
.search-project-row { align-items: center;content-visibility: auto; contain-intrinsic-size: 0 66px;  background: #fff; border: 1px solid #e6e9f0; border-radius: 13px; box-shadow: 0 8px 20px rgba(28,35,61,.03); display: flex; gap: 12px; margin-bottom: 10px; padding: 13px 14px; }
.search-project-thumb { align-items: center; border-radius: 9px; color: #fff; display: flex; flex: 0 0 auto; font: 800 12px "DM Mono", monospace; height: 46px; justify-content: center; width: 46px; }
.search-project-body { flex: 1; min-width: 0; }
.search-project-body h3 { font-size: 12px; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-project-body p { color: #9099ac; font-size: 9.5px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-project-creator { color: #6656d9; cursor: pointer; }
.search-project-creator:hover { text-decoration: underline; }

/* ===================== user profile (public view of any creator) ===================== */
.up-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.up-message-button { height: 39px; width: 39px; }
.message-button.is-disabled { cursor: not-allowed; opacity: .45; }
.up-message-button svg { height: 15px; width: 15px; }
.up-share-button { height: 39px; width: 39px; }
.up-share-button svg { height: 15px; width: 15px; }

/* admin-editable app name + icon */
.brand-mark.has-image { padding: 0; overflow: hidden; }
.brand-mark img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.avatar-upload-row { align-items: center; display: flex; gap: 12px; }
.mini-avatar.has-image img.avatar-img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }

/* clickable announcement notifications */
.notification-row.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; }
.notification-row.clickable:hover { border-color: #dcdfea; box-shadow: 0 12px 26px rgba(28,35,61,.09); transform: translateY(-2px); }
.announcement-row .notification-icon { background: #f0efff; border-radius: 50%; height: 32px; width: 32px; align-items: center; display: inline-flex; justify-content: center; font-size: 14px; }

/* double-tap kudos burst — a glow disc, an expanding ring, flying
   sparks, and the star itself, all layered at the tap point. */
.kudos-burst { align-items: center; color: #8b5cf6; display: flex; height: 0; justify-content: center; pointer-events: none; position: fixed; width: 0; z-index: 600; }
.kudos-burst-glow { background: radial-gradient(circle, rgba(139,92,246,.55) 0%, rgba(139,92,246,0) 70%); border-radius: 50%; height: 140px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.3); transition: transform .6s ease, opacity .6s ease; width: 140px; }
.kudos-burst-ring { border: 2.5px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 0 1px rgba(139,92,246,.35); height: 40px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.3); transition: transform .55s cubic-bezier(.2,.8,.3,1), opacity .55s ease; width: 40px; }
.kudos-burst-star { display: inline-flex; filter: drop-shadow(0 6px 18px rgba(139,92,246,.5)); opacity: 0; transform: scale(.3) rotate(-35deg); transition: transform .55s cubic-bezier(.2,1.6,.35,1), opacity .4s ease; }
.kudos-burst-star svg { fill: currentColor; height: 68px; width: 68px; }
.kudos-burst-sparks { height: 0; left: 50%; position: absolute; top: 50%; width: 0; }
.kudos-burst-spark { background: linear-gradient(180deg, #c8b3ff, #8b5cf6); border-radius: 2px; height: 8px; left: 0; opacity: 0; position: absolute; top: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(.5); transition: transform .6s cubic-bezier(.15,.8,.3,1), opacity .6s ease; width: 3px; }

.kudos-burst.show .kudos-burst-glow { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 0s; }
.kudos-burst.show .kudos-burst-ring { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
.kudos-burst.show .kudos-burst-star { opacity: 1; transform: scale(1) rotate(0deg); }
.kudos-burst.show .kudos-burst-spark { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-52px) scale(1); }
.kudos-burst.show { animation: kudosBurstFade .9s ease forwards; }
@keyframes kudosBurstFade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
body[data-theme="dark"] .kudos-burst { color: #a78bfa; }

/* ===================== confirm dialog ===================== */
.confirm-modal { max-width: 420px; }
.confirm-actions { display: flex; gap: 10px; margin-top: 22px; }
.confirm-actions button { flex: 1; justify-content: center; padding: 12px; }
.confirm-discard-button { font-size: 11px; }

/* ===================== connections: red "new post" badge + clickable thumbnail ===================== */
.connection-avatar-wrap { cursor: pointer; flex: 0 0 auto; position: relative; }
.connection-avatar-wrap .new-post-dot { background: #ef4444; border: 2px solid #fff; border-radius: 50%; bottom: -1px; box-shadow: 0 0 0 1px rgba(239,68,68,.35); height: 12px; position: absolute; right: -1px; width: 12px; }

/* ===================== dynamic feed card (DB-backed posts) ===================== */
.feed-card { content-visibility: auto; contain-intrinsic-size: 0 420px; margin-bottom: 16px; }
.feed-card .project-author { margin-bottom: 12px; }
.feed-card-title-row { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.feed-card-title-row h2 { flex: 1; font-size: 16px; letter-spacing: -.04em; line-height: 1.25; margin: 0; min-width: 0; }
.feed-card-title-row .license-badge { flex: 0 0 auto; margin-top: 2px; }
.feed-card-swatch-full { border-radius: 12px; font-size: 26px; height: 200px; margin-bottom: 12px; width: 100%; }
/* Persona cover placeholder — a soft translucent circle "badge" centered
   on the swatch, holding one of the 4 silhouette icons. Same treatment
   Spotify/Notion use for a colored default cover instead of plain text. */
.feed-card-cover-persona { align-items: center; display: flex; justify-content: center; overflow: hidden; position: relative; }
.feed-card-cover-persona::after { background: radial-gradient(280px 160px at 20% -10%, rgba(255,255,255,.28), transparent 60%); content: ""; inset: 0; position: absolute; }
.cover-persona-badge { align-items: center; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 10px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.25); display: flex; height: 112px; justify-content: center; position: relative; width: 112px; z-index: 1; }
.cover-persona-badge svg { color: #fff; filter: drop-shadow(0 2px 5px rgba(0,0,0,.18)); height: 66px; width: 66px; }
.cover-persona-badge .persona-laptop { color: rgba(18,20,32,.55); }
@media (max-width: 480px) { .cover-persona-badge { height: 92px; width: 92px; } .cover-persona-badge svg { height: 54px; width: 54px; } }
.feed-card-body { display: flex; gap: 14px; margin-bottom: 12px; }
.feed-card-swatch { align-items: center; border-radius: 12px; color: #fff; display: flex; flex: 0 0 auto; font: 800 15px "DM Mono", monospace; height: 72px; justify-content: center; width: 72px; }
.feed-card-copy { flex: 1; min-width: 0; }
.feed-card-copy h2 { font-size: 16px; letter-spacing: -.04em; line-height: 1.25; margin: 0 0 5px; }
.feed-card-copy p { color: #6c7488; font-size: 11px; line-height: 1.55; margin: 0 0 9px; }
.feed-card-views { color: #a3a9b7; font: 9px "DM Mono", monospace; }
.feed-card-main { display: flex; gap: 8px; }
.feed-card-content { flex: 1; min-width: 0; }
.project-actions.feed-card-rail { align-items: center; border-left: 1px solid #eff0f4; border-top: 0; flex: 0 0 auto; flex-direction: column; gap: 18px; justify-content: flex-start; padding: 2px 0 6px 12px; }
.feed-card-rail > div { align-items: center; flex-direction: column; gap: 14px; }
.feed-card-rail .action-button { flex-direction: column; gap: 3px; padding: 4px; }
.feed-card-rail .action-button span { font-size: 8px; }
.feed-card-rail .feed-card-views { align-items: center; display: flex; flex-direction: column; font-size: 10px; gap: 1px; }
.feed-card-rail .feed-card-views small { color: #c1c6d2; font-size: 7px; text-transform: uppercase; }
.feed-card-draft-pill { background: #fef3e2; border-radius: 50px; color: #b5720b; font: 700 8px "DM Mono", monospace; margin-left: 8px; padding: 3px 8px; vertical-align: middle; }
.feed-card-empty-page { grid-column: 1 / -1; }

/* Bigger, more tappable Connect button inside each post — request: "make the connect button bigger in each post" */
.connect-btn-lg { border-radius: 9px; font-size: 11px; padding: 10px 15px; }
.connect-btn-lg svg { height: 14px; width: 14px; }

/* uploaded file name shown under the drop zone */
.np-filename { align-items: center; background: #f6f5ff; border-radius: 8px; color: #4c3fb0; display: flex; font-size: 10px; font-weight: 700; gap: 7px; margin-top: 9px; padding: 9px 11px; }
.np-filename::before { content: "📎"; }

/* chat view count */
.thread-view-count { color: #a3a9b7; font: 9px "DM Mono", monospace; margin-left: auto; padding-right: 4px; }
.thread-save-button { background: #f2f3f7; border-radius: 8px; color: #565e70; height: 34px; margin-left: 8px; width: 34px; }
.thread-save-button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
.thread-save-button.saved { background: #f1edff; color: #7649f7; }
.thread-save-button.saved svg { fill: currentColor; }

/* collection items (projects + saved chats) */
.collection-items { border-top: 1px solid #f0f1f5; display: grid; gap: 2px; margin-top: 10px; padding-top: 10px; }
.collection-item-row { align-items: center; border-radius: 8px; display: flex; gap: 8px; padding: 6px 4px; }
.collection-item-row:hover { background: #f8f8fc; }
.collection-item-row.chat-item { cursor: pointer; }
.collection-item-icon { align-items: center; border-radius: 7px; display: flex; flex: 0 0 auto; font-size: 11px; height: 26px; justify-content: center; width: 26px; }
.collection-item-icon.chat { background: #eafbf1; color: #17c964; }
.collection-item-icon.project { background: #f1edff; color: #7649f7; }
.collection-item-text { display: grid; flex: 1; gap: 0; min-width: 0; }
.collection-item-text strong { color: #333a4c; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-item-text small { color: #9099ac; font-size: 8.5px; }
.collection-item-remove { color: #c1c5d1; flex: 0 0 auto; font-size: 14px; line-height: 1; padding: 4px; }
.collection-item-remove:hover { color: #d1546f; }

/* auth screen banner for signup/signin errors */
.auth-error { background: #fdeaee; border-radius: 9px; color: #c23a56; font-size: 10.5px; font-weight: 700; margin: 12px 0 0; padding: 10px 13px; }
.auth-error.is-hidden { display: none; }

/* ===================== admin ===================== */
.avatar-admin { background: linear-gradient(135deg, #2c2f3a, #0f1117); }
.admin-user-row { align-items: center;content-visibility: auto; contain-intrinsic-size: 0 66px;  background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 12px; margin-bottom: 10px; padding: 13px 15px; }
.admin-user-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.admin-user-body strong { align-items: center; color: #333a4c; display: flex; font-size: 11px; gap: 6px; }
.admin-user-body small { color: #9099ac; font-size: 9px; }
.admin-user-email { color: #b0b6c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-badge { background: #171d32; border-radius: 50px; color: #fff; font: 700 8px "DM Mono", monospace; padding: 3px 8px; }
.admin-user-stats { color: #a3a9b7; flex: 0 0 auto; font: 9px "DM Mono", monospace; line-height: 1.6; text-align: right; white-space: nowrap; }
.admin-delete-user-button { background: #fdeaee; border-radius: 8px; color: #d1546f; font-size: 10px; font-weight: 800; padding: 9px 13px; }
.admin-delete-project-button { background: #fdeaee; border-radius: 8px; color: #d1546f; }
.admin-delete-project-button svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }

/* ===================== avatar images (replace initials when set) ===================== */
.avatar-img { border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%; }
.mini-avatar.has-image { background: none; overflow: hidden; padding: 0; }

/* ===================== post image + zip/github/preview buttons ===================== */
.feed-card-image { border-radius: 12px; display: block; height: 200px; margin-bottom: 12px; object-fit: cover; transition: transform .35s ease; width: 100%; }
.feed-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.feed-card-links-outside { border-top: 1px solid #eff0f4; margin-top: 12px; padding-top: 12px; }
.feed-card-link-button { align-items: center; background: #f2f3f7; border-radius: 8px; color: #4a5165; display: inline-flex; font-size: 9.5px; font-weight: 800; gap: 6px; padding: 8px 12px; }
.feed-card-link-button:hover { background: #e7e8ee; }
.feed-card-link-button svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 13px; }
.feed-card-link-button.zip-button { background: #eafbf1; color: #17924f; }
.feed-card-link-button.zip-button:hover { background: #d9f5e6; }
.feed-card-link-button.github-button { background: #171d32; color: #fff; }
.feed-card-link-button.github-button:hover { background: #262e4a; }

/* image preview + filename chip in New Project form */
.np-image-preview { border-radius: 10px; display: block; height: 120px; margin-top: 9px; object-fit: cover; width: 100%; }

/* ===================== search page: trending, people-only ===================== */
.search-suggestions span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #a0a6b4; text-transform: uppercase; margin: 0 0 9px; width: 100%; }
.search-trend-chip { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 50px; color: #4a5165; display: inline-flex; font-size: 10px; font-weight: 700; gap: 6px; padding: 8px 13px; }
.search-trend-chip:hover { background: #f6f5ff; border-color: #cfc9ef; }
.search-trend-chip small { color: #a0a6b4; font-family: "DM Mono", monospace; font-weight: 700; }

/* ===================== notifications page ===================== */
.notification-row { align-items: flex-start; animation: notif-in .25s ease; content-visibility: auto; contain-intrinsic-size: 0 72px; background: #fff; border: 1px solid #eef0f5; border-radius: 14px; box-shadow: 0 6px 18px rgba(28,35,61,.04); display: flex; gap: 12px; margin-bottom: 8px; padding: 13px 14px; position: relative; }
@keyframes notif-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.notification-row.unread { background: linear-gradient(180deg, #faf9ff, #fff 65%); border-color: #e4dfff; box-shadow: 0 8px 22px rgba(106,92,240,.07); }
.notification-row.unread::before { background: linear-gradient(180deg, #6a5cf0, #8b5cf6); border-radius: 3px; bottom: 10px; content: ''; left: 0; position: absolute; top: 10px; width: 3px; }
.notification-row.unread .notification-body { padding-left: 4px; }
.notification-row .mini-avatar { flex: 0 0 auto; }
.notification-icon { align-items: center; background: #f2f3f7; border-radius: 50%; color: #6a7284; display: flex; flex: 0 0 auto; font-size: 13px; height: 34px; justify-content: center; width: 34px; }
.notification-row.unread .notification-icon { background: rgba(106,92,240,.12); color: #6a5cf0; }
.notification-body { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.notification-body p { color: #333a4c; font-size: 11.5px; font-weight: 500; line-height: 1.5; margin: 0 0 4px; overflow-wrap: break-word; word-break: break-word; }
.notification-body small { color: #a0a6b4; font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.notification-dot { background: #7649f7; border-radius: 50%; flex: 0 0 auto; height: 8px; margin-top: 5px; width: 8px; }
.icon-button b#notificationBadge { align-items: center; background: #ef4444; border: 2px solid #fff; border-radius: 50px; color: #fff; display: flex; font: 700 8px "DM Mono", monospace; height: 16px; justify-content: center; min-width: 16px; padding: 0 3px; position: absolute; right: -2px; top: -2px; }

/* ===================== new project: multi-image strip ===================== */
.np-image-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.np-image-thumb { border-radius: 9px; height: 72px; overflow: hidden; position: relative; width: 72px; }
.np-image-thumb img { display: block; height: 100%; object-fit: cover; width: 100%; }
.np-image-thumb .np-image-remove { align-items: center; background: rgba(15,17,23,.72); border-radius: 50%; color: #fff; display: flex; font-size: 12px; height: 19px; justify-content: center; position: absolute; right: 4px; top: 4px; }
.np-image-thumb.np-image-thumb-pending { opacity: .6; }
.np-image-thumb .np-image-thumb-badge { background: rgba(15,17,23,.72); border-radius: 5px; bottom: 4px; color: #fff; font-size: 8px; font-weight: 700; left: 4px; letter-spacing: .02em; padding: 1px 5px; position: absolute; text-transform: uppercase; }
.np-image-add-label { align-items: center; background: #f6f5ff; border: 1px dashed #cfc9ef; border-radius: 9px; color: #6a5cf0; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 700; height: 72px; justify-content: center; margin-top: 10px; padding: 0 14px; }
.np-image-add-label:hover { background: #efeaff; }
.np-license-group .np-pill { flex: 1; text-align: center; }
.np-license-explainer { background: #f6f7fb; border-radius: 10px; color: #5a6272; font-size: 10.5px; line-height: 1.55; margin: 10px 0 6px; padding: 10px 12px; }
.np-license-explainer strong { color: #333a4c; }

/* ===================== post: multiple images, count badge ===================== */
.feed-card-image-wrap { cursor: pointer; margin-bottom: 12px; overflow: hidden; position: relative; border-radius: 12px; }
.feed-card-image-wrap .feed-card-image { margin-bottom: 0; }
.feed-card-image-wrap:hover .feed-card-image { transform: scale(1.03); }
.feed-card-image-count { align-items: center; background: rgba(15,17,23,.68); border-radius: 50px; color: #fff; display: inline-flex; font: 700 9.5px "DM Mono", monospace; gap: 5px; padding: 5px 10px; position: absolute; right: 10px; top: 10px; }
.feed-card-image-count svg { fill: none; height: 11px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 11px; }
.feed-card-license { color: #9099ac; }

/* ===================== fullscreen swipeable lightbox (Instagram-style) ===================== */
.lightbox-layer { align-items: center; background: rgba(10,11,16,.94); display: flex; inset: 0; justify-content: center; position: fixed; touch-action: pan-y; z-index: 300; }
.lightbox-stage { align-items: center; display: flex; height: 100%; justify-content: center; max-width: 900px; overflow: hidden; width: 100%; }
.lightbox-stage img { max-height: 90vh; max-width: 92vw; object-fit: contain; user-select: none; }

/* Avatar "view full size" — same viewer, circular frame instead of the
   normal rectangular one, and no prev/next/counter since it's a single photo. */
.lightbox-layer.is-avatar-view .lightbox-stage img { aspect-ratio: 1 / 1; border-radius: 50%; height: min(70vw, 380px); object-fit: cover; width: min(70vw, 380px); }
.lightbox-layer.is-avatar-view .lightbox-nav, .lightbox-layer.is-avatar-view .lightbox-counter { display: none; }
.lightbox-close { background: rgba(255,255,255,.12); border-radius: 50%; color: #fff; font-size: 22px; height: 42px; line-height: 1; position: absolute; right: 18px; top: 18px; width: 42px; }
.lightbox-nav { align-items: center; background: rgba(255,255,255,.12); border-radius: 50%; color: #fff; display: flex; height: 46px; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 46px; }
.lightbox-nav:hover { background: rgba(255,255,255,.22); }
.lightbox-nav svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; width: 18px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-counter { background: rgba(255,255,255,.12); border-radius: 50px; bottom: 22px; color: #fff; font: 700 10px "DM Mono", monospace; left: 50%; padding: 7px 13px; position: absolute; transform: translateX(-50%); }
@media (max-width: 570px) { .lightbox-nav { height: 38px; width: 38px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }

/* ===================== share modal ===================== */
.share-preview { border-radius: 12px; margin: 10px 0 4px; overflow: hidden; max-height: 180px; }
.share-preview img { display: block; height: 100%; max-height: 180px; object-fit: cover; width: 100%; }
.share-options { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 4px; }
.share-options { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.share-option { align-items: center; background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 11px; color: #363c4d; display: flex; font-size: 10.5px; font-weight: 700; gap: 10px; padding: 11px 12px; transition: background .15s, border-color .15s, transform .15s; }
.share-option:hover { background: #eef0f7; border-color: #dcdfea; transform: translateY(-1px); }
.share-option[data-share-target="copy"] { grid-column: 1 / -1; }
.share-icon { align-items: center; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 800; height: 28px; justify-content: center; width: 28px; }
.share-icon svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 15px; }
.share-icon-copy { background: #6a6f80; }
.share-icon-more { background: #6a6f80; }
.share-option[data-share-target="more"] { grid-column: 1 / -1; }
.share-icon-x { background: #0f1117; font-size: 13px; }
.share-icon-linkedin { background: #0a66c2; font-size: 11px; }
.share-icon-whatsapp { background: #25d366; }
.share-icon-reddit { background: #ff4500; }
.share-icon-email { background: #7258dc; }

/* ===================== trending stacks (real data) ===================== */
.trending-card ol { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.trending-stack-row { align-items: center; border-radius: 10px; cursor: pointer; display: flex; gap: 10px; padding: 8px 4px; }
.trending-stack-row:hover { background: #f8f8fc; }
.trending-stack-rank { color: #c1c5d1; flex: 0 0 auto; font: 700 10px "DM Mono", monospace; width: 16px; }
.trending-stack-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.trending-stack-body strong { color: #333a4c; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trending-stack-body small { color: #9099ac; font-size: 8.5px; }
.trending-stack-score { color: #7649f7; flex: 0 0 auto; font: 700 9px "DM Mono", monospace; }

/* ===================== messages: polished bubbles with timestamps ===================== */
.thread-bubble-time { color: #99a0b3; display: block; font-size: 8.5px; margin-top: 4px; }
.thread-bubble.mine .thread-bubble-time { color: rgba(255,255,255,.55); text-align: right; }
.thread-head-meta { cursor: pointer; }
.thread-empty-messages { align-items: center; color: #a2a9b8; display: flex; flex: 1; flex-direction: column; justify-content: center; text-align: center; }
.thread-empty-messages span { font-size: 22px; margin-bottom: 6px; }
.thread-empty-messages p { font-size: 10px; margin: 0; }
.thread-compose button { align-items: center; display: flex; justify-content: center; padding: 0; width: 40px; }
.thread-compose button svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 15px; }

/* ===================== bigger, clearer action buttons on every post ===================== */
.project-actions .action-button { border-radius: 9px; font-size: 10.5px; gap: 6px; padding: 11px 14px; }
.project-actions .action-button svg { height: 19px; width: 19px; }
.project-actions .connect-btn-lg { margin-left: 6px; }

/* ===================== description: collapse long text with "show more" ===================== */
.feed-card-summary { margin: 6px 0 4px; }
.feed-card-summary, .community-post-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.feed-card-more-button { background: none; color: #6656d9; font-size: 10.5px; font-weight: 800; margin: -4px 0 8px; padding: 0; }
.feed-card-more-button:hover { text-decoration: underline; }

/* Owner-only "Edit" pill, top-right of the card header — sits where a
   connect button would go for someone else's post, so it never collides
   with anything and never leaves that corner looking empty. */
.card-edit-button { align-items: center; background: #f2f0ff; border: 1px solid #e2ddff; border-radius: 999px; color: #6656d9; display: inline-flex; flex-shrink: 0; font-size: 10.5px; font-weight: 800; gap: 5px; margin-left: auto; padding: 7px 12px; transition: background .15s, border-color .15s, transform .12s; }
.card-edit-button svg { height: 13px; stroke: currentColor; width: 13px; }
.card-edit-button:hover { background: #e6e1ff; border-color: #d3caff; }
.card-edit-button:active { transform: scale(.95); }
body[data-theme="dark"] .card-edit-button { background: rgba(106,92,240,.16); border-color: rgba(106,92,240,.32); color: #b7aefc; }
body[data-theme="dark"] .card-edit-button:hover { background: rgba(106,92,240,.26); }
@media (max-width: 420px) { .card-edit-button span { display: none; } .card-edit-button { padding: 8px; } }

/* Full-screen entry point, moved off the icon rail and down under the
   tags — a small right-aligned pill rather than a same-size icon buried
   among Kudos/Save/Share, so it reads as "open this properly" rather
   than just another engagement action. */
.feed-card-fullscreen-row { display: flex; justify-content: flex-end; margin-top: 6px; }
/* Restyled as a quiet, professional ghost button — same "launch this
   properly" affordance as before, but a neutral outline that sits on
   the card instead of a dark purple tile with a candy-gradient icon
   chip and a shine sweep. Reads closer to GitHub/Linear-style
   secondary actions. */
.feed-card-fullscreen-button { align-items: center; background: #fff; border: 1.5px solid #e3e6ee; border-radius: 10px; box-shadow: 0 1px 0 rgba(28,35,61,.02); color: #4b5568; display: inline-flex; font-size: 10.5px; font-weight: 800; gap: 6px; letter-spacing: .01em; padding: 7px 12px; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease; }
.feed-card-fullscreen-button svg { height: 12px; stroke: currentColor; stroke-width: 2; width: 12px; transition: transform .18s ease; }
.feed-card-fullscreen-button:hover { background: #f7f8fc; border-color: #cfd4e2; color: #333a4c; transform: translateY(-1px); }
.feed-card-fullscreen-button:hover svg { transform: scale(1.08); }
.feed-card-fullscreen-button:active { transform: translateY(0) scale(.97); }
body[data-theme="dark"] .feed-card-fullscreen-button { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #c9c9d3; }
body[data-theme="dark"] .feed-card-fullscreen-button:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: #f2f2f2; }

/* ===================== license: highlighted badge instead of plain text ===================== */
.license-badge { align-items: center; background: #fff; border: 1px solid; border-radius: 50px; display: inline-flex; font: 700 8.5px "DM Mono", monospace; gap: 5px; padding: 4px 10px 4px 6px; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 1px 2px rgba(20,20,43,.05); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.license-badge:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(20,20,43,.10); filter: brightness(.97); }
.license-badge:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(20,20,43,.05); }
.license-badge-icon { align-items: center; border-radius: 50%; display: inline-flex; flex: 0 0 auto; justify-content: center; height: 15px; width: 15px; }
.license-badge-icon svg { height: 10px; width: 10px; }
.license-badge-label { line-height: 1; }
.license-badge.license-open { background: #ecfbf3; border-color: #b9ecd1; color: #128a4a; }
.license-badge.license-open .license-badge-icon { background: #17924f; color: #fff; }
.license-badge.license-personal { background: #fff7ec; border-color: #f6dcae; color: #a5670a; }
.license-badge.license-personal .license-badge-icon { background: #b5720b; color: #fff; }
.license-badge.license-reserved { background: #fdedf0; border-color: #f6c3d0; color: #b12f49; }
.license-badge.license-reserved .license-badge-icon { background: #c23a56; color: #fff; }
/* Real GitHub-detected license (MIT, Apache-2.0, ...) — deliberately
   branded close to GitHub's own palette so it reads as "sourced from
   GitHub", distinct from KudosCrate's own three-way license picker. */
.license-badge.license-github { background: #f0f2f5; border-color: #d7dbe3; color: #1b1f26; }
.license-badge.license-github .license-badge-icon { background: #1b1f26; color: #fff; }
body[data-theme="dark"] .license-badge.license-github { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #e6e8eb; }
body[data-theme="dark"] .license-badge.license-github .license-badge-icon { background: #e6e8eb; color: #1b1f26; }
.license-info-list { display: grid; gap: 14px; }
.license-info-card { background: #fff; border: 1.5px solid #e6e9f0; border-radius: 16px; padding: 20px; transition: border-color .2s, box-shadow .2s; }
.license-info-card.is-highlighted { border-color: #b9aeff; box-shadow: 0 0 0 4px rgba(114,88,220,.12); }
.license-info-tagline { color: #4a5165; font-size: 12.5px; font-weight: 600; margin: 12px 0 14px; }
.license-info-points { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.license-info-points li { align-items: flex-start; display: flex; font-size: 11.5px; gap: 9px; line-height: 1.5; }
.license-info-points li svg { fill: none; flex: 0 0 auto; height: 15px; margin-top: 1px; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 15px; }
.license-info-points li.is-allowed { color: #333a4c; }
.license-info-points li.is-allowed svg { color: #1f9e78; }
.license-info-points li.is-blocked { color: #8d95a6; }
.license-info-points li.is-blocked svg { color: #c23a56; }

/* ===================== verified tick (subscribers) ===================== */
.verified-badge { color: #2c9be8; display: inline-flex; vertical-align: -1px; }
.verified-badge svg { fill: currentColor; height: 13px; width: 13px; }

/* ===================== subscription card (Settings) ===================== */
.subscription-card { background: linear-gradient(135deg, #171d32, #2c2352); border-radius: 15px; color: #fff; margin-bottom: 16px; overflow: hidden; padding: 20px; position: relative; }
.subscription-card::after { background: radial-gradient(circle at 88% 12%, rgba(140,110,255,.35), transparent 60%); content: ""; inset: 0; position: absolute; }
.subscription-card h3, .subscription-card p, .subscription-card .subscription-actions, .subscription-card .subscription-price { position: relative; }
.subscription-card h3 { color: #fff; font-size: 14px; margin: 0 0 6px; }
.subscription-card p { color: #c3c8de; font-size: 10.5px; line-height: 1.6; margin: 0 0 12px; }
.subscription-price { font-size: 25px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; }
.subscription-price span { color: #a8adc4; font-size: 11px; font-weight: 700; }
.subscription-status-pill { align-items: center; background: rgba(255,255,255,.12); border-radius: 50px; display: inline-flex; font: 700 9px "DM Mono", monospace; gap: 6px; margin-bottom: 12px; padding: 6px 12px; }
.subscription-actions { display: flex; gap: 10px; }
.telegram-button { align-items: center; background: #29a9eb; border-radius: 9px; color: #fff; display: inline-flex; font-size: 11px; font-weight: 800; gap: 8px; padding: 12px 16px; }
.telegram-button:hover { background: #2497d1; }
.telegram-button svg { fill: currentColor; height: 16px; width: 16px; }

/* ===================== admin: subscription toggle ===================== */
.admin-subscribe-button { background: #eef1ff; border-radius: 8px; color: #4c3fb0; font-size: 10px; font-weight: 800; margin-right: 7px; padding: 9px 12px; }
.admin-subscribe-button.is-subscribed { background: #171d32; color: #fff; }

/* ===================== hamburger menu (replaces profile chip) ===================== */
.menu-wrap { position: relative; }
.menu-panel { padding: 8px; width: 220px; }
.menu-panel-item { align-items: center; border-radius: 9px; color: #414a5f; display: flex; font-size: 11px; font-weight: 700; gap: 10px; padding: 11px 10px; text-align: left; width: 100%; }
.menu-panel-item:hover { background: #f4f4fb; }
.menu-panel-item svg { fill: none; flex: 0 0 auto; height: 16px; stroke: #7d859a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 16px; }

/* ===================== new project: post type choice ===================== */
.np-type-choice { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; max-height: calc(100vh - 260px); max-width: 620px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.np-type-card { align-items: center; background: #fff; border: 1.5px solid #eceef4; border-radius: 18px; display: flex; gap: 16px; padding: 16px 18px; position: relative; text-align: left; touch-action: manipulation; transition: border-color .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), transform .12s cubic-bezier(.4,0,.2,1), background .18s ease; -webkit-tap-highlight-color: transparent; }
.np-type-card::after { border: solid #c3c8d6; border-width: 0 2px 2px 0; content: ''; flex: 0 0 auto; height: 8px; margin-left: auto; transform: rotate(-45deg); transition: transform .18s ease, border-color .18s ease; width: 8px; }
.np-type-card:hover { border-color: #b9aeff; box-shadow: 0 12px 26px rgba(28,35,61,.09); transform: translateY(-1px); }
.np-type-card:hover::after { border-color: #7868e9; transform: rotate(-45deg) translate(1px,-1px); }
.np-type-card:active { background: #f9f9fd; transform: scale(.985); }
.np-type-icon { align-items: center; background: #eae5ff; border-radius: 14px; color: #6d5bd7; display: inline-flex; flex: 0 0 auto; height: 48px; justify-content: center; transition: transform .18s cubic-bezier(.34,1.56,.64,1); width: 48px; }
.np-type-card:hover .np-type-icon { transform: scale(1.06) rotate(-2deg); }
.np-type-icon svg { fill: none; height: 23px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 23px; }
.np-type-card.np-type-sell .np-type-icon { background: #fff0e7; color: #de7946; }
.np-type-card.np-type-community .np-type-icon { background: #ddf7ef; color: #1f9e78; }
.np-type-card.np-type-poll .np-type-icon { background: #e4edff; color: #3468d6; }
.np-type-card.np-type-track .np-type-icon { background: #ffe9f0; color: #d1547e; }
.np-type-card.np-type-track h3 { align-items: center; display: flex; gap: 6px; }
.np-type-card.np-type-track h3 .verified-badge { height: 14px; width: 14px; }
.np-type-card > div, .np-type-card h3, .np-type-card p { min-width: 0; }
.np-type-card h3 { font-size: 13.5px; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-type-card p { color: #7d859a; font-size: 10.5px; line-height: 1.5; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-type-card.np-type-quick-upload .np-type-icon { background: #fff4d6; color: #c98a0a; }
.np-type-card.np-type-quick-upload .np-type-icon svg { fill: currentColor; stroke: none; }
.np-type-choice::-webkit-scrollbar { width: 5px; }
.np-type-choice::-webkit-scrollbar-thumb { background: rgba(120,104,233,.25); border-radius: 10px; }
body[data-theme="dark"] .np-type-card::after { border-color: rgba(255,255,255,.28); }
body[data-theme="dark"] .np-type-card p { color: #9a9fb3; }

/* Quick Upload wizard */
.quick-upload-form .qu-step { margin-top: 14px; }
.quick-upload-form .qu-step:first-of-type { margin-top: 14px; }
#quStepIntro h3, #quStepUrl h3, #quStepPreviewLink h3 { font-size: 16px; margin: 0 0 8px; }
.qu-step label input { background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 12px; font-size: 12px; height: 44px; padding: 0 14px; width: 100%; }
.qu-step label input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); outline: 0; }
.qu-step .primary-button { margin-top: 14px; }
.qu-error { background: #fdedf0; border-radius: 10px; color: #b12f49; font-size: 10.5px; margin: 10px 0 0; padding: 10px 12px; }
.qu-final-preview { overflow: hidden; padding: 0; }
.qu-preview-image { aspect-ratio: 1200 / 630; background: #f2f3f7; overflow: hidden; width: 100%; }
.qu-preview-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.qu-final-preview h3 { font-size: 15px; margin: 16px 20px 6px; }
.qu-final-preview .section-note { margin: 0 20px 10px; }
.qu-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 20px 12px; }
.qu-preview-meta { border-top: 1px solid #f0f1f5; display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0 20px; padding: 12px 0 18px; }
.qu-preview-meta span { color: #565e70; font: 700 9.5px "DM Mono", monospace; }
.qu-final-actions { display: flex; gap: 10px; margin-top: 14px; }
body[data-theme="dark"] .np-type-card.np-type-quick-upload .np-type-icon { background: rgba(201,138,10,.18); }
body[data-theme="dark"] .qu-step label input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); color: #f2f2f2; }
body[data-theme="dark"] .qu-preview-image { background: rgba(255,255,255,.04); }
body[data-theme="dark"] .qu-preview-meta { border-color: rgba(255,255,255,.08); }

/* Stories bar */
/* Stories bar + viewer + heart button now live in their own file,
   stories.css (loaded after this one in index.html), so that feature can
   keep growing without this file getting any bigger. */

/* Latest Tracks row */
.tracks-row { margin: 0 0 18px; }
.tracks-row.is-hidden { display: none; }
.tracks-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tracks-scroll::-webkit-scrollbar { display: none; }
.track-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; flex: 0 0 auto; padding: 12px; width: 220px; }
.track-cover { border-radius: 10px; display: block; height: 110px; margin-bottom: 10px; object-fit: cover; width: 100%; }
.track-cover-placeholder { align-items: center; background: linear-gradient(120deg, #6a5cf0, #d1547e); display: flex; font-size: 30px; justify-content: center; }
.track-copy strong { color: #1a1e2e; display: block; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-copy small { align-items: center; color: #8d95a6; display: flex; font-size: 9.5px; font-weight: 700; gap: 3px; margin: 2px 0 8px; }
.track-copy small .verified-badge { height: 11px; width: 11px; }
.track-card audio { border-radius: 20px; height: 32px; width: 100%; }
body[data-theme="dark"] .track-card { background: #181818; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .track-copy strong { color: #f2f2f2; }
.btn-icon { align-items: center; display: inline-flex; }
.btn-icon svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
.np-back-to-type { background: none; color: #6656d9; font-size: 10.5px; font-weight: 800; margin-bottom: 14px; padding: 0; }
@media (max-width: 570px) { .np-type-choice { grid-template-columns: 1fr; } }

/* ===================== admin: blocked handles + marketplace lists ===================== */
.blocked-handle-row, .admin-order-row, .admin-payout-row { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 13px; box-shadow: 0 8px 20px rgba(28,35,61,.03); display: flex; gap: 10px; margin-bottom: 9px; padding: 12px 14px; }
.blocked-handle-body, .admin-order-body, .admin-payout-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.blocked-handle-body strong, .admin-order-body strong, .admin-payout-body strong { color: #333a4c; font-size: 10.5px; }
.blocked-handle-body small, .admin-order-body small, .admin-payout-body small { color: #9099ac; font-size: 9px; }
.admin-order-amount, .admin-payout-amount { color: #17924f; flex: 0 0 auto; font: 700 11px "DM Mono", monospace; }
.admin-confirm-order-button, .admin-mark-paid-button { background: #171d32; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 800; padding: 9px 13px; }
.unblock-handle-button { background: #fdeaee; border-radius: 8px; color: #d1546f; font-size: 10px; font-weight: 800; padding: 8px 12px; }

/* ===================== marketplace: sell badge + buy button on posts ===================== */
.sale-badge { align-items: center; background: #fff3e0; border-radius: 50px; color: #b5720b; display: inline-flex; font: 700 9px "DM Mono", monospace; gap: 4px; margin-left: 8px; padding: 3px 9px; }
.buy-button { background: linear-gradient(135deg, #7649f7, #4b3fc9); border-radius: 9px; color: #fff; font-size: 10.5px; font-weight: 800; padding: 9px 14px; }
.buy-button:hover { opacity: .92; }
.buy-button.owned { background: #17c964; }
.buy-modal-price { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 14px; }
.buy-payment-info { background: #f6f5ff; border-radius: 10px; color: #4c3fb0; font: 700 12px "DM Mono", monospace; margin-bottom: 16px; padding: 12px 14px; }
.buy-modal-note { color: #7d859a; font-size: 10px; line-height: 1.6; margin: 0 0 16px; }

/* ===================== earnings (Settings) ===================== */
.earnings-stats { display: flex; gap: 22px; margin-bottom: 12px; }
.earnings-stats div { display: grid; gap: 1px; }
.earnings-stats strong { font-size: 18px; letter-spacing: -.03em; }
.earnings-stats span { color: #9099ac; font-size: 9px; }
.earnings-sale-row { align-items: center; border-top: 1px solid #f0f1f5; display: flex; gap: 8px; padding: 9px 2px; }
.earnings-sale-row:first-of-type { border-top: 0; }
.earnings-sale-text { display: grid; flex: 1; gap: 0; min-width: 0; }
.earnings-sale-text strong { font-size: 10px; }
.earnings-sale-text small { color: #9099ac; font-size: 8.5px; }
.earnings-sale-amount { color: #17924f; font: 700 10px "DM Mono", monospace; }
.earnings-status-pill { background: #f2f3f7; border-radius: 50px; font: 700 7.5px "DM Mono", monospace; padding: 3px 8px; text-transform: uppercase; }
.earnings-status-pill.paid { background: #e6f9ef; color: #17924f; }

/* ===================== privacy page ===================== */
.privacy-content { max-width: 640px; }
.privacy-content h3 { color: #333a4c; font-size: 13px; margin: 20px 0 6px; }
.privacy-content h3:first-child { margin-top: 0; }
.privacy-content p { color: #6c7488; font-size: 11.5px; line-height: 1.7; margin: 0; }

/* ===================== auth screens: extra polish ===================== */
.auth-card { animation: auth-card-in .5s cubic-bezier(.2,.8,.2,1) both; position: relative; }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }
.auth-view::after { background: radial-gradient(circle at 15% 85%, rgba(120,90,255,.16), transparent 55%), radial-gradient(circle at 85% 10%, rgba(60,130,255,.14), transparent 50%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.auth-submit { background: linear-gradient(100deg, #4c8cff, #7a5cf0, #4c8cff); background-size: 200% 100%; transition: background-position .5s ease, box-shadow .2s, transform .2s; }
.auth-submit:hover { background-position: 100% 0; }
.field-wrap { background: #fbfbfe; }

/* ===================== featured (honest admin promotion, no fake numbers) ===================== */
.feed-card-featured-pill { background: #fff3d6; border-radius: 50px; color: #a3720c; font: 700 8px "DM Mono", monospace; margin-left: 8px; padding: 3px 8px; vertical-align: middle; }
.admin-feature-button { color: #c99a1f; font-size: 16px; }
.admin-feature-button.is-featured { background: #fff3d6; }

/* ===================== settings: avatar upload (mobile-safe) ===================== */
.avatar-upload-wrap { align-items: center; display: flex; gap: 14px; }
.banner-upload-wrap { align-items: center; background: #f6f7fb; border: 1.5px dashed #dadfec; border-radius: 12px; color: #9299a8; display: flex; font-size: 10px; font-weight: 700; height: 88px; justify-content: center; overflow: hidden; }
.banner-upload-wrap.has-image { border-style: solid; }
.banner-upload-wrap img { display: block; height: 100%; object-fit: cover; width: 100%; }
.avatar-upload-preview { flex: 0 0 auto; font-size: 15px; height: 56px; position: relative; width: 56px; }
.avatar-upload-badge { align-items: center; background: #171d32; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.25); color: #fff; cursor: pointer; display: flex; height: 26px; justify-content: center; position: relative; margin-left: -18px; z-index: 1; width: 26px; }
.avatar-upload-badge svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 12px; }
@media (max-width: 570px) { .avatar-upload-wrap { flex-wrap: wrap; } }

/* ===================== search page: recent searches (mirrors trending chips) ===================== */
#recentSearches .search-trend-chip { background: #f6f7fb; }

/* ===================== featured / creators pages ===================== */
.creator-watch-card { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 12px; margin-bottom: 10px; padding: 14px 15px; }
.creator-watch-card .mini-avatar { flex: 0 0 auto; height: 42px; width: 42px; }
.creator-watch-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.creator-watch-body strong { font-size: 11.5px; }
.creator-watch-body small { color: #9099ac; font-size: 9px; }

/* ===================== collections: full cards + save picker ===================== */
.collection-detail-header { align-items: center; display: flex; gap: 12px; margin-bottom: 16px; }
.collection-detail-header h2 { font-size: 17px; letter-spacing: -.03em; margin: 0; }
.collection-detail-header span { color: #9099ac; font-size: 9.5px; }
.collection-card.is-open { cursor: default; }
.collection-card-clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.collection-card-clickable:hover { box-shadow: 0 14px 30px rgba(28,35,61,.08); transform: translateY(-2px); }
.save-picker-list { display: grid; gap: 6px; margin: 4px 0 16px; max-height: 260px; overflow-y: auto; }
.save-picker-item { align-items: center; background: #f6f7fb; border: 1px solid transparent; border-radius: 10px; display: flex; gap: 10px; padding: 11px 13px; text-align: left; }
.save-picker-item:hover { border-color: #cfc9ef; }
.save-picker-item strong { flex: 1; font-size: 11px; }
.save-picker-item small { color: #9099ac; font-size: 9px; }

/* ===================== fixes & new features (this update) ===================== */

/* Smooth, native-feeling scroll. NOTE: scroll-behavior:smooth was previously
   applied globally to <html>, which fights the browser's own touch/momentum
   scrolling on mobile (a well-known cause of stepped, "glitchy" scrolling) and
   forced every programmatic scroll — including the page-to-top reset that ran
   on *every* in-app navigation — to animate instead of jump instantly. The
   document itself now scrolls natively (behavior: auto); smooth animation is
   reserved for the handful of real internal scroll panels below (modals,
   pickers, the message reader) where an animated scroll is actually wanted. */
html { scroll-behavior: auto; }
body { overscroll-behavior-y: none; }
.modal, .save-picker-list, .notification-panel,
#reader-scroll, .lightbox-stage { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
/* Promote the two background glow blobs to their own compositor layer without
   the dead filter:blur(0) each used to carry (a zero-radius blur still forces
   a filter render pass every frame on some GPUs, for a blur nobody sees). */
.app-glow-one, .app-glow-two { transform: translateZ(0); }

/* Explore grid: stop the column "blow-out" that made cards overlap / freeze on wider (laptop) screens */
.explore-grid, .connections-grid, .collection-grid { min-width: 0; }
.explore-grid > *, .connections-grid > *, .collection-grid > *, .project-card { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.feed-card-links, .tech-row, .project-actions, .project-actions > div { flex-wrap: wrap; }
.feed-card-image, .feed-card-image img, .feed-card-image-wrap img { max-width: 100%; }

/* Bigger, easier-to-tap post icons */
.project-actions .action-button { padding: 10px 12px; min-height: 40px; min-width: 40px; }
.project-actions .action-button svg { height: 23px; width: 23px; }
.project-actions .secondary-action, .project-actions .preview-button { padding: 10px 12px; min-height: 40px; }
.project-actions .secondary-action svg, .project-actions .preview-button svg { height: 20px; width: 20px; }

/* Profile: bigger Connect button, Message shown as text (no bare icon) */
.up-actions .connect-btn-lg, #upConnectButton { border-radius: 12px; font-size: 13px; font-weight: 800; gap: 8px; min-height: 46px; padding: 13px 22px; }
.up-actions .connect-btn-lg svg, #upConnectButton svg { height: 20px; width: 20px; }
#upMessageButton { align-items: center; background: #f2f3f7; border-radius: 12px; color: #454b5c; display: inline-flex; font-size: 12px; font-weight: 700; gap: 6px; height: auto; min-height: 46px; padding: 13px 18px; width: auto; }
#upMessageButton svg { height: 17px; width: 17px; }
.profile-stat-link { cursor: pointer; }
.profile-stat-link:hover strong { color: #5c51d1; }

/* Top brand: text-only wordmark (no logo image), scales on every screen size */
.app-brand .brand-mark, .auth-brand .brand-mark, .js-brand-mark { display: none !important; }
#appBrandText, #authBrandText { font-size: clamp(18px, 5.2vw, 25px) !important; font-weight: 900; letter-spacing: -0.02em; }
#appBrandText span, #authBrandText span { color: inherit; }
.app-brand, .auth-brand { gap: 0 !important; }
.js-brand-text { font-size: 25px; font-weight: 900; letter-spacing: -.02em; }

/* Auth pages (login/signup/onboarding) get the icon back alongside a much
   more reasonably-sized wordmark — the bare 25px/900-weight text-only
   treatment above (built for the in-app topbar) looked oversized and
   unbalanced with no mark next to it here. */
.auth-view .js-brand-mark { display: inline-flex !important; font-size: 15px; height: 34px; width: 34px; }
.auth-view .js-brand-text { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }

/* Guest mode */
.guest-banner { align-items: center; background: linear-gradient(135deg,#5c51d1,#8b5cf6); border-radius: 14px; color: #fff; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 14px; padding: 12px 16px; }
.guest-banner span { font-size: 11px; font-weight: 700; }
.guest-banner button { background: #fff; border-radius: 9px; color: #5c51d1; font-size: 10.5px; font-weight: 800; padding: 9px 14px; white-space: nowrap; }
.guest-create-account-btn { background: #171d32; border-radius: 9px; color: #fff !important; font-size: 10.5px; font-weight: 800; padding: 8px 13px; white-space: nowrap; }

/* Poll cards */
.poll-card-wrap { padding: 17px 18px 14px; }
.poll-card { background: none; border: none; border-radius: 0; margin: 14px 0 0; padding: 0; }
.poll-question { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; margin: 0 0 14px; }
.poll-option { align-items: center; background: #f8f8fc; border: 1.5px solid #eceefa; border-radius: 12px; cursor: pointer; display: flex; margin-bottom: 9px; overflow: hidden; position: relative; transition: border-color .15s, transform .12s; }
.poll-option:hover { border-color: #cabdff; }
.poll-option:active { transform: scale(.99); }
.poll-option-fill { background: linear-gradient(90deg, rgba(106,92,240,.18), rgba(106,92,240,.08)); bottom: 0; left: 0; position: absolute; top: 0; transition: width .45s cubic-bezier(.2,.8,.3,1); z-index: 0; }
.poll-option-label { flex: 1; font-size: 12px; font-weight: 700; padding: 12px 14px; position: relative; z-index: 1; }
.poll-option-pct { color: #6a5cf0; font-size: 11.5px; font-weight: 800; padding: 12px 14px; position: relative; z-index: 1; }
.poll-option.is-voted { border-color: #6a5cf0; }
.poll-meta { color: #9099ac; font-size: 10px; font-weight: 600; margin-top: 4px; }
@media (max-width: 820px) { .poll-card-wrap { padding: 14px 13px 11px; } }
.poll-type-form .poll-option-row { align-items: center; display: flex; gap: 8px; margin-bottom: 8px; }
.poll-type-form .poll-option-row button { color: #e95479; flex: 0 0 auto; }

/* How-to-run button + full-screen reader */
.readme-button { color: #454b5c; }
.readme-reader-page { background: #fff; bottom: 0; left: 0; overflow-y: auto; padding: 16px; position: fixed; right: 0; top: 0; z-index: 90; }
.readme-reader-page.is-hidden { display: none; }
.readme-reader-head { align-items: center; display: flex; gap: 12px; margin-bottom: 16px; }
.readme-reader-head h2 { font-size: 15px; margin: 0; }
.readme-reader-back { align-items: center; background: #f2f3f7; border-radius: 9px; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.readme-reader-body { font-size: 12.5px; line-height: 1.7; max-width: 720px; margin: 0 auto; white-space: pre-wrap; word-wrap: break-word; }

/* Full Screen project view — a dedicated, presentational reading of a
   single project: big hero image, oversized title, everything given room
   to breathe, instead of the compact feed-card layout used everywhere
   else. */
.project-fullscreen-page { background: #0b0c10; bottom: 0; left: 0; overflow-y: auto; position: fixed; right: 0; top: 0; z-index: 95; }
.project-fullscreen-page.is-hidden { display: none; }
.project-fullscreen-back { align-items: center; background: rgba(18,19,26,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.28); color: #fff; display: inline-flex; font-size: 12.5px; font-weight: 800; gap: 7px; height: 40px; justify-content: center; left: 16px; padding: 0 16px 0 13px; position: fixed; top: 16px; transition: background .15s, border-color .15s, transform .12s; z-index: 3; }
.project-fullscreen-back:hover { background: rgba(30,31,40,.78); border-color: rgba(255,255,255,.28); }
.project-fullscreen-back:active { transform: scale(.95); }
.project-fullscreen-back svg { flex-shrink: 0; height: 16px; width: 16px; }
.project-fullscreen-back span { letter-spacing: -.01em; }
@media (max-width: 420px) { .project-fullscreen-back span { display: none; } .project-fullscreen-back { border-radius: 50%; padding: 0; width: 40px; } }
.project-fullscreen-body { color: #e8e9ef; margin: 0 auto; max-width: 900px; padding-bottom: 80px; }

/* ---- Two-pane swipe layer (project ⇄ repo file structure) ----------- */
/* #projectFullscreenPage only — the Cuts fullscreen page shares the base
   .project-fullscreen-page class but keeps its own simple single-pane
   scroll, so the swipe-track structure is scoped to the id here. */
#projectFullscreenPage { overflow: hidden; }
#projectFullscreenPage .pfs-swipe-track { display: flex; height: 100%; transition: transform .34s cubic-bezier(.22,1,.36,1); width: 200%; }
#projectFullscreenPage.pfs-files-open .pfs-swipe-track { transform: translateX(-50%); }
#projectFullscreenPage .pfs-pane { -webkit-overflow-scrolling: touch; flex-shrink: 0; height: 100%; overflow-y: auto; width: 50%; }
#projectFullscreenPage .pfs-pane-main { position: relative; }

/* Floating hint pill — tells you the file structure is a swipe away.
   Fixed to the viewport (sibling of the swipe track, not inside it) so
   it stays put regardless of scroll position, and fades out once the
   file pane is open. */
.pfs-swipe-hint { align-items: center; animation: pfsHintNudge 2.6s ease-in-out .8s infinite; background: rgba(20,20,30,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; bottom: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.35); color: #e9e9f7; display: inline-flex; font-size: 11.5px; font-weight: 700; gap: 8px; left: 50%; padding: 10px 16px; position: fixed; transform: translateX(-50%); transition: opacity .2s ease, visibility .2s ease; z-index: 3; }
.pfs-swipe-hint svg { height: 13px; width: 13px; }
.pfs-swipe-hint.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
#projectFullscreenPage.pfs-files-open .pfs-swipe-hint { opacity: 0; pointer-events: none; visibility: hidden; }
@keyframes pfsHintNudge { 0%, 76%, 100% { transform: translateX(-50%); } 84% { transform: translateX(calc(-50% - 5px)); } 92% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pfs-swipe-hint { animation: none; } }

/* Repo file-structure pane */
.pfs-files-pane { background: #0e0f16; }
.pfs-files-head { align-items: center; background: rgba(11,12,16,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: 10px; margin: 0 auto; max-width: 900px; padding: 14px 16px; position: sticky; top: 0; z-index: 2; }
.pfs-files-back { align-items: center; background: rgba(255,255,255,.08); border-radius: 10px; color: #fff; display: inline-flex; flex-shrink: 0; font-size: 12px; font-weight: 800; gap: 6px; padding: 8px 12px 8px 9px; transition: background .15s; }
.pfs-files-back:hover { background: rgba(255,255,255,.14); }
.pfs-files-back svg { height: 15px; width: 15px; }
.pfs-files-breadcrumb { color: #cfd0e0; display: flex; flex: 1; flex-wrap: wrap; font-family: "DM Mono", monospace; font-size: 12px; gap: 2px; min-width: 0; overflow: hidden; }
.pfs-files-breadcrumb button { color: #cfd0e0; font-weight: 700; padding: 3px 2px; white-space: nowrap; }
.pfs-files-breadcrumb button:last-child { color: #fff; }
.pfs-files-breadcrumb button:hover { text-decoration: underline; }
.pfs-files-crumb-sep { color: #55566b; }
.pfs-files-gh-link { align-items: center; background: rgba(255,255,255,.08); border-radius: 9px; color: #cfd0e0; display: inline-flex; flex-shrink: 0; height: 34px; justify-content: center; transition: background .15s; width: 34px; }
.pfs-files-gh-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.pfs-files-gh-link svg { height: 16px; width: 16px; }
.pfs-files-intro { color: #82829a; font-size: 11.5px; margin: 14px auto 4px; max-width: 900px; padding: 0 18px; }
.pfs-files-note { color: #82829a; font-size: 12.5px; padding: 14px 18px; }
.pfs-files-list { margin: 0 auto; max-width: 900px; padding: 4px 10px 40px; }
.pfs-files-row { align-items: center; border-radius: 11px; cursor: pointer; display: flex; gap: 12px; padding: 11px 8px; transition: background .12s; }
.pfs-files-row:hover, .pfs-files-row:active { background: rgba(255,255,255,.05); }
.pfs-files-icon { flex-shrink: 0; font-size: 16px; line-height: 1; width: 20px; }
.pfs-files-name { color: #e5e5f0; flex: 1; font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfs-files-row.is-dir .pfs-files-name { color: #fff; font-weight: 700; }
.pfs-files-size { color: #7d7d95; flex-shrink: 0; font-family: "DM Mono", monospace; font-size: 10.5px; }
.pfs-files-chevron { color: #55566b; flex-shrink: 0; height: 14px; width: 14px; }
.pfs-top { padding: 76px 28px 0; }
@media (max-width: 640px) { .pfs-top { padding: 72px 18px 0; } }
/* Explicit height (not just min/max) is what makes the image actually fill
   this box — a percentage height on the <img> can't resolve against a
   parent whose own height is left to "auto", so without this the hero used
   to shrink down to the image's natural size and leave it looking small
   and cropped-in-the-wrong-way instead of a full, stretched, edge-to-edge
   cover shot. */
.pfs-hero { height: 60vh; margin-top: 26px; max-height: 640px; min-height: 340px; overflow: hidden; position: relative; width: 100%; }
.pfs-hero img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
@media (max-width: 570px) { .pfs-hero { height: 46vh; min-height: 280px; } }
.pfs-hero::after { background: linear-gradient(180deg, rgba(11,12,16,0) 40%, rgba(11,12,16,.95) 100%); bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; }
.pfs-hero-placeholder { align-items: center; background: linear-gradient(135deg,#1f2233,#2c2f4a); display: flex; justify-content: center; }
.pfs-hero-placeholder .feed-card-swatch-full { border-radius: 0; height: 100%; margin-bottom: 0; }
.pfs-content { padding: 28px 28px 0; }
.pfs-eyebrow { align-items: center; color: #8f8fa8; display: flex; font-size: 11px; font-weight: 800; gap: 8px; letter-spacing: .08em; text-transform: uppercase; }
.pfs-title { font-size: clamp(26px, 5vw, 42px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.pfs-title-row { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 10px; }
.pfs-title-row .license-badge { margin-top: 6px; }
.pfs-author-row { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: 20px; }
.pfs-author-left { align-items: center; display: flex; gap: 12px; min-width: 0; }
.pfs-author-left strong { display: block; font-size: 14px; }
.pfs-author-left small { color: #9a9ab0; }
.pfs-author-left .connect-btn-lg { margin-left: 4px; }
.pfs-stats { color: #9d9db3; display: flex; flex-shrink: 0; font-size: 11.5px; font-weight: 700; gap: 16px; }
.pfs-stats span strong { color: #fff; font-size: 13.5px; }
@media (max-width: 480px) { .pfs-stats { display: none; } }
.pfs-description { color: #cfd0e0; font-size: 15px; line-height: 1.75; margin: 0 0 6px; white-space: pre-wrap; word-wrap: break-word; }
/* Description is shown as a short blurb by default (see the ~220-char
   preview built in projectFullscreenHtml) with a toggle to expand —
   applies the same way whether the text came from Quick Upload's
   auto-summary or someone's own manually-typed description. */
.pfs-description-toggle { color: #a99bff; font-size: 12.5px; font-weight: 800; letter-spacing: .01em; margin: 0 0 20px; padding: 2px 0; }
.pfs-description-toggle:hover { color: #c0b5ff; text-decoration: underline; }
.pfs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.pfs-tags span { background: rgba(255,255,255,.08); border-radius: 999px; color: #cfd0e0; font-size: 12px; font-weight: 700; padding: 6px 13px; }
.pfs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.pfs-actions a, .pfs-actions button { align-items: center; border-radius: 12px; display: inline-flex; font-size: 13.5px; font-weight: 800; gap: 8px; padding: 13px 20px; transition: background .15s, transform .12s; }
.pfs-actions a:active, .pfs-actions button:active { transform: scale(.96); }
.pfs-actions .pfs-primary { background: linear-gradient(135deg, #6a5cf0, #8a5cf5); box-shadow: 0 4px 14px rgba(106,92,240,.35); color: #fff; }
.pfs-actions .pfs-primary:hover { box-shadow: 0 6px 18px rgba(106,92,240,.48); filter: brightness(1.05); }
.pfs-actions .pfs-secondary { background: rgba(255,255,255,.1); color: #fff; }
.pfs-actions .pfs-secondary:hover { background: rgba(255,255,255,.16); }
.pfs-actions svg { height: 16px; stroke: currentColor; width: 16px; }
@media (max-width: 640px) { .pfs-content { padding: 22px 18px 0; } .pfs-actions a, .pfs-actions button { flex: 1 1 auto; justify-content: center; } }

/* "How to run" — the setup steps pulled from readmeText, shown inline
   on the page itself (both Quick Upload and manual/Upload-a-Project
   posts) instead of hiding behind a separate button. Long guides are
   clipped with a fade and a link into the existing full-screen reader
   rather than dumping the whole file into the page. */
.pfs-howto-section { border-top: 1px solid rgba(255,255,255,.1); margin: 28px 0 0; padding: 26px 0 0; }
.pfs-howto-head { align-items: center; color: #8f8fa8; display: flex; font-size: 11px; font-weight: 800; gap: 8px; letter-spacing: .08em; margin-bottom: 16px; text-transform: uppercase; }
.pfs-howto-head svg { height: 15px; width: 15px; }
.pfs-howto-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; padding: 18px 20px; position: relative; }
.pfs-howto-text { color: #cfd0e0; font-family: "DM Mono", monospace; font-size: 12.5px; line-height: 1.8; margin: 0; max-height: 260px; overflow: hidden; position: relative; white-space: pre-wrap; word-wrap: break-word; }
.pfs-howto-card.is-clipped .pfs-howto-text::after { background: linear-gradient(180deg, rgba(20,21,30,0), #16171f 92%); bottom: 0; content: ""; height: 70px; left: 0; position: absolute; right: 0; }
.pfs-howto-open { align-items: center; color: #a99bff; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; margin-top: 14px; }
.pfs-howto-open:hover { color: #c0b5ff; text-decoration: underline; }
.pfs-howto-open svg { height: 13px; width: 13px; }

/* GitHub details, full-bleed within the page rather than a floating
   card — a top divider and a header are enough to separate the section;
   it shouldn't look like a widget dropped on top of the content. */
.pfs-github-section { border-top: 1px solid rgba(255,255,255,.1); margin: 28px 0 0; padding: 26px 0 40px; }
.pfs-github-section-head { align-items: center; color: #8f8fa8; display: flex; font-size: 11px; font-weight: 800; gap: 8px; letter-spacing: .08em; margin-bottom: 18px; text-transform: uppercase; }
.pfs-github-section-head svg { height: 15px; width: 15px; }
.pfs-github-card { padding: 0; }
.pfs-github-card-loading { display: grid; gap: 10px; }
.pfs-github-skel { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%); background-size: 400% 100%; border-radius: 10px; height: 18px; animation: pfsShimmer 1.3s ease infinite; }
.pfs-github-skel:nth-child(2) { width: 70%; }
.pfs-github-skel:nth-child(3) { height: 64px; }
@keyframes pfsShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.pfs-gh-head-title { align-items: center; display: flex; gap: 10px; }
.pfs-gh-head-title strong { color: #fff; font-family: "DM Mono", monospace; font-size: 15px; letter-spacing: -0.01em; word-break: break-word; }
.pfs-gh-archived { background: rgba(255,180,60,.15); border-radius: 999px; color: #ffb43c; font-size: 9px; font-weight: 800; padding: 3px 8px; text-transform: uppercase; }
.pfs-gh-head p { color: #b6b6c9; font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.pfs-gh-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pfs-gh-topics span { background: rgba(106,92,240,.18); border-radius: 999px; color: #b7aefc; font-size: 10.5px; font-weight: 700; padding: 4px 10px; }
.pfs-gh-meta { color: #82829a; display: flex; flex-wrap: wrap; font-size: 11px; font-weight: 600; gap: 14px; margin-top: 14px; }
.pfs-gh-meta span::before { content: "•"; margin-right: 6px; opacity: .5; }
.pfs-gh-meta span:first-child::before { content: none; margin-right: 0; }
.pfs-gh-stats-grid { border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.pfs-gh-stat { align-items: center; background: rgba(255,255,255,.02); display: flex; gap: 8px; padding: 14px 10px; }
.pfs-gh-stat-icon { align-items: center; background: rgba(255,255,255,.06); border-radius: 9px; color: #b7aefc; display: flex; flex-shrink: 0; height: 26px; justify-content: center; width: 26px; }
.pfs-gh-stat-icon svg { height: 13px; width: 13px; }
.pfs-gh-stat strong { color: #fff; display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.pfs-gh-stat small { color: #8b8ba3; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 560px) { .pfs-gh-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.pfs-gh-rows { border-top: 1px solid rgba(255,255,255,.08); display: grid; margin-top: 4px; }
.pfs-gh-row { align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); color: inherit; display: flex; gap: 12px; padding: 13px 4px; transition: background .15s; }
.pfs-gh-row:last-child { border-bottom: none; }
.pfs-gh-row:hover { background: rgba(255,255,255,.04); }
.pfs-gh-row-icon { align-items: center; color: #9d9db3; display: flex; flex-shrink: 0; height: 24px; justify-content: center; width: 24px; }
.pfs-gh-row-icon svg { height: 15px; width: 15px; }
.pfs-gh-row div { flex: 1; min-width: 0; }
.pfs-gh-row strong { color: #e9e9f2; display: block; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfs-gh-row small { color: #83839a; font-size: 10.5px; }
.pfs-run-badge { border-radius: 999px; font-size: 9px; font-weight: 800; padding: 4px 9px; text-transform: capitalize; white-space: nowrap; }
.pfs-run-success { background: rgba(46,196,120,.18); color: #4ade80; }
.pfs-run-failure { background: rgba(240,80,80,.18); color: #ff6b6b; }
.pfs-run-in_progress, .pfs-run-queued, .pfs-run-pending { background: rgba(255,180,60,.18); color: #ffb43c; }
.pfs-run-none, .pfs-run-cancelled, .pfs-run-neutral, .pfs-run-skipped { background: rgba(255,255,255,.08); color: #9d9db3; }
.pfs-gh-open { align-items: center; background: rgba(106,92,240,.14); border: 1px solid rgba(106,92,240,.3); border-radius: 12px; color: #cabdff; display: flex; font-size: 12.5px; font-weight: 800; gap: 9px; justify-content: center; margin-top: 18px; padding: 12px; transition: background .15s; }
.pfs-gh-open:hover { background: rgba(106,92,240,.22); }
.pfs-gh-open-icon { height: 15px; width: 15px; }
.pfs-gh-open svg:last-child { height: 14px; margin-left: auto; width: 14px; }
.pfs-gh-error { color: #9d9da0; font-size: 12.5px; padding: 4px 2px; text-align: center; }

/* ===================== admin: per-page status ===================== */
.page-status-list { display: grid; gap: 12px; }
.page-status-row { background: #fff; border: 1px solid #e8eaf1; border-radius: 13px; padding: 14px 16px; }
body[data-theme="dark"] .page-status-row { background: #121212; border-color: #1c1c1c; }
.page-status-row-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 11px; }
.page-status-row-head strong { font-size: 12.5px; }
.page-status-pill { border-radius: 999px; font-size: 9px; font-weight: 800; padding: 4px 9px; text-transform: uppercase; }
.page-status-pill.live { background: #e2f5ed; color: #25926f; }
.page-status-pill.coming-soon { background: #eaf0ff; color: #4a68d9; }
.page-status-pill.maintenance { background: #fff2df; color: #c07a12; }
.page-status-pill.shutdown { background: #fde3e3; color: #d13f3f; }
.page-status-options { display: flex; flex-wrap: wrap; gap: 7px; }
.page-status-option { background: #f4f5f9; border-radius: 8px; color: #6d7285; font-size: 10px; font-weight: 800; padding: 7px 10px; transition: background .15s, color .15s; }
body[data-theme="dark"] .page-status-option { background: rgba(255,255,255,.06); color: #9a9a9a; }
.page-status-option.active.live { background: #25926f; color: #fff; }
.page-status-option.active.coming-soon { background: #4a68d9; color: #fff; }
.page-status-option.active.maintenance { background: #c07a12; color: #fff; }
.page-status-option.active.shutdown { background: #d13f3f; color: #fff; }

/* ===================== gated-page state (coming soon / maintenance / shut down) ===================== */
.page-gate-state { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 62vh; padding: 60px 24px; text-align: center; }
.page-gate-state-icon { align-items: center; border-radius: 26px; display: flex; height: 74px; justify-content: center; margin-bottom: 22px; width: 74px; }
.page-gate-state-icon svg { height: 32px; stroke: currentColor; width: 32px; }
.page-gate-state.coming-soon .page-gate-state-icon { background: #eaf0ff; color: #4a68d9; }
.page-gate-state.maintenance .page-gate-state-icon { background: #fff2df; color: #c07a12; }
.page-gate-state.shutdown .page-gate-state-icon { background: #fde3e3; color: #d13f3f; }
.page-gate-state h2 { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 8px; }
.page-gate-state p { color: #8b909e; font-size: 13px; line-height: 1.6; margin: 0; max-width: 320px; }
body[data-theme="dark"] .page-gate-state.coming-soon .page-gate-state-icon { background: rgba(74,104,217,.18); }
body[data-theme="dark"] .page-gate-state.maintenance .page-gate-state-icon { background: rgba(192,122,18,.18); }
body[data-theme="dark"] .page-gate-state.shutdown .page-gate-state-icon { background: rgba(209,63,63,.18); }
body[data-theme="dark"] .page-gate-state p { color: #878787; }
.page-gate-overlay { align-items: flex-start; background: #f7f7fb; display: flex; inset: 0; justify-content: center; overflow-y: auto; position: fixed; z-index: 5; }
.page-gate-overlay.is-hidden { display: none; }
body[data-theme="dark"] .page-gate-overlay { background: #000000; }
.page-gate-overlay #pageGateContent { padding-top: 78px; width: 100%; }

.maintenance-page { align-items: center; background: #0b0c10; bottom: 0; display: flex; justify-content: center; left: 0; padding: 24px; position: fixed; right: 0; top: 0; z-index: 999; }
.maintenance-page.is-hidden { display: none; }
.maintenance-card { color: #e8e9ef; max-width: 380px; text-align: center; }
.maintenance-icon { align-items: center; background: rgba(106,92,240,.15); border-radius: 50%; color: #9d92ff; display: inline-flex; height: 64px; justify-content: center; margin-bottom: 22px; width: 64px; }
.maintenance-icon svg { height: 28px; width: 28px; }
.maintenance-card h1 { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; margin: 0 0 10px; }
.maintenance-card p { color: #9a9ab0; font-size: 14px; line-height: 1.6; margin: 0; }

/* Announcements: Title -> Image -> Description order */
.announcement-card-title { font-size: 13px; font-weight: 800; margin: 0 0 8px; overflow-wrap: break-word; word-break: break-word; }
.announcement-card-image { border-radius: 10px; display: block; margin-bottom: 10px; max-width: 100%; }
.announcement-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 16px; box-shadow: 0 12px 29px rgba(28,35,61,.045); margin-bottom: 14px; overflow: hidden; padding: 18px 19px 16px; transition: box-shadow .18s, border-color .18s; }
.announcement-card:hover { border-color: #dfe2ec; box-shadow: 0 16px 36px rgba(28,35,61,.075); }
.announcement-card-head { align-items: center; display: flex; gap: 11px; margin-bottom: 13px; }
.announcement-badge { align-items: center; background: linear-gradient(135deg, #6a5cf0, #7d5ce0); border-radius: 11px; color: #fff; display: inline-flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.announcement-badge svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }
.announcement-card-meta { display: grid; flex: 1; gap: 2px; min-width: 0; }
.announcement-card-meta strong { color: #333a4c; font-size: 10.5px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.announcement-card-meta small { color: #a0a6b4; font-size: 9px; }
.announcement-delete-button { align-items: center; background: transparent; border-radius: 8px; color: #a2a9b8; display: inline-flex; flex: 0 0 auto; height: 30px; justify-content: center; transition: background .15s, color .15s; width: 30px; }
.announcement-delete-button:hover { background: #fdeaee; color: #d1546f; }
.announcement-delete-button svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.announcement-card .announcement-card-title { font-size: 16px; letter-spacing: -.03em; margin: 0 0 10px; }
.announcement-card .announcement-card-image { border-radius: 12px; margin-bottom: 12px; width: 100%; }
.announcement-card-text { color: #5a6272; font-size: 11.5px; line-height: 1.65; margin: 0; overflow-wrap: break-word; word-break: break-word; }
.announcement-card-author { color: #a0a6b4; font-size: 9.5px; margin: 10px 0 0; }
.announcement-composer-title, .announcement-composer-image { margin-bottom: 8px; width: 100%; }

/* Google sign-in button container */
#guestLoginButton { font-size: 12px !important; }
#googleSignInContainer { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
#googleSignInContainer iframe { max-width: 100% !important; }

/* ------------------------------------------------------------------ */
/* Dedicated auth pages (login.html / signup.html / onboarding.html)   */
/* A trimmed-down version of the old in-app auth view — same visual      */
/* language (auth-card, field-wrap, oauth-buttons) but without the fake  */
/* social-proof clutter, and now split across separate pages/routes.     */
/* ------------------------------------------------------------------ */
.auth-page-layout { align-items: center; display: grid; gap: clamp(40px, 7vw, 120px); grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); margin: 64px auto 0; max-width: 1080px; min-height: calc(100vh - 137px); position: relative; z-index: 1; }
.auth-page-layout-centered { display: flex; grid-template-columns: none; justify-content: center; max-width: 480px; }
.auth-page-story { max-width: 460px; }
.auth-page-story .eyebrow { color: #a9a1ff; }
.auth-page-story h1 { font-size: clamp(38px, 4.4vw, 58px); letter-spacing: -.06em; line-height: 1.02; margin: 0 0 16px; }
.auth-page-story p { color: #b7bdd0; font-size: 14px; line-height: 1.6; margin: 0 0 28px; max-width: 420px; }
.auth-value-list { display: grid; gap: 16px; margin: 0; padding: 0; }
.auth-value-list li { align-items: flex-start; color: #dfe2ee; display: flex; font-size: 12.5px; gap: 12px; list-style: none; }
.auth-value-list svg { color: #7fd8b4; flex: 0 0 auto; fill: none; height: 19px; margin-top: 1px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 19px; }
@media (max-width: 900px) {
  .auth-page-layout { display: block; margin-top: 40px; min-height: auto; }
  .auth-page-story { margin: 0 auto 30px; max-width: 520px; text-align: left; }
}

/* Password-recovery disclaimer — replaces a real "forgot password" flow */
.recovery-disclaimer { background: #fff7ed; border: 1px solid #fbd9a5; border-radius: 10px; color: #7a4d10; font-size: 11px; line-height: 1.6; margin: 14px 0 0; padding: 12px 14px; }
.recovery-disclaimer strong { display: block; font-size: 11.5px; margin-bottom: 4px; }
.recovery-disclaimer.is-hidden { display: none; }

/* Setup-wizard disclaimer (password step, onboarding.html) — same tone,   */
/* shown proactively rather than only after someone asks about recovery.  */
.setup-disclaimer { background: #fdeaee; border: 1px solid #f6c2cf; border-radius: 10px; color: #8a2540; font-size: 11px; line-height: 1.6; margin: 14px 0 0; padding: 12px 14px; }
.setup-disclaimer strong { display: block; font-size: 11.5px; margin-bottom: 4px; }

/* Sign-up entry page — big provider buttons instead of a login form */
.provider-stack { display: grid; gap: 11px; margin-top: 6px; }
.provider-button { align-items: center; background: #fff; border: 1px solid #e2e6ee; border-radius: 10px; display: flex; font-size: 12.5px; font-weight: 700; gap: 11px; min-height: 50px; padding: 0 16px; transition: background .2s, border-color .2s, transform .2s; width: 100%; }
.provider-button:hover { background: #f7f8fc; border-color: #cbd1de; transform: translateY(-1px); }
.provider-button svg { flex: 0 0 auto; fill: #1c2230; height: 18px; width: 18px; }
.provider-button.guest-provider-button svg { fill: none; stroke: #1c2230; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.provider-button.email-provider-button { background: #171d32; border-color: #171d32; color: #fff; }
.provider-button.email-provider-button:hover { background: #23294a; }
.provider-button.email-provider-button svg { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
#googleSignInContainer.provider-google-slot { max-width: 100%; overflow: hidden; width: 100%; }
#googleSignInContainer.provider-google-slot iframe { max-width: 100% !important; width: 100% !important; }

/* Onboarding wizard steps */
.wizard-steps { align-items: center; display: flex; gap: 8px; justify-content: center; margin: 0 0 22px; }
.wizard-step-dot { background: #e6e8f0; border-radius: 50px; color: #9099ac; font: 700 10px "DM Mono", monospace; height: 26px; width: 26px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.wizard-step-dot.is-active { background: linear-gradient(100deg, #3d83f5, #6853db); color: #fff; }
.wizard-step-dot.is-done { background: #171d32; color: #fff; }
.wizard-step-line { background: #e6e8f0; height: 2px; width: 26px; }
.wizard-step-line.is-done { background: #171d32; }
.wizard-panel.is-hidden { display: none; }
.avatar-upload-row { align-items: center; display: flex; gap: 16px; margin: 4px 0 20px; }
.avatar-upload-preview { align-items: center; background: #f2f3f7; border-radius: 50%; color: #9099ac; display: flex; flex: 0 0 auto; font: 700 18px "Manrope"; height: 72px; justify-content: center; overflow: hidden; width: 72px; }
.avatar-upload-preview img { height: 100%; object-fit: cover; width: 100%; }
.avatar-upload-controls { display: grid; gap: 6px; }
.avatar-upload-controls small { color: #979ead; font-size: 9.5px; }
.wizard-nav-row { display: flex; gap: 10px; margin-top: 22px; }
.wizard-nav-row .secondary-action { flex: 0 0 auto; justify-content: center; min-height: 46px; padding: 0 18px; }
.wizard-nav-row .primary-button { flex: 1; }

/* Anchor variants of the .auth-switch link (login/signup pages use <a> to  */
/* navigate between pages instead of toggling an in-page modal).           */
.auth-switch a { color: #5d50cf; font-size: 10px; font-weight: 800; text-decoration: none; }
.auth-switch a span { margin-left: 3px; }

/* Settings — Connect GitHub card */
.github-connected-row { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.github-connected-pill { align-items: center; background: #171d32; border-radius: 50px; color: #fff; display: inline-flex; font-size: 11.5px; font-weight: 700; gap: 8px; padding: 8px 14px; }
.github-connected-pill svg { fill: #fff; height: 15px; width: 15px; }

/* Visited-profile "Explore GitHub" button */
.explore-github-btn { background: #171d32; border-color: #171d32; color: #fff; }
.explore-github-btn svg { fill: #fff; height: 16px; width: 16px; }
.explore-github-btn:hover { background: #23294a; }
.up-actions-secondary { margin-top: 8px; }
.up-actions-secondary:has(.explore-youtube-btn:not(.is-hidden)) { margin-top: 8px; }
.explore-youtube-btn { background: #ff0033; border-color: #ff0033; color: #fff; }
.explore-youtube-btn svg { height: 17px; width: 17px; }
.explore-youtube-btn:hover { background: #d40029; }
body[data-theme="dark"] .explore-youtube-btn { box-shadow: 0 10px 22px rgba(255,0,51,.25); }

/* Profile → Languages tab (mirrors the language-bar look from Explore GitHub) */
.ge-lang-bar-row { align-items: center; display: flex; gap: 10px; margin-bottom: 10px; }
.ge-lang-bar-row .ge-lang-name { color: #4a5062; flex: 0 0 100px; font-size: 10.5px; font-weight: 700; }
.ge-lang-bar-track { background: #eef0f5; border-radius: 50px; flex: 1; height: 8px; overflow: hidden; }
.ge-lang-bar-fill { border-radius: 50px; height: 100%; }
.ge-lang-bar-row .ge-lang-pct { color: #9099ac; flex: 0 0 34px; font: 700 10px "DM Mono", monospace; text-align: right; }
.ge-lang-dot { border-radius: 50%; display: inline-block; height: 8px; width: 8px; }

/* Onboarding wizard — subtle polish: progress fill + step transition */
.wizard-panel { animation: wizard-step-in .25s ease; }
@keyframes wizard-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard-step-dot { box-shadow: 0 0 0 4px transparent; transition: background .2s, color .2s, box-shadow .2s; }
.wizard-step-dot.is-active { box-shadow: 0 0 0 4px rgba(93,80,207,.14); }
.avatar-upload-preview { transition: transform .15s; }
.avatar-upload-button:hover .avatar-upload-preview, #wizardAvatarButton:hover ~ .avatar-upload-preview { transform: scale(1.03); }

/* Post card "⋮" overflow menu — houses README/admin/delete actions so the
   primary row (Kudos, Save, Share) never overflows on narrower cards. */
.card-more-menu-wrap { position: relative; }
.card-more-button svg { fill: currentColor; height: 15px; stroke: none; width: 15px; }
.card-more-menu { background: #fff; border: 1px solid #e7eaf1; border-radius: 12px; box-shadow: 0 17px 42px rgba(25,32,61,.17); display: grid; gap: 2px; min-width: 190px; opacity: 0; padding: 6px; pointer-events: none; position: fixed; transform: translateY(-4px); transition: opacity .15s, transform .15s; z-index: 500; }
.card-more-menu-wrap.open .card-more-menu, .card-more-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.card-more-menu-item { align-items: center; background: transparent; border-radius: 8px; color: #4a5062; display: flex; font-size: 11px; font-weight: 700; gap: 9px; padding: 9px 10px; text-align: left; width: 100%; }
.card-more-menu-item:hover { background: #f5f6fa; }
.card-more-menu-item svg { fill: none; flex: 0 0 auto; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.card-more-menu-item.admin-delete-project-button, .card-more-menu-item.delete-project-button { color: #c23636; }
.card-more-menu-item.admin-feature-button.is-featured { color: #d99a1f; }

/* ------------------------------------------------------------------ */
/* Dark mode — toggled from Settings on the profile page. Covers the    */
/* main app chrome; auth pages (login/signup/onboarding) stay light.    */
/* ------------------------------------------------------------------ */
body[data-theme="dark"] {
  background: #000000;
  color: #f2f2f2;
  color-scheme: dark;
}
/* color-scheme above is the actual fix for "menu box list shows white in
   dark mode": a <select>'s dropdown list of options is drawn by the
   browser/OS using native chrome, not this stylesheet — no amount of CSS
   on the closed select touches it. Declaring color-scheme: dark tells the
   browser to draw all native widgets (select popups, checkboxes,
   scrollbars, date pickers) in their dark variant. */
body[data-theme="dark"] ::-webkit-scrollbar { height: 10px; width: 10px; }
body[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a2a2a; border: 2px solid #000000; border-radius: 10px; }
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #363636; }
body[data-theme="dark"] .topbar { background: rgba(13,17,23,.85); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .app-brand { color: #ffffff; }
body[data-theme="dark"] .rail-link { color: #9a9a9a; }
body[data-theme="dark"] .rail-link:hover { background: rgba(255,255,255,.06); color: #f2f2f2; }
body[data-theme="dark"] .rail-link.active { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #a78bfa; }
body[data-theme="dark"] .rail-count { background: rgba(255,255,255,.08); color: #d8d8d8; }
body[data-theme="dark"] .rail-label { color: #7d7d7d; }
body[data-theme="dark"] .handle-card { background: #121212; border-color: rgba(255,255,255,.08); box-shadow: 0 12px 26px rgba(1,4,9,.45); }
body[data-theme="dark"] .handle-card small { color: #9a9a9a; }

body[data-theme="dark"] .project-card, body[data-theme="dark"] .feed-card, body[data-theme="dark"] .poll-card-wrap,
body[data-theme="dark"] .settings-card, body[data-theme="dark"] .composer-card,
body[data-theme="dark"] .empty-state, body[data-theme="dark"] .modal,
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .announcement-card, body[data-theme="dark"] .license-info-card {
  background: #121212;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 32px rgba(1,4,9,.4);
  color: #f2f2f2;
}
/* .project-card gets its own, slightly more visible outline than the
   shared dark-mode block above — a plain post box reads "boxy" only when
   its edge is actually legible against the page background. */
body[data-theme="dark"] .project-card { border-color: rgba(255,255,255,.18); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px rgba(1,4,9,.5); }
body[data-theme="dark"] .project-card:hover { border-color: rgba(255,255,255,.3); }
/* Profile page mixes real project cards with flat community rows in the
   same list — on a near-black background both need a boundary that's
   actually legible, not just present in the DOM. */
body[data-theme="dark"] #profileProjectsList .project-card,
body[data-theme="dark"] #profileFeaturedList .project-card { border-color: rgba(255,255,255,.2); }
body[data-theme="dark"] #profileProjectsList .feed-card.community-post-row { border-top-color: rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.18); }
/* .popover and .card-more-menu are floating dropdowns that can appear
   over literally anything on the page — unlike the cards above, they
   don't have a guaranteed dark surface sitting behind them, so a
   semi-transparent background (which is what made them look like a
   washed-out white layer) isn't safe here. These need to be fully
   opaque. */
body[data-theme="dark"] .popover, body[data-theme="dark"] .card-more-menu {
  background: #181818;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 36px rgba(1,4,9,.5);
  color: #f2f2f2;
}
/* Community posts' flat, divider-line treatment is already fully defined
   near the light-mode rule above (including its own dark-mode lines) — no
   boxed card here to re-theme. */
body[data-theme="dark"] .project-summary p, body[data-theme="dark"] .split-copy p, body[data-theme="dark"] .compact-grid p,
body[data-theme="dark"] .feed-card-summary, body[data-theme="dark"] .composer-prompt span, body[data-theme="dark"] .feed-tools p,
body[data-theme="dark"] .empty-state, body[data-theme="dark"] .notice-item p, body[data-theme="dark"] .section-note,
body[data-theme="dark"] .project-author small, body[data-theme="dark"] .card-more-menu-item, body[data-theme="dark"] .announcement-card-text {
  color: #9099ac;
}
body[data-theme="dark"] .project-summary h2, body[data-theme="dark"] .split-copy h2, body[data-theme="dark"] .compact-grid h2,
body[data-theme="dark"] .empty-state h2, body[data-theme="dark"] .settings-card h3, body[data-theme="dark"] h1,
body[data-theme="dark"] .project-author strong, body[data-theme="dark"] .composer-prompt strong {
  color: #f1f2f8;
}
body[data-theme="dark"] .filter-chip { background: rgba(255,255,255,.045); color: #9a9a9a; }
body[data-theme="dark"] .filter-chip.active { background: linear-gradient(120deg, #6a5cf0, #4e3fc4); box-shadow: 0 8px 20px rgba(90,70,220,.35); color: #fff; }
body[data-theme="dark"] .tech-row span { background: rgba(255,255,255,.055); color: #d8d8d8; }
body[data-theme="dark"] .field-wrap, body[data-theme="dark"] .settings-field input, body[data-theme="dark"] .handle-input {
  background: #0e1220; border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] .field-wrap input, body[data-theme="dark"] .settings-field input, body[data-theme="dark"] .handle-input input,
body[data-theme="dark"] textarea, body[data-theme="dark"] input {
  background: transparent; color: #e7e9f3;
}
body[data-theme="dark"] .modal-layer { background: rgba(0,0,0,.6); }
body[data-theme="dark"] .action-button, body[data-theme="dark"] .secondary-action, body[data-theme="dark"] .preview-button {
  background: rgba(255,255,255,.06); color: #c7cbdb;
}
body[data-theme="dark"] .menu-panel, body[data-theme="dark"] .notification-panel { background: #181818; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .menu-panel-item { color: #d8d8d8; }
body[data-theme="dark"] .menu-panel-item:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .thread-list, body[data-theme="dark"] .thread-list-col, body[data-theme="dark"] .thread-head {
  border-color: rgba(255,255,255,.09);
}
body[data-theme="dark"] .thread-bubble { background: #171717; color: #f2f2f2; }
body[data-theme="dark"] .thread-bubble.mine { background: linear-gradient(135deg, #6a5cf0, #5748cb); color: #fff; }
body[data-theme="dark"] .thread-item:hover, body[data-theme="dark"] .thread-item.active { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .toast { background: #181818; border: 1px solid rgba(255,255,255,.1); color: #f2f2f2; }
body[data-theme="dark"] .app-view { background: transparent; }

/* Theme toggle — a labeled switch, not an icon, per request */
.theme-toggle-row { align-items: center; display: flex; justify-content: space-between; }
.theme-toggle { background: #e6e9f0; border-radius: 50px; display: inline-flex; padding: 3px; position: relative; width: 180px; }
.theme-toggle button { background: transparent; border-radius: 50px; color: #6a7284; flex: 1; font-size: 10.5px; font-weight: 800; padding: 8px 0; position: relative; text-align: center; transition: color .2s; z-index: 1; }
.theme-toggle button.active { color: #fff; }
.theme-toggle-thumb { background: #171d32; border-radius: 50px; height: calc(100% - 6px); left: 3px; position: absolute; top: 3px; transition: transform .2s ease; width: calc(50% - 3px); }
.theme-toggle[data-active="dark"] .theme-toggle-thumb { transform: translateX(100%); }
body[data-theme="dark"] .theme-toggle { background: rgba(255,255,255,.08); }
body[data-theme="dark"] .theme-toggle button { color: #9a9a9a; }
body[data-theme="dark"] .theme-toggle-thumb { background: #5748cb; }

/* Pull-to-refresh — mobile-style gesture, YouTube-app-like: pull down at
   the very top of the page to reload the current view. */
.pull-refresh-indicator { align-items: center; display: flex; height: 54px; justify-content: center; left: 0; position: fixed; right: 0; top: 0; transform: translateY(-60px); transition: transform .18s ease, opacity .18s ease; z-index: 200; opacity: 0; pointer-events: none; }
.pull-refresh-indicator.visible { opacity: 1; }
.pull-refresh-spinner { background: #fff; border-radius: 50%; box-shadow: 0 8px 22px rgba(25,32,61,.16); height: 34px; width: 34px; position: relative; }
.pull-refresh-spinner::before { border: 2.5px solid #e7e9f3; border-top-color: #5748cb; border-radius: 50%; content: ''; height: 20px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(var(--pull-rotate, 0deg)); width: 20px; }
.pull-refresh-indicator.refreshing .pull-refresh-spinner::before { animation: pull-spin .7s linear infinite; }
@keyframes pull-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
body[data-theme="dark"] .pull-refresh-spinner { background: #181818; }
body[data-theme="dark"] .pull-refresh-spinner::before { border-color: rgba(255,255,255,.15); border-top-color: #8f7bff; }

/* Settings — scrollable list of options, each opening its own detail view */
.settings-list { display: grid; gap: 8px; }
.settings-list-row { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; display: flex; justify-content: space-between; padding: 15px 16px; text-align: left; transition: background .15s, border-color .15s; }
.settings-list-row:hover { background: #f7f8fc; border-color: #d8dce6; }
.settings-list-row strong { color: #1c2230; display: block; font-size: 12.5px; }
.settings-list-row small { color: #9099ac; font-size: 10.5px; }
.settings-list-chevron { fill: none; flex: 0 0 auto; height: 16px; stroke: #b0b6c4; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 16px; }
.settings-back-button { align-items: center; background: transparent; color: #5748cb; display: inline-flex; font-size: 11.5px; font-weight: 800; gap: 6px; margin-bottom: 16px; padding: 8px 4px; }
.settings-back-button svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 16px; }
.settings-detail { display: grid; gap: 14px; }
body[data-theme="dark"] .settings-list-row { background: #181818; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .settings-list-row:hover { background: #1e1e1e; }
body[data-theme="dark"] .settings-list-row strong { color: #f1f2f8; }

/* Subscription plan cards */
.plan-card-head { align-items: flex-start; display: flex; justify-content: space-between; }
.plan-price { color: #5748cb; font: 800 13px "DM Mono", monospace; }
.plan-admin-actions { display: flex; gap: 6px; }
.plan-admin-actions .secondary-action { min-height: auto; padding: 6px 10px; }
.plan-feature-list { display: grid; gap: 6px; list-style: none; margin: 12px 0; padding: 0; }
.plan-feature-list li { color: #565e70; font-size: 10.5px; padding-left: 17px; position: relative; }
.plan-feature-list li::before { color: #7868e9; content: "✓"; font-weight: 800; left: 0; position: absolute; }
.plan-current-pill { background: #eef0ff; border-radius: 20px; color: #5748cb; font-size: 9px; font-weight: 800; padding: 5px 10px; white-space: nowrap; }
.plan-status-pill { border-radius: 20px; font-size: 9px; font-weight: 800; padding: 4px 9px; text-transform: capitalize; }
.plan-status-pending { background: #fff3d9; color: #9a6b00; }
.plan-status-successful { background: #e2f8ea; color: #1c8a4c; }
.plan-status-rejected, .plan-status-cancelled { background: #fdeaee; color: #c23f5e; }
.verified-tick-badge { color: #4e9bef; display: inline-flex; margin-left: 3px; vertical-align: middle; }
.verified-tick-badge svg { fill: currentColor; height: 13px; width: 13px; }
body[data-theme="dark"] .plan-feature-list li { color: #b7b7b7; }
body[data-theme="dark"] .plan-current-pill { background: rgba(120,104,233,.2); color: #b6a8ff; }

/* Advanced Search page — filter tabs, category/sort filters, popular      */
/* quick searches, tag cloud, project results, and the no-results state.   */
.search-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.search-filter-chip { background: #f4f5f9; border: 1px solid transparent; border-radius: 50px; color: #565e70; font-size: 11px; font-weight: 700; padding: 8px 14px; transition: background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease; }
.search-filter-chip:hover { border-color: #dcdff0; transform: translateY(-1px); }
.search-filter-chip:active { transform: scale(.95); }
.search-filter-chip.active { background: linear-gradient(100deg, #3d83f5, #6853db); box-shadow: 0 8px 18px rgba(61,131,245,.28); color: #fff; transform: translateY(-1px); }
.search-adv-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.search-adv-filters select { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 9px; color: #343a4a; font-size: 11px; font-weight: 600; height: 38px; padding: 0 10px; }
.search-popular-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.search-popular-chip { background: #fff; border: 1px solid #e6e9f0; border-radius: 50px; font-size: 11px; font-weight: 700; padding: 8px 14px; transition: transform .15s, border-color .15s; }
.search-popular-chip:hover { border-color: #b7bdff; transform: translateY(-1px); }
.search-clear-recent { background: transparent !important; color: #a0a6b4 !important; font-weight: 700 !important; margin-left: auto; padding: 4px 6px !important; text-decoration: underline; }
.search-results-section { margin-top: 18px; }
.search-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.search-tag-chip { background: #f1f0ff; border-radius: 50px; color: #6e5ed9; font-size: 11px; font-weight: 700; padding: 8px 14px; }
.search-tag-chip small { color: #9a90d9; font-weight: 600; margin-left: 3px; }
.search-project-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.search-page-input.search-input-wrap { background: #f7f8fc; border: 1.5px solid #e6e9f2; border-radius: 16px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.search-page-input.search-input-wrap:focus-within { background: #fff; border-color: #7e6cec; box-shadow: 0 0 0 4px rgba(126,108,236,.12), 0 10px 24px rgba(30,20,70,.06); }
body[data-theme="dark"] .search-page-input.search-input-wrap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .search-page-input.search-input-wrap input { color: #f2f2f2; }
body[data-theme="dark"] .search-page-input.search-input-wrap:focus-within { background: rgba(255,255,255,.07); }
@media (max-width: 700px) { .search-project-grid { grid-template-columns: 1fr; } }

body[data-theme="dark"] .search-filter-chip { background: rgba(255,255,255,.06); color: #d8d8d8; }
body[data-theme="dark"] .search-adv-filters select { background: #181818; border-color: rgba(255,255,255,.12); color: #f2f2f2; }
body[data-theme="dark"] .search-popular-chip { background: #181818; border-color: rgba(255,255,255,.09); color: #f2f2f2; }
body[data-theme="dark"] .search-tag-chip { background: rgba(255,255,255,.1); color: #a78bfa; }
body[data-theme="dark"] .search-input-wrap { background: #181818; border-color: rgba(255,255,255,.12); }
body[data-theme="dark"] .search-input-wrap input { background: transparent; color: #f2f2f2; }
body[data-theme="dark"] .search-person-row { border-top-color: rgba(255,255,255,.08); }

/* ------------------------------------------------------------------ */
/* "more options" (3-dot) menu — fix for it being effectively          */
/* invisible/untappable on phones: the dots were only ~2px across at   */
/* the old size with no button affordance, so on small screens people  */
/* genuinely couldn't see or reliably hit it. Appended last so these   */
/* rules win over every earlier breakpoint-scoped .action-button rule. */
/* ------------------------------------------------------------------ */
.card-more-menu-wrap { flex: 0 0 auto; position: relative; }
.card-more-button {
  align-items: center; background: rgba(103,88,217,.08); border-radius: 50%;
  display: inline-flex; flex-shrink: 0; height: 36px; justify-content: center;
  min-height: 36px; min-width: 36px; padding: 0; touch-action: manipulation; width: 36px;
}
.card-more-button:hover, .card-more-button:active { background: rgba(103,88,217,.16); }
.card-more-button svg { fill: currentColor !important; height: 19px !important; stroke: none !important; width: 19px !important; }
body[data-theme="dark"] .card-more-button { background: rgba(255,255,255,.09); }
body[data-theme="dark"] .card-more-button:hover, body[data-theme="dark"] .card-more-button:active { background: rgba(255,255,255,.16); }
.card-more-menu { max-width: calc(100vw - 16px); }

/* ------------------------------------------------------------------ */
/* Country feature — profile badge, searchable dropdown picker,        */
/* privacy selector, and Discover/Explore country filters.             */
/* ------------------------------------------------------------------ */
.profile-country { align-items: center; color: #6a7284; display: flex; font-size: 11px; font-weight: 700; gap: 6px; margin: 2px 0 0; }
.profile-country .country-flag { font-size: 14px; line-height: 1; }
body[data-theme="dark"] .profile-country { color: #a3a3a3; }

.country-picker { max-width: 360px; position: relative; width: 100%; }
.country-picker-trigger {
  align-items: center; background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 10px;
  color: #303748; display: flex; font-size: 12px; font-weight: 700; gap: 8px;
  height: 44px; padding: 0 12px; text-align: left; width: 100%;
}
.country-picker-trigger:hover { border-color: #c7cce0; }
.country-picker[data-open] .country-picker-trigger { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.12); }
.country-picker-placeholder { color: #9aa0b0; flex: 1; font-weight: 600; }
.country-picker-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-picker-chevron { flex: 0 0 auto; fill: none; height: 16px; margin-left: auto; stroke: #8890a3; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .15s; width: 16px; }
.country-picker[data-open] .country-picker-chevron { transform: rotate(180deg); }
.country-flag { font-size: 16px; line-height: 1; }

.country-picker-panel {
  background: #fff; border: 1px solid #e7eaf1; border-radius: 12px; box-shadow: 0 20px 46px rgba(25,32,61,.18);
  left: 0; margin-top: 6px; max-height: 340px; overflow: hidden; position: absolute; top: 100%;
  width: max(100%, 280px); z-index: 80; display: flex; flex-direction: column;
  animation: countryPanelIn .15s ease;
}
@keyframes countryPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.country-picker-search { align-items: center; border-bottom: 1px solid #eef0f5; display: flex; flex: 0 0 auto; gap: 8px; padding: 10px 12px; }
.country-picker-search svg { color: #9aa0b0; flex: 0 0 auto; fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; width: 15px; }
.country-picker-search input { background: transparent; border: 0; color: #2a3040; flex: 1; font-size: 12px; min-width: 0; outline: 0; }
.country-picker-list { display: grid; gap: 1px; overflow-y: auto; padding: 6px; }
.country-option {
  align-items: center; background: transparent; border-radius: 8px; color: #444b60;
  display: flex; font-size: 12px; font-weight: 600; gap: 10px; padding: 9px 10px; text-align: left; width: 100%;
}
.country-option:hover { background: #f5f6fa; }
.country-option.is-selected { background: #f0efff; color: #5748cb; }
.country-option .country-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-option .country-check { color: #5748cb; flex: 0 0 auto; }
.country-option .country-check svg, .country-option .country-check { height: 14px; width: 14px; }
.country-picker-empty { color: #9aa0b0; font-size: 11px; padding: 16px 10px; text-align: center; }

.country-privacy-options { display: flex; flex-wrap: wrap; gap: 8px; }
.country-privacy-option {
  background: #f2f3f7; border-radius: 8px; color: #6a7284; font-size: 10.5px; font-weight: 800; padding: 9px 13px;
}
.country-privacy-option:hover { background: #e7e8ee; }
.country-privacy-option.active { background: #5748cb; color: #fff; }

.discover-country-filter { align-items: center; display: flex; gap: 12px; margin: -6px 0 18px; }
.discover-country-filter-label { color: #8a91a2; flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.discover-country-filter .country-picker { max-width: 260px; }
.discover-country-filter .country-picker-trigger { height: 38px; }

body[data-theme="dark"] .country-picker-trigger { background: #181818; border-color: rgba(255,255,255,.12); color: #f2f2f2; }
body[data-theme="dark"] .country-picker-placeholder { color: #9a9a9a; }
body[data-theme="dark"] .country-picker-panel { background: #181818; border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .country-picker-search { border-bottom-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .country-picker-search input { color: #f2f2f2; }
body[data-theme="dark"] .country-option { color: #d8d8d8; }
body[data-theme="dark"] .country-option:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .country-option.is-selected { background: rgba(255,255,255,.1); color: #a78bfa; }
body[data-theme="dark"] .country-privacy-option { background: rgba(255,255,255,.06); color: #9a9a9a; }
body[data-theme="dark"] .country-privacy-option.active { background: #5748cb; color: #fff; }
body[data-theme="dark"] .discover-country-filter-label { color: #9a9a9a; }

@media (max-width: 640px) {
  .discover-country-filter { align-items: stretch; flex-direction: column; gap: 8px; }
  .discover-country-filter .country-picker { max-width: 100%; }
  .country-picker-panel { left: 0; right: 0; width: auto; }
}

/* Extra dark-theme refinement pass — deeper glow accents, crisper */
/* borders/inputs, and consistent premium accent treatment. */
/* The glow blobs below were tuned as a soft highlight against a white
   background — at the opacity/size that took, they show up as an obvious
   purple/blue wash against near-black, which is the opposite of the flat,
   neutral dark background every major app's dark mode actually uses. */
body[data-theme="dark"] .app-glow-one, body[data-theme="dark"] .app-glow-two { display: none; }
body[data-theme="dark"] .quick-add { background: linear-gradient(120deg, #6a5cf0, #4e3fc4); box-shadow: 0 10px 22px rgba(90,70,220,.32); }
body[data-theme="dark"] .primary-button { background: linear-gradient(100deg, #4d84f2, #6a5cf0); box-shadow: 0 12px 26px rgba(70,94,225,.35); }
body[data-theme="dark"] .icon-button:hover { background: rgba(255,255,255,.07); }
body[data-theme="dark"] .field-wrap:focus-within { border-color: #8170ee; box-shadow: 0 0 0 4px rgba(129,112,238,.18); }
body[data-theme="dark"] ::selection { background: rgba(255,255,255,.25); color: #fff; }
body[data-theme="dark"] .empty-search { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
body[data-theme="dark"] .composer-action { background: rgba(255,255,255,.09); color: #a78bfa; }
body[data-theme="dark"] .sale-badge, body[data-theme="dark"] .feed-card-draft-pill, body[data-theme="dark"] .feed-card-featured-pill { filter: brightness(1.08) saturate(1.05); }

/* ------------------------------------------------------------------ */
/* Schedule Post — premium scheduling modal + Scheduled Posts page.    */
/* Glassmorphism modal, rounded cards, smooth open/close animation,    */
/* full dark/light + responsive support.                               */
/* ------------------------------------------------------------------ */
.np-submit-row { align-items: center; display: flex; gap: 10px; }
.np-schedule-button {
  align-items: center; background: rgba(103,88,217,.09); border: 1.5px solid rgba(103,88,217,.16); border-radius: 12px; color: #5748cb;
  display: inline-flex; font-size: 11.5px; font-weight: 800; gap: 7px; justify-content: center; min-height: 46px; padding: 0 18px; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap;
}
.np-schedule-button:hover { background: rgba(103,88,217,.16); border-color: rgba(103,88,217,.3); transform: translateY(-1px); }
.np-schedule-button:active { transform: translateY(0); }
.np-schedule-button .btn-icon svg { height: 15px; width: 15px; }
body[data-theme="dark"] .np-schedule-button { background: rgba(139,123,255,.12); border-color: rgba(139,123,255,.22); color: #c2b8ff; }
body[data-theme="dark"] .np-schedule-button:hover { background: rgba(139,123,255,.2); border-color: rgba(139,123,255,.4); }

.schedule-modal {
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.5);
  border-radius: 22px; box-shadow: 0 30px 80px rgba(30,20,70,.28); max-width: 420px;
  animation: scheduleModalIn .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes scheduleModalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.schedule-field-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 14px 0; }
.schedule-field-grid label, .schedule-modal > label { color: #6a7284; display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.schedule-field-grid input {
  background: rgba(255,255,255,.7); border: 1px solid #e1e5ed; border-radius: 10px; color: #2a3040;
  font-size: 13px; font-weight: 600; height: 42px; margin-top: 5px; padding: 0 10px; text-transform: none; width: 100%;
}
.schedule-timezone-select {
  background: rgba(255,255,255,.7); border: 1px solid #e1e5ed; border-radius: 10px; color: #2a3040;
  font-size: 12px; font-weight: 600; height: 42px; margin: 6px 0 4px; padding: 0 10px; width: 100%;
}
.schedule-summary {
  background: linear-gradient(120deg, rgba(103,88,217,.1), rgba(77,132,242,.08));
  border: 1px solid rgba(103,88,217,.16); border-radius: 14px; margin: 16px 0; padding: 14px 16px;
}
.schedule-summary-empty { color: #8a91a2; font-size: 12px; font-weight: 600; margin: 0; }
.schedule-summary-country { color: #2a3040; font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.schedule-summary-tz { color: #6a7284; font-size: 11px; font-weight: 700; margin: 0 0 4px; }
.schedule-summary-when { color: #5748cb; font-size: 15px; font-weight: 800; margin: 0; }
.schedule-summary-warning { color: #d0483f; font-size: 11px; font-weight: 700; margin: 6px 0 0; }
.schedule-modal-actions { display: flex; gap: 10px; margin-top: 8px; }
.schedule-modal-actions button { flex: 1; height: 44px; justify-content: center; }

body[data-theme="dark"] .schedule-modal { background: rgba(20,24,42,.82); border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .schedule-field-grid label, body[data-theme="dark"] .schedule-modal > label { color: #9a9a9a; }
body[data-theme="dark"] .schedule-field-grid input, body[data-theme="dark"] .schedule-timezone-select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #f2f2f2; }
body[data-theme="dark"] .schedule-summary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .schedule-summary-country { color: #ffffff; }
body[data-theme="dark"] .schedule-summary-when { color: #a78bfa; }

/* Scheduled Posts page */
.scheduled-post-card {
  background: #fff; border: 1px solid #edeff5; border-radius: 18px; display: flex; gap: 14px;
  margin-bottom: 14px; padding: 16px; transition: box-shadow .15s, transform .15s;
}
.scheduled-post-card:hover { box-shadow: 0 14px 30px rgba(30,35,60,.08); transform: translateY(-1px); }
.scheduled-post-thumb {
  background: linear-gradient(135deg, #4b3fc9, #7649f7); border-radius: 12px; flex: 0 0 auto;
  height: 76px; overflow: hidden; width: 76px;
}
.scheduled-post-thumb img { display: block; height: 100%; object-fit: cover; width: 100%; }
.scheduled-post-thumb-fallback { align-items: center; color: #fff; display: flex; font-size: 26px; height: 100%; justify-content: center; width: 100%; }
.scheduled-post-body { flex: 1; min-width: 0; }
.scheduled-post-top { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.scheduled-post-title { color: #1e2232; font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheduled-post-status { align-items: center; border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; gap: 6px; padding: 4px 10px; white-space: nowrap; }
.scheduled-post-status::before { background: currentColor; border-radius: 50%; content: ""; flex: 0 0 auto; height: 6px; width: 6px; }
.scheduled-post-status.is-scheduled { background: rgba(230,178,20,.14); color: #a17b0c; }
.scheduled-post-status.is-published { background: rgba(23,201,100,.14); color: #128a4a; }
.scheduled-post-status.is-failed { background: rgba(240,80,70,.14); color: #c23a30; }
.scheduled-post-summary { color: #6a7284; font-size: 12px; margin: 4px 0 0; }
.scheduled-post-meta { color: #8a91a2; display: flex; flex-wrap: wrap; font-size: 11px; font-weight: 700; gap: 10px; margin-top: 8px; }
.scheduled-post-countdown { color: #5748cb; font-size: 12px; font-weight: 800; margin: 8px 0 0; }
.scheduled-post-error { color: #c23a30; font-size: 11.5px; margin: 6px 0 0; }
.scheduled-post-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scheduled-post-actions .secondary-action { font-size: 11px; height: 34px; padding: 0 12px; }

body[data-theme="dark"] .scheduled-post-card { background: linear-gradient(165deg, #121212, #0d0d0d49); border-color: rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }
body[data-theme="dark"] .scheduled-post-title { color: #ffffff; }
body[data-theme="dark"] .scheduled-post-summary { color: #9a9a9a; }
body[data-theme="dark"] .scheduled-post-meta { color: #9a9a9a; }
body[data-theme="dark"] .scheduled-post-status.is-scheduled { background: rgba(230,178,20,.16); color: #ecc35a; }
body[data-theme="dark"] .scheduled-post-status.is-published { background: rgba(23,201,100,.16); color: #5fe0a0; }
body[data-theme="dark"] .scheduled-post-status.is-failed { background: rgba(240,80,70,.18); color: #ff8a80; }

@media (max-width: 560px) {
  .schedule-field-grid { grid-template-columns: 1fr; }
  .scheduled-post-card { flex-direction: column; }
  .scheduled-post-thumb { height: 140px; width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Dedicated Chat page — opening a conversation now navigates to its    */
/* own full-screen page (with a real back button) instead of an inline  */
/* panel. The inline panel had no bounded height anywhere in its        */
/* ancestor chain, so overflow-y:auto on the message list never had     */
/* anything to actually clip against — the whole app page grew instead  */
/* of the message list scrolling internally. A fixed, viewport-sized    */
/* overlay sidesteps that completely and is consistent on every screen  */
/* size, instead of depending on the 3-column grid's row-stretch        */
/* behavior (which only exists above the 820px breakpoint).             */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Dedicated Chat page — opening a conversation navigates to its own    */
/* page (with a real back button) instead of an inline panel, so the    */
/* message list has an actual bounded container to scroll inside of     */
/* instead of dragging the whole app page along with it.                */
/*                                                                       */
/* This intentionally stays in normal page flow — NOT position:fixed —  */
/* so the topbar and bottom dock nav stay visible the way every other   */
/* page keeps them. (A fixed full-viewport overlay was tried first, but */
/* .app-layout creates its own stacking context via position:relative + */
/* z-index:1, so the overlay's z-index was only ever compared *inside*  */
/* that context — the topbar's z-index:10 and dock's z-index:25 sit     */
/* outside it and always painted over the overlay regardless of its own */
/* z-index. Staying in normal flow sidesteps that whole class of bug.)  */
/*                                                                       */
/* The page's height is set from JS (sizeChatPage in app.js) to exactly */
/* fill the gap between wherever it naturally starts (below the topbar) */
/* and the top of the dock — measured directly with getBoundingClientRect */
/* rather than guessed with hardcoded breakpoint numbers, so it stays   */
/* correct if either one's size ever changes, and re-runs on resize and */
/* on the mobile keyboard opening/closing (visualViewport), so the      */
/* compose bar and send button never end up hidden behind the dock.     */
/* ------------------------------------------------------------------ */
.chat-page {
  display: flex; flex-direction: column; overflow: hidden;
  animation: none; padding-top: 4px;
}
.chat-page-inner { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.chat-page .thread-head { background: #fff; border-radius: 14px 14px 0 0; flex: 0 0 auto; }
.chat-page .thread-messages { flex: 1; min-height: 0; }
.chat-page .thread-compose { background: #fff; border-radius: 0 0 14px 14px; flex: 0 0 auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.chat-page .thread-empty { flex: 1; }
.chat-page .chat-page-inner { background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 12px 30px rgba(28,35,61,.06); overflow: hidden; }
.thread-loading { align-items: center; display: flex; flex: 1; justify-content: center; }
.spinner { animation: spinner-spin .7s linear infinite; border: 2.5px solid #e1e5ed; border-radius: 50%; border-top-color: #5748cb; height: 26px; width: 26px; }
@keyframes spinner-spin { to { transform: rotate(360deg); } }

.thread-list-standalone { border-right: 0; flex: none; max-height: none; overflow: visible; }

body[data-theme="dark"] .chat-page-inner { background: #000000; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .chat-page .thread-head, body[data-theme="dark"] .chat-page .thread-compose { background: transparent; }
body[data-theme="dark"] .spinner { border-color: rgba(255,255,255,.14); border-top-color: #8f7ff0; }

@media (max-width: 820px) {
  .chat-page .chat-page-inner { border-radius: 0; border-width: 1px 0 0; }
  .chat-page { padding-top: 0; }
}
body.chat-page-open { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Full-screen chat mode — when a direct chat, group chat, or channel   */
/* is open, it becomes its own dedicated page: no side rails, no       */
/* topbar, no bottom dock, no card box around it — it simply fills the  */
/* viewport edge to edge, the way a real chat app opens a conversation. */
/* The back arrow in the thread head (data-nav-back) is what returns    */
/* to Messages and restores everything below.                          */
/* ------------------------------------------------------------------ */
body.chat-page-open .topbar { display: none; }
body.chat-page-open .creator-dock { display: none; }
body.chat-page-open .left-rail, body.chat-page-open .right-rail { display: none; }
body.chat-page-open .app-view { padding-bottom: 0; }
body.chat-page-open .app-layout { display: block; gap: 0; grid-template-columns: none !important; margin: 0; max-width: none; padding: 0; }
body.chat-page-open .chat-page { animation: none; padding-top: 0; }
body.chat-page-open .chat-page-inner { border: 0; border-radius: 0; box-shadow: none; }
body.chat-page-open .app-glow { display: none; }
body.chat-page-open .chat-page .thread-head { border-radius: 0; }
body.chat-page-open .chat-page .thread-compose { border-radius: 0; }

/* Profile page — professional redesign polish (cover banner, overlapping
   avatar, stat pills) in dark mode. */
body[data-theme="dark"] .profile-stat-divider { background: rgba(255,255,255,.1); }
body[data-theme="dark"] .profile-stats span { color: #9a9a9a; }
body[data-theme="dark"] .profile-header-pro .profile-avatar { border-color: #000000; }
body[data-theme="dark"] .profile-cover:not(.has-custom-cover) { background: linear-gradient(120deg, #5a4cd0 0%, #6d4cc0 32%, #3d64c2 100%); }
body[data-theme="dark"] .profile-cover:not(.has-custom-cover) .cover-edit-button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #f2f2f2; }

/* ===================== Dark theme: broader surface/text coverage =====================
   The dark theme originally only styled a subset of components, so plenty of cards,
   chips, buttons, and text throughout the app kept their light-mode colors and looked
   like the light theme was still on. This section extends dark styling to the rest.
   ===================================================================== */
body[data-theme="dark"] .oauth-button, body[data-theme="dark"] .provider-button { background:#181818;border-color:rgba(255,255,255,.14); }
body[data-theme="dark"] .oauth-button:hover, body[data-theme="dark"] .provider-button:hover, body[data-theme="dark"] .collection-item-row:hover, body[data-theme="dark"] .trending-stack-row:hover, body[data-theme="dark"] .card-more-menu-item:hover { background:#1e1e1e; }
body[data-theme="dark"] .explore-tile, body[data-theme="dark"] .collection-card, body[data-theme="dark"] .myproject-card, body[data-theme="dark"] .messages-shell, body[data-theme="dark"] .connection-card, body[data-theme="dark"] .connections-search { background:#181818;border-color:rgba(255,255,255,.09); }
body[data-theme="dark"] .feed-tabs, body[data-theme="dark"] .np-card, body[data-theme="dark"] .search-project-row, body[data-theme="dark"] .admin-user-row, body[data-theme="dark"] .search-trend-chip { background:#181818;border-color:rgba(255,255,255,.09); }
body[data-theme="dark"] .notification-row, body[data-theme="dark"] .np-type-card, body[data-theme="dark"] .blocked-handle-row, body[data-theme="dark"] .admin-order-row, body[data-theme="dark"] .admin-payout-row, body[data-theme="dark"] .creator-watch-card, body[data-theme="dark"] .readme-reader-page { background:#181818;border-color:rgba(255,255,255,.09); }
body[data-theme="dark"] .poll-option { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .poll-option:hover { border-color: rgba(139,123,255,.4); }
body[data-theme="dark"] .poll-option.is-voted { border-color: #8b7bff; }
body[data-theme="dark"] .poll-option-fill { background: linear-gradient(90deg, rgba(139,123,255,.28), rgba(139,123,255,.1)); }
body[data-theme="dark"] .poll-option-pct { color: #a78bfa; }
body[data-theme="dark"] .poll-meta { color: #9a9a9a; }
body[data-theme="dark"] .chat-page .chat-page-inner, body[data-theme="dark"] .collection-new, body[data-theme="dark"] .file-drop { background:#181818;border-color:rgba(255,255,255,.09); }
body[data-theme="dark"] .side-card { background:rgba(23,28,48,.85);border-color:rgba(255,255,255,.08); }
body[data-theme="dark"] .icon-only-button, body[data-theme="dark"] .myproject-actions button, body[data-theme="dark"] .typing-bubble, body[data-theme="dark"] .message-button, body[data-theme="dark"] .logout-button, body[data-theme="dark"] .thread-back-button { background:rgba(255,255,255,.06);color:#d8d8d8; }
body[data-theme="dark"] .np-pill, body[data-theme="dark"] .page-back-button, body[data-theme="dark"] .feed-card-link-button, body[data-theme="dark"] .notification-icon, body[data-theme="dark"] .thread-save-button, body[data-theme="dark"] .modal-close { background:rgba(255,255,255,.06);color:#d8d8d8; }
body[data-theme="dark"] .banner-upload-wrap, body[data-theme="dark"] .save-picker-item, body[data-theme="dark"] .share-option, body[data-theme="dark"] #recentSearches .search-trend-chip, body[data-theme="dark"] .np-license-explainer, body[data-theme="dark"] .earnings-status-pill { background:rgba(255,255,255,.06);color:#d8d8d8; }
body[data-theme="dark"] #upMessageButton, body[data-theme="dark"] .readme-reader-back, body[data-theme="dark"] .avatar-upload-preview, body[data-theme="dark"] .search-trigger, body[data-theme="dark"] .search-trigger kbd, body[data-theme="dark"] .tech-row span:last-child { background:rgba(255,255,255,.06);color:#d8d8d8; }
body[data-theme="dark"] .guest-banner button { background:rgba(255,255,255,.06);color:#d8d8d8; }
body[data-theme="dark"] .search-trigger:hover { background:rgba(255,255,255,.1); }
body[data-theme="dark"] .topic-pills button, body[data-theme="dark"] .search-suggestions button, body[data-theme="dark"] .thread-empty-icon, body[data-theme="dark"] .announcement-row .notification-icon, body[data-theme="dark"] .np-filename { background:rgba(255,255,255,.1);color:#a78bfa; }
body[data-theme="dark"] .thread-save-button.saved, body[data-theme="dark"] .collection-item-icon.project, body[data-theme="dark"] .buy-payment-info, body[data-theme="dark"] .feed-tab:hover, body[data-theme="dark"] .search-trend-chip:hover, body[data-theme="dark"] .notification-row.unread { background:rgba(255,255,255,.1);color:#a78bfa; }
body[data-theme="dark"] .rail-count.alert, body[data-theme="dark"] .danger-button, body[data-theme="dark"] .auth-error, body[data-theme="dark"] .admin-delete-user-button, body[data-theme="dark"] .admin-delete-project-button, body[data-theme="dark"] .unblock-handle-button { background:rgba(209,84,111,.18);color:#ff96ac; }
/* A handful of buttons/pills used #171d32 (near-black) as a bold
   contrast color designed to stand out on a white background — against
   the new dark-mode surfaces (#000000 / #121212) that's nearly
   invisible instead, which is the "button doesn't show its color"
   bug. Remap all of them to the same purple gradient already used for
   this role elsewhere in dark mode (.quick-add, .admin-tab.is-active). */
body[data-theme="dark"] .feed-card-link-button.github-button,
body[data-theme="dark"] .guest-create-account-btn,
body[data-theme="dark"] .github-connected-pill,
body[data-theme="dark"] .admin-confirm-order-button, body[data-theme="dark"] .admin-mark-paid-button,
body[data-theme="dark"] .provider-button.email-provider-button,
body[data-theme="dark"] .explore-github-btn {
  background: linear-gradient(120deg, #6a5cf0, #4e3fc4) !important; border-color: transparent !important; color: #fff !important;
}
body[data-theme="dark"] .follow-button, body[data-theme="dark"] .small-follow { background: rgba(31,157,85,.18); border-color: rgba(31,157,85,.35); color: #4ade80; }
body[data-theme="dark"] .follow-button.following, body[data-theme="dark"] .small-follow.following { background: rgba(37,146,111,.2); color: #4ade80; }
body[data-theme="dark"] .license-badge.license-reserved, body[data-theme="dark"] .setup-disclaimer { background:rgba(209,84,111,.18);color:#ff96ac; }
body[data-theme="dark"] .license-badge { border-color: transparent; box-shadow: none; }
body[data-theme="dark"] .license-badge.license-open { background: rgba(74,222,128,.16); color: #4ade80; }
body[data-theme="dark"] .license-badge.license-open .license-badge-icon { background: #2fae6a; }
body[data-theme="dark"] .license-badge.license-personal .license-badge-icon { background: #de7946; }
body[data-theme="dark"] .license-badge.license-reserved .license-badge-icon { background: #d1546f; }
body[data-theme="dark"] .icon-only-button.danger-icon-button:hover, body[data-theme="dark"] .danger-button:hover, body[data-theme="dark"] .myproject-actions button.delete-project-button, body[data-theme="dark"] .announcement-delete-button:hover { background:rgba(209,84,111,.3);color:#ffb3c2; }
body[data-theme="dark"] .project-kind.warm, body[data-theme="dark"] .feed-card-draft-pill, body[data-theme="dark"] .license-badge.license-personal, body[data-theme="dark"] .np-type-card.np-type-sell .np-type-icon, body[data-theme="dark"] .sale-badge, body[data-theme="dark"] .feed-card-featured-pill { background:rgba(222,121,70,.22);color:#ffb37a; }
body[data-theme="dark"] .admin-feature-button.is-featured, body[data-theme="dark"] .recovery-disclaimer { background:rgba(222,121,70,.22);color:#ffb37a; }
body[data-theme="dark"] .feed-tools p strong, body[data-theme="dark"] .trending-card li strong, body[data-theme="dark"] .creator-row strong, body[data-theme="dark"] .notice-item p strong, body[data-theme="dark"] .notice-item p b, body[data-theme="dark"] .empty-search h2, body[data-theme="dark"] .thread-item-body strong { color:#d8d8d8; }
body[data-theme="dark"] .toggle-copy strong, body[data-theme="dark"] .search-person-text strong, body[data-theme="dark"] .ql-copy strong, body[data-theme="dark"] .collection-item-text strong, body[data-theme="dark"] .admin-user-body strong, body[data-theme="dark"] .notification-body p { color:#d8d8d8; }
body[data-theme="dark"] .np-license-explainer strong, body[data-theme="dark"] .trending-stack-body strong, body[data-theme="dark"] .blocked-handle-body strong, body[data-theme="dark"] .admin-order-body strong, body[data-theme="dark"] .admin-payout-body strong, body[data-theme="dark"] .privacy-content h3, body[data-theme="dark"] .announcement-card-meta strong { color:#d8d8d8; }
body[data-theme="dark"] .license-info-points li.is-allowed { color:#d8d8d8; }
body[data-theme="dark"] .publish-modal label, body[data-theme="dark"] .signup-modal label, body[data-theme="dark"] .settings-field label, body[data-theme="dark"] .np-card label, body[data-theme="dark"] .ge-lang-bar-row .ge-lang-name, body[data-theme="dark"] .privacy-content p { color:#9a9a9a; }
body[data-theme="dark"] .license-info-tagline { color:#9a9a9a; }
body[data-theme="dark"] .auth-switch button, body[data-theme="dark"] .auth-switch a, body[data-theme="dark"] .action-button:hover, body[data-theme="dark"] .readme-button, body[data-theme="dark"] .settings-back-button, body[data-theme="dark"] .plan-price { color:#a78bfa; }
body[data-theme="dark"] .country-option .country-check, body[data-theme="dark"] .scheduled-post-countdown, body[data-theme="dark"] .admin-subscribe-button, body[data-theme="dark"] .profile-stat-link:hover strong { color:#a78bfa; }
body[data-theme="dark"] .card-more-menu-item.admin-delete-project-button, body[data-theme="dark"] .card-more-menu-item.delete-project-button, body[data-theme="dark"] .scheduled-post-error { color:#ff96ac; }
body[data-theme="dark"] .feed-card-byline { color:#9a9a9a; }

/* ------------------------------------------------------------------ */
/* Chat type switch — the big Direct / Group / Channel buttons at the   */
/* top of Messages, replacing the old small filter chips so each is an  */
/* easy, unmistakable tap target on mobile.                             */
/* ------------------------------------------------------------------ */
.chat-type-switch { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); margin: 4px 0 14px; }
.chat-type-btn { align-items: center; background: #f6f7fb; border: 1.5px solid #eceefa; border-radius: 11px; display: flex; flex-direction: row; gap: 6px; justify-content: center; padding: 9px 6px; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
.chat-type-btn:hover { transform: translateY(-1px); }
.chat-type-btn:active { transform: translateY(0); }
.chat-type-icon { align-items: center; background: #fff; border-radius: 7px; box-shadow: 0 2px 5px rgba(28,35,61,.05); color: #6a5cf0; display: flex; flex: 0 0 auto; height: 22px; justify-content: center; width: 22px; }
.chat-type-icon svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 12px; }
.chat-type-btn span:last-child { color: #565e75; font-size: 9.5px; font-weight: 800; }
.chat-type-btn.active { background: linear-gradient(150deg, #6a5cf0, #4d4bc7); border-color: transparent; box-shadow: 0 8px 18px rgba(92,81,209,.26); }
.chat-type-btn.active .chat-type-icon { background: rgba(255,255,255,.16); color: #fff; }
.chat-type-btn.active span:last-child { color: #fff; }
body[data-theme="dark"] .chat-type-btn { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .chat-type-icon { background: #181818; box-shadow: none; }
body[data-theme="dark"] .chat-type-btn span:last-child { color: #9a9a9a; }
body[data-theme="dark"] .chat-type-btn.active { background: linear-gradient(150deg, #6a5cf0, #4e3fc4); box-shadow: 0 8px 18px rgba(90,70,220,.32); }
body[data-theme="dark"] .chat-type-btn.active span:last-child { color: #fff; }
@media (max-width: 360px) { .chat-type-btn span:last-child { font-size: 8.5px; } .chat-type-btn { gap: 4px; padding: 8px 4px; } }

/* ------------------------------------------------------------------ */
/* Group chat — stickers                                                */
/* ------------------------------------------------------------------ */
.sticker-toggle-button { align-items: center; background: #f2f3f7; border-radius: 50%; color: #6a7284; display: flex; flex: 0 0 auto; height: 38px; justify-content: center; transition: background .15s, color .15s; width: 38px; }
.sticker-toggle-button:hover { background: #eceefa; color: #6a5cf0; }
.sticker-toggle-button svg { fill: none; height: 18px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 18px; }
.sticker-picker { background: #fff; border-top: 1px solid #eff0f4; display: grid; gap: 4px; grid-template-columns: repeat(8, 1fr); max-height: 132px; overflow-y: auto; padding: 10px 12px; }
.sticker-picker.is-hidden { display: none; }
.sticker-picker-item { align-items: center; background: transparent; border-radius: 9px; display: flex; font-size: 22px; height: 38px; justify-content: center; transition: background .12s, transform .12s; }
.sticker-picker-item:hover { background: #f4f2ff; transform: scale(1.12); }
.thread-bubble-sticker { background: none !important; box-shadow: none !important; padding: 2px 4px !important; }
.thread-bubble-sticker .sticker-emoji { display: block; font-size: 46px; line-height: 1; }
.thread-bubble-sticker.mine .thread-bubble-time { text-align: right; }
.thread-bubble-sticker .thread-bubble-time { color: #99a0b3 !important; }
body[data-theme="dark"] .sticker-picker { background: #181818; border-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .sticker-picker-item:hover { background: rgba(255,255,255,.08); }
body[data-theme="dark"] .sticker-toggle-button { background: rgba(255,255,255,.06); color: #9a9a9a; }
.channel-post-sticker { display: block; font-size: 52px; line-height: 1; margin: 4px 0; }

/* ---- Group chat — GIFs -------------------------------------------- */
.gif-toggle-button { cursor: pointer; font-size: 9.5px; font-weight: 900; letter-spacing: .02em; }
.thread-bubble-gif { background: none !important; box-shadow: none !important; padding: 0 !important; }
.thread-bubble-gif img { border-radius: 14px; display: block; max-height: 220px; max-width: 100%; }
.thread-bubble-gif.mine { align-self: flex-end; }
.thread-bubble-gif .thread-bubble-time { color: #99a0b3 !important; margin-top: 3px; }
.thread-bubble-gif.mine .thread-bubble-time { text-align: right; }
.thread-bubble-gif.is-sending { align-items: center; display: flex; height: 60px; justify-content: center; width: 90px; }

/* ---- Voice messages: DM, group chat, and channel posts ------------ */
.mic-button.is-recording { animation: mic-pulse 1.2s ease-in-out infinite; background: #fdeaee; color: #d1546f; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(209,84,111,.35); } 50% { box-shadow: 0 0 0 7px rgba(209,84,111,0); } }
.mic-rec-timer { font: 800 10px "DM Mono", monospace; }
.voice-message { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 22px; box-shadow: 0 2px 8px rgba(28,35,61,.05); display: flex; gap: 10px; min-width: 208px; padding: 6px 14px 6px 6px; transition: box-shadow .15s ease; }
.voice-play-button { align-items: center; background: linear-gradient(135deg, #6a5cf0, #4d3fc9); border-radius: 50%; box-shadow: 0 2px 6px rgba(92,81,209,.3); color: #fff; display: flex; flex: 0 0 auto; height: 34px; justify-content: center; transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease; width: 34px; }
.voice-play-button svg { fill: currentColor; height: 15px; width: 15px; }
.voice-play-button:hover { transform: scale(1.07); }
.voice-play-button:active { transform: scale(.92); }
.voice-icon-play.is-hidden, .voice-icon-pause.is-hidden { display: none; }
.voice-message-body { align-items: center; display: flex; flex: 1; gap: 9px; min-width: 0; }
.voice-message-wave { align-items: center; display: flex; flex: 1; gap: 2.5px; height: 22px; }
.voice-message-wave span { background: #d8dbe6; border-radius: 2px; display: block; height: var(--h, 40%); transition: background .2s ease, transform .2s ease; width: 3px; }
.voice-message-wave span.is-played { background: #6a5cf0; }
.voice-message.is-playing .voice-message-wave span.is-played { animation: voice-bar-pulse .9s ease-in-out infinite alternate; }
@keyframes voice-bar-pulse { from { transform: scaleY(.85); } to { transform: scaleY(1); } }
.voice-message.is-playing .voice-play-button { box-shadow: 0 0 0 4px rgba(92,81,209,.16), 0 2px 6px rgba(92,81,209,.3); }
.voice-message-duration { color: #99a0b3; flex: 0 0 auto; font: 700 9px "DM Mono", monospace; min-width: 28px; }
.thread-bubble-voice { background: none !important; box-shadow: none !important; padding: 0 !important; }
.thread-bubble-voice.mine .voice-message { background: linear-gradient(135deg, #5c51d1, #4d4bc7); border-color: transparent; box-shadow: 0 4px 12px rgba(92,81,209,.25); }
.thread-bubble-voice.mine .voice-play-button { background: rgba(255,255,255,.24); box-shadow: none; }
.thread-bubble-voice.mine .voice-message.is-playing .voice-play-button { box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.thread-bubble-voice.mine .voice-message-wave span { background: rgba(255,255,255,.32); }
.thread-bubble-voice.mine .voice-message-wave span.is-played { background: #fff; }
.thread-bubble-voice.mine .voice-message-duration { color: rgba(255,255,255,.85); }
.thread-bubble-voice .thread-bubble-time { color: #99a0b3 !important; margin-top: 3px; }
.thread-bubble-voice.mine .thread-bubble-time { text-align: right; }
.thread-bubble-voice.is-sending { align-items: center; display: flex; height: 40px; justify-content: center; width: 190px; }
.channel-post .voice-message { margin-top: 10px; }
.channel-post.is-sending { align-items: center; display: flex; height: 60px; justify-content: center; }
body[data-theme="dark"] .mic-button.is-recording { background: rgba(209,84,111,.2); color: #ff96ac; }
body[data-theme="dark"] .voice-message { background: #181818; border-color: rgba(255,255,255,.09); box-shadow: none; }
body[data-theme="dark"] .voice-message-wave span { background: rgba(255,255,255,.14); }
body[data-theme="dark"] .voice-message-duration { color: #9a9a9a; }

/* ------------------------------------------------------------------ */
/* Topbar profile context — on a profile page (yours or someone        */
/* else's), the topbar swaps its brand mark for a back arrow + @handle  */
/* instead. This is the only place the handle is shown now; the plain-  */
/* text version in the page body itself is hidden (see .profile-handle  */
/* { display: none } above).                                            */
/* ------------------------------------------------------------------ */
.topbar-profile-context { align-items: center; display: flex; gap: 12px; min-width: 202px; }
.topbar-profile-context .page-back-button { background: #f2f3f7; flex: 0 0 auto; height: 36px; width: 36px; }
.topbar-profile-context .page-back-button:hover { background: #e6e9f2; }
/* Own line-height + a hair of left padding so the "@" glyph (which in
   DM Mono sits close to the edge of its own cell) never grazes the
   overflow:hidden edge of the container — that graze is what read as
   the "@" getting cut off. Letter-spacing is normal (not negative) and
   there's a small gap baked in between "@" and the handle itself. */
.topbar-profile-handle { color: #181d30; display: inline-flex; align-items: baseline; font: 700 15px "DM Mono", monospace; letter-spacing: 0; line-height: 1.5; overflow: hidden; padding: 2px 3px; text-overflow: ellipsis; white-space: nowrap; }
body[data-theme="dark"] .topbar-profile-context .page-back-button { background: rgba(255,255,255,.08); color: #f2f2f2; }
body[data-theme="dark"] .topbar-profile-context .page-back-button:hover { background: rgba(255,255,255,.14); }
body[data-theme="dark"] .topbar-profile-handle { color: #ffffff; }
@media (max-width: 570px) { .topbar-profile-context { min-width: 0; } .topbar-profile-handle { font-size: 13px; max-width: 46vw; } }

/* ------------------------------------------------------------------ */
/* "How to use" guide page — a feature showcase grouped into sections,  */
/* each a grid of icon+title+description cards rather than a wall of   */
/* text, so someone can scan for the one thing they're looking for.     */
/* ------------------------------------------------------------------ */
.guide-intro { color: #7d859a; font-size: 12px; line-height: 1.6; margin: -6px 0 22px; max-width: 560px; }
.guide-section { margin-bottom: 26px; }
.guide-section-title { border-bottom: 1px solid #eff0f4; color: #333a4c; font-size: 13px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; padding-bottom: 10px; }
.guide-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.guide-card { background: #fff; border: 1px solid #eff0f4; border-radius: 15px; padding: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.guide-card:hover { border-color: #dfe2ec; box-shadow: 0 10px 24px rgba(28,35,61,.06); transform: translateY(-1px); }
.guide-card-icon { align-items: center; border-radius: 11px; display: flex; height: 34px; justify-content: center; margin-bottom: 11px; width: 34px; }
.guide-card-icon svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 16px; }
.guide-icon-purple { background: #f1edff; color: #7649f7; }
.guide-icon-blue { background: #e9f1ff; color: #2c6bd6; }
.guide-icon-teal { background: #e4f8f3; color: #0d9488; }
.guide-icon-amber { background: #fff3e0; color: #c2760c; }
.guide-icon-pink { background: #ffe9f0; color: #d43f7a; }
.guide-card h3 { font-size: 12px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.guide-card p { color: #7d859a; font-size: 11px; line-height: 1.6; margin: 0; }
.guide-inline-i { background: #eef0f7; border-radius: 50%; color: #6a7284; display: inline-flex; font: 700 8.5px "DM Mono", monospace; height: 13px; justify-content: center; line-height: 13px; width: 13px; }
@media (max-width: 640px) { .guide-grid { grid-template-columns: 1fr; } }

body[data-theme="dark"] .guide-intro { color: #9a9a9a; }
body[data-theme="dark"] .guide-section-title { border-color: rgba(255,255,255,.08); color: #f2f2f2; }
body[data-theme="dark"] .guide-card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .guide-card:hover { border-color: rgba(139,123,255,.35); }
body[data-theme="dark"] .guide-card p { color: #9a9a9a; }
body[data-theme="dark"] .guide-icon-purple { background: rgba(118,73,247,.2); color: #a78bfa; }
body[data-theme="dark"] .guide-icon-blue { background: rgba(44,107,214,.22); color: #9dc2ff; }
body[data-theme="dark"] .guide-icon-teal { background: rgba(13,148,136,.22); color: #6de6d5; }
body[data-theme="dark"] .guide-icon-amber { background: rgba(194,118,12,.22); color: #ffc773; }
body[data-theme="dark"] .guide-icon-pink { background: rgba(212,63,122,.2); color: #ff9dc0; }
body[data-theme="dark"] .guide-inline-i { background: rgba(255,255,255,.08); color: #9a9a9a; }

/* ------------------------------------------------------------------ */
/* Admin audit log                                                      */
/* ------------------------------------------------------------------ */
.audit-log-list { max-height: 420px; overflow-y: auto; }
.audit-log-row { border-bottom: 1px solid #eff0f4; padding: 12px 16px; }
.audit-log-row:last-child { border-bottom: none; }
.audit-log-row.is-warning { background: #fff5f5; }
.audit-log-row-main { align-items: baseline; display: flex; gap: 8px; margin-bottom: 4px; }
.audit-log-row-main strong { color: #333a4c; font-size: 11.5px; }
.audit-log-target { color: #6a5cf0; font-size: 10.5px; font-weight: 700; }
.audit-log-row-meta { color: #9099ac; display: flex; flex-wrap: wrap; font-size: 9.5px; gap: 10px; }
body[data-theme="dark"] .audit-log-row { border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .audit-log-row.is-warning { background: rgba(239,68,68,.1); }
body[data-theme="dark"] .audit-log-row-main strong { color: #f2f2f2; }
body[data-theme="dark"] .audit-log-target { color: #a78bfa; }
body[data-theme="dark"] .audit-log-row-meta { color: #9a9a9a; }

/* ------------------------------------------------------------------ */
/* Two-factor auth — settings modal (setup key, recovery codes)         */
/* ------------------------------------------------------------------ */
.twofa-modal { max-width: 400px; }
.twofa-key-box { background: #f6f7fb; border: 1.5px dashed #cabdff; border-radius: 12px; color: #4d3fc4; font: 700 15px "DM Mono", monospace; letter-spacing: .08em; padding: 16px; text-align: center; word-break: break-all; }
.twofa-recovery-grid { background: #f6f7fb; border-radius: 12px; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; padding: 16px; }
.twofa-recovery-grid span { color: #333a4c; font: 700 12px "DM Mono", monospace; letter-spacing: .02em; text-align: center; }
body[data-theme="dark"] .twofa-key-box { background: rgba(139,123,255,.12); border-color: rgba(139,123,255,.4); color: #a78bfa; }
body[data-theme="dark"] .twofa-recovery-grid { background: rgba(255,255,255,.045); }
body[data-theme="dark"] .twofa-recovery-grid span { color: #f2f2f2; }

.twofa-qr-wrap { align-items: center; background: #fff; border-radius: 14px; display: flex; justify-content: center; padding: 16px; }
.twofa-qr-wrap canvas { display: block; height: auto; max-width: 100%; }

/* ===================================================================== */
/* Admin page: tabs, professional announcement composer, countries panel, */
/* permissions grant cards, and the shared type-to-confirm modal.        */
/* ===================================================================== */

.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 20px; }
.admin-tab { align-items: center; background: #f3f4f9; border: 1px solid transparent; border-radius: 9px; color: #6a7284; display: inline-flex; font-size: 10px; font-weight: 800; gap: 6px; padding: 9px 13px; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.admin-tab svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }
.admin-tab:hover { background: #eceefb; color: #4a5166; }
.admin-tab.is-active { background: #171d32; border-color: #171d32; color: #fff; }
body[data-theme="dark"] .admin-tab { background: rgba(255,255,255,.06); color: #9a9a9a; }
body[data-theme="dark"] .admin-tab:hover { background: rgba(255,255,255,.1); color: #d8d8d8; }
body[data-theme="dark"] .admin-tab.is-active { background: #6a5cf0; border-color: #6a5cf0; color: #fff; }
.admin-tab-panel.is-hidden { display: none; }
.segmented-toggle { background: #f3f4f9; border-radius: 11px; display: inline-flex; gap: 4px; margin: 4px 0 18px; padding: 4px; }
.segmented-toggle-item { background: transparent; border: none; border-radius: 8px; color: #6a7284; cursor: pointer; flex: 1; font-size: 12px; font-weight: 800; padding: 9px 16px; transition: background .15s, color .15s; }
.segmented-toggle-item:hover { color: #4a5166; }
.segmented-toggle-item.is-active { background: #fff; box-shadow: 0 1px 4px rgba(20,22,40,.12); color: #171d32; }
body[data-theme="dark"] .segmented-toggle { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .segmented-toggle-item { color: #9a9a9a; }
body[data-theme="dark"] .segmented-toggle-item:hover { color: #d8d8d8; }
body[data-theme="dark"] .segmented-toggle-item.is-active { background: #1e1e1e; box-shadow: none; color: #f2f2f2; }

/* Announcement composer: three visually-numbered steps instead of one long
   stacked form, so it reads as a guided tool rather than a raw settings
   dump — title/body/image, then audience, then a live preview. */
.announcement-composer-pro { display: grid; gap: 18px; }
.announcement-composer-step { display: grid; gap: 4px; grid-template-columns: 26px 1fr; }
.announcement-composer-step-num { align-items: center; background: linear-gradient(135deg, #6a5cf0, #8b5cf6); border-radius: 50%; color: #fff; display: flex; font-size: 10.5px; font-weight: 800; height: 26px; justify-content: center; width: 26px; }
.announcement-composer-step-body { display: grid; gap: 4px; }
.announcement-composer-step-body label { color: #565e70; display: grid; font-size: 9px; font-weight: 800; gap: 6px; }
.announcement-composer-step-body input, .announcement-composer-step-body textarea, .announcement-composer-step-body select { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font: inherit; font-size: 11px; outline: 0; padding: 9px 10px; }
.announcement-composer-step-body input:focus, .announcement-composer-step-body textarea:focus, .announcement-composer-step-body select:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.announcement-composer-counter { color: #b3b8c6; font-size: 8.5px; margin: -2px 0 2px; text-align: right; }
.announcement-composer-step-preview { border-top: 1px dashed #e6e9f0; margin-top: 4px; padding-top: 16px; }
.announcement-composer-preview { background: #fafbfe; border: 1px dashed #d9dce7; border-radius: 13px; padding: 4px; }
.announcement-composer-preview .announcement-card { box-shadow: none; }
body[data-theme="dark"] .announcement-composer-step-body input, body[data-theme="dark"] .announcement-composer-step-body textarea, body[data-theme="dark"] .announcement-composer-step-body select { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f2f2f2; }
body[data-theme="dark"] .announcement-composer-step-preview { border-top-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .announcement-composer-preview { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }

/* Countries panel */
.admin-countries-list { display: grid; gap: 6px; }
.admin-country-row { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 12px; box-shadow: 0 6px 16px rgba(28,35,61,.03); display: flex; gap: 12px; padding: 11px 13px; }
.admin-country-flag { font-size: 18px; line-height: 1; }
.admin-country-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.admin-country-body strong { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-country-body small { color: #9099ac; font-size: 8.5px; letter-spacing: .04em; }
.admin-country-count { color: #6a7284; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
body[data-theme="dark"] .admin-country-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .admin-country-body small, body[data-theme="dark"] .admin-country-count { color: #9a9a9a; }

/* Permissions panel: grant cards + the shared confirm modal */
.admin-grant-card { border-color: rgba(239,68,68,.18); }
.admin-grant-card label { color: #565e70; display: grid; font-size: 9px; font-weight: 800; gap: 6px; margin: 10px 0; }
.admin-grant-card input { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font: inherit; font-size: 11px; outline: 0; padding: 9px 10px; }
body[data-theme="dark"] .admin-grant-card input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f2f2f2; }
.admin-confirm-grant-modal { max-width: 420px; }
.admin-confirm-grant-modal form { display: grid; gap: 13px; margin-top: 14px; }
.admin-confirm-grant-modal label { color: #565e70; display: grid; font-size: 9.5px; font-weight: 700; gap: 6px; }
.admin-confirm-grant-modal label strong { color: #171d32; font-family: "DM Mono", monospace; }
.admin-confirm-grant-modal input { background: #fafbfe; border: 1px solid #e1e5ed; border-radius: 8px; color: #303748; font: inherit; font-size: 12px; height: 39px; outline: 0; padding: 0 11px; }
.admin-confirm-grant-modal input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.admin-confirm-grant-submit:disabled { cursor: not-allowed; opacity: .45; }
body[data-theme="dark"] .admin-confirm-grant-modal label strong { color: #fff; }
body[data-theme="dark"] .admin-confirm-grant-modal input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f2f2f2; }

/* Offline-first (see offline-sync.js / sw.js) — status indicator, pending-outbox bubbles, project-drafts panel */
.offline-indicator { align-items: center; display: flex; flex-shrink: 0; gap: 5px; margin-left: 10px; padding: 4px 8px 4px 6px; border-radius: 20px; font-size: 9px; font-weight: 800; letter-spacing: .02em; transition: background-color .2s, color .2s; }
.offline-indicator-dot { height: 7px; width: 7px; border-radius: 50%; flex-shrink: 0; }
.offline-indicator.is-online { background: transparent; color: #8b93a3; }
.offline-indicator.is-online .offline-indicator-dot { background: #2fb970; }
.offline-indicator.is-offline { background: rgba(233, 84, 121, .12); color: #e95479; }
.offline-indicator.is-offline .offline-indicator-dot { background: #e95479; box-shadow: 0 0 0 3px rgba(233, 84, 121, .18); }
body[data-theme="dark"] .offline-indicator.is-online { color: #8c8c8c; }
body[data-theme="dark"] .offline-indicator.is-offline { background: rgba(233, 84, 121, .16); }
@media (max-width: 520px) { .offline-indicator { margin-left: 6px; padding: 4px; } .offline-indicator-text { display: none; } }

.thread-bubble.is-outbox-pending { opacity: .8; }
.thread-bubble.is-outbox-pending .outbox-status { align-items: center; color: rgba(255,255,255,.75) !important; display: flex; gap: 4px; }
.outbox-spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; height: 9px; width: 9px; }

.np-offline-drafts-card { border: 1px dashed #d8dceb; }
body[data-theme="dark"] .np-offline-drafts-card { border-color: rgba(255,255,255,.14); }
.np-offline-draft-row { align-items: center; border-top: 1px solid #eef0f6; display: flex; gap: 8px; padding: 9px 0; }
.np-offline-draft-row:first-of-type { border-top: 0; }
body[data-theme="dark"] .np-offline-draft-row { border-color: rgba(255,255,255,.08); }
.np-offline-draft-body { flex: 1; min-width: 0; }
.np-offline-draft-body strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-offline-draft-body small { color: #858c9c; font-size: 9px; }
.np-offline-draft-actions { display: flex; flex-shrink: 0; gap: 6px; }
.np-offline-draft-actions button { background: #f1f2f8; border-radius: 7px; font-size: 9px; font-weight: 700; padding: 6px 9px; }
.np-offline-draft-actions .np-offline-draft-delete { background: rgba(233,84,121,.1); color: #e95479; }
body[data-theme="dark"] .np-offline-draft-actions button { background: rgba(255,255,255,.08); color: #f2f2f2; }
body[data-theme="dark"] .np-offline-draft-actions .np-offline-draft-delete { background: rgba(233,84,121,.16); color: #ff90a8; }
.np-save-draft-button { align-items: center; background: transparent; border: 1px solid #d8dceb; border-radius: 9px; display: flex; font-size: 10px; font-weight: 800; gap: 6px; justify-content: center; padding: 10px; width: 100%; }
body[data-theme="dark"] .np-save-draft-button { border-color: rgba(255,255,255,.16); color: #f2f2f2; }

/* ------------------------------------------------------------------ */
/* Collaboration feature                                               */
/* ------------------------------------------------------------------ */
.ql-icon { position: relative; }
.ql-indigo { color: #4338ca; }
body[data-theme="dark"] .ql-indigo { color: #a5b4fc; }
.collab-quicklink-dot { background: #e95479; border: 2px solid #fff; border-radius: 50%; height: 9px; position: absolute; right: -2px; top: -2px; width: 9px; }
body[data-theme="dark"] .collab-quicklink-dot { border-color: #181818; }

/* Big, unmistakable Requests / Active tabs — deliberately larger than the
   standard .filter-chip strip used elsewhere, per request. */
.collab-tabs { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 4px 0 20px; }
.collab-tab { align-items: center; background: #fff; border: 1.5px solid #e6e9f0; border-radius: 14px; display: flex; gap: 10px; padding: 14px 16px; text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.collab-tab:hover { border-color: #c7ccdb; }
.collab-tab.active { background: #171d32; border-color: #171d32; box-shadow: 0 10px 22px rgba(23,29,50,.18); }
.collab-tab-icon { align-items: center; background: #f2f3f7; border-radius: 10px; color: #565e70; display: flex; flex: 0 0 auto; height: 36px; justify-content: center; width: 36px; }
.collab-tab-icon svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.collab-tab.active .collab-tab-icon { background: rgba(255,255,255,.14); color: #fff; }
.collab-tab-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.collab-tab-copy strong { color: #262c3d; font-size: 13px; font-weight: 800; }
.collab-tab.active .collab-tab-copy strong { color: #fff; }
.collab-tab-copy small { background: #f2f3f7; border-radius: 20px; color: #6a7284; font-size: 9.5px; font-weight: 800; padding: 1px 8px; width: fit-content; }
.collab-tab.active .collab-tab-copy small { background: rgba(255,255,255,.16); color: #fff; }
body[data-theme="dark"] .collab-tab { background: #161616; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .collab-tab:hover { border-color: rgba(255,255,255,.2); }
body[data-theme="dark"] .collab-tab.active { background: #6a5cf0; border-color: #6a5cf0; box-shadow: 0 10px 22px rgba(90,70,220,.3); }
body[data-theme="dark"] .collab-tab-icon { background: rgba(255,255,255,.07); color: #d8d8d8; }
body[data-theme="dark"] .collab-tab-copy strong { color: #f2f2f2; }
body[data-theme="dark"] .collab-tab-copy small { background: rgba(255,255,255,.09); color: #b7b7b7; }

.collab-request-card { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 13px; margin-bottom: 10px; padding: 15px; }
body[data-theme="dark"] .collab-request-card { background: #161616; border-color: rgba(255,255,255,.09); box-shadow: none; }
.collab-request-thumb { border-radius: 10px; flex: 0 0 auto; height: 50px; object-fit: cover; width: 50px; }
.collab-request-thumb-placeholder { display: block; }
.collab-request-body { flex: 1; min-width: 0; }
.collab-request-body p { color: #303748; font-size: 11.5px; line-height: 1.55; margin: 0 0 4px; }
.collab-request-body small { color: #9099ac; font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
body[data-theme="dark"] .collab-request-body p { color: #f2f2f2; }
.collab-request-actions { align-items: center; display: flex; flex: 0 0 auto; flex-direction: column; gap: 6px; }
.collab-request-actions .primary-button { font-size: 10px; min-width: 84px; padding: 9px 14px; }
.collab-request-actions .secondary-action { justify-content: center; min-width: 84px; padding: 8px 12px; }

.collab-active-card { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; box-shadow: 0 10px 25px rgba(28,35,61,.04); display: flex; gap: 13px; margin-bottom: 10px; padding: 15px; text-align: left; width: 100%; }
body[data-theme="dark"] .collab-active-card { background: #161616; border-color: rgba(255,255,255,.09); box-shadow: none; }
.collab-active-card .collab-request-body p { font-weight: 700; margin: 0 0 4px; }
.collab-active-card .collab-request-body small { text-transform: none; letter-spacing: normal; }
.collab-role-pill { background: #eef0f8; border-radius: 20px; color: #4b5266; flex: 0 0 auto; font-size: 9px; font-weight: 800; padding: 5px 11px; }
body[data-theme="dark"] .collab-role-pill { background: rgba(255,255,255,.08); color: #d8d8d8; }

.collab-avatar-stack { align-items: center; background: transparent; border: none; cursor: pointer; display: inline-flex; margin-left: 6px; padding: 2px; transition: transform .15s ease; vertical-align: middle; }
.collab-avatar-stack:hover { transform: translateY(-1px); }
.collab-avatar-stack:hover .collab-avatar-stack-item.mini-avatar { box-shadow: 0 3px 8px rgba(28,35,61,.18); }
.collab-avatar-stack-item.mini-avatar { border: 2px solid #fff; height: 20px; margin-left: -8px; transition: box-shadow .15s ease; width: 20px; font-size: 8px; }
.collab-avatar-stack-item.mini-avatar:first-child { margin-left: 0; }
.collab-avatar-stack-more { align-items: center; background: #ecebff; border: 2px solid #fff; border-radius: 50%; color: #6656d9; display: inline-flex; font-size: 7.5px; font-weight: 800; height: 20px; justify-content: center; margin-left: -8px; width: 20px; }
body[data-theme="dark"] .collab-avatar-stack-item.mini-avatar { border-color: #161616; }
body[data-theme="dark"] .collab-avatar-stack-more { background: rgba(106,92,240,.25); border-color: #161616; color: #b8b0ff; }

/* 🤝 Collaborators modal — opened by tapping the avatar stack above */
.collab-profiles-modal { max-width: 420px; width: 92vw; }
.collab-profiles-list { display: grid; gap: 8px; margin-top: 14px; max-height: 60vh; overflow-y: auto; }
.collab-profile-row { align-items: center; background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; display: flex; gap: 10px; padding: 12px; }
.collab-profile-row .mini-avatar { height: 36px; width: 36px; }
.collab-profile-body { display: grid; flex: 1; gap: 1px; min-width: 0; }
.collab-profile-body strong { font-size: 10.5px; }
.collab-profile-body small { color: #909aab; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-profile-row .small-follow { margin-left: auto; }
body[data-theme="dark"] .collab-profile-row { background: #161616; border-color: rgba(255,255,255,.09); }
.collab-pill { background: #eef0f8; color: #4b5266; letter-spacing: .02em; text-transform: uppercase; }
body[data-theme="dark"] .collab-pill { background: rgba(255,255,255,.08); color: #d8d8d8; }

.collab-invite-modal { max-width: 420px; }
.collab-invite-modal .modal-intro { color: #565e70; font-size: 11px; margin: -6px 0 16px; }
body[data-theme="dark"] .collab-invite-modal .modal-intro { color: #b7b7b7; }
.collab-section-label { margin: 16px 0 6px; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.collab-manage-row { align-items: center; display: flex; gap: 9px; padding: 8px 0; }
.collab-manage-row .thread-item-body { flex: 1; min-width: 0; }
.collab-manage-row .secondary-action { flex: 0 0 auto; font-size: 8.5px; padding: 7px 9px; }
#collabInviteCapNote { text-align: right; }

/* ------------------------------------------------------------------ */
/* Collections — real cover images + saved Cuts                        */
/* ------------------------------------------------------------------ */
.collection-card { transition: box-shadow .18s ease, transform .18s ease; }
.collection-cover { background: #f4f4fa; position: relative; }
.collection-cover-image { display: block; height: 100%; object-fit: cover; width: 100%; }
.collection-card.has-cover-image .collection-cover { box-shadow: inset 0 -24px 26px -10px rgba(10,11,20,.28); }
.collection-card.has-cover-image:hover { box-shadow: 0 16px 32px rgba(28,35,61,.1); transform: translateY(-2px); }
.collection-card.has-cover-image:hover .collection-cover-image { transform: scale(1.03); }
.collection-cover-image { transition: transform .3s ease; }

.collection-cuts-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.collection-cut-card {
  aspect-ratio: 9 / 16; background: #12141c; border: 0; border-radius: 12px; cursor: pointer;
  overflow: hidden; padding: 0; position: relative; text-align: left;
}
.collection-cut-card img { display: block; height: 100%; object-fit: cover; width: 100%; }
.collection-cut-card-fallback { align-items: center; color: #545d74; display: flex; height: 100%; justify-content: center; }
.collection-cut-card-fallback svg { fill: none; height: 24px; stroke: currentColor; stroke-width: 1.5; width: 24px; }
.collection-cut-card-badge {
  background: rgba(10,11,18,.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.14); border-radius: 20px;
  color: #fff; font: 800 7.5px "DM Mono", monospace; left: 6px; letter-spacing: .05em; padding: 3px 7px;
  position: absolute; text-transform: uppercase; top: 6px;
}
.collection-cut-card-remove {
  background: rgba(10,11,18,.55); backdrop-filter: blur(4px); border-radius: 50%; color: #fff; height: 22px;
  padding: 4px; position: absolute; right: 6px; top: 6px; width: 22px;
}
.collection-cut-card-remove:hover { background: rgba(209,84,111,.85); color: #fff; }
.collection-cut-card-title {
  background: linear-gradient(to top, rgba(6,7,14,.92) 0%, rgba(6,7,14,0) 85%); bottom: 0; color: #fff; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 9.5px; font-weight: 700; left: 0; line-height: 1.35;
  overflow: hidden; padding: 18px 8px 8px; position: absolute; right: 0;
}

/* ===================== auth screens: full-bleed redesign, no boxed card ===================== */
/* Login / signup / forgot & change / reset password / onboarding all share this
   markup (.auth-view > .auth-page-layout > .auth-card-wrap > .auth-card). Instead of a
   white panel floating on the dark background, the form now sits directly on it —
   full width, full height, no border/shadow/radius — so it reads as one full screen. */
.auth-card-head h2 { font-size: 38px; letter-spacing: -.03em; }
.auth-card-head .eyebrow { color: #a596ff; }
.auth-card-head p:last-child { color: rgba(248,250,255,.6); }
.auth-view .field-wrap { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.16); }
.auth-view .field-wrap:focus-within { background: rgba(255,255,255,.07); border-color: #8b7bff; box-shadow: 0 0 0 4px rgba(139,123,255,.16); }
.auth-view .field-wrap > svg { color: rgba(248,250,255,.4); }
.auth-view .field-wrap input { color: #f8faff; }
.auth-view .field-wrap input::placeholder { color: rgba(248,250,255,.35); }
.auth-view .password-toggle { color: rgba(248,250,255,.45); }
.auth-view .text-button { color: #a596ff; }
.auth-view .handle-hint { color: rgba(248,250,255,.45); }
.auth-view .handle-hint strong { color: #b9adff; }
.auth-view .check-label { color: rgba(248,250,255,.65); }
.auth-view .check-label span { border-color: rgba(255,255,255,.28); }
.auth-view .secure-note { color: rgba(248,250,255,.45); }
.auth-view .divider { color: rgba(248,250,255,.4); }
.auth-view .divider::before, .auth-view .divider::after { background: rgba(255,255,255,.14); }
.auth-view .oauth-button, .auth-view .provider-button { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.16); color: #f8faff; }
.auth-view .oauth-button:hover, .auth-view .provider-button:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.3); }
.auth-view .provider-button svg { fill: #f8faff; }
.auth-view .provider-button.guest-provider-button svg { fill: none; stroke: #f8faff; }
.auth-view .auth-switch { color: rgba(248,250,255,.55); }
.auth-view .auth-switch a, .auth-view .auth-switch button { color: #b9adff; }
.auth-view .legal-copy { color: rgba(248,250,255,.35); }
.auth-view .legal-copy a { color: rgba(248,250,255,.55); }
.auth-view .auth-error { background: rgba(209,84,111,.18); color: #ff96ac; }
.auth-view .section-note { color: rgba(248,250,255,.45); }
.auth-view .status-pill { color: rgba(248,250,255,.7); }
@media (max-width: 600px) { .auth-card-head h2 { font-size: 29px; } }

/* Keyboard fix — inputs under 16px trigger iOS Safari's auto-zoom-on-focus.
   That zoom shifts the whole layout mid-flow, so the next tap (e.g. on the
   Confirm password field right after typing New password) can land off the
   real input and look like the keyboard "isn't opening". Locking all auth
   inputs to 16px stops the zoom entirely, so focus always lands cleanly. */
.auth-view input { font-size: 16px; touch-action: manipulation; }
.auth-view .field-wrap { touch-action: manipulation; }

/* ===================== collaboration promo button ===================== */
/* On your own project cards this used to be a fourth small icon squeezed
   into the Kudos/Save/Share rail. It's now its own full-width bar sitting
   above that rail — wider than the three icon buttons it sits over, so it
   reads as the one action here that recruits someone onto the project,
   not just another same-size icon. */
.collab-promo-button {
  align-items: center;
  background: linear-gradient(100deg, #4c8cff, #7a5cf0, #4c8cff);
  background-size: 200% 100%;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(90,80,230,.28);
  color: #fff;
  display: flex;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 14px;
  transition: background-position .5s ease, box-shadow .2s, transform .2s;
  width: 100%;
}
.collab-promo-button:hover { background-position: 100% 0; box-shadow: 0 13px 28px rgba(90,80,230,.38); transform: translateY(-1px); }
.collab-promo-icon { align-items: center; background: rgba(255,255,255,.22); border-radius: 9px; display: flex; flex: 0 0 auto; height: 30px; justify-content: center; width: 30px; }
.collab-promo-icon svg { height: 16px; width: 16px; }
.collab-promo-button > span:last-child { display: grid; font-size: 11.5px; font-weight: 800; gap: 1px; letter-spacing: -.01em; text-align: left; }
.collab-promo-button > span:last-child small { color: rgba(255,255,255,.75); font-size: 8.5px; font-weight: 600; }

/* ===================== profile "Collaboration" quicklink ===================== */
/* The other three quicklinks are square icon-over-label tiles in a 3-up
   grid; Collaboration used to be a fourth tile the same tiny size,
   stranded alone on its own row. It now spans the full row — as wide as
   the three tiles above it combined — and borrows the same gradient
   banner treatment the old card-level collab button used, so it reads
   as the one standout action on the profile rather than a leftover tile. */
.profile-quicklink-collab {
  background: linear-gradient(100deg, #4c8cff, #7a5cf0, #4c8cff);
  background-size: 200% 100%;
  border: none;
  box-shadow: 0 10px 22px rgba(90,80,230,.28);
  flex-direction: row;
  gap: 12px;
  grid-column: 1 / -1;
  padding: 14px 16px;
  text-align: left;
  transition: background-position .5s ease, box-shadow .2s, transform .2s;
}
.profile-quicklink-collab:hover { background-position: 100% 0; box-shadow: 0 13px 28px rgba(90,80,230,.38); transform: translateY(-2px); }
.profile-quicklink-collab .ql-icon.ql-indigo { background: rgba(255,255,255,.22); box-shadow: none; color: #fff; }
.profile-quicklink-collab .ql-copy { text-align: left; }
.profile-quicklink-collab .ql-copy strong { color: #fff; font-size: 12px; }
.profile-quicklink-collab .ql-copy small { color: rgba(255,255,255,.78); display: block; font-size: 9px; font-weight: 600; margin-top: 1px; }
.profile-quicklink-collab .ql-arrow { display: block; flex: 0 0 auto; height: 16px; margin-left: auto; stroke: rgba(255,255,255,.85); width: 16px; }
body[data-theme="dark"] .profile-quicklink-collab { border: none; }

/* ===================== edit project modal ===================== */
.edit-project-modal .settings-field { margin-bottom: 14px; }
.edit-project-modal .settings-field textarea { font-family: inherit; resize: vertical; }
.edit-project-collab-section { border-top: 1px solid #eff0f4; margin-top: 18px; padding-top: 4px; }
body[data-theme="dark"] .edit-project-collab-section { border-color: rgba(255,255,255,.08); }
.collab-manage-row { align-items: center; display: flex; gap: -6px; margin: 10px 0 12px; }
.collab-manage-row .thread-item-body { margin-left: 8px; }
.collab-manage-row > span:not(.thread-item-body) { margin-right: -8px; }
.action-button.edit-project-button svg, .card-more-menu-item.edit-project-button svg { height: 15px; width: 15px; }

/* ===================== upload-form collaborators card ===================== */
#npCollabList { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.np-pill-removable { align-items: center; background: #f0edfd; border-radius: 20px; color: #5c51d1; display: inline-flex; font-size: 10.5px; font-weight: 700; gap: 6px; padding: 6px 8px 6px 12px; }
.np-pill-removable button { align-items: center; background: rgba(92,81,209,.14); border-radius: 50%; color: #5c51d1; display: flex; font-size: 12px; height: 16px; justify-content: center; line-height: 1; width: 16px; }
body[data-theme="dark"] .np-pill-removable { background: rgba(139,123,255,.16); color: #cabdfd; }
body[data-theme="dark"] .np-pill-removable button { background: rgba(139,123,255,.22); color: #cabdfd; }

/* ===================== chat: presence, typing, read receipts ===================== */
/* A small pulsing dot next to the avatar/name reads faster than text at
   this size, so "Online" gets one; the offline state is just the
   relative "last seen" line the other person's privacy setting allows. */
.presence-status { align-items: center; display: inline-flex; gap: 5px; }
.presence-status.online { color: #17c964; font-weight: 700; }
.presence-dot { background: #17c964; border-radius: 50%; box-shadow: 0 0 0 3px rgba(23,201,100,.18); flex: 0 0 auto; height: 7px; width: 7px; animation: presence-pulse 2s ease-in-out infinite; }
@keyframes presence-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.group-presence-status { color: #17c964; font-weight: 700; }
.group-presence-status:empty { display: none; }

.typing-indicator-row { align-items: center; animation: typing-row-in .18s ease; display: flex; gap: 9px; padding: 4px 16px 12px; }
.typing-indicator-row .typing-indicator-label { color: #6b7484; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.typing-dots { align-items: center; background: linear-gradient(180deg, #f5f6fa, #eceef4); border: 1px solid rgba(20, 24, 34, .06); border-radius: 16px 16px 16px 5px; box-shadow: 0 2px 6px rgba(20, 24, 34, .06); display: inline-flex; gap: 4px; padding: 10px 13px; }
.typing-dots span { animation: typing-bounce 1.1s ease-in-out infinite; background: #9aa3b5; border-radius: 50%; height: 6px; width: 6px; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes typing-row-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
body[data-theme="dark"] .typing-indicator-row .typing-indicator-label { color: #9aa3b5; }
body[data-theme="dark"] .typing-dots { background: linear-gradient(180deg, #232329, #1a1a1e); border-color: rgba(255, 255, 255, .07); }
body[data-theme="dark"] .typing-dots span { background: #6c6c78; }

.thread-bubble-ticks { display: inline-flex; margin-left: 3px; vertical-align: -1px; }
.tick-icon { fill: none; height: 10px; stroke: rgba(255,255,255,.65); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; width: 10px; }
.tick-icon.tick-read { stroke: #6fe3ff; width: 13px; }
body[data-theme="dark"] .tick-icon.tick-read { stroke: #7fd8ff; }

/* ===================== chat page: cooler, more professional polish ===================== */
.chat-page .thread-head { backdrop-filter: blur(10px); background: rgba(255,255,255,.92); }
body[data-theme="dark"] .chat-page .thread-head { background: rgba(20,20,20,.85); }
.thread-avatar-wrap.has-presence-dot { position: relative; }
.thread-avatar-wrap.has-presence-dot::after { background: #17c964; border: 2px solid #fff; border-radius: 50%; bottom: -1px; content: ''; height: 10px; position: absolute; right: -1px; width: 10px; animation: presence-pulse 2s ease-in-out infinite; }
body[data-theme="dark"] .thread-avatar-wrap.has-presence-dot::after { border-color: #121212; }
.thread-messages { background: linear-gradient(180deg, #fbfaff 0%, #f8f9fc 100%); }
body[data-theme="dark"] .thread-messages { background: #0d0d0d; }
.thread-bubble { letter-spacing: -.005em; }
.thread-bubble.mine { box-shadow: 0 6px 16px rgba(92,81,209,.26); }
.thread-compose { backdrop-filter: blur(10px); }