/* iqraOne Community - Twitter-like feed. Uses the site's colour variables. */
.pcc-wrap { padding-top: 18px; padding-bottom: 80px; }
.pcc-main { background:#fff; border:1px solid #e6ebf0; border-radius:16px; min-height:60vh; overflow:clip; }
@media (max-width: 991.98px) { .pcc-wrap{padding-left:0;padding-right:0;padding-top:0} .pcc-main{border-radius:0;border-left:0;border-right:0} }
.min-w-0 { min-width:0; }

/* sticky sides */
.pcc-side { position:sticky; top:86px; }
.pcc-nav { display:flex; align-items:center; gap:14px; padding:11px 16px; border-radius:50px; color:var(--pc-dark); font-weight:600; font-size:1.05rem; position:relative; }
.pcc-nav i { font-size:1.35rem; }
.pcc-nav:hover { background:var(--pc-primary-light); color:var(--pc-primary); }
.pcc-nav.on { color:var(--pc-primary); background:var(--pc-primary-light); }
.pcc-badge-n { background:var(--pc-accent); color:#fff; font-size:.68rem; border-radius:20px; padding:1px 6px; min-width:18px; text-align:center; margin-left:auto; line-height:1.4; }
.pcc-me { display:flex; align-items:center; gap:10px; margin-top:18px; padding:10px; border-radius:14px; color:var(--pc-dark); }
.pcc-me:hover { background:var(--pc-gray-light); }
.pcc-me span { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.pcc-me small { color:var(--pc-gray); }
.pcc-card { background:#fff; border:1px solid #e6ebf0; border-radius:16px; padding:14px 16px; margin-bottom:14px; }
.pcc-card h6 { font-weight:700; margin-bottom:10px; font-size:1rem; }
.pcc-trend { display:flex; flex-direction:column; padding:7px 0; color:var(--pc-dark); }
.pcc-trend small { color:var(--pc-gray); }
.pcc-trend:hover b { color:var(--pc-primary); }
.pcc-cta { background:var(--pc-gradient); border:0; color:#fff; }
.pcc-cta h6, .pcc-cta p { color:#fff; margin-bottom:8px; }
.pcc-foot { font-size:.78rem; color:var(--pc-gray); padding:0 6px; }
.pcc-foot a { color:var(--pc-gray); text-decoration:underline; }
.pcc-searchbox { position:relative; margin-bottom:14px; }
.pcc-searchbox i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--pc-gray); }
.pcc-searchbox input { width:100%; border:1px solid #e6ebf0; background:var(--pc-gray-light); border-radius:50px; padding:10px 16px 10px 40px; outline:0; }
.pcc-searchbox input:focus { background:#fff; border-color:var(--pc-primary); }
.pcc-searchbox-lg { margin:12px 14px; }

/* top bars + tabs */
.pcc-topbar { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid #e6ebf0; }
.pcc-topbar h1 { font-size:1.15rem; font-weight:800; margin:0; padding:12px 16px 6px; }
.pcc-topbar small { padding-left:16px; display:block; margin-top:-4px; padding-bottom:6px; }
.pcc-topbar-back { display:flex; align-items:center; gap:6px; padding:6px 8px; }
.pcc-topbar-back h1 { padding:8px 4px; }
.pcc-topbar-back small { padding-left:4px; }
.pcc-back { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--pc-dark); font-size:1.2rem; }
.pcc-back:hover { background:var(--pc-gray-light); }
.pcc-tabs { display:flex; border-bottom:1px solid #e6ebf0; background:#fff; }
.pcc-topbar .pcc-tabs { border-bottom:0; }
.pcc-tabs a { flex:1; text-align:center; padding:12px 8px; font-weight:600; color:var(--pc-gray); position:relative; }
.pcc-tabs a:hover { background:var(--pc-gray-light); }
.pcc-tabs a.on { color:var(--pc-dark); }
.pcc-tabs a.on::after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:0; height:4px; width:56px; border-radius:4px; background:var(--pc-primary); }

/* avatars */
.pcc-avatar { border-radius:50%; object-fit:cover; flex:0 0 auto; display:inline-block; }
.pcc-avatar-txt { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
.pcc-verified { color:#1d9bf0; font-size:.9em; }

/* composer */
.pcc-composer-wrap { border-bottom:1px solid #e6ebf0; padding:14px 16px; }
.pcc-comp-row { display:flex; gap:12px; }
.pcc-textarea { width:100%; border:0; outline:0; resize:none; font-size:1.12rem; line-height:1.5; padding:6px 0; background:transparent; min-height:56px; overflow:hidden; }
.pcc-textarea-box { font-size:1.05rem; }
.pcc-comp-bar { display:flex; flex-wrap:wrap; row-gap:6px; align-items:center; gap:4px; border-top:1px solid #eef2f5; padding-top:8px; margin-top:4px; }
.pcc-iconbtn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:0; background:transparent; color:var(--pc-primary); font-size:1.15rem; cursor:pointer; }
.pcc-iconbtn:hover { background:var(--pc-primary-light); }
.pcc-counter { font-size:.82rem; color:var(--pc-gray); padding:0 8px; min-width:36px; text-align:right; }
.pcc-counter.warn { color:#e8590c; } .pcc-counter.over { color:var(--pc-accent); font-weight:700; }
.pcc-submit[disabled] { opacity:.5; pointer-events:none; }
.pcc-submit { padding:7px 20px !important; }
.pcc-previews { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.pcc-previews:empty { display:none; }
.pcc-prev { position:relative; width:84px; height:84px; border-radius:12px; overflow:hidden; border:1px solid #e6ebf0; }
.pcc-prev img { width:100%; height:100%; object-fit:cover; }
.pcc-prev button { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(15,23,42,.75); color:#fff; font-size:.8rem; line-height:1; }
.pcc-guest-compose { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--pc-primary-light); border-radius:14px; padding:14px 16px; }
.pcc-reply-box { padding-top:10px; }

/* posts */
.pcc-post { padding:12px 16px 4px; border-bottom:1px solid #eef2f5; transition:background .15s; }
.pcc-post[data-url] { cursor:pointer; }
.pcc-post[data-url]:hover { background:#fafbfc; }
.pcc-post.fresh { animation:pccFresh 2.2s ease; }
@keyframes pccFresh { from { background:#e8f5e9; } to { background:transparent; } }
.pcc-ctx { font-size:.82rem; color:var(--pc-gray); font-weight:600; margin:-2px 0 4px 40px; }
.pcc-ctx a { color:var(--pc-gray); }
.pcc-row { display:flex; gap:12px; }
.pcc-main-post .pcc-post { cursor:default; }
.pcc-body { flex:1; min-width:0; }
.pcc-head { display:flex; align-items:center; flex-wrap:wrap; gap:4px; line-height:1.3; }
.pcc-name { font-weight:700; color:var(--pc-dark); }
.pcc-name:hover { text-decoration:underline; }
.pcc-handle, .pcc-dot, .pcc-time, .pcc-edited { color:var(--pc-gray); font-size:.9rem; }
.pcc-time:hover { text-decoration:underline; color:var(--pc-gray); }
.pcc-role { background:var(--pc-primary-light); color:var(--pc-primary); border-radius:20px; padding:1px 9px; font-size:.75rem; font-weight:600; margin-left:6px; }
.pcc-replying { color:var(--pc-gray); font-size:.9rem; }
.pcc-replying a, .pcc-tag, .pcc-mention, .pcc-text a, .pcc-article-body a { color:#1d7ed8; }
.pcc-pending { background:#fff7e0; color:#8a6100; border-radius:10px; padding:6px 10px; font-size:.84rem; margin:4px 0; }
.pcc-text { white-space:normal; word-wrap:break-word; overflow-wrap:anywhere; font-size:1.04rem; line-height:1.55; color:var(--pc-dark); margin:2px 0 6px; }
.pcc-full .pcc-text { font-size:1.2rem; }
.pcc-compact .pcc-text { font-size:.97rem; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.pcc-compact { border-bottom:0; padding:14px 14px 4px; }
.pcc-compact .pcc-row { gap:10px; }
.pcc-compact .pcc-media img { max-height:180px; }

/* media grid */
.pcc-media { display:grid; gap:3px; margin:8px 0; border-radius:16px; overflow:hidden; border:1px solid #e6ebf0; }
.pcc-media-1 { grid-template-columns:1fr; }
.pcc-media-2, .pcc-media-3, .pcc-media-4 { grid-template-columns:1fr 1fr; }
.pcc-media-item { overflow:hidden; background:#f1f5f9; cursor:zoom-in; }
.pcc-media-item img { width:100%; height:100%; object-fit:cover; display:block; }
.pcc-media-1 .pcc-media-item img { max-height:520px; width:100%; height:auto; object-fit:cover; }
.pcc-media-2 .pcc-media-item, .pcc-media-4 .pcc-media-item { aspect-ratio:1/1; }
.pcc-media-3 .pcc-media-item:first-child { grid-row:span 2; }
.pcc-media-3 .pcc-media-item:not(:first-child) { aspect-ratio:1/1; }
.pcc-yt { position:relative; display:block; border-radius:16px; overflow:hidden; margin:8px 0; border:1px solid #e6ebf0; }
.pcc-yt img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
.pcc-yt-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:3.2rem; background:rgba(0,0,0,.25); }

/* article + quote */
.pcc-article-card { display:block; border:1px solid #e6ebf0; border-radius:16px; overflow:hidden; margin:6px 0 8px; color:var(--pc-dark); background:#fff; }
.pcc-article-card:hover { border-color:var(--pc-primary); }
.pcc-article-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.pcc-article-info { padding:12px 14px; }
.pcc-article-info h3 { font-size:1.15rem; font-weight:800; margin:4px 0; }
.pcc-article-info p { color:var(--pc-gray); margin:0 0 6px; font-size:.95rem; }
.pcc-article-tag { background:var(--pc-primary-light); color:var(--pc-primary); border-radius:20px; padding:2px 10px; font-size:.76rem; font-weight:700; }
.pcc-readmore { color:var(--pc-primary); font-weight:600; font-size:.9rem; }
.pcc-article-title { font-size:1.7rem; font-weight:800; margin:8px 0 10px; line-height:1.3; }
.pcc-article-cover { width:100%; border-radius:14px; margin-bottom:12px; cursor:zoom-in; }
.pcc-article-body { font-size:1.1rem; line-height:1.85; color:#1f2937; overflow-wrap:anywhere; }
.pcc-article-body h2, .pcc-article-body h3 { margin:1.2em 0 .5em; font-weight:800; }
.pcc-article-body blockquote { border-left:4px solid var(--pc-primary); padding:4px 14px; color:var(--pc-gray); margin:1em 0; background:var(--pc-gray-light); border-radius:0 10px 10px 0; }
.pcc-quote { display:block; border:1px solid #e6ebf0; border-radius:14px; padding:10px 12px; margin:6px 0 8px; color:var(--pc-dark); }
.pcc-quote:hover { background:#f8fafc; color:var(--pc-dark); }
.pcc-quote-head { display:flex; align-items:center; gap:6px; font-size:.9rem; }
.pcc-quote-head span { color:var(--pc-gray); }
.pcc-quote-text { margin-top:4px; font-size:.97rem; }
.pcc-quote-img { width:100%; max-height:200px; object-fit:cover; border-radius:10px; margin-top:8px; }
.pcc-quote-gone { color:var(--pc-gray); font-style:italic; }

/* actions */
.pcc-actions { display:flex; align-items:center; gap:2px; margin:4px -8px 0; max-width:460px; justify-content:space-between; }
.pcc-full .pcc-actions { max-width:none; border-top:1px solid #eef2f5; margin-top:12px; padding-top:4px; }
.pcc-act { display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; color:var(--pc-gray); padding:7px 10px; border-radius:50px; font-size:.9rem; cursor:pointer; line-height:1; }
.pcc-act i { font-size:1.12rem; }
.pcc-act .n:empty { display:none; }
.pcc-act-reply:hover { color:#1d9bf0; background:rgba(29,155,240,.1); }
.pcc-act-repost:hover, .pcc-act-repost.on { color:var(--pc-primary); background:var(--pc-primary-light); }
.pcc-act-like:hover, .pcc-act-like.on { color:#e53935; background:rgba(229,57,53,.1); }
.pcc-act-mark:hover, .pcc-act-mark.on { color:#1d9bf0; background:rgba(29,155,240,.1); }
.pcc-act-like.on i { animation:pccPop .35s ease; }
@keyframes pccPop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
.pcc-views { cursor:default; }
.pcc-more .pcc-iconbtn { color:var(--pc-gray); width:30px; height:30px; }
.pcc-more .pcc-iconbtn:hover { color:#1d9bf0; background:rgba(29,155,240,.1); }
.pcc-post .dropdown-menu { border-radius:14px; font-size:.92rem; min-width:190px; }
.pcc-post .dropdown-item { padding:8px 14px; }
.pcc-fullstats { display:flex; flex-wrap:wrap; gap:6px 18px; padding:12px 16px; color:var(--pc-gray); border-bottom:1px solid #eef2f5; font-size:.9rem; }
.pcc-fullstats b { color:var(--pc-dark); }
.pcc-thread-up .pcc-post { border-bottom:0; padding-bottom:0; }
.pcc-thread-up .pcc-avatar-link { position:relative; }
.pcc-thread-up .pcc-avatar-link::after { content:''; position:absolute; left:50%; top:52px; bottom:-18px; width:2px; margin-left:-1px; background:#d5dce3; }

/* profile */
.pcc-cover { height:150px; background:var(--pc-gradient) center/cover no-repeat; }
.pcc-profile-body { padding:0 16px 12px; }
.pcc-profile-top { display:flex; align-items:flex-end; margin-top:-46px; margin-bottom:6px; }
.pcc-profile-avatar .pcc-avatar { border:4px solid #fff; }
.pcc-profile-name { font-size:1.4rem; font-weight:800; margin:4px 0 0; }
.pcc-bio { margin:8px 0; white-space:normal; }
.pcc-meta { color:var(--pc-gray); font-size:.9rem; }
.pcc-counts { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:8px; }
.pcc-counts a { color:var(--pc-gray); } .pcc-counts b { color:var(--pc-dark); }
.pcc-follow { border:1px solid var(--pc-dark); color:var(--pc-dark); border-radius:50px; font-weight:700; background:#fff; padding:6px 16px; }
.pcc-follow:hover { background:var(--pc-gray-light); }
.pcc-follow:not(.on) { background:var(--pc-dark); color:#fff; }
.pcc-follow:not(.on):hover { background:#1e293b; }
.pcc-follow.on:hover { border-color:var(--pc-accent); color:var(--pc-accent); }
.pcc-follow-lg { padding:8px 22px; }

/* people */
.pcc-person { display:flex; align-items:center; gap:10px; padding:10px 0; }
.pcc-people .pcc-person { padding:12px 16px; border-bottom:1px solid #eef2f5; }
.pcc-person-info { flex:1; min-width:0; }
.pcc-person-info .pcc-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcc-person-bio { font-size:.9rem; color:var(--pc-text); }
.pcc-card .pcc-follow { padding:4px 12px; font-size:.8rem; }

/* notifications */
.pcc-notif { display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid #eef2f5; color:var(--pc-dark); }
.pcc-notif:hover { background:#fafbfc; color:var(--pc-dark); }
.pcc-notif.unread { background:#f1faf4; }
.pcc-notif-ic { font-size:1.4rem; width:32px; text-align:center; }
.pcc-notif-body { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pcc-notif-snip { display:block; color:var(--pc-gray); margin-top:2px; }

/* misc */
.pcc-newpill { position:sticky; top:62px; z-index:6; display:block; margin:8px auto; border:0; background:var(--pc-primary); color:#fff; padding:8px 20px; border-radius:50px; font-weight:600; box-shadow:var(--pc-shadow-lg); animation:pccSlide .3s ease; }
@keyframes pccSlide { from { transform:translateY(-10px); opacity:0; } to { transform:none; opacity:1; } }
.pcc-empty { text-align:center; padding:48px 20px; color:var(--pc-gray); }
.pcc-empty i { font-size:2.6rem; color:var(--pc-primary); opacity:.7; }
.pcc-empty h5 { margin-top:10px; color:var(--pc-dark); font-weight:700; }
.pcc-empty-sm { padding:22px; }
.pcc-sentinel, .pcc-end { text-align:center; padding:18px; color:var(--pc-gray); font-size:.9rem; }
.pcc-toasts { position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.pcc-toast { background:#0f172a; color:#fff; padding:10px 18px; border-radius:50px; font-size:.92rem; box-shadow:var(--pc-shadow-lg); animation:pccSlide .25s ease; max-width:90vw; }
.pcc-toast.err { background:#b42318; }
.pcc-login-ic { width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--pc-primary-light); color:var(--pc-primary); display:flex; align-items:center; justify-content:center; font-size:1.9rem; }
.pcc-modal-ctx { background:var(--pc-gray-light); border-radius:12px; padding:8px 12px; font-size:.9rem; margin-bottom:10px; color:var(--pc-text); }

/* article editor */
.pcc-article-input { width:100%; border:0; border-bottom:2px solid #e6ebf0; font-size:1.6rem; font-weight:800; padding:8px 0; outline:0; }
.pcc-article-input:focus { border-color:var(--pc-primary); }
.pcc-cover-prev img { width:100%; max-height:260px; object-fit:cover; border-radius:12px; }
.pcc-editor-bar { display:flex; flex-wrap:wrap; gap:2px; margin:14px 0 6px; padding:4px; background:var(--pc-gray-light); border-radius:12px; position:sticky; top:50px; z-index:3; }
.pcc-editor-bar button { border:0; background:transparent; width:36px; height:34px; border-radius:8px; color:var(--pc-dark); font-size:1.05rem; }
.pcc-editor-bar button:hover { background:#fff; }
.pcc-editor { min-height:320px; outline:0; font-size:1.1rem; line-height:1.8; padding:8px 2px; overflow-wrap:anywhere; }
.pcc-editor:empty::before { content:attr(data-placeholder); color:#9aa5b1; }
.pcc-editor h2, .pcc-editor h3 { font-weight:800; }
.pcc-editor blockquote { border-left:4px solid var(--pc-primary); padding:4px 14px; color:var(--pc-gray); background:var(--pc-gray-light); }

/* bottom bar (mobile) */
.pcc-bottombar { position:fixed; left:0; right:0; bottom:0; z-index:1040; display:flex; justify-content:space-around; align-items:center; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid #e6ebf0; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
.pcc-bottombar a, .pcc-bottombar .pcc-fab { color:var(--pc-gray); font-size:1.45rem; width:52px; height:44px; display:flex; align-items:center; justify-content:center; position:relative; }
.pcc-bottombar a.on { color:var(--pc-primary); }
.pcc-bottombar .pcc-badge-n { position:absolute; top:2px; right:6px; margin:0; }
.pcc-fab { background:var(--pc-primary) !important; color:#fff !important; border:0; border-radius:50%; width:50px !important; height:50px !important; margin-top:-22px; box-shadow:0 6px 16px rgba(42,133,71,.45); }
@media (max-width: 991.98px) { .pcc-wrap{padding-bottom:70px} .pcc-toasts{bottom:96px} .pcc-topbar{top:0} .pcc-editor-bar{top:0} }
@media (max-width: 575.98px) { .pcc-post{padding-left:12px;padding-right:12px} .pcc-composer-wrap{padding:12px} .pcc-article-title{font-size:1.4rem} }

/* home strip */
.pcc-home { background:#fff; }
.pcc-homecard { background:#fff; border:1px solid #e6ebf0; border-radius:16px; height:100%; display:flex; flex-direction:column; box-shadow:var(--pc-shadow); transition:transform .25s; }
.pcc-homecard:hover { transform:translateY(-4px); }
.pcc-homecard .pcc-post { cursor:default; flex:1; }
.pcc-homecard-foot { display:flex; gap:14px; align-items:center; padding:8px 16px 12px; color:var(--pc-gray); font-size:.88rem; }
.pcc-homecard-foot a { color:var(--pc-primary); font-weight:600; }

/* mobile: keep footer copyright, floating menu and scroll-to-top clear of the fixed bottom bar */
@media (max-width: 991.98px) {
  /* the padding goes on the (dark) footer itself so no light strip shows under it */
  body.pcc-has-bar > footer, body:has(.pcc-bottombar) > footer, body.pcc-has-bar footer:last-of-type { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  body.pcc-has-bar .back-to-top, body:has(.pcc-bottombar) .back-to-top { bottom: calc(86px + env(safe-area-inset-bottom)) !important; right: 16px; }
  body.pcc-has-bar .pc-fab, body:has(.pcc-bottombar) .pc-fab { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
  .pcc-wrap { padding-bottom: 16px; }
}

/* polls */
.pcc-poll { margin:10px 0 6px; max-width:520px; padding:12px; border:1px solid #e6ebf0; border-radius:16px; background:linear-gradient(180deg,#fbfdfc,#f6f9f8); }
.pcc-poll-list { display:flex; flex-direction:column; gap:8px; }
.pcc-poll-opt { appearance:none; -webkit-appearance:none; display:flex; align-items:center; gap:12px; width:100%; margin:0; font:inherit; font-weight:600; line-height:1.35; text-align:left; color:var(--pc-dark); background:#fff; border:1.5px solid #dbe3ea; border-radius:12px; padding:12px 14px; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .15s, background .15s, box-shadow .15s, transform .1s; }
.pcc-poll-opt:hover { border-color:var(--pc-primary); background:var(--pc-primary-light); box-shadow:0 2px 8px rgba(42,133,71,.12); }
.pcc-poll-opt:active { transform:scale(.985); }
.pcc-poll-opt:focus-visible { outline:2px solid var(--pc-primary); outline-offset:2px; }
.pcc-poll-radio { flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid #b8c4cf; background:#fff; position:relative; transition:border-color .15s; }
.pcc-poll-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--pc-primary); transform:scale(0); transition:transform .15s; }
.pcc-poll-opt:hover .pcc-poll-radio { border-color:var(--pc-primary); }
.pcc-poll-opt:hover .pcc-poll-radio::after { transform:scale(1); }
.pcc-poll-text { min-width:0; overflow-wrap:anywhere; }
.pcc-poll.busy { opacity:.65; pointer-events:none; }
.pcc-poll-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:10px 14px; border-radius:12px; background:#fff; border:1.5px solid #e3e9ee; overflow:hidden; }
.pcc-poll-row .pcc-poll-bar { position:absolute; left:0; top:0; bottom:0; width:var(--pct); background:#dfeee4; z-index:0; transform-origin:left; animation:pccPollGrow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 70ms); }
.pcc-poll-row.top .pcc-poll-bar { background:linear-gradient(90deg,#b7dfc4,#8fcfa5); }
.pcc-poll-row.mine { border-color:var(--pc-primary); }
.pcc-poll-row .pcc-poll-label, .pcc-poll-row .pcc-poll-pct { position:relative; z-index:1; }
.pcc-poll-label { display:flex; flex-direction:column; gap:1px; min-width:0; font-weight:600; color:var(--pc-dark); }
.pcc-poll-row.top .pcc-poll-label, .pcc-poll-row.top .pcc-poll-pct { font-weight:800; }
.pcc-poll-you { font-size:.74rem; font-weight:600; color:var(--pc-primary); }
.pcc-poll-pct { font-size:.95rem; font-variant-numeric:tabular-nums; color:var(--pc-dark); }
.pcc-poll-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:.83rem; color:var(--pc-gray); }
.pcc-poll-meta i { color:var(--pc-primary); }
.pcc-poll-hint { margin-left:auto; font-size:.78rem; }
@keyframes pccPollGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pcc-poll-row .pcc-poll-bar { animation:none; } }
.pcc-poll-edit { border:1px solid #e6ebf0; border-radius:14px; padding:10px; margin:6px 0; }
.pcc-poll-opts { display:flex; flex-direction:column; gap:6px; }
.pcc-poll-toggle.on { background:var(--pc-primary-light); }

/* ---------------------------------------------------------------- quiz */
.pcc-quiz { margin:10px 0 6px; max-width:520px; padding:12px; border:1px solid #e6ebf0; border-radius:16px; background:linear-gradient(180deg,#fffdf6,#f8f6ec); }
.pcc-quiz.busy { opacity:.65; pointer-events:none; }
.pcc-quiz-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; font-size:.82rem; }
.pcc-quiz-tag { font-weight:800; color:#8a6410; display:inline-flex; align-items:center; gap:5px; }
.pcc-quiz-pts { background:#fff3c9; color:#7a5a05; font-weight:700; border-radius:999px; padding:2px 10px; }
.pcc-quiz-series { margin-left:auto; color:var(--pc-primary); font-weight:600; text-decoration:none; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcc-quiz-list { display:flex; flex-direction:column; gap:8px; }
.pcc-quiz-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:10px 14px; border-radius:12px; background:#fff; border:1.5px solid #e3e9ee; overflow:hidden; }
.pcc-quiz-row .pcc-quiz-bar { position:absolute; left:0; top:0; bottom:0; width:var(--pct); background:#eef1f4; z-index:0; transform-origin:left; animation:pccPollGrow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 70ms); }
.pcc-quiz-row.right { border-color:#2a8547; }
.pcc-quiz-row.right .pcc-quiz-bar { background:#cfeadb; }
.pcc-quiz-row.wrong { border-color:#d9534f; }
.pcc-quiz-row.wrong .pcc-quiz-bar { background:#f8d9d8; }
.pcc-quiz-label, .pcc-quiz-row .pcc-poll-pct { position:relative; z-index:1; }
.pcc-quiz-label { display:flex; align-items:center; gap:8px; min-width:0; font-weight:600; color:var(--pc-dark); flex-wrap:wrap; }
.pcc-quiz-row.right .pcc-quiz-mark { color:#2a8547; }
.pcc-quiz-row.wrong .pcc-quiz-mark { color:#d9534f; }
.pcc-quiz-mark { color:#a8b3be; }
.pcc-quiz-result { margin-top:10px; padding:9px 12px; border-radius:12px; font-size:.9rem; }
.pcc-quiz-result.ok { background:#e5f5ea; color:#1d6b38; }
.pcc-quiz-result.bad { background:#fdeceb; color:#a1312d; }
.pcc-quiz-explain { margin-top:8px; font-size:.88rem; color:#4a5560; background:#fff; border:1px dashed #d9dfe5; border-radius:10px; padding:8px 12px; }
.pcc-quiz-detail { margin-left:auto; font-weight:700; color:var(--pc-primary); text-decoration:none; }
.pcc-quiz-edit { border:1px solid #f0e2b0; background:#fffdf4; border-radius:14px; padding:10px; margin:6px 0; }
.pcc-quiz-edit-title { font-weight:700; font-size:.88rem; color:#8a6410; margin-bottom:8px; }
.pcc-quiz-opts { display:flex; flex-direction:column; gap:6px; }
.pcc-quiz-optrow { display:flex; align-items:center; gap:8px; margin:0; }
.pcc-quiz-optrow input[type=radio] { flex:0 0 auto; accent-color:#2a8547; width:18px; height:18px; }
.pcc-quiz-toggle.on { background:#fff3c9; }
/* pages */
.pcc-pad { padding:14px 16px; }
.pcc-h2 { font-size:1.05rem; font-weight:800; margin:6px 0 10px; display:flex; align-items:center; gap:8px; }
.pcc-quiz-me { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:linear-gradient(135deg,#fff3c9,#ffe9a3); margin-bottom:16px; }
.pcc-quiz-me > i { font-size:1.6rem; color:#b07d00; }
.pcc-quiz-me small { display:block; color:#7a5a05; }
.pcc-quiz-me b { font-size:1.4rem; }
.pcc-series-card { display:block; text-decoration:none; color:inherit; border:1px solid #e6ebf0; border-radius:14px; padding:12px 14px; margin-bottom:8px; background:#fff; }
.pcc-series-card:hover { border-color:var(--pc-primary); background:var(--pc-primary-light); }
.pcc-series-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pcc-series-top h2 { font-size:1.25rem; font-weight:800; margin:0; }
.pcc-series-st { font-size:.74rem; font-weight:700; padding:2px 10px; border-radius:999px; background:#eceff2; color:#5b6670; white-space:nowrap; }
.pcc-series-st.on { background:#dff3e6; color:#1d6b38; }
.pcc-series-sub { font-size:.86rem; color:var(--pc-gray); margin-top:2px; }
.pcc-series-hero { border:1px solid #e6ebf0; border-radius:16px; padding:14px; margin-bottom:18px; background:#fff; }
.pcc-series-prize { display:flex; gap:8px; align-items:flex-start; background:#fff3c9; color:#6f5204; padding:8px 12px; border-radius:12px; margin-top:6px; }
.pcc-series-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.pcc-series-stats > div { background:#f6f9f8; border-radius:12px; padding:8px 4px; text-align:center; }
.pcc-series-stats b { display:block; font-size:1.2rem; }
.pcc-series-stats small { color:var(--pc-gray); font-size:.72rem; }
.pcc-lb { border:1px solid #e6ebf0; border-radius:14px; overflow:hidden; background:#fff; }
.pcc-lb-head, .pcc-lb-row { display:grid; grid-template-columns:40px 1fr 64px 70px; align-items:center; gap:8px; padding:9px 12px; }
.pcc-lb-head { background:#f6f9f8; font-size:.76rem; font-weight:700; color:var(--pc-gray); }
.pcc-lb-row { text-decoration:none; color:inherit; border-top:1px solid #eef1f4; }
.pcc-lb-row:hover { background:#fafcfb; }
.pcc-lb-row.me { background:var(--pc-primary-light); }
.pcc-lb-rank { font-weight:800; text-align:center; color:var(--pc-gray); }
.pcc-lb-row.top1 .pcc-lb-rank { color:#d4a017; } .pcc-lb-row.top2 .pcc-lb-rank { color:#9aa5b1; } .pcc-lb-row.top3 .pcc-lb-rank { color:#b8733a; }
.pcc-lb-who { display:flex; align-items:center; gap:10px; min-width:0; }
.pcc-lb-who > span { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.pcc-lb-who b, .pcc-lb-who small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcc-lb-who small { color:var(--pc-gray); }
.pcc-lb-sub { font-size:.82rem; color:var(--pc-gray); }
.pcc-lb-pts { font-weight:800; font-variant-numeric:tabular-nums; }
.pcc-series-me { font-size:.84rem; margin-top:8px; padding:4px 10px; border-radius:10px; background:var(--pc-primary-light); color:#1d6b38; display:inline-block; }
.pcc-lb-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:8px; -webkit-overflow-scrolling:touch; }
.pcc-lb-tabs a { flex:0 0 auto; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; color:inherit; font-size:.84rem; font-weight:600; padding:5px 12px; border:1px solid #e6ebf0; border-radius:999px; background:#fff; }
.pcc-lb-tabs a.on { background:var(--pc-primary); border-color:var(--pc-primary); color:#fff; }
.pcc-lb-title { margin:4px 0 8px; }
@media (max-width:480px) { .pcc-lb-head, .pcc-lb-row { grid-template-columns:32px 1fr 52px 56px; padding:9px 8px; } .pcc-series-stats { grid-template-columns:repeat(2,1fr); } }
.pcc-edit-box { border:1px solid #e6ebf0; border-radius:14px; padding:12px; margin-top:14px; background:#fafcfb; }

/* drafts */
.pcc-draftlink { display:inline-flex; align-items:center; gap:5px; font-size:.84rem; color:#6b7780; text-decoration:none; margin:2px 0 10px 16px; }
.pcc-draftlink:hover { color:var(--pc-primary); }
.pcc-draftlink[hidden] { display:none; }
.pcc-draft { display:flex; align-items:center; gap:10px; border:1px solid #e6ebf0; border-radius:14px; background:#fff; padding:10px 12px; margin-bottom:10px; }
.pcc-draft-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit; }
.pcc-draft-kind { font-size:.74rem; font-weight:700; color:var(--pc-primary); text-transform:uppercase; letter-spacing:.04em; }
.pcc-draft-text { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; }
.pcc-draft-acts { display:flex; gap:6px; align-items:center; flex:0 0 auto; }

/* leaderboard: Overall / Monthly / Yearly */
.pcc-lb-modes a { flex:1 1 0; max-width:none; text-align:center; }
.pcc-lb-sub { margin-top:-2px; }
.pcc-lb-sub a { font-size:.8rem; padding:3px 11px; font-weight:600; background:#f6f9f8; }