:root{
  --bg:#f4f7fb; --text:#0f172a; --muted:#64748b; --card:#ffffff; --line:#dbe4f0;
  --primary:#2563eb; --secondary:#7c3aed; --hero1:#2563eb; --hero2:#7c3aed; --soft:#eef4ff;
}
html[data-theme="dark"]{
  --bg:#09111f; --text:#e5eefb; --muted:#93a4bd; --card:#0f1b2d; --line:#20324c;
  --primary:#60a5fa; --secondary:#a78bfa; --hero1:#0f172a; --hero2:#1e3a8a; --soft:#0b1526;
}
body{background:linear-gradient(180deg,var(--bg) 0%,var(--soft) 100%);color:var(--text);font-family:Arial,sans-serif;transition:.25s ease;min-height:100vh;}
a{text-decoration:none} .text-muted,.small-muted{color:var(--muted)!important}
.nav-pro{background:linear-gradient(90deg,#111827,#1e293b);} .footer-pro{border-top:1px solid var(--line);background:transparent;}
.card-soft{background:color-mix(in srgb, var(--card) 92%, transparent);border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 50px rgba(15,23,42,.08);color:var(--text)}
.hero{background:linear-gradient(135deg,var(--hero1),var(--hero2));color:#fff;border-radius:28px;padding:2.25rem;box-shadow:0 18px 45px rgba(37,99,235,.25)}
.hero-slider .carousel-item{min-height:260px}.hero p{opacity:.92}.chip{display:inline-flex;gap:.45rem;align-items:center;padding:.5rem .9rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.92rem}
.media-thumb{width:100%;height:220px;object-fit:cover;border-radius:16px;background:#e5e7eb}.video-thumb{width:100%;max-height:240px;border-radius:16px;background:#000}
.chat-box{height:360px;overflow-y:auto;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:15px}.chat-msg{margin-bottom:10px;padding:10px 14px;border-radius:14px;background:rgba(148,163,184,.18);word-break:break-word}.chat-msg.admin{background:rgba(96,165,250,.18);border-left:4px solid var(--primary)}
.stat-card h3{font-size:2rem;margin-bottom:.25rem}.section-title{font-weight:700;margin:2.25rem 0 1rem}.timeline-status{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.timeline-status span{padding:8px 12px;border-radius:999px;background:rgba(99,102,241,.08);font-size:.9rem;border:1px solid var(--line)}
.role-pill{text-transform:capitalize;border-radius:999px;padding:.45rem .8rem;background:rgba(99,102,241,.1);color:var(--secondary);font-weight:600;display:inline-block}.login-box{max-width:500px;margin:auto}.empty-box{padding:32px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:18px}
.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--line)} .form-control,.form-select{background:var(--card);color:var(--text);border-color:var(--line)} .form-control:focus,.form-select:focus{background:var(--card);color:var(--text);border-color:var(--primary);box-shadow:0 0 0 .25rem rgba(37,99,235,.15)}
.section-strip{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:2rem 0 1rem}.profile-avatar{width:78px;height:78px;border-radius:50%;object-fit:cover;background:#dbeafe;border:3px solid rgba(255,255,255,.4)} .mini-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#dbeafe}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.quick-card{padding:1rem;border-radius:18px;border:1px solid var(--line);background:var(--card)}.quick-card i{font-size:1.35rem;color:var(--primary)}
.list-card{border:1px solid var(--line);border-radius:18px;padding:1rem;background:var(--card)} .liji-alert{border-radius:16px}

.whatsapp-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;font-size:28px;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.18);z-index:1080}
.hero-banner{padding:48px 42px;background-size:cover;background-position:center;min-height:360px;color:#fff}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,48,.88),rgba(12,18,48,.45));border-radius:1rem}
.hero-banner > .row{z-index:2}
.chat-meta{font-size:12px;opacity:.8;margin-bottom:4px}
.chat-message.admin{border-left:4px solid #0d6efd}
.chat-message.user{border-left:4px solid #198754}
@media (max-width: 768px){.hero-banner{padding:28px 22px;min-height:300px}.whatsapp-float{right:14px;bottom:14px;width:52px;height:52px}}

html{scroll-behavior:smooth}.site-logo{width:42px;height:42px;object-fit:cover;border-radius:12px;background:#fff;padding:2px}.logo-badge{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap}.hero-stat{padding:.95rem 1rem;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15)}
.kyc-card{background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.14));border:1px solid var(--line);border-radius:24px;padding:1.25rem}.kyc-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;background:rgba(37,99,235,.1);color:var(--primary);font-weight:700}
.notice-card{position:relative;overflow:hidden}.notice-card::after{content:'';position:absolute;right:-40px;top:-40px;width:110px;height:110px;border-radius:50%;background:rgba(99,102,241,.08)}
.chat-shell{background:linear-gradient(180deg, rgba(37,99,235,.06), rgba(124,58,237,.04));border:1px solid var(--line);border-radius:22px;padding:14px}.chat-box{height:420px;background:linear-gradient(180deg,var(--soft),rgba(255,255,255,.5));}
.chat-message{max-width:84%;padding:12px 14px;border-radius:18px;margin-bottom:12px;box-shadow:0 8px 20px rgba(15,23,42,.04)}.chat-message.user{margin-right:auto;background:#fff}.chat-message.admin{margin-left:auto;background:rgba(37,99,235,.12)}
.notification-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;display:inline-block}.fast-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:999px;background:rgba(16,185,129,.14);color:#059669;font-weight:700}
.form-sticky-card{position:sticky;top:95px}.media-thumb,.video-thumb,img{content-visibility:auto}
@media(max-width:768px){.chat-message{max-width:94%}.form-sticky-card{position:static}}


.locked-link{opacity:.9}
.feature-locked{position:relative;overflow:hidden}
.feature-locked::after{content:'KYC Required';position:absolute;right:10px;top:10px;background:#f59e0b;color:#111827;font-size:.75rem;font-weight:700;padding:.3rem .55rem;border-radius:999px}
.kyc-gate-panel{border-width:2px}.kyc-gate-panel.kyc-ok{background:linear-gradient(135deg, rgba(16,185,129,.10), rgba(37,99,235,.06))}.kyc-gate-panel.kyc-locked{background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(239,68,68,.06))}
.gate-note{padding:.85rem 1rem;border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.35)}

.chat-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:#6b7280;margin-bottom:6px}.chat-message .badge{vertical-align:middle;margin-left:6px}.chat-message{border-radius:14px;padding:12px 14px;margin-bottom:12px}.chat-message.user{background:rgba(13,110,253,.08)}.chat-message.admin{background:rgba(25,135,84,.10)}

.typing-indicator{min-height:20px;font-weight:600;color:var(--secondary)}
.chat-status-row{min-height:24px}
.chat-textarea{resize:none;border-radius:14px}
.chat-input-wrap{background:rgba(255,255,255,.45);border:1px solid var(--line);padding:12px;border-radius:18px}
.chat-attachment-image{max-width:220px;max-height:220px;border-radius:14px;border:1px solid var(--line);display:block}
.chat-seen-line{margin-top:6px;font-size:11px;color:#64748b;text-align:right}
.chat-message.mine{border-bottom-right-radius:6px}
.chat-message:not(.mine){border-bottom-left-radius:6px}