/* V23 — a quieter Circle home, with the Circle's own identity kept intact. */
.cm-overview {
  --cm-surface: #12161c;
  --cm-inset: #0e1217;
  --cm-hover: #191f27;
  --cm-border: #ffffff0d;
  --cm-secondary: #99a2ae;
  --cm-tertiary: #7f8996;
  max-width: 1440px;
}
.cm-overview .cm-page-head { align-items: center; margin-bottom: 24px; }
.cm-overview .cm-page-head h1 { margin-top: 7px; font-size: 30px; font-weight: 600; letter-spacing: -1px; }
.cm-overview .cm-overline { color: var(--cm-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .11em; }
.cm-overview .cm-invite-button {
  min-height: 40px; padding: 10px 15px; border-radius: 10px;
  border-color: #ffffff13; background: #ffffff03; color: #dbe1e8;
  font-size: 12px; font-weight: 500;
}
.cm-overview .cm-invite-button:hover { background: var(--cm-hover); border-color: #ffffff24; }

/* Brand artwork remains visible, but the content leads the composition. */
.cm-overview .cm-overview-hero {
  min-height: 396px; padding: 34px 38px; border-color: var(--cm-border);
  border-radius: var(--circle-radius, 24px); background-color: var(--cm-surface);
  box-shadow: none;
}
.cm-overview .cm-overview-hero:after { background: linear-gradient(90deg, #0e121733, transparent 70%); }
.cm-overview .cm-overview-hero .cm-hero-content { max-width: 65%; }
.cm-overview .cm-overview-hero .cm-hero-kicker { margin-bottom: 24px; gap: 10px; }
.cm-overview .cm-hero-kicker > strong { font-size: 11px; letter-spacing: .045em; }
.cm-overview .cm-hero-kicker > small { color: #a3aab4; font-size: 10px; }
.cm-overview .cm-hero-kicker > .cm-hero-brand-mark {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
}
.cm-overview .cm-circle-monogram { width: 30px; height: 30px; border-radius: 50%; }
.cm-overview .cm-overview-hero h2 {
  max-width: 610px; margin-bottom: 22px; font-size: clamp(44px, 4.1vw, 64px);
  line-height: 1.02; letter-spacing: -.055em; font-weight: 560;
}
.cm-overview .cm-overview-hero h2 span { color: color-mix(in srgb, var(--accent) 72%, white); }
.cm-overview .cm-hero-personality { color: #dce2e8; font-size: 14px; margin-bottom: 6px; }
.cm-overview .cm-overview-hero p {
  color: #a5aeb9; font-size: 13px; line-height: 1.65; max-width: 460px; margin-bottom: 26px;
}
.cm-overview .cm-hero-visual { width: 42%; opacity: .82; }
.cm-overview .cm-hero-visual:before { background: none; }
.cm-overview .cm-hero-visual .cm-hero-art { height: 80%; filter: none; }
.cm-overview .cm-hero-visual .cb-circle-cover-art { height: 80%; opacity: .9; }
.cm-overview .cm-hero-visual .cb-circle-cover-art img { filter: none; }
.cm-overview :is(.cm-orbit, .cm-orbit-core, .cm-orbit-point, .cm-visual-caption) { display: none; }
.cm-overview .cm-overview-hero .cm-hero-action { gap: 10px; }
.cm-overview .cm-overview-hero .cm-hero-action .btn {
  min-height: 44px; padding: 12px 16px; gap: 10px; border-radius: 10px;
  font-size: 12px; font-weight: 550; box-shadow: none;
}
.cm-overview .cm-hero-action .btn.primary,
.cm-overview .cm-composer .btn.primary:not(:disabled) {
  background: #edf1f5; color: #11161c; border-color: #edf1f5;
}
.cm-overview .cm-hero-action .btn.primary:hover,
.cm-overview .cm-composer .btn.primary:not(:disabled):hover { background: #fff; border-color: #fff; filter: none; }
.cm-overview .cm-overview-hero .cm-hero-secondary { background: #ffffff04; border-color: #ffffff18; color: #d5dde5; }
.cm-overview .cm-overview-hero .cm-hero-secondary:hover { background: #ffffff0a; border-color: #ffffff28; }
.cm-overview .cm-hero-session {
  right: 26px; bottom: 27px; width: 31%; min-height: 94px; padding: 16px; gap: 12px;
  background: #12161cf2; border-color: #ffffff13; border-radius: min(var(--circle-card-radius, 16px), 16px);
  box-shadow: 0 4px 16px #0000000d; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cm-overview .cm-hero-session:hover { transform: none; background: #191f27; border-color: #ffffff24; }
.cm-overview .cm-session-play { width: 38px; height: 38px; border-color: #ffffff1a; background: #ffffff04; }
.cm-overview .cm-hero-session small { font-size: 9px; color: #a3aeb9; letter-spacing: .045em; }
.cm-overview .cm-hero-session strong { font-size: 12px; color: #e4e9ee; }
.cm-overview .cm-hero-session em { font-size: 11px; color: #99a2ae; }

/* The digest is a compact navigation surface, using only existing activity. */
.cm-overview .cm-overview-digest {
  grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 16px 0 32px; padding: 15px 18px; background: var(--cm-surface);
  border: 1px solid var(--cm-border); border-radius: var(--circle-card-radius, 18px);
}
.cm-overview .cm-digest-intro { padding-right: 16px; gap: 11px; }
.cm-overview .cm-digest-mark { width: 38px; height: 38px; background: #ffffff04; color: #a7b0bb; border-radius: 10px; }
.cm-overview .cm-digest-intro strong { color: #d9e0e7; font-size: 12px; font-weight: 550; }
.cm-overview .cm-digest-intro small { color: var(--cm-tertiary); font-size: 10px; line-height: 1.4; }
.cm-overview .cm-overview-digest > button {
  min-height: 52px; padding: 7px 20px; gap: 10px; border-color: var(--cm-border);
  grid-template-columns: auto minmax(0, 1fr) 14px; border-radius: 0;
}
.cm-overview .cm-overview-digest > button:hover { background: #ffffff03; border-radius: 0; }
.cm-overview .cm-overview-digest > button strong { font-size: 25px; letter-spacing: -.8px; font-weight: 550; }
.cm-overview .cm-overview-digest > button span { color: #a1aab5; font-size: 11px; max-width: 88px; }
.cm-overview .cm-overview-digest > button svg { color: #8b96a3; }

/* One spacing system for the feed and utility rail. */
.cm-overview .cm-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.cm-overview .cm-feed-heading { min-height: 42px; margin-bottom: 14px; }
.cm-overview .cm-feed-heading h2 { margin-top: 5px; font-size: 23px; font-weight: 580; letter-spacing: -.65px; }
.cm-overview .cm-feed-demo { color: var(--cm-tertiary); font-size: 11px; }
.cm-overview .cm-feed-tabs {
  height: auto; min-height: 45px; gap: 20px; margin-bottom: 18px;
  border-bottom: 1px solid var(--cm-border);
}
.cm-overview .cm-feed-tabs > button {
  position: relative; min-height: 45px; padding: 10px 0 12px; border-radius: 0;
  background: transparent; color: var(--cm-secondary); font-size: 12px; font-weight: 500;
}
.cm-overview .cm-feed-tabs > button:hover { background: transparent; color: #e6ebf1; }
.cm-overview .cm-feed-tabs > button.active { background: transparent; color: #f1f4f8; }
.cm-overview .cm-feed-tabs > button.active:after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: var(--accent);
}
.cm-overview .cm-feed-tabs > .cm-chat-shortcut { gap: 7px; color: #c6cfd9; padding-left: 12px; }
.cm-overview :is(.cm-composer, .cm-post, .cm-circle-conversations, .cm-watchlist, .cm-field-guide, .cm-empty) {
  background: var(--cm-surface); border-color: var(--cm-border);
  border-radius: var(--circle-card-radius, 18px); box-shadow: none;
}
.cm-overview .cm-composer { padding: 15px 18px; margin-bottom: 18px; gap: 12px; }
.cm-overview .cm-composer textarea { font-size: 13px; line-height: 1.6; }
.cm-overview .cm-composer textarea::placeholder { color: #959fac; }
.cm-overview .cm-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 36%, #ffffff0d); box-shadow: none; }
.cm-overview .cm-composer .btn { min-height: 38px; padding: 10px 14px; border-radius: 9px; font-weight: 550; }
.cm-overview .cm-composer-hint { color: #929daa; font-size: 11px; }
.cm-overview .cm-posts { gap: 18px; }
.cm-overview .cm-post { padding: 22px 24px 0; }
.cm-overview .cm-post-byline > div { min-width: 0; }
.cm-overview .cm-author { font-size: 13px; overflow-wrap: anywhere; }
.cm-overview .cm-post-time { color: #909aa7; font-size: 11px; }
.cm-overview .cm-post-copy { color: #c5cdd7; line-height: 1.7; font-size: 14px; margin: 20px 0; }
.cm-overview .cm-save, .cm-overview .cm-delete { flex-shrink: 0; color: #96a0ad; }
.cm-overview .cm-save.is-saved { color: var(--accent); }
.cm-overview .cm-save:hover, .cm-overview .cm-delete:hover { color: #edf1f6; background: #ffffff05; }
.cm-overview .cm-post-actions { min-height: 62px; gap: 24px; }
.cm-overview .cm-action { color: #a3adba; }
.cm-overview .cm-action:hover { color: #eef2f6; }
.cm-overview .cm-action.is-liked { color: var(--accent); }
.cm-overview .cm-market-card { background: var(--cm-inset); border-color: var(--cm-border); border-radius: min(var(--circle-card-radius, 14px), 14px); }
.cm-overview .cm-market-head > div:not(.cm-market-price) > small { color: #8d98a6; }
.cm-overview .cm-market-head > .cm-market-price > strong { font-size: 25px; font-weight: 550; letter-spacing: -.8px; }
.cm-overview .cm-market-price small span { color: #8d98a6; }
.cm-overview .cm-timeframes button { color: #909caa; }
.cm-overview .cm-timeframes button.active { color: #eef2f6; background: #ffffff08; }
.cm-overview .cm-market-body .cm-trade-button {
  background: #1c232c; color: #e0e6ed; border-color: #ffffff14; border-radius: 9px; font-size: 12px;
}
.cm-overview .cm-market-body .cm-trade-button:hover { background: #252e39; border-color: #ffffff20; }
.cm-overview .cm-resource { background: #ffffff02; border-color: #ffffff0c; border-radius: min(var(--circle-card-radius, 12px), 12px); padding: 16px; }
.cm-overview .cm-resource:hover { background: #ffffff05; }
.cm-overview .cm-resource-icon { background: #ffffff05; color: #c0c9d3; border-radius: 10px; }
.cm-overview .cm-resource strong { color: #d9e1e9; }
.cm-overview .cm-resource small { color: #96a1af; font-size: 11px; }

.cm-overview .cm-overview-aside { gap: 18px; padding-top: 0; min-width: 0; }
.cm-overview .cm-rail-heading { padding: 20px 20px 16px; }
.cm-overview .cm-rail-heading .cm-overline { color: var(--cm-tertiary); font-size: 9px; letter-spacing: .095em; }
.cm-overview .cm-rail-heading h3 { font-size: 16px; font-weight: 550; letter-spacing: -.35px; }
.cm-overview .cm-rail-heading > button { border-radius: 9px; color: #acb5c1; }
.cm-overview .cm-room-shortcut { min-height: 68px; gap: 10px; }
.cm-overview .cm-room-shortcut:hover { background: #ffffff04; }
.cm-overview .cm-room-symbol { width: 34px; height: 34px; border-radius: 10px; background: #ffffff04; color: #aeb7c3; }
.cm-overview .cm-room-shortcut strong { color: #dce3eb; font-size: 12px; font-weight: 500; }
.cm-overview .cm-room-shortcut small { color: #929eac; font-size: 11px; margin-top: 5px; }
.cm-overview .cm-room-unread { min-width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
.cm-overview .cm-rail-note { border-color: var(--cm-border); margin-top: 10px; padding: 13px 20px; color: #8a96a4; font-size: 10px; }
.cm-overview .cm-snapshot-label { color: #a1adba; background: #ffffff04; border-color: #ffffff0d; font-size: 10px; }
.cm-overview .cm-watch-row { min-height: 66px; padding: 12px 20px; gap: 11px; }
.cm-overview .cm-watch-row + .cm-watch-row { border-top: 1px solid #ffffff04; }
.cm-overview .cm-watch-row:hover { background: #ffffff03; }
.cm-overview .cm-watch-name strong, .cm-overview .cm-watch-price strong { font-size: 12px; font-weight: 550; }
.cm-overview .cm-watch-name small { color: #8c98a7; font-size: 10px; }
.cm-overview .cm-watch-price small { font-size: 10px; }
.cm-overview .cm-watch-footer { margin-top: 4px; border-color: var(--cm-border); padding: 10px 20px; }
.cm-overview .cm-watch-footer > span { color: #8996a5; font-size: 9px; }
.cm-overview .cm-watch-footer button { font-size: 10px; color: #c4ceda; min-height: 36px; }
.cm-overview .cm-field-guide { padding: 22px; color: #dce3eb; }
.cm-overview .cm-guide-top { margin-bottom: 20px; }
.cm-overview .cm-guide-icon { background: #ffffff04; color: #aebbc9; border-radius: 10px; }
.cm-overview .cm-guide-top > svg { color: #929daa; }
.cm-overview .cm-field-guide > strong { font-size: 24px; line-height: 1.17; letter-spacing: -.8px; font-weight: 530; }
.cm-overview .cm-field-guide > span:not(.cm-guide-top) { color: #99a4b2; font-size: 12px; max-width: 220px; }
.cm-overview .cm-field-guide > small { color: #c1cbd6; font-size: 11px; margin-top: 22px; }
.cm-overview .cm-field-guide:hover { background: #171d24; border-color: #ffffff20; transform: none; }
.cm-overview .cm-overview-signature { margin-top: 32px; padding: 24px 2px 0; border-color: var(--cm-border); }
.cm-overview .cm-overview-signature p { font-size: 11px; color: #a6b1be; }
.cm-overview .cm-overview-signature p small { color: #8491a0; font-size: 10px; }
.cm-overview .cm-overview-signature > span:last-child { color: #8a97a6; font-size: 10px; }

/* Preserve Circle density preferences instead of flattening every community. */
[data-circle-density="compact"] .cm-overview .cm-post { padding: 18px 20px 0; }
[data-circle-density="compact"] .cm-overview .cm-post-copy { margin: 15px 0; }
[data-circle-density="compact"] .cm-overview .cm-posts { gap: 12px; }
[data-circle-density="compact"] .cm-overview .cm-composer { padding: 13px 18px; }
[data-circle-density="compact"] .cm-overview .cm-post-actions { min-height: 48px; }

@media (min-width: 1750px) {
  .cm-overview .cm-overview-hero { padding: 38px 44px; min-height: 425px; }
  .cm-overview .cm-overview-hero h2 { font-size: 70px; }
  .cm-overview .cm-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
}
@media (max-width: 1280px) {
  .cm-overview .cm-overview-hero { padding: 30px; min-height: 394px; }
  .cm-overview .cm-overview-hero h2 { font-size: 55px; }
  .cm-overview .cm-hero-session { right: 20px; bottom: 24px; width: 31%; padding: 13px; gap: 10px; }
  .cm-overview .cm-hero-session em { font-size: 10px; }
  .cm-overview .cm-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
  .cm-overview .cm-overview-digest { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); padding: 14px; }
  .cm-overview .cm-overview-digest > button { padding: 7px 12px; gap: 9px; }
  .cm-overview .cm-overview-digest > button span { font-size: 10px; }
}
@media (max-width: 1100px) {
  .cm-overview .cm-overview-hero h2 { font-size: 50px; }
  .cm-overview .cm-hero-personality { font-size: 13px; }
  .cm-overview .cm-overview-hero p { font-size: 12px; max-width: 370px; }
  .cm-overview .cm-hero-session { gap: 9px; }
  .cm-overview .cm-session-play { width: 32px; height: 32px; }
  .cm-overview .cm-hero-session strong { white-space: normal; font-size: 11px; line-height: 1.4; }
  .cm-overview .cm-hero-session small { font-size: 8px; }
  .cm-overview .cm-overview-digest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 0; }
  .cm-overview .cm-digest-intro { grid-column: 1 / -1; }
  .cm-overview .cm-overview-digest > button:nth-child(2) { border-left: 0; padding-left: 2px; }
  .cm-overview .cm-overview-digest > button span { max-width: none; font-size: 11px; }
  .cm-overview .cm-layout { grid-template-columns: minmax(0, 1fr) 272px; gap: 18px; }
  .cm-overview .cm-post { padding-left: 20px; padding-right: 20px; }
  .cm-overview .cm-rail-heading { padding: 18px 17px 15px; }
  .cm-overview .cm-watch-row { padding-left: 17px; padding-right: 17px; }
  .cm-overview .cm-watch-footer { padding-left: 17px; padding-right: 17px; }
  .cm-overview .cm-feed-demo { white-space: normal; text-align: right; max-width: 90px; line-height: 1.4; }
}
@media (max-width: 1000px) {
  .cm-overview .cm-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cm-overview .cm-overview-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-overview .cm-field-guide { display: none; }
  .cm-overview .cm-overview-hero .cm-hero-content { max-width: 84%; }
  .cm-overview .cm-overview-hero h2 { font-size: 52px; }
  .cm-overview .cm-hero-visual { width: 47%; opacity: .45; }
  .cm-overview .cm-hero-session { display: none; }
  .cm-overview .cm-overview-digest > button { padding: 7px 12px; }
  .cm-overview .cm-overview-digest > button span { font-size: 10px; }
  .cm-overview .cm-feed-demo { display: block; max-width: none; }
  .cm-overview .cm-market-body { display: block; }
  .cm-overview .cm-market-body .cm-trade-button { width: 100%; justify-content: space-between; margin-top: 12px; }
}
@media (max-width: 700px) {
  .cm-overview .cm-page-head { margin-bottom: 20px; }
  .cm-overview .cm-invite-button { width: auto; min-width: 44px; }
  .cm-overview .cm-page-head h1 { font-size: 27px; }
  .cm-overview .cm-overview-hero { padding: 25px; min-height: 380px; }
  .cm-overview .cm-overview-hero .cm-hero-content { max-width: 100%; }
  .cm-overview .cm-overview-hero h2 { font-size: clamp(39px, 7.6vw, 50px); }
  .cm-overview .cm-overview-hero p { max-width: 340px; }
  .cm-overview .cm-hero-visual { right: -45px; width: 49%; opacity: .24; }
  .cm-overview .cm-hero-kicker > strong { max-width: 220px; }
  .cm-overview .cm-overview-hero .cm-hero-action .btn { min-height: 44px; padding: 11px 13px; font-size: 11px; }
  .cm-overview .cm-overview-digest { padding: 14px; margin-bottom: 26px; }
  .cm-overview .cm-overview-digest > button { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  .cm-overview .cm-overview-digest > button span { grid-row: 2; grid-column: 1 / -1; font-size: 10px; }
  .cm-overview .cm-overview-digest > button svg { grid-row: 1; grid-column: 2; }
  .cm-overview .cm-overview-aside { grid-template-columns: minmax(0, 1fr); }
  .cm-overview .cm-feed-heading h2 { font-size: 22px; }
  .cm-overview .cm-feed-demo { max-width: 95px; font-size: 10px; }
  .cm-overview .cm-post { padding: 20px 18px 0; }
  .cm-overview .cm-composer { padding: 14px; gap: 10px; }
  .cm-overview .cm-market-card { padding: 16px; }
  .cm-overview .cm-resource { padding: 14px 12px; }
  .cm-overview .cm-resource > div { min-width: 0; }
  .cm-overview .cm-resource strong { line-height: 1.5; }
  .cm-overview .cm-overview-signature > span:last-child { font-size: 0; }
  .cm-overview .cm-overview-signature p small { font-size: 9px; }
}
@media (max-width: 400px) {
  .cm-overview .cm-overview-hero { padding: 23px 20px; }
  .cm-overview .cm-overview-hero h2 { font-size: 39px; }
  .cm-overview .cm-overview-hero .cm-hero-action { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cm-overview .cm-overview-hero .cm-hero-action .btn { justify-content: center; }
  .cm-overview .cm-hero-kicker > strong { max-width: 175px; }
  .cm-overview .cm-overview-digest > button { padding-right: 9px; padding-left: 9px; }
  .cm-overview .cm-overview-digest > button strong { font-size: 23px; }
  .cm-overview .cm-overview-digest > button span { font-size: 9px; }
  .cm-overview .cm-post { padding-right: 15px; padding-left: 15px; }
  .cm-overview .cm-market-head > .cm-market-price > strong { font-size: 21px; }
  .cm-overview .cm-market-price small span { display: block; margin-left: 0; margin-top: 3px; }
  .cm-overview .cm-feed-tabs { gap: 17px; }
  .cm-overview .cm-post-actions { gap: 18px; }
  .cm-overview .cm-resource small { font-size: 10px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-overview :is(button, .cm-resource, .cm-composer) { transition: none; }
}