/* ========== XPAJA PRO v4 (Dark UI) ========== */
:root{
  --bg:#0e0f12; --panel:#15171b; --card:#101215; --muted:#9aa0a6; --text:#e9ecef;
  --primary:#ff4757; --primary-600:#ff5d6b; --blue:#1e90ff; --green:#2ecc71; --border:#20232a
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
a{color:#d7dbe0;text-decoration:none}
a:hover{color:#fff}
.navbar{background:var(--panel)!important;border-bottom:1px solid var(--border)}
.navbar .nav-link{color:#cfd4da}
.navbar .nav-link:hover{color:#fff}
.logo{height:28px}
.container-wide{max-width:1400px}

.btn-accent{background:var(--primary);border:none}
.btn-accent:hover{background:var(--primary-600)}

.badge-exclusivo{background:var(--primary)}
.badge-hd{background:var(--blue)}
.badge-verificado{background:var(--green)}

.sidebar .list-group{border-radius:.6rem;overflow:hidden;border:1px solid var(--border)}
.sidebar .list-group-item{background:var(--card);color:#d7dbe0;border-color:var(--border)}
.sidebar .list-group-item:hover{background:#171a20}
.sidebar .list-group-item.active{background:#1c1f27;border-color:#2a2f39}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:1.25rem 0 .75rem}
.section-title h5{margin:0}

.video-card,.img-card{display:block;background:var(--card);border:1px solid var(--border);border-radius:.6rem;overflow:hidden;transition:transform .08s ease, box-shadow .2s ease}
.video-card:hover,.img-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.video-card .thumb{position:relative;aspect-ratio:16/9;background:#0c0d10}
.img-card .thumb{position:relative;aspect-ratio:1/1;background:#0c0d10}
.video-card .thumb img,.img-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.video-card .duration{position:absolute;right:.5rem;bottom:.5rem;background:rgba(0,0,0,.7);padding:.15rem .45rem;border-radius:.35rem;font-size:.78rem}
.video-card .badge{position:absolute;left:.5rem;top:.5rem}
.video-card .title,.img-card .title{font-size:1rem;font-weight:600;padding:.55rem .75rem .25rem;min-height:2.6em}
.video-card .meta,.img-card .meta{display:flex;gap:1rem;color:var(--muted);font-size:.9rem;padding:0 .75rem .75rem}

.card{background:var(--card);border:1px solid var(--border)}
.form-control,.form-select{background:#0f1115;border-color:#2a2f39;color:#e9ecef}
.form-control:focus,.form-select:focus{background:#0f1115;color:#fff;border-color:#3a4250;box-shadow:none}

.table{color:#d7dbe0}
.table thead th{color:#aab1bb}
.table td,.table th{border-color:#232831}

footer.footer{background:var(--panel);border-top:1px solid var(--border);color:#aab1bb;padding:1rem 0;margin-top:2rem}
.float-wa{position:fixed;right:18px;bottom:18px;background:#25d366;color:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:999}

.placeholder-thumb{display:flex;align-items:center;justify-content:center;background:#0b0d11;color:#677080;font-size:12px;font-weight:600}
.alert{border-radius:.5rem}
.pagination .page-link{background:#0e1116;border-color:#2a2f39;color:#d7dbe0}
.pagination .page-link:hover{background:#171a20;color:#fff}

/* Badges verificados */
.badge-verified{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:999px;font-size:.78rem;font-weight:700;background:linear-gradient(135deg,#1e90ff,#6ca8ff);color:#fff}
.badge-verified i{font-size:.85rem}
.badge-verified.gold{background:linear-gradient(135deg,#d4af37,#ffcc66);color:#000}
.badge-verified.creator{background:linear-gradient(135deg,#ff2d55,#ff8a5b)}
.user-chip{display:inline-flex;align-items:center;gap:.4rem;background:#12141a;border:1px solid var(--border);padding:.25rem .6rem;border-radius:999px}
.kit-steps{counter-reset:step}
.kit-steps .step{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem}
.kit-steps .step::before{counter-increment:step;content:counter(step);width:28px;height:28px;border-radius:50%;background:#1e90ff;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.skeleton{background:linear-gradient(90deg,#16181d,#1d2027,#16181d);background-size:200% 100%;animation:sheen 1.2s infinite}
@keyframes sheen{0%{background-position:200% 0}100%{background-position:-200% 0}}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#222;border:2px solid #333}
.profile-header{background:linear-gradient(135deg,#1a1c22,#0f1014);border:1px solid var(--border);border-radius:.8rem;padding:1rem 1.25rem}
.profile-stats{display:flex;gap:1.25rem;color:#aab1bb}
.profile-stats .k{font-weight:700;color:#e9ecef}
.btn-follow{border:1px solid var(--border);}

/* ====== v4: Chat (DM) ====== */
.chat-wrap{border:1px solid var(--border);border-radius:.8rem;background:var(--card);height:65vh;display:flex;flex-direction:column}
.chat-body{padding:1rem;overflow:auto;flex:1}
.msg{display:flex;margin-bottom:.5rem}
.msg .bubble{max-width:70%;padding:.5rem .75rem;border-radius:.75rem;border:1px solid var(--border)}
.msg.me{justify-content:flex-end}
.msg.me .bubble{background:#1a1e26}
.msg.other .bubble{background:#13161b}
.msg .meta{font-size:.75rem;color:#aab1bb;margin-top:.15rem}
.chat-input{border-top:1px solid var(--border);padding:.5rem;background:#0f1115}
.chat-input .form-control{background:#0b0d11}
.unread-badge{background:#e74c3c;color:#fff;border-radius:999px;font-size:.7rem;padding:.2rem .45rem;margin-left:.35rem}