: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; }

/* 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; }
.auth-card { background: rgba(255,255,255,.985); border: 1px solid rgba(255,255,255,.5); border-radius: 21px; box-shadow: 0 36px 90px rgba(0,0,0,.33); color: #151a29; padding: 35px 38px 26px; }
.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: 10px; color: #959bad; display: flex; font-size: 11px; gap: 9px; height: 39px; max-width: 440px; padding: 0 10px 0 13px; text-align: left; transition: border-color .2s, background .2s; width: min(34vw, 440px); }.search-trigger:hover { background: #fff; border-color: #cfd4df; }.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: 4px; color: #a4a9b6; font: 9px "DM Mono", monospace; padding: 3px 5px; }
.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-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; }.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; }
.project-feed { display: grid; gap: 18px; }.project-card { background: #fff; border: 1px solid #e6e9f0; border-radius: 16px; box-shadow: 0 12px 29px rgba(28,35,61,.045); overflow: hidden; padding: 0; position: relative; transition: box-shadow .18s, border-color .18s; }.project-card:hover { border-color: #dfe2ec; box-shadow: 0 16px 36px rgba(28,35,61,.075); }.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; }
.feed-card.is-community-post {
  background: none; border: none; border-radius: 0; border-bottom: 1px solid #eff0f4;
  box-shadow: none; overflow: visible; padding: 22px 2px;
}
.feed-card.is-community-post:hover { border-color: #eff0f4; box-shadow: none; }
.feed-card.is-community-post .project-author .mini-avatar { height: 42px; width: 42px; }
.feed-card.is-community-post .project-author strong { font-size: 12.5px; }
.feed-card.is-community-post .project-author small { font-size: 10px; }
.feed-card.is-community-post .feed-card-copy h2 { color: #1a7a5c; font-size: 15px; margin-bottom: 6px; }
.feed-card.is-community-post .feed-card-summary { color: #333a4c; font-size: 13px; line-height: 1.7; }
.feed-card.is-community-post .feed-card-content { margin-top: 14px; }
.feed-card.is-community-post .feed-card-main { margin-top: 4px; }
.project-feed .feed-card.is-community-post:first-child { padding-top: 4px; }
.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(12,17,33,.96); border: 1px solid rgba(147,158,198,.19); border-radius: 29px; bottom: 28px; box-shadow: 0 22px 45px rgba(10,15,30,.27), inset 0 1px rgba(255,255,255,.055); display: flex; gap: clamp(18px, 3.4vw, 58px); height: 104px; justify-content: center; left: 50%; padding: 11px clamp(20px, 3vw, 45px); position: fixed; transform: translateX(-50%); z-index: 25; }.dock-item { align-items: center; background: transparent; color: #f4f6ff; display: flex; flex-direction: column; font-size: 10px; font-weight: 700; gap: 4px; min-width: 59px; padding: 0; transition: color .2s, transform .2s; }.dock-icon { align-items: center; display: flex; height: 48px; justify-content: center; width: 48px; }.dock-icon svg { fill: none; height: 42px; overflow: visible; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; width: 42px; }.home-icon svg { fill: url(#none); stroke: #61a5ff; filter: drop-shadow(0 5px 5px rgba(49,142,255,.3)); }.home-icon svg path { fill: #5ba4ff; stroke: #5ba4ff; }.chat-icon { color: #4ee9bd; }.chat-icon svg { stroke: currentColor; }.connections-icon { color: #a557fc; }.connections-icon svg { fill: url(#none); stroke: currentColor; }.connections-icon svg circle { fill: currentColor; stroke: currentColor; }.profile-icon { color: #ffd764; }.profile-icon svg { stroke: currentColor; }.profile-icon svg circle { fill: currentColor; stroke: currentColor; }.dock-create { align-items: center; background: transparent; color: #f7f6ff; display: grid; gap: 2px; justify-items: center; padding: 0; position: relative; transform: translateY(-9px); }.dock-create > span { align-items: center; background: linear-gradient(140deg, #427dff 5%, #753ae7 58%, #b642f3 100%); border: 1px solid rgba(187,144,255,.9); border-radius: 50%; box-shadow: 0 0 0 8px rgba(102,70,246,.08), 0 0 29px rgba(137,62,245,.5); display: flex; height: 66px; justify-content: center; width: 66px; }.dock-create svg { fill: none; height: 38px; stroke: #fff; stroke-linecap: round; stroke-width: 4; width: 38px; }.dock-create b { font-size: 9px; white-space: nowrap; }.dock-item.active { color: #fff; }.dock-item.active .home-icon { transform: translateY(-1px); }.dock-item:hover, .dock-create:hover { transform: translateY(-3px); }

/* 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 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 { border-radius: 17px; padding: 28px 22px 22px; }.auth-card-head h2 { font-size: 24px; }.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: transparent; border: 0; margin-left: auto; padding: 0; width: auto; }.search-trigger span, .search-trigger kbd { display: none; }.search-trigger svg { height: 20px; width: 20px; }.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; }
}

@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: sort tabs (Latest / Most Kudos / Trending / Most
   Viewed) as the primary control, category chips + country picker as
   secondary — replaces the old static "trending" banner that didn't
   actually do anything. */
.explore-filter-bar { background: #fff; border: 1px solid #e6e9f0; border-radius: 16px; box-shadow: 0 10px 25px rgba(28,35,61,.04); margin-bottom: 18px; padding: 16px 18px; }
.explore-sort-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.explore-sort-tab { align-items: center; background: #f3f4f9; border: 1px solid transparent; border-radius: 10px; color: #565e70; display: inline-flex; font-size: 10.5px; font-weight: 800; gap: 6px; padding: 9px 13px; transition: background .15s, color .15s, transform .1s; }
.explore-sort-tab svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }
.explore-sort-tab:hover { background: #eceefb; color: #303748; }
.explore-sort-tab:active { transform: scale(.97); }
.explore-sort-tab.active { background: linear-gradient(120deg, #171d32, #2a2f5a); box-shadow: 0 8px 18px rgba(23,29,50,.25); color: #fff; }
.explore-secondary-filters { align-items: center; border-top: 1px solid #eef0f5; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 14px; }
.explore-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.explore-country-filter.discover-country-filter { margin: 0; }
.explore-country-filter .country-picker { max-width: 190px; }

.explore-load-more-wrap { display: flex; justify-content: center; margin: 22px 0 6px; }
.explore-load-more-button { align-items: center; display: inline-flex; gap: 7px; padding: 0 22px; }
.explore-load-more-button svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 14px; }
.explore-load-more-button:disabled { cursor: default; opacity: .6; }

.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-bar { background: #131a2e; border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .explore-sort-tab { background: rgba(255,255,255,.06); color: #8b949e; }
body[data-theme="dark"] .explore-sort-tab:hover { background: rgba(255,255,255,.1); color: #c9d1d9; }
body[data-theme="dark"] .explore-sort-tab.active { background: linear-gradient(120deg, #6a5cf0, #4e3fc4); box-shadow: 0 8px 20px rgba(90,70,220,.35); }
body[data-theme="dark"] .explore-secondary-filters { border-top-color: rgba(255,255,255,.08); }
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-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.category-chip { background: #fff; border: 1px solid #e6e9f0; border-radius: 50px; color: #697185; font-size: 10px; font-weight: 800; padding: 9px 14px; transition: background .15s, color .15s, border-color .15s; }
.category-chip:hover { border-color: #cbd1de; }
.category-chip.active { background: #171d32; border-color: #171d32; color: #fff; }
.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 62px;  background: transparent; border-bottom: 1px solid #f4f5f9; border-left: 3px solid transparent; display: flex; gap: 9px; padding: 13px 14px 13px 12px; 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; }
.thread-item .mini-avatar { flex: 0 0 auto; height: 32px; width: 32px; }
.thread-item-body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.thread-item-body strong { color: #333a4c; font-size: 10px; }
.thread-item-body small { color: #909aab; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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 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); }
.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; }
/* 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; width: 84px; }
.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 #0d1117, 0 0 0 6px #8b5cf6; }
.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); }
body[data-theme="dark"] .profile-header-row-actions .profile-share-icon { background: #1c2128; border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .profile-edit-btn { background: #1c2128; border-color: rgba(255,255,255,.12); color: #e6edf3; }
.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); }

/* 📌 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: #e6edf3; }
body[data-theme="dark"] .featured-project-card { background: #1c2128; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .featured-project-copy strong { color: #e6edf3; }
body[data-theme="dark"] .featured-project-unpin { background: rgba(255,255,255,.1); color: #c9d1d9; }

/* 🎲 Surprise Me */
.surprise-me-button { align-items: center; background: linear-gradient(120deg, #6a5cf0, #8b5cf6); border: none; border-radius: 50px; color: #fff; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; padding: 9px 15px; transition: transform .15s, box-shadow .15s; }
.surprise-me-button:hover { box-shadow: 0 6px 16px rgba(106,92,240,.35); transform: translateY(-1px); }
.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: #8b949e; }

/* @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; }

/* 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-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 requirements modal */
.dev-level-modal { max-width: 420px; width: 92vw; }
.dev-level-body { margin-top: 10px; max-height: 65vh; overflow-y: auto; }
.dev-level-next-line { background: rgba(106,92,240,.08); border-radius: 10px; color: #363c4d; font-size: 11.5px; font-weight: 600; line-height: 1.5; margin: 0 0 14px; padding: 10px 12px; }
.dev-level-req-row { border-top: 1px solid #eff0f4; padding: 12px 0; }
.dev-level-req-row:first-child { border-top: none; }
.dev-level-req-row.is-current { background: rgba(106,92,240,.05); border-radius: 10px; margin: 0 -10px; padding: 12px 10px; }
.dev-level-req-head { align-items: center; display: flex; font-size: 12.5px; font-weight: 800; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.dev-level-req-tag { background: #6a5cf0; border-radius: 50px; color: #fff; font-size: 8.5px; font-weight: 800; padding: 3px 8px; }
.dev-level-req-bar { margin-bottom: 6px; }
.dev-level-req-bar label { color: #6a7284; display: block; font-size: 9.5px; font-weight: 700; margin-bottom: 3px; }
.dev-level-progress { background: #eff0f4; border-radius: 50px; height: 5px; overflow: hidden; }
.dev-level-progress span { background: linear-gradient(90deg, #6a5cf0, #8b5cf6); border-radius: 50px; display: block; height: 100%; }
body[data-theme="dark"] .dev-level-next-line { background: rgba(139,123,255,.12); color: #c9d1d9; }
body[data-theme="dark"] .dev-level-req-row { border-top-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .dev-level-req-row.is-current { background: rgba(139,123,255,.1); }
body[data-theme="dark"] .dev-level-req-bar label { color: #8b949e; }
body[data-theme="dark"] .dev-level-progress { 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 (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-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 { padding: 14px; }
  .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; padding: 7px 11px; transition: background .15s, border-color .15s, color .15s; }
.follow-button svg, .small-follow svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; width: 12px; }
.follow-button:hover, .small-follow:hover { background: #d8f5e6; border-color: #9fe4bd; }
.follow-button.connected, .small-follow.connected { background: var(--connect); border-color: var(--connect); color: #fff; }
.follow-button.connected:hover, .small-follow.connected:hover { background: #14b358; }
.connection-card .small-follow { margin-left: auto; }

/* press / click animation for kudos + connect controls */
@keyframes press-pop { 0% { transform: scale(1); } 35% { transform: scale(.8); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
.press-anim { animation: press-pop .38s 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: -1px; height: 9px; position: absolute; right: -1px; width: 9px; }
.thread-avatar-wrap .status-dot.online { background: #17c964; }
.thread-head { align-items: center; gap: 10px; }
.thread-head-meta { display: grid; gap: 1px; }
.thread-clear-button { margin-left: auto; }
.thread-head-meta small { color: #17c964; font-size: 9px; }
.thread-head-meta small.offline { color: #909aab; }
.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; }
.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; }
.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; } }
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: #1c2128; 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: #e6edf3; }

/* ===================== 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: #8b949e; }
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: #8b949e; }
.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: #1c2128; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .member-picker-row:hover { background: #21262d; }

/* 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-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: #e6edf3; }
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: #0d1117; }
.thread-bubble-sender { color: #6a5cf0; display: block; font-size: 9px; font-weight: 800; margin-bottom: 2px; }
.group-members-panel { background: #fff; border-top: 1px solid #eef0f5; max-height: 45%; overflow-y: auto; padding: 14px 16px; }
.group-members-panel h3 { font-size: 11px; margin: 0 0 10px; }
.group-member-row { align-items: center; display: flex; gap: 9px; padding: 7px 0; }
.group-member-row .thread-item-body { flex: 1; }
.group-members-panel .settings-field { margin: 10px 0; }
.group-members-panel .danger-button { margin-top: 8px; width: 100%; }
.group-photo { height: 40px; overflow: hidden; width: 40px; }
.group-photo img { height: 100%; object-fit: cover; width: 100%; }
.group-settings-row { align-items: center; display: flex; gap: 12px; margin-bottom: 10px; }
.group-photo-picker { border-radius: 50%; cursor: pointer; flex: 0 0 auto; height: 58px; position: relative; width: 58px; }
.group-photo-picker img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.group-photo-picker-empty { align-items: center; background: #eef0f7; border-radius: 50%; color: #8b93a8; display: flex; height: 100%; justify-content: center; width: 100%; }
.group-photo-picker-empty svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
.group-photo-picker-edit { align-items: center; background: rgba(0,0,0,.55); border-radius: 50%; color: #fff; display: flex; font-size: 7px; font-weight: 800; height: 100%; justify-content: center; left: 0; line-height: 1.2; opacity: 0; padding: 4px; position: absolute; text-align: center; top: 0; transition: opacity .15s; width: 100%; }
.group-photo-picker:hover .group-photo-picker-edit { opacity: 1; }
.group-settings-row input#groupNameInput { background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 10px; flex: 1; font-size: 11px; font-weight: 700; padding: 10px 12px; }
.group-settings-save { margin-bottom: 16px; width: 100%; }
body[data-theme="dark"] .group-photo-picker-empty { background: #21262d; color: #c9d1d9; }
body[data-theme="dark"] .group-settings-row input#groupNameInput { background: #1c2128; border-color: rgba(255,255,255,.09); color: #e6edf3; }

/* 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: #e6edf3; }
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: #c9d1d9; }

/* 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: #c9d1d9; }
body[data-theme="dark"] .group-members-panel { background: #0d1117; border-top-color: rgba(255,255,255,.08); }
.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; } }

/* ===================== 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; }
.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 */
.kudos-burst { position: fixed; z-index: 600; pointer-events: none; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: transform .55s cubic-bezier(.2,1.4,.4,1), opacity .55s ease; color: #8b5cf6; }
.kudos-burst.show { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
.kudos-burst svg { fill: currentColor; height: 72px; width: 72px; filter: drop-shadow(0 6px 18px rgba(139,92,246,.45)); }

/* ===================== 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-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; }

/* ===================== dock: explore icon ===================== */
.explore-icon { color: #ff9f5a; }
.explore-icon svg { fill: url(#none); stroke: currentColor; }
.explore-icon svg circle { fill: rgba(255,159,90,.16); }

/* ===================== 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-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; }

/* ===================== license: highlighted badge instead of plain text ===================== */
.license-badge { align-items: center; background: none; border-radius: 50px; display: inline-flex; font: 700 8.5px "DM Mono", monospace; gap: 4px; padding: 3px 9px; text-transform: uppercase; letter-spacing: .02em; transition: filter .15s; }
.license-badge:hover { filter: brightness(.94); }
.license-badge.license-open { background: #e6f9ef; color: #17924f; }
.license-badge.license-personal { background: #fff3e0; color: #b5720b; }
.license-badge.license-reserved { background: #fdeaee; color: #c23a56; }
.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: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 20px 0; max-width: 620px; }
.np-type-card { background: #fff; border: 1.5px solid #e6e9f0; border-radius: 16px; padding: 22px 20px; text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; }
.np-type-card:hover { border-color: #b9aeff; box-shadow: 0 14px 30px rgba(28,35,61,.08); transform: translateY(-2px); }
.np-type-icon { align-items: center; background: #eae5ff; border-radius: 11px; color: #6d5bd7; display: inline-flex; height: 42px; justify-content: center; width: 42px; }
.np-type-icon svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 21px; }
.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 h3 { font-size: 14px; margin: 14px 0 5px; }
.np-type-card p { color: #7d859a; font-size: 10.5px; line-height: 1.55; margin: 0; }

/* 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: #1c2128; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .track-copy strong { color: #e6edf3; }
.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; }
.auth-card::before { background: linear-gradient(90deg, #6853db, #3d83f5, #8b5cf6); border-radius: 21px 21px 0 0; content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; }
@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; }

/* 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: 460px; }
.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: #0d1117;
  color: #e6edf3;
}
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: #f0f6fc; }
body[data-theme="dark"] .rail-link { color: #8b949e; }
body[data-theme="dark"] .rail-link:hover { background: rgba(255,255,255,.06); color: #e6edf3; }
body[data-theme="dark"] .rail-link.active { background: rgba(124,108,240,.16); box-shadow: inset 0 0 0 1px rgba(124,108,240,.3); color: #a78bfa; }
body[data-theme="dark"] .rail-count { background: rgba(255,255,255,.08); color: #c9d1d9; }
body[data-theme="dark"] .rail-label { color: #6e7681; }
body[data-theme="dark"] .handle-card { background: #161b22; 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: #8b949e; }

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"] .category-chip, 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: #161b22;
  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: #e6edf3;
}
/* .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: #1c2128;
  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: #e6edf3;
}
/* Community posts opt out of the "card" look entirely (see the light-mode
   rule for .is-community-post above) — they should stay borderless and
   boxless in dark mode too, just a plain divider between posts. */
body[data-theme="dark"] .feed-card.is-community-post {
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none;
}
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"] .category-chip.active { background: linear-gradient(120deg, #6a5cf0, #4e3fc4); border-color: transparent; box-shadow: 0 8px 20px rgba(90,70,220,.35); color: #fff; }
body[data-theme="dark"] .filter-chip { background: rgba(255,255,255,.045); color: #8b949e; }
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: #c9d1d9; }
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: #1c2128; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .menu-panel-item { color: #c9d1d9; }
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: #232a45; color: #e6edf3; }
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: #1c2128; border: 1px solid rgba(255,255,255,.1); color: #e6edf3; }
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: #8b949e; }
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: #1c2128; }
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: #1c2128; border-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .settings-list-row:hover { background: #21262d; }
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; }

/* 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-radius: 50px; color: #565e70; font-size: 11px; font-weight: 700; padding: 8px 14px; transition: background .18s, color .18s, transform .18s; }
.search-filter-chip.active { background: linear-gradient(100deg, #3d83f5, #6853db); 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; }
@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: #c9d1d9; }
body[data-theme="dark"] .search-adv-filters select { background: #1c2128; border-color: rgba(255,255,255,.12); color: #e6edf3; }
body[data-theme="dark"] .search-popular-chip { background: #1c2128; border-color: rgba(255,255,255,.09); color: #e6edf3; }
body[data-theme="dark"] .search-tag-chip { background: rgba(103,88,217,.22); color: #a78bfa; }
body[data-theme="dark"] .search-input-wrap { background: #1c2128; border-color: rgba(255,255,255,.12); }
body[data-theme="dark"] .search-input-wrap input { background: transparent; color: #e6edf3; }
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: #a7adbe; }

.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: #1c2128; border-color: rgba(255,255,255,.12); color: #e6edf3; }
body[data-theme="dark"] .country-picker-placeholder { color: #8b949e; }
body[data-theme="dark"] .country-picker-panel { background: #1c2128; 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: #e6edf3; }
body[data-theme="dark"] .country-option { color: #c9d1d9; }
body[data-theme="dark"] .country-option:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .country-option.is-selected { background: rgba(103,88,217,.22); color: #a78bfa; }
body[data-theme="dark"] .country-privacy-option { background: rgba(255,255,255,.06); color: #8b949e; }
body[data-theme="dark"] .country-privacy-option.active { background: #5748cb; color: #fff; }
body[data-theme="dark"] .discover-country-filter-label { color: #8b949e; }

@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. */
body[data-theme="dark"] .app-glow-one { background: radial-gradient(circle, rgba(103,88,217,.22), transparent 68%); }
body[data-theme="dark"] .app-glow-two { background: radial-gradient(circle, rgba(53,140,196,.16), transparent 68%); }
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(103,88,217,.42); 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(103,88,217,.16); 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: #8b949e; }
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: #e6edf3; }
body[data-theme="dark"] .schedule-summary { background: linear-gradient(120deg, rgba(103,88,217,.18), rgba(77,132,242,.12)); border-color: rgba(255,255,255,.1); }
body[data-theme="dark"] .schedule-summary-country { color: #f0f6fc; }
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 { border-radius: 999px; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 4px 10px; white-space: nowrap; }
.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, #161b22, #12162349); 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: #f0f6fc; }
body[data-theme="dark"] .scheduled-post-summary { color: #8b949e; }
body[data-theme="dark"] .scheduled-post-meta { color: #8b949e; }
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: #0d1117; 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: #8b949e; }
body[data-theme="dark"] .profile-header-pro .profile-avatar { border-color: #0d1117; }
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: #e6edf3; }

/* ===================== 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:#1c2128;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:#21262d; }
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:#1c2128;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:#1c2128;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:#1c2128;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: #8b949e; }
body[data-theme="dark"] .chat-page .chat-page-inner, body[data-theme="dark"] .collection-new, body[data-theme="dark"] .file-drop { background:#1c2128;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:#c9d1d9; }
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:#c9d1d9; }
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:#c9d1d9; }
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:#c9d1d9; }
body[data-theme="dark"] .guest-banner button { background:rgba(255,255,255,.06);color:#c9d1d9; }
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(103,88,217,.22);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(103,88,217,.22);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; }
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"] .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:#c9d1d9; }
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:#c9d1d9; }
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, body[data-theme="dark"] .feed-card.is-community-post .feed-card-summary { color:#c9d1d9; }
body[data-theme="dark"] .license-info-points li.is-allowed { color:#c9d1d9; }
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:#8b949e; }
body[data-theme="dark"] .license-info-tagline { color:#8b949e; }
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.is-community-post .feed-card-copy h2 { color:#4ade80; }
body[data-theme="dark"] .feed-card-byline { color:#8b949e; }

/* ------------------------------------------------------------------ */
/* 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: #1c2128; box-shadow: none; }
body[data-theme="dark"] .chat-type-btn span:last-child { color: #8b949e; }
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: #1c2128; 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: #8b949e; }

/* ---- 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; }

/* ------------------------------------------------------------------ */
/* 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: #e6edf3; }
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: #f0f6fc; }
@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: #8b949e; }
body[data-theme="dark"] .guide-section-title { border-color: rgba(255,255,255,.08); color: #e6edf3; }
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: #8b949e; }
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: #8b949e; }

/* ------------------------------------------------------------------ */
/* 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: #e6edf3; }
body[data-theme="dark"] .audit-log-target { color: #a78bfa; }
body[data-theme="dark"] .audit-log-row-meta { color: #8b949e; }

/* ------------------------------------------------------------------ */
/* 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: #e6edf3; }

.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: #8b949e; }
body[data-theme="dark"] .admin-tab:hover { background: rgba(255,255,255,.1); color: #c9d1d9; }
body[data-theme="dark"] .admin-tab.is-active { background: #6a5cf0; border-color: #6a5cf0; color: #fff; }
.admin-tab-panel.is-hidden { display: none; }

/* 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: #e6edf3; }
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: #8b949e; }

/* 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: #e6edf3; }
.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: #e6edf3; }