.circle-page{padding:0 14px 24px;position:relative}
.circle-hero{margin:12px 0;background:linear-gradient(135deg,#0F63E8,#4A7BFF);border-radius:22px;padding:18px 16px 18px;color:#fff;box-shadow:0 14px 28px rgba(20,103,255,.22)}
.circle-hero-kicker{font-size:11px;font-weight:900;letter-spacing:1.5px;opacity:.8}
.circle-hero-title{font-size:26px;line-height:1.2;font-weight:900;margin-top:6px}
.circle-hero-copy{font-size:13px;line-height:1.85;opacity:.94;margin-top:10px}
.circle-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.circle-switch{display:flex;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:4px;flex:1}
.circle-switch-btn{flex:1;height:36px;border:none;border-radius:999px;background:transparent;font-size:13px;font-weight:800;color:var(--t3);font-family:inherit}
.circle-switch-btn.on{background:linear-gradient(135deg,#0F6DFF,#2C97FF);color:#fff;box-shadow:0 8px 18px rgba(20,103,255,.22)}
.circle-compose-entry,.circle-post-card,.circle-comment-box,.circle-tip-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 10px 22px rgba(31,64,118,.08)}
.circle-compose-entry{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.circle-compose-title{font-size:14px;font-weight:900;color:var(--t1);line-height:1.6}
.circle-compose-sub{font-size:12px;color:var(--t3);line-height:1.7;margin-top:4px}
.circle-compose-btn{flex-shrink:0;height:38px;padding:0 14px;border:none;border-radius:12px;background:linear-gradient(135deg,#0F6DFF,#2C97FF);color:#fff;font-size:13px;font-weight:800;font-family:inherit;box-shadow:0 8px 18px rgba(20,103,255,.22)}
.circle-compose-btn.is-ghost{background:#F7F9FE;color:var(--blue);box-shadow:none;border:1px solid rgba(20,103,255,.12)}
.circle-compose-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.circle-feed{display:flex;flex-direction:column;gap:10px}
.circle-post-card{cursor:pointer}
.circle-post-card.is-detail{cursor:default;margin-bottom:12px}
.circle-post-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.circle-post-type{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--blue-l);border:1px solid var(--blue-b);font-size:12px;font-weight:800;color:var(--blue)}
.circle-post-time{font-size:11px;color:var(--t3)}
.circle-post-title{font-size:16px;font-weight:900;line-height:1.5;color:var(--t1)}
.circle-post-preview,.circle-post-content{font-size:14px;line-height:1.85;color:var(--t2);margin-top:8px;white-space:pre-wrap;word-break:break-word}
.circle-post-preview{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.circle-post-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--t3);margin-top:10px}
.circle-review-note{margin-top:10px;padding:10px 11px;border-radius:12px;background:#FFF7E8;border:1px solid #F2D19A;font-size:12px;line-height:1.75;color:#9A601A}
.circle-loadmore-btn{width:100%;height:42px;border:none;border-radius:14px;background:#F3F7FF;color:var(--blue);font-size:13px;font-weight:800;font-family:inherit;margin-top:12px}
.circle-comment-box{margin-top:12px}
.circle-comment-title{font-size:15px;font-weight:900;color:var(--t1);margin-bottom:8px}
.circle-comment-list{display:flex;flex-direction:column;gap:10px}
.circle-comment-item{padding:11px 12px;border-radius:14px;background:var(--bg3);border:1px solid var(--border)}
.circle-comment-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--t3);margin-bottom:6px}
.circle-comment-text{font-size:13px;line-height:1.8;color:var(--t2);white-space:pre-wrap;word-break:break-word}
.circle-emoji-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.circle-emoji-btn{width:34px;height:34px;border:none;border-radius:12px;background:#F6F8FD;box-shadow:inset 0 0 0 1px rgba(27,52,84,.08);font-size:18px;line-height:1}
.circle-toggle-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);margin:0 0 12px}
.circle-toggle-row input{width:16px;height:16px}
.circle-fab-tip{position:fixed;right:max(16px,calc((100vw - min(100%, 520px))/2 + 16px));bottom:calc(var(--tab-h) + var(--safe) + 22px);z-index:120;border:none;border-radius:999px;padding:0 16px;height:42px;background:linear-gradient(135deg,#D93A4A,#FF6A55);color:#fff;font-size:13px;font-weight:900;font-family:inherit;box-shadow:0 12px 24px rgba(217,58,74,.28)}
.circle-sheet-tip-btn{position:sticky;left:100%;bottom:12px;margin-top:14px;border:none;border-radius:999px;padding:0 16px;height:40px;background:linear-gradient(135deg,#D93A4A,#FF6A55);color:#fff;font-size:13px;font-weight:900;font-family:inherit;box-shadow:0 10px 22px rgba(217,58,74,.24)}
.circle-tip-list{display:flex;flex-direction:column;gap:10px}
.circle-tip-card-title{font-size:14px;font-weight:900;color:var(--t1)}
.circle-tip-card-text{font-size:13px;line-height:1.8;color:var(--t2);margin-top:6px}

@media (max-width:420px){
  .circle-page{padding:0 10px 22px}
  .circle-toolbar,.circle-compose-entry{flex-direction:column;align-items:stretch}
  .circle-compose-btn{width:100%}
  .circle-compose-actions{flex-direction:column}
  .circle-fab-tip{right:14px}
}