.xnx-ci-page { --ci-grad: linear-gradient(135deg, var(--bs-primary), #8b5cf6); }
.xnx-ci-hero {
    position: relative; overflow: hidden; border: 0; border-radius: 22px;
    background: radial-gradient(circle at top left, rgba(var(--bs-primary-rgb), .22), transparent 36%),
                linear-gradient(135deg, rgba(var(--bs-primary-rgb), .10), rgba(139,92,246,.08));
}
.xnx-ci-hero:before { content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:rgba(var(--bs-primary-rgb), .12); }
.xnx-ci-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius:999px; background:rgba(var(--bs-primary-rgb), .12); color:var(--bs-primary); font-weight:700; }
.xnx-ci-title { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; }
.xnx-ci-btn-main { border:0; border-radius:999px; padding:.9rem 1.5rem; font-weight:800; background:var(--ci-grad); color:#fff; box-shadow:0 14px 28px rgba(var(--bs-primary-rgb), .24); }
.xnx-ci-btn-main:hover { color:#fff; transform: translateY(-1px); box-shadow:0 18px 36px rgba(var(--bs-primary-rgb), .30); }
.xnx-ci-btn-main[disabled] { opacity:.68; box-shadow:none; }
.xnx-ci-stat-card { border:1px solid var(--bs-border-color); border-radius:18px; background:var(--bs-body-bg); padding:1rem; }
.xnx-ci-stat-num { font-size:1.7rem; font-weight:800; color:var(--bs-primary); }
.xnx-ci-moods { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.6rem; }
.xnx-ci-mood { border:1px solid var(--bs-border-color); background:var(--bs-body-bg); border-radius:14px; padding:.7rem .4rem; text-align:center; cursor:pointer; transition:.18s ease; }
.xnx-ci-mood input { display:none; }
.xnx-ci-mood span { display:block; font-size:1.35rem; }
.xnx-ci-mood small { display:block; color:var(--bs-secondary-color); margin-top:.25rem; }
.xnx-ci-mood:has(input:checked), .xnx-ci-mood:hover { border-color:var(--bs-primary); background:rgba(var(--bs-primary-rgb), .08); transform:translateY(-1px); }
.xnx-ci-nav { display:flex; gap:.6rem; flex-wrap:wrap; }
.xnx-ci-nav a { border-radius:999px; }
.xnx-ci-calendar { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:.55rem; }
.xnx-ci-day { min-height:72px; border:1px solid var(--bs-border-color); border-radius:14px; padding:.5rem; background:var(--bs-body-bg); color:var(--bs-secondary-color); }
.xnx-ci-day.is-checked { border-color:rgba(var(--bs-primary-rgb), .45); background:rgba(var(--bs-primary-rgb), .10); color:var(--bs-body-color); }
.xnx-ci-day .n { font-weight:800; }
.xnx-ci-day .r { font-size:.78rem; color:var(--bs-primary); font-weight:700; }
.xnx-ci-rank-item { display:flex; align-items:center; gap:.85rem; padding:.8rem 0; border-bottom:1px solid var(--bs-border-color); }
.xnx-ci-rank-no { width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; font-weight:800; background:rgba(var(--bs-primary-rgb), .10); color:var(--bs-primary); }
.xnx-ci-brief-btn {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    flex:1 1 0 !important;
    min-width:0;
    min-height:38px;
    padding:.5rem .75rem;
    border:1px solid rgba(var(--bs-primary-rgb), .24);
    border-radius:var(--bs-border-radius, .5rem) !important;
    background:var(--bs-body-bg);
    color:var(--bs-primary);
    text-decoration:none;
    font-size:.95rem;
    font-weight:700;
    line-height:1.2;
    box-shadow:0 8px 18px rgba(var(--bs-primary-rgb), .06);
    transition:background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.xnx-ci-brief-btn:hover {
    border-color:rgba(var(--bs-primary-rgb), .45);
    background:rgba(var(--bs-primary-rgb), .06);
    color:var(--bs-primary);
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(var(--bs-primary-rgb), .10);
}
.xnx-ci-brief-btn.is-checked {
    border-color:rgba(var(--bs-primary-rgb), .24);
    background:var(--bs-body-bg);
    color:var(--bs-primary);
}
.xnx-ci-brief-btn i { font-size:1rem; flex-shrink:0; }
.xnx-ci-brief-btn span { white-space:nowrap; }
.x-card .py-3.d-flex.gap-2.flex-wrap > .btn,
.card .py-3.d-flex.gap-2.flex-wrap > .btn {
    flex:1 1 0 !important;
    min-width:0;
}
.xnx-ci-mini-stat {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    width:100%;
    color:var(--bs-secondary-color);
    font-size:.875rem;
}
.xnx-ci-mini-stat-text {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    min-width:0;
}
.xnx-ci-mini-stat-text i { color:var(--bs-primary); }
.xnx-ci-mini-stat-text b { color:var(--bs-body-color); }
.xnx-ci-avatar-stack {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-shrink:0;
    padding-right:2px;
}
.xnx-ci-avatar-item {
    display:inline-flex;
    width:24px;
    height:24px;
    margin-left:-7px;
    border:2px solid var(--bs-body-bg);
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.10);
    background:var(--bs-body-bg);
}
.xnx-ci-avatar-item:first-child { margin-left:0; }
.xnx-ci-avatar-item img,
.xnx-ci-avatar-item .avatar {
    width:100% !important;
    height:100% !important;
    object-fit:cover;
}
@media (max-width: 575.98px) { .xnx-ci-moods { grid-template-columns:repeat(3,1fr); } .xnx-ci-calendar { gap:.35rem; } .xnx-ci-day { min-height:58px; padding:.35rem; } }