/* ============================================================
   Donexa — Next Generation Social Communication
   Dark theme stylesheet
   ============================================================ */

:root {
    --donexa-bg: #0a0a1a;
    --donexa-bg-soft: #111129;
    --donexa-card: #151530;
    --donexa-card-hover: #1b1b3d;
    --donexa-border: rgba(255, 255, 255, 0.08);
    --donexa-text: #e8e8f5;
    --donexa-muted: #8f8fb0;
    --donexa-primary: #7c3aed;
    --donexa-primary-2: #06b6d4;
    --donexa-gradient: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
    --donexa-danger: #ef4444;
    --donexa-success: #22c55e;
    --donexa-radius: 14px;
}

html, body {
    background-color: var(--donexa-bg);
    color: var(--donexa-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    min-height: 100vh;
}

a { color: inherit; }
a:hover { opacity: 0.9; }

/* ---------- Navbar ---------- */
.donexa-navbar {
    background: rgba(10, 10, 26, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--donexa-border);
}
.donexa-navbar .nav-link {
    color: var(--donexa-muted);
    font-size: 0.88rem;
    border-radius: 10px;
    margin: 0 2px;
    padding: 0.45rem 0.7rem;
    transition: all 0.15s ease;
}
.donexa-navbar .nav-link:hover,
.donexa-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.donexa-navbar .navbar-toggler { border-color: var(--donexa-border); }
.donexa-navbar .navbar-toggler:focus { box-shadow: none; }

.donexa-search {
    background: var(--donexa-bg-soft) !important;
    border: 1px solid var(--donexa-border) !important;
    color: var(--donexa-text) !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    width: 210px;
}
.donexa-search:focus {
    border-color: var(--donexa-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.donexa-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1080;
    background: var(--donexa-card);
    border: 1px solid var(--donexa-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    max-height: 380px;
    overflow-y: auto;
}
.donexa-dropdown-item {
    display: block;
    padding: 0.55rem 0.85rem;
    color: var(--donexa-text);
    text-decoration: none;
    font-size: 0.85rem;
}
.donexa-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); }

/* ---------- Layout ---------- */
.donexa-main { min-height: calc(100vh - 140px); }

.donexa-page.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(1000px 500px at 80% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(6, 182, 212, 0.18), transparent 60%),
        var(--donexa-bg);
}

.donexa-logo {
    width: 72px;
    height: 72px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    border-radius: 22px;
    background: var(--donexa-gradient);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.4);
}

/* ---------- Cards & inputs ---------- */
.donexa-card {
    background: var(--donexa-card);
    border: 1px solid var(--donexa-border);
    border-radius: var(--donexa-radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, transform 0.15s ease;
}
.donexa-card:hover { background: var(--donexa-card-hover); }

.donexa-input,
.form-control.donexa-input {
    background: var(--donexa-bg-soft) !important;
    border: 1px solid var(--donexa-border) !important;
    color: var(--donexa-text) !important;
    border-radius: 10px !important;
}
.donexa-input:focus {
    border-color: var(--donexa-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
    background: var(--donexa-bg-soft) !important;
    color: var(--donexa-text) !important;
}
.donexa-input::placeholder { color: var(--donexa-muted) !important; }

.btn-gradient {
    background: var(--donexa-gradient) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-gradient:hover { filter: brightness(1.12); }
.btn-gradient:active { transform: scale(0.98); }

.text-gradient {
    background: var(--donexa-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Avatars ---------- */
.avatar-sm {
    background: var(--donexa-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}
.avatar-placeholder,
.post-avatar-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--donexa-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.post-avatar-placeholder.small { width: 34px; height: 34px; font-size: 0.8rem; }
.post-avatar-placeholder.tiny { width: 26px; height: 26px; font-size: 0.65rem; }

.group-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--donexa-bg-soft);
    border: 1px solid var(--donexa-border);
    color: var(--donexa-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Stories ---------- */
.stories-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px; }
.story-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 3px;
    background: var(--donexa-gradient);
    flex-shrink: 0;
}
.story-ring-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--donexa-card);
    border: 3px solid var(--donexa-bg);
}
.story-tile { position: relative; cursor: pointer; }
.story-tile:hover img, .story-tile:hover video { transform: scale(1.03); }
.story-tile img, .story-tile video { transition: transform 0.2s ease; }
.story-overlay { pointer-events: auto; }

/* ---------- Post cards ---------- */
.post-card {
    position: relative;
    background: var(--donexa-card);
    border: 1px solid var(--donexa-border);
    border-radius: var(--donexa-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease;
}
.post-card:hover { background: var(--donexa-card-hover); }
 .post-header { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.6rem; position: relative; padding-right: 44px; }
.post-menu-wrap { position: absolute; top: .25rem; right: .25rem; z-index: 20; flex: 0 0 auto; }
.post-menu-trigger { width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--donexa-muted);display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;cursor:pointer; }
.post-menu-trigger:hover,.post-menu-trigger[aria-expanded="true"] { background:rgba(255,255,255,.08);color:var(--donexa-text); }
.post-menu { position:absolute;z-index:1055;top:42px;right:0;width:min(360px,calc(100vw - 32px));padding:.45rem;background:var(--donexa-card);border:1px solid var(--donexa-border);border-radius:16px;box-shadow:0 18px 55px rgba(0,0,0,.45);display:none; }
.post-menu.is-open { display:block;animation:postMenuIn .12s ease-out; }
.post-menu-item { position:relative;width:100%;border:0;background:transparent;color:var(--donexa-text);display:flex;align-items:center;gap:.8rem;text-align:left;padding:.72rem .65rem;border-radius:12px;font:inherit;cursor:pointer;min-height:48px; }
.post-menu-item:hover { background:rgba(255,255,255,.06); }
.post-menu-item > span:not(.post-menu-icon) { min-width:0;flex:1; }
.post-menu-item strong,.post-menu-item small { display:block; }
.post-menu-item strong { font-weight:600; }
.post-menu-item small { color:var(--donexa-muted);font-size:.78rem;line-height:1.25;margin-top:.08rem; }
.post-menu-icon { width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--donexa-text); }
.post-menu-item-featured .post-menu-icon { font-size:1.65rem; }
.post-menu-chevron { color:var(--donexa-muted);margin-left:auto;font-size:.9rem; }
.post-menu-divider { height:1px;background:var(--donexa-border);margin:.3rem .5rem; }
.profile-post-card { position:relative; }
@keyframes postMenuIn { from { opacity:0;transform:translateY(-4px) scale(.98); } to { opacity:1;transform:translateY(0) scale(1); } }
.post-menu-toast { position:fixed;z-index:2000;left:50%;bottom:24px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:rgba(20,20,25,.96);color:#fff;border:1px solid var(--donexa-border);border-radius:999px;padding:.65rem 1rem;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.85rem;transition:opacity .18s ease,transform .18s ease; }
.post-menu-toast.is-visible { opacity:1;transform:translate(-50%,0); }
@media (max-width:576px) {
 .post-menu-open::before { content:"";position:fixed;inset:0;z-index:1050;background:rgba(0,0,0,.42);pointer-events:auto; }
 .post-menu { position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:min(82vh,680px);overflow-y:auto;padding:.65rem .7rem calc(.75rem + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -16px 50px rgba(0,0,0,.5); }
 .post-menu::before { content:"";display:block;width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.35);margin:.15rem auto .6rem; }
 .post-menu-item { min-height:52px;padding:.78rem .55rem; }
 .post-menu-icon { width:38px;height:38px;flex-basis:38px; }
}

.post-content {
    color: var(--donexa-text);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Long post text is collapsed by default when it exceeds the preview height. */
.post-text-collapsible.is-collapsed {
    max-height: 9rem;
    overflow: hidden;
}
.channel-post-content {
    white-space: normal;
    overflow-wrap: anywhere;
}
.channel-post-content.is-collapsed {
    max-height: 12rem;
    overflow: hidden;
}
.post-see-more {
    display: inline-flex;
    align-items: center;
    margin-top: .45rem;
    padding: .15rem 0;
    border: 0;
    background: transparent;
    color: var(--donexa-primary-2);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}
.post-see-more:hover {
    text-decoration: underline;
}
.post-media img, .post-media video {
    max-height: 480px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    margin-top: 0.5rem;
}
.post-actions {
    display: flex;
    gap: 1.2rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--donexa-border);
}
.post-action-btn {
    background: none;
    border: none;
    color: var(--donexa-muted);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
}
.post-action-btn:hover { color: var(--donexa-text); background: rgba(255, 255, 255, 0.05); }
.post-action-btn.liked { color: #f43f5e; }
.post-action-btn.bookmarked { color: var(--donexa-primary-2); }

.post-poll { border-radius: 12px; }
.poll-option-row { cursor: default; font-size: 0.85rem; }

/* ---------- Composer ---------- */
#composerPreview img, #composerPreview video {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--donexa-border);
}

/* ---------- Messaging ---------- */
.conversation-item {
    border-radius: 10px;
    padding: 0.35rem 0.5rem;
    transition: background 0.15s ease;
}
.conversation-item:hover { background: rgba(255, 255, 255, 0.05); }

.msg-bubble {
    max-width: 75%;
    padding: 0.5rem 0.85rem;
    border-radius: 14px;
    font-size: 0.88rem;
    word-break: break-word;
    margin-bottom: 0.4rem;
}
.msg-mine {
    background: var(--donexa-gradient);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}
.msg-theirs {
    background: var(--donexa-bg-soft);
    color: var(--donexa-text);
    border-bottom-left-radius: 4px;
}
.msg-time { font-size: 0.65rem; opacity: 0.7; display: block; margin-top: 2px; }

/* ---------- Hall of Fame ---------- */
.hall-podium-gold { background: rgba(250, 204, 21, 0.12); border: 1px solid rgba(250, 204, 21, 0.35); }
.hall-podium-silver { background: rgba(203, 213, 225, 0.10); border: 1px solid rgba(203, 213, 225, 0.3); }
.hall-podium-bronze { background: rgba(205, 127, 50, 0.12); border: 1px solid rgba(205, 127, 50, 0.35); }

/* ---------- Footer ---------- */
.donexa-footer { background: var(--donexa-bg-soft); }

/* ---------- Misc ---------- */
.fade-in { animation: fadeIn 0.35s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.text-purple { color: var(--donexa-primary-2) !important; }

.otp-digit {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.poll-box {
    background: var(--donexa-bg-soft);
    border: 1px solid var(--donexa-border);
    border-radius: 12px;
    padding: 0.75rem;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--donexa-bg); }
::-webkit-scrollbar-thumb { background: #2c2c55; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a6e; }


.wa-attach-btn {
  width: 40px; height: 40px;
  border: 0; background: transparent; color: #aebac1;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; font-size: 1.15rem;
}
.wa-attach-btn:hover { background: rgba(134,150,160,.12); color: #e9edef; }
.wa-attachment-preview {
  max-width: 180px; padding: 6px 9px; border-radius: 10px;
  background: #182229; color: #d9e2e7; font-size: .75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-message-image { display:block; max-width:280px; max-height:360px; border-radius:8px; margin-bottom:4px; object-fit:cover; }
.wa-message-video { display:block; width:min(320px,100%); max-height:360px; border-radius:8px; margin-bottom:4px; background:#000; }
.wa-message-document { display:flex; align-items:center; gap:8px; min-width:190px; color:#e9edef; text-decoration:none; padding:8px; border-radius:8px; background:rgba(255,255,255,.05); }
.wa-message-document small { margin-left:auto; color:#53bdeb; }
.wa-msg-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.wa-msg-actions button { border:0; background:transparent; color:#8696a0; font-size:.65rem; padding:0; cursor:pointer; }
.wa-msg-actions button:hover { color:#e9edef; text-decoration:underline; }
.wa-deleted { color:#8696a0; font-size:.8rem; }

@media (max-width: 991.98px) {
    .donexa-search { width: 100%; }
}
/* ---------- Story reels fullscreen viewer ---------- */
.story-reels {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.story-reels-open {
    overflow: hidden;
}

.story-reels .story-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.story-reels .story-media img,
.story-reels .story-media video {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.story-progress {
    position: absolute;
    top: 14px;
    left: 16px;
    right: 16px;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    z-index: 5;
    overflow: hidden;
}

.story-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    transition-property: width;
    transition-timing-function: linear;
}

.story-nav {
    position: absolute;
    z-index: 6;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.story-nav:hover {
    background: rgba(255, 255, 255, 0.24);
}

.story-close {
    top: 14px;
    right: 14px;
}

.story-mute {
    top: 66px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
}

.story-prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.story-next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.story-author-slot {
    position: absolute;
    bottom: 74px;
    left: 0;
    right: 0;
    z-index: 6;
    text-align: center;
}

.story-author-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.story-author-link:hover {
    color: #fff;
    text-decoration: underline;
}

.story-avatar-img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.story-author {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.story-meta {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 24px;
    text-align: center;
}

.story-time {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}

.story-caption {
    color: #fff;
    font-size: 1rem;
    max-width: 70%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

@media (max-width: 767.98px) {
    .story-prev { left: 6px; }
    .story-next { right: 6px; }
    .story-caption { max-width: 88%; }
}
/* ================= WhatsApp-style messaging ================= */
.wa-app {
  display: flex;
  height: calc(100vh - 58px);
  min-height: 480px;
  background: #0b141a;
  border: 1px solid var(--donexa-border);
  border-radius: 12px;
  overflow: hidden;
}
.wa-sidebar {
  width: 340px;
  min-width: 300px;
  border-right: 1px solid rgba(134, 150, 160, 0.15);
  background: #111b21;
  display: flex;
  flex-direction: column;
}
.wa-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #202c33;
}
.wa-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px;
  padding: 6px 12px;
  background: #202c33;
  border-radius: 20px;
  color: #8696a0;
}
.wa-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #e9edef;
  font-size: 0.85rem;
}
.wa-search input::placeholder { color: #8696a0; }
.wa-chat-list { flex: 1; overflow-y: auto; }
.wa-chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid rgba(134, 150, 160, 0.08);
}
.wa-chat-item:hover { background: #202c33; }
.wa-chat-item.active { background: #2a3942; }
.wa-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.wa-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--donexa-gradient, linear-gradient(135deg,#7b2ff7,#f107a3));
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
}
.wa-chat-item-body { flex: 1; min-width: 0; }
.wa-chat-item-top { display: flex; justify-content: space-between; align-items: baseline; }
.wa-chat-name { color: #e9edef; font-size: 0.9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-time { color: #8696a0; font-size: 0.7rem; flex-shrink: 0; }
.wa-chat-item-bottom { display: flex; justify-content: space-between; align-items: center; }
.wa-chat-preview { color: #8696a0; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-unread-badge {
  background: #00a884;
  color: #fff;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  flex-shrink: 0;
}
.wa-empty { color: #8696a0; font-size: 0.8rem; padding: 24px 16px; text-align: center; }
.wa-search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(134,150,160,.08);
}
.wa-search-result:hover { background: #202c33; }

.wa-chat-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wa-no-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4a5d66;
  background: #0b141a;
}
.wa-no-chat i { font-size: 4rem; }
.wa-chat-window { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #202c33;
  border-bottom: 1px solid rgba(134,150,160,.15);
}
.wa-back-btn { background: none; border: 0; color: #e9edef; font-size: 1.2rem; }
.wa-peer-info { display: flex; flex-direction: column; line-height: 1.2; }
.wa-peer-name { color: #e9edef; font-weight: 500; font-size: 0.95rem; text-decoration: none; }
.wa-peer-name:hover { color: #fff; }
.wa-peer-status { color: #8696a0; font-size: 0.72rem; }

.wa-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 7% 12px;
  background:
    radial-gradient(circle at 20% 30%, rgba(123,47,247,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(241,7,163,0.04), transparent 40%),
    #0b141a;
}
.wa-encryption-notice {
  text-align: center;
  color: #ffd279;
  font-size: 0.72rem;
  background: rgba(255, 210, 121, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 auto 14px;
  max-width: 480px;
}
.wa-msg-row { display: flex; margin-bottom: 3px; }
.wa-msg-row.mine { justify-content: flex-end; }
.wa-bubble {
  position: relative;
  max-width: 65%;
  padding: 6px 9px 7px;
  border-radius: 10px;
  background: #202c33;
  color: #e9edef;
  font-size: 0.875rem;
  line-height: 1.35;
  word-wrap: break-word;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.wa-msg-row.mine .wa-bubble { background: #005c4b; border-top-right-radius: 2px; }
.wa-msg-row:not(.mine) .wa-bubble { border-top-left-radius: 2px; }
.wa-msg-sender { color: #53bdeb; font-size: 0.72rem; font-weight: 600; display: block; margin-bottom: 1px; }
.wa-msg-meta {
  float: right;
  margin: 6px 0 -2px 8px;
  color: rgba(233, 237, 239, 0.55);
  font-size: 0.65rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.wa-ticks { color: #53bdeb; }
.wa-msg-day {
  text-align: center;
  margin: 12px 0;
  color: #8696a0;
  font-size: 0.72rem;
}
.wa-msg-day span { background: #182229; border-radius: 8px; padding: 4px 10px; }

.wa-compose {
  padding: 10px 16px;
  background: #202c33;
  border-top: 1px solid rgba(134,150,160,.15);
}
.wa-compose form { display: flex; align-items: center; gap: 10px; }
.wa-input {
  flex: 1;
  background: #2a3942;
  border: 0;
  outline: none;
  border-radius: 20px;
  color: #e9edef;
  padding: 10px 16px;
  font-size: 0.9rem;
}
.wa-input::placeholder { color: #8696a0; }
.wa-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: #00a884;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-send-btn:hover { background: #06cf9c; }


.wa-attach-btn {
  width: 40px; height: 40px;
  border: 0; background: transparent; color: #aebac1;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; font-size: 1.15rem;
}
.wa-attach-btn:hover { background: rgba(134,150,160,.12); color: #e9edef; }
.wa-attachment-preview {
  max-width: 180px; padding: 6px 9px; border-radius: 10px;
  background: #182229; color: #d9e2e7; font-size: .75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-message-image { display:block; max-width:280px; max-height:360px; border-radius:8px; margin-bottom:4px; object-fit:cover; }
.wa-message-video { display:block; width:min(320px,100%); max-height:360px; border-radius:8px; margin-bottom:4px; background:#000; }
.wa-message-document { display:flex; align-items:center; gap:8px; min-width:190px; color:#e9edef; text-decoration:none; padding:8px; border-radius:8px; background:rgba(255,255,255,.05); }
.wa-message-document small { margin-left:auto; color:#53bdeb; }
.wa-msg-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.wa-msg-actions button { border:0; background:transparent; color:#8696a0; font-size:.65rem; padding:0; cursor:pointer; }
.wa-msg-actions button:hover { color:#e9edef; text-decoration:underline; }
.wa-deleted { color:#8696a0; font-size:.8rem; }

@media (max-width: 991.98px) {
  .wa-sidebar { width: 100%; min-width: 0; }
  .wa-chat-pane { display: none; }
  .wa-app.chat-open .wa-sidebar { display: none; }
  .wa-app.chat-open .wa-chat-pane { display: flex; }
  .wa-back-btn { display: inline-block !important; }
  .wa-bubble { max-width: 82%; }
  .wa-messages { padding: 14px 4% 10px; }
}


/* Donexa targeted interaction fixes */
.nav-unread-badge { font-size:.62rem; vertical-align:top; }
.post-comments { display:none; border-top:1px solid var(--donexa-border); margin-top:.75rem; padding-top:.75rem; }
.post-comments.is-open { display:block; }
.post-comments-inner { background:rgba(255,255,255,.015); border-radius:12px; padding:.75rem; }
.post-comments-list { max-height:320px; overflow-y:auto; padding-right:.25rem; }
.post-comment-item { display:flex; gap:.6rem; align-items:flex-start; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.post-comment-item:last-child { border-bottom:0; }
.post-comment-body { flex:1; min-width:0; }
.post-comment-text { color:var(--donexa-text); font-size:.88rem; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:.15rem; }
.post-comment-input-row { display:flex; gap:.5rem; align-items:center; margin-top:.65rem; }
.post-comment-input-row .form-control { min-width:0; }
.poll-option-row { cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.poll-option-row:hover, .poll-option-row.poll-selected { background:rgba(54,181,255,.10)!important; border-color:#36b5ff!important; }
.story-user-group { display:flex; flex-direction:column; align-items:center; gap:2px; }
.story-user-group > .d-none { display:none!important; }

/* ---------- Mobile top navigation ---------- */
.donexa-mobile-nav { display:none; }

.wa-attach-btn {
  width: 40px; height: 40px;
  border: 0; background: transparent; color: #aebac1;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; font-size: 1.15rem;
}
.wa-attach-btn:hover { background: rgba(134,150,160,.12); color: #e9edef; }
.wa-attachment-preview {
  max-width: 180px; padding: 6px 9px; border-radius: 10px;
  background: #182229; color: #d9e2e7; font-size: .75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-message-image { display:block; max-width:280px; max-height:360px; border-radius:8px; margin-bottom:4px; object-fit:cover; }
.wa-message-video { display:block; width:min(320px,100%); max-height:360px; border-radius:8px; margin-bottom:4px; background:#000; }
.wa-message-document { display:flex; align-items:center; gap:8px; min-width:190px; color:#e9edef; text-decoration:none; padding:8px; border-radius:8px; background:rgba(255,255,255,.05); }
.wa-message-document small { margin-left:auto; color:#53bdeb; }
.wa-msg-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.wa-msg-actions button { border:0; background:transparent; color:#8696a0; font-size:.65rem; padding:0; cursor:pointer; }
.wa-msg-actions button:hover { color:#e9edef; text-decoration:underline; }
.wa-deleted { color:#8696a0; font-size:.8rem; }

@media (max-width: 991.98px) {
  .donexa-navbar > .container { flex-wrap:wrap; padding-left:10px; padding-right:10px; }
  .donexa-navbar .navbar-toggler { display:none; }
  .donexa-navbar .donexa-mobile-nav {
    display:flex;
    order:3;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    gap:2px;
    padding:7px 2px 6px;
    border-top:1px solid var(--donexa-border);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .donexa-mobile-nav::-webkit-scrollbar { display:none; }
  .donexa-mobile-nav a {
    flex:0 0 auto;
    min-width:64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:5px 8px;
    color:var(--donexa-muted);
    text-decoration:none;
    border-radius:10px;
    font-size:.68rem;
    line-height:1.05;
  }
  .donexa-mobile-nav a i { font-size:1.2rem; line-height:1; }
  .donexa-mobile-nav a:active,
  .donexa-mobile-nav a:hover { color:#fff; background:rgba(255,255,255,.06); }
  .donexa-mobile-nav a b {
    position:absolute;
    top:1px;
    right:7px;
    background:#ef4444;
    color:#fff;
    border-radius:999px;
    font-size:.55rem;
    padding:2px 5px;
    line-height:1;
  }
  .donexa-navbar #mainNav { display:none !important; }
  .donexa-navbar .navbar-brand { padding-left:4px; }
  .donexa-navbar .d-flex.align-items-center.gap-2 { margin-left:auto; }
}

/* ---------- Collapsible galaxy-style post galleries ---------- */
.donexa-gallery {
  display:grid;
  gap:3px;
  margin-top:.7rem;
  overflow:hidden;
  border-radius:12px;
  background:#080812;
}
.donexa-gallery-item { position:relative; min-width:0; overflow:hidden; background:#090912; }
.donexa-gallery-media {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
}
.donexa-gallery-image { cursor:zoom-in; transition:transform .2s ease, filter .2s ease; }
.donexa-gallery-image:hover { transform:scale(1.015); filter:brightness(1.05); }
.gallery-count-1 { grid-template-columns:1fr; }
/* Single photos keep their natural aspect ratio instead of being cropped. */
.gallery-count-1 .donexa-gallery-item { aspect-ratio:auto; height:auto; max-height:720px; }
.gallery-count-1 .donexa-gallery-media { width:100%; height:auto; max-height:720px; object-fit:contain; background:#080812; }
.gallery-count-2 { grid-template-columns:1fr 1fr; }
.gallery-count-2 .donexa-gallery-item { aspect-ratio:1/1; }
.gallery-count-3 { grid-template-columns:1.35fr .9fr; grid-template-rows:1fr 1fr; }
.gallery-count-3 .donexa-gallery-item:first-child { grid-row:1 / span 2; }
.gallery-count-3 .donexa-gallery-item { min-height:150px; }
.gallery-count-4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.gallery-count-4 .donexa-gallery-item { aspect-ratio:1/1; }
.gallery-count-5 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.gallery-count-5 .donexa-gallery-item:nth-child(-n+2) { aspect-ratio:1.25/1; }
.gallery-count-5 .donexa-gallery-item:nth-child(n+3) { aspect-ratio:1.25/1; }
.donexa-gallery:not(.gallery-expanded) .gallery-extra { display:none; }
.gallery-more-overlay {
  position:absolute;
  inset:0;
  width:100%;
  border:0;
  background:rgba(0,0,0,.48);
  color:#fff;
  font-size:2rem;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(1px);
}
.gallery-more-overlay:hover { background:rgba(0,0,0,.58); }
.donexa-gallery.gallery-expanded .gallery-more-overlay { display:none; }
.gallery-collapse-btn {
  display:block;
  margin:.45rem auto 0;
  border:0;
  background:transparent;
  color:#7dd3fc;
  font-size:.78rem;
}

/* ---------- Profile / cover full-size viewer ---------- */
.donexa-profile-expand-image { cursor:zoom-in !important; }
.donexa-image-viewer { background:#05050d; border:1px solid rgba(255,255,255,.1); }
.donexa-image-viewer .modal-header { min-height:46px; padding:.65rem .8rem; }
#donexaViewerImage {
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#05050d;
  cursor:zoom-out;
}
.image-viewer-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(10,10,26,.72);
  color:#fff;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.image-viewer-nav:hover { background:rgba(124,58,237,.8); }
.image-viewer-prev { left:12px; }
.image-viewer-next { right:12px; }
@media (max-width:575.98px) {
  .donexa-gallery { border-radius:9px; }
  .gallery-count-3 .donexa-gallery-item { min-height:105px; }
  .gallery-more-overlay { font-size:1.55rem; }
  #donexaViewerImage { max-height:72vh; }
  .image-viewer-nav { width:38px; height:38px; }
  .image-viewer-prev { left:7px; }
  .image-viewer-next { right:7px; }
}

.wa-camera-btn { color: #aebac1; }
.wa-camera-btn:hover { color: #e9edef; }
@media (max-width: 520px) {
  .wa-compose { padding: 8px 8px; }
  .wa-compose form { gap: 4px; min-width: 0; }
  .wa-attach-btn, .wa-send-btn { width: 42px; height: 42px; flex: 0 0 42px; }
  .wa-input { min-width: 0; width: 100%; padding: 10px 12px; font-size: 16px; }
}

/* ===== Donexa Messages: definitive mobile composer sizing ===== */
.wa-app, .wa-chat-pane, .wa-chat-window, .wa-compose, .wa-compose form { box-sizing:border-box; min-width:0; max-width:100%; }
.wa-compose { width:100%; overflow:hidden; }
.wa-compose form { width:100%; display:flex; align-items:center; gap:6px; margin:0; }
.wa-compose .wa-attach-btn,
.wa-compose .wa-send-btn { width:42px; height:42px; min-width:42px; flex:0 0 42px; }
.wa-compose .wa-input { flex:1 1 auto; min-width:0; width:auto; max-width:none; box-sizing:border-box; }
.wa-compose #waAttachmentPreview { flex:0 1 180px; min-width:0; }
@media (max-width:520px) {
  .wa-compose { padding:8px 6px; }
  .wa-compose form { gap:2px; }
  .wa-compose .wa-attach-btn,
  .wa-compose .wa-send-btn { width:40px; height:40px; min-width:40px; flex-basis:40px; }
  .wa-compose .wa-input { min-width:0; width:auto; flex:1 1 0; padding:10px 12px; font-size:16px; }
  .wa-compose #waAttachmentPreview { position:absolute; left:8px; right:8px; bottom:58px; z-index:5; max-width:calc(100% - 16px); }
}
@media (max-width:360px) {
  .wa-compose { padding-left:4px; padding-right:4px; }
  .wa-compose form { gap:1px; }
  .wa-compose .wa-attach-btn,
  .wa-compose .wa-send-btn { width:38px; height:38px; min-width:38px; flex-basis:38px; }
  .wa-compose .wa-input { padding-left:10px; padding-right:10px; }
}

/* ============================================================
   E2E encrypted document cards (inside chat message bubbles)
   ============================================================ */
.wa-e2e-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 290px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.wa-e2e-doc-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(83, 189, 235, 0.18);
  color: #53bdeb;
  font-size: 1.1rem;
}
.wa-e2e-doc-info {
  flex: 1 1 auto;
  min-width: 0;
}
.wa-e2e-doc-name {
  color: #e9edef;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-e2e-doc-sub {
  margin-top: 2px;
  color: rgba(233, 237, 239, 0.6);
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-e2e-doc-btn {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 6px 10px;
  border: 1px solid rgba(83, 189, 235, 0.65);
  border-radius: 6px;
  background: transparent;
  color: #53bdeb;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wa-e2e-doc-btn:hover {
  background: rgba(83, 189, 235, 0.14);
  color: #7fd3f4;
}
.wa-e2e-doc-btn:disabled {
  cursor: default;
  opacity: 0.8;
}
@media (max-width: 480px) {
  .wa-e2e-doc { max-width: 100%; }
  .wa-e2e-doc-name,
  .wa-e2e-doc-sub { white-space: normal; word-break: break-word; }
}

/* Spinner shown inside the Download button while an encrypted
   document is being fetched and decrypted. */
.e2e-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(83, 189, 235, 0.25);
  border-top-color: #53bdeb;
  animation: e2e-spin-rotate 0.7s linear infinite;
}
@keyframes e2e-spin-rotate {
  to { transform: rotate(360deg); }
}

/* ---------- Android/mobile navigation & touch layout ---------- */
.donexa-mobile-top-actions { display:none; }
.donexa-mobile-more { background:var(--donexa-card); color:var(--donexa-text); width:min(88vw,380px); }
.donexa-mobile-more .offcanvas-header { border-bottom:1px solid var(--donexa-border); }
.donexa-mobile-more-item { min-height:54px; display:flex; align-items:center; gap:14px; padding:10px 12px; margin:3px 0; border-radius:12px; color:var(--donexa-text); text-decoration:none; font-size:.95rem; }
.donexa-mobile-more-item i:first-child { width:26px; text-align:center; font-size:1.15rem; color:#8dd8ff; }
.donexa-mobile-more-item:hover, .donexa-mobile-more-item:active { background:rgba(255,255,255,.07); color:#fff; }
.donexa-mobile-more-item b, .donexa-mobile-count { background:#ef4444; color:#fff; border-radius:999px; font-size:.58rem; line-height:1; padding:3px 5px; }

@media (max-width: 991.98px) {
  body { padding-bottom:78px; overflow-x:hidden; }
  .donexa-navbar { padding-top:max(2px, env(safe-area-inset-top)); }
  .donexa-navbar > .container { min-width:0; }
  .donexa-navbar .navbar-brand { max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .donexa-mobile-top-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
  .donexa-mobile-top-btn { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:var(--donexa-text); text-decoration:none; border-radius:50%; position:relative; font-size:1.05rem; }
  .donexa-mobile-top-btn:active { background:rgba(255,255,255,.08); }
  .donexa-mobile-top-btn .donexa-mobile-count { position:absolute; top:0; right:-1px; }
  .donexa-mobile-avatar { width:38px; height:38px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:var(--donexa-gradient); color:#fff; font-weight:700; text-decoration:none; border:2px solid rgba(255,255,255,.14); }
  .donexa-mobile-avatar img { width:100%; height:100%; object-fit:cover; }
  .donexa-mobile-nav { position:fixed !important; left:0; right:0; bottom:0; z-index:1045; width:100% !important; height:calc(68px + env(safe-area-inset-bottom)); min-height:68px; box-sizing:border-box; padding:5px 4px calc(5px + env(safe-area-inset-bottom)) !important; border-top:1px solid rgba(255,255,255,.1) !important; background:rgba(10,10,26,.97); backdrop-filter:blur(18px); display:flex !important; overflow-x:hidden; }
  .donexa-mobile-nav a { position:relative; flex:1 1 20%; min-width:0; padding:5px 2px !important; font-size:.66rem !important; gap:3px !important; }
  .donexa-mobile-nav a i { font-size:1.22rem !important; }
  /* Notification badges must stay completely inside each mobile nav item.
     The previous right-offset pushed the badge outside the item and the
     nav's overflow clipping left only a small red sliver visible. */
  .donexa-mobile-nav a { overflow:visible !important; }
  .donexa-mobile-nav a b {
    top:2px !important;
    left:calc(50% + 6px) !important;
    right:auto !important;
    transform:none !important;
    z-index:3;
    white-space:nowrap;
    max-width:calc(100% - 8px);
    box-sizing:border-box;
  }
  .donexa-main { min-height:calc(100vh - 70px); }
  .donexa-main > .container, .donexa-main > .container-fluid { padding-left:10px; padding-right:10px; }
  .donexa-card { border-radius:12px; }
  .btn, button, input, select, textarea { touch-action:manipulation; }
  .form-control, .form-select { font-size:16px !important; }
  .donexa-mobile-more { padding-bottom:env(safe-area-inset-bottom); z-index:1060; }
}

@media (max-width: 575.98px) {
  .donexa-mobile-more { width:88vw; }
  .container, .container-fluid { --bs-gutter-x:1rem; }
  .donexa-main .py-4 { padding-top:1rem !important; padding-bottom:1rem !important; }
  .donexa-main .p-4 { padding:1rem !important; }
  .post-actions { gap:.35rem; justify-content:space-between; }
  .post-action-btn { flex:1 1 0; justify-content:center; min-height:42px; padding:.4rem .25rem; }
  .post-content { font-size:.93rem; }
  .msg-bubble { max-width:86%; }
}


/* Donexa default chat wallpapers + non-jumping thread behavior */
.wa-chat-window { position: relative; }
.wa-messages {
  background-image: url('/assets/images/chat/chat-bg-dark.svg');
  background-repeat: repeat;
  background-size: 420px 420px;
  background-attachment: local;
}
html:not([data-bs-theme="dark"]) .wa-messages,
html[data-bs-theme="light"] .wa-messages {
  background-image: url('/assets/images/chat/chat-bg-light.svg');
  background-color: #f5f8fc;
}
.wa-new-messages-indicator {
  position: absolute;
  right: 18px;
  bottom: 78px;
  z-index: 20;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #00a884;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  cursor: pointer;
}
.wa-new-messages-indicator:hover { filter: brightness(1.06); }
html:not([data-bs-theme="dark"]) .wa-new-messages-indicator,
html[data-bs-theme="light"] .wa-new-messages-indicator {
  background: #0b7cff;
}


/* Channel owner dashboard - additive, scoped styles only. */
.donexa-channel-dashboard .channel-dashboard-stat{border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));}
.donexa-channel-dashboard .channel-dashboard-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(255,255,255,.07);}
.donexa-channel-dashboard .channel-dashboard-table th,.donexa-channel-dashboard .channel-dashboard-table td{border-color:rgba(255,255,255,.06);}
.donexa-channel-dashboard .channel-dashboard-post-cell{max-width:280px;}
.donexa-channel-dashboard .channel-dashboard-action{display:flex;align-items:center;gap:.65rem;width:100%;min-height:52px;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:var(--donexa-text,#fff);text-decoration:none;background:rgba(255,255,255,.025);transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.donexa-channel-dashboard .channel-dashboard-action:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);transform:translateY(-1px);}
.donexa-channel-dashboard .channel-dashboard-action i{font-size:1.05rem;color:#8bb8ff;}
.donexa-channel-dashboard .channel-dashboard-avatar{width:58px;height:58px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:0 0 58px;background:var(--donexa-gradient);color:#fff;font-size:1.35rem;border:2px solid rgba(255,255,255,.12);}
.donexa-channel-dashboard .channel-dashboard-avatar img{width:100%;height:100%;object-fit:cover;}
.donexa-channel-dashboard .channel-dashboard-about{display:grid;gap:.75rem;}
.donexa-channel-dashboard .channel-dashboard-about>div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.65rem;border-bottom:1px solid rgba(255,255,255,.06);}
.donexa-channel-dashboard .channel-dashboard-about>div:last-child{padding-bottom:0;border-bottom:0;}
.donexa-channel-dashboard .channel-dashboard-about span{color:var(--donexa-muted,#9aa0b5);font-size:.85rem;}
.donexa-channel-dashboard .channel-dashboard-about strong{color:#fff;font-size:.85rem;text-align:right;}
@media (max-width:767.98px){
 .donexa-channel-dashboard{padding-left:12px;padding-right:12px;}
 .donexa-channel-dashboard .channel-dashboard-section-head{align-items:flex-start;flex-direction:column;}
 .donexa-channel-dashboard .channel-dashboard-post-cell{max-width:180px;}
 .donexa-channel-dashboard .table{font-size:.82rem;}
}


/* ---------- Channel public-page presentation (scoped patch; original styles preserved) ---------- */
.donexa-channel-page { max-width: 1180px; }
.donexa-channel-page .donexa-channel-cover-card { overflow: visible !important; background: var(--donexa-card); }
.donexa-channel-page .donexa-channel-cover-image {
    display:block;
    width:100%;
    height:clamp(220px, 32vw, 360px);
    object-fit:cover;
    object-position:center;
    background:#090912;
}
.donexa-channel-page .donexa-channel-identity {
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:20px;
    min-height:155px;
    padding:0 24px 20px;
}
.donexa-channel-page .donexa-channel-avatar-wrap { flex:0 0 auto; margin-top:-76px; position:relative; z-index:2; }
.donexa-channel-page .donexa-channel-avatar {
    width:140px !important;
    height:140px !important;
    border:5px solid var(--donexa-card);
    border-radius:50% !important;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--donexa-bg-soft);
    box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.donexa-channel-page .donexa-channel-avatar img { width:100%; height:100%; object-fit:cover; }
.donexa-channel-page .donexa-channel-identity-main { min-width:0; flex:1 1 auto; padding-top:4px; }
.donexa-channel-page .donexa-channel-name { color:#fff; font-size:clamp(1.6rem,3vw,2.25rem); font-weight:750; line-height:1.15; margin:0 0 6px; }
.donexa-channel-page .donexa-channel-meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; color:var(--donexa-muted); font-size:.9rem; margin-bottom:9px; }
.donexa-channel-page .donexa-channel-short-description { color:#d6d6e4; font-size:.94rem; line-height:1.45; max-width:760px; margin:0 0 7px; }
.donexa-channel-page .donexa-channel-managed { color:var(--donexa-muted); font-size:.82rem; }
.donexa-channel-page .donexa-channel-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; }
.donexa-channel-page .donexa-channel-actions .btn { white-space:nowrap; }
.donexa-channel-page .donexa-channel-tabs {
    display:flex;
    align-items:center;
    gap:4px;
    min-height:56px;
    padding:0 20px;
    border-top:1px solid var(--donexa-border);
    background:rgba(255,255,255,.015);
    overflow-x:auto;
}
.donexa-channel-page .donexa-channel-tabs a {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:5px;
    height:56px;
    padding:0 17px;
    color:var(--donexa-muted);
    text-decoration:none;
    font-weight:650;
    font-size:.9rem;
    white-space:nowrap;
}
.donexa-channel-page .donexa-channel-tabs a:hover { color:#fff; background:rgba(255,255,255,.035); }
.donexa-channel-page .donexa-channel-tabs a.active { color:var(--donexa-primary); }
.donexa-channel-page .donexa-channel-tabs a.active::after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; background:var(--donexa-primary); border-radius:3px 3px 0 0; }
.donexa-channel-page .donexa-channel-side-title { color:#fff; font-size:1.05rem; font-weight:750; margin:0 0 12px; }
.donexa-channel-page .donexa-channel-about-text { color:#d9d9e6; line-height:1.55; font-size:.9rem; padding-bottom:14px; border-bottom:1px solid var(--donexa-border); }
.donexa-channel-page .donexa-channel-info-list { display:grid; gap:12px; padding-top:14px; }
.donexa-channel-page .donexa-channel-info-list > div { display:flex; gap:10px; align-items:flex-start; color:var(--donexa-muted); font-size:.86rem; }
.donexa-channel-page .donexa-channel-info-list i { color:#b9b9cc; width:18px; text-align:center; }
.donexa-channel-page .donexa-channel-feed-title { font-weight:750; }
.donexa-channel-page #channel-photos, .donexa-channel-page #channel-videos { scroll-margin-top:90px; }
.donexa-channel-page .post-content { overflow-wrap:anywhere; }

@media (max-width: 991.98px) {
    .donexa-channel-page .donexa-channel-identity { align-items:flex-start; padding-top:0; flex-wrap:wrap; }
    .donexa-channel-page .donexa-channel-avatar-wrap { margin-top:-58px; }
    .donexa-channel-page .donexa-channel-avatar { width:112px !important; height:112px !important; }
    .donexa-channel-page .donexa-channel-actions { width:100%; justify-content:flex-start; padding-left:132px; margin-top:-4px; }
}

@media (max-width: 575.98px) {
    .donexa-channel-page { padding-left:8px; padding-right:8px; }
    .donexa-channel-page .donexa-channel-cover-image { height:190px; }
    .donexa-channel-page .donexa-channel-identity { gap:12px; padding:0 14px 14px; min-height:0; }
    .donexa-channel-page .donexa-channel-avatar-wrap { margin-top:-48px; }
    .donexa-channel-page .donexa-channel-avatar { width:92px !important; height:92px !important; border-width:4px; }
    .donexa-channel-page .donexa-channel-identity-main { padding-top:10px; flex:1 1 calc(100% - 104px); }
    .donexa-channel-page .donexa-channel-name { font-size:1.35rem; }
    .donexa-channel-page .donexa-channel-short-description { font-size:.84rem; }
    .donexa-channel-page .donexa-channel-actions { padding-left:0; width:100%; margin-top:0; }
    .donexa-channel-page .donexa-channel-actions .btn { flex:1 1 auto; }
    .donexa-channel-page .donexa-channel-tabs { padding:0 7px; min-height:50px; }
    .donexa-channel-page .donexa-channel-tabs a { height:50px; padding:0 11px; font-size:.82rem; }
}


/* ============================================================
   Donexa Theme System — Dark / Light / System Default
   Additive theme overrides. Existing dark appearance remains the default.
   ============================================================ */
html[data-bs-theme="light"] {
    color-scheme: light;
    --donexa-bg: #f5f7fb;
    --donexa-bg-soft: #ffffff;
    --donexa-card: #ffffff;
    --donexa-card-hover: #f1f4f9;
    --donexa-border: rgba(15, 23, 42, 0.12);
    --donexa-text: #172033;
    --donexa-muted: #667085;
    --donexa-primary: #6d28d9;
    --donexa-primary-2: #0891b2;
    --donexa-gradient: linear-gradient(135deg, #6d28d9 0%, #0891b2 100%);
}

html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
    background-color: var(--donexa-bg);
    color: var(--donexa-text);
}

html[data-bs-theme="light"] body {
    --bs-body-bg: var(--donexa-bg);
    --bs-body-color: var(--donexa-text);
    --bs-secondary-color: var(--donexa-muted);
    --bs-tertiary-bg: var(--donexa-card);
    --bs-border-color: var(--donexa-border);
}

html[data-bs-theme="light"] .donexa-navbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: var(--donexa-border);
}
html[data-bs-theme="light"] .donexa-navbar .nav-link { color: var(--donexa-muted); }
html[data-bs-theme="light"] .donexa-navbar .nav-link:hover,
html[data-bs-theme="light"] .donexa-navbar .nav-link:focus {
    color: var(--donexa-text);
    background: rgba(15, 23, 42, 0.06);
}
html[data-bs-theme="light"] .donexa-search,
html[data-bs-theme="light"] .donexa-input,
html[data-bs-theme="light"] .form-control.donexa-input {
    background: #fff !important;
    color: var(--donexa-text) !important;
    border-color: var(--donexa-border) !important;
}
html[data-bs-theme="light"] .donexa-search::placeholder,
html[data-bs-theme="light"] .donexa-input::placeholder { color: var(--donexa-muted) !important; }
html[data-bs-theme="light"] .donexa-dropdown {
    background: var(--donexa-card);
    border-color: var(--donexa-border);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
html[data-bs-theme="light"] .donexa-dropdown-item { color: var(--donexa-text); }
html[data-bs-theme="light"] .donexa-dropdown-item:hover { background: rgba(15, 23, 42, 0.05); }
html[data-bs-theme="light"] .donexa-card { box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08); }
html[data-bs-theme="light"] .donexa-card:hover { background: var(--donexa-card-hover); }
html[data-bs-theme="light"] .donexa-page.auth-page {
    background:
        radial-gradient(1000px 500px at 80% -10%, rgba(124, 58, 237, 0.12), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(6, 182, 212, 0.10), transparent 60%),
        var(--donexa-bg);
}
html[data-bs-theme="light"] .donexa-footer { background: #eef2f7; }

/* Bootstrap utility/component compatibility in light mode. */
html[data-bs-theme="light"] .text-white:not(.btn):not(.btn-gradient):not(.badge) { color: var(--donexa-text) !important; }
html[data-bs-theme="light"] .text-light { color: var(--donexa-text) !important; }
html[data-bs-theme="light"] .bg-dark { background-color: var(--donexa-card) !important; color: var(--donexa-text) !important; }
html[data-bs-theme="light"] .border-secondary,
html[data-bs-theme="light"] .border-light { border-color: var(--donexa-border) !important; }
html[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--donexa-text);
    --bs-btn-border-color: rgba(15, 23, 42, 0.22);
    --bs-btn-hover-color: var(--donexa-text);
    --bs-btn-hover-bg: rgba(15, 23, 42, 0.06);
    --bs-btn-hover-border-color: rgba(15, 23, 42, 0.30);
    --bs-btn-active-color: var(--donexa-text);
    --bs-btn-active-bg: rgba(15, 23, 42, 0.09);
    --bs-btn-active-border-color: rgba(15, 23, 42, 0.30);
}
html[data-bs-theme="light"] .btn-close-white { filter: none; }
html[data-bs-theme="light"] .table-dark {
    --bs-table-bg: #eef2f7;
    --bs-table-color: var(--donexa-text);
    --bs-table-border-color: var(--donexa-border);
}
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .offcanvas,
html[data-bs-theme="light"] .dropdown-menu,
html[data-bs-theme="light"] .list-group-item {
    background-color: var(--donexa-card);
    color: var(--donexa-text);
    border-color: var(--donexa-border);
}
html[data-bs-theme="light"] .dropdown-item { color: var(--donexa-text); }
html[data-bs-theme="light"] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:focus { background: rgba(15,23,42,.06); color: var(--donexa-text); }
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .form-control {
    background-color: #fff;
    color: var(--donexa-text);
    border-color: var(--donexa-border);
}
html[data-bs-theme="light"] .form-select:focus,
html[data-bs-theme="light"] .form-control:focus {
    border-color: var(--donexa-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .12);
}

/* Existing components that contain intentionally hard-coded dark colors. */
html[data-bs-theme="light"] .post-menu,
html[data-bs-theme="light"] .post-menu-toast,
html[data-bs-theme="light"] .donexa-mobile-more {
    background: var(--donexa-card);
    color: var(--donexa-text);
    border-color: var(--donexa-border);
}
html[data-bs-theme="light"] .post-menu-item:hover,
html[data-bs-theme="light"] .donexa-mobile-more-item:hover,
html[data-bs-theme="light"] .donexa-mobile-more-item:active { background: rgba(15,23,42,.06); color: var(--donexa-text); }
html[data-bs-theme="light"] .donexa-mobile-nav {
    background: rgba(255,255,255,.97);
    border-top-color: var(--donexa-border) !important;
}
html[data-bs-theme="light"] .donexa-mobile-nav a { color: var(--donexa-muted); }
html[data-bs-theme="light"] .donexa-mobile-nav a:hover { color: var(--donexa-text); background: rgba(15,23,42,.06); }
html[data-bs-theme="light"] .donexa-mobile-top-btn { color: var(--donexa-text); }
html[data-bs-theme="light"] .donexa-image-viewer { background: #fff; border-color: var(--donexa-border); }
html[data-bs-theme="light"] .donexa-gallery-item { background: #eef2f7; }
html[data-bs-theme="light"] .donexa-channel-page .donexa-channel-name,
html[data-bs-theme="light"] .donexa-channel-page .donexa-channel-side-title { color: var(--donexa-text); }
html[data-bs-theme="light"] .donexa-channel-page .donexa-channel-short-description { color: #475467; }
html[data-bs-theme="light"] .donexa-channel-page .donexa-channel-tabs a:hover { color: var(--donexa-text); background: rgba(15,23,42,.05); }

/* Chat: preserve the existing WhatsApp-like layout while making its surfaces readable. */
html[data-bs-theme="light"] .wa-sidebar,
html[data-bs-theme="light"] .wa-chat-header,
html[data-bs-theme="light"] .wa-compose,
html[data-bs-theme="light"] .wa-no-chat { background: #fff; color: var(--donexa-text); }
html[data-bs-theme="light"] .wa-chat-item:hover,
html[data-bs-theme="light"] .wa-search-result:hover { background: #f1f4f9; }
html[data-bs-theme="light"] .wa-chat-item.active { background: #e8eef7; }
html[data-bs-theme="light"] .wa-chat-name,
html[data-bs-theme="light"] .wa-peer-name { color: var(--donexa-text); }
html[data-bs-theme="light"] .wa-chat-time,
html[data-bs-theme="light"] .wa-chat-preview,
html[data-bs-theme="light"] .wa-empty,
html[data-bs-theme="light"] .wa-peer-status,
html[data-bs-theme="light"] .wa-msg-actions button,
html[data-bs-theme="light"] .wa-deleted { color: #667085; }
html[data-bs-theme="light"] .wa-bubble { background: #f1f4f9; color: var(--donexa-text); }
html[data-bs-theme="light"] .wa-msg-row.mine .wa-bubble { background: #d9f7ed; color: #17352c; }
html[data-bs-theme="light"] .wa-msg-day span { background: #e9eef5; color: #475467; }
html[data-bs-theme="light"] .wa-input { background: #f8fafc; color: var(--donexa-text); border-color: var(--donexa-border); }
html[data-bs-theme="light"] .wa-input::placeholder { color: #667085; }
html[data-bs-theme="light"] .wa-message-document { color: var(--donexa-text); background: rgba(15,23,42,.05); }
html[data-bs-theme="light"] .wa-message-video { background: #e5e7eb; }

@media (prefers-reduced-motion: reduce) {
    html[data-bs-theme] * { scroll-behavior: auto !important; }
}

/* Founding Africa badge explanation modal */
.donexa-founder-badge {
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
}
.donexa-founder-badge:focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
}
.donexa-founder-modal[hidden] { display: none !important; }
.donexa-founder-modal {
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.donexa-founder-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 18, .78);
    backdrop-filter: blur(4px);
}
.donexa-founder-modal-dialog {
    position: relative;
    width: min(100%, 520px);
    max-height: min(90vh, 680px);
    overflow-y: auto;
    padding: 32px 28px 26px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: var(--donexa-card-bg, #151528);
    color: var(--donexa-text, #fff);
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
    text-align: center;
}
.donexa-founder-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,193,7,.22), rgba(34,211,238,.16));
    font-size: 2.1rem;
}
.donexa-founder-modal-kicker {
    color: #fbbf24;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 6px;
}
.donexa-founder-modal-dialog h3 { margin: 0 0 14px; font-weight: 800; }
.donexa-founder-modal-dialog p {
    color: var(--donexa-muted, #aab0c5);
    line-height: 1.65;
    margin-bottom: 12px;
}
.donexa-founder-modal-note {
    margin: 18px 0 22px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,193,7,.08);
    border: 1px solid rgba(255,193,7,.2);
    color: var(--donexa-text, #fff);
    font-size: .9rem;
}
.donexa-founder-modal-note i { color: #22d3ee; margin-right: 6px; }
.donexa-founder-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--donexa-text, #fff);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.donexa-founder-modal-close:hover { background: rgba(255,255,255,.15); }
.donexa-modal-open { overflow: hidden; }
@media (max-width: 576px) {
    .donexa-founder-modal { padding: 12px; }
    .donexa-founder-modal-dialog { padding: 28px 20px 22px; border-radius: 20px; }
}


/* ============================================================
   DONEXA CHAT THEME — modern typography + branded wallpaper
   Scoped to messaging surfaces; existing layout/behavior preserved.
   ============================================================ */
:root {
  --donexa-chat-font: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
  font-family: var(--donexa-chat-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wa-app,
.wa-app input,
.wa-app button,
.wa-app textarea {
  font-family: var(--donexa-chat-font);
}

.wa-messages {
  background-image: url('/assets/images/chat/donexa-wallpaper-desktop.jpg') !important;
  background-repeat: repeat !important;
  background-size: 612px 512px !important;
  background-position: center top;
  background-color: #06182b;
}

.wa-bubble {
  font-size: 0.94rem;
  line-height: 1.48;
  letter-spacing: 0.005em;
}

.wa-msg-sender {
  font-size: 0.76rem;
}

.wa-msg-meta {
  font-size: 0.68rem;
}

.wa-chat-name {
  font-size: 0.94rem;
}

.wa-chat-preview {
  font-size: 0.82rem;
}

.wa-peer-name {
  font-size: 1rem;
}

.wa-input {
  font-size: 0.95rem;
}

@media (max-width: 767.98px) {
  .wa-messages {
    background-image: url('/assets/images/chat/donexa-wallpaper-mobile.jpg') !important;
    background-size: 288px 512px !important;
    background-position: center top;
  }

  .wa-bubble {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .wa-input {
    font-size: 16px !important;
  }
}


/* ============================================================
   DONEXA CLASSROOM V1
   Scoped learning UI; does not alter legacy channel styling.
   ============================================================ */
.classroom-page { max-width: 1180px; }
.classroom-hero, .classroom-cover { position: relative; overflow: hidden; }
.classroom-cover-glow { position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(34,211,238,.16), transparent 35%), radial-gradient(circle at 15% 80%, rgba(99,102,241,.14), transparent 35%); pointer-events:none; }
.classroom-kicker { font-size:.72rem; letter-spacing:.14em; font-weight:800; color:#22d3ee; margin-bottom:.45rem; }
.classroom-card { position:relative; transition:transform .18s ease, border-color .18s ease; }
.classroom-card:hover { transform:translateY(-3px); border-color:rgba(34,211,238,.35); }
.classroom-icon { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(99,102,241,.18));color:#67e8f9;font-size:1.25rem; }
.classroom-card-arrow { position:absolute;right:18px;top:18px;color:#7dd3fc; }
.classroom-step { display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--donexa-border,rgba(255,255,255,.08)); }
.classroom-step:last-child { border-bottom:0; }
.classroom-step>b { width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:#67e8f9;font-size:.78rem; }
.classroom-step span { display:flex;flex-direction:column;gap:2px; }
.classroom-step strong { color:#fff; }
.classroom-step small { color:var(--donexa-muted,#aab0c5); }
.classroom-weight-note { padding:12px 14px;border-radius:12px;background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.14);color:#aab0c5;font-size:.86rem; }
.classroom-weight-note i { color:#22d3ee;margin-right:6px; }
.classroom-stat { padding:18px; min-height:126px; }
.classroom-stat span { display:block;color:#aab0c5;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em; }
.classroom-stat strong { display:block;color:#fff;font-size:1.65rem;margin:4px 0; }
.classroom-stat small { color:#8f97ad; }
.classroom-stat .progress, .classroom-learner-row .progress { height:6px;background:rgba(255,255,255,.08); }
.classroom-lesson, .classroom-task { display:flex;gap:14px;padding:17px 0;border-top:1px solid var(--donexa-border,rgba(255,255,255,.08)); }
.classroom-lesson-number { width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.16);color:#a5b4fc;font-weight:800;flex-shrink:0; }
.classroom-lesson-content { padding:14px;border-radius:12px;background:rgba(255,255,255,.035);color:#d6d9e4;line-height:1.7; }
.classroom-task-icon { width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.14);color:#60a5fa;flex-shrink:0; }
.classroom-task-icon.classwork { background:rgba(34,211,238,.12);color:#67e8f9; }
.classroom-result-line { display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);color:#aab0c5;font-size:.85rem; }
.classroom-result-line strong { color:#fff; }
.classroom-feedback { margin-top:8px;padding:10px 12px;border-left:3px solid #22d3ee;background:rgba(34,211,238,.05);color:#b8bfd0;font-size:.85rem; }
.progress-ring-value { font-size:2.6rem;font-weight:900;color:#fff;line-height:1.1;margin:12px 0; }
.classroom-progress-row { display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--donexa-border,rgba(255,255,255,.07));color:#aab0c5;font-size:.88rem; }
.classroom-progress-row:last-child { border-bottom:0; }
.classroom-progress-row strong { color:#fff; }
.classroom-learner-row { display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--donexa-border,rgba(255,255,255,.07)); }
.classroom-mini-avatar { width:32px;height:32px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-size:.75rem;font-weight:700;flex-shrink:0; }
.classroom-mini-avatar img { width:100%;height:100%;object-fit:cover; }
.classroom-page details summary { cursor:pointer;list-style:none; }
.classroom-page details summary::-webkit-details-marker { display:none; }
@media (max-width:767.98px) {
  .classroom-stat { min-height:110px;padding:14px; }
  .classroom-stat strong { font-size:1.35rem; }
  .classroom-page .classroom-cover h1 { font-size:1.55rem; }
  .classroom-task, .classroom-lesson { gap:10px; }
  .classroom-result-line { flex-direction:column;align-items:flex-start; }
}

.classroom-submission { padding:16px 0; border-top:1px solid var(--donexa-border,rgba(255,255,255,.08)); }
.classroom-submission-answer { padding:12px; border-radius:10px; background:rgba(255,255,255,.035); color:#d6d9e4; line-height:1.6; max-height:220px; overflow:auto; }


/* ============================================================
   DONEXA CLASSROOM V2 DIRECTORY
   Classification/discovery UI; scoped to Classroom only.
   ============================================================ */
.classroom-directory-filter { border:1px solid rgba(103,232,249,.10); }
.classroom-directory-icon { width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.055); font-size:1.55rem; }
.classroom-country-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.055); color:#cbd5e1; font-size:.72rem; }
.classroom-classification { display:flex; flex-wrap:wrap; gap:7px; }
.classroom-classification span { display:inline-flex; align-items:center; padding:5px 9px; border-radius:999px; background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.12); color:#a5f3fc; font-size:.74rem; }
.classroom-directory-flow { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:18px 0; }
.classroom-directory-flow span { padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.045); color:#dbeafe; font-size:.78rem; }
.classroom-directory-flow i { color:#67e8f9; font-size:.72rem; }
.classroom-page select.donexa-input option { background:#101827; color:#fff; }
@media (max-width:767.98px) {
  .classroom-directory-flow { display:grid; grid-template-columns:1fr auto 1fr; }
  .classroom-directory-flow span { text-align:center; }
}

/* Donexa Classroom V3 — school management portal */
.classroom-school-portal .classroom-school-hero{background:linear-gradient(135deg,rgba(20,31,60,.98),rgba(12,18,38,.98));border:1px solid rgba(255,255,255,.08)}
.classroom-portal-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:2px}.classroom-portal-tabs a{white-space:nowrap;color:#b9c4d8;text-decoration:none;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.045)}.classroom-portal-tabs a:hover{color:#fff;background:rgba(255,255,255,.09)}
.classroom-school-item,.classroom-task-row,.classroom-note{padding:14px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}
.classroom-task-row{display:flex;justify-content:space-between;gap:16px;align-items:center}.school-finance-box{padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:5px}.school-finance-box span{color:#8e9ab0;font-size:.85rem}.school-finance-box strong{font-size:1.3rem;color:#fff}.classroom-school-portal .table{--bs-table-bg:transparent}.classroom-school-portal iframe{border:0;border-radius:12px}.classroom-school-portal section{scroll-margin-top:90px}
@media(max-width:767px){.classroom-task-row{align-items:flex-start;flex-direction:column}.classroom-portal-tabs a{font-size:.82rem;padding:7px 9px}.classroom-school-portal .display-6{font-size:2rem}}


/* ============================================================
   DONEXA SOCIAL UI V3
   Premium social-feed presentation layer.
   Scoped to the feed/home experience; application logic unchanged.
   ============================================================ */
.donexa-home-shell{max-width:1180px!important}
.donexa-feed-column{max-width:690px}
.donexa-home-shell>.row{align-items:flex-start}

/* Composer */
.donexa-composer-card{
  position:relative;
  background:linear-gradient(180deg,rgba(20,21,44,.96),rgba(13,14,31,.96));
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:14px 16px 10px;
  margin-bottom:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
.donexa-composer-row{align-items:center}
.donexa-composer-input{
  color:var(--donexa-text)!important;
  resize:none;
  min-height:44px;
  padding:5px 0!important;
  font-size:1rem;
  line-height:1.45;
}
.donexa-composer-input::placeholder{color:#8587a3;opacity:1}
.donexa-composer-input:focus{box-shadow:none!important}
.donexa-composer-toolbar{border-top:1px solid rgba(255,255,255,.06)}
.donexa-compose-tools{align-items:center}
.donexa-compose-tool{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 9px;border:0;border-radius:10px;
  background:transparent;color:#9ea2bd;cursor:pointer;
  font-size:.8rem;font-weight:600;transition:.18s ease;
}
.donexa-compose-tool:hover{background:rgba(255,255,255,.055);color:#fff}
.donexa-compose-tool i{font-size:1rem}
.donexa-publish-btn{border-radius:999px!important;min-width:74px;font-weight:700;box-shadow:0 5px 16px rgba(124,58,237,.18)}

/* Stories: clean Instagram-like rail */
.donexa-stories-wrap{
  margin:0 0 5px!important;
  padding:10px 2px 12px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  border-radius:0!important;
}
.donexa-stories-wrap .stories-bar{gap:17px!important;padding:0 2px!important}
.donexa-story-create,.donexa-stories-wrap .story-user-group{width:68px!important;flex:0 0 68px!important}
.donexa-story-create .story-ring-inner,.donexa-stories-wrap .story-ring{width:64px!important;height:64px!important}
.donexa-story-create .story-ring-inner{
  border:1px solid rgba(255,255,255,.15)!important;
  background:linear-gradient(145deg,#17182e,#0d0e20)!important;
  color:#aeb2ca!important;
  font-size:1.35rem!important;
}
.donexa-stories-wrap .story-ring{padding:2px!important;background:linear-gradient(135deg,#7c3aed,#06b6d4)!important}
.donexa-stories-wrap .story-ring-inner{border:2px solid #0b0c1b!important}
.donexa-story-name,.donexa-story-create span{font-size:.68rem!important;color:#a5a7bd!important}

/* Posts: timeline rather than cards */
.donexa-modern-post{
  position:relative;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  border-radius:0!important;
  margin:0!important;
  padding:17px 2px 18px!important;
  box-shadow:none!important;
}
.donexa-modern-post:hover{background:rgba(255,255,255,.012)!important}
.donexa-post-head{margin-bottom:7px!important;padding-right:38px}
.donexa-post-head strong{font-size:.96rem;letter-spacing:-.01em}
.donexa-post-head .text-muted{font-size:.72rem!important;color:#8588a3!important;margin-top:1px}
.donexa-post-body{padding:0!important}
.donexa-post-body .post-content{font-size:.98rem;line-height:1.55;color:#f0f1f7;margin-bottom:9px}
.donexa-sponsored{display:inline-flex;align-items:center;gap:3px;color:#67e8f9;font-size:.7rem}
.donexa-gallery{margin:9px 0 0!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.055);background:#060711}
.donexa-gallery-media{display:block;width:100%;max-height:620px;object-fit:contain;background:#070810}
.donexa-gallery-image{cursor:pointer}
.donexa-post-actions{
  display:grid!important;
  grid-template-columns:repeat(4,1fr);
  gap:2px!important;
  margin-top:8px!important;
  padding:2px 0 0!important;
}
.donexa-post-actions .post-action-btn{
  min-height:38px!important;
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:0!important;border-radius:10px!important;
  background:transparent!important;
  color:#8589a4!important;
  font-size:.77rem!important;
}
.donexa-post-actions .post-action-btn:hover{background:rgba(255,255,255,.045)!important;color:#fff!important}
.donexa-post-actions .post-action-btn i{font-size:1rem}
.donexa-post-actions .post-action-btn.liked{color:#ff5d7d!important}
.donexa-post-actions .post-action-btn.bookmarked{color:#67e8f9!important}
.donexa-post-actions .post-action-btn.liked:hover{background:rgba(255,93,125,.07)!important}

/* Remove the desktop/sidebar feeling on the home timeline */
@media (min-width:992px){
  .donexa-feed-column{max-width:700px}
  .donexa-home-shell .col-lg-4{padding-left:28px}
}

/* Mobile: app-like full-width timeline */
@media (max-width:991.98px){
  body{padding-bottom:82px!important}
  .donexa-navbar{
    position:sticky!important;top:0!important;z-index:1035!important;
    background:rgba(8,9,20,.92)!important;
    border-bottom:1px solid rgba(255,255,255,.065)!important;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
  }
  .donexa-navbar>.container{min-height:58px!important;padding:0 13px!important;flex-wrap:nowrap!important}
  .donexa-navbar .navbar-brand{font-size:1.04rem!important;letter-spacing:.02em}
  .donexa-navbar .navbar-brand i{display:inline-block!important;font-size:.75rem;margin-right:4px}
  .donexa-mobile-top-actions{gap:2px!important}
  .donexa-mobile-top-btn{width:38px!important;height:38px!important}
  .donexa-mobile-avatar{width:34px!important;height:34px!important}

  /* bottom navigation */
  .donexa-mobile-nav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    z-index:1200!important;width:100%!important;height:66px!important;
    min-height:66px!important;padding:5px 7px calc(5px + env(safe-area-inset-bottom))!important;
    display:flex!important;align-items:center!important;justify-content:space-around!important;
    background:rgba(9,10,22,.96)!important;
    border-top:1px solid rgba(255,255,255,.09)!important;
    box-shadow:0 -12px 32px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;
    overflow:visible!important;
  }
  .donexa-mobile-nav>a:not(.donexa-mobile-create-fab){
    position:relative!important;flex:1 1 20%!important;max-width:78px!important;
    min-width:0!important;height:54px!important;padding:4px 3px!important;
    color:#777b98!important;background:transparent!important;border-radius:13px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    text-decoration:none!important;font-size:.61rem!important;line-height:1!important;
  }
  .donexa-mobile-nav>a:not(.donexa-mobile-create-fab) i{font-size:1.18rem!important}
  .donexa-mobile-nav>a:not(.donexa-mobile-create-fab):active,.donexa-mobile-nav>a:not(.donexa-mobile-create-fab):hover{color:#fff!important;background:rgba(255,255,255,.04)!important}
  .donexa-mobile-nav>a.is-active{color:#fff!important}
  .donexa-mobile-nav>a.is-active i{color:#a78bfa!important}
  .donexa-mobile-create-fab{
    position:absolute!important;left:50%!important;top:-21px!important;transform:translateX(-50%)!important;
    width:52px!important;height:52px!important;flex:0 0 52px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:50%!important;color:#fff!important;text-decoration:none!important;
    background:linear-gradient(135deg,#8b5cf6,#06b6d4)!important;
    border:4px solid #090a16!important;
    box-shadow:0 7px 22px rgba(6,182,212,.22),0 8px 26px rgba(124,58,237,.3)!important;
    z-index:5!important;
  }
  .donexa-mobile-create-fab i{font-size:1.35rem!important}
  .donexa-mobile-nav>a[href="/suggestions"]{margin-right:27px!important}
  .donexa-mobile-nav>a[href="/messages"]{margin-left:27px!important}
  .donexa-mobile-nav>a b{top:3px!important;left:calc(50% + 6px)!important;right:auto!important}

  .donexa-main{min-height:calc(100vh - 60px)!important}
  .donexa-home-shell{padding:0!important;margin:0!important;max-width:none!important}
  .donexa-home-shell>.row{margin:0!important}
  .donexa-feed-column{padding:0!important;max-width:none!important;width:100%!important}
  .donexa-feed-column>.donexa-composer-card{margin:8px 9px 0!important}
  .donexa-composer-card{border-radius:17px!important;padding:11px 12px 8px!important}
  .donexa-composer-row{gap:10px!important}
  .donexa-composer-row .avatar-sm{width:40px!important;height:40px!important}
  .donexa-composer-input{font-size:.94rem!important;min-height:42px!important}
  .donexa-compose-tool{padding:7px 8px!important;font-size:.74rem!important}
  .donexa-publish-btn{min-width:66px!important}

  .donexa-stories-wrap{padding:10px 10px 11px!important;margin-top:7px!important}
  .donexa-stories-wrap .stories-bar{gap:15px!important;padding:0!important}
  .donexa-story-create,.donexa-stories-wrap .story-user-group{width:62px!important;flex-basis:62px!important}
  .donexa-story-create .story-ring-inner,.donexa-stories-wrap .story-ring{width:58px!important;height:58px!important}

  #feedContainer{width:100%}
  .donexa-modern-post{padding:15px 12px 16px!important}
  .donexa-post-head{padding-right:40px!important}
  .donexa-post-body .post-content{font-size:.96rem!important}
  .donexa-gallery{border-radius:14px!important;margin-left:0!important;margin-right:0!important}
  .donexa-gallery-media{max-height:560px}
  .donexa-post-actions{margin-left:-3px!important;margin-right:-3px!important}
  .donexa-post-actions .post-action-btn{min-height:36px!important;font-size:.72rem!important}

  #feedInfiniteLoader{padding-bottom:24px!important}
}

@media (max-width:420px){
  .donexa-compose-tool span{display:none}
  .donexa-compose-tool{width:34px;height:34px;justify-content:center;padding:0!important}
  .donexa-publish-btn{min-width:58px!important;padding-left:12px!important;padding-right:12px!important}
  .donexa-modern-post{padding-left:10px!important;padding-right:10px!important}
  .donexa-post-actions .post-action-btn span{font-size:.68rem}
}

/* ============================================================
   DONEXA TALENT — FINAL VISUAL OVERRIDE
   Uses the existing .talent-card markup directly.
   Existing master CSS is preserved; this block is additive.
   ============================================================ */

.talent-grid,
.talents-grid,
.talent-areas-grid,
.talent-cards-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.talent-card {
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  min-height:300px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:#080918!important;
  box-shadow:0 12px 30px rgba(0,0,0,.30)!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}

/* Artwork layer */
.talent-card::before {
  content:""!important;
  position:absolute!important;
  inset:0 0 70px 0!important;
  z-index:0!important;
  display:block!important;
  background-image:url("../images/talent/talent-card-sprite.png")!important;
  background-repeat:no-repeat!important;
  background-size:500% 300%!important;
  background-color:#11132c!important;
  transition:transform .3s ease,filter .3s ease!important;
}

/* Dark readable text zone */
.talent-card::after {
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:47%!important;
  z-index:1!important;
  display:block!important;
  background:linear-gradient(
    to top,
    #080918 7%,
    rgba(8,9,24,.97) 38%,
    rgba(8,9,24,.70) 67%,
    rgba(8,9,24,0) 100%
  )!important;
  pointer-events:none!important;
}

/* 15 artwork panels in the generated 5 × 3 sprite */
.talent-card:nth-child(1)::before  { background-position:0% 0%!important; }
.talent-card:nth-child(2)::before  { background-position:25% 0%!important; }
.talent-card:nth-child(3)::before  { background-position:50% 0%!important; }
.talent-card:nth-child(4)::before  { background-position:75% 0%!important; }
.talent-card:nth-child(5)::before  { background-position:100% 0%!important; }
.talent-card:nth-child(6)::before  { background-position:0% 50%!important; }
.talent-card:nth-child(7)::before  { background-position:25% 50%!important; }
.talent-card:nth-child(8)::before  { background-position:50% 50%!important; }
.talent-card:nth-child(9)::before  { background-position:75% 50%!important; }
.talent-card:nth-child(10)::before { background-position:100% 50%!important; }
.talent-card:nth-child(11)::before { background-position:0% 100%!important; }
.talent-card:nth-child(12)::before { background-position:25% 100%!important; }
.talent-card:nth-child(13)::before { background-position:50% 100%!important; }
.talent-card:nth-child(14)::before { background-position:75% 100%!important; }
.talent-card:nth-child(15)::before { background-position:100% 100%!important; }

.talent-card > * {
  position:relative!important;
  z-index:3!important;
}

.talent-card .talent-sticker,
.talent-card .talent-icon,
.talent-card .talent-card-icon {
  display:none!important;
}

.talent-card h3,
.talent-card h4,
.talent-card .talent-title {
  margin:0 44px 4px 0!important;
  padding:0 16px!important;
  color:#fff!important;
  font-size:1.04rem!important;
  font-weight:900!important;
  line-height:1.15!important;
  text-shadow:0 2px 12px rgba(0,0,0,.8)!important;
}

.talent-card p,
.talent-card .talent-description {
  margin:0 44px 16px 0!important;
  padding:0 16px!important;
  color:#c4c7e5!important;
  font-size:.76rem!important;
  line-height:1.38!important;
}

.talent-card .talent-arrow,
.talent-card .talent-select {
  z-index:5!important;
  right:13px!important;
  bottom:13px!important;
  width:36px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  color:#fff!important;
  background:linear-gradient(135deg,#ec4899,#8b5cf6,#06b6d4)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 8px 20px rgba(139,92,246,.30)!important;
}

.talent-card:hover {
  transform:translateY(-6px) scale(1.012)!important;
  border-color:rgba(255,255,255,.38)!important;
  box-shadow:0 20px 46px rgba(0,0,0,.45),0 0 28px rgba(139,92,246,.18)!important;
}

.talent-card:hover::before {
  transform:scale(1.045)!important;
  filter:saturate(1.18) brightness(1.08)!important;
}

/* Keep the selected state obvious without returning to the old plain card. */
.talent-card.is-selected,
.talent-card.selected {
  border-color:#c084fc!important;
  box-shadow:0 0 0 2px rgba(192,132,252,.35),0 20px 48px rgba(139,92,246,.30)!important;
}

.talent-card .talent-status,
.talent-card .status-badge {
  z-index:6!important;
  top:11px!important;
  right:11px!important;
  background:rgba(7,8,20,.72)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;
  backdrop-filter:blur(8px)!important;
}

/* Mobile: retain the 2-column layout, but make the visual artwork dominate. */
@media (max-width:767.98px) {
  .talent-grid,
  .talents-grid,
  .talent-areas-grid,
  .talent-cards-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .talent-card {
    min-height:255px!important;
    border-radius:17px!important;
  }

  .talent-card::before {
    inset:0 0 62px 0!important;
  }

  .talent-card::after {
    height:45%!important;
  }

  .talent-card h3,
  .talent-card h4,
  .talent-card .talent-title {
    padding:0 11px!important;
    margin-right:32px!important;
    font-size:.86rem!important;
  }

  .talent-card p,
  .talent-card .talent-description {
    padding:0 11px!important;
    margin-right:29px!important;
    margin-bottom:11px!important;
    font-size:.67rem!important;
    line-height:1.34!important;
  }

  .talent-card .talent-arrow,
  .talent-card .talent-select {
    width:30px!important;
    height:30px!important;
    right:9px!important;
    bottom:9px!important;
  }
}

@media (max-width:380px) {
  .talent-card {
    min-height:230px!important;
  }

  .talent-card h3,
  .talent-card h4,
  .talent-card .talent-title {
    font-size:.79rem!important;
  }

  .talent-card p,
  .talent-card .talent-description {
    font-size:.61rem!important;
  }
}


/* FINAL TALENT CARD MARKUP OVERRIDE — actual class used by views/talent/index.php */
.talent-category-card{position:relative!important;overflow:hidden!important;isolation:isolate!important;min-height:300px!important;padding:0!important;border-radius:22px!important;background:#090a19!important}
.talent-category-card::before{content:""!important;position:absolute!important;inset:0 0 72px 0!important;z-index:0!important;background:url("/assets/images/talent/talent-card-sprite.png?v=20261002-2") no-repeat 0 0!important;background-size:500% 300%!important;display:block!important}
.talent-category-card::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:48%!important;z-index:1!important;background:linear-gradient(to top,#080918 4%,rgba(8,9,24,.97) 35%,rgba(8,9,24,.64) 68%,transparent)!important}
.talent-category-card:nth-child(1)::before{background-position:0% 0%!important}
.talent-category-card:nth-child(2)::before{background-position:25% 0%!important}
.talent-category-card:nth-child(3)::before{background-position:50% 0%!important}
.talent-category-card:nth-child(4)::before{background-position:75% 0%!important}
.talent-category-card:nth-child(5)::before{background-position:100% 0%!important}
.talent-category-card:nth-child(6)::before{background-position:0% 50%!important}
.talent-category-card:nth-child(7)::before{background-position:25% 50%!important}
.talent-category-card:nth-child(8)::before{background-position:50% 50%!important}
.talent-category-card:nth-child(9)::before{background-position:75% 50%!important}
.talent-category-card:nth-child(10)::before{background-position:100% 50%!important}
.talent-category-card:nth-child(11)::before{background-position:0% 100%!important}
.talent-category-card:nth-child(12)::before{background-position:25% 100%!important}
.talent-category-card:nth-child(13)::before{background-position:50% 100%!important}
.talent-category-card:nth-child(14)::before{background-position:75% 100%!important}
.talent-category-card:nth-child(15)::before{background-position:100% 100%!important}
@media(max-width:767.98px){.talent-category-card{min-height:245px!important;border-radius:18px!important}.talent-category-card::before{inset:0 0 62px 0!important}}

/* ============================================================
   Feed v3 — modern three-column home timeline (Oct 2026)
   Scoped to .dx-feed-page / .dx-post. Uses theme variables only,
   so light and dark themes both work.
   ============================================================ */
.dx-feed-page {
  --dx-like: #f43f5e;
  --dx-reply: var(--donexa-primary-2);
  --dx-share: #22c55e;
  --dx-save: var(--donexa-primary);
  --dx-radius: 18px;
  --dx-gap: 12px;
  --dx-top: calc(var(--dx-nav-h, 64px) + 16px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}
.dx-feed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  justify-content: center;
  align-items: start;
}
.dx-feed-main { min-width: 0; max-width: 620px; width: 100%; margin: 0 auto; }
.dx-rail { display: none; }
@media (min-width: 992px) {
  .dx-feed-grid { grid-template-columns: minmax(0, 620px) 320px; }
  .dx-rail-right { display: block; }
}
@media (min-width: 1200px) {
  .dx-feed-grid { grid-template-columns: 232px minmax(0, 620px) 320px; }
  .dx-rail-left { display: block; }
}
.dx-rail {
  position: sticky;
  top: var(--dx-top);
  max-height: calc(100vh - var(--dx-top) - 16px);
  overflow-y: auto;
  scrollbar-width: none;
}
.dx-rail::-webkit-scrollbar { display: none; }

/* Avatars */
.dx-avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--donexa-gradient);
  color: #fff; font-weight: 700; font-size: 1rem;
  text-decoration: none;
}
.dx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dx-avatar-lg { width: 48px; height: 48px; flex-basis: 48px; }

/* Left rail */
.dx-me {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; margin-bottom: 8px;
  border-radius: 14px;
  color: var(--donexa-text); text-decoration: none;
}
.dx-me:hover { background: var(--donexa-card); color: var(--donexa-text); }
.dx-me-text { min-width: 0; display: flex; flex-direction: column; }
.dx-me-text strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-me-text small { color: var(--donexa-muted); font-size: .8rem; }
.dx-shortcuts { display: flex; flex-direction: column; gap: 2px; }
.dx-shortcuts a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--donexa-text); text-decoration: none;
  font-size: .95rem; font-weight: 500;
}
.dx-shortcuts a i { font-size: 1.15rem; width: 22px; text-align: center; color: var(--donexa-muted); }
.dx-shortcuts a:hover { background: var(--donexa-card); }
.dx-shortcuts a.is-active { font-weight: 700; }
.dx-shortcuts a.is-active i { color: var(--donexa-primary-2); }

/* Right rail */
.dx-panel {
  background: var(--donexa-card);
  border: 1px solid var(--donexa-border);
  border-radius: var(--dx-radius);
  padding: 16px 16px 8px;
  margin-bottom: 16px;
}
.dx-panel-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; color: var(--donexa-text); }
.dx-panel-muted { color: var(--donexa-muted); font-size: .88rem; margin: 0 0 8px; }
.dx-panel-more {
  display: block; margin: 4px -16px 0; padding: 12px 16px;
  border-top: 1px solid var(--donexa-border);
  color: var(--donexa-primary-2); font-size: .88rem; text-decoration: none;
  border-radius: 0 0 var(--dx-radius) var(--dx-radius);
}
.dx-panel-more:hover { background: var(--donexa-card-hover); color: var(--donexa-primary-2); }
.dx-suggestion { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dx-suggestion-avatar .rounded-circle,
.dx-suggestion-avatar .post-avatar-placeholder { width: 40px !important; height: 40px !important; font-size: .9rem; }
.dx-suggestion-who { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--donexa-text); }
.dx-suggestion-who strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-suggestion-who small { color: var(--donexa-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-suggestion .follow-user-btn { border-radius: 999px; padding: 4px 14px; font-weight: 600; }
.dx-trending { list-style: none; margin: 0 -16px; padding: 0; }
.dx-trending a {
  display: flex; flex-direction: column;
  padding: 9px 16px;
  color: var(--donexa-text); text-decoration: none;
}
.dx-trending a:hover { background: var(--donexa-card-hover); }
.dx-trending strong { font-size: .95rem; }
.dx-trending small { color: var(--donexa-muted); font-size: .8rem; }
.dx-rail-footer { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 6px; font-size: .78rem; color: var(--donexa-muted); }
.dx-rail-footer a { color: var(--donexa-muted); text-decoration: none; }
.dx-rail-footer a:hover { text-decoration: underline; }

/* Composer */
.dx-composer {
  background: var(--donexa-card);
  border: 1px solid var(--donexa-border);
  border-radius: var(--dx-radius);
  padding: 14px 16px 10px;
  margin-bottom: var(--dx-gap);
}
.dx-composer-row { display: flex; gap: 12px; align-items: flex-start; }
.dx-composer-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; resize: none;
  background: transparent;
  color: var(--donexa-text);
  font-size: 1.08rem; line-height: 1.45;
  padding: 9px 0; min-height: 44px; max-height: 320px;
}
.dx-composer-input::placeholder { color: var(--donexa-muted); }
.dx-composer-preview { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 56px; }
.dx-composer-preview:not(:empty) { margin-top: 10px; }
.dx-composer-preview img, .dx-composer-preview video { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--donexa-border); }
.dx-composer-alert { color: var(--donexa-danger); font-size: .88rem; margin-top: 8px; padding-left: 56px; }
.dx-poll-builder { margin: 12px 0 0 56px; padding: 12px; border: 1px solid var(--donexa-border); border-radius: 14px; }
.dx-text-btn { border: 0; background: none; color: var(--donexa-primary-2); font-weight: 600; font-size: .88rem; padding: 4px 0; }
.dx-composer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 8px 0 0 56px;
  border-top: 1px solid var(--donexa-border);
}
.dx-composer-tools { display: flex; gap: 2px; }
.dx-tool {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px; margin: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--donexa-primary-2); font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.dx-tool i { font-size: 1.1rem; }
.dx-tool:hover { background: color-mix(in srgb, var(--donexa-primary-2) 12%, transparent); }
.dx-post-btn { border-radius: 999px !important; padding: 7px 22px !important; font-weight: 700; }

/* Stories */
.dx-stories { margin-bottom: 4px; }
.dx-stories .stories-bar { gap: 14px; padding: 4px 2px 10px; scrollbar-width: none; }
.dx-stories .stories-bar::-webkit-scrollbar { display: none; }
.dx-story {
  width: 72px; flex: 0 0 72px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
}
.dx-stories .dx-story-ring {
  position: relative;
  width: 68px; height: 68px;
  padding: 3px;
  border-radius: 50%;
  background: var(--donexa-gradient);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dx-stories .dx-story-ring:focus-visible { outline: 2px solid var(--donexa-primary-2); outline-offset: 2px; }
.dx-stories .dx-story-add { background: var(--donexa-border); }
.dx-avatar-story { width: 100%; height: 100%; flex: none; border: 3px solid var(--donexa-bg); font-size: 1.2rem; }
.dx-story-plus {
  position: absolute; right: -2px; bottom: -2px;
  font-size: 1.3rem; line-height: 1;
  color: var(--donexa-primary-2);
  background: var(--donexa-bg); border-radius: 50%;
}
.dx-story-name {
  max-width: 72px;
  font-size: .75rem; color: var(--donexa-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Feed tabs */
.dx-tabs {
  position: sticky; top: var(--dx-nav-h, 64px); z-index: 20;
  display: flex;
  margin: 0 0 var(--dx-gap);
  background: color-mix(in srgb, var(--donexa-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--donexa-border);
}
.dx-tabs a {
  flex: 1; text-align: center;
  padding: 14px 8px 12px;
  color: var(--donexa-muted); text-decoration: none;
  font-weight: 600; font-size: .95rem;
  position: relative;
}
.dx-tabs a:hover { color: var(--donexa-text); background: color-mix(in srgb, var(--donexa-text) 4%, transparent); }
.dx-tabs a.is-active { color: var(--donexa-text); font-weight: 700; }
.dx-tabs a.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 56px; height: 4px; margin-left: -28px;
  border-radius: 4px 4px 0 0;
  background: var(--donexa-gradient);
}

/* Post card */
.dx-post {
  position: relative;
  background: var(--donexa-card);
  border: 1px solid var(--donexa-border);
  border-radius: var(--dx-radius);
  padding: 14px 16px 6px;
  margin: 0 0 var(--dx-gap);
  animation: none;
}
.dx-post:hover { background: var(--donexa-card); }
.dx-post-head { display: flex; align-items: flex-start; gap: 12px; }
.dx-post-who { flex: 1; min-width: 0; padding-top: 1px; }
.dx-post-name {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  color: var(--donexa-text); text-decoration: none;
  font-weight: 700; font-size: .98rem; line-height: 1.3;
}
.dx-post-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-post-name:hover > span { text-decoration: underline; }
.dx-verified { color: var(--donexa-primary-2); font-size: .9rem; flex: none; }
.dx-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px;
  color: var(--donexa-muted); font-size: .84rem; line-height: 1.4;
}
.dx-post-meta a { color: inherit; text-decoration: none; }
.dx-post-meta a:hover { text-decoration: underline; }
.dx-sponsored {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 4px; padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--donexa-primary-2) 14%, transparent);
  color: var(--donexa-primary-2); font-size: .74rem; font-weight: 600;
}
.dx-post .post-menu-wrap { position: relative; top: auto; right: auto; margin: -6px -8px 0 0; flex: none; }
.dx-post .post-menu-trigger:hover,
.dx-post .post-menu-trigger[aria-expanded="true"] { background: color-mix(in srgb, var(--donexa-text) 8%, transparent); }

.dx-post-body { padding-left: 56px; }
.dx-post-text {
  margin-top: 4px;
  color: var(--donexa-text);
  font-size: 1rem; line-height: 1.55;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.dx-post-text.is-collapsed { max-height: 9.3em; }
.dx-post .post-see-more { margin-top: 2px; }

.dx-post .dx-media {
  margin: 10px 0 0 !important;
  border-radius: 16px !important;
  border: 1px solid var(--donexa-border) !important;
  background: var(--donexa-bg) !important;
  overflow: hidden;
}
.dx-post .dx-media .donexa-gallery-item { background: var(--donexa-bg); }
.dx-post .dx-media .donexa-gallery-media { background: var(--donexa-bg); }
.dx-post .donexa-gallery-image:hover { transform: none; filter: brightness(1.04); }

/* Polls */
.dx-poll { margin-top: 10px; display: grid; gap: 8px; }
.dx-poll-question { font-weight: 600; color: var(--donexa-text); }
.dx-poll-option {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 42px; padding: 9px 14px;
  border: 1px solid var(--donexa-border); border-radius: 12px;
  background: transparent; color: var(--donexa-text);
  text-align: left; font-size: .95rem;
}
.dx-poll:not(.has-voted) .dx-poll-option { border-color: color-mix(in srgb, var(--donexa-primary-2) 55%, transparent); color: var(--donexa-primary-2); font-weight: 600; justify-content: center; }
.dx-poll:not(.has-voted) .dx-poll-option:hover { background: color-mix(in srgb, var(--donexa-primary-2) 10%, transparent); }
.dx-poll-option .poll-progress {
  position: absolute; inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--donexa-primary) 22%, transparent);
  transition: width .45s ease;
}
.dx-poll-option.poll-selected .poll-progress { background: color-mix(in srgb, var(--donexa-primary-2) 30%, transparent); }
.dx-poll-option.poll-selected .dx-poll-label { font-weight: 700; }
.dx-poll-label, .dx-poll-option .poll-percent { position: relative; }
.dx-poll-option .poll-percent { font-weight: 700; font-size: .9rem; }
.dx-poll .poll-total { color: var(--donexa-muted); font-size: .84rem; }

/* Action bar */
.dx-post-actions {
  display: flex !important; align-items: center; gap: 4px;
  margin: 6px -8px 0 48px; padding: 0 !important;
  border-top: 0 !important;
}
.dx-post .dx-act {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--donexa-muted);
  font-size: .86rem; font-variant-numeric: tabular-nums;
}
.dx-post .dx-act i { font-size: 1.1rem; }
.dx-post .dx-act-comment, .dx-post .dx-act-share, .dx-post .dx-views { margin-left: auto; }
.dx-post .dx-act-like:hover, .dx-post .dx-act-like.liked { color: var(--dx-like); }
.dx-post .dx-act-like:hover { background: color-mix(in srgb, var(--dx-like) 12%, transparent); }
.dx-post .dx-act-comment:hover { color: var(--dx-reply); background: color-mix(in srgb, var(--dx-reply) 12%, transparent); }
.dx-post .dx-act-share:hover { color: var(--dx-share); background: color-mix(in srgb, var(--dx-share) 12%, transparent); }
.dx-post .dx-act-save { margin-left: auto; }
.dx-post .dx-act-save:hover, .dx-post .dx-act-save.bookmarked { color: var(--dx-save); }
.dx-post .dx-act-save:hover { background: color-mix(in srgb, var(--dx-save) 12%, transparent); }
.dx-post .dx-act.liked i { animation: dxPop .32s ease-out; }
.dx-post .dx-act:focus-visible, .dx-tool:focus-visible, .dx-tabs a:focus-visible, .dx-poll-option:focus-visible {
  outline: 2px solid var(--donexa-primary-2); outline-offset: 2px;
}
.dx-views { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--donexa-muted); font-size: .86rem; }
@keyframes dxPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Comments (built by JS inside the card) */
.dx-post .post-comments-box { margin: 4px 0 10px 56px; padding-top: 10px; border-top: 1px solid var(--donexa-border); }
.dx-post .post-comments-box .bg-dark { background: color-mix(in srgb, var(--donexa-text) 6%, transparent) !important; border-radius: 14px !important; }
.dx-post .post-comments-box .comment-input { border-radius: 999px !important; }
.dx-post .post-comments-box .comment-submit { border-radius: 999px; }

/* Empty state, loader, skeleton */
.dx-empty {
  text-align: center; padding: 48px 24px;
  background: var(--donexa-card);
  border: 1px dashed var(--donexa-border);
  border-radius: var(--dx-radius);
}
.dx-empty > i { font-size: 2.4rem; color: var(--donexa-muted); }
.dx-empty h2 { font-size: 1.15rem; font-weight: 700; margin: 12px 0 6px; color: var(--donexa-text); }
.dx-empty p { color: var(--donexa-muted); margin: 0 auto 18px; max-width: 34ch; }
.dx-empty .btn { border-radius: 999px; padding: 8px 20px; font-weight: 600; }
.dx-feed-loader { padding: 4px 0 24px; text-align: center; }
.dx-feed-status { color: var(--donexa-muted); font-size: .88rem; padding: 8px 0; }
.dx-feed-loader[data-feed-retry] .dx-feed-status { cursor: pointer; color: var(--donexa-primary-2); }
.dx-skeleton {
  background: var(--donexa-card); border: 1px solid var(--donexa-border);
  border-radius: var(--dx-radius); padding: 16px; text-align: left;
}
.dx-skel-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.dx-skel-circle { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.dx-skel-lines { flex: 1; display: grid; gap: 7px; }
.dx-skel-lines span:first-child { width: 40%; }
.dx-skel-lines span:last-child { width: 24%; }
.dx-skel-lines span, .dx-skel-line { display: block; height: 11px; border-radius: 6px; }
.dx-skel-line { margin: 0 0 9px 56px; }
.dx-skel-line.short { width: 55%; }
.dx-skel-circle, .dx-skel-lines span, .dx-skel-line {
  background: linear-gradient(90deg, var(--donexa-border) 25%, color-mix(in srgb, var(--donexa-text) 14%, transparent) 50%, var(--donexa-border) 75%);
  background-size: 200% 100%;
  animation: dxShimmer 1.3s linear infinite;
}
@keyframes dxShimmer { to { background-position: -200% 0; } }

/* Phones: edge-to-edge timeline like a native app */
@media (max-width: 575.98px) {
  .dx-feed-page { padding: 8px 0 24px; }
  .dx-composer, .dx-post, .dx-empty, .dx-skeleton { border-radius: 0; border-left: 0; border-right: 0; }
  .dx-post { margin-bottom: 8px; padding: 12px 14px 4px; }
  .dx-composer { padding: 12px 14px 8px; margin-bottom: 8px; }
  .dx-stories { padding: 0 12px; }
  .dx-post-body, .dx-composer-preview, .dx-composer-alert { padding-left: 0; }
  .dx-composer-bar { padding-left: 0; }
  .dx-poll-builder { margin-left: 0; }
  .dx-post-actions { margin: 4px -6px 0; }
  .dx-post .post-comments-box { margin-left: 0; }
  .dx-post .dx-media { border-radius: 12px !important; }
  .dx-tool span { display: none; }
  .dx-tool { width: 38px; justify-content: center; padding: 0; }
  .dx-tabs { top: var(--dx-nav-h, 56px); }
  .dx-skel-line { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-post .dx-act.liked i, .dx-skel-circle, .dx-skel-lines span, .dx-skel-line { animation: none; }
  .dx-poll-option .poll-progress { transition: none; }
}
/* Multi-photo grids fill their tiles (single photos keep their full shape). */
.dx-post .dx-media:not(.gallery-count-1) .donexa-gallery-item { aspect-ratio: auto; min-height: 0; }
.dx-post .dx-media.gallery-count-2, .dx-post .dx-media.gallery-count-3, .dx-post .dx-media.gallery-count-4 { aspect-ratio: 16 / 10; }
.dx-post .dx-media:not(.gallery-count-1) .donexa-gallery-media { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.dx-post .dx-media.gallery-count-5 .donexa-gallery-item { aspect-ratio: 1.25 / 1; }

/* Messages: unread chats stand out; keyboard focus is visible (Oct 2026) */
.wa-chat-item-bottom { gap: 8px; }
.wa-chat-preview { flex: 1; min-width: 0; }
.wa-chat-item.has-unread .wa-chat-name { font-weight: 700; }
.wa-chat-item.has-unread .wa-chat-preview { color: var(--donexa-text); font-weight: 600; }
.wa-chat-item.has-unread .wa-chat-time { color: #25d366; font-weight: 600; }
.wa-chat-item:focus-visible, .wa-search-result:focus-visible { outline: 2px solid var(--donexa-primary-2); outline-offset: -2px; }
/* Chat wallpaper: keep it still behind the messages (the re-enabled
   wallpaper block above sets attachment:local), keep the desktop pattern at
   its tile ratio, and show the mobile poster once instead of tiling seams. */
.wa-messages { background-attachment: scroll !important; background-size: 612px 471px !important; }
@media (max-width: 767.98px) {
  .wa-messages {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* ============================================================
   Communities v2 — Groups and Business directories and pages (Oct 2026)
   Shares tokens and post cards with the feed (.dx-*). Theme-variable
   based, so light and dark both work.
   ============================================================ */
.dx-comm-page { max-width: 1120px; margin: 0 auto; padding: 20px 16px 56px; }
.dx-comm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dx-comm-head h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 4px; color: var(--donexa-text); letter-spacing: -.01em; }
.dx-comm-head p { margin: 0; color: var(--donexa-muted); max-width: 60ch; }
.dx-pill-btn { border-radius: 999px !important; font-weight: 600; padding: 8px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dx-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--donexa-border); color: var(--donexa-muted); display: inline-flex; align-items: center; justify-content: center; background: transparent; }
.dx-icon-btn:hover { color: var(--donexa-text); background: var(--donexa-card-hover); }

.dx-comm-search { position: relative; margin-bottom: 12px; }
.dx-comm-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--donexa-muted); }
.dx-comm-search input {
  width: 100%; height: 48px; padding: 0 16px 0 44px;
  border-radius: 999px; border: 1px solid var(--donexa-border);
  background: var(--donexa-card); color: var(--donexa-text); font-size: 1rem;
}
.dx-comm-search input:focus { outline: 2px solid var(--donexa-primary-2); outline-offset: 1px; }

.dx-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.dx-chips::-webkit-scrollbar { display: none; }
.dx-chips a {
  flex: none; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--donexa-border); color: var(--donexa-text);
  text-decoration: none; font-size: .88rem; font-weight: 500; background: var(--donexa-card);
}
.dx-chips a:hover { border-color: var(--donexa-primary-2); }
.dx-chips a.is-active { background: var(--donexa-text); color: var(--donexa-bg); border-color: var(--donexa-text); }

.dx-mine { margin: 8px 0 20px; }
.dx-mine h2, .dx-comm-subtitle { font-size: 1.05rem; font-weight: 700; color: var(--donexa-text); margin: 0 0 10px; }
.dx-mine-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.dx-mine-item {
  flex: none; display: flex; align-items: center; gap: 10px; max-width: 240px;
  padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--donexa-border);
  background: var(--donexa-card); color: var(--donexa-text); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.dx-mine-item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-mine-item:hover { background: var(--donexa-card-hover); color: var(--donexa-text); }

/* Logo / avatar block (square-ish for communities, tinted when no image) */
.dx-logo {
  --dx-hue: 260;
  width: 64px; height: 64px; flex: none;
  border-radius: 16px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--dx-hue) 62% 46%), hsl(calc(var(--dx-hue) + 40) 66% 34%));
  color: #fff; font-weight: 800; font-size: 1.5rem;
  border: 3px solid var(--donexa-card);
}
.dx-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dx-logo-sm { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; border-width: 0; }
.dx-logo-xl { width: 112px; height: 112px; border-radius: 24px; font-size: 2.6rem; border-width: 4px; }

/* Directory grid */
.dx-comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dx-comm-card {
  display: flex; flex-direction: column;
  background: var(--donexa-card); border: 1px solid var(--donexa-border);
  border-radius: 18px; overflow: hidden;
}
.dx-comm-banner {
  --dx-hue: 260;
  display: block; height: 96px;
  background-color: hsl(var(--dx-hue) 45% 30%);
  background-image: radial-gradient(120% 140% at 0% 0%, hsl(var(--dx-hue) 65% 48%) 0%, transparent 60%),
                    linear-gradient(135deg, hsl(var(--dx-hue) 55% 32%), hsl(calc(var(--dx-hue) + 50) 50% 22%));
  background-size: cover; background-position: center;
}
.dx-comm-card-body { padding: 0 16px 16px; display: flex; flex-direction: column; flex: 1; }
.dx-comm-card .dx-logo { margin-top: -32px; }
.dx-comm-card h3 { font-size: 1.05rem; font-weight: 700; margin: 10px 0 4px; line-height: 1.3; }
.dx-comm-card h3 a { color: var(--donexa-text); text-decoration: none; }
.dx-comm-card h3 a:hover { text-decoration: underline; }
.dx-comm-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 8px; color: var(--donexa-muted); font-size: .84rem; }
.dx-comm-desc {
  color: var(--donexa-text); opacity: .85; font-size: .9rem; line-height: 1.45; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dx-comm-actions { margin-top: auto; }

/* Group / business page */
.dx-profile-page { padding-top: 12px; }
.dx-profile-head { background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
.dx-profile-cover {
  --dx-hue: 260;
  aspect-ratio: 16 / 4.6; min-height: 140px;
  background-color: hsl(var(--dx-hue) 45% 28%);
  background-image: radial-gradient(90% 120% at 10% 0%, hsl(var(--dx-hue) 70% 50%) 0%, transparent 55%),
                    radial-gradient(70% 120% at 100% 100%, hsl(calc(var(--dx-hue) + 60) 60% 40%) 0%, transparent 60%),
                    linear-gradient(135deg, hsl(var(--dx-hue) 50% 30%), hsl(calc(var(--dx-hue) + 40) 45% 18%));
  background-size: cover; background-position: center;
}
.dx-profile-bar { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px 20px; flex-wrap: wrap; }
.dx-profile-bar .dx-logo-xl { margin-top: -56px; }
.dx-profile-title { flex: 1; min-width: 220px; padding-top: 12px; }
.dx-profile-title h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 4px; color: var(--donexa-text); letter-spacing: -.01em; line-height: 1.2; }
.dx-profile-title .dx-comm-meta { font-size: .92rem; margin: 0; }
.dx-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-role-badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--donexa-primary) 18%, transparent);
  color: var(--donexa-text); font-size: .78rem; font-weight: 600; white-space: nowrap;
}

.dx-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 992px) {
  .dx-profile-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .dx-profile-side { position: sticky; top: calc(var(--dx-nav-h, 64px) + 16px); order: 2; }
}
.dx-profile-main { min-width: 0; }
.dx-profile-main .dx-composer { margin-bottom: 12px; }
.dx-profile-side .dx-panel { margin-bottom: 16px; }

/* Panels reuse .dx-panel from the feed; extras below */
.dx-panel-count { color: var(--donexa-muted); font-weight: 500; font-size: .9rem; margin-left: 4px; }
.dx-panel-attention { border-color: color-mix(in srgb, var(--donexa-primary-2) 55%, var(--donexa-border)); }
.dx-about-text { color: var(--donexa-text); line-height: 1.55; margin: 0 0 12px; overflow-wrap: anywhere; }
.dx-facts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.dx-facts li { display: flex; gap: 12px; align-items: flex-start; color: var(--donexa-text); font-size: .92rem; }
.dx-facts li > i { color: var(--donexa-muted); font-size: 1.1rem; width: 20px; text-align: center; margin-top: 1px; flex: none; }
.dx-facts li span { min-width: 0; overflow-wrap: anywhere; }
.dx-facts strong { display: block; font-weight: 600; }
.dx-facts small { display: block; color: var(--donexa-muted); }
.dx-facts a { color: var(--donexa-primary-2); text-decoration: none; }
.dx-facts a:hover { text-decoration: underline; }
.dx-rules { margin: 0 0 8px; padding-left: 1.3em; color: var(--donexa-text); display: grid; gap: 8px; font-size: .92rem; }

.dx-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dx-people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dx-person { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--donexa-text); text-decoration: none; }
.dx-person:hover strong { text-decoration: underline; }
.dx-person > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.dx-person strong { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-person small { color: var(--donexa-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-person-actions { display: flex; gap: 6px; flex: none; }
.dx-person-actions .btn { border-radius: 999px; padding: 4px 12px; font-weight: 600; }
.dx-avatar-sm { width: 36px; height: 36px; flex-basis: 36px; font-size: .85rem; }
.dx-more-members summary { list-style: none; cursor: pointer; }
.dx-more-members summary::-webkit-details-marker { display: none; }
.dx-more-members[open] summary { display: none; }
.dx-more-members .dx-people { margin-top: 10px; }

.dx-note { display: flex; gap: 8px; align-items: center; color: var(--donexa-muted); font-size: .9rem; padding: 10px 14px; border-radius: 12px; background: var(--donexa-card); border: 1px solid var(--donexa-border); margin: 0 0 12px; }
.dx-note-warn { color: #f59e0b; margin-top: 8px; }
.dx-locked > i { color: var(--donexa-primary-2); }
.dx-file-count { color: var(--donexa-muted); font-size: .84rem; align-self: center; }
.dx-kind { display: inline-flex; align-items: center; gap: 4px; }
.dx-in-group { color: var(--donexa-text) !important; font-weight: 600; }

/* Create-group modal */
.dx-modal { background: var(--donexa-card); color: var(--donexa-text); border: 1px solid var(--donexa-border); border-radius: 20px; }
.dx-modal .modal-header, .dx-modal .modal-footer { border-color: var(--donexa-border); }
.dx-modal .modal-title { font-size: 1.2rem; font-weight: 700; }
html:not([data-bs-theme="light"]) .dx-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.dx-modal legend { font-size: 1rem; }
.dx-choice { display: grid; gap: 8px; }
.dx-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--donexa-border); border-radius: 12px; cursor: pointer; }
.dx-choice label:has(input:checked) { border-color: var(--donexa-primary-2); background: color-mix(in srgb, var(--donexa-primary-2) 8%, transparent); }
.dx-choice input { margin-top: 4px; }
.dx-choice strong { display: block; }
.dx-choice small { display: block; color: var(--donexa-muted); }

@media (max-width: 575.98px) {
  .dx-comm-page { padding: 12px 12px 40px; }
  .dx-comm-head h1, .dx-profile-title h1 { font-size: 1.45rem; }
  .dx-comm-head .btn { width: 100%; }
  .dx-profile-head { border-radius: 0; border-left: 0; border-right: 0; margin: -12px -12px 16px; }
  .dx-profile-bar { padding: 0 16px 16px; gap: 12px; }
  .dx-profile-bar .dx-logo-xl { width: 88px; height: 88px; margin-top: -44px; font-size: 2rem; }
  .dx-profile-actions { width: 100%; }
  .dx-profile-actions .dx-pill-btn { flex: 1; }
  .dx-profile-main .dx-composer, .dx-profile-main .dx-post, .dx-profile-main .dx-empty { border-radius: 16px; border-left: 1px solid var(--donexa-border); border-right: 1px solid var(--donexa-border); }
}
.dx-profile-cover { aspect-ratio: auto; height: clamp(140px, 22vw, 240px); }
@media (max-width: 991.98px) { .dx-side-first .dx-profile-side { order: -1; } }

/* ==========================================================
   Feed v4 — photo grids, full-screen viewer, likes, comments,
   profiles (2026-10-06)
   ========================================================== */

/* Photo grid: every layout has a fixed frame, so mixed portrait and
   landscape photos always line up edge to edge. */
.dx-gallery {
  position: relative; display: grid; gap: 3px; margin: 10px 0 4px;
  border-radius: 16px; overflow: hidden; background: var(--donexa-border);
  border: 1px solid var(--donexa-border);
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.dx-g-item { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: color-mix(in srgb, var(--donexa-text) 6%, var(--donexa-bg)); cursor: pointer; outline-offset: -3px; }
.dx-g-item:focus-visible { outline: 3px solid var(--donexa-primary-2); }
.dx-g-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.dx-g-item:hover img.dx-g-media { filter: brightness(1.05); }
.dx-g-1 { grid-template-columns: 1fr; }
.dx-g-1 .dx-g-item { aspect-ratio: auto; }
.dx-g-1 .dx-g-media { position: static; width: 100%; height: auto; max-height: min(72vh, 600px); object-fit: contain; background: color-mix(in srgb, var(--donexa-text) 5%, var(--donexa-bg)); }
.dx-g-1 video.dx-g-media { aspect-ratio: 16 / 9; height: auto; }
.dx-g-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
.dx-g-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.dx-g-3 .dx-g-item:first-child { grid-row: 1 / span 2; }
.dx-g-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; max-height: 640px; }
.dx-g-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 2rem; font-weight: 700; pointer-events: none;
}
@media (min-width: 768px) { .dx-g-4 { aspect-ratio: 4 / 3; } }

/* Double-tap heart */
.dx-heart-burst {
  position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
  font-size: 92px; color: #fff; line-height: 1;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}
.dx-heart-burst i { color: #ff3b6b; }
.dx-heart-burst.is-bursting { animation: dx-heart 820ms cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes dx-heart {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  32% { transform: translate(-50%, -50%) scale(.95); }
  45% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -62%) scale(1); opacity: 0; }
}
.dx-post .dx-act-like.liked { color: #ff3b6b; }
.dx-post .dx-act-like.liked i { animation: dx-like-pop 340ms ease-out; }
@keyframes dx-like-pop { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .dx-heart-burst.is-bursting, .dx-post .dx-act-like.liked i { animation-duration: 1ms; }
}

/* Full-screen viewer */
html.dx-viewer-open, html.dx-viewer-open body { overflow: hidden; }
.dx-viewer {
  --dx-viewer-fade: 1;
  position: fixed; inset: 0; z-index: 2000; color: #fff;
  background: transparent;
  opacity: 0; transition: opacity .18s ease;
}
.dx-viewer::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dx-viewer-fade); }
.dx-viewer.is-open { opacity: 1; }
.dx-viewer-track {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; outline: none; transition: transform .2s ease;
}
.dx-viewer-track::-webkit-scrollbar { display: none; }
.dx-viewer-slide {
  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center; padding: 56px 0 76px;
}
.dx-viewer-slide img, .dx-viewer-slide video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; }
.dx-viewer-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px 18px;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent);
  transition: opacity .2s ease;
}
.dx-viewer-count { font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.dx-viewer-btn, .dx-viewer-nav {
  border: 0; color: #fff; background: rgba(255, 255, 255, .14); border-radius: 999px;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
  transition: background .15s ease, opacity .2s ease;
}
.dx-viewer-btn:hover, .dx-viewer-nav:hover { background: rgba(255, 255, 255, .26); }
.dx-viewer-btn:focus-visible, .dx-viewer-nav:focus-visible, .dx-viewer-act:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dx-viewer-nav { position: absolute; top: 50%; z-index: 2; margin-top: -22px; }
.dx-viewer-nav.is-prev { left: 16px; }
.dx-viewer-nav.is-next { right: 16px; }
.dx-viewer-nav[hidden] { display: none; }
@media (hover: none) { .dx-viewer-nav { display: none; } }
.dx-viewer-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 6px;
  padding: 14px 14px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  transition: opacity .2s ease;
}
.dx-viewer-bar[hidden] { display: none; }
.dx-viewer-act {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
  font-weight: 600; font-size: .95rem; text-decoration: none;
}
.dx-viewer-act:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.dx-viewer-act i { font-size: 1.2rem; }
.dx-viewer-act em { font-style: normal; }
.dx-viewer-act span:empty { display: none; }
.dx-viewer-act.liked { color: #ff5c85; }
.dx-viewer-act.liked i { animation: dx-like-pop 340ms ease-out; }
.dx-viewer-dots { margin-left: auto; display: flex; gap: 6px; padding-right: 4px; }
.dx-viewer-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.dx-viewer-dots i.is-on { background: #fff; }
.dx-viewer.is-chrome-hidden .dx-viewer-top, .dx-viewer.is-chrome-hidden .dx-viewer-bar, .dx-viewer.is-chrome-hidden .dx-viewer-nav { opacity: 0; pointer-events: none; }
.dx-viewer-heart { position: fixed; }

/* Toasts */
.dx-toast-host {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 2100;
  display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%);
  pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.dx-toast {
  background: color-mix(in srgb, var(--donexa-text) 92%, var(--donexa-bg)); color: var(--donexa-bg);
  padding: 10px 18px; border-radius: 12px; font-size: .92rem; font-weight: 500; box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; text-align: center;
}
.dx-toast.is-in { opacity: 1; transform: none; }
.dx-toast.is-error { background: #c62f4b; color: #fff; }

/* Comments */
.dx-comments { margin: 6px 0 10px; padding-top: 12px; border-top: 1px solid var(--donexa-border); }
.dx-post .dx-comments { margin-left: 56px; }
.dx-comments-status { color: var(--donexa-muted); font-size: .88rem; padding: 4px 0 10px; }
.dx-comments-older { border: 0; background: none; color: var(--donexa-muted); font-weight: 600; font-size: .88rem; padding: 0 0 10px; }
.dx-comments-older:hover { color: var(--donexa-text); text-decoration: underline; }
.dx-comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.dx-comment { display: flex; gap: 10px; align-items: flex-start; }
.dx-comment .dx-avatar-sm { width: 32px; height: 32px; flex-basis: 32px; }
.dx-comment-main { min-width: 0; flex: 1; }
.dx-comment-bubble {
  display: inline-block; max-width: 100%; padding: 8px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--donexa-text) 7%, transparent);
}
.dx-comment-name { color: var(--donexa-text); font-weight: 700; font-size: .86rem; text-decoration: none; }
.dx-comment-name:hover { text-decoration: underline; color: var(--donexa-text); }
.dx-comment-text { color: var(--donexa-text); font-size: .93rem; line-height: 1.4; overflow-wrap: anywhere; }
.dx-comment-meta { display: flex; gap: 12px; padding: 3px 12px 0; font-size: .76rem; color: var(--donexa-muted); }
.dx-comment-delete { border: 0; background: none; padding: 0; color: var(--donexa-muted); font-weight: 600; font-size: .76rem; }
.dx-comment-delete:hover { color: #e5484d; text-decoration: underline; }
.dx-comment-form { display: flex; align-items: flex-end; gap: 8px; }
.dx-comment-input {
  flex: 1; resize: none; min-height: 40px; max-height: 140px; padding: 9px 14px; line-height: 1.35;
  border-radius: 20px; border: 1px solid var(--donexa-border); background: color-mix(in srgb, var(--donexa-text) 4%, transparent);
  color: var(--donexa-text); font-size: .93rem;
}
.dx-comment-input:focus { outline: none; border-color: var(--donexa-primary-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--donexa-primary-2) 22%, transparent); }
.dx-comment-send {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; background: var(--donexa-gradient);
  display: inline-flex; align-items: center; justify-content: center;
}
.dx-comment-send:disabled { opacity: .55; }
@media (max-width: 575.98px) { .dx-post .dx-comments { margin-left: 0; } }

/* Single post page */
.dx-single-post { max-width: 680px; margin: 0 auto; padding: 12px 0 40px; }
.dx-back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--donexa-muted); text-decoration: none; font-weight: 600; padding: 6px 4px 12px; }
.dx-back-link:hover { color: var(--donexa-text); }
.dx-single-card .dx-post { margin-bottom: 12px; }
.dx-single-card .dx-post-text.is-collapsed { max-height: none; }
.dx-single-card .post-see-more { display: none !important; }
.dx-thread { background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: var(--dx-radius, 18px); padding: 16px 18px 12px; }
.dx-thread-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: var(--donexa-text); }
.dx-thread .dx-comments { border-top: 0; padding-top: 4px; margin: 0; }

/* Person profile */
.dx-person-page { max-width: 1100px; margin: 0 auto; }
.dx-cover-btn { display: block; width: 100%; border: 0; padding: 0; background-size: cover; background-position: center; cursor: zoom-in; }
.dx-person-avatar {
  --dx-hue: 260; position: relative; flex: none; width: 128px; height: 128px; margin-top: -64px; padding: 0;
  border-radius: 50%; border: 4px solid var(--donexa-card); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--dx-hue) 60% 45%), hsl(calc(var(--dx-hue) + 50) 60% 35%));
  color: #fff; font-size: 3rem; font-weight: 800;
}
button.dx-person-avatar { cursor: zoom-in; }
.dx-person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dx-person-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dx-person-badges:empty { display: none; }
.dx-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--donexa-primary) 18%, transparent); color: var(--donexa-text); font-size: .8rem; font-weight: 600;
}
.dx-badge-gold { background: #f6c343; color: #3b2a00; }
.dx-person-stats { display: flex; gap: 22px; padding: 12px 24px 16px; border-top: 1px solid var(--donexa-border); color: var(--donexa-muted); font-size: .92rem; flex-wrap: wrap; }
.dx-person-stats strong { color: var(--donexa-text); font-weight: 700; margin-right: 3px; }
.dx-profile-tabs { position: static; border-radius: 16px 16px 0 0; background: var(--donexa-card); border: 1px solid var(--donexa-border); margin-bottom: 12px; }
.dx-tab-count { color: var(--donexa-muted); font-weight: 500; font-size: .85rem; margin-left: 2px; }
.dx-about-text { color: var(--donexa-text); font-size: .95rem; margin: 0 0 12px; overflow-wrap: anywhere; }
.dx-facts small { text-transform: none; }
.dx-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 16px; overflow: hidden; }
.dx-photo-tile { position: relative; aspect-ratio: 1 / 1; border: 0; padding: 0; overflow: hidden; background: color-mix(in srgb, var(--donexa-text) 6%, var(--donexa-bg)); }
.dx-photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.dx-photo-tile:hover img { transform: scale(1.04); }
.dx-photo-tile:focus-visible { outline: 3px solid var(--donexa-primary-2); outline-offset: -3px; }
@media (max-width: 575.98px) {
  .dx-person-avatar { width: 104px; height: 104px; margin-top: -52px; font-size: 2.4rem; }
  .dx-profile-bar { padding: 0 16px 14px; gap: 12px; }
  .dx-person-stats { padding: 10px 16px 14px; gap: 16px; }
  .dx-profile-actions { width: 100%; }
  .dx-profile-tabs { border-radius: 0; border-left: 0; border-right: 0; }
}
.dx-only-you { display: inline-flex; align-items: center; gap: 4px; color: var(--donexa-muted); font-size: .8rem; }

/* ==========================================================
   v10 — 2M Challenge, Talent, Hall of Fame, Wallet, profile
   polish (2026-10-06)
   ========================================================== */
.dx-hub, .dx-wallet { max-width: 1120px; margin: 0 auto; padding: 16px 0 48px; }
.dx-hub .bi, .dx-wallet .bi { line-height: 1; vertical-align: -.1em; }
.dx-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.dx-kicker .bi { font-size: .95rem; }
.dx-note-ok { color: #16a34a; border-color: color-mix(in srgb, #16a34a 35%, var(--donexa-border)); background: color-mix(in srgb, #16a34a 8%, var(--donexa-card)); }
.dx-note-error { color: #e5484d; border-color: color-mix(in srgb, #e5484d 35%, var(--donexa-border)); background: color-mix(in srgb, #e5484d 8%, var(--donexa-card)); flex-wrap: wrap; }
.dx-note .bi { font-size: 1.05rem; flex: none; }
.dx-panel { padding: 18px 18px 14px; }
.dx-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dx-panel-head .dx-panel-title { margin: 0; }
.dx-panel-accent { border-color: color-mix(in srgb, var(--donexa-primary-2) 40%, var(--donexa-border)); }
.dx-panel-danger { border-color: color-mix(in srgb, #e5484d 45%, var(--donexa-border)); }
.dx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dx-hero-actions .btn-light { color: #1a1033; }
.dx-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: .78rem; font-weight: 600; background: color-mix(in srgb, var(--donexa-text) 8%, transparent); color: var(--donexa-muted);
}
.dx-status .bi { font-size: .85rem; }
.dx-status.is-approved { background: color-mix(in srgb, #16a34a 16%, transparent); color: #22c55e; }
.dx-status.is-pending { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #f59e0b; }
.dx-status.is-rejected { background: color-mix(in srgb, #e5484d 14%, transparent); color: #e5484d; }
.dx-hub-grid, .dx-wallet-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 992px) {
  .dx-hub-grid, .dx-wallet-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .dx-hub-side, .dx-wallet-side { position: sticky; top: calc(var(--dx-nav-h, 64px) + 16px); }
}

/* Hero (challenge, hall of fame) */
.dx-hub-hero {
  position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center;
  padding: 28px; margin-bottom: 16px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #7c3aed 0%, transparent 55%), radial-gradient(90% 120% at 100% 100%, #06b6d4 0%, transparent 60%), #1b1446;
}
.dx-hub-hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 8px; line-height: 1.15; }
.dx-hub-hero p { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) { .dx-challenge-hero { grid-template-columns: 1.2fr 1fr; padding: 36px; } }
.dx-goal { background: rgba(10, 6, 30, .38); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; padding: 22px; backdrop-filter: blur(8px); }
.dx-goal-number { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dx-goal-label { color: rgba(255, 255, 255, .78); margin: 6px 0 16px; }
.dx-goal-bar { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.dx-goal-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f472b6, #22d3ee); }
.dx-goal-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: .88rem; color: rgba(255, 255, 255, .82); }
.dx-goal-meta strong { color: #fff; }
.dx-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dx-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--donexa-card); border: 1px solid var(--donexa-border); min-width: 0; }
.dx-stat > .bi { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; background: var(--donexa-gradient); }
.dx-stat strong { display: block; font-size: 1.2rem; font-weight: 800; color: var(--donexa-text); font-variant-numeric: tabular-nums; }
.dx-stat span { display: block; font-size: .8rem; color: var(--donexa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .dx-hub-hero { padding: 22px 18px; border-radius: 0 0 20px 20px; margin-top: -16px; }
  .dx-stat-row { grid-template-columns: 1fr; gap: 8px; padding: 0 12px; }
  .dx-stat { padding: 10px 14px; }
  .dx-hub-grid, .dx-wallet-grid { padding: 0 12px; }
  .dx-hub > .dx-note, .dx-wallet > .dx-note, .dx-hub > .dx-panel, .dx-wallet > .dx-panel { margin-left: 12px; margin-right: 12px; }
}

/* Rank lists */
.dx-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dx-rank-list li { display: grid; grid-template-columns: 30px 26px minmax(0, 1fr) minmax(60px, 32%) auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; }
.dx-rank-list.is-compact li { grid-template-columns: 30px minmax(0, 1fr) minmax(60px, 32%) auto; }
.dx-rank-list li.is-me { background: color-mix(in srgb, var(--donexa-primary-2) 12%, transparent); }
.dx-rank-pos { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--donexa-muted); background: color-mix(in srgb, var(--donexa-text) 7%, transparent); flex: none; }
.dx-rank-pos.is-top { color: #1a1033; }
.dx-rank-pos.is-top-1 { background: #fbbf24; }
.dx-rank-pos.is-top-2 { background: #cbd5e1; }
.dx-rank-pos.is-top-3 { background: #f59e6b; }
.dx-rank-flag { font-size: 1.15rem; line-height: 1; }
.dx-rank-name { min-width: 0; color: var(--donexa-text); font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-rank-name small { display: block; color: var(--donexa-muted); font-weight: 400; font-size: .78rem; }
.dx-rank-name em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--donexa-primary-2); margin-left: 4px; }
.dx-rank-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--donexa-text) 7%, transparent); overflow: hidden; }
.dx-rank-bar span { display: block; height: 100%; border-radius: inherit; background: var(--donexa-gradient); }
.dx-rank-value { color: var(--donexa-text); font-variant-numeric: tabular-nums; font-size: .92rem; text-align: right; min-width: 3ch; }
@media (max-width: 575.98px) { .dx-rank-list li { grid-template-columns: 28px 22px minmax(0, 1fr) auto; } .dx-rank-list.is-compact li { grid-template-columns: 28px minmax(0, 1fr) auto; } .dx-rank-bar { display: none; } }

/* Your part / invite */
.dx-counted { display: flex; gap: 6px; align-items: center; color: #22c55e; font-weight: 600; font-size: .9rem; margin: 0 0 12px; }
.dx-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.dx-mini-stats div { text-align: center; padding: 10px 4px; border-radius: 12px; background: color-mix(in srgb, var(--donexa-text) 5%, transparent); min-width: 0; }
.dx-mini-stats strong { display: block; font-size: 1.15rem; color: var(--donexa-text); }
.dx-mini-stats span { display: block; font-size: .72rem; color: var(--donexa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-label { display: block; font-size: .8rem; font-weight: 600; color: var(--donexa-muted); margin-bottom: 6px; }
.dx-copy { display: flex; gap: 6px; }
.dx-copy input { flex: 1; min-width: 0; border-radius: 12px; border: 1px solid var(--donexa-border); background: color-mix(in srgb, var(--donexa-text) 4%, transparent); color: var(--donexa-text); padding: 8px 12px; font-size: .85rem; }
.dx-copy .btn { border-radius: 12px; flex: none; }
.dx-share-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dx-share-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--donexa-border); color: var(--donexa-text); text-decoration: none; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.dx-share-btn .bi { font-size: .95rem; }
.dx-share-btn:hover { background: var(--donexa-card-hover); color: var(--donexa-text); }
.dx-share-btn.is-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.dx-share-btn.is-whatsapp:hover { background: #1ebe5b; color: #fff; }
.dx-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-tag-cloud a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--donexa-text) 6%, transparent); color: var(--donexa-text); text-decoration: none; font-size: .85rem; font-weight: 600; }
.dx-tag-cloud a span { color: var(--donexa-muted); font-weight: 500; font-size: .78rem; }
.dx-tag-cloud a:hover { background: color-mix(in srgb, var(--donexa-primary-2) 18%, transparent); }
.dx-amb-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 12px; }
.dx-amb-list li { display: flex; align-items: center; gap: 12px; }
.dx-amb-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--donexa-primary) 18%, transparent); color: var(--donexa-text); font-size: 1rem; }
.dx-amb-text { flex: 1; min-width: 0; }
.dx-amb-text strong { display: block; font-size: .9rem; color: var(--donexa-text); }
.dx-amb-text small { display: block; font-size: .78rem; color: var(--donexa-muted); }
.dx-amb-list form { margin: 0; }
.dx-amb-list .btn { padding: 4px 14px; }

/* Hall of Fame */
.dx-hof-hero { grid-template-columns: 1fr; }
@media (min-width: 768px) { .dx-hof-hero { grid-template-columns: 1fr auto; } }
.dx-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .16); justify-self: start; }
.dx-seg a { padding: 8px 18px; border-radius: 999px; color: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 600; font-size: .9rem; }
.dx-seg a.is-active { background: #fff; color: #1a1033; }
.dx-podium { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.dx-podium-item { min-width: 0; }
.dx-podium-item a { min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 10px 0; border-radius: 20px 20px 0 0; background: var(--donexa-card); border: 1px solid var(--donexa-border); border-bottom: 0; color: var(--donexa-text); text-decoration: none; overflow: hidden; }
.dx-podium-item a:hover strong { text-decoration: underline; }
.dx-podium-medal { font-size: 1.5rem; line-height: 1; margin-bottom: 6px; }
.dx-podium-avatar.dx-avatar { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.6rem; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--donexa-card), 0 0 0 5px #cbd5e1; }
.dx-podium-item.is-1 .dx-podium-avatar { width: 88px; height: 88px; flex-basis: 88px; box-shadow: 0 0 0 3px var(--donexa-card), 0 0 0 5px #fbbf24; }
.dx-podium-item.is-3 .dx-podium-avatar { box-shadow: 0 0 0 3px var(--donexa-card), 0 0 0 5px #f59e6b; }
.dx-podium-item strong { font-size: .95rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-podium-item small { color: var(--donexa-muted); font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-podium-score { font-size: .82rem; font-weight: 600; color: var(--donexa-primary-2); margin-top: 4px; }
.dx-podium-step { align-self: stretch; margin: 12px -10px 0; padding: 10px 0; font-size: 1.4rem; font-weight: 800; color: #1a1033; background: #cbd5e1; }
.dx-podium-item.is-1 .dx-podium-step { background: #fbbf24; padding: 22px 0; }
.dx-podium-item.is-3 .dx-podium-step { background: #f59e6b; padding: 6px 0; }
.dx-podium-item.is-me a { border-color: var(--donexa-primary-2); }
.dx-my-standing { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; margin-bottom: 16px; background: color-mix(in srgb, var(--donexa-primary-2) 10%, var(--donexa-card)); border: 1px solid color-mix(in srgb, var(--donexa-primary-2) 35%, var(--donexa-border)); }
.dx-my-standing .dx-rank-pos { width: auto; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 999px; color: var(--donexa-text); }
.dx-my-standing > div { flex: 1; min-width: 0; }
.dx-my-standing strong { display: block; color: var(--donexa-text); font-size: .95rem; }
.dx-my-standing small { color: var(--donexa-muted); font-size: .82rem; }
.dx-leader-list { list-style: none; margin: 0; padding: 0; }
.dx-leader-list li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--donexa-border); }
.dx-leader-list li:first-child { border-top: 0; }
.dx-leader-list li.is-me { background: color-mix(in srgb, var(--donexa-primary-2) 10%, transparent); border-radius: 12px; }
.dx-leader-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--donexa-text); text-decoration: none; }
.dx-leader-who > span:last-child { min-width: 0; }
.dx-leader-who strong { display: block; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-leader-who small { display: block; color: var(--donexa-muted); font-size: .8rem; }
.dx-leader-who:hover strong { text-decoration: underline; }
.dx-you { font-style: normal; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--donexa-primary-2); color: #fff; vertical-align: 1px; }
.dx-leader-stat { text-align: right; min-width: 64px; }
.dx-leader-stat strong { display: block; font-size: .92rem; color: var(--donexa-text); font-variant-numeric: tabular-nums; }
.dx-leader-stat small { display: block; font-size: .72rem; color: var(--donexa-muted); }
@media (max-width: 575.98px) { .dx-leader-stat.is-wide { display: none; } .dx-podium { gap: 6px; padding: 0 8px; } .dx-podium-avatar.dx-avatar { width: 56px; height: 56px; flex-basis: 56px; } .dx-podium-item.is-1 .dx-podium-avatar { width: 68px; height: 68px; flex-basis: 68px; } .dx-hof .dx-panel, .dx-my-standing { margin-left: 12px; margin-right: 12px; } }

/* Talent */
.dx-talent-hero { overflow: hidden; border-radius: 24px; margin-bottom: 16px; background: var(--donexa-card); border: 1px solid var(--donexa-border); }
.dx-talent-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 2174 / 723; object-fit: cover; }
.dx-talent-hero-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 22px; }
.dx-talent-hero-copy .dx-kicker { color: var(--donexa-primary-2); }
.dx-talent-hero-copy h1 { font-size: 1.15rem; font-weight: 800; margin: 2px 0 2px; color: var(--donexa-text); }
.dx-talent-hero-copy p { margin: 0; color: var(--donexa-muted); font-size: .9rem; max-width: 60ch; }
.dx-talent-hero-copy .dx-hero-actions { margin-top: 0; }
.dx-talent-hero-copy .btn-outline-light { color: var(--donexa-text); border-color: var(--donexa-border); }
@media (max-width: 767.98px) {
  .dx-talent-hero { border-radius: 0 0 20px 20px; margin-top: -16px; border-left: 0; border-right: 0; border-top: 0; }
  .dx-talent-hero-copy { padding: 14px 16px 16px; }
  .dx-talent-hero-copy .dx-hero-actions { width: 100%; }
  .dx-talent-hero-copy .dx-hero-actions .btn { flex: 1; }
}
.dx-section-head { margin: 8px 0 12px; }
.dx-section-head h2 { font-size: 1.25rem; font-weight: 800; color: var(--donexa-text); margin: 0 0 2px; }
.dx-section-head p { color: var(--donexa-muted); margin: 0; font-size: .92rem; }
.dx-talent-areas { margin: 8px 0 16px; }
.dx-talent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dx-talent-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--donexa-card); border: 1px solid var(--donexa-border); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dx-talent-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); border-color: color-mix(in srgb, var(--donexa-primary-2) 45%, var(--donexa-border)); }
.dx-talent-img { aspect-ratio: 279 / 200; overflow: hidden; background: #120d2e; }
.dx-talent-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dx-talent-card:hover .dx-talent-img img { transform: scale(1.04); }
.dx-talent-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.dx-talent-body h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: var(--donexa-text); }
.dx-talent-body h3 span { font-size: 1rem; }
.dx-talent-body p { font-size: .82rem; color: var(--donexa-muted); margin: 0 0 12px; line-height: 1.4; }
.dx-talent-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dx-talent-count { font-size: .78rem; color: var(--donexa-muted); white-space: nowrap; }
.dx-talent-foot .btn { padding: 5px 14px; font-size: .85rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .dx-talent-areas, .dx-talent .dx-panel { margin-left: 12px; margin-right: 12px; }
  .dx-talent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dx-talent-body { padding: 10px; }
  .dx-talent-body p { display: none; }
  .dx-talent-foot { flex-direction: column; align-items: stretch; }
  .dx-talent-foot .btn, .dx-talent-foot .dx-status { justify-content: center; }
}
.dx-announce { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--donexa-border); }
.dx-announce:first-of-type { border-top: 0; padding-top: 4px; }
.dx-announce-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; }
.dx-announce-body { min-width: 0; flex: 1; }
.dx-announce-meta { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--donexa-muted); }
.dx-announce-meta strong { color: var(--donexa-text); }
.dx-announce-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.dx-tag { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: color-mix(in srgb, var(--donexa-text) 8%, transparent); color: var(--donexa-muted); }
.dx-tag.is-gold { background: color-mix(in srgb, #fbbf24 22%, transparent); color: #f59e0b; }
.dx-announce h3 { font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: var(--donexa-text); }
.dx-announce-text { color: var(--donexa-text); font-size: .93rem; line-height: 1.55; overflow-wrap: anywhere; }
.dx-search-mini { position: relative; margin-bottom: 10px; }
.dx-search-mini .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--donexa-muted); font-size: .9rem; }
.dx-search-mini input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 999px; border: 1px solid var(--donexa-border); background: color-mix(in srgb, var(--donexa-text) 4%, transparent); color: var(--donexa-text); font-size: .88rem; }
.dx-dir-list { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.dx-dir-list li[hidden] { display: none; }
.dx-req-list { list-style: none; margin: 0; padding: 0; }
.dx-req-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--donexa-border); }
.dx-req-list li:first-child { border-top: 0; }
.dx-req-thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.dx-req-text { flex: 1; min-width: 0; }
.dx-req-text strong { display: block; color: var(--donexa-text); font-size: .93rem; }
.dx-req-text small { display: block; color: var(--donexa-muted); font-size: .8rem; }
.dx-req-text .dx-req-reason { color: #e5484d; }
.dx-apply-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--donexa-text) 5%, transparent); margin-bottom: 14px; }
.dx-apply-who > span:last-child { min-width: 0; }
.dx-apply-who strong { display: block; font-size: .92rem; }
.dx-apply-who small { display: block; color: var(--donexa-muted); font-size: .78rem; }

/* Wallet */
.dx-wallet { max-width: 1000px; }
.dx-balance-card {
  position: relative; overflow: hidden; border-radius: 24px; padding: 22px 22px 16px; margin-bottom: 16px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #22d3ee 0%, transparent 50%), radial-gradient(120% 140% at 0% 100%, #7c3aed 0%, transparent 55%), #1d1250;
  box-shadow: 0 18px 40px rgba(76, 29, 149, .25);
}
.dx-balance-card.is-frozen { background: linear-gradient(135deg, #3f3f46, #18181b); box-shadow: none; }
.dx-balance-top { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: rgba(255, 255, 255, .82); }
.dx-balance-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .78rem; font-weight: 600; }
.dx-balance-amount { margin: 10px 0 6px; display: flex; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.dx-balance-whole { font-size: clamp(2.4rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.dx-balance-frac { font-size: 1.3rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.dx-balance-unit { margin-left: 10px; font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, .85); }
.dx-balance-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: rgba(255, 255, 255, .78); }
.dx-balance-meta .bi { font-size: .8rem; }
.dx-balance-note { opacity: .7; }
.dx-balance-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.dx-balance-actions a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; color: #fff; text-decoration: none; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .1); transition: background .15s ease; }
.dx-balance-actions a:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.dx-balance-actions .bi { font-size: 1.15rem; }
.dx-inline-card { display: flex; gap: 14px; align-items: flex-start; }
.dx-inline-icon { width: 42px; height: 42px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; background: var(--donexa-gradient); }
.dx-inline-icon.is-warn { background: #f59e0b; }
.dx-inline-icon.is-danger { background: #e5484d; }
.dx-inline-text { min-width: 0; flex: 1; }
.dx-inline-text .dx-panel-title { margin-bottom: 4px; }
.dx-verify-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-left: 56px; }
.dx-otp-form { display: flex; gap: 8px; }
.dx-otp-form input { max-width: 160px; letter-spacing: .3em; text-align: center; }
.dx-link-btn { color: var(--donexa-primary-2); font-weight: 600; text-decoration: none; }
.dx-form-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-left: 56px; }
.dx-form-row .form-control { flex: 1; min-width: 120px; }
.dx-pin-input { letter-spacing: .4em; font-size: 1.05rem; }
.dx-reason { font-size: .9rem; color: var(--donexa-text); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #e5484d 8%, transparent); }
.dx-limit-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--donexa-text) 8%, transparent); overflow: hidden; margin: -2px 0 14px; }
.dx-limit-bar span { display: block; height: 100%; background: var(--donexa-gradient); }
.dx-send-form .form-label { font-size: .82rem; font-weight: 600; color: var(--donexa-muted); margin: 10px 0 6px; }
.dx-send-form .form-label:first-of-type { margin-top: 0; }
.dx-input-icon { position: relative; }
.dx-input-icon .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--donexa-muted); font-size: 1rem; }
.dx-input-icon input { padding-left: 34px; }
.dx-amount-input { position: relative; }
.dx-amount-input input { font-size: 1.4rem; font-weight: 700; padding-right: 70px; font-variant-numeric: tabular-nums; }
.dx-amount-input span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--donexa-muted); font-weight: 700; font-size: .85rem; }
.dx-fee-line { font-size: .8rem; color: var(--donexa-muted); margin: 6px 0 0; }
.dx-tx-list { list-style: none; margin: 0; padding: 0; }
.dx-tx-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--donexa-border); }
.dx-tx-list li:first-child { border-top: 0; }
.dx-tx-icon { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.dx-tx-icon.is-in { background: color-mix(in srgb, #16a34a 16%, transparent); color: #22c55e; }
.dx-tx-icon.is-out { background: color-mix(in srgb, var(--donexa-text) 8%, transparent); color: var(--donexa-text); }
.dx-tx-text { flex: 1; min-width: 0; }
.dx-tx-text strong { display: block; color: var(--donexa-text); font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-tx-text small { display: block; color: var(--donexa-muted); font-size: .78rem; }
.dx-tx-amount { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-tx-amount.is-in { color: #22c55e; }
.dx-tx-amount.is-out { color: var(--donexa-text); }
.dx-empty-flat { border: 0; background: transparent; padding: 20px 10px; }
.dx-earn-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.dx-earn-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--donexa-border); font-size: .9rem; color: var(--donexa-text); }
.dx-earn-list li:first-child { border-top: 0; }
.dx-earn-list strong { color: #22c55e; white-space: nowrap; }
.dx-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dx-tips li { display: flex; gap: 10px; font-size: .86rem; color: var(--donexa-muted); line-height: 1.4; }
.dx-tips .bi { color: var(--donexa-primary-2); font-size: 1rem; flex: none; margin-top: 1px; }
@media (max-width: 575.98px) {
  .dx-balance-card { border-radius: 0 0 22px 22px; margin-top: -16px; }
  .dx-verify-row, .dx-form-row { padding-left: 0; }
}

/* Profile polish: one consistent, modest icon size everywhere on the page */
.dx-person-page .bi { line-height: 1; vertical-align: -.1em; }
.dx-person-page .dx-profile-actions .btn { min-height: 40px; font-size: .92rem; }
.dx-person-page .dx-profile-actions .btn .bi { font-size: .95rem; }
.dx-person-page .dx-icon-btn { width: 40px; height: 40px; flex: none; font-size: 1rem; }
.dx-person-page .dx-verified { font-size: 1.05rem; }
.dx-person-page .dx-profile-title h1 .dx-verified { font-size: 1.1rem; vertical-align: 0; }
.dx-person-page .dx-facts li > .bi { font-size: 1rem; width: 18px; }
.dx-person-page .dx-badge { font-size: .76rem; padding: 3px 10px; }
.dx-person-page .dx-empty > .bi { font-size: 1.8rem; }
.dx-person-page .dx-tabs a { font-size: .92rem; }
@media (max-width: 575.98px) {
  .dx-person-page .dx-profile-bar { align-items: center; }
  .dx-person-page .dx-profile-title { min-width: 0; flex: 1 1 calc(100% - 120px); }
  .dx-person-page .dx-profile-title h1 { font-size: 1.3rem; }
  .dx-person-page .dx-profile-actions { flex-wrap: nowrap; }
  .dx-person-page .dx-profile-actions .dx-pill-btn { flex: 1; padding: 8px 10px; }
  .dx-person-avatar { width: 92px; height: 92px; margin-top: -46px; font-size: 2.2rem; }
}
.dx-pin-input:placeholder-shown { letter-spacing: normal; font-size: .95rem; }
@media (max-width: 575.98px) { .dx-wallet > .dx-note + .dx-balance-card { margin-top: 0; border-radius: 22px; margin-left: 12px; margin-right: 12px; } }
.dx-talent-img.is-missing { background: var(--donexa-gradient); }
.dx-talent-img { background-color: #120d2e; background-repeat: no-repeat; transition: transform .3s ease; }
.dx-talent-card:hover .dx-talent-img { transform: scale(1.03); }
.dx-req-thumb { display: inline-block; background-repeat: no-repeat; background-color: #120d2e; }
.dx-talent-img { aspect-ratio: 279 / 230; }
.dx-req-thumb { width: 56px; height: 46px; border-radius: 10px; }
.dx-talent-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.dx-req-thumb { object-fit: cover; }

/* ==========================================================
   v14 — Settings, theme fixes, DNxC coin (2026-10-06)
   ========================================================== */
.dx-settings { max-width: 1000px; margin: 0 auto; padding: 16px 0 60px; }
.dx-settings .bi { line-height: 1; vertical-align: -.1em; }
.dx-settings-head { margin-bottom: 14px; }
.dx-settings-head h1 { font-size: 1.6rem; font-weight: 800; margin: 0; color: var(--donexa-text); }
.dx-settings-head p { margin: 2px 0 0; color: var(--donexa-muted); }
.dx-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 992px) { .dx-settings-layout { grid-template-columns: 220px minmax(0, 1fr); } .dx-settings-nav { position: sticky; top: calc(var(--dx-nav-h, 64px) + 16px); } }
.dx-settings-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dx-settings-nav::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .dx-settings-nav { flex-direction: column; } }
.dx-settings-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; color: var(--donexa-muted); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.dx-settings-nav a:hover { color: var(--donexa-text); background: color-mix(in srgb, var(--donexa-text) 6%, transparent); }
.dx-settings-nav .bi { font-size: 1rem; }
.dx-settings-main { min-width: 0; }
.dx-settings-main section[id] { scroll-margin-top: calc(var(--dx-nav-h, 64px) + 16px); }
.dx-set-list { list-style: none; margin: 0 0 8px; padding: 0; }
.dx-set-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--donexa-border); font-size: .92rem; }
.dx-set-list li:first-child { border-top: 0; }
.dx-set-list span { color: var(--donexa-muted); }
.dx-set-list strong { color: var(--donexa-text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dx-ok-icon { color: #22c55e; font-size: .9rem; }
.dx-mini-link { font-size: .8rem; color: var(--donexa-primary-2); margin-left: 6px; }
.dx-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--donexa-border); flex-wrap: wrap; }
.dx-panel-title + .dx-set-row, .dx-panel-muted + .dx-set-row { border-top: 0; }
.dx-set-row > label, .dx-set-label { color: var(--donexa-text); font-size: .92rem; font-weight: 500; flex: 1 1 220px; margin: 0; }
.dx-set-row .form-select { flex: 0 1 240px; min-width: 180px; }
.dx-set-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--donexa-border); }
.dx-panel-title + .dx-set-switch { border-top: 0; }
.dx-set-switch label { flex: 1; cursor: pointer; margin: 0; }
.dx-set-switch strong { display: block; color: var(--donexa-text); font-size: .92rem; font-weight: 500; }
.dx-set-switch small { display: block; color: var(--donexa-muted); font-size: .8rem; }
.dx-set-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.dx-set-switch .form-check-input:checked { background-color: var(--donexa-primary); border-color: var(--donexa-primary); }
.dx-save-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; margin: -4px 0 16px; border-radius: 16px; background: color-mix(in srgb, var(--donexa-card) 92%, transparent); border: 1px solid var(--donexa-border); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.dx-save-bar span { color: var(--donexa-muted); font-size: .86rem; }
.dx-save-bar span.is-dirty { color: #f59e0b; font-weight: 600; }
@media (max-width: 991.98px) { .dx-save-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.dx-theme-pick { display: inline-flex; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--donexa-text) 6%, transparent); gap: 2px; }
.dx-theme-pick label { margin: 0; cursor: pointer; }
.dx-theme-pick input { position: absolute; opacity: 0; pointer-events: none; }
.dx-theme-pick span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--donexa-muted); }
.dx-theme-pick input:checked + span { background: var(--donexa-card); color: var(--donexa-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.dx-theme-pick input:focus-visible + span { outline: 2px solid var(--donexa-primary-2); }
.dx-set-form { padding: 12px 0; border-top: 1px solid var(--donexa-border); display: grid; gap: 10px; }
.dx-panel-title + .dx-set-form, .dx-panel-muted + .dx-set-form { border-top: 0; padding-top: 0; }
.dx-set-form h3 { font-size: .98rem; font-weight: 700; color: var(--donexa-text); margin: 0; }
.dx-set-form > .btn { justify-self: start; }
.dx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dx-set-form [data-pw-step] { display: grid; gap: 10px; }
.dx-set-form [data-pw-step][hidden] { display: none; }
@media (max-width: 575.98px) { .dx-two { grid-template-columns: 1fr; } .dx-settings-main, .dx-settings-nav, .dx-settings-head { padding: 0 12px; } }
.dx-hint { color: var(--donexa-muted); font-size: .82rem; margin: 0; }
.dx-code-input { max-width: 200px; letter-spacing: .4em; text-align: center; font-size: 1.1rem; }
.dx-device-list { list-style: none; margin: 0; padding: 0; }
.dx-device-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--donexa-border); }
.dx-device-list li:first-child { border-top: 0; }
.dx-device-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--donexa-text) 7%, transparent); color: var(--donexa-text); font-size: 1.05rem; }
.dx-device-text { flex: 1; min-width: 0; }
.dx-device-text strong { display: block; color: var(--donexa-text); font-size: .92rem; font-weight: 600; }
.dx-device-text em { font-style: normal; margin-left: 4px; vertical-align: 1px; }
.dx-device-text small { color: var(--donexa-muted); font-size: .8rem; }
.dx-link-list { list-style: none; margin: 0; padding: 0; }
.dx-link-list li { border-top: 1px solid var(--donexa-border); }
.dx-link-list li:first-child { border-top: 0; }
.dx-link-list a { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; color: var(--donexa-text); text-decoration: none; font-size: .92rem; }
.dx-link-list a:hover { color: var(--donexa-primary-2); }
.dx-link-list .bi { color: var(--donexa-muted); font-size: .85rem; }

/* Light theme: keep text on the coloured heroes and the balance card white */
html[data-bs-theme="light"] .dx-hub-hero .btn-outline-light,
html[data-bs-theme="light"] .dx-balance-card .btn-outline-light { color: #fff !important; border-color: rgba(255, 255, 255, .65) !important; background: transparent !important; }
html[data-bs-theme="light"] .dx-hub-hero .btn-outline-light:hover { background: rgba(255, 255, 255, .15) !important; }
html[data-bs-theme="light"] .dx-hub-hero, html[data-bs-theme="light"] .dx-balance-card { box-shadow: 0 14px 34px rgba(76, 29, 149, .18); }
html[data-bs-theme="light"] .dx-seg { background: rgba(0, 0, 0, .2); }
html[data-bs-theme="light"] .dx-viewer, html[data-bs-theme="light"] .dx-viewer * { color-scheme: dark; }
html[data-bs-theme="light"] .dx-toast { background: #172033; color: #fff; }
html[data-bs-theme="light"] .dx-talent-hero-copy .btn-outline-light { color: var(--donexa-text) !important; }
html[data-bs-theme="light"] .dx-rank-pos.is-top { color: #1a1033 !important; }
html[data-bs-theme="light"] .dx-podium-avatar.dx-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #cbd5e1; }
/* DNxC coin on the wallet cover */
.dx-balance-card { isolation: isolate; min-height: 250px; }
.dx-balance-card > *:not(.dx-coin-cover) { position: relative; z-index: 1; }
.dx-coin-cover { position: absolute; right: -18px; top: 50%; z-index: 0; transform: translateY(-58%); pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.dx-coin-hero { display: block; animation: dx-coin-float 6s ease-in-out infinite; }
.dx-coin-shine { animation: dx-coin-shine 5s ease-in-out infinite; }
.dx-coin-inline { width: 22px; height: 22px; vertical-align: -5px; margin-right: 2px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.dx-balance-card.is-frozen .dx-coin-cover { filter: grayscale(1) brightness(.8); opacity: .5; }
.dx-balance-card.is-frozen .dx-coin-hero, .dx-balance-card.is-frozen .dx-coin-shine { animation: none; }
@keyframes dx-coin-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes dx-coin-shine { 0% { transform: translateX(-120px) rotate(25deg); } 55%, 100% { transform: translateX(260px) rotate(25deg); } }
@media (min-width: 768px) { .dx-balance-card { padding-right: 260px; } .dx-balance-actions { max-width: 520px; } }
@media (max-width: 767.98px) {
  .dx-coin-cover { right: -30px; top: 8px; transform: none; opacity: .9; }
  .dx-coin-hero { width: 140px; height: 140px; }
  .dx-balance-top .dx-balance-status { position: relative; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) { .dx-coin-hero, .dx-coin-shine { animation: none; } }
html[data-bs-theme="light"] .dx-hub-hero h1, html[data-bs-theme="light"] .dx-hub-hero h2, .dx-hub-hero h1 { color: #fff !important; -webkit-text-fill-color: #fff; background: none; }
@media (min-width: 768px) { .dx-coin-cover { right: 28px; transform: translateY(-50%); } }
@media (max-width: 767.98px) {
  .dx-coin-cover { right: 4px; top: 4px; }
  .dx-coin-hero { width: 92px; height: 92px; }
  .dx-balance-card:not(.is-frozen) .dx-balance-status { display: none; }
  .dx-balance-card.is-frozen .dx-balance-status { margin-right: 96px; }
}
@media (max-width: 575.98px) { .dx-set-row .form-select { flex: 1 1 100%; min-width: 0; } }

/* =====================================================================
   Admin console (v15) — scoped to body.dx-admin-page
   ===================================================================== */
.dx-adm-console {
    background: var(--donexa-card);
    border: 1px solid var(--donexa-border);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.dx-adm-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .85rem 1rem;
    background: linear-gradient(120deg, rgba(124,58,237,.16), rgba(6,182,212,.10) 60%, transparent);
    border-bottom: 1px solid var(--donexa-border);
}
.dx-adm-brand { display: flex; align-items: center; gap: .65rem; color: var(--donexa-text); text-decoration: none; min-width: 0; }
.dx-adm-brand:hover { color: var(--donexa-text); }
.dx-adm-brand-mark {
    width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff; font-size: 1.05rem;
    background: var(--donexa-gradient);
}
.dx-adm-brand strong { display: block; font-size: .98rem; line-height: 1.1; letter-spacing: .01em; }
.dx-adm-brand small { display: block; color: var(--donexa-muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.dx-adm-whoami { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.dx-adm-whoami-name { color: var(--donexa-muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.dx-adm-chair {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border-radius: 999px; font-weight: 700; font-size: .78rem; letter-spacing: .03em;
    color: #3b2500; background: linear-gradient(135deg, #fde68a, #f59e0b);
    box-shadow: 0 0 0 1px rgba(245,158,11,.45), 0 4px 14px rgba(245,158,11,.25);
}
.dx-adm-sections, .dx-adm-links {
    display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dx-adm-sections::-webkit-scrollbar, .dx-adm-links::-webkit-scrollbar { display: none; }
.dx-adm-sections { padding: .5rem .6rem 0; border-bottom: 1px solid var(--donexa-border); }
.dx-adm-section {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .55rem .8rem; font-size: .85rem; font-weight: 600; color: var(--donexa-muted);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dx-adm-section:hover { color: var(--donexa-text); }
.dx-adm-section.is-active { color: var(--donexa-text); border-bottom-color: var(--donexa-primary-2); }
.dx-adm-links { padding: .55rem .7rem; }
.dx-adm-link {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .38rem .75rem; border-radius: 8px; font-size: .82rem; color: var(--donexa-muted); text-decoration: none;
}
.dx-adm-link:hover { color: var(--donexa-text); background: rgba(255,255,255,.05); }
.dx-adm-link.is-active { color: #fff; background: rgba(124,58,237,.35); box-shadow: inset 0 0 0 1px rgba(124,58,237,.55); }

/* Role and status pills */
.dx-role { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.dx-role-owner { color: #3b2500; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.dx-role-super_admin { color: #fecaca; background: rgba(239,68,68,.18); box-shadow: inset 0 0 0 1px rgba(239,68,68,.4); }
.dx-role-senior_admin { color: #a5f3fc; background: rgba(6,182,212,.16); box-shadow: inset 0 0 0 1px rgba(6,182,212,.4); }
.dx-role-admin { color: #ddd6fe; background: rgba(124,58,237,.2); box-shadow: inset 0 0 0 1px rgba(124,58,237,.45); }
.dx-role-moderator { color: #bbf7d0; background: rgba(34,197,94,.14); box-shadow: inset 0 0 0 1px rgba(34,197,94,.35); }
.dx-role-member { color: var(--donexa-muted); background: rgba(255,255,255,.06); }
.dx-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.dx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dx-pill-ok { color: #4ade80; background: rgba(34,197,94,.12); }
.dx-pill-warn { color: #fbbf24; background: rgba(245,158,11,.12); }
.dx-pill-bad { color: #f87171; background: rgba(239,68,68,.12); }
.dx-pill-info { color: #67e8f9; background: rgba(6,182,212,.12); }
.dx-pill-muted { color: var(--donexa-muted); background: rgba(255,255,255,.06); }
.dx-adm-avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: inline-block; }
.dx-adm-avatar-letter { display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; background: var(--donexa-gradient); }
.dx-adm-person { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dx-adm-person strong { display: block; font-size: .88rem; color: var(--donexa-text); line-height: 1.2; }
.dx-adm-person small { display: block; color: var(--donexa-muted); font-size: .75rem; }

/* Page header, panels, KPIs */
.dx-adm-pagehead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.dx-adm-pagehead h1 { font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--donexa-text); letter-spacing: -.01em; }
.dx-adm-pagehead p { margin: .2rem 0 0; color: var(--donexa-muted); font-size: .87rem; }
.dx-adm-panel { background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: 14px; margin-bottom: 1.25rem; }
.dx-adm-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--donexa-border); flex-wrap: wrap; }
.dx-adm-panel-head h2 { font-size: .98rem; font-weight: 700; margin: 0; color: var(--donexa-text); }
.dx-adm-panel-head p { margin: .1rem 0 0; font-size: .78rem; color: var(--donexa-muted); }
.dx-adm-panel-body { padding: 1rem; }
.dx-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.dx-kpi {
    display: block; text-decoration: none; padding: .9rem 1rem; border-radius: 14px;
    background: var(--donexa-card); border: 1px solid var(--donexa-border); transition: border-color .15s, transform .15s;
}
.dx-kpi:hover { border-color: rgba(124,58,237,.55); transform: translateY(-1px); }
.dx-kpi-top { display: flex; justify-content: space-between; align-items: center; color: var(--donexa-muted); font-size: .78rem; font-weight: 600; }
.dx-kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; }
.dx-kpi-val { font-size: 1.55rem; font-weight: 800; color: var(--donexa-text); margin-top: .35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dx-kpi-sub { font-size: .74rem; color: var(--donexa-muted); }
.dx-tone-violet { color: #c4b5fd; background: rgba(124,58,237,.18); }
.dx-tone-cyan { color: #67e8f9; background: rgba(6,182,212,.16); }
.dx-tone-green { color: #4ade80; background: rgba(34,197,94,.14); }
.dx-tone-amber { color: #fbbf24; background: rgba(245,158,11,.15); }
.dx-tone-red { color: #f87171; background: rgba(239,68,68,.15); }
.dx-attn { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.dx-attn-item {
    display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; text-decoration: none;
    border: 1px solid var(--donexa-border); color: var(--donexa-text);
}
.dx-attn-item:hover { background: rgba(255,255,255,.03); color: var(--donexa-text); }
.dx-attn-item .dx-kpi-ico { flex: 0 0 auto; }
.dx-attn-item span { flex: 1; font-size: .85rem; }
.dx-attn-item b { font-variant-numeric: tabular-nums; font-size: .95rem; }
.dx-attn-item.is-clear b { color: var(--donexa-muted); font-weight: 500; }
.dx-chair-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .9rem 1rem; border-radius: 14px; margin-bottom: 1.25rem;
    border: 1px solid rgba(245,158,11,.35);
    background: linear-gradient(120deg, rgba(245,158,11,.12), rgba(124,58,237,.08));
}
.dx-chair-strip strong { color: var(--donexa-text); }
.dx-chair-strip small { color: var(--donexa-muted); display: block; }
.dx-adm-empty { text-align: center; color: var(--donexa-muted); padding: 2rem 1rem; font-size: .88rem; }
.dx-adm-empty i { display: block; font-size: 1.6rem; margin-bottom: .4rem; opacity: .6; }
.dx-adm-filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.dx-adm-filter { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; text-decoration: none; color: var(--donexa-muted); border: 1px solid var(--donexa-border); }
.dx-adm-filter:hover { color: var(--donexa-text); }
.dx-adm-filter.is-active { color: #fff; background: rgba(124,58,237,.35); border-color: rgba(124,58,237,.6); }
.dx-adm-filter em { font-style: normal; opacity: .7; margin-left: .25rem; }
.dx-adm-search { display: flex; gap: .5rem; }
.dx-adm-search .form-control { max-width: 360px; }
.dx-adm-actions { display: inline-flex; gap: .35rem; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
.dx-adm-actions form { display: inline; margin: 0; }
.dx-adm-mutedcell { color: var(--donexa-muted); font-size: .82rem; }

/* Skin the existing admin pages so every screen matches */
body.dx-admin-page .donexa-card { border-radius: 14px; box-shadow: none; }
body.dx-admin-page .donexa-card:hover { background: var(--donexa-card); }
body.dx-admin-page .donexa-card h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
body.dx-admin-page .donexa-card h5 { font-size: 1rem; font-weight: 700; }
body.dx-admin-page .table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.03); margin-bottom: 0; font-size: .86rem; }
body.dx-admin-page .table > :not(caption) > * > * { border-bottom-color: var(--donexa-border); padding: .7rem .75rem; background: transparent; }
body.dx-admin-page .table thead th {
    font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--donexa-muted); border-bottom-width: 1px; white-space: nowrap;
}
body.dx-admin-page .table tbody tr:last-child > * { border-bottom: 0; }
body.dx-admin-page .btn-sm { border-radius: 8px; font-size: .78rem; padding: .3rem .65rem; font-weight: 600; }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-info { color: #67e8f9; border-color: rgba(103,232,249,.45); }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-info:hover { color: #0b1020; background: #67e8f9; }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-success { color: #4ade80; border-color: rgba(74,222,128,.45); }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-success:hover { color: #0b1020; background: #4ade80; }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-danger { color: #f87171; border-color: rgba(248,113,113,.45); }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-danger:hover { color: #fff; background: #ef4444; }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-warning { color: #fbbf24; border-color: rgba(251,191,36,.45); }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-warning:hover { color: #1f1300; background: #fbbf24; }
html:not([data-bs-theme="light"]) body.dx-admin-page .btn-outline-light { color: var(--donexa-text); border-color: rgba(255,255,255,.22); }
body.dx-admin-page .badge { font-weight: 600; border-radius: 999px; padding: .32em .65em; }
body.dx-admin-page .form-select-sm, body.dx-admin-page .form-control-sm { border-radius: 8px; }
@media (max-width: 575.98px) {
    body.dx-admin-page .container { padding-left: 12px; padding-right: 12px; }
    .dx-adm-head { padding: .7rem .8rem; }
    .dx-kpis { grid-template-columns: repeat(2, 1fr); }
    .dx-kpi-val { font-size: 1.3rem; }
    .dx-adm-search .form-control { max-width: none; }
}

/* Light theme */
html[data-bs-theme="light"] .dx-adm-console { box-shadow: 0 6px 24px rgba(15,23,42,.06); }
html[data-bs-theme="light"] .dx-adm-link:hover { background: rgba(15,23,42,.05); }
html[data-bs-theme="light"] .dx-adm-link.is-active { color: #4c1d95; background: rgba(124,58,237,.12); box-shadow: inset 0 0 0 1px rgba(124,58,237,.3); }
html[data-bs-theme="light"] .dx-adm-filter.is-active { color: #4c1d95; background: rgba(124,58,237,.12); }
html[data-bs-theme="light"] .dx-role-super_admin { color: #b91c1c; }
html[data-bs-theme="light"] .dx-role-senior_admin { color: #0e7490; }
html[data-bs-theme="light"] .dx-role-admin { color: #5b21b6; }
html[data-bs-theme="light"] .dx-role-moderator { color: #15803d; }
html[data-bs-theme="light"] .dx-pill-ok { color: #15803d; }
html[data-bs-theme="light"] .dx-pill-warn { color: #b45309; }
html[data-bs-theme="light"] .dx-pill-bad { color: #b91c1c; }
html[data-bs-theme="light"] .dx-pill-info { color: #0e7490; }
html[data-bs-theme="light"] .dx-tone-violet { color: #6d28d9; }
html[data-bs-theme="light"] .dx-tone-cyan { color: #0e7490; }
html[data-bs-theme="light"] .dx-tone-green { color: #15803d; }
html[data-bs-theme="light"] .dx-tone-amber { color: #b45309; }
html[data-bs-theme="light"] .dx-tone-red { color: #b91c1c; }
html[data-bs-theme="light"] .dx-attn-item:hover { background: rgba(15,23,42,.03); }
html[data-bs-theme="light"] body.dx-admin-page .table { --bs-table-hover-bg: rgba(15,23,42,.03); }

/* =====================================================================
   Messages (v15) — branded, calm chat UI. Scoped to body.dx-messages-page
   ===================================================================== */
.dx-messages-page .dx-msg-wrap { max-width: 1320px; }
.dx-messages-page .wa-app {
    height: calc(100dvh - 58px - 2rem);
    min-height: 520px;
    background: var(--donexa-card);
    border: 1px solid var(--donexa-border);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.dx-messages-page .wa-sidebar { width: 360px; background: var(--donexa-bg-soft); border-right: 1px solid var(--donexa-border); }
.dx-messages-page .wa-sidebar-header { background: transparent; padding: 16px 16px 6px; justify-content: space-between; }
.wa-sidebar-title h1 { font-size: 1.25rem; font-weight: 800; margin: 0; color: var(--donexa-text); letter-spacing: -.01em; }
.wa-sidebar-sub { display: block; color: var(--donexa-muted); font-size: .76rem; margin-top: 1px; }
.wa-icon-btn {
    width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--donexa-border);
    background: rgba(255,255,255,.03); color: var(--donexa-text);
    display: inline-grid; place-items: center; font-size: 1.05rem; text-decoration: none; flex: 0 0 auto;
}
.wa-icon-btn:hover { background: rgba(124,58,237,.18); border-color: rgba(124,58,237,.45); color: #fff; }
.dx-messages-page .wa-search { background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: 12px; margin: 8px 14px 10px; padding: 8px 12px; }
.dx-messages-page .wa-search:focus-within { border-color: rgba(124,58,237,.6); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.dx-messages-page .wa-search input { background: transparent; color: var(--donexa-text); }
.dx-messages-page .wa-search-result { border-radius: 10px; margin: 0 8px; }
.dx-messages-page .wa-search-result:hover { background: rgba(255,255,255,.04); }
.dx-messages-page .wa-chat-list { padding: 2px 8px 10px; }
.dx-messages-page .wa-chat-item {
    position: relative; border-radius: 12px; padding: 10px 10px; margin-bottom: 2px; border: 0; gap: 12px;
}
.dx-messages-page .wa-chat-item:hover { background: rgba(255,255,255,.04); }
.dx-messages-page .wa-chat-item.active { background: rgba(124,58,237,.16); }
.dx-messages-page .wa-chat-item.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--donexa-gradient); }
.dx-messages-page .wa-avatar { width: 46px; height: 46px; }
.dx-messages-page .wa-avatar-letter { background: var(--donexa-gradient); color: #fff; font-weight: 700; }
.dx-messages-page .wa-chat-name { color: var(--donexa-text); font-weight: 600; }
.dx-messages-page .wa-chat-time, .dx-messages-page .wa-chat-preview { color: var(--donexa-muted); }
.dx-messages-page .wa-chat-item.has-unread .wa-chat-preview { color: var(--donexa-text); font-weight: 500; }
.dx-messages-page .wa-chat-item.has-unread .wa-chat-time { color: var(--donexa-primary-2); font-weight: 600; }
.dx-messages-page .wa-unread-badge { background: var(--donexa-gradient); color: #fff; min-width: 20px; height: 20px; border-radius: 999px; font-size: .68rem; font-weight: 700; display: inline-grid; place-items: center; padding: 0 6px; }
.wa-list-empty, .wa-thread-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 36px 20px; color: var(--donexa-muted); font-size: .85rem; }
.wa-list-empty strong, .wa-thread-empty strong { color: var(--donexa-text); font-size: .95rem; }
.wa-thread-empty-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--donexa-gradient); margin-bottom: 8px; box-shadow: 0 8px 24px rgba(124,58,237,.35); }

/* Empty right pane */
.dx-messages-page .wa-no-chat { background: radial-gradient(600px 300px at 50% 40%, rgba(124,58,237,.10), transparent 70%), var(--donexa-bg); color: var(--donexa-muted); }
.wa-no-chat-card { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 360px; padding: 20px; }
.wa-no-chat-card h2 { font-size: 1.3rem; font-weight: 800; color: var(--donexa-text); margin: 4px 0 6px; }
.wa-no-chat-card p { font-size: .9rem; margin: 0 0 14px; }
.wa-no-chat-lock { font-size: .75rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--donexa-border); }
.dx-messages-page .wa-no-chat i { font-size: inherit; }

/* Thread header */
.dx-messages-page .wa-chat-header { background: var(--donexa-card); border-bottom: 1px solid var(--donexa-border); padding: 10px 16px; min-height: 64px; }
.dx-messages-page .wa-chat-header .wa-avatar { width: 42px; height: 42px; }
.dx-messages-page .wa-peer-name { color: var(--donexa-text); font-weight: 700; }
.dx-messages-page .wa-peer-status { color: var(--donexa-muted); }
.dx-messages-page .wa-back-btn { color: var(--donexa-text); width: 36px; height: 36px; border-radius: 10px; }

/* Thread background: quiet, on-brand, no busy wallpaper */
body.dx-messages-page .wa-messages {
    background-color: var(--donexa-bg) !important;
    background-image:
        radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px),
        radial-gradient(800px 400px at 10% 0%, rgba(124,58,237,.10), transparent 60%),
        radial-gradient(700px 380px at 100% 100%, rgba(6,182,212,.08), transparent 60%) !important;
    background-size: 22px 22px, 100% 100%, 100% 100% !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-attachment: local, scroll, scroll !important;
    padding: 18px 6% 14px;
}
.dx-messages-page .wa-encryption-notice { color: var(--donexa-muted); background: rgba(255,255,255,.04); border: 1px solid var(--donexa-border); border-radius: 999px; max-width: 420px; padding: 6px 14px; font-size: .72rem; }
.dx-messages-page .wa-msg-day span { background: rgba(255,255,255,.06); color: var(--donexa-muted); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: .7rem; letter-spacing: .02em; }

/* Bubbles */
.dx-messages-page .wa-msg-row { align-items: center; gap: 6px; margin-bottom: 8px; }
.dx-messages-page .wa-msg-row.is-cont { margin-top: -5px; }
.dx-messages-page .wa-msg-row.mine { flex-direction: row-reverse; justify-content: flex-start; }
.dx-messages-page .wa-bubble {
    max-width: min(68%, 560px); padding: 8px 12px 6px; border-radius: 18px;
    background: var(--donexa-card-hover); color: var(--donexa-text);
    border: 1px solid var(--donexa-border); box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.dx-messages-page .wa-msg-row:not(.mine) .wa-bubble { border-bottom-left-radius: 6px; border-top-left-radius: 18px; }
.dx-messages-page .wa-msg-row.is-cont:not(.mine) .wa-bubble { border-top-left-radius: 6px; }
.dx-messages-page .wa-msg-row.mine .wa-bubble {
    background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%); color: #fff; border-color: transparent;
    border-bottom-right-radius: 6px; border-top-right-radius: 18px;
}
.dx-messages-page .wa-msg-row.mine.is-cont .wa-bubble { border-top-right-radius: 6px; }
.dx-messages-page .wa-msg-meta { color: var(--donexa-muted); font-size: .66rem; margin: 6px 0 -2px 10px; }
.dx-messages-page .wa-msg-row.mine .wa-msg-meta { color: rgba(255,255,255,.72); }
.dx-messages-page .wa-msg-row.mine .wa-ticks { color: #a5f3fc; }
.dx-messages-page .wa-message-image, .dx-messages-page .wa-message-video { border-radius: 12px; }
.dx-messages-page .wa-message-document { color: inherit; background: rgba(0,0,0,.18); border-radius: 12px; }
.dx-messages-page .wa-msg-row.mine .wa-message-document small { color: #e0e7ff; }
.dx-messages-page .wa-deleted { color: inherit; opacity: .7; }

/* Per-message options menu */
.wa-msg-tools { position: relative; flex: 0 0 auto; align-self: center; }
.wa-msg-more {
    width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center;
    background: transparent; color: var(--donexa-muted); opacity: 0; transition: opacity .15s, background .15s; cursor: pointer;
}
.wa-msg-row:hover .wa-msg-more, .wa-msg-more:focus-visible, .wa-msg-tools.is-open .wa-msg-more { opacity: 1; }
.wa-msg-more:hover, .wa-msg-tools.is-open .wa-msg-more { background: rgba(255,255,255,.08); color: var(--donexa-text); }
@media (hover: none) { .wa-msg-more { opacity: .55; } }
.wa-msg-menu {
    position: absolute; top: calc(100% + 4px); z-index: 30; min-width: 196px; display: none;
    padding: 6px; border-radius: 12px; background: var(--donexa-card); border: 1px solid var(--donexa-border);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.wa-msg-row:not(.mine) .wa-msg-menu { left: 0; }
.wa-msg-row.mine .wa-msg-menu { right: 0; }
.wa-msg-tools.opens-up .wa-msg-menu { top: auto; bottom: calc(100% + 4px); }
.wa-msg-tools.is-open .wa-msg-menu { display: block; }
.wa-msg-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left;
    padding: 8px 10px; border-radius: 8px; color: var(--donexa-text); font-size: .84rem; cursor: pointer;
}
.wa-msg-menu button:hover { background: rgba(255,255,255,.06); }
.wa-msg-menu button.is-danger { color: #f87171; }
.wa-msg-menu button:disabled { opacity: .5; }

/* Composer */
.dx-messages-page .wa-compose { background: var(--donexa-card); border-top: 1px solid var(--donexa-border); padding: 10px 14px; }
.dx-messages-page .wa-input {
    background: var(--donexa-bg-soft); color: var(--donexa-text); border: 1px solid var(--donexa-border); border-radius: 14px; padding: 11px 16px;
}
.dx-messages-page .wa-input:focus { border-color: rgba(124,58,237,.6); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.dx-messages-page .wa-input::placeholder { color: var(--donexa-muted); }
.dx-messages-page .wa-attach-btn { color: var(--donexa-muted); border-radius: 12px; }
.dx-messages-page .wa-attach-btn:hover { color: var(--donexa-text); background: rgba(255,255,255,.06); }
.dx-messages-page .wa-send-btn { background: var(--donexa-gradient); border-radius: 14px; box-shadow: 0 6px 18px rgba(124,58,237,.35); }
.dx-messages-page .wa-send-btn:hover { background: var(--donexa-gradient); filter: brightness(1.08); }
.dx-messages-page .wa-send-btn:disabled { opacity: .6; }
.dx-messages-page .wa-new-messages-indicator { background: var(--donexa-gradient); }
.dx-messages-page .donexa-chat-tools-panel { background: var(--donexa-card); border-color: var(--donexa-border); }

@media (max-width: 991.98px) {
    .dx-messages-page .dx-msg-wrap { padding: 0 !important; }
    .dx-messages-page .wa-app { height: calc(100dvh - 58px - 70px); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; min-height: 420px; }
    .dx-messages-page .wa-sidebar { width: 100%; }
    .dx-messages-page .wa-bubble { max-width: 80%; }
    body.dx-messages-page .wa-messages { padding: 14px 10px 10px; }
}

/* Light theme */
html[data-bs-theme="light"] body.dx-messages-page .wa-app { box-shadow: 0 10px 30px rgba(15,23,42,.08); }
html[data-bs-theme="light"] body.dx-messages-page .wa-sidebar { background: #f8fafc; }
html[data-bs-theme="light"] body.dx-messages-page .wa-sidebar-header { background: transparent; }
html[data-bs-theme="light"] body.dx-messages-page .wa-search { background: #fff; }
html[data-bs-theme="light"] body.dx-messages-page .wa-chat-item:hover { background: rgba(15,23,42,.04); }
html[data-bs-theme="light"] body.dx-messages-page .wa-chat-item.active { background: rgba(124,58,237,.10); }
html[data-bs-theme="light"] body.dx-messages-page .wa-messages {
    background-color: #f5f7fb !important;
    background-image:
        radial-gradient(rgba(15,23,42,.06) 1px, transparent 1.2px),
        radial-gradient(800px 400px at 10% 0%, rgba(124,58,237,.07), transparent 60%),
        radial-gradient(700px 380px at 100% 100%, rgba(6,182,212,.06), transparent 60%) !important;
}
html[data-bs-theme="light"] body.dx-messages-page .wa-no-chat { background: radial-gradient(600px 300px at 50% 40%, rgba(124,58,237,.08), transparent 70%), #f5f7fb; }
html[data-bs-theme="light"] body.dx-messages-page .wa-bubble { background: #fff; color: var(--donexa-text); border-color: rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-bs-theme="light"] body.dx-messages-page .wa-msg-row.mine .wa-bubble { background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%); color: #fff; }
html[data-bs-theme="light"] body.dx-messages-page .wa-msg-day span,
html[data-bs-theme="light"] body.dx-messages-page .wa-encryption-notice { background: #fff; color: #667085; }
html[data-bs-theme="light"] body.dx-messages-page .wa-input { background: #f8fafc; }
html[data-bs-theme="light"] .wa-icon-btn { background: #fff; }
html[data-bs-theme="light"] .wa-icon-btn:hover { color: #4c1d95; background: rgba(124,58,237,.1); }
html[data-bs-theme="light"] .wa-msg-menu { box-shadow: 0 12px 32px rgba(15,23,42,.14); }
html[data-bs-theme="light"] .wa-msg-menu button:hover, html[data-bs-theme="light"] .wa-msg-more:hover { background: rgba(15,23,42,.06); }

/* =====================================================================
   Classroom (v16) — class finder + school management portal
   ===================================================================== */
.dx-cls { --cls-accent: #7c3aed; }
.dx-cls-hero {
    position: relative; overflow: hidden; border-radius: 20px; padding: 28px;
    background:
        radial-gradient(700px 320px at 0% 0%, rgba(124,58,237,.30), transparent 60%),
        radial-gradient(600px 300px at 100% 100%, rgba(6,182,212,.22), transparent 60%),
        var(--donexa-card);
    border: 1px solid var(--donexa-border); margin-bottom: 18px;
}
.dx-cls-hero h1 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--donexa-text); margin: 0 0 4px; }
.dx-cls-hero p.lead { color: var(--donexa-muted); font-size: .95rem; margin: 0 0 18px; }
.dx-cls-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--donexa-primary-2); margin-bottom: 6px; }
.dx-cls-search { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto; gap: 8px; background: var(--donexa-bg-soft); border: 1px solid var(--donexa-border); border-radius: 16px; padding: 8px; }
.dx-cls-field { position: relative; display: flex; align-items: center; min-width: 0; }
.dx-cls-field > i { position: absolute; left: 12px; color: var(--donexa-muted); pointer-events: none; }
.dx-cls-field input, .dx-cls-field select {
    width: 100%; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid transparent; background: var(--donexa-card);
    color: var(--donexa-text); padding: 0 12px 0 36px; font-size: .92rem; outline: none; appearance: auto;
}
.dx-cls-field input:focus, .dx-cls-field select:focus { border-color: rgba(124,58,237,.6); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.dx-cls-search .btn { height: 46px; border-radius: 12px; padding: 0 22px; font-weight: 700; }
.dx-cls-more { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dx-cls-more select { height: 36px; border-radius: 10px; background: var(--donexa-card); color: var(--donexa-text); border: 1px solid var(--donexa-border); padding: 0 10px; font-size: .83rem; max-width: 100%; }
.dx-cls-hero-side { display: flex; flex-direction: column; gap: 12px; }
.dx-cls-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dx-cls-stat { background: var(--donexa-bg-soft); border: 1px solid var(--donexa-border); border-radius: 14px; padding: 10px 12px; }
.dx-cls-stat b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--donexa-text); font-variant-numeric: tabular-nums; }
.dx-cls-stat span { font-size: .72rem; color: var(--donexa-muted); }
.dx-cls-code { background: var(--donexa-bg-soft); border: 1px dashed rgba(124,58,237,.5); border-radius: 14px; padding: 12px; }
.dx-cls-code strong { color: var(--donexa-text); font-size: .9rem; }
.dx-cls-code small { display: block; color: var(--donexa-muted); font-size: .76rem; margin-bottom: 8px; }
.dx-cls-code form { display: flex; gap: 6px; }
.dx-cls-code input { flex: 1; min-width: 0; height: 38px; border-radius: 10px; border: 1px solid var(--donexa-border); background: var(--donexa-card); color: var(--donexa-text); padding: 0 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.dx-cls-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 18px; }
.dx-cls-chips::-webkit-scrollbar { display: none; }
.dx-cls-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--donexa-border); background: var(--donexa-card); color: var(--donexa-text); font-size: .82rem; text-decoration: none; }
.dx-cls-chip:hover, .dx-cls-chip.is-active { border-color: var(--chip, var(--donexa-primary)); color: var(--donexa-text); background: color-mix(in srgb, var(--chip, #7c3aed) 16%, var(--donexa-card)); }
.dx-cls-chip i { color: var(--chip, var(--donexa-primary-2)); }
.dx-cls-chip em { font-style: normal; color: var(--donexa-muted); font-size: .74rem; }
.dx-cls-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.dx-cls-section-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; color: var(--donexa-text); }
.dx-cls-section-head p { margin: 2px 0 0; color: var(--donexa-muted); font-size: .84rem; }
.dx-cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.dx-cls-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--donexa-card); border: 1px solid var(--donexa-border); transition: transform .15s, border-color .15s, box-shadow .15s; }
.dx-cls-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cls-accent) 55%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.dx-cls-card-band { position: relative; height: 78px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: flex-start;
    background: linear-gradient(135deg, var(--cls-accent), color-mix(in srgb, var(--cls-accent) 45%, #0f172a)); color: #fff; }
.dx-cls-card-band .dx-cls-subject { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .92; }
.dx-cls-card-band .dx-cls-ico { position: absolute; right: 14px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem;
    background: var(--donexa-card); color: var(--cls-accent); border: 1px solid var(--donexa-border); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.dx-cls-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.2); color: #fff; backdrop-filter: blur(4px); }
.dx-cls-card-body { padding: 14px 14px 10px; flex: 1; }
.dx-cls-card-body h3 { font-size: 1rem; font-weight: 700; margin: 4px 0 6px; padding-right: 54px; line-height: 1.3; }
.dx-cls-card-body h3 a { color: var(--donexa-text); text-decoration: none; }
.dx-cls-card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.dx-cls-teacher { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--donexa-muted); margin-bottom: 8px; }
.dx-cls-teacher img, .dx-cls-teacher span.av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; color: #fff; background: var(--donexa-gradient); flex: 0 0 auto; }
.dx-cls-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.dx-cls-meta span { font-size: .72rem; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--donexa-muted); border: 1px solid var(--donexa-border); }
.dx-cls-desc { font-size: .82rem; color: var(--donexa-muted); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx-cls-card-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--donexa-border); }
.dx-cls-card-foot .info { font-size: .76rem; color: var(--donexa-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.dx-cls-card-foot .info b { color: var(--donexa-text); }
.dx-cls-card-foot form { margin: 0; }
.dx-cls-btn { border: 0; border-radius: 10px; padding: 7px 14px; font-size: .8rem; font-weight: 700; color: #fff; background: var(--cls-accent); white-space: nowrap; text-decoration: none; display: inline-block; }
.dx-cls-btn:hover { filter: brightness(1.08); color: #fff; }
.dx-cls-btn.is-ghost { background: transparent; color: var(--donexa-text); border: 1px solid var(--donexa-border); }
.dx-cls-btn.is-muted { background: rgba(255,255,255,.06); color: var(--donexa-muted); cursor: default; }
.dx-cls-fee { font-weight: 800; font-size: .76rem; }
.dx-cls-fee.free { color: #4ade80; }
.dx-cls-fee.paid { color: #fbbf24; }
.dx-cls-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 22px; }
.dx-cls-mine a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--donexa-card); border: 1px solid var(--donexa-border); text-decoration: none; color: var(--donexa-text); min-width: 0; }
.dx-cls-mine a:hover { border-color: color-mix(in srgb, var(--cls-accent) 60%, transparent); }
.dx-cls-mine .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--cls-accent); font-size: 1.1rem; }
.dx-cls-mine strong { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-cls-mine small { display: block; font-size: .74rem; color: var(--donexa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-cls-mine .role { margin-left: auto; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 999px; background: rgba(124,58,237,.18); color: #c4b5fd; flex: 0 0 auto; }
.dx-cls-mine .role.is-warn { background: rgba(245,158,11,.16); color: #fbbf24; }
.dx-cls-empty { text-align: center; padding: 40px 20px; border-radius: 16px; border: 1px dashed var(--donexa-border); color: var(--donexa-muted); }
.dx-cls-empty i { font-size: 2rem; display: block; margin-bottom: 8px; color: var(--donexa-primary-2); }
.dx-cls-empty strong { display: block; color: var(--donexa-text); margin-bottom: 4px; }
.dx-cls-pager { display: flex; justify-content: center; gap: 6px; margin: 18px 0; }
.dx-cls-pager a, .dx-cls-pager span { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; display: inline-grid; place-items: center; text-decoration: none; border: 1px solid var(--donexa-border); color: var(--donexa-text); background: var(--donexa-card); font-size: .85rem; }
.dx-cls-pager span.is-active { background: var(--donexa-gradient); color: #fff; border-color: transparent; }
.dx-cls-teach { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; margin-top: 26px; padding: 22px; border-radius: 18px; border: 1px solid var(--donexa-border);
    background: linear-gradient(120deg, rgba(124,58,237,.14), rgba(6,182,212,.08)), var(--donexa-card); }
.dx-cls-teach h2 { font-size: 1.2rem; font-weight: 800; color: var(--donexa-text); margin: 0 0 6px; }
.dx-cls-teach p { color: var(--donexa-muted); font-size: .88rem; margin: 0 0 12px; }
.dx-cls-teach ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dx-cls-teach li { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--donexa-text); }
.dx-cls-teach li i { color: var(--donexa-primary-2); }

/* Public class profile */
.dx-cls-profile-band { border-radius: 20px; padding: 26px; color: #fff; position: relative; overflow: hidden; margin-bottom: 18px;
    background: radial-gradient(500px 240px at 100% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, var(--cls-accent), color-mix(in srgb, var(--cls-accent) 40%, #0b1020)); }
.dx-cls-profile-band h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 6px 0 8px; letter-spacing: -.02em; }
.dx-cls-profile-band .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-cls-profile-band .chips span { background: rgba(255,255,255,.16); border-radius: 999px; padding: 4px 10px; font-size: .78rem; }
.dx-cls-profile-band .big-ico { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 5.5rem; opacity: .18; }
.dx-cls-panel { background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.dx-cls-panel h2 { font-size: 1rem; font-weight: 800; color: var(--donexa-text); margin: 0 0 10px; }
.dx-cls-panel p, .dx-cls-panel li { color: var(--donexa-muted); font-size: .9rem; }
.dx-cls-units { list-style: none; padding: 0; margin: 0; counter-reset: unit; }
.dx-cls-units li { counter-increment: unit; display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--donexa-border); color: var(--donexa-text); }
.dx-cls-units li:last-child { border-bottom: 0; }
.dx-cls-units li::before { content: counter(unit); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: color-mix(in srgb, var(--cls-accent) 20%, transparent); color: var(--cls-accent); flex: 0 0 auto; }
.dx-cls-units small { margin-left: auto; color: var(--donexa-muted); font-size: .76rem; white-space: nowrap; }
.dx-cls-join { position: sticky; top: 80px; }
.dx-cls-join .price { font-size: 1.6rem; font-weight: 800; color: var(--donexa-text); }
.dx-cls-join .price small { font-size: .8rem; color: var(--donexa-muted); font-weight: 500; }
.dx-cls-join .dx-cls-btn { width: 100%; padding: 12px; font-size: .95rem; border-radius: 12px; }
.dx-cls-facts { list-style: none; padding: 0; margin: 14px 0 0; }
.dx-cls-facts li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--donexa-border); font-size: .85rem; color: var(--donexa-muted); }
.dx-cls-facts li b { color: var(--donexa-text); font-weight: 600; text-align: right; }
.dx-cls-alert { border-radius: 12px; padding: 10px 12px; font-size: .85rem; margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; }
.dx-cls-alert.info { background: rgba(6,182,212,.12); color: #67e8f9; }
.dx-cls-alert.warn { background: rgba(245,158,11,.12); color: #fbbf24; }
.dx-cls-alert.bad { background: rgba(239,68,68,.12); color: #f87171; }
.dx-cls-alert.ok { background: rgba(34,197,94,.12); color: #4ade80; }

/* School portal shell (eSkooly-style sidebar) */
.dx-school { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.dx-school-side { position: sticky; top: 76px; background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: 18px; overflow: hidden; }
.dx-school-brand { padding: 16px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--donexa-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--cls-accent) 26%, transparent), transparent); }
.dx-school-brand .ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: var(--cls-accent); flex: 0 0 auto; }
.dx-school-brand strong { display: block; font-size: .92rem; color: var(--donexa-text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dx-school-brand small { display: block; font-size: .72rem; color: var(--donexa-muted); margin-top: 2px; }
.dx-school-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dx-school-nav .lbl { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--donexa-muted); padding: 10px 10px 4px; }
.dx-school-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--donexa-text); text-decoration: none; font-size: .86rem; font-weight: 500; }
.dx-school-nav a .ti { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; flex: 0 0 auto; }
.dx-school-nav a:hover { background: rgba(255,255,255,.05); }
.dx-school-nav a.is-active { background: color-mix(in srgb, var(--cls-accent) 22%, transparent); font-weight: 700; }
.dx-school-nav a .cnt { margin-left: auto; font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #ef4444; color: #fff; }
.dx-school-code { margin: 6px 12px 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--donexa-border); font-size: .76rem; color: var(--donexa-muted); }
.dx-school-code b { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; letter-spacing: .14em; color: var(--donexa-text); margin-top: 2px; }
.dx-school-code button { border: 0; background: transparent; color: var(--donexa-primary-2); font-size: .9rem; padding: 0; }
.dx-school-main { min-width: 0; }
.dx-school-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dx-school-top .crumb { font-size: .78rem; color: var(--donexa-muted); }
.dx-school-top .crumb a { color: var(--donexa-muted); text-decoration: none; }
.dx-school-top .crumb a:hover { color: var(--donexa-text); }
.dx-school-top h1 { font-size: 1.4rem; font-weight: 800; color: var(--donexa-text); margin: 2px 0 0; letter-spacing: -.01em; }
.dx-school-top .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dx-tone-blue { color: #93c5fd; background: rgba(59,130,246,.16); }
.dx-tone-pink { color: #f9a8d4; background: rgba(236,72,153,.16); }
.dx-tone-teal { color: #5eead4; background: rgba(20,184,166,.16); }
.dx-tone-orange { color: #fdba74; background: rgba(249,115,22,.16); }
.dx-tone-slate { color: #cbd5e1; background: rgba(100,116,139,.2); }
.dx-school-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dx-school-stat { position: relative; overflow: hidden; border-radius: 16px; padding: 16px; color: #fff; text-decoration: none; display: block; min-height: 108px; }
.dx-school-stat .t { font-size: .78rem; font-weight: 600; opacity: .9; }
.dx-school-stat .v { font-size: 1.7rem; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dx-school-stat .s { font-size: .74rem; opacity: .85; }
.dx-school-stat i.bg { position: absolute; right: -6px; bottom: -12px; font-size: 4.4rem; opacity: .18; }
.dx-school-stat.c1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.dx-school-stat.c2 { background: linear-gradient(135deg, #10b981, #059669); }
.dx-school-stat.c3 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.dx-school-stat.c4 { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.dx-school-stat:hover { color: #fff; filter: brightness(1.05); }
.dx-school-stat .bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.25); margin-top: 8px; overflow: hidden; }
.dx-school-stat .bar span { display: block; height: 100%; background: #fff; border-radius: 4px; }
.dx-school-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.dx-school-quick a, .dx-school-quick button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: var(--donexa-card); border: 1px solid var(--donexa-border); color: var(--donexa-text); text-decoration: none; font-size: .78rem; font-weight: 600; text-align: center; }
.dx-school-quick a:hover, .dx-school-quick button:hover { border-color: color-mix(in srgb, var(--cls-accent) 55%, transparent); transform: translateY(-1px); }
.dx-school-quick .ti { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; }
.dx-school-card { background: var(--donexa-card); border: 1px solid var(--donexa-border); border-radius: 16px; margin-bottom: 16px; }
.dx-school-card > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--donexa-border); }
.dx-school-card > header h2 { font-size: .98rem; font-weight: 800; color: var(--donexa-text); margin: 0; }
.dx-school-card > header a { font-size: .8rem; color: var(--donexa-primary-2); text-decoration: none; }
.dx-school-card .body { padding: 14px 16px; }
.dx-school-list { list-style: none; margin: 0; padding: 0; }
.dx-school-list li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--donexa-border); }
.dx-school-list li:last-child { border-bottom: 0; }
.dx-school-list .ti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; font-size: .9rem; }
.dx-school-list .main { flex: 1; min-width: 0; }
.dx-school-list .main strong { display: block; font-size: .86rem; color: var(--donexa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-school-list .main small { display: block; font-size: .74rem; color: var(--donexa-muted); }
.dx-school-list .end { font-size: .76rem; color: var(--donexa-muted); white-space: nowrap; text-align: right; }
.dx-school-list img.av, .dx-school-list span.av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--donexa-gradient); font-size: .8rem; }
.dx-school-empty { padding: 26px 16px; text-align: center; color: var(--donexa-muted); font-size: .85rem; }
.dx-school-empty i { display: block; font-size: 1.5rem; margin-bottom: 6px; opacity: .7; }
.dx-pill.dx-pill-violet { color: #c4b5fd; background: rgba(124,58,237,.16); }
.dx-school .donexa-card { border-radius: 16px; }
.dx-school .donexa-card:hover { background: var(--donexa-card); }
.dx-school h3.text-white { font-size: 1.1rem; font-weight: 800; }
.dx-school .table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.03); font-size: .86rem; margin-bottom: 0; }
.dx-school .table > :not(caption) > * > * { border-bottom-color: var(--donexa-border); background: transparent; padding: .65rem .7rem; }
.dx-school .table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--donexa-muted); font-weight: 700; }
.dx-school .classroom-task-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--donexa-border); }
.dx-school .classroom-task-row:last-child { border-bottom: 0; }
.dx-att-opts { display: inline-flex; gap: 4px; }
.dx-att-opts input { position: absolute; opacity: 0; pointer-events: none; }
.dx-att-opts label { min-width: 34px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 800; border: 1px solid var(--donexa-border); color: var(--donexa-muted); cursor: pointer; padding: 0 8px; }
.dx-att-opts input:checked + label.p { background: #16a34a; border-color: #16a34a; color: #fff; }
.dx-att-opts input:checked + label.l { background: #f59e0b; border-color: #f59e0b; color: #1f1300; }
.dx-att-opts input:checked + label.a { background: #ef4444; border-color: #ef4444; color: #fff; }
.dx-att-opts input:checked + label.e { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.dx-att-opts input:focus-visible + label { outline: 2px solid var(--donexa-primary-2); outline-offset: 1px; }
.dx-progress-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--donexa-text);
    background: conic-gradient(var(--cls-accent) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); position: relative; flex: 0 0 auto; }
.dx-progress-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--donexa-card); }
.dx-progress-ring span { position: relative; }

@media (max-width: 1199.98px) {
    .dx-school-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .dx-school { grid-template-columns: 1fr; gap: 12px; }
    .dx-school-side { position: static; border-radius: 14px; }
    .dx-school-brand { padding: 12px; }
    .dx-school-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 6px; }
    .dx-school-nav::-webkit-scrollbar { display: none; }
    .dx-school-nav .lbl, .dx-school-code { display: none; }
    .dx-school-nav a { white-space: nowrap; padding: 6px 10px; }
    .dx-school-nav a .ti { width: 24px; height: 24px; font-size: .8rem; }
    .dx-school-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-cls-search { grid-template-columns: 1fr 1fr; }
    .dx-cls-search .dx-cls-field:first-child { grid-column: 1 / -1; }
    .dx-cls-search .btn { grid-column: 1 / -1; }
    .dx-cls-teach { grid-template-columns: 1fr; }
    .dx-cls-join { position: static; }
}
@media (max-width: 575.98px) {
    .dx-cls-hero { padding: 18px; border-radius: 16px; }
    .dx-cls-search { grid-template-columns: 1fr; }
    .dx-cls-stats { grid-template-columns: repeat(3, 1fr); }
    .dx-school-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dx-school-stat { min-height: 96px; padding: 13px; }
    .dx-school-stat .v { font-size: 1.35rem; }
    .dx-cls-teach ul { grid-template-columns: 1fr; }
}

/* Light theme */
html[data-bs-theme="light"] .dx-cls-hero {
    background: radial-gradient(700px 320px at 0% 0%, rgba(124,58,237,.12), transparent 60%), radial-gradient(600px 300px at 100% 100%, rgba(6,182,212,.10), transparent 60%), #fff; }
html[data-bs-theme="light"] .dx-cls-meta span { background: #f8fafc; }
html[data-bs-theme="light"] .dx-cls-card:hover { box-shadow: 0 10px 28px rgba(15,23,42,.10); }
html[data-bs-theme="light"] .dx-cls-btn.is-muted { background: #f1f5f9; }
html[data-bs-theme="light"] .dx-cls-mine .role { color: #6d28d9; background: rgba(124,58,237,.1); }
html[data-bs-theme="light"] .dx-cls-mine .role.is-warn { color: #b45309; }
html[data-bs-theme="light"] .dx-cls-fee.free { color: #15803d; }
html[data-bs-theme="light"] .dx-cls-fee.paid { color: #b45309; }
html[data-bs-theme="light"] .dx-cls-alert.info { color: #0e7490; }
html[data-bs-theme="light"] .dx-cls-alert.warn { color: #b45309; }
html[data-bs-theme="light"] .dx-cls-alert.bad { color: #b91c1c; }
html[data-bs-theme="light"] .dx-cls-alert.ok { color: #15803d; }
html[data-bs-theme="light"] .dx-school-nav a:hover { background: rgba(15,23,42,.04); }
html[data-bs-theme="light"] .dx-tone-blue { color: #1d4ed8; }
html[data-bs-theme="light"] .dx-tone-pink { color: #be185d; }
html[data-bs-theme="light"] .dx-tone-teal { color: #0f766e; }
html[data-bs-theme="light"] .dx-tone-orange { color: #c2410c; }
html[data-bs-theme="light"] .dx-tone-slate { color: #475569; }
html[data-bs-theme="light"] .dx-pill.dx-pill-violet { color: #6d28d9; }
html[data-bs-theme="light"] .dx-progress-ring { background: conic-gradient(var(--cls-accent) calc(var(--p) * 1%), #e2e8f0 0); }
html[data-bs-theme="light"] .dx-school .table { --bs-table-hover-bg: rgba(15,23,42,.03); }
.dx-school .donexa-card h4 { font-size: 1.02rem; font-weight: 800; }
.dx-school .donexa-card .display-6 { font-size: 1.8rem; font-weight: 800; }
.dx-school details > summary::-webkit-details-marker { display: none; }
.dx-period { font-size: .76rem; color: var(--donexa-muted); white-space: nowrap; }
.dx-period i { color: var(--cls-accent, var(--donexa-primary-2)); }
.dx-locked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(6,182,212,.08); color: var(--donexa-muted); font-size: .86rem; }
.dx-locked i { font-size: 1.2rem; color: #67e8f9; }
.dx-period-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dx-period-fields label { font-size: .74rem; color: var(--donexa-muted); display: block; margin-bottom: 3px; }
@media (max-width: 575.98px) { .dx-period-fields { grid-template-columns: 1fr; } }
.classroom-task-row .dx-pill { align-self: flex-start; flex: 0 0 auto; }