body:has(.cm-shell), body:has(.cm-admin-shell), body:has(.cm-about-page) {
    --cm-surface: var(--surface);
    --cm-text: var(--text);
    --cm-muted: var(--text-soft);
    --cm-line: var(--line);
    --cm-soft: #edf3ff;
    --cm-shadow: 0 12px 30px rgba(37, 73, 145, .11);
}
body.dark:has(.cm-shell), body.dark:has(.cm-admin-shell), body.dark:has(.cm-about-page) {
    --cm-soft: #202b43;
    --cm-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.cm-shell, .cm-admin-shell { max-width: 760px; margin: 0 auto; padding: 22px 16px 110px; color: var(--cm-text); font-family: Inter, system-ui, sans-serif; }
/* The shared full-bleed header assumes .app-shell's 14px side padding. MVC
   community pages place it directly under body, like Predict detail pages. */
body:has(.cm-shell), body:has(.cm-about-page) { padding-top: env(safe-area-inset-top); overflow-x: clip; }
body:has(.cm-shell) > .topbar, body:has(.cm-about-page) > .topbar {
    position: sticky !important;
    top: env(safe-area-inset-top);
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    min-height: 62px;
    margin: 0 auto 8px;
    padding: 10px 14px;
    border-radius: 0;
    z-index: 300 !important;
}
body:has(.cm-shell) .main-nav, body:has(.cm-about-page) .main-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
body:has(.cm-shell) .cm-shell { max-width: 520px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.cm-admin-shell { max-width: 1080px; padding-bottom: 50px; }
.cm-shell h1, .cm-admin-shell h1 { font-size: clamp(1.45rem, 5vw, 2rem); margin: 0 0 8px; }
.cm-shell h2, .cm-admin-shell h2 { font-size: 1.08rem; margin: 0 0 12px; }
.cm-heading, .cm-admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cm-heading { position: relative; padding: 18px; border: 1px solid var(--cm-line); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(85,84,243,.16), transparent 48%), linear-gradient(155deg, rgba(46,141,243,.07), transparent 70%), var(--cm-surface); box-shadow: var(--cm-shadow); }
.cm-heading::before { content: ""; position: absolute; top: 0; left: 18px; width: 120px; height: 3px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #2e8df3, #5554f3); }
.cm-heading h1 { color: var(--cm-text); letter-spacing: -.035em; font-weight: 900; }
.cm-heading p { margin: 0; line-height: 1.45; color: var(--cm-muted); }
.cm-profile-link, .cm-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 11px; background: linear-gradient(90deg, #2e8df3, #5554f3); color: #fff; font-weight: 750; text-decoration: none; white-space: nowrap; box-shadow: 0 7px 16px rgba(47, 116, 223, .22); }
.cm-profile-link { font-size: .8rem; }
.cm-back { margin: 4px 0 20px; }
.cm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.cm-compose, .cm-card, .cm-comments, .cm-profile-summary, .cm-avatar-form, .cm-admin-section, .cm-admin-login { background: var(--cm-surface); border: 1px solid var(--cm-line); border-radius: 18px; padding: 18px; margin-bottom: 16px; box-shadow: var(--cm-shadow); }
.cm-compose form, .cm-comment-form, .cm-avatar-form, .cm-admin-section > form, .cm-admin-login { display: flex; flex-direction: column; gap: 11px; }
.cm-admin-login label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.cm-admin-login input { width: 100%; max-width: 360px; padding: 10px 12px; border: 1px solid #cfd5df; border-radius: 10px; font: inherit; }
.cm-admin-digits { display: flex; flex-wrap: wrap; gap: 18px; }
.cm-admin-digits input { width: 66px; text-align: center; }
.cm-shell textarea, .cm-admin-shell textarea { width: 100%; min-height: 92px; box-sizing: border-box; resize: vertical; border: 1px solid var(--cm-line); border-radius: 12px; padding: 12px; background: var(--cm-soft); font: inherit; color: var(--cm-text); }
.cm-shell textarea:focus, .cm-admin-shell textarea:focus { outline: 2px solid rgba(46,141,243,.42); outline-offset: 1px; border-color: #2e8df3; }
.cm-shell textarea::placeholder { color: var(--cm-muted); }
.cm-primary { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #2e8df3, #5554f3); color: #fff !important; border: 0; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; align-self: flex-end; box-shadow: 0 7px 16px rgba(47, 116, 223, .25); }
.cm-sort { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 18px; border: 1px solid var(--cm-line); border-radius: 999px; background: var(--cm-soft); }
.cm-sort a { padding: 8px 15px; border-radius: 999px; color: var(--cm-muted); text-decoration: none; font-weight: 750; }
.cm-sort a.active { background: linear-gradient(90deg, #2e8df3, #5554f3); color: #fff; box-shadow: 0 5px 13px rgba(47,116,223,.22); }
.cm-feed { display: grid; gap: 14px; }
.cm-card { margin: 0; }
.cm-card-official { border-top: 3px solid #5554f3; }
.cm-author-row { display: flex; align-items: center; gap: 10px; }
.cm-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; }
.cm-avatar svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.cm-avatar-large svg { width: 34px; height: 34px; }
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cm-avatar-official { width: 46px; height: 46px; flex: 0 0 46px; background: #000; border: 1px solid rgba(245,207,123,.45); }
.cm-avatar-official img { object-fit: contain; padding: 3px; }
.cm-author-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.cm-author-text strong { font-size: .97rem; color: var(--cm-text); }
.cm-author-text small { display: block; width: 100%; color: var(--cm-muted); margin-top: 2px; }
.cm-tier { font-size: .72rem; color: var(--cm-muted); font-weight: 700; }
.cm-tier-normal { display: none; }
.cm-tier-brown { color: #9e6a45; }.cm-tier-silver { color: #697888; }.cm-tier-gold { color: #b88824; }.cm-tier-platinum { color: #6973b5; }.cm-tier-admin { color: #1877f2; display: inline-flex; align-items: center; gap: 4px; }
.cm-tier-admin svg { width: 15px; height: 15px; flex: 0 0 15px; }
.cm-tier-admin svg circle { fill: #1877f2; }
.cm-tier-admin svg path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-pinned { margin-left: auto; font-size: .68rem; color: #4675f1; text-align: right; font-weight: 750; }
.cm-body { margin: 16px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: var(--cm-text); }
.cm-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; border-top: 1px solid var(--cm-line); padding-top: 12px; color: var(--cm-muted); font-size: .83rem; }
.cm-like-count, .cm-comment-link { display: inline-flex; align-items: center; gap: 5px; }
.cm-like-count svg { width: 16px; height: 16px; fill: #4a80ef; }
.cm-comment-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cm-card-footer a { color: #4b74e9; text-decoration: none; font-weight: 750; }
.cm-card-footer form { margin-left: auto; }
.cm-card-footer button { border: 0; border-radius: 9px; background: linear-gradient(90deg, #2e8df3, #5554f3); color: #fff; font: inherit; font-weight: 750; cursor: pointer; padding: 6px 11px; box-shadow: 0 5px 12px rgba(47,116,223,.2); }
.cm-action-row { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 18px; }
.cm-action-row button, .cm-admin-shell button { border: 0; background: linear-gradient(90deg, #2e8df3, #5554f3); color: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; font-weight: 750; box-shadow: 0 6px 14px rgba(47,116,223,.2); }
.cm-action-row .cm-report { margin-left: auto; }
.cm-report summary { cursor: pointer; color: #4b74e9; font-weight: 750; padding: 8px 10px; border-radius: 10px; background: var(--cm-soft); }
.cm-report form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cm-report select { display: block; width: 100%; padding: 8px; border: 1px solid var(--cm-line); border-radius: 9px; background: var(--cm-surface); color: var(--cm-text); }
.cm-comments { margin-top: 18px; }
.cm-comment { display: flex; gap: 10px; border-bottom: 1px solid var(--cm-line); padding: 13px 0; }
.cm-comment > div:last-child { min-width: 0; }
.cm-comment small { display: block; color: var(--cm-muted); }
.cm-comment p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; line-height: 1.45; }
.cm-comment-form { margin-top: 20px; }
.cm-login-wall, .cm-empty { text-align: center; border: 1px solid var(--cm-line); border-radius: 18px; padding: 24px 18px; margin: 18px 0; background: radial-gradient(circle at 50% 0%, rgba(46,141,243,.12), transparent 65%), var(--cm-surface); color: var(--cm-text); box-shadow: var(--cm-shadow); }
.cm-login-wall .cm-primary { align-self: center; }
.cm-more { display: block; text-align: center; color: #fff; font-weight: 750; text-decoration: none; padding: 10px 16px; margin: 18px 0; border-radius: 11px; background: linear-gradient(90deg, #2e8df3, #5554f3); box-shadow: 0 7px 16px rgba(47,116,223,.22); }
.cm-message { border: 1px solid rgba(46,141,243,.25); border-radius: 11px; background: var(--cm-soft); color: var(--cm-text); padding: 11px 14px; margin-bottom: 15px; }
.cm-profile-summary { display: flex; align-items: center; gap: 15px; }
.cm-profile-summary p { margin: 4px 0; }
.cm-avatar-large { width: 70px; height: 70px; flex-basis: 70px; background: #5579d8; }
.cm-avatar-form input { display: block; margin-top: 8px; }
.cm-avatar-form small { color: var(--cm-muted); }
.cm-admin-section { margin-top: 20px; }
.cm-admin-section p { overflow-wrap: anywhere; }
.cm-admin-post, .cm-admin-members article { border-top: 1px solid var(--cm-line); padding: 12px 0; }
.cm-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-admin-display-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cm-admin-display-form label { display: flex; align-items: center; gap: 6px; }
.cm-admin-display-form input[type="number"] { width: 130px; padding: 8px; }
.cm-admin-members article { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-admin-members form { display: flex; gap: 8px; }
.cm-hidden { color: #ab3939; font-weight: 700; }
.cm-rank-form { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: end; }
.cm-rank-form label { display: grid; gap: 4px; }
.cm-rank-form input { width: 85px; padding: 7px; }
.cm-admin-login { max-width: 420px; display: grid; gap: 12px; }
.cm-admin-login input { display: block; width: 100%; box-sizing: border-box; padding: 10px; margin-top: 6px; }
body.dark .cm-shell, body.dark .cm-admin-shell { color: var(--cm-text); }
body.dark .cm-compose, body.dark .cm-card, body.dark .cm-comments, body.dark .cm-profile-summary, body.dark .cm-avatar-form, body.dark .cm-admin-section, body.dark .cm-admin-login { background: var(--cm-surface); border-color: var(--cm-line); }
body.dark .cm-heading p, body.dark .cm-card-footer { color: var(--cm-muted); }
.cm-admin-shell input:not([type="checkbox"]):not([type="file"]), .cm-admin-shell select { border: 1px solid var(--cm-line); border-radius: 9px; background: var(--cm-soft); color: var(--cm-text); font: inherit; }
.cm-about-page .seo-content { background: var(--cm-surface); border-color: var(--cm-line); color: var(--cm-text); box-shadow: var(--cm-shadow); }
.cm-about-page .seo-cta { background: linear-gradient(90deg, #2e8df3, #5554f3); color: #fff !important; border: 0; box-shadow: 0 7px 16px rgba(47,116,223,.22); }
.cm-about-page .seo-chip-list a { background: var(--cm-soft); border-color: var(--cm-line); color: var(--cm-text); }
.cm-shell .page-about-link { color: #fff; text-decoration: none; opacity: 1; padding: 10px 12px; border: 0; border-radius: 11px; background: linear-gradient(90deg, #2e8df3, #5554f3); box-shadow: 0 7px 16px rgba(47,116,223,.22); }
.cm-shell a:focus-visible, .cm-shell button:focus-visible, .cm-admin-shell a:focus-visible, .cm-admin-shell button:focus-visible, .cm-about-page a:focus-visible { outline: 2px solid #2e8df3; outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cm-card { transition: transform .18s, box-shadow .18s; }.cm-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,73,145,.16); } }
@media (max-width: 560px) { .cm-heading { align-items: flex-start; padding: 15px; }.cm-profile-link { font-size: .8rem; padding: 7px 10px; }.cm-card, .cm-compose, .cm-comments { padding: 14px; } }
.cm-shell .cm-compose { padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; border-top: 3px solid #2e8df3; }
.cm-shell .cm-compose h2 { margin-bottom: 8px; font-size: 1rem; }
.cm-shell .cm-compose form { gap: 8px; }
.cm-shell .cm-compose textarea { min-height: 72px; height: 72px; padding: 9px 11px; }
.cm-shell .cm-compose .cm-primary { padding: 8px 14px; }