: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: 35px; justify-content: center; letter-spacing: -.07em; position: relative; width: 35px; }
.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%; filter: blur(0); 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: 32px; width: 32px; }.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; 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-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: 17px 18px 14px; }.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; }.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; color: #80889a; display: inline-flex; font-size: 9px; gap: 5px; padding: 6px; }.action-button:hover { 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 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 { background: #1b2238; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; bottom: 18px; box-shadow: 0 14px 30px rgba(0,0,0,.25); color: #fff; font-size: 10px; font-weight: 700; left: 50%; max-width: calc(100vw - 30px); opacity: 0; padding: 11px 15px; pointer-events: none; position: fixed; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s; z-index: 500; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.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: 30px; width: 30px; }.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; 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 { font-size: 0; }.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 { bottom: 103px; }.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-hero { background: linear-gradient(135deg, #171d32, #2a2f5a 55%, #3d2f74); border-radius: 18px; color: #fff; margin-bottom: 20px; overflow: hidden; padding: 26px 26px 28px; position: relative; }
.explore-hero::after { background: radial-gradient(circle at 85% 20%, rgba(140,110,255,.35), transparent 60%); content: ""; inset: 0; position: absolute; }
.explore-hero .eyebrow { color: #a79bff; position: relative; }
.explore-hero h1 { font-size: 23px; letter-spacing: -.05em; margin: 4px 0 9px; position: relative; }
.explore-hero p { color: #b8bdd6; font-size: 11px; line-height: 1.6; margin: 0; max-width: 440px; position: relative; }
.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; 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; 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; 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; background: transparent; border-bottom: 1px solid #f4f5f9; display: flex; gap: 9px; padding: 13px 14px; text-align: left; width: 100%; }
.thread-item:hover { background: #f8f8fc; }
.thread-item.active { background: #f0efff; }
.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 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; }
.thread-bubble { background: #f2f3f7; border-radius: 13px 13px 13px 4px; color: #333a4c; font-size: 11px; line-height: 1.55; max-width: 70%; padding: 10px 13px; }
.thread-bubble.mine { align-self: flex-end; background: #171d32; border-radius: 13px 13px 4px 13px; 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: 9px; flex: 1; font-size: 11px; height: 40px; outline: 0; padding: 0 13px; }
.thread-compose input:focus { border-color: #7868e9; box-shadow: 0 0 0 3px rgba(120,104,233,.1); }
.thread-compose button { background: #171d32; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 800; height: 40px; padding: 0 15px; }
.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; 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 { align-items: flex-start; background: #fff; border: 1px solid #e6e9f0; border-radius: 17px; box-shadow: 0 12px 29px rgba(28,35,61,.045); display: flex; flex-wrap: wrap; gap: 18px; margin: 6px 0 26px; padding: 24px; }
.profile-avatar { flex: 0 0 auto; font-size: 17px; height: 64px; width: 64px; }
.profile-header-copy { flex: 1 1 260px; min-width: 0; }
.profile-header-copy h1 { font-size: 21px; letter-spacing: -.05em; margin: 0; }
.profile-handle { color: #8f78ff; font: 10px "DM Mono", monospace; margin: 3px 0 9px; }
.profile-bio { color: #7d859a; font-size: 11px; 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: 15px; letter-spacing: -.03em; }
.profile-stats span { color: #9099ac; font-size: 9px; }
.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 { max-height: 220px; }
  .profile-header { align-items: flex-start; flex-wrap: wrap; }
  .profile-header .secondary-action { margin-left: auto; }
}
@media (max-width: 570px) {
  .myproject-card { flex-wrap: wrap; }
  .myproject-actions { margin-left: auto; }
  .explore-hero { padding: 20px; }
}

/* ===================== 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; }
.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-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; }
.settings-card .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 ===================== */
.profile-quicklinks { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 0 0 22px; }
.profile-quicklink { 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: 11px; padding: 14px 15px; text-align: left; transition: transform .15s, box-shadow .15s; }
.profile-quicklink:hover { box-shadow: 0 14px 30px rgba(28,35,61,.08); transform: translateY(-1px); }
.ql-icon { align-items: center; border-radius: 10px; display: flex; flex: 0 0 auto; height: 36px; justify-content: center; width: 36px; }
.ql-icon svg { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 16px; }
.ql-purple { background: #f1edff; color: #7649f7; }
.ql-blue { background: #e9f1ff; color: #2c6bd6; }
.ql-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ql-copy strong { color: #333a4c; font-size: 11px; }
.ql-copy small { color: #9099ac; font-size: 9px; }
.ql-arrow { flex: 0 0 auto; fill: none; height: 15px; stroke: #c1c5d1; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 15px; }
@media (max-width: 570px) { .profile-quicklinks { grid-template-columns: 1fr; } }

/* ===================== 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 { font-size: 12px; letter-spacing: -.03em; margin: 0 0 13px; }
.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-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) ===================== */
.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; 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: 0 0 auto; gap: 8px; margin-left: auto; align-self: flex-start; margin-top: 4px; }
.up-message-button { height: 39px; width: 39px; }
.up-message-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 .1s, box-shadow .15s; }
.notification-row.clickable:hover { box-shadow: 0 10px 24px rgba(28,35,61,.08); transform: translateY(-1px); }
.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 { margin-bottom: 16px; }
.feed-card .project-author { margin-bottom: 12px; }
.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-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; 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 { color: #333a4c; font-size: 11px; }
.admin-user-body small { color: #9099ac; font-size: 9px; }
.admin-badge { background: #171d32; border-radius: 50px; color: #fff; font: 700 8px "DM Mono", monospace; padding: 3px 8px; }
.admin-user-stats { color: #a3a9b7; font: 9px "DM Mono", monospace; 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; width: 100%; }
.feed-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.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; background: #fff; border: 1px solid #e6e9f0; border-radius: 13px; box-shadow: 0 8px 20px rgba(28,35,61,.03); display: flex; gap: 11px; margin-bottom: 9px; padding: 13px 14px; }
.notification-row.unread { background: #f8f7ff; border-color: #e2ddff; }
.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-body { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.notification-body p { color: #333a4c; font-size: 11px; line-height: 1.5; margin: 0 0 3px; overflow-wrap: break-word; word-break: break-word; }
.notification-body small { color: #a0a6b4; font-size: 9px; }
.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; }

/* ===================== post: multiple images, count badge ===================== */
.feed-card-image-wrap { cursor: pointer; margin-bottom: 12px; position: relative; }
.feed-card-image-wrap .feed-card-image { margin-bottom: 0; }
.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; }
.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-options { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 4px; }
.share-option { align-items: center; background: #f6f7fb; border: 1px solid #e6e9f0; border-radius: 10px; color: #4a5165; display: flex; font-size: 11px; font-weight: 700; gap: 9px; padding: 12px 13px; }
.share-option:hover { background: #eef0f7; }
.share-icon { align-items: center; display: inline-flex; font-size: 14px; justify-content: center; width: 18px; }

/* ===================== 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; border-radius: 50px; display: inline-flex; font: 700 8.5px "DM Mono", monospace; gap: 4px; padding: 3px 9px; text-transform: uppercase; letter-spacing: .02em; }
.license-badge.license-open { background: #e6f9ef; color: #17924f; }
.license-badge.license-personal { background: #fff3e0; color: #b5720b; }
.license-badge.license-reserved { background: #fdeaee; 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 { font-size: 26px; }
.np-type-card h3 { font-size: 14px; margin: 10px 0 5px; }
.np-type-card p { color: #7d859a; font-size: 10.5px; line-height: 1.55; margin: 0; }
.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; }
.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 scrolling everywhere, and stop the "stuck"/glitchy scroll on mobile web */
html { scroll-behavior: smooth; }
html, body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }
.app-view, .modal, .save-picker-list, .notification-panel, .connections-grid, .explore-grid,
#reader-scroll, .lightbox-stage { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
.project-card, .poll-card, button, .action-button, .secondary-action, .preview-button { will-change: transform; }

/* 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 { display: none !important; }
#appBrandText, #authBrandText { font-size: clamp(15px, 4.4vw, 21px) !important; font-weight: 900; letter-spacing: -0.02em; }
#appBrandText span, #authBrandText span { color: inherit; }
.app-brand, .auth-brand { gap: 0 !important; }

/* 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 { background: #fff; border: 1px solid #e6e9f0; border-radius: 14px; margin-bottom: 14px; padding: 15px 16px; }
.poll-question { font-size: 13px; font-weight: 800; margin: 4px 0 12px; }
.poll-option { align-items: center; border: 1px solid #e6e9f0; border-radius: 10px; cursor: pointer; display: flex; margin-bottom: 8px; overflow: hidden; position: relative; }
.poll-option-fill { background: rgba(92,81,209,.12); bottom: 0; left: 0; position: absolute; top: 0; transition: width .3s ease; z-index: 0; }
.poll-option-label { flex: 1; font-size: 11.5px; font-weight: 700; padding: 10px 12px; position: relative; z-index: 1; }
.poll-option-pct { font-size: 11px; font-weight: 800; padding: 10px 12px; position: relative; z-index: 1; }
.poll-option.is-voted { border-color: #5c51d1; }
.poll-meta { color: #9099ac; font-size: 9.5px; margin-top: 6px; }
.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; }

/* New Project: extra type cards */
.np-type-card.np-type-community svg, .np-type-card.np-type-poll svg { color: #5c51d1; }

/* 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-composer-title, .announcement-composer-image { margin-bottom: 8px; width: 100%; }

/* Google sign-in button container */
#googleSignInContainer { display: flex; justify-content: center; }