/* GAMIFIED BADGES & TOASTS */
.kn-badge { display:inline-block; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:900; text-transform:uppercase; color:#fff; vertical-align:middle; letter-spacing:0.5px; }

/* PROGRESS BARS FOR PROFILE */
.kn-stat-box { background:#f4f4f4; border-radius:16px; padding:20px; margin-bottom:15px; }
.kn-stat-header { display:flex; justify-content:space-between; margin-bottom:10px; font-size:13px; font-weight:700; }
.kn-bar-bg { background:#ddd; height:10px; border-radius:10px; overflow:hidden; }
.kn-bar-fill { background:linear-gradient(90deg, #ff2d55, #ff9500); height:100%; transition:width 0.5s ease; width:0; }

/* STREAK FIRE ICON */
.streak-fire { width:16px; height:16px; vertical-align:-3px; margin-left:5px; }
.power-streak { filter: hue-rotate(200deg) brightness(1.5); } /* Blue Flame */

/* GIFT BOX UI */
.kn-gift-box { text-align:center; padding:30px; background:#fff; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,0.05); margin-top:20px; cursor:pointer; transition:0.3s; position:relative; overflow:hidden; }
.kn-gift-box:hover { transform:scale(1.02); }
.kn-gift-locked { opacity:0.6; filter:grayscale(1); }
.kn-gift-locked::after { content:'🔒 Locked'; position:absolute; top:10px; right:10px; font-size:10px; font-weight:900; background:#000; color:#fff; padding:4px 8px; border-radius:4px; }