.circle-page { --circle-blue: #126ff0; --circle-border: #dce9f9; }
/* 正式页面仅补安全投影空态和已登记广告几何，不加载演示业务数据。 */
.circle-page .circle-safe-state{padding:12px 14px;color:#607b9e;overflow-wrap:anywhere}
.circle-page .circle-sort-note{margin:8px 0 0;color:#7488a4;font-size:13px}
.circle-page a.soft-button,.circle-page .circle-member-entry{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:8px;background:#ecf5ff;color:#1774ed}
.circle-page .circle-cover-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:138px;background:#edf5fc;color:#708aa7;font-size:13px}
.circle-page .circle-cover-empty i{font-size:34px}
.circle-page .circle-card-meta{margin:8px 0;font-size:12px}
.circle-page .circle-avatar-empty{display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:12px;background:#edf5fc;color:#4781c4;font-size:32px}
.circle-page .circle-detail-intro h1{margin:0;color:#153a78;font-size:24px;overflow-wrap:anywhere}
.circle-page .circle-hero-heading{font-size:28px!important;font-weight:700}
.circle-page .circle-section-head h2{margin:0;font-size:16px}
.circle-page .circle-public-tags{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px;list-style:none}
.circle-page .circle-public-tags li{padding:3px 8px;border-radius:6px;background:#ecf5ff;color:#1774ed}
.circle-page .detail-actions button:disabled{cursor:not-allowed;opacity:.55}
.circle-page .public-ad-groups__grid{display:grid;grid-template-columns:repeat(var(--ad-grid-columns),minmax(0,1fr));gap:8px}
.circle-page .public-ad-groups__slot{position:relative;display:grid;min-width:min(100%,var(--ad-min-width));min-height:var(--ad-min-height);aspect-ratio:var(--ad-aspect-width)/var(--ad-aspect-height);overflow:hidden;border-radius:8px;background:#edf5fc}
.circle-page .public-ad-groups__slot img{width:100%;height:100%;object-fit:cover}
.circle-page .public-ad-groups__slot>span{position:absolute;right:4px;bottom:4px;font-size:10px;background:#fffc}
.circle-page .circle-ad-anchor>.public-ad-groups{margin-block:14px}
.circle-page .channel-side{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.circle-page .channel-side header{min-height:44px;padding:8px 14px;border-bottom:1px solid var(--line)}
.circle-page .channel-side h2{margin:0;font-size:16px}
@media(max-width:800px){.circle-page .circle-empty{order:4}.circle-page .circle-sidebar > .side-card.circle-notice{order:6!important}}
.circle-page .circle-grid-layout { margin-top: 16px; }
.circle-page .circle-ad { color: #4778b7; }
.circle-page .circle-hero { position: relative; min-height: 194px; overflow: hidden; border-radius: 12px; background: #d5eaff; }
.circle-page .circle-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.circle-page .circle-hero::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(226 244 255 / 96%) 0%, rgb(228 244 255 / 75%) 34%, transparent 75%); content: ""; }
.circle-page .circle-hero__copy { position: relative; z-index: 1; padding: 26px 35px; }
.circle-page .circle-hero h1 { margin: 0 0 6px; color: #112d68; font-size: 36px; line-height: 1.25; letter-spacing: 1px; }
.circle-page .circle-hero p { margin: 0 0 13px; color: #234b81; font-size: 15px; font-weight: 650; }
.circle-page .circle-hero .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 20px; border-radius: 22px; box-shadow: 0 5px 12px rgb(23 107 220 / 17%); }
.circle-page .circle-filter-panel { padding: 14px; }
.circle-page .circle-filter-row { display: grid; grid-template-columns: auto minmax(105px, 1fr) auto minmax(105px, 1fr) auto auto; align-items: center; gap: 10px; }
.circle-page .circle-filter-row label { white-space: nowrap; color: #234473; font-weight: 700; }
.circle-page .circle-filter-row select { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid var(--circle-border); border-radius: 8px; background: #fff; color: #253c64; }
.circle-page .circle-filter-row .primary-button, .circle-page .soft-button { min-height: 42px; padding-inline: 16px; border-radius: 8px; }
.circle-page .soft-button { border: 0; background: #ecf5ff; color: #1774ed; font-weight: 700; }
.circle-page .circle-main-ad { margin-top: 14px; }
.circle-page .circle-main-ad .main-ad { height: 92px; }
.circle-page .circle-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.circle-page .circle-card { min-width: 0; overflow: hidden; border: 1px solid #e0eafa; border-radius: 11px; background: #fff; box-shadow: var(--shadow); }
.circle-page .circle-card__cover { display: block; margin: 12px 12px 0; overflow: hidden; border-radius: 8px; }
.circle-page .circle-card__cover img { display: block; width: 100%; height: 138px; object-fit: cover; }
.circle-page .circle-card__body { display: flex; gap: 13px; min-height: 96px; padding: 0 13px; }
.circle-page .circle-card__avatar { position: relative; flex: 0 0 62px; width: 62px; height: 62px; margin-top: -20px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; background: #e2f0ff; }
.circle-page .circle-card__body > div { min-width: 0; padding-top: 7px; }
.circle-page .circle-card h2 { margin: 0 0 4px; color: #153a78; font-size: 18px; line-height: 1.35; }
.circle-page .circle-card p { margin: 0; color: #607b9e; font-size: 14px; line-height: 1.45; }
.circle-page .circle-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 14px 13px; color: #536f9e; font-size: 14px; }
.circle-page .circle-card__foot i { color: var(--circle-blue); }
.circle-page .circle-card__foot a { flex: none; padding: 5px 16px; border: 1px solid #cbdfff; border-radius: 20px; background: #f2f8ff; color: var(--circle-blue); font-weight: 700; }
.circle-page .circle-empty { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: center; }
.circle-page .circle-pagination { display: flex; justify-content: center; gap: 7px; }
.circle-page .circle-pagination button { min-width: 38px; min-height: 34px; padding: 0 10px; border: 1px solid #d5e4fa; border-radius: 7px; background: #fff; color: #31527f; }
.circle-page .circle-pagination button.is-active { border-color: var(--circle-blue); background: var(--circle-blue); color: #fff; }
.circle-page .circle-pagination button:disabled { opacity: .55; cursor: default; }
.circle-page .circle-sidebar .search-card > div { grid-template-columns: 78px minmax(0, 1fr) 54px; }
.circle-page .circle-sidebar .search-card button { padding: 0; }
.circle-page .circle-sidebar .side-channel-grid a { background: #f1f7ff; color: #2461b6; font-weight: 650; }
.circle-page .circle-sidebar .side-channel-grid a.is-active { border-color: #096eeb; background: #096eeb; color: #fff; }
.circle-page .circle-sidebar .side-rows { margin: 0; padding: 7px 13px 11px; list-style: none; }
.circle-page .circle-sidebar .side-rows li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 0; color: #4f678e; font-size: 13px; }
.circle-page .circle-sidebar .side-rows li i { flex: none; width: 17px; color: #1bb975; }
.circle-page .circle-sidebar .side-rows li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-page .circle-sidebar .circle-mini img { flex: none; width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.circle-page .circle-sidebar .circle-mini a { min-width: 0; display: flex; align-items: center; gap: 8px; }
.circle-page .circle-sidebar .circle-mini strong { display: block; overflow: hidden; color: #24497c; white-space: nowrap; text-overflow: ellipsis; }
.circle-page .circle-sidebar .circle-mini small { display: block; color: #7489a7; }
.circle-page .circle-sidebar .side-ad { height: 290px; }
.circle-page .circle-breadcrumb { margin-top: -5px; color: #5b78a2; font-size: 13px; }
.circle-page .circle-breadcrumb a { color: #236fd3; }
.circle-page .circle-hero--detail { min-height: 160px; }
.circle-page .circle-hero--detail .circle-hero__copy { padding-top: 34px; }
.circle-page .circle-detail-card { padding: 14px 18px 18px; }
.circle-page .circle-detail-intro { display: flex; align-items: center; gap: 17px; padding: 9px 0 16px; }
.circle-page .circle-detail-intro > img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.circle-page .circle-detail-intro > div { flex: 1; min-width: 0; }
.circle-page .circle-title-line { display: flex; align-items: center; gap: 10px; }
.circle-page .circle-title-line h2 { margin: 0; color: #16326b; font-size: 22px; }
.circle-page .circle-title-line span { padding: 3px 8px; border-radius: 6px; background: #e8f1ff; color: #1475e5; font-size: 12px; }
.circle-page .circle-detail-meta { display: flex; gap: 16px; margin: 5px 0; color: #5e7ba1; font-size: 13px; }
.circle-page .circle-online { color: #21b878; }
.circle-page .circle-detail-description { margin: 12px 0; color: #516c94; font-size: 14px; line-height: 1.65; }
.circle-page .circle-detail-intro > .primary-button { flex: none; display: inline-flex; gap: 6px; align-items: center; }
.circle-page .circle-detail-section { padding: 13px 0 9px; border-top: 1px solid #eaf0f8; }
.circle-page .circle-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.circle-page .circle-section-head h3 { margin: 0; color: #19356c; font-size: 16px; }
.circle-page .circle-section-head h3::before { display: inline-block; width: 4px; height: 18px; margin-right: 9px; border-radius: 3px; background: var(--circle-blue); vertical-align: -3px; content: ""; }
.circle-page .circle-section-head i { color: var(--circle-blue); }
.circle-page .circle-section-head a { color: #7485a0; font-size: 12px; white-space: nowrap; }
.circle-page .circle-announcement { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border-radius: 8px; background: #eef6ff; color: #55719a; font-size: 13px; }
.circle-page .circle-announcement > i { color: var(--circle-blue); font-size: 20px; }
.circle-page .circle-announcement p { margin: 0; }
.circle-page .circle-announcement strong { color: #1c4884; }
.circle-page .circle-member-list { display: flex; gap: 14px; overflow-x: auto; }
.circle-page .circle-member-list div { min-width: 62px; text-align: center; color: #58719a; font-size: 12px; }
.circle-page .circle-member-list img { display: block; width: 48px; height: 48px; margin: 0 auto 3px; border-radius: 50%; object-fit: cover; }
.circle-page .circle-post { margin: 8px 0; padding: 11px 13px; border: 1px solid #dce8fa; border-radius: 9px; }
.circle-page .circle-post__head { display: flex; align-items: center; gap: 9px; color: #244a82; font-size: 14px; }
.circle-page .circle-post__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.circle-page .circle-post__head small { margin-left: auto; color: #8a9ab0; }
.circle-page .circle-post p { margin: 5px 0 8px 43px; color: #506b92; font-size: 13px; }
.circle-page .circle-post__photos { display: flex; gap: 6px; margin-left: 43px; }
.circle-page .circle-post__photos img { width: min(31%, 150px); height: 78px; border-radius: 6px; object-fit: cover; }
.circle-page .circle-post__actions { display: flex; justify-content: flex-end; gap: 15px; margin-top: 5px; color: #6c81a3; font-size: 12px; }
.circle-page .circle-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.circle-page .circle-related a { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px; border: 1px solid #dce8fa; border-radius: 8px; }
.circle-page .circle-related img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; }
.circle-page .circle-related span { min-width: 0; color: #28518a; font-size: 12px; }
.circle-page .circle-related strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.circle-page .circle-main-ad--detail { margin: 12px 0 0; }
.circle-page .circle-publish-form { padding: 9px 22px 17px; }
.circle-page .circle-form-block { padding: 12px 0; }
.circle-page .circle-form-block h2 { margin: 0 0 8px; color: #193d7b; font-size: 16px; }
.circle-page .circle-form-block h2::before { display: inline-block; width: 4px; height: 20px; margin-right: 10px; border-radius: 3px; background: var(--circle-blue); vertical-align: -4px; content: ""; }
.circle-page .circle-form-block h2 i { color: var(--circle-blue); }
.circle-page .circle-form-block h2 em { color: #eb4357; font-style: normal; }
.circle-page .circle-category-choices, .circle-page .circle-template-picks, .circle-page .circle-range { display: flex; flex-wrap: wrap; gap: 8px; }
.circle-page .circle-category-choices button, .circle-page .circle-template-picks button, .circle-page .circle-range button { min-height: 38px; padding: 0 13px; border: 1px solid #deebf9; border-radius: 9px; background: #f8fbff; color: #526c91; }
.circle-page .circle-category-choices button.is-active, .circle-page .circle-template-picks button.is-active { border-color: #1477ee; background: #eaf3ff; color: #0a68dc; font-weight: 700; }
.circle-page .circle-form-block input:not([type=file]):not([type=hidden]), .circle-page .circle-form-block textarea { display: block; width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d5e3f7; border-radius: 8px; background: #fff; color: #2e4261; font-size: 14px; }
.circle-page .circle-form-block textarea { resize: vertical; min-height: 168px; }
@media (max-width: 800px) { .circle-page .circle-form-block input:not([type=file]):not([type=hidden]), .circle-page .circle-form-block textarea { font-size: 16px; } }
.circle-page .circle-form-block input:focus, .circle-page .circle-form-block textarea:focus { border-color: #4d9bff; outline: 2px solid #d5eaff; }
.circle-page .circle-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 185px; gap: 13px; }
.circle-page .circle-template-picks { margin-bottom: 8px; }
.circle-page .circle-template-picks button { min-height: 32px; font-size: 12px; }
.circle-page .circle-count { display: block; margin-top: -24px; padding-right: 10px; position: relative; color: #8d9bb3; text-align: right; font-size: 12px; pointer-events: none; }
.circle-page .circle-form-tip { align-self: stretch; padding: 14px; border-radius: 8px; background: #eef6ff; color: #607895; font-size: 12px; }
.circle-page .circle-form-tip strong { color: #1973e3; font-size: 13px; }
.circle-page .circle-form-tip p { margin: 6px 0; }
.circle-page .circle-form-tip ul { margin: 0; padding-left: 18px; line-height: 1.8; }
.circle-page .circle-form-hint { margin: 5px 0 0; color: #8192aa; font-size: 12px; }
.circle-page .circle-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.circle-page .circle-tag-box { display: inline-flex; flex: 1 1 220px; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1.5px solid #cbd7e7; border-radius: 10px; background: #fff; }
.circle-page .circle-tag-box:focus-within { border-color: #199bd8; box-shadow: 0 0 0 3px rgb(90 200 250 / 15%); }
.circle-page .circle-tag-box #circle-tag-input { flex: 1 1 100px; width: 100px; min-height: 28px; padding: 2px; border: 0; outline: 0; }
.circle-page .circle-tags, .circle-page .circle-tag-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.circle-page .circle-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 10px; border-radius: 8px; background: #199bd8; color: #fff; font-size: 12px; }
.circle-page .circle-tags button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 28%); color: #fff; cursor: pointer; }
.circle-page .circle-tag-pool button { padding: 5px 9px; border: 1px solid #bdcbdc; border-radius: 8px; background: #f7fafc; color: #526781; font-size: 12px; cursor: pointer; }
.circle-page .circle-tag-pool button:hover, .circle-page .circle-tag-pool button:focus-visible { border-color: #199bd8; color: #087eac; }
.circle-page .circle-category-choices button { border: 1.5px solid #b9c9db; background: #f5f8fc; color: #62738b; }
.circle-page .circle-category-choices button.is-active, .circle-page .circle-category-choices button[aria-pressed="true"] { border-color: #0b78b0; background: #199bd8; color: #fff; box-shadow: 0 3px 9px rgb(11 120 176 / 20%); font-weight: 800; }
.circle-page .circle-category-choices button.is-active::after { content: "✓"; margin-left: 5px; }
.circle-page .circle-category-choices button:focus-visible { outline: 3px solid rgb(90 200 250 / 40%); outline-offset: 2px; }
.circle-page .circle-range button { min-width: 145px; border-radius: 22px; }
.circle-page .circle-range button.is-active { border-color: var(--circle-blue); background: var(--circle-blue); color: #fff; }
.circle-page .circle-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 94px; border: 1px dashed #a8c5ed; border-radius: 8px; color: #667d9e; cursor: pointer; }
.circle-page .circle-upload i { color: #8b9db8; font-size: 24px; }
.circle-page .circle-upload strong { color: #284e83; font-size: 13px; }
.circle-page .circle-upload span { font-size: 12px; }
.circle-page .circle-submit { width: 100%; min-height: 46px; border: 0; border-radius: 9px; background: var(--circle-blue); color: #fff; font-weight: 700; }
@media (max-width: 1100px) and (min-width: 801px) { .circle-page .circle-filter-row { grid-template-columns: auto minmax(90px,1fr) auto minmax(90px,1fr); } .circle-page .circle-filter-row button { min-height: 40px; } }
@media (max-width: 800px) { .circle-page .circle-hero { order: 1; } .circle-page .circle-breadcrumb { order: 2; } .circle-page .circle-sidebar .search-card { order: 2; } .circle-page .circle-filter-panel, .circle-page .circle-detail-card, .circle-page .circle-publish-form { order: 3; } .circle-page .circle-cards { order: 4; } .circle-page .circle-pagination { order: 5; } .circle-page .circle-sidebar .side-card:not(.channel-side):not(.side-ad-card) { order: 6; } .circle-page .circle-sidebar .side-ad-card { order: 7; } .circle-page .circle-sidebar .publish-rules { order: 4; } .circle-page .circle-sidebar .channel-side { display: none; } .circle-page .circle-sidebar .side-ad { height: 220px; } }
@media (max-width: 600px) { .circle-page .circle-hero { min-height: 170px; } .circle-page .circle-hero > img { object-position: 62% center; } .circle-page .circle-hero::after { background: linear-gradient(90deg, rgb(229 245 255 / 97%) 0%, rgb(229 245 255 / 88%) 55%, transparent 100%); } .circle-page .circle-hero__copy { padding: 20px; } .circle-page .circle-hero h1 { font-size: 25px; } .circle-page .circle-hero p { max-width: 230px; font-size: 13px; } .circle-page .circle-hero--detail { min-height: 145px; } .circle-page .circle-filter-row { grid-template-columns: 1fr 1fr; gap: 7px; } .circle-page .circle-filter-row label { grid-column: span 2; } .circle-page .circle-filter-row select { grid-column: span 2; min-height: 44px; } .circle-page .circle-filter-row button { min-height: 44px; } .circle-page .circle-cards { grid-template-columns: 1fr; } .circle-page .circle-card__cover img { height: 150px; } .circle-page .circle-card__body { min-height: 82px; } .circle-page .circle-detail-card { padding: 12px; } .circle-page .circle-detail-intro { align-items: flex-start; flex-wrap: wrap; gap: 9px; } .circle-page .circle-detail-intro > img { flex-basis: 62px; width: 62px; height: 62px; } .circle-page .circle-detail-intro > div { flex-basis: calc(100% - 75px); } .circle-page .circle-detail-intro > .primary-button { width: 100%; justify-content: center; min-height: 44px; } .circle-page .circle-detail-meta { flex-wrap: wrap; gap: 3px 12px; } .circle-page .circle-related { grid-template-columns: repeat(2,minmax(0,1fr)); } .circle-page .circle-post__photos img { height: 62px; } .circle-page .circle-publish-form { padding: 8px 12px 14px; } .circle-page .circle-intro-grid { grid-template-columns: 1fr; } .circle-page .circle-form-tip { order: 2; } .circle-page .circle-category-choices button { min-height: 44px; } .circle-page .circle-template-picks button { min-height: 40px; } .circle-page .circle-range button { flex: 1; min-width: 0; min-height: 44px; } .circle-page .circle-upload { min-height: 120px; } }

/* 分享面板在窄屏保持链接可选取且不撑宽页面。 */
.circle-share{margin:16px 0;min-width:0;max-width:100%}
.circle-share summary{cursor:pointer;color:#2563eb}
.circle-share__body{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:12px;min-width:0}
.circle-share input{width:360px;max-width:100%;min-width:0;box-sizing:border-box;padding:8px;border:1px solid #d1d5db;border-radius:6px}
.circle-share button{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer}
.circle-share p{flex-basis:100%;margin:0;font-size:14px;color:#64748b}

/* 静态横幅短标题在手机保持完整一行，不影响用户内容标题。 */
@media (max-width: 600px) { .circle-page .circle-hero .circle-hero-heading { max-width: none; font-size: clamp(18px, 5.5vw, 24px)!important; white-space: nowrap; } }

/* 列表静态副标题平衡换行，保留全部文案。 */
@media (max-width: 600px) { .circle-page .circle-hero:not(.circle-hero--detail) .circle-hero__copy > p { text-wrap: balance; } }