/* sisa komponen lama (date picker, grafik, livechat, preferensi) — tetap dipakai halaman panel */
.pref-row{display:flex;gap:8px;margin-top:10px}.pref-chip{flex:1;display:flex;align-items:center;gap:7px;background:var(--soft);border:1.5px solid var(--border);border-radius:11px;padding:8px 10px;color:var(--text);font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;text-align:left}.pref-chip i{font-size:12px;color:var(--utama);width:14px;text-align:center}.pref-chip span:first-of-type{flex:1}.pref-sw{width:30px;height:17px;border-radius:100px;background:var(--utama);position:relative;transition:.25s;flex-shrink:0}.pref-knob{position:absolute;top:2px;left:15px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.25s}.pref-chip.off{color:var(--faint)}.pref-chip.off i{color:var(--faint)}.pref-chip.off .pref-sw{background:#cfd8dc}.pref-chip.off .pref-knob{left:2px}
body.no-anim *,body.no-anim *::before,body.no-anim *::after{animation:none!important;transition:none!important}body.no-anim .fx-eq b::before{display:none}
.livechat{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#1e88e5,#2196f3 55%,#42a5f5);border:1.5px solid rgba(255,255,255,.35);border-radius:14px;padding:11px 12px;margin:0 0 10px;color:#fff;position:relative;overflow:hidden;box-shadow:0 4px 14px rgba(33,150,243,.35)}.livechat .ic{position:relative;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:22px;flex:none}.livechat .ic i.dot{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#4caf50;border:2px solid #2196f3;animation:pulse 1.4s infinite}.livechat b{font-size:13px;display:block}.livechat small{font-size:10px;font-weight:700;opacity:.92}.livechat .ar{margin-left:auto;font-size:12px}
/* date picker */
.dp{position:relative}.dp input{cursor:pointer;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232196f3'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm-1 8v10h12V10H6z'/%3E%3C/svg%3E") no-repeat right 10px center/16px;padding-right:34px}
.dpp{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 14px 40px var(--shadow);width:272px;animation:pop .18s ease}.dpp .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.dpp .h b{font-size:13px;color:var(--text)}.dpp .h button{width:30px;height:30px;border:0;border-radius:8px;background:var(--soft);color:var(--utama);cursor:pointer}.dpp .g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.dpp .g span{font-size:10px;font-weight:800;color:var(--faint);text-align:center;padding:4px 0}.dpp .g button{aspect-ratio:1;border:0;border-radius:8px;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--text);cursor:pointer}.dpp .g button:hover{background:var(--soft);color:var(--utama)}.dpp .g button.on{background:var(--utama);color:#fff}.dpp .g button.td{box-shadow:inset 0 0 0 1.5px var(--utama)}.dpp .g button:disabled{opacity:.3;cursor:not-allowed}.dpp .g button.o{opacity:.35}
/* chart SaaS */
.cj{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;min-width:0}.cj h4{margin:0 0 10px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px}.cj h4 small{margin-left:auto;font-weight:700;color:var(--faint);font-size:11px}.cj .cv{position:relative;height:240px}.cjg{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:14px}@media(min-width:1024px){.cjg{grid-template-columns:1fr 1fr}.cjg .cj.wide{grid-column:1/-1}}.cj.wide .cv{height:300px}
.cx{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}.cx .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.cx .hd b{font-size:14px;color:var(--text)}.cx .tag{font-size:10.5px;font-weight:900;padding:4px 9px;border-radius:999px;background:var(--soft);color:var(--utama);border:1px solid var(--border);cursor:pointer}.cx .tag.on{background:var(--utama);color:#fff;border-color:var(--utama)}.cx .tot{margin-left:auto;text-align:right}.cx .tot b{font-size:18px;color:var(--utama)}.cx .tot small{display:block;font-size:10px;color:var(--faint);font-weight:700}
.cx .cxbars{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:18px;border-bottom:1px solid var(--border)}.cx .cxb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;min-width:0;background:none;border-radius:0;overflow:visible}.cx .cxb i{display:block;width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--utama),var(--accent-dark));transform-origin:bottom;animation:cxg .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*60ms);transition:height .5s}.cx .cxb .v{position:absolute;top:-16px;font-size:10px;font-weight:900;color:var(--utama);white-space:nowrap;opacity:0;transition:.2s}.cx .cxb:hover .v{opacity:1}.cx .cxb.on .v{opacity:1}@keyframes cxg{from{transform:scaleY(0)}}
.cx .lbl{display:flex;gap:8px;margin-top:6px}.cx .lbl span{flex:1;text-align:center;font-size:10px;font-weight:700;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis}.cx.many .lbl span{overflow:visible;white-space:nowrap;font-size:9px}.cx.many .lbl span:not(:nth-child(5n+1)):not(:last-child){visibility:hidden}.cx.many .cxbars{gap:3px}.cx .lbl span.on{color:var(--utama);font-weight:900}.cx .more{margin-top:10px;text-align:center}