/* Peplio Community v2 — Orange Theme */
:root { --pep-orange: #FF6B35; --pep-orange-light: #FF6B3515; --pep-orange-mid: #FF6B3530; }
#peplio-community-wrap * { box-sizing: border-box; }
#peplio-community-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1100px; margin: 0 auto; color: #1a1a1a; }
.pep-orange { color: var(--pep-orange); }

/* User bar */
.pep-user-bar { display: flex; align-items: center; gap: 12px; padding: 10px 1.5rem; background: #fff; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; position: relative; }
.pep-user-bar-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.pep-user-bar-right { display: flex; align-items: center; gap: 10px; }
.pep-ub-name { font-size: 14px; font-weight: 500; }
.pep-ub-pts { font-size: 12px; color: var(--pep-orange); font-weight: 600; background: var(--pep-orange-light); padding: 2px 8px; border-radius: 10px; }
.pep-notif-btn { background: none; border: 1px solid #eee; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 13px; position: relative; }
.pep-notif-count { background: var(--pep-orange); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; }
.pep-profile-link, .pep-logout-link { font-size: 13px; color: #555; text-decoration: none; }
.pep-profile-link:hover { color: var(--pep-orange); }
.pep-notif-dropdown { position: absolute; top: 100%; right: 80px; width: 300px; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); z-index: 1000; max-height: 360px; overflow-y: auto; padding: 8px 0; }
.pep-notif-item { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid #f5f5f5; line-height: 1.4; }
.pep-notif-item.unread { background: var(--pep-orange-light); }
.pep-notif-time { font-size: 11px; color: #bbb; margin-top: 3px; }
.pep-notif-loading { padding: 16px; text-align: center; color: #bbb; font-size: 13px; }

/* Hero */
.pep-hero { text-align: center; padding: 3rem 1.5rem 2rem; border-bottom: 1px solid #f5f5f5; }
.pep-hero-logo { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--pep-orange); text-transform: uppercase; margin-bottom: 1rem; }
.pep-hero-title { font-size: 28px; font-weight: 700; color: #111; line-height: 1.3; margin: 0 0 .75rem; }
.pep-hero-subtitle { font-size: 15px; color: #666; max-width: 500px; margin: 0 auto 1.75rem; line-height: 1.6; }
.pep-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pep-btn-primary { background: var(--pep-orange); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; transition: background .15s; }
.pep-btn-primary:hover { background: #e55a28; color: #fff; }
.pep-btn-outline { background: transparent; color: #111; border: 1px solid #ddd; padding: 10px 22px; border-radius: 8px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .15s; }
.pep-btn-outline:hover { border-color: var(--pep-orange); color: var(--pep-orange); }

/* Stats */
.pep-stats-bar { display: flex; justify-content: center; gap: 3rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #f5f5f5; flex-wrap: wrap; }
.pep-stat { text-align: center; }
.pep-stat-num { font-size: 22px; font-weight: 700; color: #111; }
.pep-stat-label { font-size: 12px; color: #aaa; margin-top: 2px; }

/* Layout */
.pep-main-layout { display: grid; grid-template-columns: 1fr 270px; gap: 2rem; padding: 1.5rem; align-items: start; }
@media (max-width: 768px) { .pep-main-layout { grid-template-columns: 1fr; } .pep-sidebar { display: none; } }

/* Tabs */
.pep-tabs { display: flex; border-bottom: 1px solid #f0f0f0; margin-bottom: 1rem; overflow-x: auto; }
.pep-tab { padding: 10px 16px; font-size: 13px; color: #888; cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; white-space: nowrap; font-family: inherit; transition: color .15s; }
.pep-tab:hover { color: var(--pep-orange); }
.pep-tab.active { color: var(--pep-orange); border-bottom-color: var(--pep-orange); font-weight: 600; }

/* Post cards */
.pep-post-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .75rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pep-post-card:hover { border-color: var(--pep-orange); box-shadow: 0 2px 12px rgba(255,107,53,.08); }
.pep-pinned { border-left: 3px solid var(--pep-orange); }
.pep-pin-label { font-size: 11px; color: var(--pep-orange); margin-bottom: .4rem; }
.pep-post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: .5rem; flex-wrap: wrap; }
.pep-badge { font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 500; }
.cat-red   { background: #FDECEA; color: #c62828; }
.cat-teal  { background: #E0F7F1; color: #00695c; }
.cat-blue  { background: #E3F2FD; color: #1565c0; }
.cat-amber { background: #FFF8E1; color: #e65100; }
.cat-gray  { background: #F5F5F5; color: #555; }
.pep-time { font-size: 12px; color: #ccc; }
.pep-post-title { font-size: 15px; font-weight: 600; color: #111; margin-bottom: .4rem; line-height: 1.4; }
.pep-post-excerpt { font-size: 13px; color: #777; line-height: 1.55; margin-bottom: .75rem; }
.pep-post-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pep-author { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.pep-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pep-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; text-decoration: none; }
.av-orange { background: var(--pep-orange-light); color: var(--pep-orange); }
.av-teal   { background: #E0F7F1; color: #00695c; }
.av-blue   { background: #E3F2FD; color: #1565c0; }
.av-purple { background: #EDE7F6; color: #4527a0; }
.av-coral  { background: #FBE9E7; color: #bf360c; }
.pep-author-name { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pep-author-badge { font-size: 10px; padding: 2px 7px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.pep-author-pts { font-size: 11px; color: var(--pep-orange); font-weight: 600; }
.pep-blog-link { font-size: 11px; color: var(--pep-orange); text-decoration: none; background: var(--pep-orange-light); padding: 2px 8px; border-radius: 6px; white-space: nowrap; margin-left: 4px; }
.pep-post-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pep-upvote-btn, .pep-reply-count-btn { background: none; border: 1px solid #eee; border-radius: 6px; padding: 4px 10px; font-size: 12px; color: #888; cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: inherit; transition: all .15s; }
.pep-upvote-btn:hover { border-color: var(--pep-orange); color: var(--pep-orange); }
.pep-upvote-btn.voted { background: var(--pep-orange); color: #fff; border-color: var(--pep-orange); }
.pep-reply-count-btn:hover { border-color: #ddd; color: #333; }

/* Form */
.pep-post-form-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.pep-form-title { font-size: 15px; font-weight: 600; margin-bottom: 1rem; color: #111; }
.pep-login-nudge { background: var(--pep-orange-light); border: 1px solid var(--pep-orange-mid); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #555; margin-bottom: 1rem; }
.pep-login-nudge a { color: var(--pep-orange); font-weight: 600; }
.pep-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0; }
@media (max-width: 500px) { .pep-form-row { grid-template-columns: 1fr; } }
.pep-input, .pep-select, .pep-textarea { width: 100%; padding: 9px 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111; outline: none; margin-bottom: 10px; transition: border-color .15s; background: #fff; }
.pep-input:focus, .pep-textarea:focus { border-color: var(--pep-orange); }
.pep-textarea { resize: vertical; }
.pep-terms-note { font-size: 12px; color: #aaa; margin: 0 0 10px; }
.pep-terms-note a { color: var(--pep-orange); }
.pep-form-actions { display: flex; gap: 10px; align-items: center; }
.pep-submit-btn { background: var(--pep-orange); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s; }
.pep-submit-btn:hover { background: #e55a28; }
.pep-submit-btn:disabled { background: #ccc; cursor: not-allowed; }
.pep-cancel-btn { background: none; border: 1px solid #ddd; color: #777; padding: 10px 18px; border-radius: 8px; font-size: 14px; cursor: pointer; font-family: inherit; }
.pep-form-msg { font-size: 13px; margin-top: 8px; padding: 8px 12px; border-radius: 6px; display: none; }
.pep-form-msg.success { background: #E8F5E9; color: #2e7d32; display: block; }
.pep-form-msg.error { background: #FFEBEE; color: #c62828; display: block; }

/* Detail */
.pep-back-btn { background: none; border: none; color: #888; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 1.25rem; font-family: inherit; }
.pep-back-btn:hover { color: var(--pep-orange); }
.pep-detail-post { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; }
.pep-detail-title { font-size: 20px; font-weight: 700; color: #111; margin: .5rem 0 1rem; line-height: 1.35; }
.pep-detail-content { font-size: 15px; color: #444; line-height: 1.7; }
.pep-detail-blog-link { display: inline-flex; align-items: center; gap: 6px; margin-top: .75rem; font-size: 13px; color: var(--pep-orange); text-decoration: none; background: var(--pep-orange-light); padding: 5px 12px; border-radius: 6px; }
.pep-replies-title { font-size: 13px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.pep-reply-card { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.pep-reply-header { display: flex; align-items: center; gap: 8px; margin-bottom: .6rem; }
.pep-reply-content { font-size: 14px; color: #444; line-height: 1.6; }
.pep-reply-form-section { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1.25rem; margin-top: 1rem; }
.pep-reply-form-title { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 1rem; }

/* Load more */
.pep-load-more-wrap { text-align: center; padding: 1rem 0; }
.pep-load-more-btn { background: #fff; border: 1px solid #ddd; color: #666; padding: 10px 28px; border-radius: 8px; font-size: 14px; cursor: pointer; font-family: inherit; transition: all .15s; }
.pep-load-more-btn:hover { border-color: var(--pep-orange); color: var(--pep-orange); }

/* Sidebar */
.pep-sidebar { position: sticky; top: 2rem; }
.pep-sidebar-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.pep-sidebar-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.pep-my-stats { border-top: 3px solid var(--pep-orange); }
.pep-my-badge { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; display: inline-block; margin-bottom: .75rem; }
.pep-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pep-mini-stat { background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; }
.pep-mini-stat span { display: block; font-size: 18px; font-weight: 700; color: var(--pep-orange); }
.pep-mini-stat { font-size: 11px; color: #aaa; margin-top: 2px; }
.pep-progress-wrap { margin-top: .75rem; }
.pep-progress-label { font-size: 11px; color: #aaa; margin-bottom: 4px; }
.pep-progress-bar { background: #f0f0f0; border-radius: 4px; height: 6px; overflow: hidden; }
.pep-progress-fill { background: var(--pep-orange); height: 100%; border-radius: 4px; transition: width .3s; }
.pep-lb-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.pep-lb-item:last-of-type { border-bottom: none; }
.pep-lb-rank { font-size: 13px; font-weight: 700; color: #ddd; min-width: 18px; }
.pep-lb-info { flex: 1; min-width: 0; }
.pep-lb-name { font-size: 13px; color: #333; font-weight: 500; text-decoration: none; display: block; }
.pep-lb-name:hover { color: var(--pep-orange); }
.pep-lb-blog { font-size: 12px; color: var(--pep-orange); text-decoration: none; margin-left: 4px; }
.pep-lb-pts { font-size: 12px; font-weight: 700; color: var(--pep-orange); }
.pep-see-all-link { display: block; text-align: center; font-size: 13px; color: var(--pep-orange); text-decoration: none; margin-top: .75rem; }
.pep-cat-list { display: flex; flex-direction: column; gap: 2px; }
.pep-cat-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.pep-cat-item:hover { background: var(--pep-orange-light); }
.pep-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pep-cat-name { font-size: 13px; color: #333; flex: 1; }
.pep-cat-count { font-size: 12px; color: #ccc; }
.pep-trending-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f9f9f9; }
.pep-trending-item:last-child { border-bottom: none; }
.pep-trend-num { font-size: 15px; font-weight: 700; color: #e8e8e8; min-width: 22px; }
.pep-trend-text { font-size: 13px; color: #555; line-height: 1.4; }
.pep-join-cta { background: var(--pep-orange-light); border-color: var(--pep-orange-mid); }
.pep-join-cta p { font-size: 13px; color: #666; margin: 0 0 1rem; line-height: 1.5; }

/* Leaderboard full */
.pep-lb-full-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .75rem; }
.pep-lb-top { border-color: var(--pep-orange); background: var(--pep-orange-light); }
.pep-lb-rank-big { font-size: 20px; min-width: 30px; text-align: center; }
.pep-lb-full-info { flex: 1; }
.pep-lb-full-name { font-size: 15px; font-weight: 600; color: #111; text-decoration: none; display: block; }
.pep-lb-full-name:hover { color: var(--pep-orange); }
.pep-lb-blog-url { font-size: 12px; color: var(--pep-orange); text-decoration: none; display: block; margin-top: 2px; }
.pep-lb-bio { font-size: 12px; color: #888; margin-top: 4px; }
.pep-lb-right { text-align: right; }
.pep-lb-pts-big { font-size: 22px; font-weight: 700; color: var(--pep-orange); }

/* Auth page */
.pep-auth-wrap { display:grid; grid-template-columns:1fr 320px; gap:2rem; max-width:900px; margin:2rem auto; padding:0 1rem; align-items:start; }
@media(max-width:700px){.pep-auth-wrap{grid-template-columns:1fr;}.pep-auth-benefits{display:none;}}
.pep-auth-card { background:#fff; border:1px solid #eee; border-radius:16px; padding:2rem; }
.pep-auth-title { font-size:20px; font-weight:700; color:#111; margin:0 0 .5rem; text-align:center; }
.pep-auth-sub { font-size:14px; color:#888; text-align:center; margin:0 0 1.5rem; }
.pep-google-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 20px; border:1.5px solid #ddd; border-radius:8px; font-size:14px; font-weight:500; color:#333; text-decoration:none; background:#fff; margin-bottom:1rem; transition:border-color .15s,box-shadow .15s; cursor:pointer; }
.pep-google-btn:hover { border-color:#4285F4; box-shadow:0 2px 8px rgba(66,133,244,.15); color:#333; }
.pep-auth-divider { display:flex; align-items:center; gap:10px; margin:1rem 0; color:#ccc; font-size:13px; }
.pep-auth-divider::before,.pep-auth-divider::after { content:''; flex:1; height:1px; background:#f0f0f0; }
.pep-auth-switch { text-align:center; font-size:13px; color:#888; margin-top:1rem; }
.pep-auth-switch a { color:var(--pep-orange); font-weight:600; text-decoration:none; }
.pep-google-setup-notice { background:#FFF8E1; border:1px solid #FFE082; border-radius:8px; padding:10px 14px; font-size:13px; color:#555; margin-bottom:1rem; }
.pep-welcome-banner { background:var(--pep-orange-light,#FF6B3515); border:1px solid var(--pep-orange,#FF6B35); border-radius:0; padding:12px 1.5rem; font-size:14px; color:#555; text-align:center; }