/* ================================================================
   Guru Pintar — Microinteractions & Personalization Layer
   ================================================================ */
.btn, .quick-action-btn, .sidebar-item, .cp-btn { position: relative; overflow: hidden; }
.ripple-effect { position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:rippleAnim .5s ease-out; pointer-events:none; }
[data-theme="dark"] .ripple-effect, [data-theme="royal"] .ripple-effect { background:rgba(255,255,255,.25); }
@keyframes rippleAnim { to { transform:scale(3); opacity:0; } }

.card,.stat-card,.counter-card,.quick-action-btn,.video-card,.lesson-card { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.btn:active,.quick-action-btn:active,.cp-btn:active { transform:scale(.96); transition:transform .1s ease; }

@keyframes popIn { 0%{transform:scale(1)} 40%{transform:scale(1.15)} 100%{transform:scale(1)} }
.cp-btn.cp-1,.cp-btn.cp-2,.cp-btn.cp-3,.cp-btn.cp-4 { animation:popIn .3s ease; }

@keyframes toastBounceIn { 0%{opacity:0;transform:translateX(40px) scale(.9)} 60%{opacity:1;transform:translateX(-4px) scale(1.02)} 100%{transform:translateX(0) scale(1)} }
.toast { animation: toastBounceIn .4s cubic-bezier(.34,1.56,.64,1) !important; }

@keyframes badgeGlow { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)} 50%{box-shadow:0 0 0 6px rgba(245,158,11,0)} }
.badge-pro-pill { animation: badgeGlow 2s ease-in-out 2; }

.sidebar-item.active { transition: background .2s ease, box-shadow .3s cubic-bezier(.34,1.56,.64,1); }

.quick-action-btn { cursor:grab; }
.quick-action-btn.dragging { opacity:.4; cursor:grabbing; }
.quick-action-btn.drag-over { border-color:var(--primary); background:var(--primary-light); }
.qa-usage-badge { position:absolute; top:4px; right:4px; font-size:8px; font-weight:700; color:var(--text-muted); background:var(--bg-main); padding:1px 5px; border-radius:999px; opacity:0; transition:opacity .2s; }
.quick-action-btn:hover .qa-usage-badge { opacity:1; }

:root { --density-pad:20px; --density-gap:16px; --density-font:14px; }
[data-density="compact"] { --density-pad:12px; --density-gap:10px; --density-font:13px; }
[data-density="compact"] .card { padding: var(--density-pad) calc(var(--density-pad) + 4px); }
[data-density="compact"] .app-content { padding:14px; }
[data-density="compact"] .stats-grid,[data-density="compact"] .quick-actions,[data-density="compact"] .counter-grid { gap:var(--density-gap); }
[data-density="compact"] body { font-size:var(--density-font); }
[data-density="compact"] .sidebar-item { padding:6px 10px; }

.ai-insight-card { background:linear-gradient(135deg,var(--primary-light),var(--accent-light)); border:1px solid var(--border-mid); border-radius:var(--radius); padding:16px 20px; margin-bottom:20px; display:flex; gap:14px; align-items:flex-start; animation:slideDown .4s cubic-bezier(.34,1.56,.64,1); position:relative; overflow:hidden; }
.ai-insight-card::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:translateX(-100%); animation:shimmerSweep 3s ease-in-out infinite; }
@keyframes shimmerSweep { 50%{transform:translateX(100%)} 100%{transform:translateX(100%)} }
.ai-insight-icon { width:40px; height:40px; border-radius:12px; flex-shrink:0; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; font-size:18px; position:relative; z-index:1; overflow:hidden; }
.ai-insight-icon img { width:100%; height:100%; object-fit:cover; }
.ai-insight-content { flex:1; position:relative; z-index:1; }
.ai-insight-content .label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--primary); margin-bottom:4px; }
.ai-insight-content p { font-size:13px; line-height:1.6; color:var(--text-primary); }
.ai-insight-action { font-size:12px; font-weight:700; color:var(--primary); margin-top:8px; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.ai-insight-dismiss { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; flex-shrink:0; position:relative; z-index:1; }
.ai-insight-skeleton { display:flex; gap:14px; align-items:center; }
.ai-insight-skeleton .sk-icon { width:40px;height:40px;border-radius:12px;background-size:200% 100%;background-image:linear-gradient(90deg,var(--border) 25%,var(--bg-main) 50%,var(--border) 75%);animation:shimmer 1.4s infinite }
.ai-insight-skeleton .sk-lines { flex:1 }
.ai-insight-skeleton .sk-line { height:10px;border-radius:4px;margin-bottom:6px;background-size:200% 100%;background-image:linear-gradient(90deg,var(--border) 25%,var(--bg-main) 50%,var(--border) 75%);animation:shimmer 1.4s infinite }

@media (max-width:768px) {
  .ai-insight-card { flex-direction:column; }
  .quick-action-btn { cursor:default; }
}